/* Fonts loaded via in HTML — see header.html, base.html.
Design tokens: :root block below. Dark theme: [data-theme="dark"] block. */
/* ═══════════════════════════════════════════════════
Tailwind v3 Preflight Overrides
───────────────────────────────────────────────────
Tailwind v3 preflight is more aggressive than v2 normalize.
These overrides restore sane defaults for our design system.
Must load AFTER tailwind.output.css (cascade order).
═══════════════════════════════════════════════════ */
/* v3 preflight border-color override moved to src/tailwind-input.css @layer base */
/* Sprint 03 cierre: el atributo HTML `hidden` debe prevalecer sobre utilities
Tailwind como `flex`, `grid`, `block`. Sin esto, modales con
`
` (T501 confirmModal, notify-attendees) se
renderizaban visibles e interceptaban clicks. Specificity 0,2,0 > 0,1,0 de
utility class sin usar !important (que stylelint prohíbe). */
[hidden].flex,
[hidden].inline-flex,
[hidden].grid,
[hidden].inline-grid,
[hidden].block,
[hidden].inline-block,
[hidden].inline,
[hidden].table,
[hidden].contents {
display: none;
}
/* v3 resets headings to font-size/weight: inherit.
All headings in templates use explicit classes (.page-title,
.dashboard-section-title, .refund-section__title, or Tailwind text-*).
Only set color inheritance — sizing comes from component classes. */
h5, h6 {
font-family: var(--font-heading);
color: var(--color-text-primary);
}
h1 {
font-family: var(--font-heading);
color: var(--color-text-primary);
font-size: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
font-weight: var(--font-semibold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tighter);
}
h2 {
font-family: var(--font-heading);
color: var(--color-text-primary);
font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.5rem);
font-weight: var(--font-semibold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
h3 {
font-family: var(--font-heading);
color: var(--color-text-primary);
font-size: var(--text-xl);
font-weight: var(--font-medium);
line-height: var(--leading-snug);
}
h4 {
font-family: var(--font-heading);
color: var(--color-text-primary);
font-size: var(--text-lg);
font-weight: var(--font-medium);
line-height: var(--leading-snug);
}
/* v3 strips list styling — only restore where explicitly needed via class.
Most lists in this app are navigation/UI, not content lists.
Use .list-disc / .list-decimal in templates for content lists. */
/* v3 sets img to display:block — keep it but ensure proper alignment */
img {
vertical-align: middle;
/* max-width: 100% from v3 preflight is kept — good for responsive */
/* display: block from v3 preflight is kept — override per-element if needed */
}
/* Icons inside buttons/links/flex need to be inline */
button img,
a img,
.inline-flex img,
.flex img:where(:not(.block)) {
display: inline-block;
}
/* v3 strips paragraph margins — spacing handled by Tailwind utilities (mb-*) in templates */
/* ═══════════════════════════════════════════════════
Base Styles
═══════════════════════════════════════════════════ */
body {
font-family: var(--font-body);
color: var(--color-text-primary);
line-height: var(--leading-normal);
letter-spacing: var(--tracking-normal);
/* height: 100% removed — caps body at 100vh, preventing content from growing */
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: var(--color-bg-page);
overflow-x: clip; /* clip instead of hidden — prevents horizontal scroll without breaking position: sticky */
}
/* Form elements inherit body font */
input, select, textarea, button {
font-family: inherit;
}
a {
text-decoration: none;
color: var(--color-link);
}
a:hover {
color: var(--color-link-hover);
}
::placeholder {
color: var(--color-text-placeholder);
opacity: 1;
}
::selection {
background-color: var(--brand-surface-strong);
color: var(--color-text-inverse);
}
/* Layout configuration */
html {
height: 100%;
scroll-behavior: smooth;
overflow-x: hidden; /* Structural containment — prevents any descendant from causing horizontal scroll */
}
main {
flex: 1 0 auto;
}
/* ═══════════════════════════════════════════════════
Design Tokens — Zelebrix
Source: main.css :root
Apps: admin (zelebrix), cargaOnline
═══════════════════════════════════════════════════ */
:root {
/* ═══ Layout — dos carriles FLUIDOS (#2796) ═══
Ambos escalan con la pantalla dejando siempre un margen porcentual
garantizado y se declaran UNA sola vez aqui. NINGUN @media puede
redeclararlos: el override de 1536px congelaba el ancho y a partir de
1648px ESTRECHABA (38,8% de aprovechamiento a 3440px).
Lo vigila scripts/check_container_width_contract.py.
Carril de TEXTO (--container-max): forms, cards, prosa.
El tope de 1400px es un techo de LEGIBILIDAD **medido**, no una cuenta:
ensanchar este carril SI cuesta caracteres/linea. Medido en Chromium
sobre /apk/ y /system/ a 1920, 2560 y 3440 px de viewport, contando la
linea visual mas larga de cada parrafo:
- 1400px (= lo que daba demo): la prosa que envuelve tope en 75 cpl.
- 1500px: un parrafo pasa de 42 a 59 cpl y aparece una linea nueva
por encima de 75.
- 2400px: parrafos de 75 -> 123 cpl y de 50 -> 89 cpl; 5-6 lineas por
encima de 75 frente a las 2-3 que ya tenia demo.
1400px es el mayor tope que NO empeora ni una sola linea respecto a
demo. El aprovechamiento de pantalla lo da el carril ANCHO, no este.
85vw => 15% de margen total garantizado antes de llegar al tope.
Carril ANCHO (--container-max-wide): tablas y charts. No le aplica la
restriccion de cpl (no es prosa), asi que aqui manda aprovechar pantalla:
92vw => 8% de margen total garantizado, con tope de cortesia a 3400px
para ultrawide. Medido en /dispositivos/: el contenido de la tabla pasa
de 1336px congelados a 1702px @1920, 2291px @2560 y 3101px @3440. */
--container-max: clamp(1280px, 85vw, 1400px);
--container-max-wide: clamp(1280px, 92vw, 3400px);
--container-gutter: clamp(16px, 4vw, 32px);
/* Medida de la PROSA (#2802). El tope del CONTENEDOR no es la palanca:
hay parrafos del carril de texto que caben enteros en una sola linea y
por eso su longitud renderizada NO depende del ancho del contenedor.
Medido en Chromium sobre /apk/ (tema light y dark, identico): el parrafo
de "Reset del sistema" renderiza 131 caracteres en UNA linea a 1280,
1306 y 1400 px de #main — constante, porque nunca llega a envolver.
Bajarlo a 75 cpl estrechando #main exigiria ~636px y romperia el resto.
El rango legible es 45-75 cpl, asi que el tope se pone en la MEDIDA del
texto.
COMO SE CALIBRA EL VALOR — y por que `55ch` estaba mal.
`1ch` NO es "un caracter": es el ancho del glifo "0" de la fuente que el
navegador PINTA de verdad, y la razon cpl-por-ch cambia con la fuente.
Medida sobre el mismo parrafo y el mismo `Nch`, en tres fuentes reales:
1,07 cpl/ch fallback del sistema en Windows (Segoe UI)
1,25 cpl/ch Lato — la del diseno
1,38 cpl/ch la que pinta el runner Linux que corre el gate E2E
Y la fuente NO es determinista: `header.html` trae Lato de
fonts.googleapis.com, asi que quien no alcance ese CDN — el E2E
hermetico, un usuario offline, tras proxy o con el dominio bloqueado —
renderiza con el fallback del sistema. El peor caso no es hipotetico:
es el que mide el gate.
Por eso el token no se calibra contra UNA fuente: se elige el valor que
deja TODA la horquilla medida dentro de la banda legible 45-75 cpl.
55ch -> 59 / 69 / 76 cpl (el 76 del runner incumple el limite: es el
fallo que cazo el propio gate de #2802 —
job 93117057420 — con el token calibrado
solo con Lato y al borde de la banda)
48ch -> 51 / 60 / 66 cpl (dentro de banda en las tres; el cpl del
runner lo mide el spec, no se supone)
Corolario que costo una ronda: `ch` escala con el font-size, asi que un
`62ch` a 13px NO entra menos caracteres que a 16px — `.access-card__info`
(13px) medía 82 cpl con `62ch`, y por eso ahora usa el token.
El techo del valor lo vigila `scripts/check_container_width_contract.py`
(R4, barato y local); quien AFIRMA el limite es
`e2e/tests/system/prose-measure.spec.ts`, que mide cpl reales en el
navegador del gate y es la autoridad.
`.refund-section__subtitle` conserva su `62ch`, pero dentro de `#main`
del admin lo pisa la regla de ~2238 (mas especifica por el `#main`); el
`62ch` solo sigue vivo en cargaOnline (`.co-main`), que esta fuera del
alcance de #2802.
Se aplica en la regla `#main … :is(p, li, dd, label > span)` mas abajo. */
--prose-max: 48ch;
--container-radius: var(--radius-xl);
--container-shadow: 0 6px 18px rgba(0, 0, 0, 0.06),
0 4px 10px rgba(51, 190, 255, 0.05);
/* ═══ Brand ═══ */
--brand-primary: #33BEFF;
--brand-primary-dark: #0369a1; /* HSL(201°, 96%, 32%) — hue-coherent with brand-primary */
--brand-primary-hover: #00B3EF; /* HSL(195°, 100%, 47%) */
--brand-primary-active: #0099D6; /* HSL(195°, 100%, 42%) */
--brand-primary-light: #E0F7FF; /* HSL(195°, 100%, 94%) */
/* ═══ Brand SURFACES that carry text ═══
The fill for any brand-coloured box whose ink is --color-text-inverse.
Contract: this token FLIPS together with --color-text-inverse, so the pair
is AA in both themes (light = dark fill + white ink 5.93:1; dark = cyan
fill + slate-900 ink 8.46:1). Never pair it with a fixed-colour ink.
Why it is not just --brand-primary or --brand-primary-dark:
- --brand-primary (#33BEFF) is 2.11:1 with white — backgrounds and icons
only, never behind text (§4.2).
- --brand-primary-dark doubles as --color-link and is therefore re-aliased
to --brand-primary inside [data-theme="dark"]; a background declared
with it inside a dark-mode rule is a silent no-op. Splitting the fill
job out into its own token is what makes those overrides work again. */
--brand-surface-strong: #0369a1; /* sky-700 — 5.93:1 with #ffffff */
--brand-surface-strong-hover: #075985; /* sky-800 — 7.56:1 */
--brand-surface-strong-active: #0c4a6e; /* sky-900 — 9.46:1 */
--brand-primary-shadow: rgba(51, 190, 255, 0.32);
--brand-primary-shadow-strong: rgba(3, 105, 161, 0.35);
--brand-focus-ring: rgba(51, 190, 255, 0.45);
/* ═══ State Colors ═══ */
--color-success: #16a34a; /* green-600 */
--color-success-hover: #15803d; /* green-700 */
--color-success-bg: #dcfce7; /* green-100 */
--color-error: #dc2626; /* red-600 */
--color-error-hover: #b91c1c; /* red-700 */
--color-error-light: #ef4444; /* red-500 */
--color-error-bg: #fee2e2; /* red-100 */
--color-info: #2563eb; /* blue-600 */
--color-info-hover: #1d4ed8; /* blue-700 */
--color-info-bg: #dbeafe; /* blue-100 */
--color-warn: #d97706; /* amber-600 */
--color-warn-hover: #b45309; /* amber-700 */
--color-warn-bg: #fef3c7; /* amber-100 — pastel */
--color-purple: #9333ea; /* purple-600 */
--color-success-active: #166534; /* green-800 — pressed/hover state of a filled success button */
/* ═══ Status TEXT (on a page/table/pastel surface, not on a saturated fill) ═══
The -600 state tokens above are tuned to be FILLS; as text they miss AA
(#16a34a is 3.29:1 on #ffffff, #dc2626 is 3.95:1 on #fee2e2). Use these
wherever the status colour is the ink: money cells, toasts, badges,
textual table actions. Ratios below are the worst measured surface. */
--color-status-success-text: #15803d; /* green-700 — 5.02:1 on #fff, 4.56:1 on zebra #f3f4f6 */
--color-status-error-text: #b91c1c; /* red-700 — 6.47:1 on #fff, 5.30:1 on #fee2e2 */
--color-status-warn-text: #b45309; /* amber-700 — 4.51:1 on #fef3c7 */
--color-status-info-text: #1d4ed8; /* blue-700 — 5.49:1 on #dbeafe */
/* ═══ Gray Palette ═══ */
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-900: #111827;
/* ═══ Toggle ═══ */
--toggle-track-off: var(--gray-300); /* gray-300 */
--toggle-knob-off: #E6F7FF; /* subtle brand tint */
--toggle-focus-ring: rgba(51, 190, 255, 0.35);
/* ═══ Button spinner ═══ */
--btn-spinner-ring: rgba(255, 255, 255, 0.35); /* spinner track on dark/brand buttons */
/* ═══ Typography ═══ */
--text-3xs: 0.5625rem; /* 9px — T438: usar solo en badges ultra-compactos (CO labels legacy) */
--text-2xs: 0.6875rem; /* 11px */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
/* ═══ Shadows ═══ */
--shadow-color: 15, 23, 42; /* slate-900 RGB base */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(51, 190, 255, 0.04);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(51, 190, 255, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 4px 12px -2px rgba(51, 190, 255, 0.08);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 8px 20px -4px rgba(51, 190, 255, 0.10);
--shadow-brand-sm: 0 6px 12px var(--brand-primary-shadow);
--shadow-brand-lg: 0 8px 16px var(--brand-primary-shadow-strong);
/* ═══ Border Radius ═══ */
--radius-xs: 2px;
--radius-sm: 4px; /* 0.25rem */
--radius-md: 8px; /* 0.5rem */
--radius-lg: 12px; /* 0.75rem */
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 9999px; /* pills, toggles */
/* ═══ Typography Scale — 4 niveles, fluid clamps ═══
display: hero KPI numbers
h2: card titles
body: default text
caption: labels, metadata, tooltips
*/
--text-display-size: clamp(32px, 5vw, 44px);
--text-display-leading: 1.05;
--text-display-tracking: -0.025em;
--text-display-weight: 700;
--text-h2-size: clamp(18px, 2vw, 22px);
--text-h2-leading: 1.25;
--text-h2-tracking: -0.01em;
--text-h2-weight: 600;
--text-caption-size: 13px;
--text-caption-leading: 1.4;
--text-caption-tracking: 0.02em;
/* body: el cuarto nivel que el comentario de arriba anuncia y nunca se
definio. En `rem` y no en `px` como sus tres hermanos, para que respete el
tamaño de fuente que el usuario tenga puesto en el navegador.
A <=1125px de viewport el clamp esta en su suelo: MOVIL SE QUEDA EN LOS
16px DE HOY, el nivel alto es solo de escritorio (una maqueta, no dos).
Corolario que hay que tener delante antes de tocarlo: el tope de prosa
esta declarado en `ch`, o sea que ESCALA con el font-size — subir el
cuerpo ensancha la caja pintada y NO mueve ni un caracter por linea
mientras mande el tope. En cuanto manda el contenedor (una celda de
rejilla mas estrecha que el tope) la relacion se invierte y subir el
tamaño baja los cpl: ese es el riesgo que afirma el SUELO de 45 de
`e2e/tests/system/prose-measure.spec.ts`. */
--text-body-size: clamp(1rem, 1.6vw, 1.125rem); /* 16 -> 18px */
/* ═══ Semantic Aliases — Theme layer ═══
Punto de enganche para tarea 034 (temas claro/oscuro).
La 034 reasigna estos bajo [data-theme="dark"] sin tocar templates.
*/
--color-text-primary: var(--gray-900);
--color-text-secondary: var(--gray-600);
--color-text-muted: var(--gray-500);
--color-text-inverse: #ffffff;
/* T174 P174-7 — Token intensificado para texto muted sobre superficies
elevadas (slate-700 en dark). En light el muted estandar ya supera
AA sobre bg-elevated, asi que aqui mantenemos el alias. */
--color-text-muted-on-elevated: var(--color-text-muted);
/* T174 P174-7 — fg intensificado para los chips de variation; sin
esto el contraste 1.00 los vuelve invisibles en dark. En light se
mantiene el semantic hover, que ya es AA sobre bg con alpha 12%. */
--color-variation-success-fg: var(--color-success-hover);
--color-variation-error-fg: var(--color-error-hover);
--color-bg-page: var(--gray-50);
--color-bg-surface: #ffffff;
--color-bg-elevated: var(--gray-100); /* T522 / T106 Fase 1: elevado de var(--gray-50) → var(--gray-100) para contraste WCAG en light mode sobre superficies elevadas */
--color-bg-total-row: var(--gray-200); /* #e5e7eb — legend table TOTAL row, one step darker than --color-bg-elevated (gray-100) */
--color-bg-muted: var(--gray-200);
--color-border-default: var(--gray-200);
--color-border-strong: var(--gray-300);
--color-primary-disabled: rgba(51, 190, 255, 0.55);
/* Native