/* ==========================================================================
   EARVU ADMIN – FINAL UNIFIED STYLESHEET v2
   Contenido = earvu_admin_core.css + earvu_admin.css + earvu_admin_extras.css
   (sin modificar reglas, solo concatenadas en este orden)
   ========================================================================== */

/* =========================================================
   EarVu — Configuración general del sitio (Site Settings)
   Estilo alineado con "Aspecto futuro de tu web"
   ========================================================= */

/* --------- Paleta base --------- */

:root {
  --ss-accent: var(--accent-color, #6c63ff);
  --ss-bg: #f5f5f8;
  --ss-card: #ffffff;
  --ss-text: #111827;
  --ss-muted: #6b7280;
  --ss-border: rgba(15, 23, 42, 0.09);
}

body.dark-mode {
  --ss-bg: #050709;
  --ss-card: #0b0f12;
  --ss-text: #e5e7eb;
  --ss-muted: #9ca3af;
  --ss-border: rgba(148, 163, 184, 0.28);
}

/* --------- Hero superior (título + plan) --------- */

.site-hero-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: stretch;
}

.site-hero-main {
  flex: 1 1 260px;
  min-width: 0;
  padding: 18px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1d2671, #5a60ff, #ff884b);
  color: #f9fafb;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

.site-hero-main::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.16), transparent 55%),
              radial-gradient(circle at 120% 0%, rgba(255,255,255,0.10), transparent 55%);
  opacity: 0.9;
  pointer-events: none;
}

.site-hero-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  position: relative;
  z-index: 1;
}

.site-hero-title .emoji {
  font-size: 1.4rem;
}

.site-hero-subtitle {
  font-size: 0.95rem;
  opacity: 0.95;
  max-width: 520px;
  position: relative;
  z-index: 1;
}

.site-hero-plan {
  flex: 0 0 260px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Plan card coherente con site_identity */
.plan-hero-card {
  min-width: 240px;
  max-width: 280px;
  padding: 12px 16px;
  border-radius: 16px;
  background: radial-gradient(circle at top left, #fef9c3, #facc15);
  color: #1f2933;
  box-shadow:
    0 16px 32px rgba(180, 83, 9, 0.55),
    0 0 0 1px rgba(248, 250, 252, 0.5);
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.plan-hero-card .plan-hero-icon {
  font-size: 1.4rem;
}

.plan-hero-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.plan-hero-label {
  font-weight: 700;
  font-size: 0.92rem;
}

.plan-hero-text {
  font-size: 0.85rem;
}

/* Variantes por plan (por si quieres matizar en el futuro) */
.plan-hero-card.plan-free {
  background: radial-gradient(circle at top left, #e0f2fe, #38bdf8);
  box-shadow: 0 16px 28px rgba(56, 189, 248, 0.5);
}

.plan-hero-card.plan-senior {
  background: radial-gradient(circle at top left, #dcfce7, #22c55e);
  box-shadow: 0 16px 28px rgba(34, 197, 94, 0.5);
}

.plan-hero-card.plan-pro {
  background: radial-gradient(circle at top left, #f5d0fe, #e879f9);
  box-shadow: 0 16px 28px rgba(232, 121, 249, 0.5);
}

.plan-hero-card.plan-premium {
  background: radial-gradient(circle at top left, #fef9c3, #facc15);
}

/* --------- Secciones del formulario --------- */

.form-admin.enhanced-form {
  margin-top: 0.5rem;
}

.ss-section {
  background: radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 55%),
              var(--ss-card);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 20px;
  border: 1px solid var(--ss-border);
  box-shadow:
    10px 14px 30px rgba(15, 23, 42, 0.32),
    -8px -8px 18px rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease,
    background 0.25s ease;
}

.ss-section:hover,
.ss-section:focus-within {
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.45),
    16px 20px 40px rgba(15, 23, 42, 0.6);
  transform: translateY(-1px);
}

/* Títulos y notas */
.section-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ss-text);
}

.section-note {
  font-size: 0.9rem;
  color: var(--ss-muted);
  margin-bottom: 1rem;
}

/* Grid y grupos */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem 1.6rem;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--ss-text);
}

/* Inputs */
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="email"],
.form-group textarea,
.form-group select {
  width: 100%;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  padding: 9px 11px;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.95);
  color: #111827;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    transform 0.1s ease;
}

.form-group select option {
  background: #ffffff;
  color: #111827;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--ss-accent);
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.5);
}

body.dark-mode .form-group input[type="text"],
body.dark-mode .form-group input[type="url"],
body.dark-mode .form-group input[type="email"],
body.dark-mode .form-group textarea,
body.dark-mode .form-group select {
  background: #020617;
  color: var(--ss-text);
  border-color: rgba(148, 163, 184, 0.7);
  box-sizing: border-box;
}

body.dark-mode .form-group select option {
  background: #020617;
  color: var(--ss-text);
}

/* Placeholders */
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(148, 163, 184, 0.5);
}

/* Color picker */
.color-group .color-preview {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.color-group input[type="color"] {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.6);
  border-radius: 10px;
  width: 40px;
  height: 36px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  box-shadow:
    4px 4px 8px rgba(15, 23, 42, 0.25),
    -3px -3px 6px rgba(255, 255, 255, 0.4);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.color-group input[type="color"]:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px rgba(129, 140, 248, 0.7),
    6px 6px 12px rgba(15, 23, 42, 0.35);
}

.color-group .hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.85rem;
  color: var(--ss-muted);
}

/* Logo preview */
.logo-preview {
  margin-top: 0.6rem;
}

.logo-preview img {
  max-width: 200px;
  max-height: 80px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.6);
}

/* Checkbox inline */
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--ss-muted);
}

.checkbox-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--ss-accent);
}

/* Help text */
.help-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--ss-muted);
}

/* --------- Botón Guardar (mismo estilo que site_identity) --------- */

.form-actions.sticky {
  margin-top: 8px;
  padding: 18px 0 4px;
  background: transparent;
  text-align: right;
}

.btn.primary.large {
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6c63ff, #8b5cf6);
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow:
    0 14px 28px rgba(76, 81, 191, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.09);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.15s ease;
}

.btn.primary.large:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 18px 36px rgba(76, 81, 191, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ------------------------------------------------------- */
/*   Botón Azul EarVu Premium (round)                      */
/* ------------------------------------------------------- */

.btn.evu-blue,
a.btn.evu-blue {
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3da2ff, #0066ff);
  border: none;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow:
    0 14px 28px rgba(0, 102, 255, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.15s ease;
}

.btn.evu-blue:hover,
a.btn.evu-blue:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 34px rgba(0, 102, 255, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

.btn.evu-blue:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ------------------------------------------------------- */
/*   Botón Verde EarVu Premium (round)                     */
/* ------------------------------------------------------- */

.btn.evu-green,
a.btn.evu-green {
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #059669);
  border: none;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow:
    0 14px 28px rgba(5, 150, 105, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.15s ease;
}

.btn.evu-green:hover,
a.btn.evu-green:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 34px rgba(5, 150, 105, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

.btn.evu-green:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ------------------------------------------------------- */
/*   Botón Rojo EarVu Premium (round)                      */
/* ------------------------------------------------------- */

.btn.evu-red,
a.btn.evu-red {
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f87171, #dc2626);
  border: none;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow:
    0 14px 28px rgba(220, 38, 38, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.15s ease;
}

.btn.evu-red:hover,
a.btn.evu-red:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 34px rgba(220, 38, 38, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

.btn.evu-red:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ------------------------------------------------------- */
/*   Botón Gris EarVu Premium (round)                      */
/* ------------------------------------------------------- */

.btn.evu-gray,
a.btn.evu-gray {
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  border: none;
  color: #111 !important;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow:
    0 14px 28px rgba(55, 65, 81, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.09);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.15s ease;
}

.btn.evu-gray:hover,
a.btn.evu-gray:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow:
    0 18px 34px rgba(55, 65, 81, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.14);
}

.btn.evu-gray:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Evita que los botones verdes se expandan al 100% */
.btn.evu-green,
.btn.evu-blue,
.btn.evu-red,
.btn.evu-grey {
    width: auto !important;
    display: inline-block !important;
    max-width: fit-content;
    margin-top: 6px;
}

/* Para que en .form-group.full no se estiren */
.form-group.full .btn.evu-green,
.form-group.full .btn.evu-blue,
.form-group.full .btn.evu-red,
.form-group.full .btn.evu-grey {
    align-self: flex-start;
}


/* ============================================================
   EARVU PRO — CHIP SYSTEM (global)
   Degradados premium + compatibilidad con light/dark mode
   ============================================================ */

.evu-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.18),
        inset 0 0 6px rgba(255,255,255,0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.evu-chip:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 14px rgba(0,0,0,0.22),
        inset 0 0 10px rgba(255,255,255,0.35);
}

/* --------- TIPOS --------- */

/* Azul / "info" */
.evu-chip.blue {
    background: linear-gradient(135deg, #3da2ffcc, #0066ffcc);
    color: #fff;
}

/* Verde / "success" */
.evu-chip.green {
    background: linear-gradient(135deg, #34d399dd, #059669dd);
    color: #fff;
}

/* Amarillo / "warning" */
.evu-chip.yellow {
    background: linear-gradient(135deg, #facc15dd, #eab308dd);
    color: #4a3a00;
}

/* Rojo / "danger" */
.evu-chip.red {
    background: linear-gradient(135deg, #f87171dd, #dc2626dd);
    color: #fff;
}

/* Gris / "neutral" */
.evu-chip.gray {
    background: linear-gradient(135deg, #e5e7ebdd, #d1d5dbdd);
    color: #111;
}

/* Violeta / “AI / Creativo” */
.evu-chip.purple {
    background: linear-gradient(135deg, #8b5cf6dd, #6d28eddc);
    color: #fff;
}

/* Dorado / PREMIUM */
.evu-chip.gold {
    background: linear-gradient(135deg, #ffd700dd, #ff9900dd);
    color: #442200;
    box-shadow:
        0 4px 12px rgba(255,165,0,0.35),
        inset 0 0 8px rgba(255,255,255,0.3);
}

/* ---------- MODO CLARO ---------- */

body:not(.dark-mode) .evu-chip {
    box-shadow:
        0 3px 8px rgba(0,0,0,0.1),
        inset 0 0 4px rgba(255,255,255,0.4);
}

/* Fuerza contraste en modo claro */
body:not(.dark-mode) .evu-chip.yellow {
    color: #4a3a00;
}

body:not(.dark-mode) .evu-chip.gold {
    color: #553000;
}

/* ---------- MODO OSCURO ---------- */

body.dark-mode .evu-chip {
    box-shadow:
        0 4px 10px rgba(0,0,0,0.55),
        inset 0 0 6px rgba(255,255,255,0.1);
}

body.dark-mode .evu-chip.gray {
    background: linear-gradient(135deg, #9ca3afaa, #6b7280dd);
    color: #eee;
}

body.dark-mode .evu-chip.yellow {
    background: linear-gradient(135deg, #eab308cc, #ca8a04cc);
    color: #fff2b3;
}

body.dark-mode .evu-chip.gold {
    background: linear-gradient(135deg, #d4a500dd, #a86b00dd);
    color: #fff5d2;
}




/* --------- Responsive --------- */

@media (max-width: 900px) {
  .site-hero-banner {
    flex-direction: column;
  }

  .site-hero-plan {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .ss-section {
    padding: 18px 16px;
  }

  .site-hero-main {
    padding: 16px 18px;
  }
}


/* ========================================================================== */
/*  EARVU ADMIN - CORE STYLES (versión depurada y coherente con extras.css)   */
/* ========================================================================== */

/* --- Variables globales --- */
:root {
    --card-bg: #ffffff;
    --text-main: #1f1f1f;
    --text-secondary: #555555;
    --border-color: rgba(0, 0, 0, 0.1);
    --input-bg: #f9f9f9;
    --accent-color: #007bff;
    --layout-max-width: 1600px;
}

body.dark-mode {
    --card-bg: #1f1f1f;
    --text-main: #eaeaea;
    --text-secondary: #cccccc;
    --border-color: rgba(255, 255, 255, 0.12);
    --input-bg: #2b2d36;
    --accent-color: #2293ff;
}

/* === Sutileza de texto general === */
html,
body {
    font-family: "Poppins", "Inter", "Segoe UI", "Roboto", sans-serif;
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-main);
    letter-spacing: 0.01em;
}

/* --- Contenedor principal --- */
.container {
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 20px 32px;
}

/* --- Layout del dashboard --- */
.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: flex-start;
}

.dashboard-layout.fade-in {
    overflow: visible !important;
}

.fade-in {
    transform: none !important; /* evita stacking context que corta modales */
}

@media (min-width: 992px) {
    .dashboard-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .dashboard-main {
        flex: 1 1 72%;
        padding-right: 24px;
    }

    .dashboard-help {
        flex: 1 1 28%;
        max-height: calc(100vh - 180px);
        overflow-y: auto;
        position: sticky;
        top: 100px;
    }
}

/* --- Cabecera del dashboard (bloque superior) --- */
.dashboard-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 10px 0 25px 0;
    padding: 16px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.12), rgba(0, 204, 255, 0.05));
    box-shadow: inset 0 0 25px rgba(0, 128, 255, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.dashboard-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 120%, rgba(0, 150, 255, 0.1), transparent 60%),
                radial-gradient(circle at 90% -10%, rgba(255, 200, 0, 0.1), transparent 60%);
    z-index: 0;
    pointer-events: none;
}

.dashboard-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 1;
}

.dashboard-title .emoji {
    font-size: 2.1rem;
    color: #0a5cff;
    filter: drop-shadow(0 0 6px rgba(0, 160, 255, 0.4));
    transform: translateY(2px);
    transition: transform .3s ease, filter .3s ease;
}

.dashboard-title:hover .emoji {
    transform: translateY(-1px) rotate(-10deg);
    filter: drop-shadow(0 0 10px rgba(0, 180, 255, 0.8));
}

.dashboard-title .text {
    background: linear-gradient(90deg, #007bff, #ff6a00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dashboard-header p {
    margin: 0;
    font-size: 0.96rem;
    color: var(--text-main);
    opacity: 0.9;
    z-index: 1;
}

.dashboard-main {
  min-width: 0;
  flex: 1 1 auto;
  z-index: 3; /* 🔼 por encima del panel lateral para evitar solapes en la parte baja */
}

/* --- Modo oscuro de cabecera --- */
body.dark-mode .dashboard-header {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.15), rgba(255, 150, 0, 0.08));
    box-shadow: inset 0 0 25px rgba(0, 128, 255, 0.15), 0 3px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .dashboard-title .text {
    background: linear-gradient(90deg, #66aaff, #ffb347);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-mode .dashboard-title .emoji {
    color: #dbeaff;
}

body.dark-mode .dashboard-header p {
    color: #b5cfff;
    opacity: 0.85;
}

/* --- Ayuda contextual --- */
.dashboard-help {
  position: sticky;
  top: 100px;
  align-self: flex-start;
  z-index: 2;
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 16px 20px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  transition: all 0.3s ease;
}

/* 🧩 RESPONSIVE: si el ancho no da, la ayuda pasa abajo */
@media (max-width: 1500px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-help {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    width: 100% !important;
    margin-top: 16px;
    background: rgba(30, 30, 40, 0.7);
    backdrop-filter: blur(8px);
    z-index: 1;
  }
}

/* 🌙 Modo oscuro */
body.dark-mode .dashboard-help {
    background: radial-gradient(circle at 25% 120%, rgba(0, 150, 255, 0.1), transparent 60%),
                radial-gradient(circle at 90% -10%, rgba(255, 200, 0, 0.1), transparent 60%),
                linear-gradient(135deg, rgba(0, 102, 255, 0.15), rgba(255, 160, 0, 0.08));
    border-left: 3px solid rgba(0, 160, 255, 0.25);
    color: #c8e0ff;
    box-shadow: inset 0 0 25px rgba(0, 128, 255, 0.15), 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Encabezados dentro del panel */
.dashboard-help h2,
.dashboard-help h3 {
    color: #009dff;
}

/* --- Grid de tarjetas --- */
.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

/* --- Tarjetas base --- */
.card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card-bg);
    border-radius: 16px;
    padding: 16px 20px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
    min-height: 80px !important;
}

.card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: inherit;
    transition: background .2s ease;
}

.card:hover::after {
    background: rgba(0, 0, 0, 0.1);
}

.card > * {
    position: relative;
    z-index: 2;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .3);
}

.card.disabled {
    opacity: .6;
    pointer-events: none;
}

/* Tipos */
.card[data-role="basic"] {
    background: linear-gradient(135deg, #007bff, #00bfff);
    color: #fff;
}

.card[data-role="admin"] {
    background: linear-gradient(135deg, #ff7e00, #ff3b3b);
    color: #fff;
}

.card[data-role="superadmin"] {
    background: linear-gradient(135deg, #2b2b2b, #1a1a1a);
    color: #fff;
}

/* Iconos y texto */
.icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.info strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
}

.info span {
    font-size: 0.88rem;
    opacity: 0.9;
}

/* ========================================================================== */
/* LEGACY — FORM SYSTEM (pre sistema ss / form-group)                          */
/*                                                                            */
/* Usado solo por pantallas antiguas.                                         */
/* NO usar en módulos nuevos.                                                 */
/* Migrar progresivamente a .form-group + variables --ss-*                    */
/* Eliminable tras limpieza global en 0.9.x                                   */
/* ========================================================================== */

.form-admin input:not([type="checkbox"]),
.form-admin textarea,
.form-admin select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 0.95rem;
    color: var(--text-light);
    width: 100%;
    transition: all 0.15s ease;
    height: 42px;
    box-sizing: border-box;
}

.form-admin textarea {
    height: auto;
    min-height: 90px;
    resize: vertical;
}

.form-admin input:focus,
.form-admin textarea:focus,
.form-admin select:focus {
    outline: none;
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
}

/* ========================================================================== */
/* END LEGACY — FORM SYSTEM                                                    */
/* ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #007bff, #00bfff);
    color: #fff;
    padding: 8px 14px;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #005fcc, #0099cc);
    transform: translateY(-1px);
}

/* --- Animación de entrada --- */
.fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp .35s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========================================================================== */
/* EARVU ADMIN - EXTRAS: Tablas y alertas                                     */
/* (archivo consolidado)                                                       */
/* ========================================================================== */

/* === TABLAS ADMIN ======================================================== */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 0.95rem;
}

.admin-table thead {
    background: linear-gradient(90deg, #007bff, #00bfff);
    color: #fff;
    text-align: left;
}

.admin-table th,
.admin-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.admin-table tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.admin-table tr:hover {
    background: rgba(0, 122, 255, 0.05);
    transition: background 0.2s ease;
}

.admin-table td.empty {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
}

/* === Tipos de alerta ===================================================== */
.alert {
    border-radius: 10px;
    padding: 12px 16px;
    margin: 8px 0;
    font-weight: 500;
}

.alert-error {
    background: rgba(255, 0, 0, 0.08);
    color: #a10000;
}

.alert-warning {
    background: rgba(255, 200, 0, 0.1);
    color: #7a6000;
}

.alert-system {
    background: rgba(0, 120, 255, 0.08);
    color: #004085;
}

.alert-default {
    background: rgba(0, 0, 0, 0.02);
}

/* === Modo oscuro (tablas/alertas) ======================================= */
body.dark-mode .admin-table {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}

body.dark-mode .admin-table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .admin-table tr:hover {
    background: rgba(0, 122, 255, 0.08);
}

body.dark-mode .alert-error {
    background: rgba(255, 80, 80, 0.15);
    color: #ffaaaa;
}

body.dark-mode .alert-warning {
    background: rgba(255, 200, 0, 0.12);
    color: #ffe58f;
}

body.dark-mode .alert-system {
    background: rgba(0, 122, 255, 0.12);
    color: #9ecbff;
}

body.dark-mode .alert-default {
    background: rgba(255, 255, 255, 0.03);
}

/* ========================================================================== */
/* EARVU ADMIN - EXTRAS: API Logs y filtros                                   */
/* ========================================================================== */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 18px;
}

.filter-bar input,
.filter-bar select {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 0.92rem;
}

.filter-bar input::placeholder {
    color: var(--text-secondary);
}

.filter-bar .btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.filter-bar .btn-outline:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.filter-bar .btn-outline.danger:hover {
    color: #e74c3c;
    border-color: #e74c3c;
}

/* === Tabla de registros API ============================================== */

.api-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--card-bg);
    color: var(--text-main);
    border-radius: 12px;
    overflow: hidden;
}

.api-log-table th,
.api-log-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-color);
}

.api-log-table th {
    background: linear-gradient(90deg, #007bff, #00bfff);
    color: #fff;
    text-align: left;
}

.api-log-table tr:hover {
    background: rgba(0, 122, 255, 0.05);
}

.api-log-table td.ok {
    color: #27ae60;
    font-weight: 600;
}

.api-log-table td.error {
    color: #e74c3c;
    font-weight: 600;
}

.api-log-table td.empty {
    text-align: center;
    padding: 18px;
    opacity: 0.75;
    color: var(--text-secondary);
}

body.dark-mode .api-log-table th {
    background: linear-gradient(90deg, #2293ff, #007bff);
}

body.dark-mode .api-log-table td {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

body.dark-mode .api-log-table tr:hover {
    background: rgba(0, 122, 255, 0.08);
}

/* ========================================================================== */
/* EARVU ADMIN — MODALES REUTILIZABLES (V8.x Premium Signature Edition)       */
/* ========================================================================== */

.modal-earvu {
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);

    display: flex;
    justify-content: center;
    align-items: flex-start;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    padding-top: 7vh;
}

.modal-earvu.show {
    opacity: 1;
    pointer-events: all;
}

/* ---------------------------------------- */
/* CAJA DEL MODAL                           */
/* ---------------------------------------- */
.modal-earvu .modal-content {
    background: var(--ss-surface-strong, #1e2230);
    color: var(--ss-text);

    border-radius: 18px;
    width: 460px;
    max-width: 92vw;
    padding: 28px 30px 32px;

    /* Glow EarVu */
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.40),
        0 0 0 1px rgba(255,255,255,0.03),
        0 0 40px rgba(0, 130, 255, 0.15),
        0 0 55px rgba(255, 128, 0, 0.12);

    border: none;

    position: relative;
    overflow: hidden;

    transform: translateY(18px) scale(0.96);
    opacity: 0;
    transition:
        opacity 0.26s ease,
        transform 0.26s cubic-bezier(0.15, 0.85, 0.25, 1);
}

.modal-earvu.show .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ---------------------------------------- */
/* GLOW BAR SUPERIOR (firma EarVu)          */
/* ---------------------------------------- */
.modal-earvu .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;

    width: 100%;
    background: linear-gradient(90deg, #ff8c00, #008cff);
    box-shadow: 0 0 16px rgba(255, 140, 0, 0.4);
}

/* ---------------------------------------- */
/* TÍTULOS                                   */
/* ---------------------------------------- */
.modal-title {
    font-size: 1.32rem;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--ss-primary-text);
}

/* ---------------------------------------- */
/* FORMULARIO                                */
/* ---------------------------------------- */
.modal-earvu .form-group {
    margin-bottom: 16px;
}

.modal-earvu .form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 6px;
    color: var(--ss-text-strong);
}

.modal-earvu input,
.modal-earvu select,
.modal-earvu textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;

    background: var(--ss-input-bg-solid, #12131a);
    border: 1px solid var(--ss-border);
    color: var(--ss-text);

    transition: border-color 0.2s ease, background 0.2s ease;
}

.modal-earvu input:focus,
.modal-earvu select:focus {
    border-color: var(--ss-primary-bright);
    background: var(--ss-input-bg-focus, #0f1117);
    outline: none;
}

/* ---------------------------------------- */
/* BOTONES                                   */
/* ---------------------------------------- */
.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 26px;
}

/* Estilos base de los botones */
.modal-buttons .btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;

    transition: opacity 0.2s ease, transform 0.15s ease;
}

.modal-buttons .btn:hover {
    opacity: 0.90;
    transform: translateY(-1px);
}

.modal-buttons .btn:active {
    transform: translateY(0px);
}

/* ---------------------------------------- */
/* BOTONES EARVU OFICIALES                   */
/* ---------------------------------------- */

/* Guardar → Siempre botón azul EarVu */
/* (equivalente a primary large) */
.modal-buttons .btn-primary {
    background: var(--evu-blue, #007bff);
    color: #fff;
    border: none;
}

/* Cancelar → Botón gris */
.modal-buttons .btn-secondary {
    background: var(--ss-muted);
    color: var(--ss-text);
    border: none;
}

/* Botón rojo para confirmaciones (si aplica) */
.btn-evu-red {
    background: #e63838 !important;
    color: #fff !important;
}

/* ---------------------------------------- */
/* EVU RED — Hover consistente              */
/* ---------------------------------------- */

.evu-red:hover,
.btn-evu-red:hover,
.modal-buttons .evu-red:hover {
    background: #c62828 !important;
    box-shadow: 0 0 0 2px rgba(214, 40, 40, 0.25);
}

/* ---------------------------------------- */
/* MODO OSCURO                               */
/* ---------------------------------------- */
body.dark-mode .modal-earvu .modal-content {
    background: rgba(22, 24, 32, 1);
    color: var(--ss-text-light);
}

/* ARREGLO: Select blanco en modo oscuro */
body.dark-mode .modal-earvu select {
    background: var(--ss-input-bg-solid, #12131a) !important;
    color: var(--ss-text-light, #f5f5f5) !important;
    border-color: var(--ss-border-dark, rgba(255,255,255,0.15)) !important;
}


/* ---------------------------------------- */
/* MODO CLARO (ROOT) — Modal más legible     */
/* ---------------------------------------- */

:root .modal-earvu .modal-content {
    background: var(--ss-surface, #ffffff);
    color: var(--ss-text-strong, #222);

    border: 1px solid var(--ss-border-light, rgba(0,0,0,0.12));

    /* Glow EarVu más suave para modo claro */
    box-shadow:
        0 18px 45px rgba(0,0,0,0.18),
        0 0 0 1px rgba(0,0,0,0.04),
        0 0 28px rgba(0, 130, 255, 0.10),
        0 0 35px rgba(255, 128, 0, 0.08);
}

/* Inputs visibles en modo claro */
:root .modal-earvu input,
:root .modal-earvu select,
:root .modal-earvu textarea {
    background: #ffffff;
    border: 1px solid var(--ss-border-light, rgba(0,0,0,0.18));
    color: #222;
}

:root .modal-earvu input:focus,
:root .modal-earvu select:focus {
    border-color: var(--ss-primary, #007bff);
    background: #f6f8ff;
}

/* Botones modo claro */
:root .modal-buttons .btn-secondary,
:root .modal-buttons .evu-gray {
    background: #e5e5e5;
    color: #000;
}

:root .modal-buttons .btn-primary,
:root .modal-buttons .primary {
    background: var(--evu-blue, #007bff);
    color: #fff;
}

:root .modal-buttons .evu-red {
    background: #d62828;
    color: #fff;
}

/* Añadido para intentar arreglar modal de contents */
.modal-earvu.show .modal-content {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* ========================================================================== */
/* EARVU ADMIN - EXTRAS: Dashboard (bloque dorado, etc.)                      */
/* ========================================================================== */

.dynamic-block {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(90, 60, 0, 0.6), rgba(50, 30, 0, 0.8)),
                radial-gradient(circle at 20% 20%, rgba(255, 200, 100, 0.15), transparent 60%);
    border: 1px solid rgba(255, 200, 100, 0.35);
    border-radius: 14px;
    padding: 18px 22px;
    margin-top: 25px;
    margin-bottom: 10px;
    color: #fff;
    position: relative;
    box-shadow: 0 0 14px rgba(255, 180, 60, 0.25),
                inset 0 0 12px rgba(255, 200, 100, 0.15);
    backdrop-filter: blur(3px);
}

.dynamic-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.dynamic-header .spark {
    font-size: 1.4rem;
    color: #ffcf80;
    text-shadow: 0 0 6px rgba(255, 190, 80, 0.6);
}

.dynamic-block h3 {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 700;
    color: #fff3da;
}

.dynamic-description {
    font-size: 0.92rem;
    opacity: 0.9;
    margin: 0;
}

.card.dynamic {
    border: 1px solid rgba(255, 200, 100, 0.25);
    box-shadow: 0 4px 10px rgba(255,150,0,0.25);
}

.card.dynamic:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255,180,0,0.35);
}

/* ========================================================================== */
/* BLOQUE DE LICENCIA (ancho completo, antiguo)                               */
/* ========================================================================== */

.license-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 28px;
    padding: 16px 20px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(0,123,255,0.12),
                                       rgba(255,160,0,0.08));
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.license-summary .license-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.license-summary .icon {
    font-size: 1.8rem;
}

.license-summary .plan-name {
    font-weight: 700;
    color: #007bff;
}

.license-summary .features {
    color: #555;
    font-size: 0.9rem;
}

.license-summary .license-manage {
    background: linear-gradient(135deg, #007bff, #00bfff);
    color: #fff;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: all .25s ease;
    white-space: nowrap;
}

.license-summary .license-manage:hover {
    background: linear-gradient(135deg, #005fcc, #0099cc);
    transform: translateY(-2px);
}

body.dark-mode .license-summary {
    background: linear-gradient(90deg, rgba(0,122,255,0.15),
                                       rgba(255,140,0,0.1));
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

body.dark-mode .license-summary .plan-name {
    color: #66aaff;
}

body.dark-mode .license-summary .features {
    color: #ccc;
}

/* ========================================================================== */
/* EARVU ADMIN - AJUSTE VISUAL FINAL PANEL DE ADMINISTRACIÓN                  */
/* ========================================================================== */
/* === Subcard del Plan (versión compacta elegante) === */

.license-summary-inline.silver-theme {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 18px;
    min-width: 260px;
    max-width: 340px;
    font-size: 0.9rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(200, 200, 200, 0.3),
                                       rgba(255, 255, 255, 0.15));
    border: 1px solid rgba(220, 220, 220, 0.35);
    color: #222;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.25),
                0 0 8px rgba(160, 160, 160, 0.25);
    backdrop-filter: blur(5px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.license-summary-inline.silver-theme:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(180, 180, 180, 0.35),
                inset 0 0 10px rgba(255, 255, 255, 0.25);
}

.license-summary-inline.silver-theme .icon {
    font-size: 1.6rem;
    color: #b0b0b0;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}

.license-summary-inline.silver-theme .plan-name {
    font-weight: 600;
    color: #007bff;
}

.license-summary-inline.silver-theme .features {
    color: #444;
    font-size: 0.85rem;
    opacity: 0.9;
    display: block;
    max-width: 240px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

body.dark-mode .license-summary-inline.silver-theme {
    background: linear-gradient(135deg, rgba(100, 100, 100, 0.25),
                                       rgba(30, 30, 30, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ddd;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.08),
                inset 0 0 10px rgba(255, 255, 255, 0.06);
}

body.dark-mode .license-summary-inline.silver-theme .plan-name {
    color: #66aaff;
}

body.dark-mode .license-summary-inline.silver-theme .features {
    color: #aaa;
}

/* ========================================================================== */
/* TITULARES DE SECCIÓN (Separadores entre bloques)                           */
/* ========================================================================== */

.dashboard-divider {
    margin: 40px 0 20px;
    padding: 12px 18px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(0,123,255,0.1),
                                       rgba(255,140,0,0.08));
    font-size: 1.3rem;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.3px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.05);
}

/* las hacemos de ancho completo dentro del grid del dashboard */
.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    max-width: 1500px;
    margin: 0 auto;
}

/* === Separadores (bloques) refinados === */
.dashboard-divider {
    grid-column: 1 / -1 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, rgba(0,123,255,0.12),
                                       rgba(255,140,0,0.06));
    border-left: 5px solid #007bff;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #1b1b1b;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.05);
    margin: 40px 0 10px;
    position: relative;
}

.dashboard-divider::before {
    content: "";
    width: 8px;
    height: 80%;
    position: absolute;
    left: 0;
    top: 10%;
    border-radius: 3px;
    background: linear-gradient(180deg, #007bff, #00bfff);
    box-shadow: 0 0 8px rgba(0,123,255,0.5);
}

.dashboard-divider + .card {
    margin-top: 0 !important;
}

body.dark-mode .dashboard-divider {
    color: #e8e8e8;
    background: linear-gradient(90deg, rgba(0,122,255,0.15),
                                       rgba(255,160,0,0.08));
    border-left-color: #66aaff;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
}

/* === Separadores de grupos =============================================== */

.dashboard-section-title {
    margin-top: 36px;
    margin-bottom: 14px;
    padding: 10px 14px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    border-left: 5px solid #007bff;
    background: linear-gradient(90deg, rgba(0,123,255,0.08),
                                       rgba(255,160,0,0.06));
    border-radius: 10px;
    display: inline-block;
}

body.dark-mode .dashboard-section-title {
    color: #e8e8e8;
    border-left-color: #66aaff;
    background: linear-gradient(90deg, rgba(0,123,255,0.15),
                                       rgba(255,160,0,0.08));
}

/* ========================================================================== */
/* AJUSTES DE CARDS (altura uniforme, iconos)                                 */
/* ========================================================================== */

.card {
    min-height: 80px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 16px;
    transition: all 0.25s ease;
    position: relative;
}

.card .icon {
    font-size: 1.7rem;
    flex-shrink: 0;
    opacity: 0.95;
}

.card .info strong {
    font-size: 1rem;
    display: block;
    margin-bottom: 2px;
}

.card .info span {
    font-size: 0.87rem;
    opacity: 0.85;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.card[data-role="basic"] {
    background: linear-gradient(135deg, #007bff, #00bfff);
}

.card[data-role="admin"] {
    background: linear-gradient(135deg, #ff7e00, #ff3b3b);
}

.card[data-role="superadmin"] {
    background: linear-gradient(135deg, #2b2b2b, #1a1a1a);
}

/* ========================================================================== */
/* CABECERA ANIMADA EARVU (versión sutil profesional)                          */
/* ========================================================================== */

@keyframes earvuGradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes earvuBreathing {
    0%, 100% {
        filter: brightness(1) saturate(1);
        transform: scaleY(1);
    }
    50% {
        filter: brightness(1.12) saturate(1.15);
        transform: scaleY(1.015);
    }
}

/* === Fondo animado principal === */

.main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: linear-gradient(90deg, #007BFF, #00B5C9, #FF7B00) !important;
    background-size: 400% 400% !important;
    animation: earvuGradientFlow 60s ease infinite,
               earvuBreathing 10s ease-in-out infinite alternate !important;
    color: #fff !important;
    padding: 8px 0 4px 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

/* === Versión modo oscuro === */

body.dark-mode .main-header {
    background: linear-gradient(90deg, #005FCC, #0094B8, #FF8C1A) !important;
    background-size: 400% 400% !important;
    animation: earvuGradientFlow 60s ease infinite,
               earvuBreathing 10s ease-in-out infinite alternate !important;
    color: #fff !important;
    filter: brightness(1.05) saturate(1.1) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
}

/* === Corrige superposiciones internas === */
.header-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    padding: 4px 24px 6px;
    color: rgba(255,255,255,0.78);
    border-top: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.08);
    backdrop-filter: blur(6px);
}

.status-sep {
    margin: 0 6px;
    opacity: 0.4;
}

.status-right a.status-logout {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}

.status-right a.status-logout:hover {
    color: #fff;
}

.main-header > * {
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
}

.main-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    z-index: 1;
    opacity: 1;
    animation: earvuGradientFlow 60s ease infinite,
               earvuBreathing 10s ease-in-out infinite alternate;
}

/* ========================================================================== */
/* LOGO Y TÍTULO (forzado a 60 px)                                            */
/* ========================================================================== */

.site-logo {
    height: 64px !important;
    width: auto !important;
    border-radius: 10px;
    display: block;
    transition: transform 0.25s ease;
}

.site-logo:hover {
    transform: scale(1.05);
}

.site-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    margin-left: 10px;
    letter-spacing: -0.3px;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px;
    gap: 18px;
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-username {
    font-weight: 600;
    color: #fff;
    font-size: 0.85rem;
}

.header-logout {
    background: none !important;
    box-shadow: none !important;
    border: none !important;

    color: rgba(255,255,255,0.85);
    font-size: 0.8rem;
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none;

    transition: background 0.2s ease, color 0.2s ease;
}

.header-logout:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}


/* ========================================================================== */
/* BOTONES SUPERIORES - ESTILO NEOGLASS EARVU                                 */
/* ========================================================================== */

.top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: inset 0 0 6px rgba(255,255,255,0.2),
                0 2px 6px rgba(0,0,0,0.25);
}

.top-action-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-1px);
}

.top-action-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
}

body.dark-mode .top-action-btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}

body.dark-mode .top-action-btn:hover {
    background: rgba(255,255,255,0.18);
}

/* === Separación y alineación === */

.top-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* user banner coherente */

.user-banner {
    background: #f6f6f6;
    border-bottom: 1px solid #ddd;
    font-size: .9em;
    color: #333;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.dark-mode .user-banner {
    background: #1e1e1e;
    border-bottom: 1px solid #333;
    color: #ddd;
}

/* Animación de aparición */

.fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp .35s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================================= */
/* ALINEACIÓN FINA PANEL PRINCIPAL + PLAN + AYUDA LATERAL    */
/* ========================================================= */

.dashboard-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

/* La columna principal se adapta dejando hueco estable a la ayuda */

.dashboard-main {
    flex: 1 1 calc(72% - 24px);
    min-width: 640px;
    transition: all 0.3s ease;
}

/* Columna de ayuda más proporcionada */

.dashboard-help {
    flex: 0 0 340px;
    max-width: 360px;
    min-width: 300px;
    position: sticky;
    top: 10px;
}

/* --- Cabecera (Panel de administración) --- */

.dashboard-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 26px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.12),
                                      rgba(255, 160, 0, 0.08));
    box-shadow: inset 0 0 25px rgba(0, 128, 255, 0.15),
                0 3px 8px rgba(0, 0, 0, 0.3);
}

/* --- Fila superior del encabezado: título + plan --- */

.dashboard-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    flex-wrap: nowrap;
}

/* --- Título --- */

.dashboard-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(90deg, #007bff, #ff6a00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Emoji visible y con estilo */

.dashboard-title .emoji {
    font-size: 2rem;
    color: #007bff;
    filter: drop-shadow(0 0 6px rgba(0, 160, 255, 0.4));
    transform: translateY(1px);
    flex-shrink: 0;
}

/* --- Bloque del plan --- */

.dashboard-plan {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ========================================================= */
/* SUBCARD PLAN DESTACADA - EarVu Halo tonal por plan        */
/* ========================================================= */

.plan-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 18px;
    color: #fff;
    font-weight: 500;
    overflow: visible;
    z-index: 1;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* === Halo animado adaptado al plan === */

.plan-card::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 22px;
    filter: blur(10px);
    opacity: 0.4;
    z-index: 0;
    animation: haloRotate 10s linear infinite;
}

@keyframes haloRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === Fondo principal === */

.plan-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: var(--plan-gradient, linear-gradient(135deg, #555, #333));
    z-index: 1;
    box-shadow: inset 0 0 8px rgba(255,255,255,0.12);
}

/* === Colores base por plan === */

.plan-card.plan-free {
    --plan-gradient: linear-gradient(135deg, #00c853, #009624);
}

.plan-card.plan-senior {
    --plan-gradient: linear-gradient(135deg, #2196f3, #0b79d0);
}

.plan-card.plan-pro {
    --plan-gradient: linear-gradient(135deg, #b0b0b0, #7e7e7e);
}

.plan-card.plan-premium {
    --plan-gradient: linear-gradient(135deg, #ffd700, #ff9900);
}

/* === Halo tonal según plan === */

.plan-card.plan-free::before {
    background: conic-gradient(from 0deg, #00c85333, #00962455, #00c85333);
}

.plan-card.plan-senior::before {
    background: conic-gradient(from 0deg, #2196f333, #0b79d055, #2196f333);
}

.plan-card.plan-pro::before {
    background: conic-gradient(from 0deg, #b0b0b033, #7e7e7e55, #b0b0b033);
}

.plan-card.plan-premium::before {
    background: conic-gradient(from 0deg, #ffd70033, #ff990055, #ffd70033);
}

/* === Icono y texto === */

.plan-card .icon {
    font-size: 1.8rem;
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
}

.plan-card .plan-info {
    position: relative;
    z-index: 3;
    line-height: 1.45;
}

.plan-card .plan-name {
    text-transform: capitalize;
    font-weight: 600;
}

.plan-card .plan-details {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 3px;
}

/* === Modo oscuro === */

body.dark-mode .plan-card.plan-free {
    --plan-gradient: linear-gradient(135deg, #009624, #004d1a);
}

body.dark-mode .plan-card.plan-senior {
    --plan-gradient: linear-gradient(135deg, #0b79d0, #043868);
}

body.dark-mode .plan-card.plan-pro {
    --plan-gradient: linear-gradient(135deg, #777, #333);
}

body.dark-mode .plan-card.plan-premium {
    --plan-gradient: linear-gradient(135deg, #cba600, #7a5200);
}

.plan-name {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Corrige visibilidad del emoji en el título principal */

.dashboard-title .emoji {
    font-size: 2rem;
    filter: drop-shadow(0 0 6px rgba(0, 160, 255, 0.4));
    transform: translateY(1px);
    flex-shrink: 0;
    -webkit-text-fill-color: initial !important;
    color: #00aaff !important;
}

/* ========================================================================== */
/* AYUDA CONTEXTUAL — Estilo unificado azul↔naranja (claro y oscuro)          */
/* ========================================================================== */

/* 🎨 Modo claro */
body:not(.dark-mode) .dashboard-help {
    background: linear-gradient(145deg, rgba(0, 157, 255, 0.15),
                                       rgba(255, 140, 0, 0.10)) !important;
    border: 1px solid rgba(0, 157, 255, 0.25) !important;
    color: #111 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(12px) !important;
}

/* 🌙 Modo oscuro */
body.dark-mode .dashboard-help {
    background: radial-gradient(circle at 25% 120%, rgba(0,150,255,0.10), transparent 60%),
                radial-gradient(circle at 90% -10%, rgba(255,200,0,0.08), transparent 60%),
                linear-gradient(135deg, rgba(0,102,255,0.15),
                                       rgba(255,160,0,0.08)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #eaeaea !important;
    box-shadow: 0 3px 14px rgba(0,0,0,0.45) !important;
    backdrop-filter: blur(10px) !important;
}

.dashboard-help h2,
.dashboard-help h3 {
    color: #009dff !important;
}

/* === Forzar nombre del plan en mayúsculas === */
.plan-card .plan-name {
    text-transform: uppercase !important;
}

/* =========================================================
   CARDS TEMA CLARO (FORZADO) — ESTÉTICA EARVU
   ========================================================= */

body:not(.dark-mode) .card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 1.3rem 1.4rem;

    /* Fondo semiblanco + glass */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(0, 0, 0, 0.05);

    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.08),
        inset 0 0 20px rgba(255, 255, 255, 0.4);

    transition: 
        background 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

/* COLORES BASE */
body:not(.dark-mode) .card-primary {
    background: linear-gradient(
        145deg,
        rgba(0, 123, 255, 0.10),
        rgba(0, 191, 255, 0.12)
    ), rgba(255,255,255,0.75);
}

body:not(.dark-mode) .card-secondary {
    background: linear-gradient(
        145deg,
        rgba(255, 150, 0, 0.10),
        rgba(255, 180, 0, 0.12)
    ), rgba(255,255,255,0.75);
}

body:not(.dark-mode) .card-superadmin {
    background: linear-gradient(
        145deg,
        rgba(110, 70, 200, 0.12),
        rgba(60, 30, 120, 0.16)
    ), rgba(255,255,255,0.75);
}

/* HOVER */
body:not(.dark-mode) .card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.12),
        inset 0 0 28px rgba(255, 255, 255, 0.55);
}

body:not(.dark-mode) .card-primary:hover {
    background: linear-gradient(
        145deg,
        rgba(0, 123, 255, 0.22),
        rgba(0, 191, 255, 0.28)
    ), rgba(255,255,255,0.85);
}

body:not(.dark-mode) .card-secondary:hover {
    background: linear-gradient(
        145deg,
        rgba(255, 150, 0, 0.22),
        rgba(255, 180, 0, 0.28)
    ), rgba(255,255,255,0.85);
}

body:not(.dark-mode) .card-superadmin:hover {
    background: linear-gradient(
        145deg,
        rgba(110, 70, 200, 0.24),
        rgba(60, 30, 120, 0.32)
    ), rgba(255,255,255,0.85);
}

/* TEXTO */
body:not(.dark-mode) .card .icon {
    font-size: 1.8rem;
    color: #333;
}

body:not(.dark-mode) .card .info strong {
    color: #1e1e1e;
}

body:not(.dark-mode) .card .info span {
    color: #444;
}

/* ================================
   CARDS — Tema claro (modo EarVu)
   ================================ */

/* Secondary = azul/violeta suave */
body:not(.dark-mode) .card.card-secondary {
    background: linear-gradient(140deg,
        rgba(99, 102, 241, 0.12),
        rgba(168, 85, 247, 0.10),
        rgba(56, 189, 248, 0.14)
    );
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    color: #1b1b1b;
    backdrop-filter: blur(6px);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

body:not(.dark-mode) .card.card-secondary:hover {
    background: linear-gradient(140deg,
        rgba(99, 102, 241, 0.25),
        rgba(168, 85, 247, 0.22),
        rgba(56, 189, 248, 0.26)
    );
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}


/* Primary = azul intenso */
body:not(.dark-mode) .card.card-primary {
    background: linear-gradient(140deg,
        rgba(0, 112, 244, 0.18),
        rgba(0, 184, 255, 0.14)
    );
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    color: #0b254a;
    backdrop-filter: blur(6px);
    transition: transform .25s, box-shadow .25s, background .25s;
}

body:not(.dark-mode) .card.card-primary:hover {
    background: linear-gradient(140deg,
        rgba(0, 112, 244, 0.32),
        rgba(0, 184, 255, 0.28)
    );
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.20);
}


/* Superadmin = gris metálico */
body:not(.dark-mode) .card.card-superadmin {
    background: linear-gradient(140deg,
        rgba(120, 120, 120, 0.22),
        rgba(180, 180, 180, 0.18)
    );
    border: 1px solid rgba(60, 60, 60, 0.25);
    color: #111;
    backdrop-filter: blur(6px);
    transition: transform .25s, box-shadow .25s, background .25s;
}

body:not(.dark-mode) .card.card-superadmin:hover {
    background: linear-gradient(140deg,
        rgba(120, 120, 120, 0.35),
        rgba(180, 180, 180, 0.30)
    );
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

/* =========================================================
   EARVU PROGRESS WIZARD – BARRA DELGADA NARANJA→AZUL
   ========================================================= */

.earvu-wizard {
    margin: 12px 0 26px;
}

/* Contenedor general de la barra */
.earvu-wizard-track {
    list-style: none;
    margin: 0;
    padding: 3px; /* grosor del borde degradado */
    display: flex;
    justify-content: space-between;
    gap: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f97316, #fb923c, #22c7ff, #3b82f6);
    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.20),
        0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* Versión oscura: un poco más intensa */
body.dark-mode .earvu-wizard-track {
    background: linear-gradient(90deg, #f97316, #fde047, #22c7ff, #6366f1);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(15, 23, 42, 0.9);
}

/* Cada paso ocupa el mismo ancho y mantiene la barra fina (~56px) */
.earvu-wizard-step {
    flex: 1 1 0;
    min-width: 0;
}

/* Botón interno del paso */
.earvu-wizard-step a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 6px 10px;

    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #111827;
    text-decoration: none;
    text-align: center;

    box-shadow:
        0 4px 10px rgba(15, 23, 42, 0.12),
        inset 0 0 10px rgba(255, 255, 255, 0.65);

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.18s ease,
        color 0.2s ease;
}

/* Modo oscuro: base neutra flotando sobre el degradado */
body.dark-mode .earvu-wizard-step a {
    background: rgba(15, 23, 42, 0.94);
    color: #e5e7eb;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.7),
        inset 0 0 10px rgba(15, 23, 42, 0.85);
}

/* Badge circular con el número */
.earvu-wizard-step .step-badge {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.75rem;
    font-weight: 600;

    background: rgba(15, 23, 42, 0.06);
    color: #4b5563;

    margin-bottom: 2px;
}

/* Texto del paso (máx 2 líneas) */
.earvu-wizard-step .step-label {
    font-size: 0.80rem;
    line-height: 1.1;
    font-weight: 500;
    white-space: nowrap;
}

/* ================== ESTADOS ================== */

/* Estado por defecto: futuro */
.earvu-wizard-step.is-upcoming a {
    opacity: 0.9;
}

/* Hover genérico: ligera elevación y brillo */
.earvu-wizard-step a:hover {
    transform: translateY(-1px);
    box-shadow:
        0 7px 16px rgba(15, 23, 42, 0.2),
        inset 0 0 12px rgba(255, 255, 255, 0.75);
}

/* Paso ACTUAL (centelleo naranja) */
.earvu-wizard-step.is-current a {
    background:
        radial-gradient(circle at 10% 0%, #fed7aa, transparent 60%),
        linear-gradient(135deg, #f97316, #fbbf24);
    color: #111827;
    box-shadow:
        0 10px 24px rgba(248, 163, 63, 0.55),
        inset 0 0 14px rgba(255, 255, 255, 0.85);
}

body.dark-mode .earvu-wizard-step.is-current a {
    background:
        radial-gradient(circle at 10% 0%, #f97316, transparent 55%),
        linear-gradient(135deg, #f97316, #facc15);
    color: #0b1120;
}

.earvu-wizard-step.is-current .step-badge {
    background: rgba(15, 23, 42, 0.12);
    color: #1f2937;
}

/* Paso COMPLETADO (azul, sensación “ya pasado”) */
.earvu-wizard-step.is-completed a {
    background:
        radial-gradient(circle at 0% 0%, #bfdbfe, transparent 55%),
        linear-gradient(135deg, #3b82f6, #22c7ff);
    color: #0b1120;
    box-shadow:
        0 9px 22px rgba(37, 99, 235, 0.45),
        inset 0 0 14px rgba(255, 255, 255, 0.85);
}

body.dark-mode .earvu-wizard-step.is-completed a {
    background:
        radial-gradient(circle at 0% 0%, #1d4ed8, transparent 55%),
        linear-gradient(135deg, #1d4ed8, #22c7ff);
    color: #e5e7eb;
}

.earvu-wizard-step.is-completed .step-badge {
    background: rgba(15, 23, 42, 0.20);
    color: #e5e7eb;
}

/* Hover un poco más intenso para current y completed */
.earvu-wizard-step.is-current a:hover,
.earvu-wizard-step.is-completed a:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 26px rgba(15, 23, 42, 0.28),
        inset 0 0 18px rgba(255, 255, 255, 0.95);
}

/* ================== RESPONSIVE ================== */

@media (max-width: 900px) {
    .earvu-wizard-track {
        gap: 4px;
        padding: 3px;
    }

    .earvu-wizard-step a {
        min-height: 48px;
        padding: 5px 6px;
    }

    .earvu-wizard-step .step-label {
        font-size: 0.72rem;
    }
}

.topbar {
    width: 100%;
    padding: 8px 14px;
    background: var(--color-bg-dark, #1a1a1a);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.topbar-right {
    display: flex;
    gap: 12px;
}

.logout-link {
    color: var(--color-accent, #ff6b6b);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.logout-link:hover {
    text-decoration: underline;
}

/* ==============================================================
   SESSION BAR — EarVu Glow Edition (versión premium)
   ============================================================== */

:root {
  /* Fondos del banner */
  --session-bg-light: rgba(255, 255, 255, 0.78);
  --session-bg-dark: rgba(12, 18, 27, 0.55);

  /* Textos */
  --session-text-light: #111;
  --session-text-dark: #f1f1f1;

  /* Glow sutil */
  --glow-primary: rgba(77, 163, 255, 0.35);
  --glow-purple: rgba(130, 80, 255, 0.38);
  --glow-orange: rgba(255, 150, 60, 0.38);

  /* Bordes */
  --session-border-light: rgba(0, 0, 0, 0.10);
  --session-border-dark: rgba(255, 255, 255, 0.10);
}

/* ==============================================================
   BARRA (modo claro)
   ============================================================== */
body:not(.dark-mode) .earvu-session-bar {
  background: var(--session-bg-light);
  color: var(--session-text-light);
  border-bottom: 1px solid var(--session-border-light);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.06),
    inset 0 0 18px rgba(255,255,255,0.65);
}

/* ==============================================================
   BARRA (modo oscuro)
   ============================================================== */
body.dark-mode .earvu-session-bar {
  background: var(--session-bg-dark);
  color: var(--session-text-dark);
  border-bottom: 1px solid var(--session-border-dark);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.55),
    inset 0 0 18px rgba(255,255,255,0.08);
}

.earvu-session-bar {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 0.96rem;
  position: relative;
}

/* ==============================================================
   EFECTO GLOW LATERAL (sutilísimo, elegante)
   ============================================================== */

.earvu-session-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 0;

  background: radial-gradient(
      circle at 6% 50%,
      var(--glow-primary) 0%,
      transparent 55%
    ),
    radial-gradient(
      circle at 94% 50%,
      var(--glow-purple) 0%,
      transparent 55%
    );
  opacity: 0.17;
}

/* ==============================================================
   TEXTO IZQUIERDA
   ============================================================== */

.session-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-hello {
  opacity: 0.65;
  font-size: 0.80rem;
  letter-spacing: 0.18px;
  margin-bottom: 1px;
}

.session-username {
  font-weight: 700;
  font-size: 1.10rem;
  letter-spacing: 0.35px;
  margin-bottom: 1px;
}

/* ==============================================================
   BADGE DE ROL — EARVU GLOW
   ============================================================== */

.session-role-badge {
  display: inline-block;

  padding: 4px 13px;
  margin-top: 2px;

  border-radius: 8px;

  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.32px;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.12);

  color: var(--session-text-dark);

  box-shadow:
    0 0 6px rgba(255,255,255,0.12),
    inset 0 0 4px rgba(255,255,255,0.15);

  transition: transform 0.25s ease, box-shadow 0.30s ease;
}

/* Modo claro */
body:not(.dark-mode) .session-role-badge {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.05);
  color: #222;

  box-shadow:
    0 0 6px rgba(0,0,0,0.08),
    inset 0 0 3px rgba(0,0,0,0.10);
}

.session-role-badge:hover {
  transform: translateY(-1px) scale(1.03);
}

/* ==============================================================
   GLOW SEGÚN ROL
   ============================================================== */

/* Superadmin */
.role-superadmin {
  background: rgba(138, 43, 226, 0.22);
  border-color: rgba(138, 43, 226, 0.40);
  box-shadow:
    0 0 12px rgba(138, 43, 226, 0.55),
    inset 0 0 6px rgba(138, 43, 226, 0.18);
}
body:not(.dark-mode) .role-superadmin {
  background: rgba(138, 43, 226, 0.26);
  color: #4c1c8d;
}

/* Admin */
.role-admin {
  background: rgba(255, 155, 55, 0.22);
  border-color: rgba(255, 155, 55, 0.40);
  box-shadow:
    0 0 12px rgba(255, 155, 55, 0.45),
    inset 0 0 6px rgba(255, 155, 55, 0.18);
}
body:not(.dark-mode) .role-admin {
  background: rgba(255, 155, 55, 0.25);
  color: #8a4f00;
}

/* Editor */
.role-editor {
  background: rgba(0, 120, 255, 0.22);
  border-color: rgba(0, 120, 255, 0.40);
  box-shadow:
    0 0 12px rgba(0, 120, 255, 0.45),
    inset 0 0 6px rgba(0, 120, 255, 0.18);
}
body:not(.dark-mode) .role-editor {
  background: rgba(0, 120, 255, 0.27);
  color: #003e8b;
}

/* Usuario normal */
.role-user {
  background: rgba(160,160,160,0.18);
  border-color: rgba(200,200,200,0.35);
  box-shadow:
    0 0 12px rgba(180,180,180,0.35),
    inset 0 0 6px rgba(180,180,180,0.18);
}
body:not(.dark-mode) .role-user {
  background: rgba(180,180,180,0.22);
  color: #444;
}

/* ==============================================================
   LOGOUT BUTTON — EarVu Glass Premium (Glow Edition)
   ============================================================== */

.logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 16px;
  border-radius: 10px;

  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;

  /* Glass */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Fondo translúcido */
  background: rgba(255, 255, 255, 0.10);

  /* Borde */
  border: 1px solid rgba(255,255,255,0.20);

  /* Texto */
  color: #ffffff !important;

  /* Glow del color primario */
  box-shadow:
    0 0 10px calc(var(--c-primary-opacity, 0.35)) var(--c-primary),
    inset 0 0 6px rgba(255,255,255,0.08);

  transition:
    background 0.25s ease,
    transform 0.20s ease,
    box-shadow 0.25s ease;
}

/* Hover */
.logout-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.16);
  box-shadow:
    0 0 14px var(--c-primary),
    inset 0 0 8px rgba(255,255,255,0.12);
}

/* ==============================================================
   BOTÓN MODO CLARO
   ============================================================== */

body:not(.dark-mode) .logout-btn {
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.12);
  color: #333 !important;

  box-shadow:
    0 0 8px rgba(0,0,0,0.10),
    inset 0 0 4px rgba(0,0,0,0.05);
}

body:not(.dark-mode) .logout-btn:hover {
  background: rgba(0,0,0,0.08);
  box-shadow:
    0 0 12px var(--c-primary),
    inset 0 0 6px rgba(0,0,0,0.08);
}


/* ==============================================================
   RESPONSIVE
   ============================================================== */

@media (max-width: 600px) {
  .earvu-session-bar {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}



/* ==============================================================
   HEADER MEJORADO — EarVu Pro (Estética consistente)
   ============================================================== */

.main-header {
  background: var(--c-bg);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 10px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

body.dark-mode .main-header {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 2px 14px rgba(0,0,0,0.4);
}

.header-inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-logo {
  height: 38px;
  display: block;
}

.site-title {
  margin-left: 10px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.site-brand {
  display: flex;
  align-items: center;
}

/* Botones de la derecha */
.top-actions {
  display: flex;
  gap: 8px;
}

.top-action-btn {
  font-size: 1.2rem;
  opacity: 0.9;
  transition: 0.18s ease;
}

.top-action-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* ========== WIZARD INTEGRADO EN ECOSISTEMA ========== */
.integrated-wizard {
    padding: 24px 26px 28px;
}

.ecosystem-header {
    margin-bottom: 22px;
}

.ecosystem-wizard {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 16px;
    background: rgba(255, 209, 79, 0.08); /* dorado suave */
    border: 1px solid rgba(255, 209, 79, 0.18);
    box-shadow: inset 0 0 12px rgba(255, 209, 79, 0.15);
}

.wizard-step {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    border-radius: 12px;
    background: rgba(255, 209, 79, 0.06);
    color: #f7e7b0;
    font-weight: 500;
    transition: all 0.25s ease;
}

.wizard-step:hover {
    background: rgba(255, 209, 79, 0.14);
    cursor: pointer;
}

.wizard-step .num {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.wizard-step.active {
    background: rgba(255, 209, 79, 0.22);
    border: 1px solid rgba(255, 209, 79, 0.35);
    color: #fff8d6;
    box-shadow: 0 0 10px rgba(255, 209, 79, 0.35);
}

/* ======================================================
   FIX — Color Picker (para que el color real se vea)
   ====================================================== */

.form-admin .color-group input[type="color"] {
    appearance: none;
    padding: 0;
    border: none !important;
    background: none !important;
    width: 44px !important;
    height: 40px !important;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.25),
        inset 0 0 4px rgba(0,0,0,0.4);
}

.form-admin .color-group input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 10px;
}

.form-admin .color-group input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 10px;
}

/* El valor HEX vuelve a verse correctamente */
.color-group .hex {
    font-size: 0.85rem;
    color: var(--text-light);
    opacity: 0.9;
}

/* ======================================================
   FORM GRID UNIFICADO (MISMO SISTEMA QUE DISCORD SETTINGS)
   ====================================================== */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* dos columnas alineadas */
    gap: 22px 26px;                   /* espacio vertical y horizontal */
    align-items: center;              /* alinea verticalmente todos los campos */
}

/* Cuando un form-group debe ocupar toda la fila */
.form-group.full {
    grid-column: span 2;
}

/* Los form-group se comportan igual en todas las cards */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;                        /* espaciado limpio entre label e input */
}

/* Los labels siempre arriba */
.form-group > label {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-light);
}

/* Ayuda debajo del input */
.form-group .help-text,
.form-group small.help-text {
    font-size: 0.8rem !important;
    opacity: 0.75;
    margin-top: 3px !important;
}

/* Alinear items especiales dentro del grid */
.color-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ======================================================
   RESPONSIVE — SOLO PARA EL FORM-GRID DE LOS FORMULARIOS
   ====================================================== */

/* 📱 Móviles: 1 sola columna para inputs */
@media (max-width: 680px) {
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .form-group.full {
        grid-column: span 1 !important;
    }
}

/* 📲 Tablets pequeñas (hasta 900px): dos columnas */
@media (max-width: 900px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px 22px;
    }
}

/* ======================================================
   LAYOUT SEGURO: LA AYUDA NUNCA SE RECORTA
   ====================================================== */

/* MODO ESCRITORIO (normal): dos columnas */
.dashboard-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
}

/* MODO RESPONSIVE: si la pantalla es estrecha,
   la ayuda pasa DEBAJO automáticamente */
@media (max-width: 1250px) {
    .dashboard-layout {
        grid-template-columns: 1fr;  /* ← 1 columna */
    }

    .dashboard-help {
        margin-top: 22px;
        position: static !important;  /* deja de ser sticky */
        max-height: none !important;
    }
}

/* ======================================================
   LAYOUT AVANZADO PARA ASIDE – EARVU Pro
   ====================================================== */

.dashboard-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: flex-start;
}

/* Tablet/Desktop mediano: pasar de 2 columnas a panel deslizable */
@media (max-width: 1300px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }
    .dashboard-help {
        position: relative !important;
        top: auto !important;
        max-height: none !important;
        margin-top: 24px;
    }
}

/* PANEL DE AYUDA – MODO DESKTOP */
.dashboard-help {
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding-right: 6px;
    border-radius: 14px;
    backdrop-filter: blur(6px);
    background: rgba(38, 42, 50, 0.60);
    box-shadow: 0 4px 18px rgba(0,0,0,0.22);
}

/* Scrollbar elegante estilo EarVu */
.dashboard-help::-webkit-scrollbar {
    width: 8px;
}
.dashboard-help::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 6px;
}
.dashboard-help::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.35);
}

/* Sombras dinámicas */
.dashboard-help::before,
.dashboard-help::after {
    content: "";
    position: sticky;
    left: 0;
    right: 0;
    height: 22px;
    z-index: 5;
    pointer-events: none;
}

.dashboard-help::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.38), transparent);
}

.dashboard-help::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.38), transparent);
}

@media (max-width: 780px) {
    .dashboard-help {
        position: static !important;
        max-height: none !important;
        margin-top: 26px;
        border-radius: 14px;
    }

    .dashboard-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   COMPONENTE GLOBAL — PANEL DE ESTADO
   versión 2: con caja envolvente, contraste y título
============================================================ */

/* CONTENEDOR GENERAL */
.ai-status-container {
  margin: 25px 0 35px 0;
  padding: 30px 35px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  animation: fadeIn 0.4s ease;
}

/* MODO CLARO — más contraste */
.light-mode .ai-status-container {
  background: rgba(240, 240, 255, 0.75);
  border: 1px solid rgba(50, 50, 80, 0.12);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
}

/* TÍTULO */
.ai-status-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.light-mode .ai-status-title {
  color: #333;
}

.ai-status-title .emoji {
  font-size: 1.35rem;
}

/* GRID */
.ai-status-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}

/* CAJAS INDIVIDUALES */
.ai-status-box {
  padding: 20px 18px;
  background: rgba(255,255,255,0.12);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  text-align: center;
  transition: 0.2s;
}

.ai-status-box:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-2px);
}

/* Modo claro */
.light-mode .ai-status-box {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.07);
}
.light-mode .ai-status-box:hover {
  background: rgba(255,255,255,1);
}

/* Títulos internos */
.ai-status-box h3 {
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #e5e5e5;
  font-weight: 500;
}

.light-mode .ai-status-box h3 {
  color: #333;
}

/* CHIP */
.ai-chip {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  color: #fff;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* BARRA DE CREATIVIDAD */
.ai-creativity-bar {
  height: 8px;
  width: 100%;
  background: rgba(255,255,255,0.15);
  border-radius: 50px;
  margin-bottom: 6px;
  overflow: hidden;
}

.ai-creativity-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #00bcd4, #3f51b5);
  border-radius: 50px;
  transition: width 0.3s ease;
}

.ai-status-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1.4rem;
    color: var(--text-primary);
}


.light-mode .ai-creativity-bar {
  background: rgba(0,0,0,0.15);
}

.creativity-value {
  font-size: 0.85rem;
  color: #eee;
}

.light-mode .creativity-value {
  color: #555;
}

/* Responsive */
@media (max-width: 1400px) {
  .ai-status-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .ai-status-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .ai-status-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MODO CLARO — Panel de estado IA (CORRECTO)
   ========================================================= */
body:not(.dark-mode) .ai-status-container {
    background: #f3f3f7;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    box-shadow:
        0 6px 16px rgba(0,0,0,0.06),
        0 1px 3px rgba(0,0,0,0.04);
}

body:not(.dark-mode) .ai-status-box {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.06);
}

body:not(.dark-mode) .ai-status-box h3 {
    color: #222;
}

body:not(.dark-mode) .ai-chip {
    color: #fff !important;
}

/* =========================================================
   MODO OSCURO — Panel de estado IA (CORRECTO)
   ========================================================= */
body.dark-mode .ai-status-container {
    background: #111418;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 18px;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        0 4px 14px rgba(0,0,0,0.6);
}

body.dark-mode .ai-status-box {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
}

body.dark-mode .ai-status-box h3 {
    color: #e5e5e5;
}

body.dark-mode .ai-chip {
    color: #fff !important;
}


/* =============================
   Ajuste fino del panel de estado
   ============================= */

.ai-status-box {
    padding: 14px 14px !important;  /* Más compacto */
    border-radius: 14px !important;
}

.ai-status-box h3 {
    margin-bottom: 8px !important;
}

.evu-chip {
    margin-bottom: 6px !important;  /* Texto explicativo debajo del chip */
    display: inline-block;
}

/* Texto descriptivo debajo del chip */
.ai-detail {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    line-height: 1.15;
    opacity: 0.8;
}

/* En modo claro */
body:not(.dark-mode) .ai-status-box {
    padding: 16px 16px !important;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.06);
}

body:not(.dark-mode) .ai-detail {
    color: #333;
}

/* En modo oscuro */
body.dark-mode .ai-detail {
    color: #ddd;
}

/* Más compacto el bloque de creatividad */
.ai-creativity-bar {
    margin-bottom: 4px !important;
}

/* ============================================================
   COMPONENTE GLOBAL — DOMAIN STATUS CARD (Origen: Web / Sitemap)
   ============================================================ */

.domain-status-card {
  margin: 18px 0 26px;
  padding: 20px 22px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: stretch;

  background: linear-gradient(135deg,
              rgba(0, 123, 255, 0.14),
              rgba(0, 0, 0, 0.75));
  border: 1px solid rgba(0, 123, 255, 0.35);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.55),
    inset 0 0 16px rgba(255, 255, 255, 0.06);
  color: #f9fafb;
}

/* Modo claro: más limpio y legible */
body:not(.dark-mode) .domain-status-card {
  background: linear-gradient(135deg,
              rgba(0, 123, 255, 0.14),
              rgba(255, 255, 255, 0.9));
  border: 1px solid rgba(0, 123, 255, 0.25);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.12),
    inset 0 0 10px rgba(255, 255, 255, 0.45);
  color: #111827;
}

/* Bloque principal izquierda */
.domain-status-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.domain-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.domain-status-label {
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.domain-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.domain-status-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

/* Estados */
.domain-status-pill.ok {
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
}
.domain-status-pill.ok .dot {
  background: #22c55e;
}

.domain-status-pill.fail {
  background: rgba(248, 113, 113, 0.17);
  color: #fecaca;
}
.domain-status-pill.fail .dot {
  background: #ef4444;
}

.domain-status-pill.pending {
  background: rgba(251, 191, 36, 0.18);
  color: #fef3c7;
}
.domain-status-pill.pending .dot {
  background: #f59e0b;
}

/* Modo claro ajustes */
body:not(.dark-mode) .domain-status-pill.ok {
  background: rgba(16, 185, 129, 0.08);
  color: #166534;
}
body:not(.dark-mode) .domain-status-pill.fail {
  background: rgba(248, 113, 113, 0.1);
  color: #b91c1c;
}
body:not(.dark-mode) .domain-status-pill.pending {
  background: rgba(251, 191, 36, 0.12);
  color: #92400e;
}

.domain-status-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.domain-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.domain-label {
  font-size: 0.83rem;
  opacity: 0.78;
}

.domain-value {
  font-size: 0.95rem;
  font-weight: 500;
  word-break: break-all;
}

.domain-value.subtle {
  font-size: 0.88rem;
  opacity: 0.85;
}

/* Bloque lateral derecha */
.domain-status-side {
  padding: 12px 14px;
  border-radius: 16px;
  background: radial-gradient(circle at 0% 0%,
              rgba(255,255,255,0.22),
              transparent 55%),
              rgba(15, 23, 42, 0.85);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.12),
    0 8px 20px rgba(15, 23, 42, 0.65);
}

/* Modo claro */
body:not(.dark-mode) .domain-status-side {
  background: radial-gradient(circle at 0% 0%,
              rgba(255,255,255,0.9),
              transparent 55%),
              #f9fafb;
  box-shadow:
    0 5px 16px rgba(15, 23, 42, 0.12),
    inset 0 0 8px rgba(255,255,255,0.65);
}

.domain-status-side .side-text {
  font-size: 0.86rem;
  margin-bottom: 6px;
  opacity: 0.9;
}

.domain-status-side .side-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.84rem;
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 900px) {
  .domain-status-card {
    grid-template-columns: 1fr;
  }
}

/* Ajuste específico para que Dominio / Token tengan la misma altura */
.form-grid.two-cols.balanced {
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    gap: 22px;
}
.token-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.token-row input {
    flex: 1;
}

/* 📌 Editor adaptado — versión fluida sin desbordamientos */
.editor-container {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 320px); /* columna de ayuda flexible */
    gap: 1.5rem;
    width: 100%;
    height: auto;          /* Quitamos altura forzada */
    min-height: unset;     /* Se adapta al contenido */
    overflow: hidden;      /* Evita que se salga 1px a la derecha */
    align-items: flex-start;
}

/* El panel lateral nunca debe sobrepasar su columna */
#editor-help {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}


.editor-main {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#body_md {
    flex: 1;                    /* se expande para ocupar todo el espacio vertical disponible */
    min-height: 0;              /* necesario para que flex funcione bien */
    height: 100%;
    resize: vertical;           /* permitir crecer aún más si se quiere */
}

.editor-toolbar {
    flex-shrink: 0;             /* toolbar fija */
}

#editor-side-panel {
    overflow-y: auto;
    padding-right: 10px;
}


/* ============================================================
   EDITOR MARKDOWN — Ajuste óptimo EarVu
   ============================================================ */

#body_md {
    width: 100% !important;
    min-height: 420px !important;
    height: 420px !important;
    padding: 14px 16px !important;

    font-family: "JetBrains Mono", "Consolas", "Menlo", monospace;
    font-size: 0.95rem;
    line-height: 1.55;

    border-radius: 14px !important;
    border: 1px solid rgba(148,163,184,0.45) !important;
    background: rgba(255,255,255,0.95) !important;
    resize: vertical !important;
}

/* Modo oscuro */
body.dark-mode #body_md {
    background: #0f1117 !important;
    color: #e5e7eb !important;
    border-color: rgba(255,255,255,0.25) !important;
}


/* ============================================================
   EarVu — Sistema unificado de selección de tipo y plantillas
   Limpio · Profesional · Sin duplicados · Tamaño perfecto
   ============================================================ */

/* Animación suave */
.fade-in {
    animation: fadeInBlock 0.35s ease forwards;
}
@keyframes fadeInBlock {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FIX DEFINITIVO PARA RADIOS DEL FORMULARIO DE BLOQUES EARVU
   Fuerza tamaño correcto y evita escalados heredados.
   ============================================================ */


/* Elimina cualquier escala heredada en cards globales */
.admin-cards input[type="radio"],
.card input[type="radio"],
.block-template-card input[type="radio"] {
    transform: scale(1) !important;
    zoom: 1 !important;
    width: 18px !important;
    height: 18px !important;
}

/* Resetea posibles overrides del navegador o de clases previas */
input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;

    width: 18px !important;
    height: 18px !important;

    transform: none !important;
    zoom: 1 !important;
}


/* ============================================================
   SELECTOR ELEGANTE DE TIPO DE BLOQUE
   ============================================================ */

.nice-selector {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

/* Tarjeta base */
.evu-type-card {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all .20s ease;
}

/* Hover */
.evu-type-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

/* Radio */
.evu-type-card input[type="radio"] {
  width: 18px;
  height: 18px;
  /* accent-color: var(--evu-accent, #4fa3ff); */
  margin-top: 4px;
  flex-shrink: 0;
}

/* Texto */
.evu-type-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.evu-type-title {
  font-weight: 600;
  font-size: 0.98rem;
}

.evu-type-desc {
  opacity: 0.75;
  font-size: 0.84rem;
}

/* Estado seleccionado */
/*.evu-type-card.selected,
.evu-type-card input[type="radio"]:checked + .evu-type-content {
  /*border-color: var(--evu-accent, #4fa3ff);
  background: rgba(79,163,255,0.08);
}*/


/* Marca visual SOLO cuando el radio está seleccionado */
.evu-radio-wrapper {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    transition: all .20s ease;
}

/* Estado hover */
.evu-radio-wrapper:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
}

/* Estado seleccionado */
.evu-radio-wrapper input[type="radio"]:checked ~ div {
    color: var(--evu-accent, #5ea2ff);
}

.evu-radio-wrapper input[type="radio"]:checked {
    accent-color: var(--evu-accent, #5ea2ff);
}

.evu-radio-wrapper input[type="radio"]:checked {
    /* Esto activa borde más brillante en el contenedor */
}

.evu-radio-wrapper input[type="radio"]:checked::before {
    border-color: var(--evu-accent, #5ea2ff);
}

/* Resaltar la tarjeta completa si está seleccionada */
.evu-radio-wrapper input[type="radio"]:checked + div,
.evu-radio-wrapper input[type="radio"]:checked {
    /* Fondito especial EarVu */
}

.evu-radio-wrapper:has(input[type="radio"]:checked) {
    border-color: var(--evu-accent, #5ea2ff);
    background: rgba(94,162,255,0.07);
}

/* Tarjetas premium */
.evu-template-card {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 12px;
    transition: all .25s ease;
    cursor: pointer;
}

.evu-template-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-2px);
}

.evu-template-card.selected {
    border-color: var(--evu-accent, #5ea2ff);
    background: rgba(94,162,255,0.07);
}

/* Radio compacto */
.evu-template-card input[type="radio"] {
    width: 16px;
    height: 16px;
    margin-bottom: 6px;
    accent-color: var(--evu-accent, #5ea2ff);
}

/* ============================================================
   MINIATURAS EARVU — Ajuste profesional 120×120
   ============================================================ */

.evu-template-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all .18s ease;
}

.evu-template-card:hover {
    background: rgba(255,255,255,0.06);
}

.evu-template-card input[type="radio"] {
    align-self: flex-start;
    margin-bottom: 6px;
    width: 18px !important;
    height: 18px !important;
    accent-color: #4fa3ff;
}

/* Miniaturas */
.template-thumb {
    width: 120px !important;
    height: 120px !important;
    object-fit: contain;        /* Nunca deformar */
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    transition: transform .18s ease, opacity .18s ease;
}

/* Hover */
.evu-template-card:hover .template-thumb {
    transform: scale(1.03);
    opacity: 1;
}

/* Texto */
.evu-template-card .info {
    text-align: center;
}

.evu-template-card .info strong {
    font-size: 0.92rem;
}

.evu-template-card .info span {
    opacity: 0.75;
    font-size: 0.80rem;
}


/* ===============================
   Nuevo sistema de radios EarVu
   =============================== */

.evu-radio-item {
    position: relative;
    margin-bottom: 12px;
}

.evu-radio-item input[type="radio"] {
    /* ocultamos pero es accesible */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.evu-radio-wrapper {
    display: block;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    cursor: pointer;
    transition: all .18s ease;
}

.evu-radio-wrapper:hover {
    background: rgba(255,255,255,0.06);
}

/* ⭐ El highlight azul REAL */
.evu-radio-item input[type="radio"]:checked ~ .evu-radio-wrapper {
    border-color: #4fa3ff;
    background: rgba(79,163,255,0.10);
    box-shadow: 0 0 6px rgba(79,163,255,0.35);
}

/* Estilos de texto */
.evu-radio-label-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.evu-radio-label-desc {
    opacity: .75;
    font-size: 0.85rem;
}

.evu-template-item {
  position: relative;
}

/* Ocultar el radio */
.evu-template-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.evu-template-card {
  padding: 14px;
  border-radius: 14px;
  transition: all .18s ease;
  cursor: pointer;
}

/* Highlight real: funciona 100% */
.evu-template-item input[type="radio"]:checked ~ label.evu-template-card {
  border: 1px solid #4fa3ff;
  background: rgba(79,163,255,0.10);
  box-shadow: 0 0 6px rgba(79,163,255,0.30);
}

.template-thumb {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 8px;
}


/* ============================================================
   FIX: Contraste del botón "Editar" en modo oscuro en listado Blocks
   ============================================================ */

body.dark-mode .btn-edit,
body.dark-mode a.btn-edit {
    background: #4da3ff !important;      /* azul más vivo y visible */
    color: #0a0f16 !important;            /* texto oscuro para máximo contraste */
    border: 1px solid #75baff !important; /* borde sutil */
    font-weight: 600;
}

body.dark-mode .btn-edit:hover,
body.dark-mode a.btn-edit:hover {
    background: #74bbff !important; 
    border-color: #9bceff !important;
}

/* ============================================================
   EARVU — Ajustes técnicos (4.6)
   Estilos visuales extra
   ============================================================ */

/* ---- Contenedor general ---- */
.site-tech-settings {
    margin-top: 10px;
}

.site-tech-settings .form-section {
    position: relative;
    padding: 22px 26px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: .25s ease;
}

body.light-mode .site-tech-settings .form-section {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
}

/* ---- Secciones bloqueadas por licencia ---- */
.site-tech-settings .locked {
    opacity: .5;
    pointer-events: none;
    filter: grayscale(.25);
}

/* ---- Cabecera de sección técnica ---- */
.site-tech-settings .section-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.site-tech-settings .section-note {
    font-size: .85rem;
    opacity: .75;
    margin-bottom: 18px;
}

/* ---- Textareas y inputs técnicos ---- */
.site-tech-settings textarea,
.site-tech-settings input[type="text"],
.site-tech-settings select {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    font-family: monospace;
    line-height: 1.5;
    transition: .2s;
    resize: vertical;
}

body.light-mode .site-tech-settings textarea,
body.light-mode .site-tech-settings input[type="text"],
body.light-mode .site-tech-settings select {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.1);
}

.site-tech-settings textarea:focus,
.site-tech-settings input[type="text"]:focus,
.site-tech-settings select:focus {
    border-color: var(--evu-accent, #4fa3ff);
    box-shadow: 0 0 0 2px rgba(70,140,255,0.28);
    background: rgba(255,255,255,0.1);
}

/* ---- Selector de idiomas ---- */
.tech-lang-select {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.tech-lang-select button {
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    transition: .2s;
}

body.light-mode .tech-lang-select button {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}

.tech-lang-select button.active {
    background: var(--evu-accent, #4fa3ff);
    border-color: var(--evu-accent, #4fa3ff);
    color: #fff;
}

/* ---- Script y HTML beautify toggle ---- */
.editor-toggle {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.editor-toggle input[type="checkbox"] {
    transform: scale(1.2);
    cursor: pointer;
}

/* ---- Indicadores de modificación ---- */
.evu-modified {
    outline: 2px solid var(--evu-accent, #4fa3ff) !important;
    background: rgba(70,140,255,0.12) !important;
}

/* ---- Bloque disabled por licencia ---- */
.site-tech-settings .readonly-block {
    opacity: .45;
    filter: grayscale(40%);
    cursor: not-allowed;
}

/* ---- Títulos por grupo ---- */
.tech-group-title {
    margin-top: 18px;
    font-weight: 600;
    font-size: .95rem;
    opacity: .85;
}

/* ---- Botón guardar ---- */
.site-tech-settings .form-actions {
    padding-top: 12px;
}

/* ============================================================
   FIX — Alinear switches en Ajustes Técnicos
   ============================================================ */

/* Asegura que cada switch-group sea un bloque alineado */
.form-group.switch-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Título + switch en la misma línea */
.form-group.switch-group > label:first-child {
    font-weight: 600;
    margin-bottom: 2px;
}

/* El switch como tal */
.form-group.switch-group .switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    vertical-align: middle;
}

/* El input va oculto */
.form-group.switch-group .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* El slider */
.form-group.switch-group .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #666;
    border-radius: 34px;
    transition: .2s;
}

/* El círculo interior */
.form-group.switch-group .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .2s;
}

/* Estado ON */
.form-group.switch-group input:checked + .slider {
    background-color: #4caf50;
}

.form-group.switch-group input:checked + .slider:before {
    transform: translateX(22px);
}

/* Texto de ayuda bien alineado */
.form-group.switch-group .help-text {
    margin-top: 4px;
    opacity: 0.75;
    line-height: 1.3;
}

/* Alineación perfecta switches */
.form-group.switch-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.form-group.switch-group label:first-child {
    margin-bottom: 6px;
}

.switch {
    margin-top: 4px;
}

.help-text {
    margin-top: 6px !important;
}

.wizard-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.wizard-step {
    flex: 1;
    text-align: left;
}

.wizard-arrow {
    font-size: 24px;
    font-weight: bold;
    opacity: 0.4;
    user-select: none;
}
/* Tamaño base del icono */
.icon-discord {
    width: 36px;
    height: 36px;
    display: block;
    opacity: 0.95;
    transition: 0.15s ease-in-out;
}

/* Hover */
.card:hover .icon-discord {
    opacity: 1;
    transform: scale(1.06);
}

/* Modo claro → icono original (morado) */
:root .icon-discord {
    content: url("/static/img/discord.svg");
}

/* Modo oscuro → icono blanco */
.dark-mode .icon-discord {
    content: url("/static/img/discord_white.svg");
}

.card-group.fixed-3 {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 30px;
}

/* 2 por fila en pantallas medianas */
@media (max-width: 900px) {
    .card-group.fixed-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 1 por fila en móviles */
@media (max-width: 600px) {
    .card-group.fixed-3 {
        grid-template-columns: 1fr;
    }
}


/* ========================================= */
/* ESTADO EN CARDS — TEXTO COLOREADO (BOTTOM-LEFT) */
/* ========================================= */

.card[data-state]::before {
    content: attr(data-state-text);
    position: absolute;
    bottom: 6px;
    left: 8px;

    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;

    background: none !important; /* sin fondo */
    padding: 0;
}

/* COLORES SOLO EN EL TEXTO */
.card[data-state="ok"]::before {
    color: #16a34a; /* verde */
}

.card[data-state="pending"]::before {
    color: #b45309; /* ámbar oscuro */
}

.card[data-state="error"]::before {
    color: #dc2626; /* rojo */
}

.card[data-state="progress"]::before {
    color: #2563eb; /* azul */
}

.card[data-state="na"]::before {
    color: #6b7280; /* gris */
}

/* ==============================================================
   BOTONES WEB / ADMIN — Compact Premium Edition
   ============================================================== */

.earvu-web-btn,
.earvu-symbol-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 6px 20px 3px;      /* ⬅ Mucho más compacto */
  height: 46px;               /* ⬅ Antes 54px, ahora más limpio */

  border-radius: 20px;
  color: #FFF !important;
  text-decoration: none;

  background: linear-gradient(
    180deg,
    #55452E 0%,
    #3D3221 100%
  );

  border: 1px solid rgba(255, 225, 150, 0.55);

  box-shadow:
    0 0 14px rgba(255, 230, 170, 0.18),
    0 0 26px rgba(255, 210, 140, 0.12);

  transition: 0.25s ease;
}

.earvu-web-btn.active,
.earvu-symbol-btn.active {
    background: rgba(255,255,255,0.22) !important;
    box-shadow: 0 0 12px rgba(255,255,255,0.25);
    transform: translateY(-1px);
}

.earvu-web-btn:not(.active),
.earvu-symbol-btn:not(.active) {
    opacity: 0.7;
}

.earvu-web-btn:hover,
.earvu-symbol-btn:hover {
  transform: translateY(-1px);

  background: linear-gradient(
    180deg,
    #5B4A32 0%,
    #433726 100%
  );

  box-shadow:
    0 0 20px rgba(255, 235, 180, 0.24),
    0 0 32px rgba(255, 220, 150, 0.16);
}

/* Icono */
.earvu-web-btn .icon,
.earvu-symbol-btn .icon {
  font-size: 1.15rem;    /* mismo tamaño, pero visualmente más centrado */
  line-height: 1;
}

/* Microtexto */
.earvu-web-btn .label,
.earvu-symbol-btn .label {
  margin-top: 1px;       /* ⬅ antes 2px → ahora más compacto */
  font-size: 0.52rem;    /* diminuto pero legible */
  letter-spacing: 0.7px;
  opacity: 0.85;
  font-weight: 600;
  text-transform: uppercase;
  color: #F5EFDD;
  pointer-events: none;
}


.btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}



/* Disabled de algunos botones (como Guardar), más evidentes */
button:disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(100%);
  box-shadow: none;
}



/* ============================================================
   EARVU · UX SEMÁNTICO · PATRÓN GLOBAL
   (bloqueos por plan, subgrupos, affordances)
   ============================================================ */

/* ──────────────────────────────
   SECCIONES
   ────────────────────────────── */

.evu-section-advanced {
  position: relative;
}

.evu-section-locked {
  position: relative;
  padding-left: 14px;
}

/* Indicador visual de bloqueo por plan */
.evu-section-locked::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: rgba(255, 170, 0, 0.35);
  pointer-events: none;
}

.evu-section-locked:hover::before {
  background: rgba(255, 170, 0, 0.55);
}

.evu-section-locked:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* ──────────────────────────────
   BADGES
   ────────────────────────────── */

.evu-badge {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 10px;
  vertical-align: middle;
}

.evu-badge-locked {
  background: rgba(255, 170, 0, 0.15);
  color: #ffb84d;
  border: 1px solid rgba(255, 170, 0, 0.35);
}

/* ──────────────────────────────
   INPUTS BLOQUEADOS / EDITABLES
   ────────────────────────────── */

.evu-input-locked,
.evu-input-editable {
  position: relative;
}

/* Texto contextual (usar con data-attribute en HTML en el futuro) */
.evu-input-locked::after {
  content: attr(data-locked-label);
  position: absolute;
  top: -6px;
  right: 0;
  font-size: 0.7rem;
  color: #ffb84d;
  opacity: 0.85;
}

.evu-input-editable::after {
  content: attr(data-editable-label);
  position: absolute;
  top: -6px;
  right: 0;
  font-size: 0.7rem;
  color: rgba(120, 200, 255, 0.95);
  opacity: 0.85;
}

/* Feedback suave al hover en inputs editables */
.evu-input-editable:hover {
  outline: 1px solid rgba(120, 200, 255, 0.18);
  border-radius: 14px;
}

/* ──────────────────────────────
   CONTROLES DESHABILITADOS
   ────────────────────────────── */

.form-admin *[disabled] {
  opacity: 0.45 !important;
  filter: grayscale(0.4);
  cursor: not-allowed !important;
}

/* Switch no interactivo */
.evu-input-locked .switch {
  pointer-events: none;
}

.evu-input-locked .slider {
  background-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.evu-input-locked input:checked + .slider {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.evu-input-locked .slider:before {
  background-color: rgba(255, 255, 255, 0.35);
}

/* Cursor solo donde procede */
.evu-input-locked label,
.evu-input-locked .switch,
.evu-input-locked .slider {
  cursor: not-allowed !important;
}

/* ──────────────────────────────
   SUBGRUPOS (PATRÓN BASE)
   ────────────────────────────── */

.evu-subgroup {
  padding: 14px 16px;
  border-radius: 16px;
}

.evu-subgroup-advanced {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 170, 0, 0.25);
}

.evu-subgroup-basic {
  background: rgba(120, 200, 255, 0.04);
  border: 1px solid rgba(120, 200, 255, 0.18);
}

/* Mejora visual para checkbox inline dentro de subgrupos */
.evu-subgroup .checkbox-inline {
  display: block;
}


/* =========================================================
   UX EARVU · FLUJO WIZARD
   Campos necesarios para avanzar en el ecosistema
   ========================================================= */

/* Subgrupo que activa el flujo del ecosistema (barra robusta) */
.evu-subgroup-flow {
  position: relative;
  padding-left: 14px; /* mantenemos el desplazamiento visual */
}

/* Barra verde independiente de border (NO se rompe por hover/border shorthand) */
.evu-subgroup-flow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 4px;
  background: rgba(90, 200, 120, 0.78); /* verde EarVu */
  pointer-events: none;
}

/* Refuerzo visual sutil al pasar el ratón */
.evu-subgroup-flow:hover {
  background: rgba(90, 200, 120, 0.03);
}

/* Y en hover, refuerza también la barra */
.evu-subgroup-flow:hover::before {
  background: rgba(90, 200, 120, 0.92);
}

/* Icono del flujo (≋✨≋) */
.evu-flow-icon {
  display: inline-block;
  margin-right: 6px;
  font-size: 0.95rem;
  color: rgba(90, 200, 120, 0.95);
  cursor: help;
  vertical-align: middle;
  filter: saturate(1.1);
}

/* En dispositivos táctiles */
@media (hover: none) {
  .evu-subgroup-flow:hover {
    background: none;
  }
}



/* ===============================
   EarVu · Info Panel (Recursos)
   =============================== */

.evu-info-panel {
  background: rgba(70, 110, 170, 0.18);
  border: 1px solid rgba(120, 160, 220, 0.35);
  border-radius: 18px;
  padding: 20px 24px;
  margin-bottom: 28px;
}

.evu-info-header {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(200, 220, 255, 0.85);
  margin-bottom: 14px;
}

.evu-info-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.evu-info-value {
  font-size: 2.2rem;
  font-weight: 700;
  color: #ffffff;
}

.evu-info-max {
  font-size: 1rem;
  color: rgba(200, 220, 255, 0.75);
}

.evu-info-bar {
  height: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-bottom: 10px;
}

.evu-info-bar-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(160, 200, 255, 0.9),
    rgba(120, 170, 240, 0.9)
  );
  border-radius: 10px;
}

.evu-info-footer {
  font-size: 0.85rem;
  color: rgba(220, 230, 255, 0.75);
}


/* Paleta en Site-Identity */

.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.palette-card {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.01)
  );
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px 16px 18px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.palette-card:hover {
  border-color: rgba(120,160,255,0.35);
  box-shadow: 0 0 0 1px rgba(120,160,255,0.15);
}

.palette-header label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}

.palette-swatch {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.15),
    0 6px 18px rgba(0,0,0,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.palette-swatch:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.25),
    0 10px 26px rgba(0,0,0,0.45);
}

.palette-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.palette-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.palette-hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
}

.palette-role {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
}

.evu-section-flow .palette-card {
  border-left: 3px solid rgba(90,200,120,0.9);
}


.evu-section-flow .evu-wizard-item {
  border-left: 3px solid rgba(90,200,120,0.9);
}

/* FIX Desplegables no de color blanco sobre fondo blanco */
/* Inputs dentro de evu-subgroup */
.evu-subgroup input,
.evu-subgroup select,
.evu-subgroup textarea {
  background-color: var(--input-bg);
  color: var(--input-color);
  border: 1px solid var(--input-border);
}

.evu-subgroup select option {
  color: #000;
}

/* ============================
   EarVu · Integration Icons
   ============================ */

.evu-integration-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  flex-shrink: 0;

  background-color: rgba(255, 255, 255, 0.85);

  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;

  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.evu-title-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Variantes por plataforma */
.evu-icon-telegram {
  mask-image: url("/static/img/integrations/telegram.svg");
  -webkit-mask-image: url("/static/img/integrations/telegram.svg");
}

.evu-icon-wordpress {
  mask-image: url("/static/img/integrations/wordpress.svg");
  -webkit-mask-image: url("/static/img/integrations/wordpress.svg");
}

.evu-icon-whatsapp {
  mask-image: url("/static/img/integrations/whatsapp.svg");
  -webkit-mask-image: url("/static/img/integrations/whatsapp.svg");
}

.evu-icon-facebook {
  mask-image: url("/static/img/integrations/facebook.svg");
  -webkit-mask-image: url("/static/img/integrations/facebook.svg");
}


/* =========================================================
   EarVu · Modal responsive + scroll interno
   ========================================================= */

.modal-earvu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-earvu .modal-content {
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}


/* Filtros en tabla Sistema de Mensajes */
.admin-filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.filter-label {
  font-weight: 600;
  opacity: 0.85;
}

.filter-select {
  min-width: 160px;
}


/* Fix SELECT en modo oscuro de la Card 2.2 (Frecuencia) */
#discord-frequency-select,
#discord-frequency-select option {
  background-color: #0f172a;
  color: #e5e7eb;
}


.discord-channel-help summary {
  cursor: pointer;
  font-weight: 600;
  color: #7fb7ff;
  margin-top: 4px;
}

.discord-channel-help summary:hover {
  text-decoration: underline;
}

.discord-channel-help {
  margin-top: 4px;
  margin-left: 18px;
  font-size: 0.9em;
  opacity: 0.9;
}

.discord-channel-help .help-steps {
  margin-top: 6px;
}

.discord-channel-help ol {
  padding-left: 18px;
  margin: 6px 0;
}

.discord-channel-help li {
  margin-bottom: 4px;
}



/* Con errores */
select.has-error {
  border-color: var(--evu-red);
  background-color: rgba(220, 53, 69, 0.05);
}


/* =====================================================
   SECTION DIVIDER — EARVU SPECTRUM
   ===================================================== */

.section-divider.earvu-spectrum {
  width: 140px;
  height: 2px;
  margin: 0 auto 0 auto;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,

    /* entrada suave */
    rgba(255, 255, 255, 0.25) 30%,

    /* pulso EarVu (muy breve) */
    #ff8a00 42%,   /* naranja */
    #ffd200 46%,   /* amarillo */
    #3ad29f 50%,   /* verde */
    #4f8cff 54%,   /* azul */

    /* salida suave */
    rgba(255, 255, 255, 0.25) 70%,
    rgba(255, 255, 255, 0) 100%
  );

  border-radius: 2px;
  opacity: 0.9;
}