/* ============================================================ DoweSoft — Design Tokens (CSS Variables) «Formulario radicado»: papel blanco, tinta casi negra y el rojo de marca (#c62828) como tinta de sello. Misma paleta que el sitio legacy (legacy/css/site.css): --red, --ink, --ink-2/3, --rule, --paper-tint. Los neutrales son cálidos (teñidos del rojo), no grises azulados. ============================================================ */ :root { /* ── Brand (rojo DoweSoft, 5,6:1 con blanco) ──────────────────────────────── */ --brand-50: #fdf3f2; --brand-100: #fbe4e1; --brand-200: #f5c6c0; --brand-300: #ec9a91; --brand-400: #e06459; --brand-500: #c62828; --brand-600: #b02222; --brand-700: #9e1c1c; --brand-800: #7f1717; --brand-900: #5a1010; --brand: #c62828; --brand-contrast: #ffffff; /* ── Accent ────────────────────────────────────────────────── */ /* --accent-50 se declara aquí aunque nadie lo pinte todavía: sin él, el `var(--accent-50, #faf3f2)` de --color-secondary-light dependía de un fallback, y ese fallback era un color fijo que en tema oscuro no se podría corregir desde ningún sitio. */ --accent-50: #faf3f2; --accent-500: #9e1c1c; --accent: #9e1c1c; --accent-contrast: #ffffff; /* ── Neutrales ─────────────────────────────────────────────── */ --neutral-50: #faf7f6; --neutral-100: #f4efee; --neutral-200: #e9e2e1; --neutral-300: #ddd3d2; --neutral-400: #c2b6b5; --neutral-500: #9d9091; --neutral-600: #7a6e6f; --neutral-700: #6b6162; --neutral-800: #4d4546; --neutral-900: #2e2728; /* ── Surfaces ──────────────────────────────────────────────── */ --surface-0: #f7f3f2; --surface-1: #ffffff; --surface-2: #f4efee; --surface-inverse: #1c1718; /* ── Texto ─────────────────────────────────────────────────── */ --text-1: #1c1718; --text-2: #4d4546; --text-3: #6b6162; --text-inverse: #ffffff; /* ── Bordes ────────────────────────────────────────────────── */ --border-subtle: #ebe4e3; --border: #ddd3d2; --border-strong: #a3999a; /* ── States ────────────────────────────────────────────────── */ --state-hover: rgba(198, 40, 40, .06); --state-active: rgba(198, 40, 40, .12); /* ── Focus ─────────────────────────────────────────────────── */ --focus-ring-color: rgba(198, 40, 40, .35); --focus-ring: 0 0 0 3px rgba(198, 40, 40, .35); /* ── Semánticos ────────────────────────────────────────────── */ --success: #16a34a; --success-on: #ffffff; --success-soft: #e9f7ef; --success-border: #b7e3c8; --warning: #f59e0b; --warning-on: #1f1300; --warning-soft: #fff7e6; --warning-border: #fad7a0; --danger: #dc2626; --danger-on: #ffffff; --danger-soft: #ffecec; --danger-border: #f7b4b4; /* Hover del botón sólido de peligro. Existe como token porque la dirección del hover NO es la misma en los dos temas: sobre fondo claro se oscurece, sobre fondo oscuro se aclara. Un filter: brightness() fijo acertaría en uno y en el otro se leería como "desactivado". */ --danger-hover: #b91c1c; --info: #0284c7; --info-on: #ffffff; --info-soft: #e6f4ff; --info-border: #a6d8ff; /* ── Sombras ───────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(28, 23, 24, .06); --shadow-md: 0 2px 4px rgba(28, 23, 24, .08), 0 1px 2px rgba(28, 23, 24, .06); --shadow-lg: 0 8px 24px rgba(28, 23, 24, .14); --backdrop: rgba(28, 23, 24, .55); /* Velo del loader global. Separado de --backdrop porque hace lo contrario: --backdrop OSCURECE para destacar un modal encima; este ACLARA para dejar ver la página que sigue detrás mientras carga. En oscuro, "aclarar" es oscurecer un poco más. */ --loader-veil: rgba(255, 255, 255, .65); /* ── Botones ───────────────────────────────────────────────── */ --btn-primary-bg: #c62828; --btn-primary-text: #ffffff; --btn-primary-hover: #9e1c1c; /* ── Panel de marca del área pública ─────────────────────── La mitad izquierda de login / forgot / reset. Tiene tokens PROPIOS y no reusa --brand-600/800/900 aunque en tema claro valgan lo mismo, porque los dos usos divergen en oscuro: · La sub-barra del appbar tiene que seguir siendo rojo de marca: es chrome, y su trabajo es identificar la app. · Este panel comparte pantalla con el formulario, que es --surface-1. Si conserva la saturación de la marca (64% frente al 29% de la superficie) los dos lados chocan: en claro el salto se justifica porque el formulario es blanco, pero en oscuro los dos lados son oscuros y sin diferencia de luminosidad el salto solo se lee como dos rojos que no combinan. En claro los valores son exactamente los de --brand-800/600/900, así que el aspecto no cambia. En oscuro la base baja a la familia de las superficies y el brillo pasa a ser un TINTE translúcido. */ --hero-base: #c62828; --hero-end: #9e1c1c; --hero-glow: #d6372f; /* Sombra al pie del panel, para que el texto blanco se lea sobre el degradado. Cuánta hace falta depende de lo claro que sea el degradado debajo, así que también cambia con el tema. */ --hero-shade: rgba(0, 0, 0, .28); /* ── Aliases Bootstrap ─────────────────────────────────────── */ --bs-primary: #c62828; --bs-success: #16a34a; --bs-warning: #f59e0b; --bs-danger: #dc2626; --bs-body-bg: var(--surface-0); --bs-body-color: var(--text-1); --bs-border-color: var(--border); /* ── Aliases semánticos (compatibilidad con módulos) ────────── */ --color-primary: var(--brand); --color-primary-dark: var(--brand-800); --color-primary-light: var(--brand-50); --color-secondary: var(--accent); --color-secondary-light: var(--accent-50, #faf3f2); --color-surface: var(--surface-1); --color-background: var(--surface-0); --color-text-primary: var(--text-1); --color-text-secondary: var(--text-2); --color-text-tertiary: var(--text-3); --color-border: var(--border); --color-error: var(--danger); --color-success: var(--success); --color-primary-rgb: 198, 40, 40; --color-error-rgb: 220, 38, 38; /* ── Landing Page ──────────────────────────────────────────── */ /* Nombres se conservan por compatibilidad; los valores son la paleta DoweSoft. Ninguna vista los usa hoy. */ --lp-ink: #1c1718; --lp-ink2: #2e2728; --lp-ink3: #4d4546; --lp-teal: #c62828; --lp-teal2: #9e1c1c; --lp-teal-glow: rgba(198, 40, 40, 0.18); --lp-muted: #ddd3d2; --lp-border: rgba(255, 255, 255, 0.08); --lp-white: #FFFFFF; --lp-card: rgba(255, 255, 255, 0.04); /* ── Sitio «Formulario radicado» ──────────────────────────── Nombres del sitio legacy (legacy/css/site.css), como alias de los tokens de arriba o como valores propios del sitio. Las vistas de containers/site los usan tal cual: así el CSS migrado no cambió de vocabulario. */ --paper: var(--surface-1); --paper-tint: #faf3f2; /* copia de papel carbón, teñida del rojo */ --ink: var(--text-1); --ink-2: var(--text-2); /* 9,3:1 sobre blanco */ --ink-3: var(--text-3); /* 5,9:1 sobre blanco */ --rule: var(--border); --rule-strong: var(--text-1); --red: var(--brand); /* 5,6:1 con blanco */ --red-deep: var(--brand-700); /* Rellenos sólidos bajo texto blanco (botón, banda, capa destacada). Son tokens aparte de --red porque en modo nocturno se separan: el rojo de TEXTO se aclara para leerse sobre fondo oscuro, el de RELLENO sigue siendo profundo para que el blanco encima conserve el contraste. */ --red-fill: var(--brand); --red-fill-hover: var(--red-deep); --band: var(--red-fill); /* la banda roja a todo lo ancho */ --ink-fill: var(--text-1); /* superficies de tinta: pie, bandeja de módulos */ --logo-plate: #ffffff; /* placa clara detrás de los logos de clientes en oscuro */ --on-red: #ffffff; --on-red-2: #ffe1dd; /* 4,6:1 sobre --red */ --on-red-rule: rgba(255, 255, 255, 0.55); --on-red-rule-soft: rgba(255, 255, 255, 0.35); --on-red-rule-strong: rgba(255, 255, 255, 0.8); --on-ink: #ffffff; /* texto sobre el pie y la bandeja (tinta) */ --on-ink-2: #cfc6c7; --on-ink-3: #e9e3e3; --red-on-ink: #ff6b5f; /* el rojo de marca, legible sobre tinta */ --shadow-btn: 0 1px 0 var(--red-deep), 0 6px 14px -8px rgba(158, 28, 28, 0.55); --shadow-sheet: 0 1px 2px rgba(28, 23, 24, 0.06), 0 18px 40px -24px rgba(28, 23, 24, 0.35); --shadow-tray: 0 18px 40px -16px rgba(28, 23, 24, 0.55); --wrap: 1240px; --gutter: clamp(20px, 4vw, 48px); --section: clamp(72px, 10vw, 136px); --masthead-min: 72px; /* alto mínimo de la cabecera (fijo) */ --masthead-h: 72px; /* alto REAL: lo reescribe el shell al medir */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ── Escala de accesibilidad ─────────────────────────────── Multiplicador global del tamaño de fuente. Es el único punto de control: `html` deriva su font-size de aquí y TODO lo demás está en `rem`, así que un solo valor mueve la interfaz entera. El usuario lo elige en Configuración del sistema → Accesibilidad (pensado para quien necesita letra más grande). El valor viaja como atributo `data-font-scale` en ``, que index.php escribe desde el SERVIDOR con la preferencia de la cuenta (tabla user_preference) — sin eso habría un salto de tamaño visible al arrancar. Lo cambia el usuario en Mi perfil. NO tocar este valor desde CSS de contenedores: es global. */ --font-scale: 1; /* ── Tipografía base ─────────────────────────────────────── En `rem` a propósito: así siguen la escala de accesibilidad. Los comentarios muestran el equivalente en px a escala 1 (root = 16px). */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-body: 0.9375rem; /* 15px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-h1: 1.25rem; /* 20px */ --text-h2: 1.0625rem; /* 17px */ --line-tight: 1.25; --line-normal: 1.5; /* Familia de la interfaz (ver @font-face en css/main.css). */ --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif; /* Grosor del trazo de los iconos (Material Symbols, 100–700). */ --icon-weight: 300; /* Ancho máximo del contenido de las vistas (centrado por el shell). Una vista que necesite todo el ancho pone `wide` en su raíz. */ --content-max: 80rem; } /* ── Niveles de la escala ─────────────────────────────────── `:root[...]` (0,2,0) para ganarle siempre al `:root` de arriba sin depender del orden de las reglas. Los saltos son de ~15% porque por debajo de eso el cambio no se percibe y el usuario cree que el control no hizo nada. */ :root[data-font-scale="sm"] { --font-scale: 0.90; } /* Pequeña */ :root[data-font-scale="md"] { --font-scale: 1.00; } /* Normal */ :root[data-font-scale="lg"] { --font-scale: 1.15; } /* Grande */ :root[data-font-scale="xl"] { --font-scale: 1.30; } /* Muy grande*/ :root[data-font-scale="xxl"] { --font-scale: 1.50; } /* Máxima */ /* Raíz de la escala. Se usa `100%` en vez de `16px` para NO pisar el tamaño de fuente que el usuario haya configurado en su navegador o en Android/iOS: nuestro multiplicador se aplica encima del suyo. */ html { font-size: calc(100% * var(--font-scale)); } /* ── Tipografía móvil ───────────────────────────────────── Sube el body y los títulos en pantallas chicas. */ @media (max-width: 720px) { :root { --text-body: 1rem; /* 16px */ --text-h1: 1.375rem; /* 22px */ --text-h2: 1.125rem; /* 18px */ } /* Piso de 16px REALES en campos de formulario. Safari iOS hace zoom automático al enfocar un input cuya letra mide menos de 16px, y deja la vista descuadrada al salir. Con la escala en "Pequeña" (0.9) el body caería a 14.4px y volvería a dispararse ese zoom, así que el piso se fija en px absolutos: `max()` toma 16px cuando la escala encoge y deja crecer el rem cuando la escala agranda. */ input, select, textarea { font-size: max(16px, 1rem); } } /* ============================================================ TEMA OSCURO ============================================================ Se activa con `data-theme="dark"` en . Lo estampa el bootstrap inline de index.php ANTES de que pinte el CSS — si se hiciera desde js/main.js habría un destello de tema claro en cada carga. Regla del bloque: aquí solo se REDEFINEN tokens, nunca se escriben reglas de componente. Si una vista se ve mal en oscuro, el arreglo es que use un token, no que este archivo aprenda su selector. ============================================================ */ [data-theme="dark"] { /* ── Marca ───────────────────────────────────────────────────── * * La rampa NO se invierte entera: * 50-200 FONDOS detrás de texto de marca: tintes translúcidos del rojo. * 300-400 rojos claros que se leen sobre el fondo oscuro. * 600-900 CHROME sólido bajo texto blanco: rojos apagados (blanco sobre * #8e1f1f ≈ 9:1) para que la barra no se coma la atención. * * --brand pasa de #c62828 a #ff8a80: el rojo de marca sobre #141011 queda * por debajo de 3:1 como texto; #ff8a80 da ~8:1. Como --brand también es * FONDO (avatar), --brand-contrast se voltea a oscuro. */ --brand-50: rgba(255, 138, 128, 0.12); --brand-100: rgba(255, 138, 128, 0.18); --brand-200: rgba(255, 138, 128, 0.26); --brand-300: #ffb4ab; --brand-400: #ff8a80; --brand-500: #ef5350; --brand-600: #8e1f1f; --brand-700: #761a1a; --brand-800: #4a1414; --brand-900: #2a0e0e; --brand: #ff8a80; --brand-contrast: #2a0e0e; --accent-50: rgba(255, 138, 128, 0.12); --accent-500: #ff8a80; --accent: #ff8a80; --accent-contrast: #2a0e0e; /* ── Neutrales ───────────────────────────────────────────────── * Rampa invertida: en claro 50 es casi blanco y 900 casi negro, así que * leídos en oscuro significan lo contrario de lo que el componente pidió. * Invirtiéndola, quien pedía "gris apagado" (--neutral-500 para iconos de * placeholder) sigue pidiendo lo mismo y lo sigue recibiendo, sin tocar * el componente. * * --neutral-500 se ajusta a 5,2:1 sobre tarjeta: donde se usa es texto * secundario de verdad, no decoración. */ --neutral-50: #1d1819; --neutral-100: #241e1f; --neutral-200: #2d2627; --neutral-300: #3a3233; --neutral-400: #6a5f60; --neutral-500: #a39697; --neutral-600: #b6aaab; --neutral-700: #c9bebf; --neutral-800: #ddd4d4; --neutral-900: #efe9e9; /* ── Superficies ───────────────────────────────────────────── */ --surface-0: #141011; --surface-1: #1f1a1b; --surface-2: #2b2425; --surface-inverse: #faf7f6; /* ── Texto ───────────────────────────────────────────────────── * --text-inverse NO se voltea: nombra el texto que va sobre chrome de * marca (la sub-barra roja, el panel del login), y ese chrome sigue * siendo oscuro en este tema. Voltearlo lo dejaría rojo sobre rojo. */ --text-1: #f1ebea; --text-2: #cdc3c3; --text-3: #a59a9b; --text-inverse: #ffffff; /* ── Bordes ──────────────────────────────────────────────────── * Translúcidos a propósito: un borde en hex fijo se ve como una costura * cuando la tarjeta está sobre --surface-0 y desaparece cuando está * sobre --surface-2. El alfa se adapta solo a las dos. */ --border-subtle: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.22); /* ── Estados ─────────────────────────────────────────────────── * En claro el hover era un tinte de marca sobre blanco. En oscuro el * recurso equivalente es ACLARAR: un tinte rojo sobre #141011 casi no se * distingue, un velo blanco sí. */ --state-hover: rgba(255, 255, 255, 0.06); --state-active: rgba(255, 255, 255, 0.12); /* ── Foco ────────────────────────────────────────────────────── * Sube de .35 a .45 de alfa y usa el rojo claro: el anillo tiene que * verse sobre el fondo oscuro, no fundirse con él. */ --focus-ring-color: rgba(255, 138, 128, 0.45); --focus-ring: 0 0 0 3px rgba(255, 138, 128, 0.45); /* ── Semánticos en oscuro ────────────────────────────────────── * * Faltaban. El tema oscuro redefinía superficies, texto y bordes, * pero dejaba los semánticos con sus valores de tema claro: los * `-soft` seguían siendo pasteles casi blancos (#ffecec, #e9f7ef…). * Como `--text-1` en oscuro es casi blanco, cualquier banner que * heredara el color del texto quedaba en 1,06:1 de contraste — * literalmente ilegible. * * Y no era solo lo heredado: los componentes que sí fijaban * `color: var(--danger)` sobre el pastel daban 4,25:1, y * `var(--success)` daba 2,98:1 — tampoco cumplían. * * Arreglo: `-soft` pasa a ser un TINTE TRANSLÚCIDO del propio tono * sobre la superficie oscura, y el tono se aclara para leerse encima. * Medido: texto heredado ≥ 12:1, tono sobre su propio soft ≥ 5,7:1. * * `--*-on` (texto sobre el color sólido) se voltea a oscuro: con el * tono aclarado, el blanco de antes caía a 1,74:1 en los botones. */ --success: #4ade80; --success-on: #052e16; --success-soft: rgba(74, 222, 128, 0.14); --success-border: rgba(74, 222, 128, 0.32); --warning: #fbbf24; /* Oscuro como sus hermanos (-on = tinta SOBRE el color sólido, dice el * comentario de arriba). Estuvo en #fde68a —amarillo pálido sobre el * ámbar, 1,4:1, ilegible— porque dos vistas lo usaban como "texto * ámbar sobre fondo -soft"; esas ya usan --text-1, como .set-note-info. * Medido: #451a03 sobre #fbbf24 ≈ 8,8:1. */ --warning-on: #451a03; --warning-soft: rgba(251, 191, 36, 0.14); --warning-border: rgba(251, 191, 36, 0.32); --danger: #f87171; --danger-on: #450a0a; --danger-soft: rgba(248, 113, 113, 0.14); --danger-border: rgba(248, 113, 113, 0.32); --danger-hover: #fca5a5; --info: #38bdf8; --info-on: #082f49; --info-soft: rgba(56, 189, 248, 0.14); --info-border: rgba(56, 189, 248, 0.32); /* ── Sombras ─────────────────────────────────────────────────── * En claro la sombra es tinta cálida a poca opacidad, porque su trabajo * es separar del blanco. Sobre #141011 eso no se ve: pasa a negro casi * puro y sube de alfa. Es lo único que despega un modal del fondo * cuando los dos son oscuros. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.60); --backdrop: rgba(0, 0, 0, 0.68); --loader-veil: rgba(20, 16, 17, 0.72); /* ── Botones ─────────────────────────────────────────────────── * A diferencia de --brand, el botón primario NO se voltea a claro: sigue * siendo el sello rojo con texto blanco (5,6:1), que es la identidad de * DoweSoft. El hover ACLARA (#d33a32, blanco encima 4,75:1): sobre fondo * oscuro, oscurecer se lee como "desactivado". */ --btn-primary-bg: #c62828; --btn-primary-text: #ffffff; --btn-primary-hover: #d33a32; /* ── Panel de marca del área pública ─────────────────────────── * El rojo sólido del tema claro sería la única mancha brillante junto a * un formulario oscuro: la base baja a un granate casi negro y el brillo * pasa a ser un tinte translúcido del rojo claro. */ --hero-base: #3a1616; --hero-end: #241010; --hero-glow: rgba(255, 138, 128, 0.16); /* Baja de .40 a .15. El .40 del tema claro tenía que oscurecer un rojo medio para que el texto blanco se leyera; sobre esta base, que ya es oscura, solo aplasta el pie del panel a negro plano y se lleva por delante la forma del degradado. Con .15 el texto sigue por encima de 12:1 y el panel conserva profundidad. */ --hero-shade: rgba(0, 0, 0, .15); /* ── Aliases Bootstrap ───────────────────────────────────────── * --bs-body-bg / --bs-body-color / --bs-border-color no se repiten: ya * apuntan a var(--surface-0) / var(--text-1) / var(--border), y esos se * resuelven contra los valores de ESTE bloque. Los que sí van aquí son * los que en :root están en hex fijo. * * Aquí NO hay --bs-secondary-bg, --bs-emphasis-color ni --bs-link-color: * son tokens de Bootstrap 5.3 y el que carga index.php es 5.1.3, que aún * compila esos colores a literales. Declararlos no pintaría nada y haría * creer que el tema cubre más de lo que cubre. Lo que salva a la app es * que de bootstrap solo se usan la rejilla y las utilidades — ninguna * vista de containers/ usa una clase de componente suyo. */ --bs-primary: #ff8a80; --bs-success: #4ade80; --bs-warning: #fbbf24; --bs-danger: #f87171; /* ── Aliases semánticos ──────────────────────────────────────── * Los --color-* apuntan a var(...) y siguen solos. Los *-rgb están en * tripleta cruda (los consume rgba(var(--x), .5)) y hay que reescribirlos * a mano. */ --color-primary-rgb: 255, 138, 128; --color-error-rgb: 248, 113, 113; /* ── Landing Page ────────────────────────────────────────────── * Nacieron oscuros, así que casi todo se queda. --lp-teal sube al rojo * claro por el mismo motivo que --brand: era ilegible como texto. */ --lp-teal: #ff8a80; --lp-teal2: #ffb4ab; --lp-teal-glow: rgba(255, 138, 128, 0.22); --lp-border: rgba(255, 255, 255, 0.10); --lp-card: rgba(255, 255, 255, 0.05); /* ── Sitio «Formulario radicado» en modo nocturno ───────────── * --paper/--ink/--rule/--red ya siguen solos a los tokens de arriba. * Aquí van los que en claro son valores propios del sitio. * La hoja pasa a ser papel carbón oscuro y el sello sigue siendo rojo: * --red #ff8a80 texto y trazos (≈8:1 sobre la página) * --red-fill #b3261e botones y capa destacada (blanco encima 6,5:1) * --band #6b1a16 la banda ancha: un granate, no una mancha brillante */ --paper-tint: #231b1c; --rule-strong: #8a7f80; --red-fill: #b3261e; --red-fill-hover: #c8352c; /* el hover ACLARA: oscurecer se lee como desactivado */ --band: #6b1a16; --ink-fill: #0c0909; --on-red-rule: rgba(255, 255, 255, 0.40); --on-red-rule-soft: rgba(255, 255, 255, 0.24); --shadow-btn: 0 1px 0 #6b1a16, 0 6px 14px -8px rgba(0, 0, 0, 0.7); --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 40px -24px rgba(0, 0, 0, 0.8); --shadow-tray: 0 18px 40px -16px rgba(0, 0, 0, 0.8); } /* Pinta en su variante oscura la barra de scroll y los controles NATIVOS (checkbox, radio, select, date picker), que no se pueden alcanzar con CSS propio. Sin esto se quedan blancos y son lo único de la pantalla que delata que el tema oscuro es un añadido. */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; }