/* Celosía (sistema de diseño), subconjunto propio de Webcentros — NO es copia
   completa del vendored (.claude/celosia/celosia.css, no editar ese).
   Orden de carga obligatorio: celosia.css → celosia-bootstrap.css →
   celosia-componentes.css → site.css. Detalle y porqués: docs/adr/. */

:root {
  --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;
  --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;
  --ce-color-state-success: #1B7A4B;
  --ce-color-state-warning: #8A5A00;
  --ce-color-state-danger: #C0392F;
  --ce-color-state-info: #1B5FA8;
  --ce-color-focus-inner: #FFBF00;
  --ce-color-focus-outer: #15181C;
  --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;
  --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);
  /* Token aparte de semantic-action: lo reasignan los fondos de marca fija sin arrastrar el color de fondo de .ce-btn. */
  --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: var(--ce-color-brand-600-rgb);
  --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;
  --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;
  --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;
  --ce-duration-fast: 120ms;
  --ce-duration-normal: 200ms;

  --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;

  --ce-size-radius-container: 8px;
  --ce-size-radius-tag: 24px;
  --ce-size-radius-full: 999px;
  --ce-size-hero-min: 400px;
  --ce-size-hero-min-lg: 460px;
  --ce-size-hero-measure: 75%;
  --ce-size-border-width-medium: 1.5px;
}

/* Modo oscuro: polaridad de foco y contrastes verificados a mano (WCAG) —
   no reasignar sin recomprobar contraste en las 7 paletas. */
@media (prefers-color-scheme: dark) {
  :root {
    --ce-color-semantic-surface: var(--ce-color-neutral-800);
    --ce-color-semantic-surface-sunken: var(--ce-color-neutral-900);
    --ce-color-semantic-text-primary: var(--ce-color-neutral-50);
    --ce-color-semantic-text-secondary: var(--ce-color-neutral-300);
    --ce-color-semantic-border-subtle: var(--ce-color-neutral-700);

    --ce-color-semantic-link: var(--ce-color-brand-300);
    --ce-color-semantic-link-visited: var(--ce-color-brand-200);
    --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);
    --ce-color-semantic-text-on-brand: var(--ce-color-neutral-900);

    --ce-color-focus-outer: var(--ce-color-neutral-0);
    --ce-color-focus-inner: var(--ce-color-neutral-900);

    --ce-color-state-success: #2FB374;
    --ce-color-state-warning: #D6900A;
    --ce-color-state-danger:  #E4837A;
    --ce-color-state-info:    #5FA0E8;

    /* Desacoplado de state-danger a propósito: lo usa el fondo sólido de .btn-danger, necesita seguir saturado. */
    --ce-color-semantic-action-danger: #C0392F;
  }
}

:focus-visible {
  outline: var(--ce-size-focus-ring) solid var(--ce-color-focus-ring);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.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); }

@media (forced-colors: active) {
  :focus-visible:focus-visible:focus-visible:focus-visible { outline-color: Highlight; }
}