/* =====================================================================
   THEME BRIDGE — "Miradas que Protegen" sobre el curso Justicia Juvenil
   ---------------------------------------------------------------------
   Re-tematiza el curso existente adoptando el design system SIN tocar el
   markup. Enlazar SIEMPRE en este orden:

       1) ninez-design-system/css/tokens.css   (fuente de verdad visual)
       2) curso-custom.css                      (motor + layout del curso)
       3) ninez-design-system/css/theme-bridge.css   (este archivo)

   Este archivo depende de que tokens.css se cargue ANTES: usa var(--azul),
   var(--paper), var(--ink), etc. No redefine tokens del sistema; solo
   remapea las variables que el curso ya consume.
   ===================================================================== */

/* =====================================================================
   0) TIPOGRAFÍAS DEL SISTEMA (@font-face)
   Rutas relativas a este archivo (css/ → ../../fonts/files/).
   Mismo patrón que fonts.css, con font-display:swap.
   ===================================================================== */

/* ---- Nunito (títulos / UI fuerte) ---- */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../fonts/files/Nunito-400-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../../fonts/files/Nunito-600-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../../fonts/files/Nunito-700-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../../fonts/files/Nunito-800-latin.woff2) format('woff2');
}

/* ---- Open Sans (lectura / cuerpo) ---- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../fonts/files/OpenSans-400-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../../fonts/files/OpenSans-600-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../../fonts/files/OpenSans-700-latin.woff2) format('woff2');
}

/* =====================================================================
   1) ==== CONFIGURA AQUÍ color y tipografía ====
   Remapeo de las variables que usa el curso hacia los tokens del sistema.
   Cambia estas asignaciones (o los tokens en tokens.css) para re-temar.
   ===================================================================== */
:root {
  /* --- Color de marca (acciones, enlaces, foco) --- */
  --primary:        var(--azul);        /* Azul Protección          */
  --primary-hover:  var(--azul-600);    /* hover / estado activo    */
  --primary-dark:   var(--azul-600);    /* variante oscura          */
  --primary-light:  var(--tint-azul);   /* fondo suave del primario */

  /* --- Superficies y texto --- */
  --bg:             var(--paper);       /* fondo de página (crema)  */
  --bg-alt:         var(--card);        /* superficie de tarjeta    */
  --text:           var(--ink);         /* texto principal          */
  --text-secondary: var(--ink-soft);    /* texto secundario         */
  --border:         var(--line);        /* bordes / divisores       */
  --border-light:   var(--line);        /* divisores suaves         */

  /* --- Estados --- */
  --success:        var(--verde);       /* avance / estados OK       */

  /* --- Tipografía --- */
  --font-body:      'Open Sans', system-ui, sans-serif;
  --font-heading:   'Nunito', system-ui, sans-serif;

  /* --- Radios (más suaves, alineados al sistema) --- */
  --radius:         var(--radius-sm);   /* 12px */
  --radius-lg:      var(--radius);      /* 18px */
}

/* =====================================================================
   2) MODO OSCURO — se preserva el toggle del curso (.dark).
   Solo se ajusta la paleta a un oscuro cálido coherente con la marca;
   NO se toca la estructura ni la lógica del bloque .dark original.
   ===================================================================== */
.dark {
  --primary:        var(--azul-400);    /* azul más luminoso sobre oscuro */
  --primary-hover:  var(--azul);
  --primary-dark:   var(--azul-400);
  --primary-light:  #223244;            /* superficie azulada tenue       */

  --bg:             #16211f;            /* "escritorio" cálido (--desk)   */
  --bg-alt:         #1e2c2a;            /* tarjeta oscura cálida          */
  --text:           #f4efe0;           /* crema como texto claro         */
  --text-secondary: #c3cbc4;
  --border:         #33403c;
  --border-light:   #26302d;

  --success:        #6fb387;
}

/* =====================================================================
   3) AJUSTES FINOS DE COMPONENTES
   Refuerzan la identidad del sistema sin alterar estructura ni clases.
   ===================================================================== */

/* Títulos con Nunito y trazo firme del sistema */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

/* Tarjetas: radios más suaves + sombra con tinte del sistema */
.card {
  border-radius: var(--radius-lg);
}

/* Botones: forma de "pill" opcional del sistema para CTAs redondeados */
.btn {
  border-radius: var(--radius-pill);
}

/* =====================================================================
   4) MARCA Y FOOTER DE CRÉDITOS (perfil.html / certificado.html)
   Fondo claro → logos normales; tema oscuro → logos en blanco.
   ===================================================================== */
.fcred { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fcred__brands { display: flex; align-items: center; gap: 1.75rem; margin-bottom: .8rem; }
.fcred__logo { width: auto; display: block; }
.fcred__curso { height: 52px; }
.fcred__oj { height: 58px; }
.fcred p { margin: 0 0 2px; font-size: .8rem; color: var(--text-secondary); }
.fcred__course { font-weight: 700; color: var(--text); font-size: .9rem; }
/* Conmutación de logos por tema: versión clara (color) / oscura (blanca).
   Sin filtros: cada tema usa el archivo SVG correcto. */
.logo-dark { display: none !important; }
html.dark .logo-light { display: none !important; }
html.dark .logo-dark { display: block !important; }
/* En impresión (certificado) siempre la versión a color */
@media print {
  .logo-dark { display: none !important; }
  .logo-light { display: block !important; }
}