/* Celosía — subconjunto curado para Webcentros (Fase B, Tarea 2.1).
   Fuente: .claude/celosia/celosia.css (sistema de diseño Celosía, vendored,
   no se edita). Este fichero NO es una copia completa: es un subconjunto
   deliberado, elegido para dejar intacta la capa estructural de Bootstrap
   (grid, navbar, offcanvas, breakpoints) mientras se resuelve el foco
   visible y el salto de bloque — ver sdd/celosia-phase-b/design (R4, R8).

   === Qué entra y por qué ===
   - El bloque de tokens generado (:root) — fuente única de verdad para
     --ce-*, igual que en el fichero vendored.
   - :focus-visible / :focus:not(:focus-visible) — el anillo doble base.
     La versión que REALMENTE gana a Bootstrap (especificidad (0,4,0)) vive
     en celosia-bootstrap.css (Tarea 2.3); aquí solo el primitivo (0,1,0).
   - .ce-skip — el enlace de salto al contenido.
   - El bloque forced-colors, pero solo su regla de foco.

   === Qué NO entra y por qué (deltas frente al fichero vendored) ===
   - html{}, h1..h4{}, p,li{max-width:70ch} — el reset tipográfico. Estas
     reglas colisionan con la maquetación estructural de Bootstrap:
     p,li{max-width:70ch} deja las <li> de navegación y migas de pan
     comprimidas como si fueran prosa (R4), y ese ajuste de tipografía
     pertenece a la reescritura completa de site.css (Tarea 6), no a este
     parche de accesibilidad de esqueleto.
   - .ce-field, .ce-label, .ce-hint, .ce-input, .ce-textarea, .ce-error,
     .ce-error-summary, .ce-table, .ce-sr-only — la migración de marcado a
     estos componentes canónicos de Celosía sigue fuera de alcance (ver
     "Out of scope" en sdd/celosia-phase-b/tasks); el sitio sigue usando el
     marcado de Bootstrap tal cual.
   - a{}, el reset de enlaces (subrayado, visited) — mismo motivo: parte de
     la reescritura de site.css (Tarea 6), no del esqueleto.
   - *,*::before,*::after{box-sizing:border-box} y body{margin:0} — el
     reset mínimo del vendored. Bootstrap ya aplica box-sizing:border-box y
     gestiona los márgenes del body; añadirlo aquí no aporta nada y amplía
     la superficie de auditoría sin necesidad.
   - .ce-btn, .ce-notice, .ce-tag, .ce-card, .ce-hero — YA NO son una simple
     exclusión de este fichero (Fase D, sdd/celosia-componentes, design
     #348 AD-1): viven en public/assets/css/celosia-componentes.css,
     project-owned, cargado en el cascade DESPUÉS de celosia-bootstrap.css
     y ANTES de site.css. Cada uno se define en la misma unidad de trabajo
     que su primer adoptador (AD-5) — no todos existen todavía. `.ce-btn` y
     `.ce-notice` sí están definidos en el celosia.css vendored, pero con
     deltas intencionadas frente a esa versión (p.ej. `.ce-notice` pierde
     la barra lateral coloreada por severidad — AD-6); `.ce-tag` y
     `.ce-hero` son huecos reales del sistema de diseño vendored, sin
     definición previa en ningún sitio. Ninguno se redeclara aquí — este
     fichero sigue siendo solo tokens :root + el primitivo de foco/skip.
   - #ce-icon-error — NO está definido en el celosia.css vendored (hueco
     del propio sistema de diseño). No se usa ni se define aquí.
   - .ce-btn { border-color: ButtonText; } dentro de forced-colors — depende
     de .ce-btn, que vive en celosia-componentes.css (ver arriba).

   === Deltas intencionadas dentro de lo que SÍ entra ===
   1. La regla forced-colors se re-autoriza con la especificidad repetida
      (0,4,0) — :focus-visible × 4 — porque en 2.3 el anillo se reescribe a
      esa misma especificidad para ganarle a Bootstrap; con especificidad
      simple (0,1,0) esta regla perdería silenciosamente contra 2.3's reset.
      Design §2b / discovery "Bootstrap 5.3.8 focus-reset enumeration".
   2. .ce-skip usa background: var(--ce-color-semantic-action) y
      color: var(--ce-color-semantic-text-on-brand) en vez de
      focus.inner/neutral-900 (el par del vendored). Motivo: ese par de
      foco se invierte en modo oscuro (Tarea 7, D1) y con la inversión
      background/color del vendored quedaría casi negro sobre casi negro.
      El par action/text-on-brand está verificado en las dos polaridades
      por la matriz de contraste. Design §4c D1 / ADR-B07.
   3. Se añaden los tripletes -rgb de los neutrales (--ce-color-neutral-*-rgb),
      autoría manual, ausentes en el bloque generado del vendored. Bootstrap
      compone rgba(var(--bs-*-rgb), α) en varias reglas del puente (Tarea 4b)
      y CSS no puede derivar un triplete RGB de una propiedad hex — no hay
      forma de generarlos solo con CSS. Design §3d / ADR-B04 (mismo motivo,
      aplicado aquí a los neutrales estáticos en vez de a la marca dinámica).

   Los --ce-color-brand-* de abajo son el valor por defecto estático
   (verde-celosia, igual que el vendored): actúan de "fondo" hasta que la
   Tarea 4a inyecte el bloque <style> por petición con el preset del centro,
   que gana por orden de aparición en el documento (misma especificidad
   (0,1,0), va después en el <head>). Ver design §3f. */

:root {
  /* === TOKENS GENERADOS — copia fiel de .claude/celosia/celosia.css, no editar a mano === */
  /* color.brand (valor por defecto: verde-celosia; Tarea 4a lo sobreescribe por petición) */
  --ce-color-brand-50: #E8F3EE;
  --ce-color-brand-100: #C6E2D6;
  --ce-color-brand-200: #8FC7AF;
  --ce-color-brand-300: #5AAB89;
  --ce-color-brand-400: #2F8E68;
  --ce-color-brand-500: #1B7454;
  --ce-color-brand-600: #155C43;
  --ce-color-brand-700: #104534;
  --ce-color-brand-800: #0B2F24;
  --ce-color-brand-900: #071D16;
  /* color.neutral */
  --ce-color-neutral-0: #FFFFFF;
  --ce-color-neutral-50: #F6F7F8;
  --ce-color-neutral-100: #EDEFF1;
  --ce-color-neutral-200: #DCE0E4;
  --ce-color-neutral-300: #C2C8CF;
  --ce-color-neutral-400: #868E97;
  --ce-color-neutral-500: #69727C;
  --ce-color-neutral-600: #5A626C;
  --ce-color-neutral-700: #414851;
  --ce-color-neutral-800: #2A2F36;
  --ce-color-neutral-900: #15181C;
  /* color.state */
  --ce-color-state-success: #1B7A4B;
  --ce-color-state-warning: #8A5A00;
  --ce-color-state-danger: #C0392F;
  --ce-color-state-info: #1B5FA8;
  /* color.focus */
  --ce-color-focus-inner: #FFBF00;
  --ce-color-focus-outer: #15181C;
  /* color.chart */
  --ce-color-chart-1: #0F5A96;
  --ce-color-chart-2: #C04A00;
  --ce-color-chart-3: #00785C;
  --ce-color-chart-4: #8E4A78;
  --ce-color-chart-5: #2A2F36;
  /* color.semantic */
  --ce-color-semantic-text-primary: var(--ce-color-neutral-900);
  --ce-color-semantic-text-secondary: var(--ce-color-neutral-500);
  --ce-color-semantic-text-on-brand: var(--ce-color-neutral-0);
  --ce-color-semantic-surface: var(--ce-color-neutral-0);
  --ce-color-semantic-surface-sunken: var(--ce-color-neutral-50);
  --ce-color-semantic-border: var(--ce-color-neutral-400);
  --ce-color-semantic-border-subtle: var(--ce-color-neutral-200);
  --ce-color-semantic-action: var(--ce-color-brand-600);
  --ce-color-semantic-action-hover: var(--ce-color-brand-700);
  /* Color del anillo de foco: por defecto sigue a semantic-action, pero es un
     token APARTE para que los 4 contextos de fondo de marca fija (más abajo)
     puedan reasignarlo sin arrastrar --ce-color-semantic-action, del que
     también depende el fondo de .ce-btn (celosia-componentes.css). Reasignar
     ahí semantic-action directamente pintaba el fondo del botón de blanco
     sobre texto ya blanco (--ce-color-semantic-text-on-brand) -- botones con
     icono invisibles en widget-custom, bug real detectado en producción. */
  --ce-color-focus-ring: var(--ce-color-semantic-action);
  --ce-color-semantic-action-danger: var(--ce-color-state-danger);
  --ce-color-semantic-link: var(--ce-color-brand-600);
  --ce-color-semantic-link-visited: var(--ce-color-brand-800);
  /* --ce-color-semantic-link-rgb: DELTA, W10 fix (open item 1, apply-progress).
     --bs-link-color-rgb (celosia-bootstrap.css) apuntaba directamente a
     var(--ce-color-brand-600-rgb), sin pasar por la capa semántica —
     al contrario que --bs-link-color, que SÍ referencia
     --ce-color-semantic-link y por tanto ya se reapunta solo en oscuro
     (bloque de abajo). Resultado: en oscuro, --ce-color-semantic-link
     saltaba a brand-300 pero su triplete -rgb seguía anclado a brand-600
     -- ~2.56:1 sobre superficie oscura, confirmado en centro/index.php
     .centro-enlace. Se cierra el hueco añadiendo el mismo alias semántico
     para el triplete, reutilizando el patrón -rgb ya establecido arriba
     para los neutrales (línea ~171): ningún hex nuevo, solo delega en el
     triplete -rgb que cada preset YA genera para sus 10 pasos de marca. */
  --ce-color-semantic-link-rgb: var(--ce-color-brand-600-rgb);
  /* space */
  --ce-space-0: 0;
  --ce-space-1: 0.25rem;
  --ce-space-2: 0.5rem;
  --ce-space-3: 0.75rem;
  --ce-space-4: 1rem;
  --ce-space-5: 1.5rem;
  --ce-space-6: 2rem;
  --ce-space-7: 3rem;
  --ce-space-8: 4rem;
  /* font */
  --ce-font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ce-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ce-font-size-xs: 0.75rem;
  --ce-font-size-sm: 0.875rem;
  --ce-font-size-md: 1rem;
  --ce-font-size-lg: 1.25rem;
  --ce-font-size-xl: 1.5rem;
  --ce-font-size-2xl: 2rem;
  --ce-font-size-3xl: 2.5rem;
  --ce-font-weight-regular: 400;
  --ce-font-weight-medium: 500;
  --ce-font-weight-bold: 700;
  --ce-font-leading-tight: 1.25;
  --ce-font-leading-normal: 1.5;
  --ce-font-leading-loose: 1.7;
  /* size */
  --ce-size-touch-min: 24px;
  --ce-size-touch-comfortable: 44px;
  --ce-size-measure: 70ch;
  --ce-size-border-width: 1px;
  --ce-size-border-width-strong: 2px;
  --ce-size-focus-ring: 3px;
  --ce-size-radius-sm: 2px;
  --ce-size-radius-md: 4px;
  /* duration */
  --ce-duration-fast: 120ms;
  --ce-duration-normal: 200ms;
  /* === FIN TOKENS GENERADOS === */

  /* === DELTA — tripletes -rgb de los neutrales, autoría manual (ver nota arriba) === */
  --ce-color-neutral-0-rgb: 255,255,255;
  --ce-color-neutral-50-rgb: 246,247,248;
  --ce-color-neutral-100-rgb: 237,239,241;
  --ce-color-neutral-200-rgb: 220,224,228;
  --ce-color-neutral-300-rgb: 194,200,207;
  --ce-color-neutral-400-rgb: 134,142,151;
  --ce-color-neutral-500-rgb: 105,114,124;
  --ce-color-neutral-600-rgb: 90,98,108;
  --ce-color-neutral-700-rgb: 65,72,81;
  --ce-color-neutral-800-rgb: 42,47,54;
  --ce-color-neutral-900-rgb: 21,24,28;

  /* === DELTA — tokens de geometría de componentes, autoría manual, Fase D
     (sdd/celosia-componentes). No están en el celosia.css vendored: son
     huecos reales del propio sistema de diseño (proposal #346 / design
     #348 AD-3), rellenados con valores reales de Mística
     (github.com/Telefonica/mistica-web), no inventados en el sitio de uso
     (hard rule 1). --ce-size-radius-md (4px, arriba) no se toca: ya
     coincide con el radio de botón de Mística, cross-validación entre
     ambos sistemas. */
  --ce-size-radius-container: 8px;  /* Mística defaultBorderRadiiConfig.container (defaults.tsx) — tarjeta, aviso, campo */
  --ce-size-radius-tag: 24px;       /* Mística defaultBorderRadiiConfig.tag (defaults.tsx) — etiqueta de solo lectura, ≠ chip (16px, sin punto de uso) */
  --ce-size-radius-full: 999px;     /* Mística defaultBorderRadiiConfig.indicator/bar (defaults.tsx) */
  --ce-size-hero-min: 400px;        /* Mística hero.css.ts — min-height por debajo del breakpoint de escritorio */
  --ce-size-hero-min-lg: 460px;     /* Mística cover-hero.css.ts — min-height en/sobre el breakpoint de escritorio */
  --ce-size-hero-measure: 75%;      /* Mística hero.css.ts — ancho del contenido dentro del hero */
  --ce-size-border-width-medium: 1.5px; /* Mística button.css.ts, const borderSize — usado por .ce-btn--icon (W6). Overrule de design #348 AD-4 (que reutilizaba border-width-strong, 2px): spec #347 exige 1.5px literal y esa es la constante real de Mística, uniforme en todas las variantes de botón, sin excepción para el icono — no un valor inventado en el sitio de uso (hard rule 1). */
}

/* ---------- Modo oscuro (Tarea 7, design §4) ---------- */
/* Reasigna los alias semánticos --ce-color-semantic-* y el anillo de foco
   --ce-color-focus-* a otros pasos de la MISMA escala ya verificada
   (marca 50..900 por preset, neutral fija) -- no son colores nuevos
   "inventados": design §4b demuestra que el modo oscuro es REAPUNTAR
   alias, no recolorear (ADR-B05). Cero literales nuevos aquí salvo los
   cuatro de color.state y el override de action-danger, documentados
   como deltas propias de este repo frente al fichero vendored (igual
   precedente que las tripletas -rgb de arriba y el .ce-skip de abajo).

   Decisión del propietario del producto (Fase B, Tarea 7, sesión de
   apply): escala oscura COMPLETA para las 7 paletas, no solo los ejes que
   ya se consumen hoy -- rechaza la opción D2-a de design ("escatimar":
   dejar color.state.* sin versión oscura porque hoy no se renderiza en
   ningún .ce-notice/.ce-error) y adopta D2-b ("cuatro literales oscuros
   propios, verificados"). Ver discovery "Celosía dark mode: focus ring is
   polarity-specific, state.* has no dark value" y design §4c/§4d. */
@media (prefers-color-scheme: dark) {
  :root {
    /* --- Superficie y texto --- */
    --ce-color-semantic-surface: var(--ce-color-neutral-800);
    /* Invertida A PROPÓSITO: "hundida" es más OSCURA que la superficie en
       oscuro (neutral-900 < neutral-800 en luminancia), al revés que en
       claro (neutral-50 > neutral-0). Design §4b, fila surface-sunken. */
    --ce-color-semantic-surface-sunken: var(--ce-color-neutral-900);
    --ce-color-semantic-text-primary: var(--ce-color-neutral-50);
    /* neutral-300, NO neutral-400: neutral-400 da solo 4.06:1 sobre
       neutral-800 -- insuficiente para texto secundario (mínimo 4.5:1).
       neutral-400 SÍ sigue sirviendo para bordes de control, que solo
       necesitan 3:1 -- ver la nota de --ce-color-semantic-border abajo. */
    --ce-color-semantic-text-secondary: var(--ce-color-neutral-300);
    /* --ce-color-semantic-border NO se redeclara: neutral-400 es el único
       neutral de la escala que supera 3:1 en las DOS polaridades
       (3.32:1 sobre blanco, 4.06:1 sobre neutral-800) -- design §4b /
       discovery, punto 2. Se hereda el valor de claro sin cambios. */
    --ce-color-semantic-border-subtle: var(--ce-color-neutral-700);

    /* --- Marca: reapuntada a pasos más CLAROS de la misma escala por
       petición (la Tarea 4a ya inyecta brand-50..900 completos por
       preset en cada respuesta; aquí solo se referencian pasos que ya
       existen, cero hex nuevos). Peor caso verificado entre las 7
       paletas: link/action 4.61:1 (granate) -- design §4b. --- */
    --ce-color-semantic-link: var(--ce-color-brand-300);
    --ce-color-semantic-link-visited: var(--ce-color-brand-200);
    /* -rgb del alias de arriba, W10 fix (open item 1): mismo paso de marca
       (brand-300) que --ce-color-semantic-link en esta misma regla, ahora
       en su triplete -rgb. Cierra el hueco de --bs-link-color-rgb. */
    --ce-color-semantic-link-rgb: var(--ce-color-brand-300-rgb);
    --ce-color-semantic-action: var(--ce-color-brand-300);
    --ce-color-semantic-action-hover: var(--ce-color-brand-200);
    /* Se invierte: en claro es neutral-0 (blanco) sobre marca oscura; en
       oscuro la marca (brand-300) ya es clara, así que el texto pasa a
       neutral-900 -- peor caso 6.09:1 (granate). Design §4b.
       ⚠ action-danger NO usa este alias en oscuro -- ver el override
       explícito más abajo y su nota. */
    --ce-color-semantic-text-on-brand: var(--ce-color-neutral-900);

    /* --- Anillo de foco: POLARIDAD INVERTIDA respecto al modo claro
       (design §4c D1 / ADR-B07). En claro, focus.outer (casi negro)
       garantiza 3:1 contra fondos claros; sobre neutral-800 da solo
       1.32:1 -- invisible. El anillo exterior toca la PÁGINA (box-shadow)
       y el interior toca el ELEMENTO (outline), así que el exterior debe
       contrastar con la página: en oscuro se intercambian sin literales
       nuevos (13.47:1 y 17.81:1 respectivamente).
       ⚠ Esta es la pieza que design marcó como "solo demostrable en
       navegador, no solo sobre el papel" (riesgo R6) -- verificada esta
       sesión con Playwright/Edge emulando prefers-color-scheme:dark, ver
       sdd/celosia-phase-b/apply-progress. */
    --ce-color-focus-outer: var(--ce-color-neutral-0);
    --ce-color-focus-inner: var(--ce-color-neutral-900);

    /* --- Estado: los cuatro únicos literales NUEVOS de este bloque.
       color.state.* no admite reasignación: no hay ningún paso más claro
       de rojo/verde/ámbar/azul en tokens.json (vendored, ADR-006, no
       editable) que supere 4.5:1 sobre neutral-800 -- el literal original
       da 2.1-2.5:1 en los cuatro casos. Calculados aclarando cada tono en
       HSL hasta cruzar 4.5:1 sobre neutral-800 CON margen, verificados a
       mano y con scripts/verify_presets.py --dark (DARK_CHECKS): */
    --ce-color-state-success: #2FB374; /* 5.02:1 sobre superficie oscura */
    --ce-color-state-warning: #D6900A; /* 5.04:1 sobre superficie oscura */
    --ce-color-state-danger:  #E4837A; /* 5.02:1 sobre superficie oscura */
    --ce-color-state-info:    #5FA0E8; /* 4.93:1 sobre superficie oscura */

    /* --- action-danger: DESACOPLADO a propósito de --ce-color-state-danger
       de arriba (design §4c D3 -- "action-danger rompe el text-on-brand
       compartido"). Su único consumidor real hoy es el fondo SÓLIDO de
       .btn-danger (celosia-bootstrap.css), que necesita seguir siendo un
       rojo saturado para leerse como "peligro" con texto claro encima; si
       heredara el state-danger de arriba (aclarado para ser legible COMO
       TEXTO sobre la superficie, no para ser fondo de botón), el botón
       perdería su lectura como advertencia. Se mantiene el MISMO literal
       que en claro (#C0392F, sin aclarar): con texto blanco da 5.43:1 ✓;
       con el text-on-brand genérico de arriba (invertido a neutral-900,
       casi negro, en oscuro) solo da 3.28:1 ✗ -- por eso
       celosia-bootstrap.css sobreescribe el color de texto de .btn-danger
       a neutral-0 explícitamente en su propio bloque @media, en vez de
       depender del alias text-on-brand para ese único botón. */
    --ce-color-semantic-action-danger: #C0392F;
  }
}

/* ---------- Foco: anillo sencillo (primitivo base, (0,1,0)) ---------- */
/* Decisión explícita del propietario (sustituye al anillo doble negro+ámbar
   estilo GOV.UK, que garantizaba 3:1 sobre CUALQUIER fondo -- ver
   --ce-color-focus-inner/-outer, verificados por scripts/verify_presets.py
   contra "surface"/"surface-sunken" para las 7 paletas): un único anillo en
   el color de acción de marca, más integrado visualmente, a cambio de asumir
   que sobre fondos de marca fijos (.ce-hero--marca, .site-footer,
   .site-page-header, .widget-custom-banner) el contraste puede bajar --
   mitigado en cada uno de esos selectores (celosia-componentes.css / site.css,
   donde vive cada cual) reasignando --ce-color-focus-ring (NO
   --ce-color-semantic-action, del que depende el fondo de .ce-btn) a un tono
   claro SOLO dentro de ese contexto: como el anillo usa ese token dedicado,
   cualquier reasignación local en cascada ya lo alimenta sin tener que
   repetir la regla :focus-visible ni tocar el color de los botones. La
   versión que gana a las 15 reglas de reset de foco de Bootstrap ((0,4,0))
   vive en celosia-bootstrap.css (Tarea 2.3); esta es la base para cualquier
   elemento fuera de la superficie de Bootstrap. Sin border-radius propio: los
   navegadores actuales ya redondean el outline al radio del propio elemento
   enfocado, así que el anillo sigue el radio real de cada objeto (8px en
   campos/botones, 0 en un enlace de texto plano) en vez de imponer uno fijo. */
:focus-visible {
  outline: var(--ce-size-focus-ring) solid var(--ce-color-focus-ring);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Salto al contenido ---------- */
.ce-skip {
  position: absolute;
  left: var(--ce-space-2);
  top: calc(var(--ce-space-2) * -10);
  z-index: 100;
  padding: var(--ce-space-2) var(--ce-space-4);
  background: var(--ce-color-semantic-action);
  color: var(--ce-color-semantic-text-on-brand);
  transition: top var(--ce-duration-fast);
}
.ce-skip:focus { top: var(--ce-space-2); }

/* ---------- Alto contraste forzado ---------- */
@media (forced-colors: active) {
  /* Re-autorizada a especificidad (0,4,0) — la misma que el override de
     Bootstrap en celosia-bootstrap.css — para que no pierda silenciosamente
     contra él. Ver nota "Deltas intencionadas" arriba. */
  :focus-visible:focus-visible:focus-visible:focus-visible { outline-color: Highlight; }
}