/* ============================================================
 * IDENTITY OVERLAY · Manantiales · Fase 2
 * ============================================================
 * Overlay que carga DESPUÉS de main.css y reasigna la paleta y
 * fuentes de Formación hacia la identidad canónica (sitio
 * institucional `/prueba/`): warm tierra + Cormorant + Sora +
 * Poppins + olive.
 *
 * Cambios respecto a fase 1:
 *  - Bloque `[data-theme="dark"]` con la paleta dark institucional
 *    (bg #1a1917, texto cream #ded9ce, olive brillante #33a3b0),
 *    para cubrir los 75 selectores del dark theme de main.css sin
 *    tocar el CSS original.
 *  - Overrides para casos edge: border-color de focus, headers de
 *    dashboard con acentos naranja hardcodeados, botones ghost, etc.
 *  - NO se tocan indicadores semánticos (verde=OK, naranja=alerta,
 *    rojo=peligro) del timeline map ni de badges de estado en admin.
 *
 * Fecha: 2026-07-01 (fase 2)
 * ============================================================ */

/* --------------------------------------------------------------
   FASE 1 · Tokens del modo claro (institucional)
   -------------------------------------------------------------- */
:root {
  /* Tipografías */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body:    'Poppins', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'Sora', 'JetBrains Mono', 'Courier New', monospace;

  /* Oscuros */
  --color-ink:         #32312b;
  --color-bg-dark:     #3a3830;
  --color-bg-darker:   #2b2a25;
  --color-bg-darkest:  #1a1917;
  --color-ink-soft:    rgba(50, 49, 43, 0.85);
  --color-ink-light:   rgba(50, 49, 43, 0.66);
  --color-ink-mute:    rgba(50, 49, 43, 0.50);

  /* Base clara warm */
  --color-cream:       #ded9ce;
  --color-cream-warm:  #e6e2d8;
  --color-cream-light: #f0ede5;
  --color-paper:       #ffffff;
  --color-bone:        #bdb7a8;

  /* Acento principal · olive */
  --color-amber:       #008392;
  --color-amber-deep:  #006e7c;
  --color-amber-light: #33a3b0;
  --color-amber-pale:  #d9edf0;

  /* Dorado gris institucional */
  --color-mostaza:      #bdb7a8;
  --color-mostaza-deep: #a09a8a;
  --color-mostaza-pale: #ede9df;

  /* Lavanda decorativa (suavizada) */
  --color-lavanda:      #d4cfc0;
  --color-lavanda-deep: #b7b1a3;
  --color-lavanda-pale: #ede9df;

  /* Brand (logo topo) */
  --color-brand:      #bdb7a8;
  --color-brand-deep: #a09a8a;

  /* Estados — se mantienen semánticos */
  --color-success:      #556b3a;
  --color-success-pale: rgba(85, 107, 58, 0.10);
  --color-warning:      #c07020;
  --color-warning-pale: rgba(192, 112, 32, 0.10);
  --color-danger:       #8b3a26;
  --color-danger-pale:  rgba(139, 58, 38, 0.10);

  /* Alias que algunas vistas admin usan como fallback en inline styles
     (ej: color:var(--color-muted, #6b7d79) en labels de filtros).
     Sin este, en dark el fallback #6b7d79 queda ilegible. */
  --color-muted: rgba(50, 49, 43, 0.60);
}

/* Legacy moss (verde vintage) realineado al carbón institucional */
:root {
  --color-moss:       #32312b;
  --color-moss-deep:  #1a1917;
  --color-moss-light: #3a3830;
  --color-moss-pale:  #bdb7a8;
  --color-clay:       #8b3a26;
}

/* --------------------------------------------------------------
   FASE 2 · Dark theme institucional
   -------------------------------------------------------------- */
[data-theme="dark"] {
  /* Fondos: warm tierra oscuro (carbón institucional) */
  --color-cream:       #262521;   /* fondo medio warm dark */
  --color-cream-warm:  #302e28;
  --color-cream-light: #2b2a24;
  --color-paper:       #1e1d1a;   /* superficie */
  --color-bone:        #4a4740;

  /* Fondo global */
  --color-bg-dark:     #1a1917;   /* body */
  --color-bg-darker:   #14130f;
  --color-bg-darkest:  #0d0c0a;

  /* Texto */
  --color-ink:         #ded9ce;
  --color-ink-soft:    rgba(222, 217, 206, 0.92);
  --color-ink-light:   rgba(222, 217, 206, 0.72);
  --color-ink-mute:    rgba(222, 217, 206, 0.50);

  /* Acento olive: más brillante en dark para contraste */
  --color-amber:       #33a3b0;
  --color-amber-deep:  #008392;
  --color-amber-light: #66c2cc;
  --color-amber-pale:  rgba(51, 163, 176, 0.14);

  /* Dorado más luminoso */
  --color-mostaza:      #d4cfc0;
  --color-mostaza-deep: #bdb7a8;
  --color-mostaza-pale: rgba(212, 207, 192, 0.16);

  /* Lavanda decorativa */
  --color-lavanda:      #4a4740;
  --color-lavanda-deep: #6a6660;
  --color-lavanda-pale: rgba(212, 207, 192, 0.12);

  /* Brand invertido */
  --color-brand:      #d4cfc0;
  --color-brand-deep: #bdb7a8;

  /* Estados dark-friendly */
  --color-success:      #8fb35c;
  --color-success-pale: rgba(143, 179, 92, 0.15);
  --color-warning:      #e8a565;
  --color-warning-pale: rgba(232, 165, 101, 0.15);
  --color-danger:       #cd6b52;
  --color-danger-pale:  rgba(205, 107, 82, 0.15);

  /* Muted para labels en dark */
  --color-muted: rgba(222, 217, 206, 0.55);
}

[data-theme="dark"] :root { color-scheme: dark; }

/* --------------------------------------------------------------
   AJUSTES DE COMPONENTES (aplican a light + dark)
   -------------------------------------------------------------- */

/* Bordes de subrayado de links: main.css asume naranja; con olive
   queda más elegante con opacidad. */
a { text-decoration-color: rgba(0, 131, 146, 0.35); }
a:hover { text-decoration-color: var(--color-amber); }
[data-theme="dark"] a { text-decoration-color: rgba(51, 163, 176, 0.40); }

/* Peso extra en Poppins porque es más denso que Inter */
.btn-primary { font-weight: 600; letter-spacing: 0.01em; }

/* Fondo body con gradientes sutiles (light) */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(189, 183, 168, 0.20), transparent 42%),
    radial-gradient(circle at 88% 90%, rgba(0, 131, 146, 0.06), transparent 40%),
    var(--color-cream);
}
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 8%, rgba(189, 183, 168, 0.06), transparent 42%),
    radial-gradient(circle at 88% 90%, rgba(51, 163, 176, 0.05), transparent 40%),
    var(--color-bg-dark);
}

/* Cormorant es más contrastado; ajusto line-height + tracking */
h1, h2, .display-1, .display-2, .display-3 {
  line-height: 1.08;
  letter-spacing: -0.015em;
}

/* Eyebrows / labels: Sora funciona con menos tracking que JetBrains */
.eyebrow, .form-label {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  font-weight: 600;
}

/* Focus ring institucional (light + dark). main.css usa border-color
   naranja; con olive gana un halo suave. */
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-amber) !important;
  box-shadow: 0 0 0 3px rgba(0, 131, 146, 0.14) !important;
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(51, 163, 176, 0.22) !important;
}

/* Iconos inline con stroke=currentColor heredan el color del
   padre — ya funciona. Los que hardcodean stroke="#e96625" quedan
   en naranja hasta que se editen archivo por archivo. */

/* Alerts semánticas: mantener los tonos que ya conocen los usuarios,
   pero suavizar bordes para el look editorial. */
.alert { border-radius: 12px; }
.alert-warning { border-left-color: var(--color-warning); }
.alert-danger  { border-left-color: var(--color-danger); }
.alert-success { border-left-color: var(--color-success); }

/* Cards y paneles: sombra más suave, borde en gold neutro */
.panel, .card {
  box-shadow: 0 8px 24px rgba(50, 49, 43, 0.06);
}
[data-theme="dark"] .panel,
[data-theme="dark"] .card {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Progreso: barra que se llena con el acento (main.css usa
   var(--color-amber)). Con olive queda mejor con un gradiente
   sutil. */
.progress-fill.video-progress-fill {
  background: linear-gradient(90deg, var(--color-amber), var(--color-amber-light));
}

/* Modo oscuro: forzar theme-color meta si el user lo tiene */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}