/* ─────────────────────────────────────────────────────────────────────────
   Modo oscuro de Talentop Academy — paleta "navy de marca".

   Las páginas usan colores inline escritos como variables con respaldo:
     color:var(--tt-fg-234e69,#234E69)
   En modo claro estas variables no existen y se usa el respaldo (el diseño
   de siempre). Aquí se definen solo para html[data-theme="dark"].

   Prefijos:  fg = color de texto · bg = fondo · bd = borde.
   El tokenizador (herramientas/modo-oscuro/tokenizar.mjs) tiene la lista de
   colores que convierte; si se agrega uno aquí, agregarlo también allá.

   Base oscura:
     #0C1A24 fondo de página · #132633 tarjeta · #1A3242 / #1D3646 superficies
     #213B4C borde suave · #E6EEF2 texto principal · #A2B6C1 texto secundario
     Acento #F1B16B sin cambios.
   ───────────────────────────────────────────────────────────────────────── */

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

  /* Texto — tinta azul marino → claros desaturados */
  --tt-fg-234e69: #E6EEF2;
  --tt-fg-123a5c: #EEF3F6;
  --tt-fg-1b3f58: #D5E2EA;
  --tt-fg-2c5b79: #B5CEDD;
  --tt-fg-3e5a6b: #BCCBD4;
  --tt-fg-3f5d6e: #BCCBD4;
  --tt-fg-3b5a6b: #BCCBD4;
  --tt-fg-4a6577: #B2C3CD;
  --tt-fg-54707f: #A6B9C4;
  --tt-fg-5b7686: #A2B6C1;
  --tt-fg-7a8f9b: #93A9B5;
  --tt-fg-5f7785: #A2B6C1;
  /* Enlaces azules */
  --tt-fg-3e6d8a: #8FBCD6;
  --tt-fg-2f6a8c: #8FBCD6;
  /* Ocres y cafés → más luminosos para mantener contraste */
  --tt-fg-c98a4b: #E8A664;
  --tt-fg-b0793a: #E0A062;
  --tt-fg-a97038: #DDA066;
  --tt-fg-b07c36: #E0A55E;
  --tt-fg-8a5a3c: #D9A585;
  --tt-fg-2c6b45: #7FD1A0;
  --tt-fg-8e3b3b: #F2A7A7; /* texto de error */

  /* Fondos */
  --tt-bg-fbfcfc: #0C1A24;
  --tt-bg-fff:    #132633;
  --tt-bg-f4f8fa: #1A3242;
  --tt-bg-f7fafb: #1A3242;
  --tt-bg-f2f5f7: #1A3242;
  --tt-bg-eaf1f5: #1D3646;
  --tt-bg-e7eef2: #1D3646;
  --tt-bg-e4edf2: #1D3646;
  --tt-bg-e4ecf0: #1D3646;
  --tt-bg-edf1f3: #1D3646;
  --tt-bg-eef2f4: #1D3646;
  --tt-bg-eef3f5: #1D3646;
  --tt-bg-edf1f4: #1D3646;
  --tt-bg-e3ebf0: #1D3646;
  --tt-bg-dfe8ed: #213D4F;
  --tt-bg-dce7ed: #213D4F;
  --tt-bg-c9d5db: #2C4A5D;
  --tt-bg-e1e8ec: #213D4F;
  /* Fondos cálidos (crema / arena) → navy con un toque cálido */
  --tt-bg-fff9f1: #1E2B2E;
  --tt-bg-fdf3e6: #262C2A;
  --tt-bg-fbf7ef: #1F2D30;
  --tt-bg-fbf6ee: #1F2D30;
  --tt-bg-f6ead8: #33302A;
  --tt-bg-f5e7d3: #36322A;
  --tt-bg-efe9e1: #2A3034;
  --tt-bg-eaf6ee: #17332A;
  --tt-bg-e2e9ed: #213B4C; /* separadores de 1px */
  --tt-bg-f4f7f9: #1A3242;
  --tt-bg-fbf1e4: #33302A;
  --tt-bg-fceeee: #3A2226; /* aviso de error */

  /* Bordes */
  --tt-bd-dce4e8: #213B4C;
  --tt-bd-e2e9ed: #213B4C;
  --tt-bd-d3dde2: #213B4C;
  --tt-bd-e4ecf0: #213B4C;
  --tt-bd-edf1f3: #213B4C;
  --tt-bd-eef2f4: #213B4C;
  --tt-bd-e7eef2: #213B4C;
  --tt-bd-dfe8ed: #213B4C;
  --tt-bd-eaf1f5: #213B4C;
  --tt-bd-c9d8e1: #2E4B5E;
  --tt-bd-c9d5db: #2E4B5E;
  --tt-bd-c6d3da: #2E4B5E;
  --tt-bd-c7d6df: #2E4B5E;
  --tt-bd-c4d0d7: #2E4B5E;
  --tt-bd-e7dccb: #4A4232;
  --tt-bd-f0dfc6: #4A4232;
  --tt-bd-f6ead8: #4A4232;
  --tt-bd-b6dcc4: #2F5C44;
  --tt-bd-234e69: #9DB3BF;
  --tt-bd-fff:    #132633;
  --tt-bd-eef3f5: #213B4C;
  --tt-bd-e7b4b4: #6B3A3A;
}

/* Dentro de un fondo de acento (naranja, verde) el contenido conserva los
   colores del modo claro: "initial" deja la variable sin valor y cada color
   usa su respaldo. El tokenizador pone data-tt-claro en esos elementos. */
html[data-theme="dark"] [data-tt-claro] {
  --tt-fg-234e69: initial;
  --tt-fg-123a5c: initial;
  --tt-fg-1b3f58: initial;
  --tt-fg-2c5b79: initial;
  --tt-fg-3e5a6b: initial;
  --tt-fg-3f5d6e: initial;
  --tt-fg-3b5a6b: initial;
  --tt-fg-4a6577: initial;
  --tt-fg-54707f: initial;
  --tt-fg-5b7686: initial;
  --tt-fg-7a8f9b: initial;
  --tt-fg-5f7785: initial;
  --tt-fg-3e6d8a: initial;
  --tt-fg-2f6a8c: initial;
  --tt-fg-c98a4b: initial;
  --tt-fg-b0793a: initial;
  --tt-fg-a97038: initial;
  --tt-fg-b07c36: initial;
  --tt-fg-8a5a3c: initial;
  --tt-fg-2c6b45: initial;
  --tt-fg-8e3b3b: initial;
  --tt-bg-fbfcfc: initial;
  --tt-bg-fff: initial;
  --tt-bg-f4f8fa: initial;
  --tt-bg-f7fafb: initial;
  --tt-bg-f2f5f7: initial;
  --tt-bg-eaf1f5: initial;
  --tt-bg-e7eef2: initial;
  --tt-bg-e4edf2: initial;
  --tt-bg-e4ecf0: initial;
  --tt-bg-edf1f3: initial;
  --tt-bg-eef2f4: initial;
  --tt-bg-eef3f5: initial;
  --tt-bg-edf1f4: initial;
  --tt-bg-e3ebf0: initial;
  --tt-bg-dfe8ed: initial;
  --tt-bg-dce7ed: initial;
  --tt-bg-c9d5db: initial;
  --tt-bg-e1e8ec: initial;
  --tt-bg-fff9f1: initial;
  --tt-bg-fdf3e6: initial;
  --tt-bg-fbf7ef: initial;
  --tt-bg-fbf6ee: initial;
  --tt-bg-f6ead8: initial;
  --tt-bg-f5e7d3: initial;
  --tt-bg-efe9e1: initial;
  --tt-bg-eaf6ee: initial;
  --tt-bg-e2e9ed: initial;
  --tt-bg-f4f7f9: initial;
  --tt-bg-fbf1e4: initial;
  --tt-bg-fceeee: initial;
  --tt-bd-dce4e8: initial;
  --tt-bd-e2e9ed: initial;
  --tt-bd-d3dde2: initial;
  --tt-bd-e4ecf0: initial;
  --tt-bd-edf1f3: initial;
  --tt-bd-eef2f4: initial;
  --tt-bd-e7eef2: initial;
  --tt-bd-dfe8ed: initial;
  --tt-bd-eaf1f5: initial;
  --tt-bd-c9d8e1: initial;
  --tt-bd-c9d5db: initial;
  --tt-bd-c6d3da: initial;
  --tt-bd-c7d6df: initial;
  --tt-bd-c4d0d7: initial;
  --tt-bd-e7dccb: initial;
  --tt-bd-f0dfc6: initial;
  --tt-bd-f6ead8: initial;
  --tt-bd-b6dcc4: initial;
  --tt-bd-234e69: initial;
  --tt-bd-fff: initial;
  --tt-bd-eef3f5: initial;
  --tt-bd-e7b4b4: initial;
}

html[data-theme="dark"],
html[data-theme="dark"] body { background: #0C1A24; }

html[data-theme="dark"] ::selection { background: rgba(241,177,107,0.35); color: #fff; }

/* Íconos SVG con color fijo en atributo (stroke="#234E69"): el CSS gana
   sobre los atributos de presentación, así que basta con reasignarlos.
   Se excluyen las ilustraciones con piezas blancas (papel blanco con trazo
   azul, como en el funnel): ahí el trazo oscuro debe seguir oscuro. */
html[data-theme="dark"] svg:not(:has([fill="#fff"])) [stroke="#234E69"] { stroke: #E6EEF2; }
html[data-theme="dark"] svg:not(:has([fill="#fff"])) [fill="#234E69"] { fill: #E6EEF2; }
html[data-theme="dark"] svg:not(:has([fill="#fff"])) [stroke="#3E6D8A"] { stroke: #8FBCD6; }
html[data-theme="dark"] svg:not(:has([fill="#fff"])) [stroke="#7A8F9B"] { stroke: #93A9B5; }
html[data-theme="dark"] svg:not(:has([fill="#fff"])) [stroke="#C98A4B"] { stroke: #E8A664; }

/* Transición suave solo mientras se cambia de modo (theme.js pone la clase). */
html.tt-theme-anim,
html.tt-theme-anim *,
html.tt-theme-anim *::before,
html.tt-theme-anim *::after {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease, stroke .3s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.tt-theme-anim, html.tt-theme-anim * { transition: none !important; }
}

/* Esqueletos de carga (skeleton.css) */
html[data-theme="dark"] .tt-sk-page { background: #0C1A24; }
html[data-theme="dark"] .tt-sk { background: #1D3646; }
html[data-theme="dark"] .tt-sk::after {
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.07), rgba(255,255,255,0));
}
html[data-theme="dark"] .tt-sk-oscuro .tt-sk { background: rgba(255,255,255,0.11); }
html[data-theme="dark"] .tt-sk-tarjeta { background: #132633; border-color: #213B4C; }

/* Botón sol/luna de las páginas estáticas (cursos, blog, funnel), que no
   pasan por React: muestra un ícono u otro según data-theme.
   <button type="button" class="tt-tema" onclick="window.ttTheme&&ttTheme.toggle()" …>
     <svg class="tt-luna">…</svg><svg class="tt-sol">…</svg></button> */
.tt-tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px; padding: 0;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06); color: #fff; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.tt-tema:hover { border-color: #F1B16B; color: #F1B16B; }
.tt-tema:focus-visible { outline: 2px solid #F1B16B; outline-offset: 2px; }
.tt-tema svg { display: block; }
.tt-tema .tt-sol { display: none; }
html[data-theme="dark"] .tt-tema .tt-sol { display: block; }
html[data-theme="dark"] .tt-tema .tt-luna { display: none; }