/* Variante 4 — misma estética que la 3, con dos temas.
   Dark (por defecto): cobre sobre azul noche.
   Light: la paleta editorial de la variante 1 (papel crema + dorado de marca),
   con la misma tipografía, radios y composición.
   Todo lo que difiere entre temas vive aquí; layout.css y components.css
   no conocen colores literales. */
/* Dark: pizarra verde-petróleo y ámbar, al modo de los dashboards de cocina
   sobre fondo de pizarra. El oro es el único metal en escena; el resto es
   grafito. */
:root,
:root[data-theme="dark"] {
  --accent-rgb: 233, 180, 76;

  --gold: #E9B44C;
  --gold-deep: #F3D48A;
  --gold-pale: rgba(233,180,76,0.14);
  --ink: #F4F6F5;
  --ink-soft: #93A3A5;
  --paper: #16232A;
  --paper-raised: #1B2C33;
  --rule: #2C4149;
  --rule-strong: #46626C;
  --sankey-link: #E9B44C;
  --sankey-node: #E9B44C;
  --gauge-track: #24373F;
  --on-accent: #15222A;

  /* Las tarjetas son casi negras sobre la pizarra: el contraste lo da el
     filete dorado, no el relleno. */
  --card-bg: rgba(14,24,29,0.78);
  --card-blur: blur(3px);
  --modal-backdrop: rgba(6,13,16,0.82);
  --grain-opacity: 0.05;
  --logo-blend: normal;
  --logo-brightness: 1;
  --glow-strength: 1;
  --shadow-soft: 0 2px 10px rgba(0,0,0,0.55), 0 20px 56px rgba(0,0,0,0.45);

  /* Tile de la referencia: el oro entra por la esquina superior izquierda y se
     apaga en grafito hacia la inferior derecha. El texto va claro encima. */
  --brass: linear-gradient(125deg, #E3AE49 0%, #B78A34 32%, #6A6650 62%, #2B3439 100%);
  --card-edge: rgba(233,180,76,0.55);
  /* Superficie de las tarjetas interiores (roles, tramos, mejoras). */
  /* La llave va casi blanca: sobre pizarra el oro se confundía con las cintas. */
  --brace: #F2F5F4;
  --tile-bg: rgba(10,18,22,0.45);
  --tile-bg-soft: rgba(10,18,22,0.28);

  /* Acentos por categoría: hues desaturados alrededor del cobre de marca.
     Sirven para distinguir, no para decorar — nunca saturados. */
  /* Acentos vivos al modo de los chips de estado del panel: saturados pero
     usados en trazo fino, nunca como relleno grande. */
  --c-1: #4C8DFF;   /* azul     */
  --c-2: #3FCF8E;   /* verde    */
  --c-3: #A77BFF;   /* violeta  */
  --c-4: #E9B44C;   /* ámbar    */
  --c-5: #35C4D7;   /* cian     */
  --c-6: #FF5C7A;   /* rojo     */
  --c-7: #FF9F45;   /* naranja  */
  --c-8: #E86BC8;   /* magenta  */
}

:root[data-theme="light"] {
  --accent-rgb: 168, 135, 74;

  --gold: #A8874A;
  --gold-deep: #8A6C36;
  /* Blanco: en claro nada se tiñe de crema. El resalte lo llevan el filete
     dorado y la tinta, no un relleno de color. */
  --gold-pale: #FFFFFF;
  /* Gris oscuro neutro, no negro ni pardo: es la tinta de la referencia. */
  --ink: #333A45;
  --ink-soft: #6B7280;
  --paper: #FFFFFF;
  --paper-raised: #FFFFFF;
  --rule: #E8E8E8;
  --rule-strong: #CFCFCF;
  --sankey-link: #A8874A;
  --sankey-node: #A8874A;
  /* Riel de barras y gauges: no puede ser blanco o el tramo vacío desaparece. */
  --gauge-track: #ECECEC;
  --on-accent: #FFFFFF;

  --card-bg: #FFFFFF;
  --card-blur: none;
  --modal-backdrop: rgba(28,26,23,0.5);
  --grain-opacity: 0.02;
  --logo-blend: normal;
  --logo-brightness: 1;
  --glow-strength: 0;   /* en claro los glows se apagan: restarían nitidez */
  --shadow-soft: 0 1px 2px rgba(28,26,23,0.04), 0 8px 24px rgba(28,26,23,0.07);
  --brass: linear-gradient(125deg, #C9A85C 0%, #A8874A 38%, #7A6E52 72%, #4A463C 100%);
  --card-edge: rgba(168,135,74,0.45);
  /* En claro la tarjeta es papel blanco sobre el crema del lienzo: el mismo
     recurso (una superficie que se despega del fondo) sin virar a gris. */
  --brace: #6B6455;
  --tile-bg: #FFFFFF;
  --tile-bg-soft: #FFFFFF;

  /* Mismos hues, oscurecidos para leerse sobre papel crema. */
  /* Los mismos hues, bajados de brillo para leerse sobre papel crema. */
  --c-1: #2F6ED8;
  --c-2: #1E9E6A;
  --c-3: #7C4FD1;
  --c-4: #A8874A;
  --c-5: #17879A;
  --c-6: #D23B5C;
  --c-7: #D2761A;
  --c-8: #B93F98;
}

/* El lienzo del tema claro: un degradado en diagonal, del azul claro de la
   esquina superior izquierda al rosado de la inferior derecha, abierto en
   blanco por el centro para que el texto siempre caiga sobre zona limpia.
   Solo el lienzo: las tarjetas siguen blancas y se recortan encima.
   Va fijo al viewport, así el tinte no se desplaza al hacer scroll. */
:root[data-theme="light"] body,
:root[data-theme="light"] .stage {
  background-color: #FFFFFF;
  background-image: linear-gradient(135deg, #f0f8ff 0%, #f2f7fd 22%, #FFFFFF 50%, #fffbfd 78%, #ffeff8 100%);
  background-attachment: fixed;
}
/* El velo dorado del encabezado sí se queda apagado: sobre el degradado
   sumaría un tercer tinte. */
:root[data-theme="light"] .masthead { background-image: none; }
:root[data-theme="light"] body::before { display: none; }

/* Los menús no traen fondo propio: dejan pasar el degradado del lienzo —así el
   fondo se lee como una sola pieza continua— y solo lo oscurecen con un velo
   negro que se desvanece hacia el borde interior. Es sombra, no color. */
:root[data-theme="light"] .site-nav {
  background: transparent;
  backdrop-filter: blur(2px);
}
:root[data-theme="light"] .site-topbar {
  background: transparent;
  backdrop-filter: blur(2px);
}
/* Los desplegables siguen opacos: flotan sobre el contenido y con velo se
   leería la página por debajo. */

/* Puertas y formulario de la portada: el relleno pasa a blanco; el filete
   dorado del borde se queda, que es de donde sale su carácter. */
:root[data-theme="light"] .door,
:root[data-theme="light"] .access {
  background: var(--paper-raised);
}

/* --gold-pale queda blanco, así que el hover perdería su acuse. Se lo devuelve
   un gris neutro: no tiñe, pero el puntero sigue sabiendo dónde está. */
:root[data-theme="light"] .site-nav__item:hover,
:root[data-theme="light"] .site-menubar__col li:hover,
:root[data-theme="light"] .filter-option:hover,
:root[data-theme="light"] .rep-tabs__btn:hover,
:root[data-theme="light"] .method-option:hover:not(.is-disabled),
:root[data-theme="light"] .btn--ghost:hover {
  background: #F2F2F2;
}

/* El activo se marca con un velo negro muy tenue en vez de --gold-pale, que en
   claro es blanco: sobre el degradado del lienzo el relleno se leía igual que
   el fondo. Solo en claro; el oscuro conserva su dorado. */
:root[data-theme="light"] .rep-tabs__btn.is-active,
:root[data-theme="light"] .site-nav__item.is-active {
  background: #0000000a;
}

/* Tema claro: toda la letra va en gris oscuro. El oro se retira del texto y se
   queda en lo que no es letra —filetes, bordes, sellos, gauges, cintas—, más
   los estados (hover y activo), que sin él perderían su acuse.
   Se resuelve redefiniendo los tokens dorados para los descendientes de <body>,
   no elemento por elemento: así cubre las ~85 reglas que pintan texto con
   --gold sin tocar ninguna, y sin alcanzar los usos en borde o relleno, que
   leen los tokens desde :root. */
:root[data-theme="light"] body :is(h1, h2, h3, h4, h5, h6, p, span, li, a, td, th,
    strong, b, em, i, small, label, legend, figcaption, dt, dd, blockquote, cite):not(
    .btn, .btn *, .seal, .seal *, .badge, .badge *, .score-chip, .toast,
    .rep-cta, .rep-cta *) {
  --gold: #333A45;
  --gold-deep: #333A45;
}
/* Los estados recuperan el oro: es la única señal que les queda. El :not() de
   arriba les gana en especificidad, así que estos selectores la igualan
   repitiendo :root — sin él, el activo del menú se quedaba gris. */
:root:root[data-theme="light"] body :is(a, li, button, .rep-tabs__btn, .site-nav__item):is(:hover, :focus-visible),
:root:root[data-theme="light"] body :is(.is-active, .is-on, .is-top, .is-alcance),
:root:root[data-theme="light"] body :is(.is-active, .is-on, .is-top) :is(span, strong, b, svg) {
  --gold: #A8874A;
  --gold-deep: #8A6C36;
}

/* El icono del menú va en blanco fijo, pensado para la pizarra oscura: sobre el
   lienzo blanco desaparecería. En claro toma el color de su propio item. */
:root[data-theme="light"] .site-nav__icon { color: currentColor; }

/* Escalas y tipografía: idénticas en ambos temas. */
:root {
  --radius: 22px;
  --radius-sm: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  /* Una sola familia en toda la interfaz, al modo de la referencia: la sans
     geométrica lleva también los títulos, que se distinguen por peso y cuerpo
     —no por cambio de familia. Aplica a los dos temas. */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-title: 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'Manrope', ui-monospace, monospace;
}

/* La sans necesita más peso y menos tracking que la serif para pesar igual en
   un título. Se corrige aquí, en un sitio, y no en las cuarenta reglas que
   declaran --font-display. Aplica a los dos temas. */
/* Solo el título de página, nombrado por clase. Por etiqueta (h1, h2, h3) la
   regla barría también los rótulos del menú y los títulos de tarjeta, que son
   h2 y tienen su propio tamaño.
   Van prefijadas con :root porque tokens.css carga antes que las demás hojas:
   sin ese punto extra de especificidad, el font-size que declara layout.css
   —o informe.css— gana por orden de aparición y el título no crece. */
:root :is(.dash-title, .rep-head__title, .rep-perfil-etiqueta,
    .rep-portada__titulo, .rep-cta__titulo) {
  font-size: 55px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
@media (max-width: 760px) {
  :root :is(.dash-title, .rep-head__title, .rep-perfil-etiqueta,
    .rep-portada__titulo, .rep-cta__titulo) { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}