/* ===================================================================== zv-tokens.css -- Kit UI PaskayMind (dinamica-ui-zolvia), capa de tokens Migracion a Dinamica, fase F1. Guia: 04-guia-design-system-zolvia §2, §3. --------------------------------------------------------------------- REGLA DE ENCODING (K5): este archivo se sirve como ISO-8859-1 (mime-mapping de web.xml, decision A4). Se escribe SOLO EN ASCII a proposito, para que los bytes sean identicos en ISO-8859-1 y UTF-8 y ningun comentario en castellano se corrompa. Sin tildes, ni siquiera en comentarios. REGLA DE CASCADA (guia §7.4, la que mas se equivoca): `@layer zv-base, zv-components;` solo fija la prioridad ENTRE esas dos capas. Bootstrap, paskaymind-bootstrap-theme.css y el CSS propio del framework Dinamica se cargan SIN capa, y en CSS todo estilo sin capa de importancia normal gana sobre CUALQUIER regla dentro de un @layer, sin importar la especificidad. Por eso el reset de ELEMENTOS de este archivo va al final, FUERA de todo @layer, con scope .zv-app -- ahi si compite por especificidad y orden de carga. Nunca !important. Los 55 tokens de public/styles.css:9-79 llegan asi (K8): - 48 se mantienen con el mismo nombre y valor - 3 se renombran: --side-* -> --zv-sidebar-* (colisionaban en semantica con el --side:230px del frameset, que es una MEDIDA, no un color) - 4 se eliminan por muertos: --sp-14, --line, --navy, --card - 1 se conserva pese a 0 usos en CSS: --muted (42 usos en app.js, alias publico vivo, R9) + 2 nuevos que reemplazan hardcodes: --zv-danger-dark, --zv-on-primary Total emitido: 53 tokens. ===================================================================== */ @layer zv-base, zv-components; /* ===================================================================== TIPOGRAFIA -- Inter, vendorizada. NO hay CDN en runtime (misma regla que FullCalendar en public/vendor/): la app tiene que levantar sin internet. Es la fuente que pide el design system del proyecto (bodyFont, headlineFont y labelFont, los tres INTER). Hasta el 2026-08-06 el kit declaraba la system stack "100% system fonts, sin @font-face" -- decision que dejaba a Windows sirviendo Trebuchet MS en los titulos, o sea a dos familias de distancia del diseno aprobado. Un solo archivo por subset: Inter v20 es VARIABLE, cubre 100..900 de corrido, asi que los cuatro pesos del diseno (400/500/600/700) salen de 48 KB (latin) + 85 KB (latin-ext) y no de ocho descargas. Los `unicode-range` son los de Google Fonts sin tocar: el navegador baja latin-ext SOLO si la pagina usa un glifo de ese rango. Licencia: SIL Open Font License 1.1 (uso comercial permitido). ===================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @layer zv-base { /* ------------------------------------------------------------------- Los tokens cuelgan de .zv-app, no de :root. Motivo (R4 del §11.3): las custom properties NO cruzan iframes. Cada uno de los 3 documentos del frameset (homeHeader / homeBar / homeContent) carga esta hoja por su cuenta y pone .zv-app en su . Colgar de :root funcionaria igual dentro del documento, pero .zv-app documenta la frontera y evita pisar tokens de una hoja de tercero montada en :root. ------------------------------------------------------------------- */ .zv-app { /* ---- Marca / acento ---- */ --primary: #3A4199; /* anil (accion principal) */ --primary-dark: #2A2F72; /* anil profundo: hover, titulos de marca */ --accent: #E86F4C; /* achiote: NUNCA texto blanco encima */ --accent-dark: #A8421F; /* achiote tostado, legible como texto */ /* ---- Superficies ---- */ --bg: #FAF6EF; /* algodon: fondo de marca */ --surface: #FFFFFF; /* tarjetas */ --surface-alt: #F3ECE1; /* algodon crudo (zonas tramadas) */ --border: #E1E2EE; /* hairline anil */ /* ---- Texto ---- */ --text: #1B1D36; /* tinta anil */ --text-muted: #545874; /* secundario, AA sobre surface y bg */ /* ---- Estados ---- */ --success: #23774A; --success-strong: #1E6A41; /* fondo de boton con texto blanco */ --warning: #A86B12; /* funcional, no es color de marca */ --danger: #B1382B; /* funcional, no es color de marca */ /* ---- Tints / softs ---- */ --primary-soft: #EBECF8; --primary-line: #C7CAEA; --accent-soft: #FDEDE6; --success-soft: #E0F0E6; --danger-soft: #F9E1DC; /* SANEADO: un solo valor en todo el kit. admin.html:20 lo redefinia con #DEE9ED; esa redefinicion no se hereda. */ --info-soft: #F3ECE1; /* ---- Texto-sobre-tinte (todos verificados AA) ---- */ --primary-on-soft: #2A2F72; --success-on-soft: #1B5C39; --warning-on-soft: #80520C; --danger-on-soft: #8C2B20; /* ---- Sidebar (RENAME zv-, guia §6.2) ---- */ --zv-sidebar-bg: #1B1D36; --zv-sidebar-text: #EEEFF8; --zv-sidebar-muted: #A4A7C8; /* ---- Sombras en capas (tinta anil, no negro puro) ---- */ --shadow-xs: 0 1px 2px rgba(27,29,54,.06); --shadow-sm: 0 1px 2px rgba(27,29,54,.05), 0 2px 6px rgba(27,29,54,.06); --shadow-md: 0 1px 3px rgba(27,29,54,.05), 0 6px 16px -4px rgba(27,29,54,.10); --shadow-lg: 0 4px 12px rgba(27,29,54,.08), 0 24px 48px -12px rgba(27,29,54,.18); --ring: 0 0 0 3px rgba(58,65,153,.25); /* ---- Radios. El design system fija roundness ROUND_EIGHT: la tarjeta es 8px (rounded-lg) y el control 6px (rounded-md), calcado del mockup. Venian de 10/14/16/18/22, o sea el doble de redondeo que el diseno aprobado -- que es la mitad de por que la app "no se parecia" pese a tener la paleta exacta. ---- */ --r-input: 6px; --r-card: 8px; --r-panel: 8px; --r-modal: 12px; --r-hero: 16px; --r-full: 999px; /* ---- Espaciado (base 4). --sp-14 eliminado: 0 referencias. ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* ---- Motion. --t es el unico token que compone otro en su definicion. -- */ --ease: cubic-bezier(.2,.6,.2,1); --t: 160ms var(--ease); /* ---- Tipografia: Inter vendorizada (ver el @font-face de arriba). La system stack queda de RESPALDO, no de titular: si el .woff2 no carga, la pagina sigue legible con la fuente del sistema. ---- */ --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-display: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* ---- Tokens NUEVOS del kit (K8): reemplazan hardcodes del origen ---- */ --zv-danger-dark: #932E23; /* era literal en .btn.danger:hover (317) */ --zv-on-primary: #FFFFFF; /* eran ~13 #fff sueltos sobre fondos de marca */ /* Borde de los controles que se IDENTIFICAN por su contorno: campos de formulario, celdas seleccionables del calendario, franjas horarias. Existe porque --border (#E1E2EE) da 1.29:1 sobre blanco y WCAG 1.4.11 exige 3:1 cuando el borde es lo unico que dice que ahi hay un control. Medido: 3.70 sobre --surface, 3.43 sobre --bg, 3.15 sobre --surface-alt. NO reemplaza a --border: las lineas divisorias de tablas y paneles son decorativas y siguen con el hairline anil de la marca. */ --zv-control-line: #7F83A3; /* ---- Alias legacy. Solo sobrevive --muted (42 usos en app.js, R9). ---- */ --muted: var(--text-muted); } /* ------------------------------------------------------------------- Base que NO compite con estilos de elemento de Bootstrap: se puede quedar dentro de la capa sin riesgo. ------------------------------------------------------------------- */ .zv-app ::selection { background: var(--primary-soft); color: var(--primary-on-soft); } } /* ===================================================================== RESET DE ELEMENTOS -- FUERA DE @layer A PROPOSITO. Cada regla de aca abajo pisa un estilo de elemento de Bootstrap o del framework. Metida en @layer zv-base perderia SIEMPRE, por mas especifica que fuera. Este bloque es la excepcion documentada de la guia §7.4. ===================================================================== */ .zv-app, .zv-app * { box-sizing: border-box; } html.zv-app-html, body.zv-app { margin: 0; height: 100%; } body.zv-app { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* OJO (decision F12): `color` NO puede viajar con estas dos. `font-family` y `cursor` estan aca abajo porque tienen que GANARLE a Bootstrap. `color`, en cambio, tiene que PERDER contra `.btn` y contra los componentes `.zv-*`, y sin capa hacia lo contrario dos veces: (1) `.zv-app button` es (0,1,1) y le ganaba a `.btn` (0,1,0), asi que `--bs-btn-color: #FFFFFF` no llegaba a pintarse nunca; (2) una regla sin capa le gana a CUALQUIER regla dentro de un @layer, asi que tambien pisaba los colores de @layer zv-components. Medido antes del arreglo, a 320px: `.btn-primary` daba 2.13:1 y `` daba 1.35:1 (WCAG 1.4.3 pide 4.5:1). */ .zv-app button { font-family: inherit; cursor: pointer; } .zv-app input, .zv-app select, .zv-app textarea { font-family: inherit; font-size: 15px; } /* `:not(.btn)` y no una capa: el `a { color: var(--bs-link-color) }` del reboot de Bootstrap TAMBIEN esta sin capa, asi que bajar esta regla a @layer zv-base la haria perder contra el reboot y los enlaces dejarian de ser morados. El :not() la saca del camino de `a.btn` sin ceder nada mas. */ .zv-app a:not(.btn) { color: var(--primary-dark); } /* El color del