/* TOKENS DE DISEÑO (versión 3, 07/10/2026: los colores de la marca Bildeit sobre el sistema visual
   del panel de Plentia en tema claro; valores de origen en docs/sistema-visual-plentia.md). Todo
   color, tipografía, espaciado, radio, sombra y tiempo del producto sale de aquí y de ningún otro
   sitio (tests/diseno.test.js). SOLO TEMA CLARO. Al final, los tokens de la web pública (--w-…).

   LA MARCA: --marca (el acento, #C8441C), --marca-hover (#B23A16) y --marca-naranja (#E4572E, solo
   detalles y foco). De ellas salen, con color-mix, el tono pulsado, el borde del botón y el fondo suave.

   Contraste (WCAG 2.1: texto 4,5:1, gráficos y bordes 3:1), MEDIDO el 07/10/2026 con
   scripts/contraste.mjs (lo vigila tests/contraste.test.js):
     texto     #111827  17,74 en tarjeta · 16,95 en panel · 16,06 en hundido · 15,18 en grupo
     texto-2   #4B5563   7,56 · 7,22 · 6,84 · 6,47
     texto-3   #626977   5,52 · 5,29 · 4,99 · 4,72
     botón     blanco sobre #C8441C 4,88 · al pasar #B23A16 5,98 · pulsado #8C3014 8,24
     enlace    #B23A16 (el tono de pasar, para que cumpla en todas las capas) 5,98 en tarjeta ·
               5,72 en panel · 5,42 en hundido · 5,12 en grupo · 5,27 en el fondo suave
     naranja   #E4572E solo detalle y foco: 3,68 en tarjeta · 3,52 en panel (pasa el 3:1 de gráficos)
     estados como texto sobre su fondo suave / sobre tarjeta:
       ok #167647 4,86 / 5,65 · aviso #836404 4,86 / 5,54 · error #C02C1E 4,68 / 5,80 · info #1C66BF 4,65 / 5,67 */

/* GEIST Y GEIST MONO, autoalojadas (nunca de Google Fonts). Sacadas del paquete oficial de Vercel
   (npm «geist» 1.7.2, dist/fonts/…/Geist-Variable.woff2 y GeistMono-Variable.woff2), licencia SIL
   Open Font License 1.1, al lado: assets/fuentes/Geist-OFL.txt. Fuentes variables: un archivo cubre
   todos los pesos. Geist tiene cifras tabulares (tnum): comprobado el 06/10/2026.
   Chakra Petch NO se carga: solo está dentro de los SVG del logotipo, ya pasada a curvas. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fuentes/Geist-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fuentes/GeistMono-Variable.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ── marca de Bildeit (07/10/2026): el acento del panel, su tono al pasar y el naranja de marca.
     El naranja #E4572E es SOLO para detalles (puntos, insignias, gráficos, el foco): nunca para
     texto pequeño sobre blanco (3,68:1). El degradado #FF9D4D → #E4572E → #141414 vive solo en el
     símbolo (favicon e iconos), nunca en el panel. ── */
  --marca: #C8441C;
  --marca-hover: #B23A16;
  --marca-naranja: #E4572E;

  /* ── capas (de abajo arriba): el fondo de detrás del menú, el panel flotante del contenido, las
     tarjetas, lo hundido (campos, carriles, tarjetas dentro de tarjetas) y las teclas (botones
     secundarios). Mismos valores que el panel de Plentia en claro. ── */
  --c-base: #F0F2F1;
  --c-panel: #F9FAF9;
  --c-tarjeta: #FFFFFF;
  --c-hundido: #F2F4F3;
  --c-tecla: #FFFFFF;
  --c-grupo: #EBEEEC;            /* el fondo de un grupo de botones (segmentados, filtros) */
  /* líneas y filos: transparentes sobre cualquier capa */
  --c-linea: rgba(16, 24, 20, 0.08);
  --c-linea-2: rgba(16, 24, 20, 0.15);
  --c-filo-arriba: rgba(16, 24, 20, 0.14);
  --c-filo-abajo: rgba(16, 24, 20, 0.06);
  --c-filo-interior: rgba(16, 24, 20, 0.07);
  --c-reflejo: rgba(255, 255, 255, 1);
  --c-sombra-tecla: rgba(16, 24, 20, 0.10);
  --c-elegida-borde: rgba(16, 24, 20, 0.17);
  --sombra: 0 1px 2px rgba(16, 24, 20, 0.05), 0 10px 30px -18px rgba(16, 24, 20, 0.18);
  --sombra-flota: 0 18px 40px -12px rgba(16, 24, 20, 0.22);
  --sombra-elegida: 0 1px 3px rgba(16, 24, 20, 0.12), 0 1px 1px rgba(16, 24, 20, 0.06);
  --sombra-tarjeta-encima: 0 1px 2px rgba(16, 24, 20, 0.05), 0 14px 32px -16px rgba(16, 24, 20, 0.22);

  /* nombres de antes, que siguen en uso, apuntando a las capas nuevas */
  --c-fondo: var(--c-tarjeta);
  --c-superficie: var(--c-hundido);
  --c-superficie-2: var(--c-grupo);
  --c-borde: var(--c-linea-2);
  --c-borde-fuerte: #858C98;     /* el borde que TIENE que verse (campos): 3,39:1 sobre blanco (WCAG 1.4.11) */

  /* texto */
  --c-texto: #111827;
  --c-texto-2: #4B5563;
  --c-texto-3: #626977;

  /* ── estados: color de relleno (barras, puntos), fondo suave y color como texto (≥ 4,5:1) ── */
  --c-ok-relleno: #1FA463;   --c-ok-fondo: #DDF3E7;     --c-ok: #167647;
  --c-aviso-relleno: #C99A06; --c-aviso-fondo: #FBF0C8; --c-aviso: #836404;
  --c-error-relleno: #E0483A; --c-error-fondo: #FBE1DE; --c-error: #C02C1E;
  --c-info-relleno: #2F7FE0;  --c-info-fondo: #DCEAFB;  --c-info: #1C66BF;
  --c-neutro: #4B5563;

  --c-sombra: rgba(16, 24, 20, 0.10);
  --c-velo: rgba(5, 9, 11, 0.45);
  /* Las series de los gráficos (no dependen de la marca; validadas con el validador de paletas:
     contraste ≥ 3:1 con el fondo y bien distintas también para daltonismo) */
  --c-serie-1: #E4572E;   /* certificado (el naranja de marca, como detalle de gráfico) */
  --c-serie-2: #1FA463;   /* cobrado */
  --c-toast: #111827;
  --c-toast-texto: #F4F3EF;
  --c-toast-filo: rgba(255, 255, 255, 0.08);
  /* puntitos de los botones y barras rellenas */
  --c-puntos: rgba(255, 255, 255, 0.16);
  --c-barra-luz: rgba(255, 255, 255, 0.30);
  --c-barra-filo: rgba(255, 255, 255, 0.22);
  /* el QR tributario: negro sobre blanco siempre, para que se pueda leer */
  --c-qr-modulo: #000000;
  --c-qr-fondo: #FFFFFF;

  /* tipografía (encargo 2B: texto 15-16 px, secundario 13-14 px, nunca menos de 13; títulos 28-32;
     cifras grandes 28-36). Lo comprueba scripts/capturas.mjs en cada pantalla. */
  --f-texto: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-codigo: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-xs: 0.8125rem;   /* 13 px: el mínimo */
  --t-s: 0.875rem;     /* 14 px: secundario */
  --t-m: 0.9375rem;    /* 15 px: texto */
  --t-l: 1.125rem;     /* 18 px: subtítulos */
  --t-xl: 1.875rem;    /* 30 px: título de página */
  --t-cifra: 2rem;     /* 32 px: cifras grandes */
  --t-xxl: 2.75rem;    /* 44 px: titular de la web */
  --t-saludo: 2.25rem; /* 36 px: el saludo de Inicio (Plentia: 30-40 px en su título) */
  --t-decimales: 0.72em; /* los céntimos de una cifra grande, más pequeños (como Plentia) */
  --lh: 1.55;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;
  /* espaciado de letra (Plentia: texto −0,012em, títulos −0,045em, cifras −0,035em) */
  --esp-texto: -0.006em;
  --esp-titulo: -0.03em;
  --esp-cifra: -0.03em;
  --esp-etiqueta: 0.06em;

  /* movimiento: 150-250 ms; con prefers-reduced-motion todo se queda quieto */
  --mov-rapido: 150ms;
  --mov: 200ms;
  --mov-lento: 250ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);

  /* espaciado */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.875rem;
  --e-4: 1.25rem;
  --e-5: 1.75rem;
  --e-6: 2.5rem;
  --e-7: 4rem;
  --e-panel: 10px;     /* el margen del panel flotante del contenido */
  /* la máscara de los filos (un anillo de 1 px): un relleno opaco cualquiera */
  --mascara: linear-gradient(#000000 0 0);
  --mascara-a: #000000;   /* lo que se ve en una máscara de difuminado */

  /* radios (Plentia: panel 22, tarjeta 18, tecla 11, tarjeta dentro de tarjeta 14) */
  --r-s: 6px;
  --r-m: 10px;
  --r-tecla: 11px;
  --r-hijo: 14px;
  --r-l: 18px;
  --r-panel: 22px;
  --r-pastilla: 999px;
  --r-grupo: 12px;       /* el carril de un grupo de botones */
  --r-dentro: 9px;       /* la opción elegida dentro del carril */
  --r-barra: 4px;        /* el extremo de una barra de gráfico */
  --pad-etiqueta: 0 10px 0 9px;
  --pad-tecla: 0 16px;
  --e-carril: 3px;

  /* medidas */
  --ancho-menu: 248px;
  --ancho-menu-plegado: 68px;
  --alto-fila: 3.25rem;   /* 52 px: filas de tabla */
  --seguro-abajo: env(safe-area-inset-bottom, 0px); /* la zona segura del móvil (la barra del iPhone) */
  --alto-etiqueta: 1.5rem; /* 24 px: etiquetas de estado */
  --tam-icono: 1.25rem;
  --tam-punto: 6px;
  --ancho-contenido: 1180px;
  --alto-control: 2.625rem;
  --alto-logo: 1.375rem;       /* 22 px: la palabra en el menú (como la web) */
  --alto-logo-movil: 1.125rem; /* 18 px: la palabra en la barra del móvil */
  --alto-logo-b: 1.5rem;       /* la «b» sola, con el menú plegado */
}

/* Los tonos que salen de la marca. Se calculan en :root y otra vez en cualquier elemento con la
   clase .con-marca (docs/paletas.html enseña ahí la paleta elegida). */
:root, .con-marca {
  --marca-detalle: var(--marca-naranja);
  /* ── acción ── */
  --c-accion: var(--marca);
  --c-accion-fuerte: var(--marca-hover);
  --c-accion-hondo: color-mix(in srgb, var(--marca) 70%, #000000);
  --c-accion-hover: var(--c-accion-fuerte);
  --c-accion-suave: color-mix(in srgb, var(--marca) 9%, #FFFFFF);
  --c-accion-borde: color-mix(in srgb, var(--c-accion-hondo) 55%, transparent);
  --c-accion-texto: #FFFFFF;
  --c-accion-reflejo: rgba(255, 255, 255, 0.26);
  --c-accion-puntos: rgba(255, 255, 255, 0.09);
  --c-accion-canto: rgba(0, 0, 0, 0.18);
  /* el texto en color de marca (enlaces, pestaña activa, cifras destacadas): el tono oscuro */
  --c-enlace: var(--marca-hover);
  --c-enlace-hover: var(--c-accion-hondo);
  --c-detalle: var(--marca-detalle);
  --c-foco: var(--marca-naranja);
  --c-foco-halo: color-mix(in srgb, var(--marca-naranja) 22%, transparent);
}

/* ── LA WEB PÚBLICA (la propuesta aprobada por Unai, docs/web-propuesta/bildeit-web-ligera.html,
   07/10/2026). Mismos valores que la propuesta, con dos cambios de contraste medidos con
   scripts/contraste.mjs: el gris de texto más claro pasa de #86837D (3,78:1 en blanco, no llega a la
   AA) a #6E6B65 (5,31:1 en blanco, 4,82:1 en el gris hormigón), y el día marcado del calendario va
   en el acento #C8441C (4,88:1 con blanco) en vez del naranja #E4572E (3,68:1). Lo usa
   assets/css/sitio.css (la portada, las páginas legales y la 404). ── */
:root {
  --w-papel: #FFFFFF;
  --w-blanco: #FFFFFF;
  --w-negro: #000000;
  --w-hormigon: #F4F4F2;
  --w-tinta: #151515;
  --w-tinta-2: #55534F;
  --w-tinta-3: #6E6B65;
  --w-linea: #E5E3DF;
  --w-linea-fuerte: #CFCCC6;
  --w-naranja-oscuro: #B8401D;
  --w-verde: #1E7A46;
  --w-naranja-suave: #FCEFEA;
  --w-naranja-borde: #F3C9B9;
  --w-naranja-tenue: #FFF8F5;
  --w-verde-suave: #F1F8F4;
  --w-verde-borde: #BFDCCB;
  --w-gris-claro: #FBFAF9;
  --w-boton-borde: #9E3312;
  --w-boton-hover-arriba: #BB3E18;
  --w-boton-hover-abajo: #A23413;
  --w-portada-brillo: #FFE7DD;
  --w-marco-fondo: #F7F6F4;
  --w-punto-ventana: #E3E1DD;
  --w-segmentos: #E9E8E4;
  --w-intro-brillo: #FFF1EB;
  --w-barra-mes: #E9E7E3;
  --w-tinta-sobre-oscuro: #BDBAB4;
  --w-pie-gigante: #EFEDE9;
  --w-cristal: rgba(255, 255, 255, 0.88);
  --w-cristal-2: rgba(255, 255, 255, 0.75);
  --w-reflejo: rgba(255, 255, 255, 0.6);
  --w-blanco-0: rgba(255, 255, 255, 0);
  --w-blanco-10: rgba(255, 255, 255, 0.1);
  --w-boton-reflejo: rgba(255, 255, 255, 0.22);
  --w-boton-sombra: rgba(178, 58, 22, 0.9);
  --w-portada-brillo-2: rgba(255, 231, 221, 0.35);
  --w-halo-naranja: rgba(228, 87, 46, 0.16);
  --w-resplandor: rgba(228, 87, 46, 0.35);
  --w-resplandor-0: rgba(228, 87, 46, 0);
  --w-halo-verde: rgba(30, 122, 70, 0.18);
  --w-halo-verde-0: rgba(30, 122, 70, 0);
  --w-hover-nav: rgba(21, 21, 21, 0.05);
  --w-sombra-cabecera: rgba(21, 21, 21, 0.38);
  --w-sombra-menu: rgba(21, 21, 21, 0.32);
  --w-sombra-movil: rgba(21, 21, 21, 0.4);
  --w-sombra-marco: rgba(21, 21, 21, 0.35);
  --w-sombra-activo: rgba(21, 21, 21, 0.08);
  --w-sombra-hoja: rgba(21, 21, 21, 0.06);
  --w-sombra-segmento: rgba(21, 21, 21, 0.12);
  --w-sombra-widget-1: rgba(21, 21, 21, 0.04);
  --w-sombra-widget-2: rgba(21, 21, 21, 0.22);
  --w-sombra-plan: rgba(21, 21, 21, 0.45);
  --w-sombra-formulario: rgba(0, 0, 0, 0.6);
  --w-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --w-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --w-ancho: 1180px;
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --w-r-circulo: 50%;
  /* márgenes negativos (calc(0 - x) no vale en CSS) */
  --w-e-menos-6: -6px;
  --w-e-menos-13: -13px;
  --w-e-menos-80: -80px;
  --w-e-menos-2-2pc: -2.2%;
  /* tamaños de letra (t), espacios (e) y radios (r) de la propuesta, en píxeles */
  --w-t-clamp-1: clamp(40px,6.6vw,80px);
  --w-t-clamp-2: clamp(17px,1.6vw,20px);
  --w-e-2-2pc: 2.2%;
  --w-t-clamp-3: clamp(32px,4.4vw,52px);
  --w-r-4: 4px;
  --w-e-4: 4px;
  --w-t-clamp-4: clamp(26px,2.8vw,34px);
  --w-e-5: 5px;
  --w-t-clamp-5: clamp(34px,4.4vw,54px);
  --w-e-6: 6px;
  --w-r-6: 6px;
  --w-e-7: 7px;
  --w-r-7: 7px;
  --w-e-8: 8px;
  --w-r-8: 8px;
  --w-r-9: 9px;
  --w-e-9: 9px;
  --w-t-9: 9px;
  --w-e-10: 10px;
  --w-r-10: 10px;
  --w-e-11: 11px;
  --w-r-11: 11px;
  --w-t-11-5: 11.5px;
  --w-e-12: 12px;
  --w-r-12: 12px;
  --w-t-12: 12px;
  --w-t-12-5: 12.5px;
  --w-t-13: 13px;
  --w-r-13: 13px;
  --w-e-13: 13px;
  --w-t-13-5: 13.5px;
  --w-r-14: 14px;
  --w-e-14: 14px;
  --w-t-14: 14px;
  --w-t-14-5: 14.5px;
  --w-t-15: 15px;
  --w-e-15: 15px;
  --w-t-15-5: 15.5px;
  --w-t-17: 17px;
  --w-t-17-5: 17.5px;
  --w-r-18: 18px;
  --w-e-18: 18px;
  --w-t-18: 18px;
  --w-t-18-5: 18.5px;
  --w-t-19: 19px;
  --w-e-20: 20px;
  --w-t-20: 20px;
  --w-r-20: 20px;
  --w-t-21: 21px;
  --w-e-22: 22px;
  --w-r-22: 22px;
  --w-t-22: 22px;
  --w-e-24: 24px;
  --w-t-24: 24px;
  --w-e-26: 26px;
  --w-e-28: 28px;
  --w-t-30: 30px;
  --w-e-30: 30px;
  --w-e-34: 34px;
  --w-e-36: 36px;
  --w-e-44: 44px;
  --w-t-52: 52px;
  --w-e-56: 56px;
  --w-e-64: 64px;
  --w-e-72: 72px;
  --w-e-76: 76px;
  --w-e-80: 80px;
  --w-e-84: 84px;
  --w-r-99: 99px;
  --w-e-112: 112px;
  --w-e-120: 120px;
  --w-e-150: 150px;
  --w-r-999: 999px;
  /* Encargo «a la altura de las referencias» (07/10/2026, docs/web-referencias.md): titulares como
     los mide Kompanion (Geist 300/400, −0,05 em), secciones de 120/40 px (60/20 en el móvil),
     tarjetas de 16 px, la banda oscura del problema en #141414 como Opereit y las pastillas naranjas. */
  --w-t-h1: clamp(48px, 5.6vw, 80px);
  --w-t-h2: clamp(36px, 4.03vw, 58px);
  --w-t-h3: clamp(20px, 1.95vw, 28px);
  --w-t-frase: clamp(34px, 4.6vw, 66px);
  --w-t-numero: clamp(96px, 15vw, 210px);
  --w-t-16: 16px;
  --w-t-40: 40px;
  --w-e-16: 16px;
  --w-e-32: 32px;
  --w-e-40: 40px;
  --w-e-48: 48px;
  --w-e-60: 60px;
  --w-e-96: 96px;
  --w-e-140: 140px;
  --w-e-menos-1: -1px;
  --w-e-menos-12: -12px;
  --w-e-menos-20: -20px;
  --w-e-menos-22: -22px;
  --w-e-menos-28: -28px;
  --w-e-menos-40: -40px;
  --w-e-menos-5: -5px;
  --w-r-16: 16px;
  --w-r-24: 24px;
  --w-ancho-guia: 1320px;
  --w-noche: #141414;
  --w-noche-2: #1E1E1E;
  --w-noche-linea: rgba(255, 255, 255, 0.12);
  --w-noche-texto: #A8A49D;
  --w-noche-cifra: #FF9D4D;
  --w-sombra-guia: rgba(21, 21, 21, 0.18);
  --w-sombra-cta: rgba(21, 21, 21, 0.28);
  --w-velo: rgba(21, 21, 21, 0.55);
  --w-curva: cubic-bezier(.16, 1, .3, 1);
  /* Movimiento de la web (07/10/2026, punto 6.4): una curva y dos duraciones para todo; nada pasa de
     600 ms y todo se apaga con «reducir movimiento». */
  --w-dur: 400ms;
  --w-dur-corta: 200ms;
  --w-dur-larga: 600ms;
  /* El fondo de la portada: luz difusa del naranja de marca (#FF9D4D y #E4572E), sin bordes */
  --w-luz-1: rgba(255, 157, 77, 0.22);
  --w-luz-2: rgba(228, 87, 46, 0.12);
  --w-luz-0: rgba(255, 157, 77, 0);
  --w-marca: #C8441C;
  --w-marca-sombra: rgba(200, 68, 28, 0.28);
}

/* Cifras tabulares (tnum) en tablas, importes y totales: las columnas de dinero quedan alineadas. */
table, .cifra, .resumen-totales, .cifra-tarjeta .valor { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }