/* ========================================
   Patrimonium · Estilos globales
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Accesibilidad transversal */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus:not(:focus-visible) { outline: none; }

/* ========================================
   Sistema de temas: variables base (oscuro)
   ======================================== */

:root,
[data-theme="dark"] {
  --bg: #0a0a0f;
  --bg-2: #12121a;
  --bg-3: #1a1a24;
  --glass: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-hover: rgba(255, 255, 255, 0.12);
  --text: #fafafa;
  --text-2: #a1a1aa;
  --text-3: #71717a;
  --muted: #71717a;
  --accent: #00d9a3;
  --accent-2: #06b6d4;
  --accent-glow: rgba(0, 217, 163, 0.15);
  --success: #00d9a3;
  --violet: #a78bfa;
  --danger: #f87171;
  --warning: #fbbf24;
  --info: #06b6d4;
  --blur: saturate(180%) blur(20px);

  /* Gradientes del fondo - visibles en oscuro */
  --bg-mesh-1: rgba(0, 217, 163, 0.08);
  --bg-mesh-2: rgba(167, 139, 250, 0.06);

  /* Texto sobre acento (botones primarios) */
  --on-accent: #0a0a0f;

  /* Sombras */
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-button-hover: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* Colores del gráfico de Evolución (IdM.09) */
  --chart-neto:        #00d9a3;
  --chart-bruto:       #06b6d4;
  --chart-liquidez:    #a78bfa;
  --chart-inversiones: #fbbf24;
  --chart-tangibles:   #fb923c;
  --chart-deudas:      #f87171;
  --chart-usd:         #22c55e;
}

/* ========================================
   Sistema de temas: tema claro
   ======================================== */

[data-theme="light"] {
  --bg: #f8f8f5;
  --bg-2: #ffffff;
  --bg-3: #f0f0ec;
  --glass: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(15, 23, 42, 0.1);
  --glass-border-hover: rgba(15, 23, 42, 0.18);
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #6b7280;
  --muted: #6b7280;
  --accent: #00b386;
  --accent-2: #0891b2;
  --accent-glow: rgba(0, 179, 134, 0.12);
  --success: #00b386;
  --violet: #8b5cf6;
  --danger: #dc2626;
  --warning: #d97706;
  --info: #0891b2;
  --blur: saturate(180%) blur(20px);

  /* Sin mesh visible en tema claro */
  --bg-mesh-1: transparent;
  --bg-mesh-2: transparent;

  /* Texto sobre acento */
  --on-accent: #ffffff;

  /* Sombras suaves para tema claro */
  --shadow-modal: 0 24px 48px rgba(15, 23, 42, 0.15);
  --shadow-button-hover: 0 8px 24px rgba(15, 23, 42, 0.12);

  /* Colores del gráfico de Evolución (IdM.09) */
  --chart-neto:        #059669;
  --chart-bruto:       #0891b2;
  --chart-liquidez:    #7c3aed;
  --chart-inversiones: #d97706;
  --chart-tangibles:   #ea580c;
  --chart-deudas:      #dc2626;
  --chart-usd:         #16a34a;
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  letter-spacing: -0.01em;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(at 0% 0%, var(--bg-mesh-1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, var(--bg-mesh-2) 0px, transparent 50%);
  pointer-events: none;
  z-index: 0;
  transition: background 0.3s ease;
}

/* ========================================
   Pantalla de login (NO autenticado)
   ======================================== */

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}

/* Override solo para la pantalla principal de login: la verify-screen
   sigue centrada porque solo tiene un card pequeño. La de login lleva
   el card + la extensión de landing debajo, así que pasamos a flujo
   vertical con scroll natural. */
#login-screen {
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 48px;
  padding-bottom: 0;
}

.login-screen.hidden {
  display: none;
}

.login-card {
  max-width: 880px;
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 40px 44px 32px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  text-align: center;
  animation: loginFadeIn 0.6s ease-out;
}

/* Layout 2 columnas en escritorio: hero+features a la izquierda,
   botones+trust a la derecha. En <880px colapsa a 1 columna. */
.login-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  text-align: left;
  margin-top: 8px;
  margin-bottom: 8px;
}

.login-grid-left {
  text-align: left;
}

@media (min-width: 881px) {
  .login-grid-left .subtitle {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }
}

.login-grid-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

@media (max-width: 880px) {
  .login-card {
    max-width: 520px;
  }
  .login-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .login-grid-left {
    text-align: center;
  }
}

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

.login-card h1 {
  font-size: 52px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.025em;
  line-height: 1;
}

.login-hero {
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}

@media (max-width: 880px) {
  .login-hero {
    font-size: 22px;
  }
}

.login-hero-em {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

.subtitle {
  color: var(--text-2);
  font-size: 14px;
  margin-bottom: 22px;
  line-height: 1.55;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 880px) {
  .subtitle {
    margin-bottom: 18px;
  }
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(0, 217, 163, 0.1);
  border: 1px solid rgba(0, 217, 163, 0.3);
  border-radius: 100px;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.login-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: left;
}

@media (max-width: 880px) {
  .login-features {
    grid-template-columns: 1fr;
    margin-bottom: 4px;
  }
}

.login-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.login-feature:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-1px);
}

.login-feature-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 217, 163, 0.1);
  color: var(--accent);
}

[data-theme="light"] .login-feature-icon {
  background: rgba(0, 179, 134, 0.1);
}

.login-feature-icon svg {
  width: 18px;
  height: 18px;
}

.login-feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.login-feature-text strong {
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.login-feature-text span {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.4;
}

.login-trust {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 480px) {
  .login-card {
    padding: 32px 22px 28px;
  }
  .login-card h1 {
    font-size: 42px;
  }
  .login-hero {
    font-size: 20px;
  }
  .login-feature {
    padding: 10px 12px;
  }
}

.login-auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-button {
  width: 100%;
  padding: 14px 16px;
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  transition: all 0.2s;
  min-height: 50px;
  white-space: nowrap;
}

[data-theme="light"] .login-button {
  background: #0f172a;
  color: #ffffff;
}

[data-theme="light"] .login-button:hover {
  background: #1e293b;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 217, 163, 0.35);
}

[data-theme="light"] .login-button:hover {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 179, 134, 0.4);
}

.login-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variante "Continuar con email": outlined, secundaria del par. */
.login-button-email {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--glass-border);
}

[data-theme="light"] .login-button-email {
  background: transparent;
  color: var(--text);
}

.login-button-email:hover {
  background: rgba(0, 217, 163, 0.06);
  border-color: rgba(0, 217, 163, 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 217, 163, 0.25);
}

[data-theme="light"] .login-button-email:hover {
  background: rgba(0, 179, 134, 0.06);
  border-color: rgba(0, 179, 134, 0.5);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(0, 179, 134, 0.3);
}

.login-button-email svg { color: var(--accent, #10b981); }

.google-icon {
  width: 18px;
  height: 18px;
}

.status {
  margin-top: 24px;
  font-size: 11px;
  color: var(--text-3);
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.status.error {
  color: var(--danger);
}

/* ========================================
   Login: separadores compartidos (email + demo)
   ======================================== */

.login-divider,
.login-demo-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  color: var(--text-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.login-divider::before,
.login-divider::after,
.login-demo-divider::before,
.login-demo-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}

/* ========================================
   Login: formulario email + contraseña
   ======================================== */

/* Cuando el form vive como .modal-form, dejamos que el padding y el
   margin-bottom de .form-field manden. No forzamos display:flex aquí. */
.email-auth-form .form-field {
  margin-bottom: 14px;
}

.email-auth-form .form-field:last-of-type {
  margin-bottom: 16px;
}

.email-auth-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-2, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
}

.email-auth-input::placeholder {
  color: var(--text-3);
}

.email-auth-input:focus {
  outline: none;
  border-color: rgba(0, 217, 163, 0.6);
  background: var(--bg-2, rgba(255,255,255,0.06));
}

.password-field {
  position: relative;
}

.password-field .email-auth-input {
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.password-toggle:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}

.email-auth-btn {
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.email-auth-btn:hover {
  border-color: rgba(0, 217, 163, 0.55);
  background: rgba(0, 217, 163, 0.06);
}

.email-auth-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#email-signin-btn {
  background: var(--text);
  color: var(--bg);
  border: none;
  margin-top: 4px;
  font-weight: 500;
}

[data-theme="light"] #email-signin-btn {
  background: #0f172a;
  color: #ffffff;
}

#email-signin-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 217, 163, 0.3);
}

[data-theme="light"] #email-signin-btn:hover {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(0, 179, 134, 0.35);
}

.email-auth-secondary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 10px;
  flex-wrap: wrap;
}

.email-auth-link {
  background: none;
  border: none;
  color: var(--text-2, var(--text-3));
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--glass-border);
}

.email-auth-link:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

.email-auth-error {
  font-size: 12px;
  color: var(--danger, #ef4444);
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
}

.email-auth-success {
  font-size: 12px;
  color: var(--accent, #10b981);
  padding: 8px 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
}

/* ========================================
   Pantalla: verificación de email pendiente
   ======================================== */

.verify-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(0, 217, 163, 0.12);
  border: 1px solid rgba(0, 217, 163, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #10b981);
}

#verify-screen .login-card {
  text-align: center;
}

#verify-screen h1 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 14px;
}

.verify-lead {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 12px;
}

.verify-lead strong {
  color: var(--accent, #10b981);
  font-weight: 600;
}

.verify-hint {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.55;
  margin: 0 0 24px;
}

#verify-screen .login-button {
  margin-bottom: 10px;
}

#verify-screen .email-auth-btn {
  margin-top: 0;
}

.verify-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}

.login-demo-button {
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  transition: all 0.2s;
}

.login-demo-button:hover {
  border-color: rgba(0, 217, 163, 0.6);
  background: rgba(0, 217, 163, 0.08);
  transform: translateY(-1px);
}

.login-demo-button svg {
  color: var(--accent, #10b981);
  flex-shrink: 0;
}

/* CTA principal: probar la demo. Con gradiente de marca, glow,
   y un badge "Empieza aquí" para guiar al primer clic. */
.login-demo-cta {
  position: relative;
  width: 100%;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #ffffff;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: 0 10px 28px rgba(0, 217, 163, 0.28), 0 0 0 1px rgba(0, 217, 163, 0.4);
  letter-spacing: -0.005em;
}

.login-demo-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 217, 163, 0.42), 0 0 0 1px rgba(0, 217, 163, 0.6);
}

.login-demo-cta:active {
  transform: translateY(0);
}

.login-demo-cta-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.login-demo-cta-main svg {
  color: currentColor;
  flex-shrink: 0;
}

.login-demo-cta-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--bg);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 100px;
  border: 1px solid rgba(0, 217, 163, 0.45);
}

[data-theme="light"] .login-demo-cta-badge {
  background: #ffffff;
}

/* Separador "o regístrate para guardar tus datos" debajo del CTA demo */
.login-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 2px;
  color: var(--text-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.login-auth-divider::before,
.login-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}

/* ========================================
   Demo: banner superior dentro de la app
   ======================================== */

.demo-banner {
  position: fixed;
  top: 0;
  left: 260px;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  background: linear-gradient(90deg, rgba(0, 217, 163, 0.18), rgba(16, 185, 129, 0.12));
  border-bottom: 1px solid rgba(0, 217, 163, 0.35);
  color: var(--text);
  font-size: 13px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-height: 44px;
  box-sizing: border-box;
}

/* Empuja el contenido principal cuando hay banner visible. */
body.demo-active .main {
  padding-top: 84px;
}

[data-theme="light"] .demo-banner {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.06));
  border-bottom-color: rgba(16, 185, 129, 0.35);
}

.demo-banner[hidden] { display: none; }

.demo-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: demo-pulse 1.6s infinite;
  flex-shrink: 0;
}

@keyframes demo-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.demo-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.demo-banner-text strong {
  font-size: 13px;
  font-weight: 600;
}

.demo-banner-sub {
  font-size: 11px;
  color: var(--text-2);
}

.demo-exit-button {
  padding: 7px 14px;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: var(--text);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}

.demo-exit-button:hover {
  background: rgba(16, 185, 129, 0.28);
  border-color: rgba(16, 185, 129, 0.65);
}

/* Bajo 900px el sidebar pasa a overlay, así que el banner debe cubrir todo
   el ancho desde left:0 (no quedarse en left:260px sobre vacío). */
@media (max-width: 900px) {
  .demo-banner {
    left: 0;
  }
  /* Cuando el demo está activo, bajamos el botón de menú (hamburguesa) y el
     botón flotante de info para que no queden ocultos detrás del banner. */
  body.demo-active .menu-toggle,
  body.demo-active .info-toggle {
    top: 56px;
  }
}

@media (max-width: 600px) {
  .demo-banner {
    padding: 8px 14px;
    gap: 10px;
  }
  .demo-banner-sub {
    display: none;
  }
  body.demo-active .main {
    padding-top: 72px;
  }
}

/* ========================================
   App principal (SÍ autenticado)
   ======================================== */

.app-screen {
  display: none;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.app-screen.visible {
  display: flex;
}

/* ========================================
   Sidebar
   ======================================== */

.sidebar {
  width: 260px;
  background: var(--bg-2);
  border-right: 1px solid var(--glass-border);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  flex-shrink: 0;
  overflow-y: auto;
  z-index: 10;
}

.sidebar-logo {
  padding: 0 12px 16px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text-3);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  width: 100%;
  text-align: left;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.sidebar-search-trigger:hover {
  color: var(--text);
  border-color: var(--glass-border-hover, var(--glass-border));
  background: var(--bg-2);
}

.sidebar-search-trigger svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.sidebar-search-trigger > span {
  flex: 1;
}

.sidebar-search-trigger kbd {
  font-family: 'Geist Mono', 'Monaco', monospace;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  background: var(--bg-2);
  color: var(--text-3);
  flex-shrink: 0;
}

.sidebar-logo-text {
  /* button reset: el logo es un botón clicable que lleva al Resumen */
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;

  font-size: 22px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: opacity 0.15s;
}

.sidebar-logo-text:hover {
  opacity: 0.75;
}

.sidebar-logo-text:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.sidebar-logo-tag {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 6px;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-section-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 12px 6px;
  margin-top: 8px;
  font-weight: 600;
  border-top: 1px solid var(--glass-border);
}

.nav-section-label:first-child {
  margin-top: 0;
  padding-top: 4px;
  border-top: none;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  transition: background-color 0.15s ease, color 0.15s ease;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  letter-spacing: -0.01em;
}

.nav-item:hover {
  background: var(--glass);
  color: var(--text);
}

.nav-item.active {
  background: var(--accent-glow);
  color: var(--accent);
  font-weight: 600;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-icon {
  width: 16px;
  height: 16px;
  opacity: 0.85;
  flex-shrink: 0;
}

/* ========================================
   User card en sidebar
   ======================================== */

.sidebar-user {
  border-top: 1px solid var(--glass-border);
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-email {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.sidebar-logout {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.sidebar-logout:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Crédito de autor en el pie del sidebar */
.sidebar-credit {
  margin-top: 12px;
  padding: 10px 4px 4px;
  border-top: 1px solid var(--glass-border);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.sidebar-credit:hover {
  opacity: 1;
}

.sidebar-credit-author {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Crédito de autor en la pantalla de login */
.login-credit {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.login-credit:hover {
  opacity: 1;
}

/* ========================================
   Main content
   ======================================== */

.main {
  flex: 1;
  padding: 40px 56px;
  overflow-y: auto;
  min-width: 0;
  margin-left: 260px;
}

.view {
  display: none;
  animation: fadeIn 0.3s ease;
}

.view.active {
  display: block;
}

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

.view-header {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--glass-border);
}

.view-title {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}

.view-title .em {
  font-style: italic;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.view-subtitle {
  color: var(--text-2);
  font-size: 14px;
  letter-spacing: 0;
}

/* ========================================
   Welcome card
   ======================================== */

.welcome-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 18px 22px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.welcome-greeting {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  position: relative;
}

.welcome-greeting .em {
  font-style: italic;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-text {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 600px;
  position: relative;
}

/* ========================================
   Checklist de onboarding inicial
   ======================================== */
.onboarding-checklist {
  background: linear-gradient(135deg, var(--accent-glow, rgba(0, 217, 163, 0.10)) 0%, var(--glass) 100%);
  border: 1px solid rgba(0, 217, 163, 0.32);
  border-radius: 16px;
  padding: 22px 24px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  margin-bottom: 22px;
}

.onboarding-header {
  margin-bottom: 14px;
}

.onboarding-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.onboarding-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.onboarding-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--glass-border);
  border-radius: 999px;
  overflow: hidden;
}

.onboarding-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.onboarding-progress-label {
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

.onboarding-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.onboarding-step {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  transition: border-color 0.2s, background-color 0.2s;
}

.onboarding-step.pending:hover {
  border-color: rgba(0, 217, 163, 0.42);
}

.onboarding-step.done {
  opacity: 0.55;
}

.onboarding-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  padding-top: 2px;
}

.onboarding-step.done .onboarding-step-icon {
  color: var(--accent);
}

.onboarding-step-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.onboarding-step-label {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
}

.onboarding-step-sublabel {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.45;
}

.onboarding-step.done .onboarding-step-label {
  text-decoration: line-through;
  color: var(--text-2);
}

.onboarding-step.done .onboarding-step-sublabel {
  display: none;
}

.onboarding-step-actions {
  align-self: center;
}

.onboarding-step-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.onboarding-step-done {
  font-size: 11.5px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.onboarding-step-cta {
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.onboarding-step-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 217, 163, 0.25);
}

.onboarding-step-skip {
  padding: 6px 10px;
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.onboarding-step-skip:hover {
  color: var(--text-2);
  border-color: var(--glass-border-hover, var(--glass-border));
}

@media (max-width: 600px) {
  .onboarding-step {
    grid-template-columns: 20px 1fr;
    grid-template-rows: auto auto;
  }
  .onboarding-step-actions {
    grid-column: 2 / 3;
    margin-top: 4px;
  }
}

/* ========================================
   Empty state (vistas en construcción)
   ======================================== */

.empty-state {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 64px 40px;
  backdrop-filter: var(--blur);
  text-align: center;
}

.empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  background: var(--accent-glow);
  border: 1px solid rgba(0, 217, 163, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.empty-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.empty-description {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto;
}

.empty-tag {
  display: inline-block;
  margin-top: 20px;
  padding: 4px 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

/* ========================================
   Mobile menu toggle
   ======================================== */

/* Backdrop del sidebar móvil */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 35;
  animation: fadeInBackdrop 0.2s ease;
}

[data-theme="light"] .sidebar-backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.sidebar-backdrop.visible {
  display: block;
}

@keyframes fadeInBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

.menu-toggle {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 50;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 900px) {
  .menu-toggle {
    display: flex;
    width: 44px;
    height: 44px;
  }

  .info-toggle {
    width: 36px;
    height: 36px;
    top: 18px;
    right: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .info-toggle svg {
    width: 18px;
    height: 18px;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.4);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .nav-item.active::before {
    left: -16px;
  }

  .main {
    padding: 80px 24px 40px;
    width: 100%;
    margin-left: 0;
  }

  .view-title {
    font-size: 28px;
  }
}

/* ========================================
   View header con acción
   ======================================== */

.view-header-with-action {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

/* ========================================
   Botones reutilizables
   ======================================== */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: all 0.2s;
  box-shadow: 0 4px 16px var(--accent-glow);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--accent-glow);
}

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

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: all 0.2s;
}

.btn-secondary:hover {
  border-color: var(--glass-border-hover);
  background: rgba(255, 255, 255, 0.05);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--danger);
  color: #fff;
  border: 1px solid var(--danger);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: all 0.2s;
}

.btn-danger:hover {
  background: #ef4444;
  border-color: #ef4444;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(248, 113, 113, 0.35);
}

[data-theme="light"] .btn-danger:hover {
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.25);
}

/* Foco accesible en todos los botones de acción */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-danger:focus-visible {
  outline-color: var(--danger);
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Zona de peligro en Ajustes: ribete rojo y card con tono de aviso. */
.settings-section-danger {
  border: 1px solid rgba(239, 68, 68, 0.30);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(239, 68, 68, 0.02));
}

.settings-section-danger .settings-section-title {
  color: var(--danger);
}

/* Badge "BETA" en el sidebar junto al logo Patrimonium. */
.sidebar-logo-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-beta-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 2px 7px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  text-transform: uppercase;
  line-height: 1.3;
  cursor: help;
  white-space: nowrap;
}

/* Aviso de fase BETA dentro del modal de bienvenida. */
.phase-info-beta-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--accent-glow, rgba(0, 217, 163, 0.12)), rgba(6, 182, 212, 0.06));
  border: 1px solid rgba(0, 217, 163, 0.30);
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

.phase-info-beta-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  text-transform: uppercase;
  line-height: 1.4;
  margin-top: 1px;
}

/* Wordmark del login con badge BETA al lado. Resetea el gradiente que el
   h1 padre aplica globalmente: solo el primer span lo lleva, el badge usa
   fondo sólido. */
.login-card h1.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  background: none;
  -webkit-text-fill-color: initial;
}

.login-brand > span:first-child {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-beta-badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 4px 10px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-transform: uppercase;
  line-height: 1;
  align-self: center;
  white-space: nowrap;
  cursor: help;
  box-shadow: 0 4px 12px rgba(0, 217, 163, 0.25);
}

@media (max-width: 600px) {
  .login-beta-badge {
    font-size: 11px;
    padding: 3px 8px;
    letter-spacing: 0.14em;
  }
}

/* ========================================
   Loading state
   ======================================== */

.loading-state {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-2);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--glass-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 0.8s linear infinite;
}

.loading-text {
  font-size: 13px;
  color: var(--text-3);
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: 0.05em;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   Entidades · cuadrícula y tarjetas
   ======================================== */

.entities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.entity-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: all 0.2s;
  position: relative;
}

.entity-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
}

.entity-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.entity-card-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}

.entity-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.entity-action-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-3);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.entity-action-btn:hover {
  color: var(--text);
  border-color: var(--glass-border-hover);
}

.entity-action-btn.delete:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.entity-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.entity-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.entity-tag.tipo {
  background: rgba(167, 139, 250, 0.1);
  color: var(--violet);
  border: 1px solid rgba(167, 139, 250, 0.2);
}

.entity-tag.estado-activa {
  background: rgba(0, 217, 163, 0.1);
  color: var(--accent);
  border: 1px solid rgba(0, 217, 163, 0.2);
}

.entity-tag.estado-inactiva {
  background: rgba(161, 161, 170, 0.1);
  color: var(--text-2);
  border: 1px solid var(--glass-border);
}

.entity-tag.estado-cerrada {
  background: rgba(248, 113, 113, 0.1);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.2);
}

.entity-card-description {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: 8px;
}

/* ========================================
   Modales
   ======================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  animation: modalSlideIn 0.25s ease;
}

@media (max-width: 600px) {
  .modal {
    padding: 0;
    align-items: flex-end;
  }
  .modal-content {
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    max-width: 100%;
  }
  .modal-content-small {
    border-radius: 16px 16px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal-content {
    animation: none;
  }
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-content-small {
  max-width: 400px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 0;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.modal-close {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.modal-close:hover {
  color: var(--text);
  border-color: var(--glass-border-hover);
}

.modal-body {
  padding: 16px 24px;
}

.modal-footer {
  padding: 16px 24px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--glass-border);
  margin-top: 8px;
  padding-top: 20px;
}

@media (max-width: 600px) {
  .modal-footer {
    padding: 16px;
    padding-top: 16px;
    gap: 8px;
    flex-direction: column-reverse;
  }
  .modal-footer button {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}

.confirm-message {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}

.confirm-message strong {
  color: var(--text);
  font-weight: 600;
}

/* ========================================
   Formularios
   ======================================== */

.modal-form {
  padding: 24px;
}

.form-field {
  margin-bottom: 20px;
}

.form-field:last-of-type {
  margin-bottom: 8px;
}

.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.form-field label .optional,
.ticker-other-field label .optional {
  color: var(--text-3);
  font-weight: 400;
  font-size: 12px;
}

.form-field input[type="text"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.15s;
}

.form-field input[type="text"]:focus,
.form-field input[type="number"]:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-3);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-field textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.form-field select {
  cursor: pointer;
}

.form-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
  line-height: 1.4;
   }

/* ========================================
   Ajustes
   ======================================== */

.settings-section {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 28px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  margin-bottom: 16px;
}

.settings-section-header {
  margin-bottom: 20px;
}

.settings-section-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.settings-section-description {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

.settings-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-option {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.settings-option:hover {
  border-color: var(--glass-border-hover);
}

.settings-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(0, 217, 163, 0.05);
}

.settings-option-content {
  flex: 1;
}

.settings-option-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.settings-option-description {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}

.settings-option-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: all 0.2s;
}

.settings-option:has(input:checked) .settings-option-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.settings-status {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-3);
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: 0.03em;
  min-height: 18px;
}

.settings-status.success {
  color: var(--accent);
}

.settings-status.error {
  color: var(--danger);
}

.settings-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.settings-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--glass-border);
}

.settings-info-row:last-child {
  border-bottom: none;
}

.settings-info-label {
  font-size: 13px;
  color: var(--text-2);
}

.settings-info-value {
  font-size: 13px;
  font-weight: 500;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

/* ========================================
   Ajustes · sección Perfil
   ======================================== */

.profile-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  align-items: start;
}

.profile-avatar-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.profile-avatar-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--glass-border);
  background: var(--bg-2);
}

.profile-avatar-note {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.4;
  max-width: 120px;
}

.profile-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-fields .form-field {
  margin-bottom: 0;
}

.profile-fields input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-2, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

.profile-fields input[type="text"]:focus {
  outline: none;
  border-color: rgba(0, 217, 163, 0.6);
}

.avatar-source-toggle {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.avatar-source-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
  transition: all 0.15s;
  background: transparent;
}

.avatar-source-option:hover {
  border-color: rgba(0, 217, 163, 0.45);
  color: var(--text);
}

.avatar-source-option input[type="radio"] {
  margin: 0;
  accent-color: var(--accent, #10b981);
}

.avatar-source-option:has(input:checked) {
  border-color: rgba(0, 217, 163, 0.6);
  background: rgba(0, 217, 163, 0.08);
  color: var(--text);
  font-weight: 500;
}

.avatar-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.avatar-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  position: relative;
}

.avatar-color-swatch:hover {
  transform: scale(1.08);
}

.avatar-color-swatch.selected {
  border-color: var(--text);
  box-shadow: 0 0 0 3px var(--bg);
}

.avatar-color-swatch.selected::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
  pointer-events: none;
}

.profile-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .profile-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .profile-avatar-block {
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
  }
  .profile-avatar-img {
    width: 72px;
    height: 72px;
  }
  .profile-avatar-note {
    text-align: left;
    max-width: none;
  }
}

/* ========================================
   Cuentas · agrupación por entidad
   ======================================== */

.entity-group {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  backdrop-filter: var(--blur);
}

.entity-group-header {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--glass-border);
}

.entity-group-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.entity-group-meta {
  display: flex;
  gap: 6px;
  align-items: center;
}

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border);
  transition: background 0.15s;
}

.account-row:last-child {
  border-bottom: none;
}

.account-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.account-row-info {
  flex: 1;
  min-width: 0;
}

.account-row-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.account-row-purpose {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
}

.account-row-fecha {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
  font-family: 'Geist Mono', 'Monaco', monospace;
  margin-top: 2px;
}

.account-row-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.account-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.account-tag.tipo-liquidez {
  background: rgba(0, 217, 163, 0.1);
  color: var(--accent);
  border: 1px solid rgba(0, 217, 163, 0.2);
}

.account-tag.tipo-inversion {
  background: rgba(167, 139, 250, 0.1);
  color: var(--violet);
  border: 1px solid rgba(167, 139, 250, 0.2);
}

.account-tag.tipo-efectivo {
  background: rgba(251, 191, 36, 0.1);
  color: var(--amber, #fbbf24);
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.account-tag.shared {
  background: rgba(6, 182, 212, 0.1);
  color: var(--accent-2);
  border: 1px solid rgba(6, 182, 212, 0.2);
}

.account-row-actions {
  display: flex;
  gap: 4px;
}

.account-action-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-3);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.account-action-btn:hover {
  color: var(--text);
  border-color: var(--glass-border-hover);
}

.account-action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.account-action-btn.delete:hover {
  color: var(--danger);
  border-color: var(--danger);
}

@media (max-width: 700px) {
  .account-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
}

/* Contador de cuentas en tarjetas de entidad */
.entity-accounts-count {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

.entity-accounts-count strong {
  color: var(--text);
  font-weight: 600;
}

/* Responsive para cuentas */
@media (max-width: 640px) {
  .account-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .account-row-actions {
    align-self: flex-end;
  }
}

/* ========================================
   Saldos en filas de cuenta
   ======================================== */

.account-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border);
  transition: background 0.15s;
}

.account-row-saldo {
  text-align: right;
  min-width: 120px;
}

.account-saldo {
  font-family: 'Geist Mono', 'Monaco', monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.account-saldo-empty {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 400;
  font-style: italic;
}

.account-action-btn.highlight {
  border-color: rgba(0, 217, 163, 0.3);
  color: var(--accent);
}

.account-action-btn.highlight:hover {
  background: rgba(0, 217, 163, 0.1);
  border-color: var(--accent);
}

/* ========================================
   Modal de saldo
   ======================================== */

.balance-account-display {
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.balance-input-wrapper {
  position: relative;
}

.balance-input-wrapper input {
  padding-right: 40px !important;
  font-family: 'Geist Mono', 'Monaco', monospace;
  font-size: 18px !important;
  font-weight: 600;
  text-align: right;
}

.balance-currency {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--text-2);
  font-weight: 600;
  pointer-events: none;
}

/* Responsive: filas de cuenta en pantalla pequeña */
@media (max-width: 720px) {
  .account-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px;
  }

  .account-row-info {
    grid-column: 1 / -1;
  }

  .account-row-saldo {
    grid-column: 1;
    text-align: left;
  }

  .account-row-meta {
    display: none;
  }

  .account-row-actions {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ========================================
   Hero: patrimonio líquido total
   ======================================== */

.hero-patrimonio {
  background: linear-gradient(135deg,
    rgba(0, 217, 163, 0.06) 0%,
    rgba(6, 182, 212, 0.04) 50%,
    rgba(167, 139, 250, 0.03) 100%);
  border: 1px solid rgba(0, 217, 163, 0.15);
  border-radius: 14px;
  padding: 22px 24px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}

.hero-patrimonio::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, var(--accent-glow), transparent 60%);
  pointer-events: none;
  opacity: 0.6;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-patrimonio::before {
    animation: heroFloat 12s ease-in-out infinite;
  }
}

@keyframes heroFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, 20px); }
}

.hero-label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 500;
  margin-bottom: 10px;
  font-family: 'Geist Mono', 'Monaco', monospace;
  position: relative;
}

.hero-value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  position: relative;
}

.hero-amount {
  font-size: clamp(30px, 5.5vw, 52px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--text) 0%, var(--text-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Geist Mono', 'Monaco', monospace;
  font-feature-settings: "tnum";
}

.hero-currency {
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 300;
  color: var(--text-2);
  letter-spacing: -0.02em;
}

.hero-variation {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
  width: fit-content;
}

.hero-variation-arrow {
  font-size: 11px;
}

.hero-variation-amount {
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.hero-variation-pct {
  font-family: 'Geist Mono', 'Monaco', monospace;
  opacity: 0.85;
}

.hero-variation-sub {
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 4px;
}

.hero-variation.positivo {
  background: rgba(0, 217, 163, 0.10);
  color: var(--accent);
  border: 1px solid rgba(0, 217, 163, 0.30);
}

.hero-variation.negativo {
  background: rgba(248, 113, 113, 0.10);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.30);
}

[data-theme="light"] .hero-variation.negativo {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.08);
}

.hero-variation.neutro {
  background: var(--bg-2);
  color: var(--text-3);
  border: 1px solid var(--glass-border);
}

.hero-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-2);
  position: relative;
}

.hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-meta-item strong {
  color: var(--text);
  font-weight: 500;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

/* ========================================
   Card de aviso (cuentas sin saldo)
   ======================================== */

.alert-card {
  display: flex;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(251, 191, 36, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 14px;
  margin-bottom: 24px;
  align-items: flex-start;
}

.alert-icon {
  color: #fbbf24;
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.alert-description {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

/* Pendientes clickables del Resumen */
#pendientes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.pendiente-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  line-height: 1.2;
}

.pendiente-chip:hover {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: rgba(0, 217, 163, 0.4);
  transform: translateY(-1px);
}

.pendiente-chip svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.pendiente-chip:hover svg {
  opacity: 1;
}

.pendiente-chip-name {
  white-space: nowrap;
}

/* ========================================
   Desglose por entidad
   ======================================== */

.desglose-section {
  margin-top: 24px;
}

.desglose-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.desglose-list {
  display: grid;
  gap: 12px;
}

.desglose-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 16px 20px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: border-color 0.15s ease;
}

.desglose-card:hover {
  border-color: var(--glass-border-hover);
}

.desglose-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 12px;
}

.desglose-card-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.desglose-card-total {
  font-size: 17px;
  font-weight: 600;
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.desglose-card-cuentas {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-3);
}

.desglose-cuenta-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.desglose-cuenta-name {
  color: var(--text-2);
}

.desglose-cuenta-saldo {
  font-family: 'Geist Mono', 'Monaco', monospace;
  color: var(--text-2);
}

.desglose-cuenta-saldo .pct {
  color: var(--text-3);
  font-size: 11px;
  margin-left: 6px;
}

/* ========================================
   Activos tangibles · cuadrícula y tarjetas
   ======================================== */

.tangibles-grid,
.debts-grid,
.accounts-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* En PC fijamos 3 posiciones por fila para todas las vistas de cards. */
@media (min-width: 1100px) {
  .tangibles-grid,
  .debts-grid,
  .accounts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .tangibles-grid,
  .debts-grid,
  .accounts-grid {
    grid-template-columns: 1fr;
  }
}

.tangible-card,
.account-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: border-color 0.15s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tangible-card:hover,
.account-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .account-card:hover {
    transform: none;
  }
}

/* ───── Account card ───── */
.account-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.account-card-title {
  flex: 1;
  min-width: 0;
}

.account-card-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 4px;
  color: var(--text);
}

.account-card-entidad {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
}

.account-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.account-card-saldo-block {
  margin-bottom: 10px;
}

.account-card-saldo-label {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.account-card-saldo {
  font-size: 22px;
  font-weight: 600;
  font-family: 'Geist Mono', 'Monaco', monospace;
  color: var(--text);
  line-height: 1.2;
}

.account-card-saldo.empty {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  font-family: inherit;
}

.account-card-saldo-total {
  font-size: 12px;
  color: var(--text-3);
  font-family: 'Geist Mono', 'Monaco', monospace;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.account-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.account-card-description {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.45;
  margin-bottom: 8px;
}

.account-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border);
}

.account-card-fecha {
  font-size: 11px;
  color: var(--text-3);
  flex: 1;
  min-width: 0;
}

.account-btn-update {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--accent-glow);
  border: 1px solid rgba(0, 217, 163, 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.account-btn-update:hover {
  background: rgba(0, 217, 163, 0.18);
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .tangible-card:hover {
    transform: none;
  }
}

.tangible-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
}

.tangible-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
  color: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tangible-card-title {
  flex: 1;
  min-width: 0;
}

.tangible-card-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 2px;
}

.tangible-card-tipo {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.tangible-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.tangible-card-valor {
  margin-bottom: 10px;
  position: relative;
}

.tangible-valor-label {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.tangible-valor-amount {
  font-size: 22px;
  font-weight: 600;
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text) 0%, var(--text-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tangible-valor-amount.empty {
  background: none;
  -webkit-text-fill-color: var(--text-3);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
}

.tangible-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  position: relative;
}

.tangible-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-family: 'Geist Mono', 'Monaco', monospace;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-2);
}

.tangible-tag.shared {
  background: rgba(6, 182, 212, 0.1);
  color: var(--accent-2);
  border-color: rgba(6, 182, 212, 0.2);
}

.tangible-tag.adquisicion {
  background: rgba(167, 139, 250, 0.1);
  color: var(--violet);
  border-color: rgba(167, 139, 250, 0.2);
}

.tangible-card-description {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--glass-border);
  position: relative;
}

.tangible-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border);
  position: relative;
}

.inversion-footer-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.inversion-precio-unidad {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: 0.01em;
}

/* Hover sutil para indicar que la card es clicable (abre modal de detalle). */
.inversion-card {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.inversion-card:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 217, 163, 0.35);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

/* ====== Modal de detalle de inversión ====== */

.inversion-detail-content {
  max-width: 720px;
  width: 92vw;
}

.inversion-detail-body {
  padding: 16px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inversion-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 600px) {
  .inversion-detail-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.inversion-detail-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
}

.inversion-detail-empty {
  background: var(--glass);
  border: 1px dashed var(--glass-border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.6;
}

/* Valor actual y variación €/% en la misma línea. Si no caben, salta el bloque
   de variación abajo manteniendo el alineamiento por baseline. */
.inversion-valor-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.inversion-valor-row .tangible-valor-amount {
  margin: 0;
}

.inversion-valor-row .inversion-rentabilidad {
  margin: 0;
}

/* ====== Chip semáforo de auto-actualización ====== */

.sync-chip {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
}

.sync-chip.sync-ok {
  background: rgba(0, 217, 163, 0.12);
  color: var(--accent, #10b981);
  border: 1px solid rgba(0, 217, 163, 0.35);
}

.sync-chip.sync-failed {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

[data-theme="dark"] .sync-chip.sync-failed {
  color: #fbbf24;
}

.sync-chip.sync-manual {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-3);
  border: 1px solid var(--glass-border);
}

.inversion-btn-auto {
  background: rgba(0, 217, 163, 0.08);
  color: var(--accent, #10b981);
  border-color: rgba(0, 217, 163, 0.4);
}

.inversion-btn-auto:hover:not(:disabled) {
  background: rgba(0, 217, 163, 0.16);
  border-color: rgba(0, 217, 163, 0.7);
}

.inversion-btn-auto:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tangible-card-fecha {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.tangible-btn-update {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0, 217, 163, 0.1);
  border: 1px solid rgba(0, 217, 163, 0.2);
  color: var(--accent);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.tangible-btn-update:hover {
  background: rgba(0, 217, 163, 0.15);
  border-color: var(--accent);
}

/* Action buttons reutilizables para tangibles */
.tangible-action-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-3);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.tangible-action-btn:hover {
  color: var(--text);
  border-color: var(--glass-border-hover);
}

.tangible-action-btn.delete:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* ========================================
   Deudas · cuadrícula y tarjetas
   ======================================== */

/* Grid base ya definido arriba en .tangibles-grid/.debts-grid/.accounts-grid */

.debt-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 14px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.debt-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
}

.debt-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
}

.debt-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.debt-card-title {
  flex: 1;
  min-width: 0;
}

.debt-card-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 2px;
}

.debt-card-entidad {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.debt-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.debt-card-pendiente {
  margin-bottom: 10px;
  position: relative;
}

.debt-pendiente-label {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.debt-pendiente-amount {
  font-size: 22px;
  font-weight: 600;
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text) 0%, var(--text-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.debt-pendiente-amount.empty {
  background: none;
  -webkit-text-fill-color: var(--text-3);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
}

.debt-card-progress {
  position: relative;
  margin-bottom: 10px;
}

.debt-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 6px;
}

.debt-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 100px;
  transition: width 0.4s ease;
}

.debt-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-3);
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.debt-progress-info strong {
  color: var(--text-2);
  font-weight: 500;
}

.debt-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  position: relative;
}

.debt-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-family: 'Geist Mono', 'Monaco', monospace;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-2);
}

.debt-tag.tipo-hipoteca {
  background: rgba(167, 139, 250, 0.1);
  color: var(--violet);
  border-color: rgba(167, 139, 250, 0.2);
}

.debt-tag.tipo-prestamo {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.2);
}

.debt-tag.shared {
  background: rgba(6, 182, 212, 0.1);
  color: var(--accent-2);
  border-color: rgba(6, 182, 212, 0.2);
}

.debt-tag.tangible {
  background: rgba(167, 139, 250, 0.08);
  color: var(--violet);
  border-color: rgba(167, 139, 250, 0.15);
}

.debt-card-description {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--glass-border);
  position: relative;
}

.debt-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border);
  position: relative;
}

.debt-card-fecha {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.debt-btn-update {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0, 217, 163, 0.1);
  border: 1px solid rgba(0, 217, 163, 0.2);
  color: var(--accent);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.debt-btn-update:hover {
  background: rgba(0, 217, 163, 0.15);
  border-color: var(--accent);
}

.debt-action-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-3);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.debt-action-btn:hover {
  color: var(--text);
  border-color: var(--glass-border-hover);
}

.debt-action-btn.delete:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* ========================================
   Composición patrimonial (activos vs pasivos)
   ======================================== */

.composicion-section {
  margin-bottom: 24px;
}

.composicion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.composicion-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px 16px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: border-color 0.15s ease;
  position: relative;
  overflow: hidden;
}

.composicion-card:hover {
  border-color: var(--glass-border-hover);
}

.composicion-card-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}

.composicion-card-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: 'Geist Mono', 'Monaco', monospace;
  font-weight: 500;
}

.composicion-card-amount {
  font-size: 22px;
  font-weight: 600;
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: -0.02em;
}

.composicion-positivo .composicion-card-amount {
  color: var(--accent);
}

.composicion-negativo .composicion-card-amount {
  color: var(--danger);
}

.composicion-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.composicion-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  gap: 12px;
}

.composicion-detail-label {
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.composicion-detail-value {
  color: var(--text);
  font-family: 'Geist Mono', 'Monaco', monospace;
  font-weight: 500;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.composicion-detail-pct {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Punto de color asociado a cada categoría (alineado con la barra apilada) */
.composicion-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.composicion-dot.dot-liquidez    { background: var(--chart-liquidez); }
.composicion-dot.dot-tangibles   { background: var(--chart-tangibles); }
.composicion-dot.dot-inversiones { background: var(--chart-inversiones); }
.composicion-dot.dot-deudas      { background: var(--chart-deudas); }

/* Barra apilada en cada card de Composición */
.composicion-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  margin: 10px 0 14px;
}

.composicion-bar-segment {
  height: 100%;
  transition: width 0.4s ease;
  min-width: 2px;
}

.composicion-bar-segment.seg-liquidez    { background: var(--chart-liquidez); }
.composicion-bar-segment.seg-tangibles   { background: var(--chart-tangibles); }
.composicion-bar-segment.seg-inversiones { background: var(--chart-inversiones); }
.composicion-bar-segment.seg-deudas      { background: var(--chart-deudas); }

.composicion-bar-empty {
  flex: 1;
  background: transparent;
}

/* ========================================
   Equity por activo
   ======================================== */

.desglose-subtitle {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 16px;
  margin-top: -8px;
}

.equity-list {
  display: grid;
  gap: 12px;
}

.equity-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 20px 24px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.equity-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  gap: 12px;
}

.equity-card-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.equity-card-amount {
  font-size: 22px;
  font-weight: 600;
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.equity-card-amount.negativo {
  color: var(--danger);
}

.equity-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.equity-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
}

.equity-row.deuda .equity-row-value {
  color: var(--danger);
}

.equity-row.total {
  border-top: 1px dashed var(--glass-border);
  padding-top: 8px;
  margin-top: 4px;
  font-weight: 500;
}

.equity-row-label {
  color: var(--text-2);
}

.equity-row-value {
  font-family: 'Geist Mono', 'Monaco', monospace;
  color: var(--text);
}

.equity-row-value.positivo {
  color: var(--accent);
}

/* Responsive: composición en móvil */
@media (max-width: 720px) {
  .composicion-grid {
    grid-template-columns: 1fr;
  }
}

/* Compactación móvil del Resumen: hero más bajo, composición sin desglose.
   El usuario verá los detalles de cada categoría en sus vistas dedicadas
   (Cuentas, Inversiones, Tangibles, Deudas). */
@media (max-width: 700px) {
  /* Hero del Resumen: reducir altura para liberar espacio. */
  .hero-patrimonio {
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 12px;
  }
  .hero-patrimonio::before {
    width: 160px;
    height: 160px;
    top: -40px;
    right: -40px;
    opacity: 0.4;
  }
  .hero-label {
    font-size: 10px;
    margin-bottom: 6px;
  }
  .hero-amount {
    font-size: clamp(26px, 8vw, 36px);
  }
  .hero-currency {
    font-size: clamp(18px, 5vw, 24px);
  }
  .hero-value {
    margin-bottom: 8px;
  }

  /* Composición Activos/Pasivos: en móvil ocultamos el desglose para que la
     zona alta no robe tanto scroll. El usuario ve la cifra y la barra. */
  .composicion-card {
    padding: 12px 14px;
  }
  .composicion-card-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .composicion-card-amount {
    font-size: 20px;
  }
  .composicion-detail {
    display: none;
  }
  .composicion-section {
    margin-bottom: 16px;
  }
  .composicion-grid {
    gap: 10px;
  }
}

/* ========================================
   Mostrar tu parte y total en compartidos
   ======================================== */

.account-saldo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.saldo-tu-parte {
  font-family: 'Geist Mono', 'Monaco', monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.saldo-total {
  font-size: 11px;
  color: var(--text-3);
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: 0.02em;
}

.debt-pendiente-total {
  font-size: 12px;
  color: var(--text-3);
  font-family: 'Geist Mono', 'Monaco', monospace;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.tangible-valor-total {
  font-size: 12px;
  color: var(--text-3);
  font-family: 'Geist Mono', 'Monaco', monospace;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ========================================
   Página de Ayuda
   ======================================== */

.ayuda-intro {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 20px 24px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}

.ayuda-section {
  display: flex;
  gap: 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 20px 24px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  margin-bottom: 12px;
  transition: all 0.2s;
}

.ayuda-section:hover {
  border-color: var(--glass-border-hover);
}

.ayuda-section-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-glow);
  border: 1px solid rgba(0, 217, 163, 0.2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ayuda-section-content {
  flex: 1;
}

.ayuda-section-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.ayuda-section-text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
}

.ayuda-section-text strong {
  color: var(--text);
  font-weight: 500;
}

.ayuda-conceptos {
  margin-top: 32px;
}

.ayuda-conceptos-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.ayuda-concepto {
  background: rgba(0, 217, 163, 0.04);
  border: 1px solid rgba(0, 217, 163, 0.12);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}

.ayuda-concepto strong {
  color: var(--accent);
  font-weight: 600;
}

/* Índice navegable de la ayuda */
.ayuda-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.ayuda-toc-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-2);
  text-decoration: none;
  transition: all 0.15s;
}

.ayuda-toc-link:hover {
  color: var(--accent);
  border-color: var(--glass-border-hover, var(--glass-border));
  background: var(--bg-2);
}

/* Encabezados de bloque dentro de la ayuda */
.ayuda-h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 36px 0 14px;
  color: var(--text);
  scroll-margin-top: 24px;
}

.ayuda-h2:first-of-type {
  margin-top: 8px;
}

/* h3 dentro de tarjeta hereda el estilo de .ayuda-section-title */
h3.ayuda-section-title {
  margin-top: 0;
}

/* Listas dentro de las tarjetas de ayuda */
.ayuda-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ayuda-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}

.ayuda-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.ayuda-list li strong {
  color: var(--text);
  font-weight: 600;
}

.ayuda-list li code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
}

.ayuda-list-numbered {
  counter-reset: ayudaNum;
}

.ayuda-list-numbered li {
  counter-increment: ayudaNum;
  padding-left: 24px;
}

.ayuda-list-numbered li::before {
  content: counter(ayudaNum);
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: transparent;
  border-radius: 0;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tarjetas de beneficios (Por qué te interesa) */
.ayuda-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.ayuda-benefit-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 18px 20px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: border-color 0.2s;
}

.ayuda-benefit-card:hover {
  border-color: var(--glass-border-hover);
}

.ayuda-benefit-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-glow);
  border: 1px solid rgba(0, 217, 163, 0.2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.ayuda-benefit-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.3;
}

.ayuda-benefit-text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}

/* Pasos numerados (Cómo funciona) */
.ayuda-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.ayuda-step {
  display: flex;
  gap: 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 18px 22px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  align-items: flex-start;
}

.ayuda-step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-glow);
  border: 1px solid rgba(0, 217, 163, 0.25);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.ayuda-step-content {
  flex: 1;
  min-width: 0;
}

.ayuda-step-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.3;
}

.ayuda-step-text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}

/* Caja con fórmula matemática */
.ayuda-formula {
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.7;
  overflow-x: auto;
}

.ayuda-formula code {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
}

.ayuda-concepto code,
.ayuda-section-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
}

/* ========================================
   AJUSTES ESPECÍFICOS PARA TEMA CLARO
   ======================================== */

[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

/* Hero del Resumen: gradiente más sutil en claro */
[data-theme="light"] .hero-patrimonio {
  background: linear-gradient(135deg,
    rgba(0, 179, 134, 0.04) 0%,
    rgba(8, 145, 178, 0.03) 50%,
    rgba(139, 92, 246, 0.02) 100%);
  border-color: rgba(0, 179, 134, 0.15);
}

[data-theme="light"] .hero-patrimonio::before {
  background: radial-gradient(circle, rgba(0, 179, 134, 0.05), transparent 60%);
}

/* Sidebar más nítida en claro */
[data-theme="light"] .sidebar {
  background: var(--bg-2);
  border-right-color: var(--glass-border);
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.04);
}

/* Tarjetas de cuentas, deudas y activos */
[data-theme="light"] .account-row:hover {
  background: rgba(15, 23, 42, 0.02);
}

[data-theme="light"] .entity-group-header {
  background: rgba(15, 23, 42, 0.02);
}

/* Tarjetas glass con fondo más sólido en claro */
[data-theme="light"] .entity-card,
[data-theme="light"] .tangible-card,
[data-theme="light"] .debt-card,
[data-theme="light"] .equity-card,
[data-theme="light"] .desglose-card,
[data-theme="light"] .composicion-card,
[data-theme="light"] .ayuda-section,
[data-theme="light"] .settings-section,
[data-theme="light"] .welcome-card,
[data-theme="light"] .login-card {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Decoraciones radiales más sutiles en claro */
[data-theme="light"] .tangible-card::before,
[data-theme="light"] .debt-card::before {
  opacity: 0.4;
}

/* Badges y tags ajustados */
[data-theme="light"] .badge {
  background: rgba(0, 179, 134, 0.08);
  border-color: rgba(0, 179, 134, 0.25);
}

[data-theme="light"] .empty-tag {
  background: var(--glass);
  border-color: var(--glass-border);
}

/* Botones secundarios y acción más nítidos */
[data-theme="light"] .btn-secondary {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--glass-border);
}

[data-theme="light"] .btn-secondary:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: var(--glass-border-hover);
}

[data-theme="light"] .account-action-btn,
[data-theme="light"] .entity-action-btn,
[data-theme="light"] .tangible-action-btn,
[data-theme="light"] .debt-action-btn {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--glass-border);
}

/* Modal y backdrop */
[data-theme="light"] .modal-backdrop {
  background: rgba(15, 23, 42, 0.4);
}

[data-theme="light"] .modal-content {
  box-shadow: var(--shadow-modal);
}

/* Inputs y formularios */
[data-theme="light"] .form-field input[type="text"],
[data-theme="light"] .form-field input[type="number"],
[data-theme="light"] .form-field input[type="date"],
[data-theme="light"] .form-field select,
[data-theme="light"] .form-field textarea {
  background: #ffffff;
  border-color: var(--glass-border);
}

[data-theme="light"] .form-field input[type="text"]:focus,
[data-theme="light"] .form-field input[type="number"]:focus,
[data-theme="light"] .form-field input[type="date"]:focus,
[data-theme="light"] .form-field select:focus,
[data-theme="light"] .form-field textarea:focus {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

[data-theme="light"] .balance-account-display {
  background: #ffffff;
}

/* Settings options más visibles */
[data-theme="light"] .settings-option {
  background: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .settings-option:has(input:checked) {
  background: rgba(0, 179, 134, 0.05);
}

/* Scrollbar adaptado a claro */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--bg);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.3);
}

/* Tarjeta de aviso amarilla */
[data-theme="light"] .alert-card {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
}

/* Concepto de ayuda más nítido */
[data-theme="light"] .ayuda-concepto {
  background: rgba(0, 179, 134, 0.04);
  border-color: rgba(0, 179, 134, 0.15);
}

/* Transición suave al cambiar de tema */
body, .sidebar, .main, .entity-card, .tangible-card, .debt-card,
.equity-card, .desglose-card, .composicion-card, .hero-patrimonio,
.welcome-card, .ayuda-section, .settings-section, .login-card {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ========================================
   Selector visual de entidades
   ======================================== */

.entity-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.entity-selector-search-wrapper {
  position: relative;
}

.entity-selector-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
  z-index: 1;
}

.entity-selector-search {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.15s;
}

[data-theme="light"] .entity-selector-search {
  background: #ffffff;
}

.entity-selector-search:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-3);
}

[data-theme="light"] .entity-selector-search:focus {
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.entity-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}

.entity-card-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-align: center;
}

.entity-card-selector:hover {
  border-color: var(--glass-border-hover);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

[data-theme="light"] .entity-card-selector:hover {
  background: rgba(15, 23, 42, 0.03);
}

.entity-card-selector.selected {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.entity-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.entity-avatar-other {
  background: var(--glass);
  border: 1px dashed var(--glass-border-hover);
  color: var(--text-2);
  box-shadow: none;
}

.entity-card-other.selected .entity-avatar-other {
  border-color: var(--accent);
  color: var(--accent);
}

.entity-card-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  word-break: break-word;
}

.entity-selector-no-results {
  grid-column: 1 / -1;
  padding: 24px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  font-style: italic;
}

.entity-selector-other {
  margin-top: 4px;
}

.entity-other-input-wrapper {
  background: var(--glass);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 14px;
}

.entity-other-input-wrapper label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--accent);
  letter-spacing: -0.01em;
}

.entity-other-input-wrapper input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

[data-theme="light"] .entity-other-input-wrapper input {
  background: #ffffff;
}

.entity-other-input-wrapper input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Scrollbar del grid del selector */
.entity-selector-grid::-webkit-scrollbar {
  width: 6px;
}

.entity-selector-grid::-webkit-scrollbar-track {
  background: transparent;
}

.entity-selector-grid::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 3px;
}

.entity-selector-grid::-webkit-scrollbar-thumb:hover {
  background: var(--glass-border-hover);
}

/* ========================================
   Avatar de entidad en listas (cuentas, deudas, resumen)
   ======================================== */

.entity-avatar-small {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  vertical-align: middle;
}

/* ========================================
   Avatares en headers y nombres
   ======================================== */

.entity-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.debt-card-entidad {
  display: flex;
  align-items: center;
  gap: 8px;
}

.desglose-card-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ========================================
   Scrollbar
   ======================================== */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}

/* ========================================
   INVERSIONES
   ======================================== */

/* Resumen de cartera */
.inversiones-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.inversiones-summary-stat {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
}

.inversiones-summary-stat-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.inversiones-summary-stat-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* Colores de rentabilidad */
.ganancia-positiva {
  color: #16a34a;
}

.ganancia-negativa {
  color: #dc2626;
}

/* Rentabilidad en tarjeta */
.inversion-rentabilidad {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
}

.rentabilidad-ganancia {
  font-size: 13px;
}

.rentabilidad-porcentaje {
  background: var(--bg-secondary);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
}

/* Mini-gráfico de evolución del precio dentro de la card */
.inversion-sparkline {
  display: block;
  width: 100%;
  height: 32px;
  margin: 8px 0 4px;
  overflow: visible;
}

.sparkline-line {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.sparkline-area {
  fill-opacity: 0.16;
  stroke: none;
}

.sparkline-dot {
  stroke: var(--bg);
  stroke-width: 0.6;
}

.sparkline-up .sparkline-line,
.sparkline-up .sparkline-dot {
  stroke: var(--accent);
}
.sparkline-up .sparkline-area,
.sparkline-up .sparkline-dot {
  fill: var(--accent);
}

.sparkline-down .sparkline-line,
.sparkline-down .sparkline-dot {
  stroke: #f87171;
}
.sparkline-down .sparkline-area,
.sparkline-down .sparkline-dot {
  fill: #f87171;
}

[data-theme="light"] .sparkline-down .sparkline-line,
[data-theme="light"] .sparkline-down .sparkline-dot {
  stroke: #dc2626;
}
[data-theme="light"] .sparkline-down .sparkline-area,
[data-theme="light"] .sparkline-down .sparkline-dot {
  fill: #dc2626;
}

/* Metadatos de compra */
.inversion-compra-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Form en dos columnas (cantidad + moneda) */
.form-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}

/* Responsive: resumen en móvil */
@media (max-width: 600px) {
  .inversiones-summary {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Logos de entidades en selector
   ======================================== */

.entity-avatar-with-logo {
  position: relative;
  overflow: hidden;
}

.entity-avatar-with-logo .entity-avatar-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
  padding: 4px;
}

.entity-avatar-with-logo .entity-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
  color: white;
}

/* ========================================
   Mensaje guía del selector de entidades
   ======================================== */

.entity-selector-hint {
  grid-column: 1 / -1;
  padding: 24px 16px;
  text-align: center;
  color: var(--color-text-secondary, #71717a);
  font-size: 14px;
  font-style: italic;
}

/* ========================================
   Logos en avatares pequeños (listados)
   ======================================== */

.entity-avatar-small-with-logo {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.entity-avatar-small-with-logo .entity-avatar-small-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
  padding: 2px;
}

.entity-avatar-small-with-logo .entity-avatar-small-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
  color: white;
}

/* ========================================
   TICKER SELECTOR
   Selector visual de tickers de inversión.
   Patrón idéntico al entity-selector.
   ======================================== */

/* Wrapper del buscador */
.ticker-selector-search-wrapper {
  margin-bottom: 10px;
}

.ticker-selector-search {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.15s;
}

[data-theme="light"] .ticker-selector-search {
  background: #ffffff;
}

.ticker-selector-search:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-3);
}

[data-theme="light"] .ticker-selector-search:focus {
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Cuadrícula de tarjetas */
.ticker-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}

/* Tarjeta individual */
.ticker-card-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-align: center;
}

.ticker-card-selector:hover {
  border-color: var(--glass-border-hover);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

[data-theme="light"] .ticker-card-selector:hover {
  background: rgba(15, 23, 42, 0.03);
}

.ticker-card-selector.selected {
  border-color: var(--accent);
  background: var(--accent-glow);
}

/* Avatar del ticker */
.ticker-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ticker-avatar-other {
  background: var(--glass);
  border: 1px dashed var(--glass-border-hover);
  color: var(--text-2);
  box-shadow: none;
}

.ticker-card-other.selected .ticker-avatar-other {
  border-color: var(--accent);
  color: var(--accent);
}

/* Avatar con logo (criptos) */
.ticker-avatar-with-logo {
  position: relative;
  overflow: hidden;
}

.ticker-avatar-with-logo .ticker-avatar-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
  padding: 4px;
}

.ticker-avatar-with-logo .ticker-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
  color: white;
}

/* Símbolo (ticker) — texto principal de la tarjeta */
.ticker-card-symbol {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

/* Nombre del activo — texto secundario */
.ticker-card-name {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-2);
  letter-spacing: -0.01em;
  line-height: 1.2;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mensajes de estado de la cuadrícula */
.ticker-selector-hint {
  grid-column: 1 / -1;
  padding: 24px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  font-style: italic;
}

.ticker-selector-no-results {
  grid-column: 1 / -1;
  padding: 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  font-style: italic;
}

/* Resumen de selección actual (cuando búsqueda < 2 chars y hay selección) */
.ticker-selected-summary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  border-radius: 10px;
  margin-bottom: 4px;
}

.ticker-selected-label {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.ticker-selected-card {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticker-selected-symbol {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.ticker-selected-name {
  font-size: 11px;
  color: var(--text-2);
}

/* ====== Cabecera de "Más populares" (quick picks) ====== */

.ticker-quick-header {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 4px 4px 6px;
}

/* ====== Sección "Resultados en vivo" ====== */

.ticker-selector-live {
  margin-top: 8px;
}

.ticker-selector-live:empty {
  display: none;
}

.ticker-live-header {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 12px 4px 8px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ticker-live-status {
  font-size: 12px;
  color: var(--text-3);
  padding: 8px 4px 12px;
  font-style: italic;
}

.ticker-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

/* Card de resultado en vivo: hereda el estilo de .ticker-card-selector
   pero añade un sutil contorno verde para distinguirlas de las de librería. */
.ticker-card-live {
  position: relative;
}

.ticker-card-live::after {
  content: 'live';
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #10b981);
  background: rgba(0, 217, 163, 0.12);
  border: 1px solid rgba(0, 217, 163, 0.35);
  padding: 1px 5px;
  border-radius: 4px;
  pointer-events: none;
}

/* Sección "Otro ticker" */
.ticker-selector-other {
  margin-top: 4px;
}

.ticker-other-input-wrapper {
  background: var(--glass);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 14px;
}

.ticker-other-input-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

.ticker-other-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--accent);
  letter-spacing: -0.01em;
}

.ticker-other-field input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

[data-theme="light"] .ticker-other-field input {
  background: #ffffff;
}

.ticker-other-field input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Campo símbolo: fuente monospace */
.ticker-other-field--symbol input {
  font-family: 'Geist Mono', 'Monaco', monospace;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Scrollbar del grid */
.ticker-selector-grid::-webkit-scrollbar {
  width: 6px;
}

.ticker-selector-grid::-webkit-scrollbar-track {
  background: transparent;
}

.ticker-selector-grid::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 3px;
}

.ticker-selector-grid::-webkit-scrollbar-thumb:hover {
  background: var(--glass-border-hover);
}

/* Quick picks y resultados en vivo en móvil: aumentar área táctil para
   que los pulgares acierten bien. 2 columnas en pantallas estrechas con
   cards más altas, avatar y tipografía más grandes. */
@media (max-width: 480px) {
  .ticker-selector-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-height: 380px;
  }
  .ticker-live-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .ticker-card-selector {
    padding: 14px 10px;
    gap: 8px;
    min-height: 88px;
  }
  .ticker-avatar {
    width: 44px;
    height: 44px;
    font-size: 13px;
    border-radius: 11px;
  }
  .ticker-card-symbol {
    font-size: 13px;
  }
  .ticker-card-name {
    font-size: 11px;
    line-height: 1.3;
  }
}

/* Responsive: "Otro ticker" en móvil apila los campos */
@media (max-width: 480px) {
  .ticker-other-input-row {
    grid-template-columns: 1fr;
  }
}

/* Cabeceras de divisa en desglose de inversiones */
.inversiones-divisa-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin: 8px 0 4px;
  background: var(--glass);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}

.inversiones-divisa-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inversiones-divisa-total {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Importe en USD junto al patrimonio neto en el hero */
.hero-usd {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-left: 16px;
  color: var(--text-2);
}

.hero-usd .hero-amount,
.hero-usd .hero-currency {
  color: var(--text-2);
  background: none;
  -webkit-text-fill-color: var(--text-2);
}

.hero-separator {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 200;
  color: var(--text-3);
  letter-spacing: -0.02em;
  margin-right: 4px;
  line-height: 1;
}

/* ========================================
   Botón flotante: trigger del modal informativo
   ======================================== */

.info-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.info-toggle:hover {
  color: var(--accent);
  border-color: var(--glass-border-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .info-toggle:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

.info-toggle svg {
  width: 20px;
  height: 20px;
}

/* ========================================
   Modal informativo de bienvenida
   (reutiliza clases .modal, .modal-content, etc.)
   ======================================== */

.phase-info-text {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 16px;
}

.phase-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phase-info-list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
}

/* ---- Guía interna (modal de ayuda) ---- */

.guide-body {
  max-height: 70vh;
  overflow-y: auto;
}

.guide-section {
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--bg-2);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.guide-section[open] {
  border-color: var(--glass-border-hover, var(--glass-border));
}

.guide-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}

.guide-section > summary::-webkit-details-marker {
  display: none;
}

.guide-section > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(-45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.guide-section[open] > summary::after {
  transform: rotate(45deg);
}

.guide-section > summary:hover {
  color: var(--accent);
}

.guide-section-body {
  padding: 4px 14px 14px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}

.guide-section-body p {
  margin: 0 0 8px;
}

.guide-section-body p:last-child {
  margin-bottom: 0;
}

.guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guide-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.guide-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.guide-section-body code {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.phase-info-list li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ========================================
   Vista Evolución
   ======================================== */

/* --- Filtros --- */

.evolucion-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px 20px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

/* Selects nativos paralelos para móvil. Ocultos en escritorio; el toggle de
   botones es la fuente de verdad. En móvil ocultamos los botones y mostramos
   el select para ganar espacio y aprovechar la UI nativa del sistema. */
.filter-select-mobile {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 8px 32px 8px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.filter-select-mobile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  /* Filtros compactos en móvil: sin etiquetas verticales, padding reducido,
     todo cabe en muy poco alto. */
  .evolucion-filters {
    gap: 6px;
    padding: 8px;
    align-items: stretch;
  }
  .filter-group {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  /* Etiquetas ocultas en móvil: el placeholder del select y el contexto de
     los botones es suficiente. */
  .filter-group .filter-label {
    display: none;
  }
  /* Toggle de botones segmentados más compacto. */
  .filter-toggle-btn {
    padding: 0 8px;
    font-size: 11px;
    height: 28px;
  }
  /* Ocultamos el toggle de Rango y Métricas (segundo y tercer grupo) en
     Evolución porque ahí pusimos selects. Frecuencia (primer grupo) sigue
     como toggle de 2 botones. */
  .filter-group:nth-child(2) .filter-toggle-desktop,
  .filter-group:nth-child(3) .filter-toggle-desktop {
    display: none;
  }
  .filter-select-mobile {
    display: block;
    flex: 1;
    min-width: 0;
  }
  /* Selects existentes del Histórico Comparar/Explorar también ocupan ancho. */
  .filter-select {
    width: 100%;
    min-width: 0;
  }
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.filter-group-wide {
  flex: 1 1 100%;
}

.filter-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.filter-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  align-self: flex-start;
}

.filter-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-2);
  padding: 0 11px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  height: 28px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, color 0.15s;
}

.filter-toggle-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.filter-toggle-btn:hover {
  color: var(--text);
}

.filter-toggle-btn.active {
  background: var(--accent);
  color: var(--on-accent);
}

.filter-select {
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  min-width: 160px;
}

.filter-select:focus {
  outline: none;
  border-color: var(--accent);
}

.filter-custom-range {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.filter-date {
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
}

.filter-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, color 0.15s;
}

.filter-check:hover {
  color: var(--text);
  border-color: var(--glass-border-hover);
}

.filter-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

.filter-check:has(input:checked) {
  color: var(--text);
  border-color: var(--accent);
}

/* --- Stats grid --- */

.evolucion-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.evolucion-stat-card {
  padding: 12px 14px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}

/* En móvil compactamos las stats. En la vista Evolución (5 cards: Variación,
   Máx, Mín, Mejor, Peor) mostramos solo la primera (Variación del periodo);
   el resto se ve mejor en la propia gráfica. En el modo Comparar de Histórico
   (2 cards: Mejor / Peor noticia) las mantenemos las dos porque son útiles. */
@media (max-width: 700px) {
  .evolucion-stats {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }
  #view-evolucion .evolucion-stats > .evolucion-stat-card:nth-child(n+2) {
    display: none;
  }
  .evolucion-stat-card {
    padding: 10px 12px;
  }
}

.evolucion-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 6px;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.evolucion-stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.evolucion-stat-pos .evolucion-stat-value {
  color: var(--accent);
}

.evolucion-stat-neg .evolucion-stat-value {
  color: var(--danger);
}

.evolucion-stat-sub {
  font-size: 12px;
  color: var(--text-2);
}

/* --- Chart card --- */

.evolucion-chart-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 20px 22px 18px;
  margin-bottom: 20px;
  height: clamp(360px, 52vh, 560px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.evolucion-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.evolucion-chart-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.evolucion-chart-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}

.evolucion-chart-subtitle {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.01em;
}

.evolucion-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 70%;
}

.chart-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s, border-color 0.15s;
  line-height: 1;
}

.chart-legend-chip:hover {
  color: var(--text);
  border-color: var(--glass-border-hover, var(--glass-border));
  background: var(--bg-2);
}

.chart-legend-chip.is-off {
  opacity: 0.45;
}

.chart-legend-chip.is-off .chart-legend-label {
  text-decoration: line-through;
}

.chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.evolucion-chart-canvas {
  flex: 1;
  min-height: 0;
  position: relative;
}

.evolucion-chart-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* --- Tabla --- */

.evolucion-table-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
  position: relative;
}

.evolucion-table-wrapper {
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Listado de cards (vista móvil). Oculto en escritorio. */
.evolucion-cards {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.historico-cmp-cards {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

@media (max-width: 700px) {
  /* En móvil: ocultamos las tablas (con scroll horizontal) y mostramos cards. */
  .evolucion-table-card,
  .historico-cmp-table-card {
    display: none;
  }
  .evolucion-cards,
  .historico-cmp-cards {
    display: flex;
  }
}

/* Card de comparativa (modo Comparar de Histórico) en móvil. */
.cmp-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 14px;
}

.cmp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cmp-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.cmp-card-delta-pct {
  font-size: 13px;
  font-weight: 600;
  font-family: 'Geist Mono', 'Monaco', monospace;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text-3);
  white-space: nowrap;
}

.cmp-card-delta-pct.positivo {
  color: var(--accent);
  background: var(--accent-glow);
}

.cmp-card-delta-pct.negativo {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.10);
}

.cmp-card-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 8px;
}

.cmp-card-value {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmp-card-value-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
}

.cmp-card-value-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.cmp-card-delta {
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'Geist Mono', 'Monaco', monospace;
  text-align: right;
}

.cmp-card-delta.positivo { color: var(--accent); }
.cmp-card-delta.negativo { color: var(--danger); }

/* Card de periodo en móvil: header siempre visible con Periodo + Neto + Δ%;
   detalle (bruto, liquidez, inversiones, tangibles, deudas, Δ€) expandible. */
.evol-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.evol-card.expanded {
  border-color: rgba(0, 217, 163, 0.35);
}

.evol-card-header {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "period delta chevron"
    "neto neto chevron";
  align-items: center;
  gap: 6px 12px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.evol-card-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.evol-card-period {
  grid-area: period;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.evol-card-neto {
  grid-area: neto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.evol-card-neto-label {
  display: none; /* el contexto ya lo dice; ahorramos espacio */
}

.evol-card-neto-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.evol-card-delta {
  grid-area: delta;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Geist Mono', 'Monaco', monospace;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text-3);
  white-space: nowrap;
}

.evol-card-delta.positivo {
  color: var(--accent);
  background: var(--accent-glow);
}

.evol-card-delta.negativo {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.10);
}

.evol-card-chevron {
  grid-area: chevron;
  color: var(--text-3);
  transition: transform 0.25s ease;
}

.evol-card.expanded .evol-card-chevron {
  transform: rotate(180deg);
}

.evol-card-detail {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* `display: flex` sobrescribe el `hidden` HTML. Forzamos la ocultación. */
.evol-card-detail[hidden] {
  display: none;
}

.evol-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-2);
  font-family: 'Geist Mono', 'Monaco', monospace;
}

.evol-detail-row span:first-child {
  color: var(--text-3);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-family: inherit;
  align-self: center;
}

.evol-detail-row .positivo { color: var(--accent); }
.evol-detail-row .negativo { color: var(--danger); }

.evolucion-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
  min-width: 880px;
}

.evolucion-table th,
.evolucion-table td {
  width: 10%;
}

.evolucion-table thead th {
  text-align: center;
  padding: 12px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}

.evolucion-table tbody td {
  padding: 10px 14px;
  text-align: center;
  color: var(--text);
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}

.evolucion-table tbody td:first-child {
  color: var(--text-2);
}

.evolucion-table tbody tr:last-child td {
  border-bottom: none;
}

.evolucion-table tbody tr:hover td {
  background: rgba(255,255,255,0.02);
}

[data-theme="light"] .evolucion-table tbody tr:hover td {
  background: rgba(15,23,42,0.025);
}

.evolucion-table .positivo {
  color: var(--accent);
}

.evolucion-table .negativo {
  color: var(--danger);
}

.evolucion-table .evolucion-empty {
  text-align: center !important;
  padding: 32px !important;
  color: var(--text-3) !important;
  font-style: italic;
}

.evolucion-pendiente {
  display: inline-block;
  margin-left: 6px;
  color: var(--violet);
  font-size: 12px;
  cursor: help;
}

.evolucion-short-notice {
  padding: 10px 14px;
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 10px;
  color: var(--text-2);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ========================================
   Vista Histórico
   ======================================== */

.historico-tabs {
  margin-bottom: 16px;
}

.historico-mode[hidden] { display: none; }

.historico-cmp-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--text);
}

.historico-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

/* Lista de periodos expandibles */
.historico-period-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.historico-period {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.historico-period:hover {
  border-color: var(--glass-border-hover);
}

.historico-period.expanded {
  border-color: var(--accent);
}

.historico-period-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  gap: 16px;
  transition: background-color 0.15s ease;
}

.historico-period-header:hover {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .historico-period-header:hover {
  background: rgba(15, 23, 42, 0.025);
}

.historico-period-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.historico-period-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.historico-period-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.historico-pendiente-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: var(--violet);
  font-size: 11px;
  font-weight: 500;
}

.historico-period-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Geist Mono', 'Monaco', monospace;
  font-size: 14px;
  color: var(--text-2);
  flex-shrink: 0;
}

.historico-row-neto {
  color: var(--accent);
  font-weight: 600;
}

.historico-row-usd {
  color: var(--text-3);
  font-size: 12px;
}

.historico-chevron {
  color: var(--text-3);
  transition: transform 0.2s ease;
}

.historico-period.expanded .historico-chevron {
  transform: rotate(180deg);
}

.historico-period-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 18px 12px;
  font-size: 12px;
  color: var(--text-3);
}

.historico-period-mini strong {
  color: var(--text-2);
  margin-right: 4px;
  font-weight: 500;
}

.historico-period-detail {
  border-top: 1px solid var(--glass-border);
  padding: 0;
}

.historico-period.expanded .historico-period-detail {
  padding: 16px 18px;
}

.historico-period:not(.expanded) .historico-period-detail {
  display: none;
}

.historico-detail-loading {
  padding: 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  font-style: italic;
}

.historico-detail-group {
  margin-bottom: 20px;
}

.historico-detail-group:last-child {
  margin-bottom: 0;
}

/* Cabecera clicable del grupo: título + badge de conteo + chevron. */
.historico-detail-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 4px 8px;
  margin-bottom: 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s;
}

.historico-detail-group-header:hover {
  border-bottom-color: rgba(0, 217, 163, 0.4);
}

.historico-detail-group-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.historico-detail-group-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  font-family: 'Geist Mono', 'Monaco', monospace;
  flex: 1;
  margin: 0;
}

.historico-detail-group-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  padding: 2px 8px;
  background: var(--accent-glow);
  border: 1px solid rgba(0, 217, 163, 0.25);
  border-radius: 999px;
}

.historico-detail-group-chevron {
  color: var(--text-3);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.historico-detail-group.collapsed .historico-detail-group-chevron {
  transform: rotate(-90deg);
}

.historico-detail-group.collapsed .historico-detail-list {
  display: none;
}

/* En móvil cada grupo se inicializa con `.collapsed` desde JS, así que solo
   ajustamos espaciado aquí. */
@media (max-width: 700px) {
  .historico-detail-group {
    margin-bottom: 12px;
  }
}

.historico-detail-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.historico-detail-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: 8px;
  border: 1px solid var(--glass-border);
}

.historico-detail-main {
  min-width: 0;
}

.historico-detail-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

.historico-detail-meta {
  font-size: 11.5px;
  color: var(--text-3);
}

.historico-detail-value {
  font-family: 'Geist Mono', 'Monaco', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .historico-period-summary {
    gap: 10px;
    font-size: 13px;
  }
  .historico-period-mini {
    gap: 10px;
    font-size: 11px;
  }
  .historico-detail-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "main edit"
      "value edit";
    gap: 8px 10px;
  }
  .historico-detail-main { grid-area: main; }
  .historico-detail-value { grid-area: value; text-align: left; }
  .historico-detail-row > .account-action-btn { grid-area: edit; }
}

/* Tabs activas/archivadas (cuentas) */
.account-tabs {
  margin-bottom: 18px;
}

.tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 100px;
  background: rgba(255,255,255,0.06);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
}

[data-theme="light"] .tab-count {
  background: rgba(15, 23, 42, 0.06);
}

.filter-toggle-btn.active .tab-count {
  background: rgba(0, 0, 0, 0.18);
  color: var(--on-accent);
}

[data-theme="light"] .filter-toggle-btn.active .tab-count {
  background: rgba(255, 255, 255, 0.25);
  color: var(--on-accent);
}

[data-theme="light"] .evolucion-short-notice {
  background: rgba(139, 92, 246, 0.06);
  border-color: rgba(139, 92, 246, 0.2);
}

/* --- Responsive --- */

@media (max-width: 700px) {
  .evolucion-filters {
    flex-direction: column;
    gap: 14px;
  }
  .filter-select {
    min-width: 0;
    width: 100%;
  }
  .evolucion-chart-card {
    height: 360px;
    padding: 14px 16px 14px;
  }
  .evolucion-chart-legend {
    max-width: 100%;
    justify-content: flex-start;
  }
  .chart-legend-chip {
    font-size: 10.5px;
    padding: 3px 8px 3px 7px;
  }
  .evolucion-table {
    font-size: 12px;
  }
  .evolucion-table thead th,
  .evolucion-table tbody td {
    padding: 8px 10px;
  }
}

/* ========================================
   Tooltips contextuales (IdM.04)
   ======================================== */

.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 6px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: help;
  vertical-align: -3px;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.tooltip-trigger:hover,
.tooltip-trigger:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--glass);
  outline: none;
}

.tooltip-trigger svg {
  width: 10px;
  height: 10px;
}

/* Touch-friendly on móvil */
@media (max-width: 600px) {
  .tooltip-trigger {
    width: 20px;
    height: 20px;
  }
  .tooltip-trigger svg {
    width: 12px;
    height: 12px;
  }
}

.tooltip-bubble {
  position: fixed;
  z-index: 9999;
  max-width: min(280px, calc(100vw - 24px));
  padding: 10px 12px;
  background: var(--bg-2, #1a1d23);
  color: var(--text-1);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  display: none;
}

.tooltip-bubble.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

[data-theme="light"] .tooltip-bubble {
  background: #ffffff;
  color: var(--text-1);
  border-color: var(--glass-border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .tooltip-bubble {
    transition: none;
  }
}

/* ========================================
   Cuadro de amortización (modal)
   ======================================== */

.modal-content-large {
  max-width: 880px;
  width: 100%;
}

.debt-amort-loading,
.debt-amort-warning {
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--text-2);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.debt-amort-warning-sub {
  color: var(--text-3);
  font-size: 13px;
}

.debt-amort-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.debt-amort-summary-card {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
}

.debt-amort-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-bottom: 4px;
}

.debt-amort-summary-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.debt-amort-summary-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

.debt-amort-table-wrapper {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.debt-amort-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.debt-amort-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-2);
  color: var(--text-2);
  font-weight: 600;
  text-align: right;
  padding: 10px 12px;
  border-bottom: 1px solid var(--glass-border);
  z-index: 1;
}

.debt-amort-table thead th:nth-child(1),
.debt-amort-table thead th:nth-child(2) {
  text-align: left;
}

.debt-amort-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--glass-border);
  text-align: right;
  color: var(--text);
  white-space: nowrap;
}

.debt-amort-table tbody td:nth-child(1),
.debt-amort-table tbody td:nth-child(2) {
  text-align: left;
  color: var(--text-2);
}

.debt-amort-table tbody tr:last-child td {
  border-bottom: none;
}

.debt-amort-table tbody tr:hover td {
  background: var(--bg-2);
}

.debt-amort-note {
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-3);
  border-left: 2px solid var(--glass-border);
  background: var(--bg-2);
  border-radius: 6px;
}

/* Panel colapsable: simulación de amortización anticipada */
.debt-amort-early {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--bg-2);
  margin: 16px 0;
  overflow: hidden;
  transition: border-color 0.15s;
}

.debt-amort-early[open] {
  border-color: rgba(0, 217, 163, 0.4);
}

.debt-amort-early > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}

.debt-amort-early > summary::-webkit-details-marker {
  display: none;
}

.debt-amort-early-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(-45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.debt-amort-early[open] .debt-amort-early-chevron {
  transform: rotate(45deg);
}

.debt-amort-early > summary:hover {
  color: var(--accent);
}

.debt-amort-early-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--glass-border);
}

.debt-amort-early-intro {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 12px 0 14px;
}

.debt-amort-early-form {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
}

@media (max-width: 700px) {
  .debt-amort-early-form {
    grid-template-columns: 1fr;
  }
}

#early-amort-calc-btn {
  margin-top: 4px;
}

.debt-amort-early-result {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}

.debt-amort-early-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.debt-amort-early-stat {
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--glass);
}

.debt-amort-early-stat.pos {
  border-color: rgba(0, 217, 163, 0.4);
  background: linear-gradient(135deg, rgba(0, 217, 163, 0.10) 0%, var(--glass) 100%);
}

.debt-amort-early-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-bottom: 4px;
}

.debt-amort-early-stat.pos .debt-amort-early-stat-label {
  color: var(--accent);
}

.debt-amort-early-stat-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: -0.01em;
}

.debt-amort-early-stat.pos .debt-amort-early-stat-value {
  color: var(--accent);
}

.debt-amort-early-stat-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

/* ========================================
   Simulador de amortización
   ======================================== */

.debt-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.debt-sim-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.debt-sim-plazo-row {
  display: flex;
  gap: 8px;
}

.debt-sim-plazo-row input {
  flex: 1;
  min-width: 0;
}

.debt-sim-plazo-row select {
  width: auto;
  min-width: 90px;
}

.debt-sim-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.debt-sim-result {
  border-top: 1px solid var(--glass-border);
  padding-top: 16px;
  margin-top: 8px;
}

/* ========================================
   Tarjeta motivacional
   ======================================== */

.motivacion-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: linear-gradient(135deg, var(--accent-glow) 0%, var(--glass) 100%);
  border: 1px solid rgba(0, 217, 163, 0.28);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 20px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.motivacion-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(0, 217, 163, 0.18);
  border: 1px solid rgba(0, 217, 163, 0.30);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.motivacion-content {
  flex: 1;
  min-width: 0;
}

.motivacion-titular {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
}

.motivacion-sub {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}

.motivacion-fuente {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 8px;
  letter-spacing: 0.01em;
}

/* ========================================
   Trofeos / Logros
   ======================================== */

.trofeos-counter {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  vertical-align: middle;
  letter-spacing: 0.02em;
}

.trofeos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.trofeo-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  transition: transform 0.15s, border-color 0.15s;
}

.trofeo-card.unlocked {
  border-color: rgba(0, 217, 163, 0.35);
  background: linear-gradient(135deg, rgba(0, 217, 163, 0.08) 0%, var(--glass) 100%);
}

.trofeo-card.unlocked:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 217, 163, 0.55);
}

.trofeo-card.locked {
  opacity: 0.45;
  filter: grayscale(70%);
}

.trofeo-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}

.trofeo-body {
  flex: 1;
  min-width: 0;
}

.trofeo-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 2px;
  line-height: 1.3;
}

.trofeo-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.45;
}

/* CTA "Ver todos los logros" en el teaser del Resumen */
.trofeos-cta {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: transparent;
  border: 1px dashed var(--glass-border);
  border-radius: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.trofeos-cta:hover {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-glow);
  transform: translateY(-1px);
}

/* ========================================
   Vista dedicada de Logros
   ======================================== */

.logros-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.logros-header {
  background: linear-gradient(135deg, var(--accent-glow) 0%, var(--glass) 100%);
  border: 1px solid rgba(0, 217, 163, 0.28);
  border-radius: 16px;
  padding: 24px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logros-header-main {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  min-width: 280px;
}

.logros-counter {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}

.logros-counter-value {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
}

.logros-counter-total {
  font-size: 18px;
  color: var(--text-3);
  font-weight: 500;
}

.logros-progress-global {
  flex: 1;
  min-width: 0;
}

.logros-progress-global .logros-progress-bar {
  height: 8px;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  overflow: hidden;
}

.logros-progress-global .logros-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #4ade80 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.logros-progress-global .logros-progress-label {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

.logros-next {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.logros-next-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.logros-next-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
}

/* Lateral del header: percentil + próximo a desbloquear, apilados */
.logros-header-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

@media (max-width: 720px) {
  .logros-header-side {
    align-items: stretch;
    width: 100%;
  }
}

/* Bloque del percentil España en el header */
.logros-percentile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(0, 217, 163, 0.10), rgba(6, 182, 212, 0.06));
  border: 1px solid rgba(0, 217, 163, 0.30);
  border-radius: 12px;
  margin-top: 4px;
}

.logros-percentile-label {
  font-size: 10.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.logros-percentile-value {
  font-size: 15px;
  color: var(--text);
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logros-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

[data-logros-filter].filter-toggle-btn {
  border-radius: 999px;
}

.logros-categorias-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Header de categoría: botón completo que colapsa/expande el grid de logros.
   Tiene icono, label, mini barra de progreso, contador y chevron. */
.logros-categoria-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 12px;
  padding: 10px 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s;
}

.logros-categoria-header:hover {
  border-bottom-color: rgba(0, 217, 163, 0.4);
}

.logros-categoria-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.logros-categoria-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.logros-categoria-label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  flex: 1;
}

.logros-categoria-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logros-categoria-bar {
  display: inline-block;
  width: 80px;
  height: 4px;
  background: var(--glass-border);
  border-radius: 999px;
  overflow: hidden;
  vertical-align: middle;
}

.logros-categoria-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.logros-categoria-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  padding: 3px 10px;
  background: var(--accent-glow);
  border: 1px solid rgba(0, 217, 163, 0.25);
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.logros-categoria-chevron {
  color: var(--text-3);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.logros-categoria.collapsed .logros-categoria-chevron {
  transform: rotate(-90deg);
}

.logros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

/* Importante: `display: grid` sobrescribe el `hidden` HTML por defecto.
   Forzamos la ocultación cuando la categoría está colapsada. */
.logros-categoria.collapsed .logros-grid {
  display: none;
}

@media (max-width: 700px) {
  .logros-categoria-header {
    gap: 8px;
    padding: 12px 4px;
  }
  .logros-categoria-label {
    font-size: 15px;
  }
  /* En móvil ocultamos la barra de progreso por categoría (el contador es
     suficiente) para dejar más espacio al label en pantallas estrechas. */
  .logros-categoria-bar {
    display: none;
  }
  .logros-categoria-count {
    font-size: 11.5px;
    padding: 2px 8px;
  }
}

.logro-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  transition: transform 0.15s, border-color 0.15s;
}

.logro-card.unlocked {
  border-color: rgba(0, 217, 163, 0.35);
  background: linear-gradient(135deg, rgba(0, 217, 163, 0.08) 0%, var(--glass) 100%);
}

.logro-card.unlocked:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 217, 163, 0.55);
}

.logro-card.locked {
  opacity: 0.85;
}

.logro-card.locked .logro-icon {
  filter: grayscale(80%);
  opacity: 0.55;
}

.logro-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}

.logro-body {
  flex: 1;
  min-width: 0;
}

.logro-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 2px;
  line-height: 1.3;
}

.logro-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.45;
  margin-bottom: 8px;
}

.logro-progress {
  margin-top: 6px;
}

.logro-progress-bar {
  height: 6px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
}

.logro-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.logro-progress-label {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 4px;
  font-family: 'Geist Mono', 'Monaco', monospace;
  letter-spacing: 0.02em;
}

.logro-progress-label.logro-done {
  color: var(--accent);
  font-weight: 600;
  font-family: inherit;
  letter-spacing: normal;
}

/* Línea de rareza ("Lo desbloquea X% de usuarios") en cada logro */
.logro-rarity {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--glass-border);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  font-style: italic;
}

.logro-card.unlocked .logro-rarity {
  color: var(--text-2);
}

/* ========================================
   Barra de filtros (búsqueda + selects/chips)
   ======================================== */

.filters-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-search {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}

.filter-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}

.filter-search input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-search input::placeholder {
  color: var(--text-3);
}

.filter-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 217, 163, 0.15);
}

.filters-bar .filter-select {
  padding: 8px 14px;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
  min-width: 180px;
}

.filters-bar .filter-select:hover,
.filters-bar .filter-select:focus {
  border-color: var(--accent);
}

/* Bloque Exportar datos en Ajustes */
.settings-export-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.settings-export-block button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings-export-block button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.settings-export-info {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
}

/* Grid con las 3 opciones de exportación */
.settings-export-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.export-option-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  text-align: left;
  font: inherit;
  color: inherit;
}

.export-option-card:hover {
  border-color: rgba(0, 217, 163, 0.4);
  background: var(--bg-2);
  transform: translateY(-1px);
}

.export-option-card:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.export-option-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--accent-glow);
  border: 1px solid rgba(0, 217, 163, 0.25);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.export-option-body {
  flex: 1;
  min-width: 0;
}

.export-option-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

.export-option-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.45;
}

/* Lista de resumen en el modal de importar backup */
.import-summary-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  font-size: 13px;
  color: var(--text-2);
}
.import-summary-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
}
.import-summary-list li strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ========================================
   Toast de logro desbloqueado
   ======================================== */

.logro-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  pointer-events: none;
}

.logro-toast {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(0, 217, 163, 0.14) 0%, var(--glass) 100%);
  border: 1px solid rgba(0, 217, 163, 0.45);
  border-radius: 14px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.logro-toast.show {
  transform: translateX(0);
  opacity: 1;
}

.logro-toast.hide {
  transform: translateX(120%);
  opacity: 0;
}

[data-theme="light"] .logro-toast {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.logro-toast-icon {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.logro-toast-body {
  flex: 1;
  min-width: 0;
}

.logro-toast-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 4px;
}

.logro-toast-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}

.logro-toast-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.45;
}

.logro-toast-close {
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  padding: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.logro-toast-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .logro-toast-close:hover {
  background: rgba(15, 23, 42, 0.06);
}

@media (max-width: 600px) {
  .logro-toast-container {
    top: auto;
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logro-toast {
    transform: none;
    transition: opacity 0.2s ease;
  }
  .logro-toast.hide {
    transform: none;
  }
}

/* ========================================
   Búsqueda global (Ctrl/Cmd + K)
   ======================================== */

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}

.search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

[data-theme="light"] .search-backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.search-content {
  position: relative;
  width: min(90vw, 560px);
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: searchFadeIn 0.18s ease;
}

[data-theme="light"] .search-content {
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
}

@keyframes searchFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-border);
}

.search-header-icon {
  color: var(--text-3);
  flex-shrink: 0;
}

#search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}

#search-input::placeholder {
  color: var(--text-3);
}

.search-header-hint {
  display: inline-flex;
  align-items: center;
}

.search-header-hint kbd {
  font-family: 'Geist Mono', 'Monaco', monospace;
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  color: var(--text-3);
  background: var(--glass);
}

.search-results {
  max-height: 50vh;
  overflow-y: auto;
  padding: 6px;
}

.search-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  font: inherit;
  transition: background 0.1s;
}

.search-result.active {
  background: var(--accent-glow);
}

.search-result-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--text-2);
  flex-shrink: 0;
}

.search-result.active .search-result-icon {
  color: var(--accent);
  border-color: rgba(0, 217, 163, 0.4);
}

.search-result-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-result-title {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-title mark {
  background: rgba(0, 217, 163, 0.25);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.search-result-sub {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-kind {
  font-size: 10.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  font-weight: 500;
}

.search-footer {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--glass-border);
  font-size: 11px;
  color: var(--text-3);
}

.search-footer kbd {
  font-family: 'Geist Mono', 'Monaco', monospace;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  background: var(--glass);
  margin-right: 3px;
}

@media (max-width: 600px) {
  .search-modal {
    padding-top: 4vh;
  }
  .search-content {
    width: 92vw;
  }
  .search-footer {
    gap: 8px;
    font-size: 10px;
  }
}

@media (max-width: 600px) {
  .filters-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-search {
    max-width: 100%;
  }
}

/* ============================================
   LANDING EXTENSION (bajo el card de login)
   ============================================ */

.landing-extension {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  animation: loginFadeIn 0.8s ease-out 0.2s both;
}

.landing-section-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  text-align: center;
  color: var(--text);
}

/* Sección 1: Cómo funciona en 3 pasos */
.landing-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.landing-step {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.landing-step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.landing-step h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text);
}

.landing-step p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  opacity: 0.78;
  margin: 0;
}

/* Sección 2: Para quién es */
.landing-audience-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-audience-list li {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 16px 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.landing-audience-list strong {
  color: var(--text);
  font-weight: 600;
}

/* Sección 3: Qué NO hace Patrimonium */
.landing-not-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-not-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.landing-not-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.landing-not-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.landing-not-list strong {
  font-weight: 600;
  color: var(--text);
}

/* Sección 4: FAQ con <details> */
.landing-faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-faq-item {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.landing-faq-item summary {
  padding: 16px 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  user-select: none;
}

.landing-faq-item summary::-webkit-details-marker {
  display: none;
}

.landing-faq-item summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.landing-faq-item[open] summary::after {
  content: '−';
}

.landing-faq-item p {
  padding: 0 20px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.82;
  margin: 0;
}

/* Sección 5: CTA final */
.landing-cta-final {
  text-align: center;
  padding: 56px 32px;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.08),
    rgba(59, 130, 246, 0.08));
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.landing-cta-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 12px;
}

.landing-cta-sub {
  font-size: 16px;
  color: var(--text);
  opacity: 0.78;
  margin: 0 0 28px;
}

.landing-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.landing-cta-primary,
.landing-cta-secondary {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.landing-cta-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  border: none;
}

.landing-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.28);
}

.landing-cta-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--glass-border);
}

.landing-cta-secondary:hover {
  background: var(--glass);
}

/* Responsive — móvil */
@media (max-width: 720px) {
  .landing-extension {
    padding: 40px 16px 48px;
    gap: 40px;
  }

  .landing-section-title {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .landing-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .landing-step {
    padding: 22px 18px;
  }

  .landing-cta-final {
    padding: 40px 20px;
  }

  .landing-cta-title {
    font-size: 22px;
  }

  .landing-cta-sub {
    font-size: 15px;
  }

  .landing-cta-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .landing-cta-primary,
  .landing-cta-secondary {
    width: 100%;
  }
}

/* ============================================
   LANDING V2 — Rediseño con screenshots
   ============================================
   Esta sección REEMPLAZA el comportamiento del bloque LANDING EXTENSION
   anterior. El #login-screen pasa a ser la página completa de landing
   con scroll, secciones full-width y screenshots integrados. La
   verify-screen mantiene su layout centrado original.
   ============================================ */

/* Override completo del centrado: la landing fluye verticalmente.
   Sobrescribe la regla #login-screen que se añadió antes. */
#login-screen {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  min-height: 100vh;
}

/* HEADER sticky con blur */
.landing-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(10, 14, 24, 0.55);
  border-bottom: 1px solid var(--glass-border);
}

[data-theme="light"] .landing-header {
  background: rgba(255, 255, 255, 0.75);
}

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

.landing-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.landing-logo-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-beta-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent);
  text-transform: uppercase;
}

.landing-header-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.landing-header-signin {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.landing-header-signin:hover {
  background: var(--glass);
  border-color: var(--accent);
}

/* HERO */
.landing-hero {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 32px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.landing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%,
    rgba(16, 185, 129, 0.12),
    transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.landing-hero-content {
  max-width: 760px;
  margin-bottom: 56px;
}

.landing-hero-title {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 24px;
  color: var(--text);
}

.landing-hero-em {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-hero-sub {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.78;
  margin: 0 0 36px;
}

.landing-hero-ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.landing-hero-trust {
  font-size: 13px;
  color: var(--text);
  opacity: 0.55;
  margin: 0;
}

.landing-hero-visual {
  width: 100%;
  max-width: 1100px;
  position: relative;
}

.landing-hero-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.55),
    0 20px 40px -10px rgba(16, 185, 129, 0.18);
  display: block;
}

/* BOTONES grandes de landing */
.landing-btn-primary,
.landing-btn-secondary {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  line-height: 1;
}

.landing-btn-large {
  font-size: 16px;
  padding: 16px 32px;
}

.landing-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  border: none;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.landing-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.42);
}

.landing-btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--glass-border);
}

.landing-btn-secondary:hover {
  background: var(--glass);
  border-color: var(--accent);
}

/* FEATURE SECTIONS — alternating layout */
.landing-feature {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.landing-feature--img-right .landing-feature-content { order: 0; }
.landing-feature--img-right .landing-feature-visual  { order: 1; }
.landing-feature--img-left  .landing-feature-visual  { order: 0; }
.landing-feature--img-left  .landing-feature-content { order: 1; }

.landing-feature-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing-feature-img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.45);
  display: block;
}

.landing-feature-img--phone {
  max-width: 280px;
  max-height: 600px;
  object-fit: cover;
  object-position: top;
  border-radius: 28px;
  border: 2px solid var(--glass-border);
  box-shadow: 0 24px 50px -15px rgba(0, 0, 0, 0.5);
}

.landing-feature-content {
  display: flex;
  flex-direction: column;
}

.landing-feature-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.landing-feature-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--text);
}

.landing-feature-desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.8;
  margin: 0 0 22px;
}

.landing-feature-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-feature-bullets li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.85;
}

.landing-feature-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(16, 185, 129, 0.15);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px 11px;
}

/* TRUST section (Qué NO hace) */
.landing-trust {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 32px;
  text-align: center;
}

.landing-trust-lead {
  font-size: 17px;
  color: var(--text);
  opacity: 0.7;
  margin: 0 0 36px;
}

.landing-trust .landing-not-list {
  text-align: left;
}

/* Override de .landing-section-title para landing v2 */
.landing-section-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 18px;
  text-align: center;
  color: var(--text);
}

/* FAQ section */
.landing-faq-section {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 32px;
}

.landing-faq-section .landing-section-title {
  margin-bottom: 32px;
}

/* CTA FINAL (override del que ya estaba para landing v2) */
.landing-cta-final {
  width: 100%;
  max-width: 880px;
  margin: 32px auto 80px;
  padding: 64px 48px;
  text-align: center;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.1),
    rgba(59, 130, 246, 0.1));
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.landing-cta-title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 14px;
}

.landing-cta-sub {
  font-size: 17px;
  color: var(--text);
  opacity: 0.78;
  margin: 0 0 32px;
}

.landing-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* FOOTER */
.landing-footer {
  width: 100%;
  border-top: 1px solid var(--glass-border);
  padding: 40px 32px;
  background: rgba(0, 0, 0, 0.22);
}

[data-theme="light"] .landing-footer {
  background: rgba(0, 0, 0, 0.03);
}

.landing-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.landing-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.landing-footer-fine {
  font-size: 13px;
  color: var(--text);
  opacity: 0.6;
  max-width: 560px;
  margin: 0;
  line-height: 1.5;
}

.landing-footer-credit {
  font-size: 13px;
  color: var(--text);
  opacity: 0.55;
  margin: 0;
}

/* MODAL: separador "o con email" + body wrapper */
.auth-modal-body {
  padding: 0 24px 8px;
}

.modal-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  opacity: 0.5;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 18px 0 6px;
  font-weight: 500;
}

.modal-divider::before,
.modal-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}

/* RESPONSIVE — Tablet (≤960px) */
@media (max-width: 960px) {
  .landing-hero {
    padding: 56px 20px 48px;
  }

  .landing-hero-title {
    font-size: 42px;
  }

  .landing-hero-sub {
    font-size: 17px;
  }

  .landing-feature {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 56px 20px;
  }

  .landing-feature--img-right .landing-feature-visual,
  .landing-feature--img-left .landing-feature-visual {
    order: 0;
  }
  .landing-feature--img-right .landing-feature-content,
  .landing-feature--img-left .landing-feature-content {
    order: 1;
  }

  .landing-feature-title { font-size: 30px; }
  .landing-feature-desc  { font-size: 16px; }
  .landing-section-title { font-size: 30px; }

  .landing-cta-final {
    padding: 48px 24px;
    margin-bottom: 56px;
  }

  .landing-cta-title { font-size: 28px; }

  .landing-trust,
  .landing-faq-section {
    padding: 56px 20px;
  }
}

/* RESPONSIVE — Móvil (≤600px) */
@media (max-width: 600px) {
  .landing-header-inner {
    padding: 12px 20px;
  }

  .landing-logo-text {
    font-size: 18px;
  }

  .landing-hero-title {
    font-size: 34px;
  }

  .landing-hero-sub {
    font-size: 16px;
    margin-bottom: 28px;
  }

  .landing-hero-ctas {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .landing-btn-large {
    width: 100%;
  }

  .landing-feature-title,
  .landing-section-title,
  .landing-cta-title {
    font-size: 26px;
  }

  .landing-cta-buttons {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .landing-feature-bullets li {
    font-size: 14px;
  }

  .landing-footer {
    padding: 32px 20px;
  }
}

/* ============================================
   DISCLAIMER LEGAL — No asesoramiento financiero
   ============================================ */

/* Pie pequeño dentro de la tarjeta motivacional del Resumen */
.motivacion-disclaimer {
  font-size: 11px;
  color: var(--text);
  opacity: 0.55;
  margin-top: 8px;
  letter-spacing: 0.01em;
  font-style: italic;
}

/* Bloque dedicado en el Centro de Ayuda */
.ayuda-disclaimer {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.ayuda-disclaimer p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.9;
  margin: 0 0 14px;
}

.ayuda-disclaimer p:last-child {
  margin-bottom: 0;
}

.ayuda-disclaimer strong {
  color: var(--text);
  opacity: 1;
}

.ayuda-disclaimer a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.ayuda-disclaimer a:hover {
  text-decoration-thickness: 2px;
}

.ayuda-disclaimer-fine {
  font-size: 13px;
  opacity: 0.65;
  border-top: 1px solid var(--glass-border);
  padding-top: 14px;
  margin-top: 14px;
}

/* ============================================
   PÁGINAS LEGALES (privacidad, terminos, aviso-legal, cookies)
   ============================================ */

.legal-body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-family: inherit;
  margin: 0;
}

.legal-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(10, 14, 24, 0.55);
  border-bottom: 1px solid var(--glass-border);
}

[data-theme="light"] .legal-header {
  background: rgba(255, 255, 255, 0.75);
}

.legal-header-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.legal-back {
  font-size: 14px;
  color: var(--text);
  opacity: 0.7;
  text-decoration: none;
  transition: opacity 0.15s, color 0.15s;
}

.legal-back:hover {
  opacity: 1;
  color: var(--accent);
}

.legal-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}

.legal-title {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--text);
}

.legal-updated {
  font-size: 14px;
  color: var(--text);
  opacity: 0.55;
  margin: 0 0 32px;
}

.legal-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.9;
  margin: 0 0 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--glass-border);
}

.legal-toc {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.legal-main .legal-toc a {
  font-size: 14px;
  color: var(--text);
  opacity: 0.78;
  text-decoration: none;
  padding: 4px 0;
  transition: opacity 0.15s, color 0.15s;
}

.legal-main .legal-toc a:hover {
  opacity: 1;
  color: var(--accent);
  text-decoration: none;
}

.legal-main section {
  margin-bottom: 40px;
  scroll-margin-top: 80px;
}

.legal-main h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--text);
}

.legal-main h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 26px 0 10px;
  color: var(--text);
}

.legal-main p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  opacity: 0.86;
  margin: 0 0 14px;
}

.legal-main ul {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  opacity: 0.86;
  margin: 0 0 16px;
  padding-left: 24px;
}

.legal-main ul li {
  margin-bottom: 6px;
}

.legal-main strong {
  color: var(--text);
  opacity: 1;
  font-weight: 600;
}

.legal-main a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.legal-main a:hover {
  text-decoration-thickness: 2px;
}

.legal-main code {
  font-family: ui-monospace, "SF Mono", Monaco, Consolas, monospace;
  font-size: 0.92em;
  background: var(--glass);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--glass-border);
}

.legal-callout {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 16px 22px;
  margin: 20px 0;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.legal-datos-responsable {
  list-style: none;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 16px 22px;
  margin: 0 0 20px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.legal-datos-responsable li {
  margin-bottom: 8px;
}

.legal-datos-responsable li:last-child {
  margin-bottom: 0;
}

.legal-footer {
  border-top: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.22);
  padding: 40px 32px;
}

[data-theme="light"] .legal-footer {
  background: rgba(0, 0, 0, 0.03);
}

.legal-footer-inner {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.legal-footer-fine {
  font-size: 13px;
  color: var(--text);
  opacity: 0.6;
  max-width: 560px;
  margin: 0;
  line-height: 1.5;
}

.legal-footer-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.legal-footer-links a {
  font-size: 13px;
  color: var(--text);
  opacity: 0.65;
  text-decoration: none;
  transition: opacity 0.15s, color 0.15s;
}

.legal-footer-links a:hover,
.legal-footer-links a[aria-current="page"] {
  opacity: 1;
  color: var(--accent);
}

.legal-footer-links span {
  font-size: 12px;
  color: var(--text);
  opacity: 0.3;
}

.legal-footer-credit {
  font-size: 13px;
  color: var(--text);
  opacity: 0.55;
  margin: 0;
}

@media (max-width: 720px) {
  .legal-header-inner {
    padding: 12px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .legal-main {
    padding: 32px 20px 56px;
  }

  .legal-title {
    font-size: 30px;
  }

  .legal-lead {
    font-size: 16px;
  }

  .legal-toc {
    grid-template-columns: 1fr;
    padding: 16px 18px;
  }

  .legal-main h2 {
    font-size: 22px;
  }

  .legal-main p,
  .legal-main ul {
    font-size: 15px;
  }
}

/* ============================================
   FOOTER DE LA LANDING — enlaces legales
   ============================================ */

.landing-footer-legal {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.landing-footer-legal a {
  font-size: 13px;
  color: var(--text);
  opacity: 0.65;
  text-decoration: none;
  transition: opacity 0.15s, color 0.15s;
}

.landing-footer-legal a:hover {
  opacity: 1;
  color: var(--accent);
}

.landing-footer-legal span {
  font-size: 12px;
  color: var(--text);
  opacity: 0.3;
}

/* ============================================
   PANTALLA "ACCESO PENDIENTE" — BETA cerrada
   ============================================
   Se muestra cuando el usuario autenticado no está en allowedEmails.
   Reutiliza el layout centrado de .login-screen (no del #login-screen
   override que es para la landing en flujo). */

.waitlist-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(245, 158, 11, 0.18),
    rgba(245, 158, 11, 0.10));
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.waitlist-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  opacity: 0.92;
  margin: 16px 0 12px;
}

.waitlist-hint {
  font-size: 14px;
  color: var(--text);
  opacity: 0.7;
  line-height: 1.55;
  margin: 0 0 24px;
}

.waitlist-hint a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.waitlist-email {
  font-weight: 600;
  color: var(--text);
  opacity: 1;
}

.waitlist-footer {
  margin-top: 24px;
}