/* ===============================
   TEMAS
   Cada tema redefine los tokens de base.css bajo :root[data-theme="..."],
   y añade reglas puntuales no cubiertas por tokens (espaciado de letras,
   señales no-color, etc). El HTML y el JS son los mismos para los 7 temas;
   solo cambia este archivo.
   =============================== */

/* -------------------------------
   DALTONISMO — paleta Okabe-Ito (segura para protanopia, deuteranopia y
   tritanopia). El azul es el acento más seguro; nunca se usa el color como
   única señal (ver reglas ::before/::after y subrayado de enlaces al final).
   ------------------------------- */
:root[data-theme="daltonismo"] {
  --color-ink: #14181c;
  --color-board: #0072B2;
  --color-board-hover: #005a8c;
  --color-chalk: #f5f7f9;
  --color-chalk-card: #ffffff;

  --color-marker: #E69F00;
  --color-marker-hover: #cc8c00;
  --color-marker-ink: #1a1200;

  --color-flag: #D55E00;
  --color-board-line: rgba(245, 247, 249, .18);
  --color-chalk-soft: #f5f7f9;

  --color-primary: var(--color-board);
  --color-primary-hover: var(--color-board-hover);
  --color-primary-text: var(--color-board);
  --color-primary-soft: #e8f2fa;
  --color-primary-border: #b9d9ec;

  --color-accent: var(--color-marker);
  --color-accent-strong: var(--color-flag);

  --color-success-bg: #E6F5F0;
  --color-success-border: #009E73;
  --color-success-text: #00543d;
  --color-danger-bg: #FDEDE3;
  --color-danger-border: #D55E00;
  --color-danger-text: #7a3300;
  --color-warning-bg: #FFF6D6;
  --color-warning-border: #b8860b;
  --color-warning-text: #6b5900;
  --color-info-bg: #E8F3FB;
  --color-info-border: #56B4E9;
  --color-info-text: #0a4a73;

  --color-bg-page: var(--color-chalk);
  --color-bg-card: var(--color-chalk-card);
  --color-border: #d7dee3;
  --color-text: var(--color-ink);
  --color-text-muted: #55606b;
}

/* El color nunca es la única señal: enlaces subrayados y un icono de texto
   delante de cada tipo de aviso/opción de examen corregida. */
html[data-theme="daltonismo"] a {
  text-decoration: underline;
}

html[data-theme="daltonismo"] .alert-success::before { content: "✓ "; }
html[data-theme="daltonismo"] .alert-error::before   { content: "✕ "; }
html[data-theme="daltonismo"] .alert-warning::before { content: "⚠ "; }
html[data-theme="daltonismo"] .alert-info::before,
html[data-theme="daltonismo"] .alert-debug::before   { content: "ℹ "; }

html[data-theme="daltonismo"] .option-correct::after   { content: " ✓"; font-weight: 700; }
html[data-theme="daltonismo"] .option-incorrect::after { content: " ✕"; font-weight: 700; }

/* El trazo activo del menú lateral está incrustado como color literal
   dentro de un SVG en components.css (no es una variable CSS), así que
   hay que repetir la regla completa con el nuevo color. */
html[data-theme="daltonismo"] .side-menu-links a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.3 Q13 1.2 26 5 T51 4.4 T76 5.3 T99 4.6' stroke='%23E69F00' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --color-board es más claro en este tema (#0072B2) que en el resto (casi
   negro), así que el texto blanco translúcido pensado para esos otros
   fondos se queda por debajo de 4.5:1 aquí. Estos tres usan un color
   fijo en base.css (no la variable --color-chalk-soft), así que se
   sobrescriben aparte. */
html[data-theme="daltonismo"] .user-greeting,
html[data-theme="daltonismo"] .tokens-topbar__label,
html[data-theme="daltonismo"] .tokens-topbar__cifra {
  color: var(--color-chalk);
}

/* components.css hardcodea el foco en el amarillo del tema por defecto;
   este tema usa un naranja (#E69F00) como color diferenciador para
   daltonismo, así que el resplandor de foco necesita el suyo propio. */
html[data-theme="daltonismo"] .form-input:focus,
html[data-theme="daltonismo"] .form-textarea:focus,
html[data-theme="daltonismo"] input[type="file"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(230, 159, 0, .35);
}

/* -------------------------------
   DISLEXIA — guía de la British Dyslexia Association: sin fuente especial
   (una sans-serif normal ya funciona bien), texto más grande y espaciado,
   fondo crema (no blanco puro), texto oscuro pero no negro puro, sin
   cursiva, líneas cortas, alineación siempre a la izquierda.
   ------------------------------- */
:root[data-theme="dislexia"] {
  --color-ink: #2b2620;
  --color-board: #3a4a45;
  --color-board-hover: #2f3d39;
  --color-chalk: #FBF3DF;
  --color-chalk-card: #FFFDF6;

  --color-marker: #D9A441;
  --color-marker-hover: #c28f34;
  --color-marker-ink: #2b2100;

  --color-flag: #b5533a;
  --color-board-line: rgba(251, 243, 223, .14);
  --color-chalk-soft: rgba(251, 243, 223, .8);

  --color-primary: var(--color-board);
  --color-primary-hover: var(--color-board-hover);
  --color-primary-text: var(--color-board);
  --color-primary-soft: #eef1ef;
  --color-primary-border: #d6ddda;

  --color-accent: var(--color-marker);
  --color-accent-strong: var(--color-flag);

  /* éxito/error desplazados a azul-verdoso/terracota, evitando rojo/verde */
  --color-success-bg: #E4F0EE;
  --color-success-border: #7FB3A8;
  --color-success-text: #1f4d44;
  --color-danger-bg: #F7E9DC;
  --color-danger-border: #D8A272;
  --color-danger-text: #7a4a1a;
  --color-warning-bg: #FBEFD8;
  --color-warning-border: #E0BE7A;
  --color-warning-text: #6b5320;
  --color-info-bg: #E7EEED;
  --color-info-border: #A9C3BE;
  --color-info-text: #2f4a45;

  --color-bg-page: var(--color-chalk);
  --color-bg-card: var(--color-chalk-card);
  --color-border: #e6ddc4;
  --color-text: var(--color-ink);
  --color-text-muted: #6b6255;
}

html[data-theme="dislexia"] {
  font-size: 118%;
}

html[data-theme="dislexia"] body,
html[data-theme="dislexia"] p,
html[data-theme="dislexia"] li,
html[data-theme="dislexia"] td,
html[data-theme="dislexia"] th,
html[data-theme="dislexia"] label,
html[data-theme="dislexia"] .form-label,
html[data-theme="dislexia"] .form-input,
html[data-theme="dislexia"] .form-textarea {
  line-height: 1.7;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
  text-align: left !important;
}

html[data-theme="dislexia"] p,
html[data-theme="dislexia"] .feedback-textarea {
  max-width: 68ch;
  margin-bottom: 1.4em;
}

html[data-theme="dislexia"] em,
html[data-theme="dislexia"] i {
  font-style: normal;
  font-weight: 700;
}

html[data-theme="dislexia"] .side-menu-links a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.3 Q13 1.2 26 5 T51 4.4 T76 5.3 T99 4.6' stroke='%23D9A441' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* components.css hardcodea el foco en el amarillo del tema por defecto;
   este tema usa un dorado más apagado (#D9A441) para no chocar con el
   fondo crema, así que el resplandor de foco necesita el suyo propio. */
html[data-theme="dislexia"] .form-input:focus,
html[data-theme="dislexia"] .form-textarea:focus,
html[data-theme="dislexia"] input[type="file"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(217, 164, 65, .35);
}

/* -------------------------------
   ALTO CONTRASTE / BAJA VISIÓN — contraste WCAG AAA (≥7:1), texto y
   controles más grandes, bordes sólidos en vez de sombras, foco de
   teclado muy visible. Objetivo opuesto al tema de dislexia (aquí sí
   interesan el blanco y negro puros), por eso van en temas separados.
   ------------------------------- */
:root[data-theme="alto_contraste"] {
  --color-ink: #000000;
  --color-board: #000000;
  --color-board-hover: #1a1a1a;
  --color-chalk: #ffffff;
  --color-chalk-card: #ffffff;

  --color-marker: #FFD400;
  --color-marker-hover: #e6bf00;
  --color-marker-ink: #000000;

  --color-flag: #8a0000;
  --color-board-line: rgba(255, 255, 255, .3);
  --color-chalk-soft: rgba(255, 255, 255, .92);

  --color-primary: #000000;
  --color-primary-hover: #1a1a1a;
  --color-primary-text: #000000;
  --color-primary-soft: #f0f0f0;
  --color-primary-border: #000000;

  --color-accent: var(--color-marker);
  --color-accent-strong: var(--color-flag);

  --color-success-bg: #EAF7EC;
  --color-success-border: #0a6b2b;
  --color-success-text: #0a4d1f;
  --color-danger-bg: #FCE9E9;
  --color-danger-border: #8a0000;
  --color-danger-text: #6b0000;
  --color-warning-bg: #FFF6DA;
  --color-warning-border: #7a5b00;
  --color-warning-text: #5c4600;
  --color-info-bg: #E7F1FB;
  --color-info-border: #0b3d66;
  --color-info-text: #0b3d66;

  --color-bg-page: #ffffff;
  --color-bg-card: #ffffff;
  --color-border: #000000;
  --color-text: #000000;
  --color-text-muted: #3d3d3d;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --font-sans: "Atkinson Hyperlegible", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="alto_contraste"] {
  font-size: 120%;
}

html[data-theme="alto_contraste"] :focus-visible {
  outline: 4px solid #000000;
  outline-offset: 3px;
}

/* sobre la topbar/menú lateral oscuros, un foco negro sería invisible */
html[data-theme="alto_contraste"] .topbar :focus-visible,
html[data-theme="alto_contraste"] .side-menu :focus-visible {
  outline-color: #FFD400;
}

/* components.css hardcodea el foco en un amarillo suave (alpha .3); este
   tema exige el máximo contraste posible, así que el resplandor usa su
   propio amarillo con más opacidad en vez del tono difuminado por defecto. */
html[data-theme="alto_contraste"] .form-input:focus,
html[data-theme="alto_contraste"] .form-textarea:focus,
html[data-theme="alto_contraste"] input[type="file"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 212, 0, .6);
}

html[data-theme="alto_contraste"] .btn,
html[data-theme="alto_contraste"] .form-input,
html[data-theme="alto_contraste"] select.form-input,
html[data-theme="alto_contraste"] .idioma-selector__trigger,
html[data-theme="alto_contraste"] .idioma-selector__item {
  min-height: 44px;
  min-width: 44px;
}

html[data-theme="alto_contraste"] .card,
html[data-theme="alto_contraste"] .card--dashed,
html[data-theme="alto_contraste"] .task-desk__board,
html[data-theme="alto_contraste"] .task-desk__paper,
html[data-theme="alto_contraste"] .result-card,
html[data-theme="alto_contraste"] .feedback-card,
html[data-theme="alto_contraste"] .nota-value {
  box-shadow: none !important;
  border: 2px solid #000000;
}

html[data-theme="alto_contraste"] .side-menu-links a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.3 Q13 1.2 26 5 T51 4.4 T76 5.3 T99 4.6' stroke='%23FFD400' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* -------------------------------
   CORPORATIVO — quinto tema, no es de accesibilidad sino una identidad
   visual alternativa: grafito/neutro con un único acento esmeralda, más
   cercana a una landing SaaS actual (Stripe/Linear/Vercel) que a la
   pizarra verde-cálida por defecto. Reutiliza las mismas fuentes
   (Space Grotesk / Inter), solo cambian paleta, radios y sombras.
   ------------------------------- */
:root[data-theme="corporativo"] {
  --color-ink: #101314;
  --color-board: #16191a;
  --color-board-hover: #212526;
  --color-chalk: #f3f5f4;
  --color-chalk-card: #ffffff;

  --color-marker: #0E7C66;
  --color-marker-hover: #0b6553;
  --color-marker-ink: #ffffff;

  --color-flag: #c13b2e;
  --color-board-line: rgba(243, 245, 244, .12);
  --color-chalk-soft: rgba(243, 245, 244, .72);

  --color-primary: var(--color-board);
  --color-primary-hover: var(--color-board-hover);
  --color-primary-text: var(--color-board);
  --color-primary-soft: #edf3f1;
  --color-primary-border: #d3e3de;

  --color-accent: var(--color-marker);
  --color-accent-strong: var(--color-flag);

  --color-success-bg: #e6f4ef;
  --color-success-border: #0e7c66;
  --color-success-text: #0b5a49;
  --color-danger-bg: #fbeae8;
  --color-danger-border: #c13b2e;
  --color-danger-text: #8a2a20;
  --color-warning-bg: #fff6e0;
  --color-warning-border: #b8860b;
  --color-warning-text: #6b5900;
  --color-info-bg: #eaf1fb;
  --color-info-border: #2f6fb0;
  --color-info-text: #1c4a75;

  --color-bg-page: #f6f7f6;
  --color-bg-card: var(--color-chalk-card);
  --color-border: #e2e5e3;
  --color-text: var(--color-ink);
  --color-text-muted: #5b6360;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(16, 19, 20, .06);
  --shadow-md: 0 4px 10px rgba(16, 19, 20, .08);
  --shadow-lg: 0 10px 24px rgba(16, 19, 20, .12);
}

/* Títulos algo más apretados/seguros, menos "amigable-escolar" */
html[data-theme="corporativo"] h1,
html[data-theme="corporativo"] h2,
html[data-theme="corporativo"] .card-title,
html[data-theme="corporativo"] .hero-heading {
  letter-spacing: -0.01em;
}

/* Hero: fondo grafito con degradado sutil + textura de puntos en CSS puro,
   evitando el gradiente morado-azul de cajón. */
html[data-theme="corporativo"] .landing-hero {
  background-color: #14181a;
  background-image:
    radial-gradient(circle, rgba(243, 245, 244, .08) 1px, transparent 1.5px),
    linear-gradient(160deg, #14181a 0%, #1c2022 55%, #23282a 100%);
  background-size: 20px 20px, 100% 100%;
  background-position: 0 0, 0 0;
}

/* Tarjetas de features: insignia cuadrada de acento en vez de la caja
   grande y suave por defecto — patrón habitual en landings SaaS. */
html[data-theme="corporativo"] .feature-card__preview {
  height: 44px;
  width: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-marker);
  margin-bottom: var(--space-3);
}

html[data-theme="corporativo"] .feature-card__icon {
  width: 22px;
  height: 22px;
  color: #ffffff;
}

html[data-theme="corporativo"] .side-menu-links a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.3 Q13 1.2 26 5 T51 4.4 T76 5.3 T99 4.6' stroke='%230E7C66' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* components.css hardcodea el foco en amarillo (color del marker por
   defecto) y la flecha del select en el verde-pizarra por defecto; con el
   acento esmeralda y la tinta grafito de este tema ambos chocarían. */
html[data-theme="corporativo"] .form-input:focus,
html[data-theme="corporativo"] .form-textarea:focus,
html[data-theme="corporativo"] input[type="file"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(14, 124, 102, .3);
}

html[data-theme="corporativo"] select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23101314' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
}

/* el fondo del modal de gestión de documentos hardcodea el verde-pizarra
   por defecto como tinte oscuro; aquí usamos la tinta grafito del tema */
html[data-theme="corporativo"] .gestionar-modal {
  background: rgba(16, 19, 20, .55);
}

/* -------------------------------
   Corporativo — micro-interacciones
   Elevación/feedback sutil en vez de rebotes; un único acento (esmeralda)
   para los estados de hover. Solo con ratón real y respetando
   prefers-reduced-motion (ver bloque de abajo).
   ------------------------------- */
@media (hover: hover) and (pointer: fine) {
  /* Botones: el estilo base (.btn en components.css) ya anima
     background-color y el translateY(-1px)/(0) de hover/active; aquí solo
     se añade una sombra de elevación a juego con la paleta del tema. */
  html[data-theme="corporativo"] .btn {
    transition: background-color .2s ease, transform .15s ease, box-shadow .15s ease;
  }
  html[data-theme="corporativo"] .btn:hover {
    box-shadow: var(--shadow-sm);
  }
  html[data-theme="corporativo"] .btn:active {
    box-shadow: none;
  }

  /* Tarjetas de landing (features/precios): elevación + borde a color de
     acento, patrón habitual en dashboards/landings SaaS actuales. */
  html[data-theme="corporativo"] .feature-card,
  html[data-theme="corporativo"] .pricing-card {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  html[data-theme="corporativo"] .feature-card:hover,
  html[data-theme="corporativo"] .pricing-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-marker);
    box-shadow: var(--shadow-lg);
  }

  html[data-theme="corporativo"] .feature-card__preview {
    transition: transform .2s ease;
  }
  html[data-theme="corporativo"] .feature-card:hover .feature-card__preview {
    transform: scale(1.06);
  }

  /* Spotlight del hero: sigue el cursor (posición actualizada por
     temas.js vía --spotlight-x/--spotlight-y), apagado hasta el hover. */
  html[data-theme="corporativo"] .landing-hero {
    position: relative;
    overflow: hidden;
  }
  html[data-theme="corporativo"] .landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
    background: radial-gradient(
      420px circle at var(--spotlight-x, 50%) var(--spotlight-y, 0%),
      rgba(14, 124, 102, .18),
      transparent 70%
    );
  }
  html[data-theme="corporativo"] .landing-hero:hover::before {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="corporativo"] .btn,
  html[data-theme="corporativo"] .feature-card,
  html[data-theme="corporativo"] .pricing-card,
  html[data-theme="corporativo"] .feature-card__preview {
    transition-duration: .001ms !important;
  }
  html[data-theme="corporativo"] .feature-card:hover,
  html[data-theme="corporativo"] .pricing-card:hover,
  html[data-theme="corporativo"] .feature-card:hover .feature-card__preview {
    transform: none !important;
  }
  html[data-theme="corporativo"] .landing-hero::before {
    display: none;
  }
}

/* -------------------------------
   OSCURO — sexto tema, no es de accesibilidad sino una identidad visual
   alternativa: extiende el grafito/esmeralda del hero de "Corporativo" a
   toda la página (fondo y tarjetas incluidos), en vez de solo al hero.
   Primer tema realmente de fondo oscuro del sistema (alto_contraste es
   blanco/negro pero sobre fondo claro). Por eso --color-primary,
   --color-primary-text y --color-bg-page/--color-bg-card NO se alían a
   --color-board/--color-chalk como en los demás temas: esos alias dan
   por hecho un fondo de página claro y aquí dejarían texto e insignias
   oscuro-sobre-oscuro.
   ------------------------------- */
:root[data-theme="oscuro"] {
  --color-ink: #E9EDEC;
  --color-board: #0E1112;
  --color-board-hover: #191D1E;
  --color-chalk: #F3F5F4;
  --color-chalk-card: #ffffff;

  --color-marker: #10B981;
  --color-marker-hover: #0EA371;
  --color-marker-ink: #062019;

  --color-flag: #E5534B;
  --color-board-line: rgba(243, 245, 244, .10);
  --color-chalk-soft: rgba(243, 245, 244, .70);

  --color-primary: var(--color-marker);
  --color-primary-hover: var(--color-marker-hover);
  --color-primary-text: #4ADE94;
  --color-primary-soft: rgba(16, 185, 129, .14);
  --color-primary-border: rgba(16, 185, 129, .35);

  --color-accent: var(--color-marker);
  --color-accent-strong: var(--color-flag);

  --color-success-bg: #0F2A22;
  --color-success-border: #1F7A5C;
  --color-success-text: #4ADE94;
  --color-danger-bg: #2E1512;
  --color-danger-border: #8C3229;
  --color-danger-text: #F1948C;
  --color-warning-bg: #2E2410;
  --color-warning-border: #A9791F;
  --color-warning-text: #F2C94C;
  --color-info-bg: #12222E;
  --color-info-border: #2F6FB0;
  --color-info-text: #7CC0F2;

  --color-bg-page: #14181A;
  --color-bg-card: #1C2123;
  --color-border: #2B3133;
  --color-text: var(--color-ink);
  --color-text-muted: #9BA5A2;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, .55);
}

/* Títulos algo más apretados/seguros, igual que en Corporativo */
html[data-theme="oscuro"] h1,
html[data-theme="oscuro"] h2,
html[data-theme="oscuro"] .card-title,
html[data-theme="oscuro"] .hero-heading {
  letter-spacing: -0.01em;
}

/* Degradado grafito + textura de puntos de toda la página (no solo del
   hero, a diferencia de Corporativo): fondo anclado al viewport
   (background-attachment: fixed) para que dé sensación de profundidad
   al hacer scroll en vez de desplazarse con el contenido. */
html[data-theme="oscuro"] body {
  background-color: #14181a;
  background-image:
    radial-gradient(circle, rgba(243, 245, 244, .08) 1px, transparent 1.5px),
    linear-gradient(160deg, #14181a 0%, #1c2022 55%, #23282a 100%);
  background-size: 20px 20px, 100% 100%;
  background-position: 0 0, 0 0;
  background-attachment: fixed, fixed;
}

/* El hero se funde con el fondo de página en vez de ser una tarjeta
   propia: pierde el recuadro (fondo/radio/sombra que sí conservan los
   demás temas vía paginas_publicas.css) para que no haya costura visible
   entre el hero y el resto del contenido, ambos sobre la misma
   superficie continua. */
html[data-theme="oscuro"] .landing-hero {
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* Tarjetas de features: insignia cuadrada de acento, igual que en
   Corporativo, pero con icono oscuro — el esmeralda de este tema es más
   claro y el blanco pierde contraste sobre él. */
html[data-theme="oscuro"] .feature-card__preview {
  height: 44px;
  width: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-marker);
  margin-bottom: var(--space-3);
}

html[data-theme="oscuro"] .feature-card__icon {
  width: 22px;
  height: 22px;
  color: var(--color-marker-ink);
}

/* --color-primary ya no es un tono oscuro (ver arriba): estas dos
   insignias combinan background: var(--color-primary) con
   color: var(--color-chalk) en paginas_publicas.css, lo que aquí
   quedaría claro-sobre-claro. */
html[data-theme="oscuro"] .step-card__number,
html[data-theme="oscuro"] .pricing-card__badge {
  color: var(--color-marker-ink);
}

/* .btn-secondary y la insignia "P1/P2" de preguntas generadas asumen
   "board oscuro sobre página clara" (components.css / alumno_home.css);
   aquí la página también es oscura, así que necesitan su propio color. */
html[data-theme="oscuro"] .btn-secondary {
  color: var(--color-text);
}

html[data-theme="oscuro"] .question-block::before {
  color: var(--color-primary-text);
}

html[data-theme="oscuro"] .side-menu-links a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.3 Q13 1.2 26 5 T51 4.4 T76 5.3 T99 4.6' stroke='%2310B981' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* components.css hardcodea el foco en amarillo y la flecha del select en
   el verde-pizarra por defecto; con el acento esmeralda y el fondo de
   formulario ya oscuro de este tema, ambos necesitan su propio trazo. */
html[data-theme="oscuro"] .form-input:focus,
html[data-theme="oscuro"] .form-textarea:focus,
html[data-theme="oscuro"] input[type="file"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .35);
}

html[data-theme="oscuro"] select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23E9EDEC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
}

/* el fondo del modal de gestión de documentos hardcodea el verde-pizarra
   por defecto como tinte oscuro; aquí usamos la tinta grafito del tema,
   con algo más de alfa porque página y modal son ambos oscuros. */
html[data-theme="oscuro"] .gestionar-modal {
  background: rgba(14, 17, 18, .65);
}

/* -------------------------------
   Oscuro — micro-interacciones
   Mismos valores/duración/easing que Corporativo, reescopeados con la
   paleta de este tema. Solo con ratón real y respetando
   prefers-reduced-motion (ver bloque de abajo).
   ------------------------------- */
@media (hover: hover) and (pointer: fine) {
  html[data-theme="oscuro"] .btn {
    transition: background-color .2s ease, transform .15s ease, box-shadow .15s ease;
  }
  html[data-theme="oscuro"] .btn:hover {
    box-shadow: var(--shadow-sm);
  }
  html[data-theme="oscuro"] .btn:active {
    box-shadow: none;
  }

  html[data-theme="oscuro"] .feature-card,
  html[data-theme="oscuro"] .pricing-card {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  html[data-theme="oscuro"] .feature-card:hover,
  html[data-theme="oscuro"] .pricing-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-marker);
    box-shadow: var(--shadow-lg);
  }

  html[data-theme="oscuro"] .feature-card__preview {
    transition: transform .2s ease;
  }
  html[data-theme="oscuro"] .feature-card:hover .feature-card__preview {
    transform: scale(1.06);
  }

  /* Spotlight de toda la página: sigue el cursor por cualquier zona de
     cualquier página (posición actualizada por temas.js vía
     --page-spotlight-x/--page-spotlight-y, distintas de las
     --spotlight-x/y locales que sigue usando el hero de Corporativo).
     position: fixed cubre el viewport completo sin depender del scroll;
     al pintarse antes que body, la topbar, el menú lateral y el chatbot
     se siguen pintando por encima sin tocar ningún z-index. Se usa
     html::before (no body::before) porque con el menú lateral colapsado
     en escritorio, base.css pinta unas barras verdes de marco con
     body:has(#side-menu.hidden)::before/::after -- al competir por el
     mismo pseudo-elemento, esa regla gana por tener un #id dentro de
     :has() y el brillo desaparecía. Siempre visible (no espera a un
     :hover, porque ahora es un efecto ambiental de página, no de una
     tarjeta). */
  html[data-theme="oscuro"]::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
      600px circle at var(--page-spotlight-x, 50%) var(--page-spotlight-y, 25%),
      rgba(16, 185, 129, .16),
      transparent 70%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="oscuro"] .btn,
  html[data-theme="oscuro"] .feature-card,
  html[data-theme="oscuro"] .pricing-card,
  html[data-theme="oscuro"] .feature-card__preview {
    transition-duration: .001ms !important;
  }
  html[data-theme="oscuro"] .feature-card:hover,
  html[data-theme="oscuro"] .pricing-card:hover,
  html[data-theme="oscuro"] .feature-card:hover .feature-card__preview {
    transform: none !important;
  }
  html[data-theme="oscuro"]::before {
    display: none;
  }
}

/* -------------------------------
   CLARO — séptimo tema, hermano de claridad invertida de "Oscuro": mismo
   acento esmeralda y las mismas reglas estructurales (spotlight de página
   completa, hero fundido con el fondo en vez de tarjeta propia, insignias
   de feature-card, micro-interacciones), pero sobre una paleta de luz en
   vez de oscuridad. No es "Corporativo": Corporativo solo oscurece el
   hero y lo deja como tarjeta separada con su propio spotlight local;
   Claro replica el tratamiento de página completa de Oscuro, solo que
   claro donde Oscuro es oscuro. A diferencia de Oscuro, aquí SÍ tiene
   sentido alinear --color-primary/--color-primary-text a --color-board
   (como en el resto de temas): el comentario de Oscuro explica que esos
   alias asumen un fondo de página claro, y en Claro eso vuelve a ser
   cierto.
   ------------------------------- */
:root[data-theme="claro"] {
  --color-ink: #12181A;
  --color-board: #16191A;
  --color-board-hover: #212526;
  --color-chalk: #F3F5F4;
  --color-chalk-card: #ffffff;

  --color-marker: #10B981;
  --color-marker-hover: #0EA371;
  --color-marker-ink: #062019;

  --color-flag: #E5534B;
  --color-board-line: rgba(243, 245, 244, .10);
  --color-chalk-soft: rgba(243, 245, 244, .70);

  --color-primary: var(--color-board);
  --color-primary-hover: var(--color-board-hover);
  --color-primary-text: var(--color-board);
  --color-primary-soft: rgba(16, 185, 129, .10);
  --color-primary-border: rgba(16, 185, 129, .30);

  --color-accent: var(--color-marker);
  --color-accent-strong: var(--color-flag);

  --color-success-bg: #E6F4EF;
  --color-success-border: #0E7C66;
  --color-success-text: #0B5A49;
  --color-danger-bg: #FBEAE8;
  --color-danger-border: #C13B2E;
  --color-danger-text: #8A2A20;
  --color-warning-bg: #FFF6E0;
  --color-warning-border: #B8860B;
  --color-warning-text: #6B5900;
  --color-info-bg: #EAF1FB;
  --color-info-border: #2F6FB0;
  --color-info-text: #1C4A75;

  --color-bg-page: #F5F7F6;
  --color-bg-card: var(--color-chalk-card);
  --color-border: #DCE3E0;
  --color-text: var(--color-ink);
  --color-text-muted: #5B6360;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(16, 19, 20, .06);
  --shadow-md: 0 4px 10px rgba(16, 19, 20, .08);
  --shadow-lg: 0 10px 24px rgba(16, 19, 20, .12);
}

/* Títulos algo más apretados/seguros, igual que en Oscuro/Corporativo */
html[data-theme="claro"] h1,
html[data-theme="claro"] h2,
html[data-theme="claro"] .card-title,
html[data-theme="claro"] .hero-heading {
  letter-spacing: -0.01em;
}

/* Degradado claro + textura de puntos de toda la página (no solo del hero):
   la versión clara del fondo fijo de Oscuro, con el mismo patrón de puntos
   pero en tinta oscura muy translúcida sobre un gris-verdoso muy suave en
   vez de blanco plano, para no perder la sensación de "misma superficie"
   con Oscuro. */
html[data-theme="claro"] body {
  background-color: #f4f6f5;
  background-image:
    radial-gradient(circle, rgba(18, 24, 26, .06) 1px, transparent 1.5px),
    linear-gradient(160deg, #f8faf9 0%, #eef2f0 55%, #e7ede9 100%);
  background-size: 20px 20px, 100% 100%;
  background-position: 0 0, 0 0;
  background-attachment: fixed, fixed;
}

/* El hero se funde con el fondo de página, igual que en Oscuro */
html[data-theme="claro"] .landing-hero {
  background: none;
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="claro"] .feature-card__preview {
  height: 44px;
  width: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-marker);
  margin-bottom: var(--space-3);
}

html[data-theme="claro"] .feature-card__icon {
  color: var(--color-marker-ink);
}

html[data-theme="claro"] .step-card__number,
html[data-theme="claro"] .pricing-card__badge {
  color: var(--color-marker-ink);
}

html[data-theme="claro"] .side-menu-links a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.3 Q13 1.2 26 5 T51 4.4 T76 5.3 T99 4.6' stroke='%2310B981' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

html[data-theme="claro"] .form-input:focus,
html[data-theme="claro"] .form-textarea:focus,
html[data-theme="claro"] input[type="file"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .30);
}

html[data-theme="claro"] select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2312181A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
}

/* el fondo del modal de gestión de documentos hardcodea el verde-pizarra
   por defecto como tinte oscuro; aquí usamos la tinta grafito del tema */
html[data-theme="claro"] .gestionar-modal {
  background: rgba(18, 24, 26, .45);
}

/* paginas_publicas.css/components.css dan por hecho que .landing-hero tiene
   fondo oscuro propio (--color-board): el kicker, el h1/p del hero y el
   btn-secondary usan chalk/blanco para leerse sobre ese fondo, y
   .hero-trust usa chips translúcidos claros sobre oscuro. Aquí el hero se
   funde con la página (igual que en Oscuro, ver más arriba), pero la
   página es clara, así que todo eso necesita el mismo tratamiento oscuro
   que ya usa el resto de temas fuera del hero (--color-text/--color-border),
   en vez de invertirlo otra vez como hace Oscuro. */
html[data-theme="claro"] .landing-hero__eyebrow {
  color: var(--color-marker);
}

html[data-theme="claro"] .hero-section h1 {
  color: var(--color-text);
}

html[data-theme="claro"] .hero-section p {
  color: var(--color-text-muted);
}

html[data-theme="claro"] .hero-trust li {
  background: rgba(18, 24, 26, .05);
  border-color: rgba(18, 24, 26, .12);
  color: var(--color-text-muted);
}

html[data-theme="claro"] .landing-hero .btn-secondary {
  color: var(--color-text);
  background: transparent;
  border-color: var(--color-border);
}

html[data-theme="claro"] .landing-hero .btn-secondary:hover {
  background: rgba(18, 24, 26, .06);
  border-color: var(--color-primary-border);
}

/* -------------------------------
   Claro — micro-interacciones
   Mismo tratamiento que Oscuro/Corporativo: elevación/feedback sutil,
   un único acento (esmeralda) para hover, spotlight ambiental de página
   completa. Solo con ratón real y respetando prefers-reduced-motion.
   ------------------------------- */
@media (hover: hover) and (pointer: fine) {
  html[data-theme="claro"] .btn {
    transition: background-color .2s ease, transform .15s ease, box-shadow .15s ease;
  }
  html[data-theme="claro"] .btn:hover {
    box-shadow: var(--shadow-sm);
  }
  html[data-theme="claro"] .btn:active {
    box-shadow: none;
  }

  html[data-theme="claro"] .feature-card,
  html[data-theme="claro"] .pricing-card {
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  html[data-theme="claro"] .feature-card:hover,
  html[data-theme="claro"] .pricing-card:hover {
    border-color: var(--color-marker);
    box-shadow: var(--shadow-lg);
  }

  html[data-theme="claro"] .feature-card__preview {
    transition: transform .2s ease;
  }
  html[data-theme="claro"] .feature-card:hover .feature-card__preview {
    transform: scale(1.06);
  }

  /* Igual que en Oscuro: brillo ambiental de página completa que sigue al
     cursor (posición actualizada por temas.js vía
     --page-spotlight-x/--page-spotlight-y), pero con el mismo esmeralda
     muy suave sobre fondo claro en vez de sobre fondo oscuro. */
  html[data-theme="claro"]::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
      600px circle at var(--page-spotlight-x, 50%) var(--page-spotlight-y, 25%),
      rgba(16, 185, 129, .10),
      transparent 70%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="claro"] .btn,
  html[data-theme="claro"] .feature-card,
  html[data-theme="claro"] .pricing-card,
  html[data-theme="claro"] .feature-card__preview {
    transition-duration: .001ms !important;
  }
  html[data-theme="claro"] .feature-card:hover,
  html[data-theme="claro"] .pricing-card:hover,
  html[data-theme="claro"] .feature-card:hover .feature-card__preview {
    transform: none !important;
  }
  html[data-theme="claro"]::before {
    display: none;
  }
}

/* -------------------------------
   Selector de idioma en la topbar
   ------------------------------- */
.idioma-selector-form {
  display: inline-flex;
}

.idioma-selector {
  position: relative;
}

.idioma-selector__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  list-style: none;
  color: var(--color-chalk, #faf8f1);
  border: 1px solid var(--color-board-line, rgba(250, 248, 241, .3));
  border-radius: var(--radius-sm, 8px);
  padding: 6px 12px;
  font-size: var(--text-sm, 0.875rem);
  font-family: var(--font-sans);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.idioma-selector__trigger::-webkit-details-marker,
.idioma-selector__trigger::marker {
  display: none;
  content: none;
}

.idioma-selector__trigger:hover {
  border-color: var(--color-chalk-soft, rgba(250, 248, 241, .6));
  background-color: rgba(255, 255, 255, .06);
}

.idioma-selector__trigger:focus-visible {
  outline: none;
  border-color: var(--color-chalk, #faf8f1);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.idioma-selector__chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform .15s ease;
}

.idioma-selector[open] .idioma-selector__chevron {
  transform: rotate(180deg);
}

.idioma-selector__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: var(--space-2, 8px);
  list-style: none;
  background: var(--color-bg-card);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-topbar, 100);
}

.idioma-selector__item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm, 0.875rem);
  padding: 8px 12px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}

.idioma-selector__item:hover,
.idioma-selector__item:focus-visible {
  background: var(--color-primary-border);
  outline: none;
}

.idioma-selector__item.is-active {
  background: var(--color-accent);
  color: var(--color-chalk, #faf8f1);
  font-weight: 600;
}

.modelo-ia-selector .idioma-selector__current {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* -------------------------------
   Switch claro/oscuro en la topbar
   Alterna solo entre "claro" y "oscuro" -- el resto de temas (pizarra,
   daltonismo, dislexia, alto_contraste, corporativo) siguen viviendo
   únicamente en el selector del perfil (ver perfil.html), este control es
   solo un atajo rápido para los dos temas gemelos. El estado real (qué
   icono queda "encendido") lo decide el servidor en el primer render vía
   la clase .is-dark en base.html (usa tema_activo, evita parpadeo);
   temas.js mantiene la clase sincronizada si el tema cambia desde el
   perfil en la misma pestaña. Vive sobre la topbar, que siempre usa el
   "board" oscuro del tema activo (hasta en los temas claros), así que los
   colores se apoyan en --color-chalk/--color-board-line/--color-marker,
   que ya están pensados para leerse sobre esa superficie oscura en los 7
   temas.
   ------------------------------- */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 52px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--color-board-line, rgba(250, 248, 241, .18));
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.theme-toggle:hover {
  border-color: var(--color-chalk-soft, rgba(250, 248, 241, .6));
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.theme-toggle__icon {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-chalk, #faf8f1);
  opacity: .5;
  transition: opacity .2s ease;
}

.theme-toggle__icon--sun {
  opacity: 1;
}

.theme-toggle.is-dark .theme-toggle__icon--sun {
  opacity: .45;
}

.theme-toggle.is-dark .theme-toggle__icon--moon {
  opacity: 1;
}

.theme-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-marker, #10B981);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform .2s ease;
}

.theme-toggle.is-dark .theme-toggle__thumb {
  transform: translateX(24px);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__thumb,
  .theme-toggle__icon {
    transition-duration: .001ms !important;
  }
}