/* ========================================================================== OrozcoyCo CC - Estilos Principales Sistema de Gestion Contable ========================================================================== */ /* -------------------------------------------------------------------------- 1. Temas y Variables (Lila | Azul | Oscuro) -------------------------------------------------------------------------- */ :root, [data-color="blue"] { /* Claro por defecto; el bloque oscuro lo pisa a `dark`. Fija el render de los controles nativos (select, checkbox, scrollbar) al tema de la app. */ color-scheme: light; --primary: #2563eb; --primary-light: #3b82f6; --primary-dark: #1d4ed8; --primary-bg: #eff6ff; --primary-muted: rgba(37, 99, 235, 0.12); /* Color de texto sobre fondo --primary. Default blanco para que botones primary tengan contraste WCAG-AA. Override en temas claros (mono light usa #fff porque primary es negro, mono dark usa #000 porque primary es blanco). Pensado para reemplazar `color:white` hardcoded en botones. */ --on-primary: #ffffff; --bg: #ffffff; --surface: #ffffff; --surface-2: #f8fafc; --border: #e2e8f0; --border-2: #cbd5e1; --text: #0f172a; --text-2: #475569; --text-muted: #5d6b80; /* 5.41:1 sobre blanco y 4.97 sobre --primary-bg, que es donde cae en las cards: el #64748b daba 4.37 ahi */ --sidebar-bg: #ffffff; --sidebar-text: #475569; --sidebar-active: var(--primary); --sidebar-hover: rgba(0,0,0,0.05); --sidebar-border: var(--border); --success: #047857; /* 5.49:1 sobre blanco y 5.21 sobre --success-bg; el #059669 daba 3.77 / 3.58 y fallaba AA */ --success-bg: #ecfdf5; --warning: #a84c08; /* 5.67:1 sobre blanco, 5.47 sobre --warning-bg y 4.97 sobre el --primary-bg de marca, que es el tinte mas claro donde cae. El #d97706 daba 3.07. */ --warning-bg: #fffbeb; --danger: #b91c1c; /* 6.47:1 sobre blanco y 5.89 sobre --danger-bg; el #dc2626 pasaba sobre blanco (4.83) pero daba 4.40 sobre su propio -bg */ --danger-bg: #fef2f2; /* Texto sobre un fondo semantico SOLIDO. Blanco en claro; en oscuro los semanticos se aclaran y esto pasa a negro. Mismo patron que --on-primary. */ --on-success: #ffffff; --on-warning: #ffffff; --on-danger: #ffffff; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04); --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-full: 9999px; --sidebar-width: 240px; --header-height: 60px; --transition: 200ms ease; --font: 'Inter', 'Segoe UI', system-ui, sans-serif; /* Aliases de tokens que varias paginas usaban SIN que existieran, del estilo `var(--bg-surface, #fff)`. Al no estar definidos el fallback claro ganaba SIEMPRE, tambien en oscuro: modales blancos, bordes claros, texto gris. Definirlos aca los engancha al tema en los 5 temas de una sola vez. (2026-08-26: 91 usos de 29 tokens fantasma; se enganchan los neutros, los semanticos como --bg-warning/--ok se dejan sin definir a proposito.) */ --bg-surface: var(--surface); --bg-muted: var(--surface-2); --bg-soft: var(--surface-2); --bg-input: var(--surface); --surface-alt: var(--surface-2); --border-color: var(--border); --text-1: var(--text); --text-primary: var(--text); --text-secondary: var(--text-2); --text-soft: var(--text-muted); /* Aliases --color-* para componentes legacy (components.css, responsive.css). Mapean al sistema sin prefijo. Mantener hasta migrar el CSS completo. */ --color-primary: var(--primary); --color-primary-bg: var(--primary-bg); --color-primary-dark: var(--primary-dark); --color-secondary: var(--primary-light); --color-secondary-bg: var(--primary-bg); --color-secondary-dark: var(--primary-dark); --color-accent: var(--primary); --color-accent-bg: var(--primary-bg); --color-accent-dark: var(--primary-dark); --color-bg: var(--bg); --color-bg-alt: var(--surface-2); --color-surface: var(--surface); --color-border: var(--border); --color-border-dark: var(--border-2); --color-text: var(--text); --color-text-secondary: var(--text-2); --color-text-muted: var(--text-muted); --color-danger: var(--danger); --color-danger-bg: var(--danger-bg); --color-danger-dark: var(--danger); /* ══════════════════════════════════════════════════════════════════════ PALETA DE DATOS (2026-09-24) — mapas de calor, chips de estado, gráficos ────────────────────────────────────────────────────────────────────── Luz: «pásame una paleta de colores que para todos estos gráficos y demás y mapas de calor se puedan utilizar… no pienses el tema que se está usando, si es azul, morado, rosado, claro u oscuro». UNA sola paleta para los cuatro temas de marca. Lo único que cambia es claro/oscuro. A propósito: el rojo de «vencido» significa vencido — si en el tema cute fuera rosa y en marca morado, dejaría de significar algo. El tema pinta el CROMO de la app; el DATO se pinta con esto. 🍷 POR QUÉ NO SE USA --danger-bg PARA LOS CHIPS EN OSCURO `--danger-bg` vale rgba(220,38,38,.15): un rojo OSCURO al 15% sobre un fondo casi negro se compone en #301620 — borgoña. Cualquier rojo con transparencia sobre fondo oscuro termina ahí; no es cuestión de elegir otro rojo. Por eso en oscuro el relleno es NEUTRO (la superficie elevada) y el color lo llevan la tinta y el borde. Las 12 combinaciones pasan AA; la peor es 5,9:1. ══════════════════════════════════════════════════════════════════════ */ --e-critico-bg: #fdeaea; --e-critico-ink: #9b1c1c; /* vencido 7,04:1 */ --e-grave-bg: #fdeee4; --e-grave-ink: #9a3412; /* ≤ 7 días 6,45:1 */ --e-atencion-bg: #fdf3dd; --e-atencion-ink: #854d0e; /* ≤ 15 días 6,21:1 */ --e-aviso-bg: #fefbe8; --e-aviso-ink: #713f12; /* ≤ 30 días 8,33:1 */ --e-bien-bg: #e9f7ef; --e-bien-ink: #0b6b46; /* > 30 días 5,93:1 */ --e-info-bg: #e6f4ff; --e-info-ink: #1e4b8f; /* presentada 7,63:1 */ --e-neutro-bg: #f1f5f9; --e-neutro-ink: #334155; /* sin datos 9,45:1 */ /* Series de gráficos: ORDEN FIJO. La serie 1 toma siempre --viz-1. Nunca se recicla ni se reordena — si una serie sale del filtro, las demás NO cambian de color. Más de 8 series no se resuelve con colores nuevos: se agrupa en «Otros». En dispersión o mapas usar SÓLO las 3 primeras (con más, dos dejan de distinguirse). Validado contra #ffffff: banda de luminosidad, piso de saturación, daltonismo ΔE 9,1 y visión normal ΔE 19,6. */ --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100; --viz-5: #e87ba4; --viz-6: #008300; --viz-7: #4a3aa7; --viz-8: #e34948; } [data-color="lila"] { --primary: #7c3aed; --primary-light: #8b5cf6; --primary-dark: #6d28d9; --primary-bg: #f5f3ff; --primary-muted: rgba(124, 58, 237, 0.12); --sidebar-active: var(--primary); } /* Tema CUTE: pasteles amarillo + rosa + lila (inspirado en MODELO FINANZAS) */ [data-color="cute"] { --primary: #c2255c; /* rosa raspberry vibrante (2026-09-08): reemplaza el #a34d75 (mauve apagado que se veía VINOTINTO, pedido usuaria). 5.28:1 sobre blanco (AA) y blanco encima 5.28 — sigue apto para botones con texto blanco. */ --primary-light: #ffafcc; --primary-dark: #99184a; /* hover más profundo, mismo tono limpio (7.0:1 sobre blanco) */ --primary-bg: #fff5f8; /* fondo rosa muy suave */ --primary-muted: rgba(212, 143, 184, 0.15); --sidebar-active: var(--primary); --bg: #fff8ec; /* fondo amarillo muy suave */ --surface: #ffffff; --surface-2: #fff3e4; --border: #ffe4ea; /* rosa pastel */ --border-2: #fff3b0; /* amarillo claro */ --text: #584a68; /* lavanda oscuro; 4.72:1 sobre --danger-bg (el #5d4e6d daba 4.41) */ --text-2: #7d5f8c; --text-muted: #7d5f8c; /* 5.53:1 sobre blanco, 5.02 sobre --surface-2 y 5.24 sobre --bg. El #8a6b9e daba 4.49/4.10/4.25: fallaba por poco en TODAS las superficies cute, que es de donde salian ~2000 de sus hallazgos. */ --sidebar-bg: linear-gradient(180deg, #cdb4db 0%, #ffafcc 100%); --sidebar-text: #4d3f5c; /* el blanco sobre el degrade pastel del sidebar daba 1.71-1.88:1. El probe no mide gradientes, asi que esto no salia en ningun numero. */ --sidebar-hover: rgba(255, 255, 255, 0.2); --sidebar-border: rgba(255, 255, 255, 0.15); /* Semanticos de cute: sus -bg son pasteles saturados, mucho mas claros que los neutros de :root, asi que la tinta tiene que bajar mas. */ --success: #1a6b39; /* 5.38:1 sobre --success-bg (era 3.35) */ --success-bg: #dcf7e5; /* el #c5f4d4 era un pastel saturado: dejaba --text-muted en 4.44 */ --warning: #92400e; /* 6.26:1 sobre --warning-bg (era 2.81) */ --warning-bg: #fff3b0; --danger: #8c1d3a; --danger-bg: #ffe4ec; /* el #ffafcc es el rosa de acento, demasiado saturado para llevar texto: --text-muted quedaba en 3.15 */ } /* Cute + oscuro: mantener pasteles pero sobre fondo noche */ [data-theme="dark"][data-color="cute"] { --bg: #2a1e3d; --surface: #3d2f50; --surface-2: #2f2344; --border: #5d4e6d; --text: #ffc8dd; --text-2: #e8d7f5; --primary-bg: rgba(255, 175, 204, 0.15); /* Cute primary es rosa #d48fb8 — texto blanco encima da contraste 2.5 (FAIL WCAG). Override texto a lavanda muy oscuro (igual al --bg) que contrasta 5+ con el rosa. */ --on-primary: #2a1e3d; } [data-theme="dark"] { --bg: #0f172a; --surface: #1e293b; --surface-2: #162032; --border: #334155; --border-2: #475569; --text: #f1f5f9; --text-2: #94a3b8; --text-muted: #64748b; --sidebar-bg: #0f172a; --sidebar-text: #94a3b8; --sidebar-hover: rgba(255,255,255,0.06); --sidebar-border: rgba(255,255,255,0.08); --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.3); /* 2026-09-25 — Luz, trabajando en OSCURO + MORADO: «sigo viendo todos esos vinotintos». El 2026-09-24 se migraron los chips del tablero SIMPLE a la paleta de datos y se dijo que el borgoña estaba resuelto: era FALSO. Esos tres tokens siguen siendo el fondo de 262 avisos en nomina, maximo, informes-dian, cuentas-cobrar, recaudo, asesoria y control-horas. MEDIDO, no supuesto: rgba(220,38,38,.15) sobre --surface-2 (#162032) compone en #342130 = hue 311 → ciruela/borgoña; sobre --bg (#0f172a) da #2e1929 = hue 313. Y NO se arregla bajando la opacidad: se probaron 15 mezclas (rojo #dc2626, #f87171 y #ff0000 al 10/14/18/22/28 %) y TODAS caen entre hue 274 y 348. El fondo de la app es navy, así que cualquier rojo translúcido se va a magenta — la opacidad no es la variable. Lo que sí funciona es fijar el hex OPACO quitando el azul, y así el hue queda donde corresponde: rojo 5, ámbar 35, verde 152. Contraste del texto (--text #f1f5f9) 12,0 a 13,4:1; de la tinta semántica aclarada (--danger #f87171 / --warning #fbbf24 / --success #34d399) 5,3 a 7,9:1, sobre el 4,5:1 de AA. Se tocan los TOKENS y no los 262 llamadores a propósito: 112 de ellos sólo ponen `background` sin borde ni tinta, así que dejar el relleno NEUTRO (como en los chips) les quitaría el aviso entero — cambiaría el borgoña por «ningún color». Acá el relleno sigue avisando. --primary-bg se deja translúcido: el azul/morado sobre navy no produce el defecto, y [data-theme="dark"][data-color="lila"] lo redefine. */ --success-bg: #1d352a; --warning-bg: #3a2e1d; --danger-bg: #3a2220; --primary-bg: rgba(37, 99, 235, 0.15); /* Semanticos ACLARADOS para oscuro (2026-08-26). Los valores de tema claro estan pensados para leerse sobre blanco; sobre el carbon el rojo daba 3.59:1 — bajo AA. Se usan como TEXTO en ~194 lugares y como fondo solido en solo 4, asi que conviene optimizarlos para texto y cubrir esos 4 con --on-*. Medido sobre --surface: rojo 6.27, verde 9.02, ambar 10.39. */ --danger: #f87171; --success: #34d399; --warning: #fbbf24; --on-danger: #0a0a0a; /* 7.16:1 sobre el rojo claro (blanco daria 2.77) */ --on-success: #0a0a0a; /* 10.30:1 */ --on-warning: #0a0a0a; /* 11.86:1 */ /* Paleta de datos — oscuro. El relleno de los chips es NEUTRO (surface-2): un rojo translúcido sobre fondo oscuro da borgoña, así que el color lo llevan la tinta y el borde. Contrastes 8,6:1 a 11,9:1. */ --e-critico-bg: var(--surface-2); --e-critico-ink: #fca5a5; --e-grave-bg: var(--surface-2); --e-grave-ink: #fdba74; --e-atencion-bg: var(--surface-2); --e-atencion-ink: #fcd34d; --e-aviso-bg: var(--surface-2); --e-aviso-ink: #fde68a; --e-bien-bg: var(--surface-2); --e-bien-ink: #6ee7b7; --e-info-bg: var(--surface-2); --e-info-ink: #93c5fd; --e-neutro-bg: var(--surface-2); --e-neutro-ink: #cbd5e1; /* Series: mismos ocho matices, escalonados para la superficie oscura. Validado contra #1e293b: daltonismo ΔE 8,4 · visión normal ΔE 19,3. */ --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; --viz-5: #d55181; --viz-6: #008300; --viz-7: #9085e9; --viz-8: #e66767; } [data-theme="dark"][data-color="lila"] { --primary-bg: rgba(124, 58, 237, 0.15); } /* Tema MARCA: paleta oficial orozco&co (azul #4A66F5 + lila #A78BFA) */ [data-color="marca"] { /* MORADO de marca (2026-08-31): unificado al morado del ícono/PWA #7C3AED por pedido de la usuaria ("unifica el botón de tema a morado"). Antes era azul #4159E8 (tuneado el 2026-08-27). El morado #7C3AED PASA AA con MÁS margen que el azul anterior en todas las superficies del tema: blanco 5.70:1 (era 5.50), --bg #fafaff 5.48 (era 5.28), --primary-bg #f0eeff 4.99 (era 4.81), --surface-2 #f5f3ff 5.20 (era 5.01), y texto blanco sobre --primary 5.70. Verificado con el calculador de contraste WCAG antes de cambiar. */ --primary: #7C3AED; /* morado de marca, AA-verificado (ver arriba) */ --primary-light: #A78BFA; --primary-dark: #6D28D9; /* hover: oscurece (7.10:1 sobre blanco) */ --primary-bg: #f0eeff; --primary-muted: rgba(139, 111, 232, 0.14); --bg: #fafaff; --surface: #ffffff; --surface-2: #f5f3ff; --border: #e6e3f5; --border-2: #d4cfee; --text: #0A0A0F; --text-2: #4a4a5e; --text-muted: #6b6c80; /* 5.14:1 sobre blanco (antes #8a8ba0 -> 3.34:1) */ --sidebar-bg: #ffffff; --sidebar-text: #4a4a5e; --sidebar-active: #8B6FE8; --sidebar-hover: rgba(139, 111, 232, 0.08); --sidebar-border: #e6e3f5; --font: 'Geist', 'Inter', system-ui, sans-serif; } /* Tema MONO: blanco/negro puro, neutro sin tinte de color */ [data-color="mono"] { --primary: #000000; --primary-light: #333333; --primary-dark: #000000; --primary-bg: #f5f5f5; --primary-muted: rgba(0, 0, 0, 0.10); --bg: #ffffff; --surface: #ffffff; --surface-2: #fafafa; --border: #e5e5e5; --border-2: #d4d4d4; --text: #000000; --text-2: #333333; --text-muted: #6b6b6b; /* 4.89:1 sobre --primary-bg (era 4.35) */ --sidebar-bg: #ffffff; --sidebar-text: #333333; --sidebar-active: #000000; --sidebar-hover: rgba(0, 0, 0, 0.05); --sidebar-border: #e5e5e5; } /* Marca + oscuro: fondos casi-negros del manual de marca */ [data-theme="dark"][data-color="marca"] { --bg: #07070C; --surface: #12131F; --surface-2: #191A29; --border: rgba(255, 255, 255, 0.08); --border-2: rgba(255, 255, 255, 0.14); --text: #F5F5F7; --text-2: #8A8B9A; --text-muted: #5E5F70; --sidebar-bg: #07070C; --sidebar-text: #8A8B9A; --sidebar-hover: rgba(255, 255, 255, 0.04); --sidebar-border: rgba(255, 255, 255, 0.08); --primary-bg: rgba(79, 107, 255, 0.15); --primary-muted: rgba(167, 139, 250, 0.18); } /* -------------------------------------------------------------------------- 2. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font); font-size: 0.9375rem; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: var(--primary); text-decoration: none; } /* Un sin background propio lo pinta el navegador con `Canvas` = BLANCO, tambien en tema oscuro. Se notaba poco mientras el texto era oscuro fijo; al pasar el texto a tokens quedaba claro sobre blanco. Selector de tipo (la especificidad mas baja), asi que cualquier regla de clase de una pagina gana. */ dialog { background: var(--surface); color: var(--text); } ul, ol { list-style: none; } table { border-collapse: collapse; width: 100%; } button { cursor: pointer; font-family: inherit; border: none; background: none; } input, select, textarea { font-family: inherit; font-size: inherit; } fieldset { border: none; } /* -------------------------------------------------------------------------- 3. Login Page -------------------------------------------------------------------------- */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 1.5rem; } .login-container { width: 100%; max-width: 400px; } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem 2rem; box-shadow: var(--shadow-md); } .login-card__header { text-align: center; margin-bottom: 2rem; } .login-card__logo { margin-bottom: 1rem; } .login-card__logo-fallback { width: 52px; height: 52px; background: var(--primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin: 0 auto; } .login-card__logo-text { color: var(--on-primary, #fff); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; } .login-card__logo-img { height: 48px; margin: 0 auto; } .login-card__title { font-size: 1.375rem; font-weight: 700; color: var(--text); margin-bottom: 0.25rem; letter-spacing: -0.02em; } .login-card__subtitle { font-size: 0.875rem; color: var(--text-2); } .login-card__form { display: flex; flex-direction: column; gap: 1.25rem; } .login-card__footer { text-align: center; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .login-card__copyright { font-size: 0.75rem; color: var(--text-muted); } /* -------------------------------------------------------------------------- 4. Form elements -------------------------------------------------------------------------- */ .form-group { display: flex; flex-direction: column; gap: 0.375rem; } .form-label { font-size: 0.8125rem; font-weight: 500; color: var(--text-2); } .form-input-wrapper { position: relative; } .form-input { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--border-2); border-radius: var(--radius-md); font-size: 0.9375rem; color: var(--text); background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-input-wrapper .form-input { padding-right: 2.75rem; } .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-muted); } .form-input::placeholder { color: var(--text-muted); } .form-input-icon { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; } .form-input-icon:hover { color: var(--text-2); } .form-select { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--border-2); border-radius: var(--radius-md); font-size: 0.9375rem; color: var(--text); background: var(--surface); outline: none; appearance: none; cursor: pointer; } .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-muted); } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all var(--transition); border: 1px solid transparent; white-space: nowrap; /* Los