/* SEINGELEC · paquete generado por tools/build-assets.php · 2026-09-25 10:29 NO editar acá: los cambios van en el archivo original y se vuelve a correr el script. */ /* ═══ css/tokens.css ═══ */ /* ============================================================ SEINGELEC Gestión v2 · Design Tokens Basado en Design System v12 (Claude Design · 2026-05-26) Cálido · Crema dominante · Esquinas suaves ============================================================ */ :root { /* ---------- Marca ---------- */ --brand-yellow: #FFCF00; --brand-yellow-dark: #E6BB00; /* Tinta de marca · para TEXTO amarillo sobre fondo claro. `--brand-yellow-dark` no es un amarillo oscuro: es amarillo, y da 1,76:1 sobre el crema de las tarjetas — cuando el mínimo legible es 4,5. Medido el 8-sep-2026 en producción, donde se estaba usando para la línea «cobrado $21.668.536 · pagado $20.116.481» del panel de Finanzas y para el ítem activo de la barra inferior en el teléfono. Es el mismo error que `--brand-navy` sobre fondos oscuros, del otro lado de la rueda. Éste da 5,77:1 sobre crema y sigue siendo de la familia del amarillo. */ --brand-ink: #7A6000; --brand-yellow-soft: #FFFBE6; --brand-yellow-300: #FFE062; --brand-yellow-100: #FFF4B8; --brand-navy: #1A1A18; --brand-navy-medium: #2A2C24; --brand-navy-soft: #3A3B33; /* ---------- Neutros (light) ---------- */ --cream-base: #F5F5F0; --cream-50: #FAFAF6; --cream-100: #ECEAE5; --cream-200: #E0DED7; --border-default: #D4D4CF; --border-subtle: #E2E0DA; /* ---------- Jerarquía de texto · TRES niveles reales ---------- Problema resuelto: secondary #6B6B68 (4.83 sobre cream) y disabled #6F6F6C (4.61) estaban a 0,22 de contraste — el tercer nivel no existía en la práctica. Ahora hay separación perceptible y los tres niveles siguen pasando AA sobre crema (#F5F5F0): primary 16.1 : 1 · el dato, el título, la cifra secondary 6.2 : 1 · etiqueta, subtítulo, meta tertiary 4.5 : 1 · placeholder, deshabilitado, marca de agua Debajo de tertiary no hay nivel: si algo necesita ser más tenue, el problema es de tamaño o de posición, no de color. */ --text-primary: #1A1A18; --text-secondary: #5A5A56; --text-tertiary: #6F6F67; --text-disabled: #6F6F67; --surface-base: #FFFFFF; --surface-elevated: #FFFFFF; --surface-sunken: #ECEAE5; /* Cuarto nivel · lo que flota sobre una tarjeta: modal, drawer, popover, menú. En claro es el mismo blanco y lo que lo separa es la sombra; en oscuro tiene que ser más claro que la tarjeta, porque ahí la sombra no dice nada. */ --surface-raised: #FFFFFF; /* Borde de luz · la línea de 1 px arriba que hace que algo se vea levantado. En claro es casi invisible; en oscuro es LO que separa una tarjeta del fondo, más que la luminancia. */ --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.9); /* ---------- Semánticos ---------- */ --success: #276749; --success-soft: #DCEFE3; /* Antes #B45309 contraste 4.29 sobre warning-soft — falla AA body. Subido a #9D470A → 5.37 PASS. */ --warning: #9D470A; --warning-soft: #FCEBD1; /* Antes #C53030 contraste 4.39 — falla AA body. #A52424 → 5.85 PASS. */ --error: #A52424; --error-soft: #FBE0E0; /* 18-sep-2026 · era #1565C0, el azul de Material Design: el único semántico que no se retocó en la v38 y el que más saltaba contra el crema. Los otros tres ya eran tonos de tierra (verde bosque, naranja quemado, ladrillo); éste era de otra paleta y se notaba en 34 lugares —los chips «Por iniciar», «AFP Modelo», «Fonasa»—. Ahora es un azul de acero profundo, del lado frío de la misma familia. */ --info: #27567F; --info-soft: #E4EBF1; /* Neutro semántico · "Borrador", "Sin control", "Pendiente de emitir". Antes compartía el gris de badge por defecto con "Anulada", que significa lo contrario. Ahora borrador = tinta viva pero neutra. */ --draft: #4A4E58; --draft-soft: #E7E9EE; /* Anulado / cancelado · gris ceniza con tachado semántico. Nunca rojo: rojo es "esto exige acción", anulado es "esto ya no existe". #6E6C64 daba 4.41 sobre su propio soft — falla AA. #6B6961 → 4.61 PASS. */ --void: #6B6961; --void-soft: #EDEBE4; /* ---------- Velos y lavados (18-sep-2026) ---------- Nacen de contar el codigo: habia 30 `rgba(0,0,0,.x)` sueltos repartidos en 20 archivos. Un negro translucido sobre fondo claro oscurece, que es lo que se queria; sobre fondo oscuro tambien oscurece, o sea que no hace NADA. Por eso el menu que se levanta y la fila que se ilumina al pasar el mouse desaparecian en modo oscuro. --velo el fondo detras de un modal o un panel: siempre oscurece, en los dos temas, porque lo de atras tiene que retroceder. --lavado el toque que levanta una fila o una celda: aclara en oscuro y oscurece en claro. Es la unica forma de que "levantar" se vea levantado en los dos lados. */ --velo: rgba(20, 20, 15, .55); --velo-suave: rgba(20, 20, 15, .28); --lavado: rgba(0, 0, 0, .06); --lavado-fuerte: rgba(0, 0, 0, .12); /* La tinta que va ENCIMA de un relleno de color (el navy, el verde de "listo", el amarillo de marca). No es `--text-primary`: ese sigue al tema y sobre un relleno saturado quedaria ilegible la mitad de las veces. Este es fijo a proposito, porque el relleno tambien lo es. */ --tinta-sobre-color: #FFFFFF; /* ---------- Paleta de datos ---------- Croma y luminosidad emparejadas: las series se distinguen por tono, no porque una grite más que otra. Derivadas del amarillo de marca girando hacia frío, todas conviven con el crema. Uso EXCLUSIVO en gráficos, anillos, barras de avance y sparklines. Van primero en hexadecimal y recién después en OKLCH, dentro de un @supports. Motivo: si el navegador no entiende oklch() o color-mix(), la declaración que las consume queda inválida y la propiedad cae al valor inicial — o sea `background: transparent`. La barra no se ve "menos linda": DESAPARECE. Safari necesita ~16.4 para color-mix y ~15.4 para oklch, y en terreno hay iPads que no llegan. */ --viz-1: #FFC53D; /* marca · oro */ --viz-2: #FF7A45; /* coral */ --viz-3: #2AD8C6; /* turquesa */ --viz-4: #4C6FFF; /* azul */ --viz-5: #A56BFF; /* violeta */ --viz-6: #21C97A; /* verde */ /* Fondo del degradado · cada serie va de su tono al de abajo. Un relleno plano se ve barato; el degradado corto es lo que separa un gráfico de tablero de uno de planilla. */ --viz-1-deep: #F0A000; --viz-2-deep: #ED4E1F; --viz-3-deep: #00AFA3; --viz-4-deep: #2E4BDB; --viz-5-deep: #7C3FE4; --viz-6-deep: #0FA25F; /* TINTA de cada serie · para lo que es FINO: la línea de 2 px, el punto, el texto de la leyenda, el número sobre la barra. La regla que hace que esto funcione: el relleno puede brillar porque es una masa grande y lo lee el ojo de lejos; la tinta es la que tiene que pasar 4,5:1, porque es la que se lee de cerca. Medir el relleno contra el fondo con la vara del texto es lo que dejó la paleta anterior apagada — y apagada tampoco se leía mejor: viz-1 daba 1,75. */ --viz-ink-1: #8A5A00; --viz-ink-2: #B23A17; --viz-ink-3: #00706A; --viz-ink-4: #2A46C4; --viz-ink-5: #6034C9; --viz-ink-6: #0C7A4A; --viz-grid: rgba(26, 26, 24, 0.08); --viz-axis: rgba(26, 26, 24, 0.42); /* ---------- Foco ---------- Un solo anillo para toda la app. Doble capa: halo cálido de marca + contorno oscuro, para que se vea tanto sobre crema como sobre navy y sobre el amarillo del CTA (donde un ring amarillo desaparecería). */ --focus-ring: 0 0 0 2px var(--surface-elevated), 0 0 0 4px var(--brand-navy), 0 0 0 7px rgba(255, 207, 0, 0.45); --focus-ring-dark: 0 0 0 2px var(--brand-navy), 0 0 0 4px var(--brand-yellow), 0 0 0 7px rgba(255, 207, 0, 0.22); /* ---------- Vidrio ---------- Solo rinde donde hay contenido pasando por debajo: barras fijas, overlays, drawers. En filas de tabla y listas largas está prohibido (mata el scroll en Safari iOS y baja la legibilidad). */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-blur: saturate(180%) blur(20px); /* @kind other */ --glass-border: rgba(255, 255, 255, 0.55); --glass-line: inset 0 0.5px 0 rgba(255, 255, 255, 0.85); /* @kind shadow */ --glass-navy-bg: rgba(22, 22, 20, 0.78); /* ---------- Fondo del lienzo ---------- El crema plano no le daba nada a las sombras ni al vidrio para apoyarse. Dos halos amplísimos (uno cálido de marca arriba a la izquierda, uno frío abajo a la derecha) sobre el crema base: no se lee como gradiente, se lee como luz de ambiente. */ --app-bg: radial-gradient(1200px 680px at 8% -12%, rgba(255, 207, 0, 0.085), transparent 62%), radial-gradient(1000px 700px at 104% 108%, rgba(90, 110, 140, 0.070), transparent 60%), var(--cream-base); /* ---------- Tipografía ---------- */ --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* ---------- Escala tipográfica del producto ---------- Los nombres siguen siendo el tamaño BASE en px (--text-13 = 13 de base), pero el valor real se multiplica por --text-scale. Un solo número mueve toda la tipografía del sistema sin tocar ninguna regla. 11-ago-2026 · se subió de 1 a 1.12: en monitor grande el cuerpo de 14px y las etiquetas de 10-11px se leían diminutas. 1.12 deja el cuerpo en ~15.7px y las etiquetas en ~12, que es donde las quiere Apple en desktop. Para volver atrás, poner 1 acá y listo. */ --text-scale: 1.12; --text-10: calc(10px * var(--text-scale)); --text-11: calc(11px * var(--text-scale)); --text-12: calc(12px * var(--text-scale)); --text-13: calc(13px * var(--text-scale)); --text-14: calc(14px * var(--text-scale)); --text-15: calc(15px * var(--text-scale)); --text-16: calc(16px * var(--text-scale)); --text-18: calc(18px * var(--text-scale)); --text-20: calc(20px * var(--text-scale)); --text-22: calc(22px * var(--text-scale)); --text-24: calc(24px * var(--text-scale)); --text-26: calc(26px * var(--text-scale)); --text-28: calc(28px * var(--text-scale)); --text-32: calc(32px * var(--text-scale)); --text-36: calc(36px * var(--text-scale)); /* ---------- Espaciado (base 4px) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---------- Border radius ---------- */ /* ---------- Iconos · grilla óptica ---------- Tres tamaños y nada más. Un icono a 17 px se dibuja entre líneas de píxel y sale borroso; a 20 px cae en la grilla y queda nítido. sm 16 · dentro de un distintivo, de un chip, de una celda md 20 · el tamaño por defecto: barra lateral, botones, listas lg 24 · encabezados de sección y estados vacíos */ --ico-sm: 16px; --ico-md: 20px; --ico-lg: 24px; --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 9999px; /* ---------- Touch (iPad/mobile) · Apple HIG ---------- */ --touch-min: 44px; /* target mínimo Apple/W3C */ --touch-comfortable: 48px; /* recomendado uso terreno guante */ --font-input-mobile: 16px; /* anti-zoom Safari iOS */ --tap-hl: transparent; /* @kind color */ /* ---------- Safe-area iOS (notch iPad Pro M) ---------- */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* ---------- Breakpoints (referencia · no usables en CSS vars) ---------- mobile: <= 640px · phone portrait, bottom nav tablet: 641-1024 · iPad Pro 11 portrait, sidebar drawer desktop: >= 1025 · Mac / iPad Pro landscape, sidebar fija U-7 · Los cortes que EXISTEN, y no se inventan otros: 380 · 480 teléfono chico / teléfono 640 mobile (el de arriba) 767 / 768 tablet chica · el corte del menú lateral 1024 / 1025 tablet · el de arriba 1100 · 1280 · 1440 anchos de escritorio (tablas pegajosas, padding) Medido el 8-sep-2026: había diez cortes distintos, y 600, 680, 720 y 820 hacían lo mismo que 640 y 767 con veinte píxeles de diferencia. Cada arreglo responsive había que probarlo en diez anchos en vez de tres. Se plegaron a los de arriba y `cli/pruebas.php` no deja entrar uno nuevo. */ --bp-mobile: 640px; /* @kind other */ --bp-tablet: 1024px; /* @kind other */ /* ---------- Sombras · Apple-tier multi-layer diffused ---------- Múltiples capas con tint hacia el brand (cálido). Cada sombra suma una capa cercana de definición + una capa lejana ambient/diffused. Inset highlight emula "luz desde arriba" físico como hardware pulido (Apple Glass / Linear) en lugar de drop shadow plano CSS. */ --shadow-card: 0 1px 2px rgba(26, 26, 24, 0.04), 0 4px 12px rgba(26, 26, 24, 0.06), inset 0 0.5px 0 rgba(255, 255, 255, 0.6); --shadow-hover: 0 2px 4px rgba(26, 26, 24, 0.06), 0 12px 32px rgba(26, 26, 24, 0.10), inset 0 0.5px 0 rgba(255, 255, 255, 0.7); --shadow-overlay: 0 8px 16px rgba(26, 26, 24, 0.08), 0 32px 80px rgba(26, 26, 24, 0.20), inset 0 0.5px 0 rgba(255, 255, 255, 0.5); /* CTA primario · amarillo con halo cálido (tinted brand, no negro plano) */ --shadow-yellow: 0 1px 2px rgba(230, 187, 0, 0.20), 0 4px 14px rgba(255, 207, 0, 0.32), 0 12px 28px rgba(255, 207, 0, 0.16), inset 0 0.5px 0 rgba(255, 255, 255, 0.55); /* Sombra "hero" para KPIs principales (Double-Bezel aware) */ --shadow-hero: 0 1px 2px rgba(26, 26, 24, 0.04), 0 6px 20px rgba(26, 26, 24, 0.08), 0 24px 56px rgba(26, 26, 24, 0.05), inset 0 0.5px 0 rgba(255, 255, 255, 0.7); --shadow-inset: inset 0 0 0 1px var(--border-default); /* Sombra mínima · chips, badges elevados, thead pegajoso */ --shadow-sm: 0 1px 1px rgba(26, 26, 24, 0.04), 0 2px 6px rgba(26, 26, 24, 0.05); /* Vidrio · sombra difusa larga + borde de luz. Sin el inset el blur parece suciedad, no material. */ --shadow-glass: 0 1px 0 rgba(26, 26, 24, 0.05), 0 12px 40px rgba(26, 26, 24, 0.10), inset 0 0.5px 0 rgba(255, 255, 255, 0.85); /* ---------- Layout ---------- */ --sidebar-width: 200px; --topbar-height: 48px; --m-header-height: 52px; --m-bottomnav-height: 68px; /* ---------- Z-index ---------- Escala semántica completa. NO usar valores arbitrarios tipo 9999 fuera de esta tabla — todo elemento sticky/fixed referencia un token. */ --z-sidebar: 100; /* @kind other */ --z-topbar: 100; /* @kind other */ /* El aviso de «datos parciales» va ENCIMA del contenido y DEBAJO de los overlays. Estaba en 1800 escrito a mano —por encima de todo, incluida la firma— y el resultado, medido el 8-sep-2026: con el aviso visible, el botón de cerrar de cualquier modal quedaba tapado por la barra y el clic lo recibía el aviso. No se podía cerrar un modal con la X. Un aviso informativo no tapa una interacción activa. */ --z-banner-datos: 130; /* @kind other */ --z-overlay: 150; /* @kind other */ --z-modal: 200; /* @kind other */ --z-toast: 300; /* @kind other */ --z-search: 400; /* @kind other */ --z-banner-offline: 500; /* @kind other */ --z-pwa-install: 520; /* @kind other */ --z-splash: 600; /* @kind other */ --z-pwa-modal: 700; /* @kind other */ --z-confirm: 800; /* @kind other */ /* El salto al contenido tiene que verse por encima de la barra superior y de la lateral cuando toma el foco. No compite con los modales: si hay uno abierto, el foco está atrapado adentro y el salto no aplica. */ --z-salto: 900; /* @kind other */ /* 400 búsqueda global Cmd+K · 500 banner sin conexión · 520 banner "Instalá SEINGELEC" · 600 boot-loader · 700 instructivo iOS · 800 piso de los modales de confirmación. */ /* ⚠ De 1000 para arriba NO se escriben números a mano. Drawers y modales piden su capa con `Sei.ui.modals.nextZ()`, que mira lo que ya hay abierto y devuelve una por encima (arranca en Z_BASE = 1000). Un `.modal-overlay` sin z-index propio lo eleva solo un observador; si se le fija uno, ese mecanismo queda desactivado y el modal aparece DETRÁS del panel que lo abrió — que es exactamente lo que pasaba con --z-confirm: 800 contra un drawer en 1010. `--z-confirm` marca el piso, no el techo. */ /* ---------- Motion · Easings ---------- Las curvas built-in de CSS (ease, ease-out) son débiles — les falta el "punch" que hace que las animaciones se sientan intencionales. Estas curvas son las que usan Apple, Linear, Vercel y Sonner. */ /* ease-out: UI, entrada de elementos · in-out: movimiento en pantalla drawer: iOS-like, drawers y sheets · spring: overshoot sutil, badges */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* @kind other */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* @kind other */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* ---------- Motion · Duraciones ---------- instant: feedback de press · fast: hover y tap · base: dropdowns, toasts · slow: modales y drawers · page: transiciones de página. */ --duration-instant: 100ms; /* @kind other */ --duration-fast: 160ms; /* @kind other */ --duration-base: 200ms; /* @kind other */ --duration-slow: 280ms; /* @kind other */ --duration-page: 400ms; /* @kind other */ } /* ============================================================ ACCESIBILIDAD · Reduced motion Para usuarios con vértigo o sensibilidad vestibular: anular movimientos pero mantener fades/colores (esos AYUDAN a comprender). ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { /* Reducir animaciones a casi-cero pero NO a 0 (algunas dependen del evento animationend que sí queremos que dispare) */ animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } /* Skeleton wave queda sin shimmer */ .skeleton { animation: none !important; background: var(--cream-100) !important; } } /* ---------- Dark mode ---------- */ [data-theme="dark"] { --cream-base: #14140F; --cream-50: #1B1B16; --cream-100: #1F1F1A; --cream-200: #26261F; /* Subidos junto con las superficies: #2A2B25 contra la tarjeta nueva (#282820) es el mismo color, y el borde de las tarjetas desaparecía. */ --border-default: #47483E; --border-subtle: #36372E; --text-primary: #F5F5F0; --text-secondary: #ADADA6; /* Tertiary se midió contra el fondo de página (#14140F), pero casi siempre vive DENTRO de una tarjeta (--surface-elevated #232319), que es más claro. #85857E daba 4.26 ahí — falla AA. #8A8A83 → 4.56 sobre tarjeta y 5.32 sobre el fondo: pasa en los dos sitios. */ /* Con la tarjeta en #282820, #8A8A83 cae a 4,16 — falla AA. #97968D → 4,63 sobre tarjeta y 5,93 sobre el fondo: pasa en los dos. */ --text-tertiary: #97968D; --text-disabled: #97968D; --draft: #C4CAD6; --draft-soft: #2F333D; /* Con el soft nuevo, #8F8D84 ya no llega: #9D9B91 → 4,55 PASS. */ /* En oscuro el velo tiene que ser MAS negro (lo de atras ya es oscuro y si no, no retrocede) y el lavado tiene que ACLARAR, no oscurecer. */ --velo: rgba(0, 0, 0, .66); --velo-suave: rgba(0, 0, 0, .40); --lavado: rgba(255, 255, 255, .07); --lavado-fuerte: rgba(255, 255, 255, .13); --void: #9D9B91; --void-soft: #33332B; /* Los rellenos casi no cambian — un tono vivo sobre negro se ve igual de bien. Lo que SÍ se da vuelta es la tinta: sobre fondo claro es la versión profunda del tono, sobre fondo oscuro tiene que ser la clara, si no el trazo fino desaparece. */ --viz-1: #FFCE5C; --viz-2: #FF8F63; --viz-3: #3EE4D1; --viz-4: #6C88FF; --viz-5: #B98AFF; --viz-6: #3ED98F; --viz-1-deep: #F5B100; --viz-2-deep: #F06437; --viz-3-deep: #12C7B8; --viz-4-deep: #4867E8; --viz-5-deep: #9257F0; --viz-6-deep: #17B36D; --viz-ink-1: #FFDC8E; --viz-ink-2: #FFB098; --viz-ink-3: #6FE3D5; --viz-ink-4: #A8B8FF; --viz-ink-5: #D0B0FF; --viz-ink-6: #7FE6B5; --viz-grid: rgba(255, 255, 255, 0.10); --viz-axis: rgba(255, 255, 255, 0.40); --focus-ring: var(--focus-ring-dark); /* Vidrio en oscuro: menos opacidad no alcanza — hay que BAJAR el brillo del borde de luz, si no el marco blanco flota sobre el fondo negro. */ --glass-bg: rgba(35, 35, 25, 0.72); --glass-border: rgba(255, 255, 255, 0.10); --glass-line: inset 0 0.5px 0 rgba(255, 255, 255, 0.12); /* @kind shadow */ --glass-navy-bg: rgba(12, 12, 10, 0.80); --app-bg: radial-gradient(1200px 680px at 8% -12%, rgba(255, 207, 0, 0.055), transparent 62%), radial-gradient(1000px 700px at 104% 108%, rgba(90, 130, 190, 0.055), transparent 60%), var(--cream-base); /* Medido el 18-sep-2026 con `php tools/contraste.php`: la tarjeta (#232319) contra el fondo de página (#14140F) daba 1,17 — o sea que en oscuro las tarjetas no existían, eran manchas del mismo tono. Y como en oscuro la sombra no se ve, no había nada más que las separara. Se sube cada nivel y se agrega `--edge-light`, que es lo que de verdad dibuja el canto de una tarjeta sobre negro. */ --surface-base: #1E1E18; --surface-elevated: #282820; --surface-sunken: #16160F; --surface-raised: #34342B; --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.055); --brand-yellow-soft: #2A2410; /* Sobre fondo oscuro el amarillo pleno SÍ se lee: 11:1. */ --brand-ink: #FFCF00; --brand-yellow-100: #36300F; /* Los semánticos NO se heredában en oscuro: #276749 sobre #163524 da 1.9:1 y "Sin pendientes" o "Saldo +$249.000" quedaban ilegibles. Se suben a versiones claras del mismo tono: pasan AA tanto sobre el -soft oscuro como sobre surface-elevated. Los usos donde el color es FONDO con texto blanco (toasts, .btn--danger, embudo ganado) llevan su propio override en components.css / dashboards.css, y el documento imprimible se re-ancla a los valores de papel en informes.css — la hoja siempre es blanca. */ --success: #5FCB8E; --warning: #EFAF56; --error: #F28A8A; --info: #74B0F0; /* Medidos contra la tarjeta nueva, no contra el fondo de página: es donde viven. Antes daban 1,18 / 1,15 / 1,00 / 1,09 — o sea que la pastilla de "vencido" y la de "informativo" no se veían. */ --success-soft: #1C4530; --warning-soft: #46330F; --error-soft: #562828; --info-soft: #17385C; /* Dark mode · sombras más profundas, inset highlight más sutil */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.50), inset 0 0.5px 0 rgba(255, 255, 255, 0.08); --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.55), inset 0 0.5px 0 rgba(255, 255, 255, 0.10); --shadow-overlay: 0 8px 16px rgba(0, 0, 0, 0.50), 0 32px 80px rgba(0, 0, 0, 0.70), inset 0 0.5px 0 rgba(255, 255, 255, 0.06); --shadow-yellow: 0 1px 2px rgba(230, 187, 0, 0.15), 0 4px 14px rgba(255, 207, 0, 0.22), 0 12px 28px rgba(255, 207, 0, 0.12), inset 0 0.5px 0 rgba(255, 255, 255, 0.10); --shadow-hero: 0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 20px rgba(0, 0, 0, 0.55), 0 24px 56px rgba(0, 0, 0, 0.45), inset 0 0.5px 0 rgba(255, 255, 255, 0.08); --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-glass: 0 1px 0 rgba(0, 0, 0, 0.40), 0 12px 40px rgba(0, 0, 0, 0.50), inset 0 0.5px 0 rgba(255, 255, 255, 0.10); } /* ============================================================ PALETA DE DATOS · versión de gama amplia Los hexadecimales de arriba son el piso: se ven en cualquier navegador. Acá se pisan con los OKLCH originales, que tienen croma y luminosidad emparejadas de verdad, solo donde el navegador los entiende. Un navegador viejo no queda sin color, queda con el color aproximado. ============================================================ */ @supports (color: oklch(0.5 0.1 200)) { :root { --viz-1: oklch(0.84 0.158 86); --viz-2: oklch(0.71 0.183 42); --viz-3: oklch(0.73 0.132 185); --viz-4: oklch(0.58 0.222 267); --viz-5: oklch(0.63 0.212 300); --viz-6: oklch(0.74 0.164 158); } [data-theme="dark"] { --viz-1: oklch(0.86 0.152 88); --viz-2: oklch(0.75 0.158 44); --viz-3: oklch(0.79 0.136 184); --viz-4: oklch(0.67 0.181 268); --viz-5: oklch(0.70 0.175 299); --viz-6: oklch(0.80 0.152 159); } } @supports (color: color-mix(in oklab, red 50%, transparent)) { :root { --viz-grid: color-mix(in oklab, var(--text-primary) 8%, transparent); --viz-axis: color-mix(in oklab, var(--text-primary) 42%, transparent); } [data-theme="dark"] { --viz-grid: color-mix(in oklab, #fff 10%, transparent); --viz-axis: color-mix(in oklab, #fff 40%, transparent); } } /* ═══ css/reset.css ═══ */ /* ═══════════════════════════════════════════════════════════ Reset moderno — basado en Josh Comeau + ajustes Sei ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } html, body { height: 100%; font-family: var(--font-body); font-size: var(--text-14); line-height: 1.5; color: var(--text-primary); background: var(--cream-base); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: var(--tap-hl, transparent); /* Momentum scroll iOS · scroll fluido */ -webkit-overflow-scrolling: touch; /* No bounce overscroll · evita rebote raro al hacer pull */ overscroll-behavior-y: contain; /* Bloquea zoom doble-tap manteniendo pinch-zoom */ touch-action: manipulation; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; -webkit-tap-highlight-color: var(--tap-hl, transparent); } /* ═══ iPad / iOS · anti-zoom Safari y touch targets ═══ Safari hace zoom automático en focus si font-size < 16px. Forzamos 16px en mobile/tablet pero respetamos tamaño visual con font-size diferente via inline si es necesario. */ @media (max-width: 1024px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: var(--font-input-mobile, 16px) !important; } /* Touch targets mínimos para botones e interactivos */ button, [role="button"], a.btn, .btn, .icon-btn, .icon-btn-mini { min-height: var(--touch-min, 44px); min-width: var(--touch-min, 44px); } /* Excepción: botones dentro de tablas pueden ser un poco menores (40px) si el contexto está apretado. Lo manejamos via clase explícita. */ .btn--sm { min-height: 40px; min-width: 40px; } } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } button { cursor: pointer; background: none; border: none; padding: 0; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } table { border-collapse: collapse; width: 100%; } #root, #app { isolation: isolate; } /* Focus visible accesible siempre · WCAG 2.4.7 (Level AA) Mapeado a tokens reales (antes referenciaba --brand-primary fantasma) */ :focus-visible { outline: 2px solid var(--brand-yellow-dark); outline-offset: 2px; border-radius: var(--r-sm); } /* Scrollbar elegante · tokens reales */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--cream-200); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-default); } /* Selection */ /* 16-sep-2026 · antes era --brand-yellow-soft: #FFFBE6 sobre blanco (invisible) y en oscuro #2A2410 con texto #1A1A18 (oscuro sobre oscuro). Amarillo pleno en los dos. */ ::selection { background: var(--brand-yellow); color: #1A1A18; } input::selection, textarea::selection { background: var(--brand-yellow); color: #1A1A18; } /* ═══ css/components.css ═══ */ /* ============================================================ SEINGELEC Gestión v2 · Componentes del producto Escala real de la app (no escala de presentación). Basado en Design System v12 · screens.css (clases m- y d-) ============================================================ */ /* ============================================================ BOTONES ============================================================ */ .btn { font-family: var(--font-body); font-size: var(--text-15); font-weight: 600; border: none; cursor: pointer; padding: 10px 16px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* Propiedades explícitas + ease-out fuerte (antes era `120ms ease` = transition:all con curva débil). */ transition: transform var(--duration-instant) var(--ease-out), background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); white-space: nowrap; text-decoration: none; line-height: 1; } .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* Feedback de PRESIÓN universal — la regla #1 de Emil para PWA mobile. Sin esto los botones no se "sienten" cuando los tocás en obra. */ .btn:active { transform: scale(0.97); transition-duration: var(--duration-instant); } .btn--primary { background: var(--brand-yellow); color: var(--brand-navy); box-shadow: var(--shadow-yellow); } .btn--secondary { background: var(--surface-elevated); color: var(--text-primary); border: 1.5px solid var(--border-default); } .btn--ghost { background: transparent; color: var(--text-primary); } .btn--danger { background: var(--error); color: #fff; } /* Hover states aislados de touch devices: en iPhone el `:hover` se queda pegado tras tap. Esta media query lo limita a mouse/trackpad reales. */ @media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--brand-yellow-dark); transform: translateY(-1px); } .btn--secondary:hover { background: var(--cream-100); } .btn--ghost:hover { background: var(--cream-100); } .btn--danger:hover { opacity: .9; } } .btn--sm { font-size: var(--text-12); padding: 6px 10px; border-radius: var(--r-sm); } .btn--lg { font-size: var(--text-16); padding: 13px 22px; } .btn--xl { font-size: var(--text-16); padding: 16px 28px; border-radius: var(--r-lg); } .btn--full { width: 100%; } .btn[data-loading="true"] { opacity: .8; cursor: progress; pointer-events: none; } .btn[data-loading="true"]::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--r-pill); animation: sei-spin .8s linear infinite; } @keyframes sei-spin { to { transform: rotate(360deg); } } /* ============================================================ INPUTS Y FORMULARIOS ============================================================ */ .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: var(--text-13); font-weight: 600; color: var(--text-primary); } .field-helper { font-size: var(--text-12); color: var(--text-secondary); } .field-error { font-size: var(--text-12); color: var(--error); font-weight: 500; } .input { background: var(--surface-elevated); border: 1.5px solid var(--border-default); border-radius: var(--r-md); padding: 10px 13px; font-family: var(--font-body); font-size: var(--text-15); line-height: 1.4; color: var(--text-primary); width: 100%; outline: none; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out); min-height: 42px; } /* Textareas con la clase .input heredaban min-height:42px (≈1,5 líneas) y sin line-height propia → el texto multilínea se cortaba/ocultaba. Les damos alto y altura de línea cómodos. */ textarea.input { min-height: 88px; line-height: 1.5; resize: vertical; } .input::placeholder { color: var(--text-disabled); } .input:focus { border-color: var(--brand-yellow-dark); box-shadow: 0 0 0 3px rgba(255,207,0,.18); } .input.error { border-color: var(--error); background: var(--error-soft); } .input:disabled { background: var(--surface-sunken); color: var(--text-disabled); cursor: not-allowed; } .input-group { position: relative; display: flex; align-items: center; } .input-group .input { padding-left: 38px; } .input-group .input-icon { position: absolute; left: 12px; color: var(--text-secondary); width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .input-group .input-suffix { position: absolute; right: 12px; color: var(--text-secondary); cursor: pointer; } .input-group .input-suffix svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .stack { display: flex; flex-direction: column; gap: 14px; } /* Select ------------------------------------------------------------------ Va sobre `select` a secas, no sobre `select.input`. Antes vivia en `select.input` y los 19 desplegables que usan otra clase -`.sel` y `.inp` de los informes, `.mat-cascade__select` de Materiales, el de Asistencia- se dibujaban con el control de Windows: otra flecha, otra caja y otra letra en medio de un formulario que si sigue el sistema. Es de las cosas que hacian que la app "se viera vieja" sin que se pudiera senalar que. La flecha se declara dos veces -claro y oscuro/obra- porque va dentro de un data URI y el color no puede salir de una variable. Es feo, y es la unica forma de que un ` con "PPTO-2026-005 · Instalación residencial Los Andes" adentro pedía 388px de columna dentro de un cuerpo de 374px, así que la mitad derecha del formulario —incluido el selector de Estado— quedaba fuera de la pantalla en el celular. `minmax(0, 1fr)` deja que la columna se achique por debajo de su contenido. Va con !important porque cada modal trae su grilla en un atributo `style` en línea, y una regla de clase no le gana a eso. */ @media (max-width: 640px) { .modal__body[style*="grid"], .modal__body [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } /* Debajo de 480px dos columnas de campos ya no se pueden ni tocar ni leer: pasa a una sola. Los pares Fecha/Vencimiento se apilan, que en terreno con una mano es mejor que dos cajas de 150px. */ @media (max-width: 480px) { .modal__body[style*="grid"], .modal__body [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; } } } /* ============================================================ DRAWER (panel lateral móvil) ============================================================ */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: var(--z-overlay); /* Backdrop fade-in al abrir */ opacity: 1; transition: opacity var(--duration-base) var(--ease-out); } @starting-style { .drawer-overlay { opacity: 0; } } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(100vw, 400px); background: var(--surface-elevated); box-shadow: var(--shadow-overlay); z-index: var(--z-modal); display: flex; flex-direction: column; overflow: hidden; /* Curva iOS-like (Ionic) para que se sienta como una app nativa: acelera rápido y desacelera con peso. */ transform: translateX(0); transition: transform var(--duration-slow) var(--ease-drawer); /* Respeta safe-area en iPhone: el header del drawer queda visible y el contenido scrolleable no se mete bajo el home indicator. */ padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px); } @starting-style { .drawer { transform: translateX(100%); } } .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } .drawer__title { font-family: var(--font-display); font-size: var(--text-18); font-weight: 700; margin: 0; text-wrap: balance; } .drawer__body { flex: 1; overflow-y: auto; padding: 20px; } /* ============================================================ TABS ============================================================ */ .tabs { display: flex; /* U-7 · El patrón "pestaña con el texto cortado" apareció 5 veces y se parchó 3 veces localmente. Sin wrap, agregar una pestaña más a cualquier vista vuelve a romperlo. Se cierra acá, de una vez. */ flex-wrap: wrap; gap: 2px; background: var(--cream-100); border-radius: var(--r-sm); padding: 3px; } .tab { /* Evita que una pestaña se comprima hasta cortar su propio texto. */ flex: 0 0 auto; white-space: nowrap; } .tab { padding: 5px 12px; font-size: var(--text-12); font-weight: 500; border-radius: var(--r-xs); cursor: pointer; color: var(--text-secondary); /* Propiedades específicas + ease-out (antes era `transition: 120ms` = transition:all sin easing). */ transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-instant) var(--ease-out); border: none; background: transparent; white-space: nowrap; } .tab:active { transform: scale(0.97); } .tab--active { background: var(--surface-elevated); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-sm); } /* ============================================================ PROGRESS BAR ============================================================ */ .progress-bar { height: 4px; background: var(--cream-100); border-radius: var(--r-pill); overflow: hidden; } .progress-bar__fill { /* v45 · `display:block`. Sin esto, un `` de relleno es inline y `height:100%` no aplica: la barra sale vacía. Pasó en la tabla de Obras, donde una obra al 92% mostraba el riel entero en blanco. */ display: block; height: 100%; border-radius: var(--r-pill); background: var(--success); /* Antes era 300ms ease (sluggish). Ahora 250ms con ease-out fuerte = se siente snappier sin perder claridad */ transition: width var(--duration-slow) var(--ease-out); } .progress-bar__fill--warning { background: var(--warning); } .progress-bar__fill--error { background: var(--error); } .progress-bar__fill--brand { background: var(--brand-yellow-dark); } /* ============================================================ SKELETON (loading placeholder) ============================================================ */ .skeleton { background: linear-gradient(90deg, var(--cream-100) 25%, var(--cream-200) 50%, var(--cream-100) 75%); background-size: 200% 100%; /* Linear infinite es lo correcto para shimmer: con `ease` el loop se "acelera/desacelera" raro porque vuelve a 0% cada iteración */ animation: skeleton-wave 1.5s linear infinite; border-radius: var(--r-sm); color: transparent !important; pointer-events: none; } @keyframes skeleton-wave { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ STEPPER / WIZARD ============================================================ */ .stepper { display: flex; align-items: center; gap: 0; } .stepper__step { display: flex; align-items: center; gap: 8px; flex: 1; } .stepper__step:last-child { flex: 0; } .stepper__dot { width: 28px; height: 28px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: var(--text-12); flex-shrink: 0; border: 2px solid var(--border-default); background: var(--surface-elevated); color: var(--text-secondary); transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } .stepper__line { /* También animar el fill del line cuando un paso se completa */ transition: background-color var(--duration-base) var(--ease-out); } .stepper__dot--active { background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--brand-navy); } .stepper__dot--done { background: var(--success-soft); border-color: var(--success); color: var(--success); } .stepper__line { flex: 1; height: 2px; background: var(--border-default); margin: 0 4px; } .stepper__line--done { background: var(--success); } .stepper__label { font-size: var(--text-11); color: var(--text-secondary); white-space: nowrap; } .stepper__label--active { color: var(--text-primary); font-weight: 600; } /* ============================================================ EMPTY STATE ============================================================ */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; gap: 12px; color: var(--text-secondary); } .empty__icon { width: 48px; height: 48px; border-radius: var(--r-lg); background: var(--cream-100); display: flex; align-items: center; justify-content: center; color: var(--text-disabled); } .empty__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .empty__title { font-family: var(--font-display); font-size: var(--text-16); font-weight: 700; color: var(--text-primary); margin: 0; text-wrap: balance; } .empty__desc { font-size: var(--text-13); margin: 0; max-width: 320px; text-wrap: pretty; } /* ============================================================ DIVIDER ============================================================ */ .divider { display: flex; align-items: center; gap: 12px; color: var(--text-disabled); font-size: var(--text-11); } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); } /* ============================================================ UTILIDADES DE TEXTO ============================================================ */ .text-mono { font-family: var(--font-mono); } .text-display{ font-family: var(--font-display); } .text-muted { color: var(--text-secondary); } .text-disabled { color: var(--text-disabled); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-error { color: var(--error); } .text-brand { color: var(--brand-navy); } .text-sm { font-size: var(--text-12); } .text-xs { font-size: var(--text-11); } .text-xxs { font-size: var(--text-10); } /* Lucide SVG defaults */ svg.lu { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ── Feedback de interacción para clickables que NO son .btn ────────── (cards de proyecto/OT/material, filas). El press se siente igual con dedo (celular en obra) y con click (notebook/escritorio); el hover-lift es solo desktop-mouse (gated). Emil: todo elemento presionable debe "responder" al toque. · Cards/divs → se hunden al presionar (transform scale). · Filas → transform no aplica a table-row, feedback por fondo. Va al FINAL del archivo a propósito: así su `transition` gana en orden sobre .card (que solo transiciona box-shadow) e incluye transform. Orden interno: :active DESPUÉS de :hover para que gane al presionar. */ .pressable { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .pressable-row { transition: background-color var(--duration-fast) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .pressable:hover { transform: translateY(-1px); } .pressable-row:hover { background-color: var(--cream-50); } } .pressable:active { transform: scale(0.98); transition-duration: var(--duration-instant); } .pressable-row:active { background-color: var(--cream-200); } /* ════════════════════════════════════════════════════════════ REFINAMIENTO v3 · 2026-08-10 Bloque aditivo: no renombra ni elimina ninguna clase anterior. Va al final a propósito — su cascada gana sobre las reglas de arriba sin necesidad de !important. ════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────── 1 · FOCO VISIBLE — accesibilidad, no decoración Un solo anillo para toda la app. `:focus-visible` (no `:focus`) para que el mouse no lo dispare: solo teclado y navegación asistida. `:focus:not(:focus-visible)` limpia el outline que Safari deja en botones al tocarlos. ──────────────────────────────────────────────────────────── */ :where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [role="switch"], [role="checkbox"], [role="menuitem"]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); position: relative; z-index: 1; } :where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; } /* Elementos que ya traen su propio radio lo conservan */ .btn:focus-visible { border-radius: var(--r-md); } .btn--sm:focus-visible { border-radius: var(--r-sm); } .btn--xl:focus-visible { border-radius: var(--r-lg); } .input:focus-visible { border-radius: var(--r-md); border-color: var(--brand-yellow-dark); } .modal__close:focus-visible, .topbar-avatar:focus-visible, .m-bottomnav__fab:focus-visible { border-radius: var(--r-pill); } /* Sobre el navy del menú el anillo claro no se ve: se invierte */ .app-sidebar :where(a, button, [tabindex]):focus-visible { box-shadow: var(--focus-ring-dark); } /* El input ya tenía halo propio en :focus; se mantiene para mouse y se refuerza con el anillo del sistema en teclado. */ .input:focus { box-shadow: 0 0 0 3px rgba(255,207,0,.18); } .input:focus-visible { box-shadow: 0 0 0 3px rgba(255,207,0,.18), var(--focus-ring); } /* Salto al contenido — existe en el marcado o se agrega en un suelto */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: var(--z-toast); background: var(--brand-navy); color: #fff; font-weight: 600; padding: 10px 16px; border-radius: var(--r-md); text-decoration: none; transition: top var(--duration-base) var(--ease-out); } .skip-link:focus { top: calc(8px + var(--safe-top)); } /* ──────────────────────────────────────────────────────────── 2 · DESHABILITADO — un estado, no un `style="opacity"` por vista Regla: lo deshabilitado pierde el material (sombra y relieve), no solo la opacidad. Bajar opacity apaga también el texto y lo saca de AA; esto lo deja plano pero legible. ──────────────────────────────────────────────────────────── */ .btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { background: var(--surface-sunken); color: var(--text-tertiary); border-color: var(--border-subtle); box-shadow: none; cursor: not-allowed; transform: none; opacity: 1; } .btn:disabled:active, .btn[disabled]:active { transform: none; } .btn--ghost:disabled, .btn--ghost[disabled] { background: transparent; } @media (hover: hover) and (pointer: fine) { .btn:disabled:hover, .btn[disabled]:hover, .btn[aria-disabled="true"]:hover { background: var(--surface-sunken); transform: none; } .btn--ghost:disabled:hover { background: transparent; } } /* Los .btn del footer de informes (informes.css) heredan lo mismo */ select:disabled { background-image: none; } fieldset[disabled] { border: none; margin: 0; padding: 0; } fieldset[disabled] :where(.input, .btn, .short, .acc-rapida) { pointer-events: none; color: var(--text-tertiary); box-shadow: none; } /* ──────────────────────────────────────────────────────────── 3 · CONTROLES DE FORMULARIO Checkbox, radio, switch y archivo salían con el aspecto crudo del navegador y rompían la línea del resto. Se estilan por selector de atributo: no hace falta tocar el marcado. El objetivo táctil se consigue con un ::after invisible de 44px en vez de agrandar la caja (que rompería las tablas densas). ──────────────────────────────────────────────────────────── */ input[type="checkbox"]:not([role="switch"]), input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex-shrink: 0; border: 1.5px solid var(--border-default); background: var(--surface-elevated); cursor: pointer; position: relative; display: inline-grid; place-content: center; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-instant) var(--ease-out); vertical-align: middle; } input[type="checkbox"]:not([role="switch"]) { border-radius: var(--r-xs); } input[type="radio"] { border-radius: var(--r-pill); } /* Objetivo táctil de 44px sin agrandar el dibujo */ @media (pointer: coarse) { input[type="checkbox"]:not([role="switch"])::after, input[type="radio"]::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--touch-min); height: var(--touch-min); } } input[type="checkbox"]:not([role="switch"]):active, input[type="radio"]:active { transform: scale(0.92); } input[type="checkbox"]:not([role="switch"]):checked, input[type="radio"]:checked { background: var(--brand-yellow); border-color: var(--brand-yellow-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(230,187,0,.35); } /* La marca se dibuja con clip-path: escala nítida a cualquier DPI y hereda el navy sin depender de un SVG embebido en base64. */ input[type="checkbox"]:not([role="switch"])::before { content: ""; width: 10px; height: 10px; background: var(--brand-navy); clip-path: polygon(14% 46%, 0 60%, 39% 100%, 100% 22%, 86% 8%, 38% 71%); transform: scale(0); transition: transform var(--duration-base) var(--ease-spring); } input[type="checkbox"]:not([role="switch"]):checked::before { transform: scale(1); } input[type="checkbox"]:not([role="switch"]):indeterminate { background: var(--brand-yellow); border-color: var(--brand-yellow-dark); } input[type="checkbox"]:not([role="switch"]):indeterminate::before { clip-path: inset(42% 8% 42% 8% round 1px); transform: scale(1); } input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--brand-navy); transform: scale(0); transition: transform var(--duration-base) var(--ease-spring); } input[type="radio"]:checked::before { transform: scale(1); } input[type="checkbox"]:disabled, input[type="radio"]:disabled { background: var(--surface-sunken); border-color: var(--border-subtle); cursor: not-allowed; } input[type="checkbox"]:disabled::before, input[type="radio"]:disabled::before { background: var(--text-tertiary); } @media (hover: hover) and (pointer: fine) { input[type="checkbox"]:not(:disabled):hover, input[type="radio"]:not(:disabled):hover { border-color: var(--brand-yellow-dark); } } /* Switch · para y para .switch */ input[type="checkbox"][role="switch"], .switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: var(--r-pill); background: var(--cream-200); border: none; margin: 0; padding: 0; flex-shrink: 0; position: relative; cursor: pointer; box-shadow: inset 0 1px 3px rgba(26,26,24,.12); transition: background-color var(--duration-base) var(--ease-out); } input[type="checkbox"][role="switch"]::before, .switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-sm); /* La curva drawer (iOS) hace que el pulgar se sienta con peso */ transition: transform var(--duration-base) var(--ease-drawer), width var(--duration-instant) var(--ease-out); } input[type="checkbox"][role="switch"]:checked, .switch[aria-checked="true"] { background: var(--brand-yellow); box-shadow: inset 0 1px 3px rgba(160,128,0,.22); } input[type="checkbox"][role="switch"]:checked::before, .switch[aria-checked="true"]::before { transform: translateX(18px); } /* El pulgar se estira al mantener presionado — detalle físico de iOS */ input[type="checkbox"][role="switch"]:active::before, .switch:active::before { width: 24px; } input[type="checkbox"][role="switch"]:checked:active::before, .switch[aria-checked="true"]:active::before { transform: translateX(14px); } input[type="checkbox"][role="switch"]:disabled, .switch:disabled { background: var(--surface-sunken); cursor: not-allowed; } /* Etiqueta clicable que envuelve un control */ .check-row { display: flex; align-items: center; gap: 10px; min-height: var(--touch-min); font-size: var(--text-14); cursor: pointer; -webkit-tap-highlight-color: var(--tap-hl); } .check-row__hint { font-size: var(--text-12); color: var(--text-secondary); } /* Campo de archivo · el botón nativo es distinto en cada navegador */ input[type="file"] { font-family: var(--font-body); font-size: var(--text-13); color: var(--text-secondary); max-width: 100%; } input[type="file"]::file-selector-button { font-family: var(--font-body); font-size: var(--text-13); font-weight: 600; color: var(--text-primary); background: var(--surface-elevated); border: 1.5px solid var(--border-default); border-radius: var(--r-sm); padding: 8px 14px; margin-right: 12px; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } @media (hover: hover) and (pointer: fine) { input[type="file"]::file-selector-button:hover { background: var(--cream-100); border-color: var(--brand-yellow-dark); } } /* Zona de arrastre */ .dropzone { border: 1.5px dashed var(--border-default); border-radius: var(--r-lg); background: var(--cream-50); padding: 24px; text-align: center; color: var(--text-secondary); font-size: var(--text-13); transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } .dropzone.is-over { border-color: var(--brand-yellow); background: var(--brand-yellow-soft); } /* Todo control táctil llega a 44px en dedo, sin engordar el escritorio */ @media (pointer: coarse) { .btn--sm { min-height: var(--touch-min); padding: 8px 14px; } .tab, .area-tabs button, .subtabs button, .paper-seg button { min-height: 38px; } .icon-btn, .modal__close { min-width: var(--touch-min); min-height: var(--touch-min); } } /* ──────────────────────────────────────────────────────────── 4 · TABLA DEL SISTEMA Reglas de mesa de datos, no de tarjeta: sin vidrio, sin sombra por fila, sin cebra. La fila se separa por una línea de 1px y se distingue por peso de texto. Los números en mono y a la derecha, con `tabular-nums` para que las columnas se alineen dígito con dígito. NOTA: las tablas actuales traen padding/color en atributos `style` en línea, que ganan sobre cualquier clase — acá se ajusta todo lo que NO está en línea (cabecera, líneas, hover, alineación numérica) y la clase .table queda lista para cuando el marcado se limpie. ──────────────────────────────────────────────────────────── */ .table, table { border-collapse: collapse; width: 100%; } .table thead th, table thead th { font-family: var(--font-mono); font-size: var(--text-10); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); text-align: left; background: var(--cream-50); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table tbody td, table tbody td { border-bottom: 1px solid var(--border-subtle); font-variant-numeric: tabular-nums; vertical-align: middle; } .table tbody tr:last-child td, table tbody tr:last-child td { border-bottom: none; } /* Columnas numéricas: la clase, o cualquier celda ya alineada a la derecha */ .table .num, .table td[align="right"], table td[style*="text-align:right"], table th[style*="text-align:right"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .table .num { text-align: right; } /* Fila: hover y selección. Sin transform — no aplica a table-row. */ .table tbody tr, table tbody tr.mat-table-row, table tbody tr[data-item-row] { transition: background-color var(--duration-fast) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .table tbody tr:hover, table tbody tr.mat-table-row:hover { background: var(--cream-50); } } .table tbody tr[aria-selected="true"], .table tbody tr.is-selected, table tbody tr.is-selected { background: var(--brand-yellow-soft); box-shadow: inset 3px 0 0 var(--brand-yellow); } .table tbody tr td:first-child, .table thead th:first-child { padding-left: 16px; } .table tbody tr td:last-child, .table thead th:last-child { padding-right: 16px; } .table td, .table th { padding: 10px 12px; font-size: var(--text-13); } .table--compact td, .table--compact th { padding: 7px 10px; font-size: var(--text-12); } /* Tabla dentro de una tarjeta: la tarjeta ya pone el borde exterior */ .card > .table, .card > * > .table { border-radius: inherit; } /* ──────────────────────────────────────────────────────────── 4.b · TABLAS · Fase 4 · Tanda A — el marcado limpio Las vistas dejaron de traer padding/tipografía en `style` en línea, así que acá viven las tres cosas que faltaban para que .table gobierne de verdad: alineación por clase, contenedor de scroll y cabecera pegajosa. ──────────────────────────────────────────────────────────── */ /* Alineación por clase (antes iba `style="text-align:…"` en cada celda). `.num` (arriba) es para cifras: alinea a la derecha Y pasa a mono. `.rgt` es para lo que va a la derecha sin ser número (botones de fila). */ /* ── v45 · Cotizaciones ────────────────────────────────────── Las celdas traían su tipografía y su color en `style=""`, una por una. Acá viven, y así la tabla se ve igual en oscuro y en obra. */ .pres-chips { margin-bottom: 14px; } .pres-chips .tab { padding: 7px 13px; font-size: var(--text-12); min-height: 36px; } .pres-chips .tab b { font-family: var(--font-mono); margin-left: 4px; } .pres-chips .tab[disabled] { opacity: .45; cursor: default; } .pres-tabla { min-width: 720px; } .pres-tabla tbody tr { cursor: pointer; } .pres-cod { white-space: nowrap; } .pres-cod .mono { font-size: var(--text-11); color: var(--text-secondary); } .pres-cod__fecha { display: block; font-size: var(--text-10); color: var(--text-disabled); margin-top: 1px; } .pres-v { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: var(--text-10); background: var(--brand-yellow-soft); color: var(--brand-ink); font-weight: 600; } .pres-cli { font-weight: 600; } /* La obra es lo más largo de la fila y lo que más se corta. Se le da ancho de sobra y se corta con puntos suspensivos, no a la mitad. */ .pres-obra { color: var(--text-secondary); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pres-vence { white-space: nowrap; } .pres-vence .mono { font-size: var(--text-11); color: var(--text-secondary); } .pres-vence__d { display: block; font-size: var(--text-10); color: var(--text-disabled); margin-top: 1px; } .pres-vence--ya .mono, .pres-vence--ya .pres-vence__d { color: var(--error); font-weight: 600; } .pres-monto { font-weight: 700; } .pres-acc { display: inline-flex; gap: 4px; } /* ── v45 · Obras · la tabla que deja comparar ──────────────── Contratado y gastado uno al lado del otro: la pregunta «¿esta obra va bien?» se contesta leyendo dos columnas, no entrando a cinco fichas. El punto de la izquierda es el semáforo de la v40. */ .obras-tabla { min-width: 760px; } .obras-tabla tbody tr { cursor: pointer; } .obras-nom { font-weight: 600; max-width: 300px; } .obras-nom > span:not(.obras-sem) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .obras-cod { font-family: var(--font-mono); font-size: var(--text-10); color: var(--text-disabled); font-weight: 400; } .obras-cli { color: var(--text-secondary); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .obras-sem { float: left; width: 8px; height: 8px; border-radius: var(--r-pill); margin: 6px 8px 0 0; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); } .obras-sem--ok { background: var(--success); color: var(--success); } .obras-sem--atencion { background: var(--warning); color: var(--warning); } .obras-sem--riesgo { background: var(--error); color: var(--error); } .obras-sem--sin_datos { background: var(--text-disabled); color: var(--text-disabled); } .obras-av { min-width: 130px; white-space: nowrap; } .obras-av .progress-bar { display: inline-block; width: 74px; height: 5px; vertical-align: middle; } /* El avance no es un juicio: es cuánto se hizo. El verde de «va bien» lo pone el punto del semáforo, que sí mira el gasto. */ .obras-av .progress-bar__fill { background: var(--viz-4); } .obras-av .mono { font-size: var(--text-10); color: var(--text-secondary); margin-left: 8px; } .obras-gasto__pct { display: block; font-family: var(--font-mono); font-size: var(--text-10); color: var(--text-disabled); font-weight: 400; } /* Gastando más rápido de lo que se avanza: la cifra lo dice sola. */ .obras-gasto--ojo, .obras-gasto--ojo .obras-gasto__pct { color: var(--error); } .obras-sindato { color: var(--text-disabled); } /* El chip de «Con alerta» arrastra su color aunque no esté elegido. */ .tab--mal { color: var(--error); } .table .ctr { text-align: center; } .table .lft { text-align: left; } .table .rgt { text-align: right; } /* Fila de totales: cierra la tabla con una línea fuerte y fondo propio. Antes cada vista la dibujaba con `border-top:2px` en línea. */ .table tfoot td { border-top: 2px solid var(--border-default); border-bottom: none; background: var(--cream-50); font-weight: 700; } /* Contenedor de scroll horizontal. En pantalla angosta scrollea; desde 1100px deja de ser contenedor de scroll para que la cabecera pegajosa se ancle a la página y no a un recorte invisible. Un `overflow` distinto de visible rompe `sticky`. */ /* `min-width: 0` es obligatorio: la tarjeta es flex y un hijo flex no baja de su ancho mínimo de contenido — sin esto el `min-width` de la tabla estira la tarjeta en vez de scrollear adentro. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; } @media (min-width: 1100px) { .table-wrap { overflow: visible; } } /* Cabecera pegajosa: se apoya justo bajo la barra superior */ @media (min-width: 1100px) { .table--sticky thead th { position: sticky; top: var(--topbar-height); z-index: 2; box-shadow: 0 1px 0 var(--border-default); } /* v64.1 · Dentro de una ficha lateral o una ventana el que scrollea es el panel, no la página: bajo la barra superior la cabecera quedaba flotando en medio de la tabla (Materiales de la obra 019). Ahí se pega arriba. */ .pdet-drawer .table--sticky thead th, .sei-drawer .table--sticky thead th, .modal .table--sticky thead th { top: 0; } } /* Tarjeta que contiene una tabla a sangre. Reemplaza al viejo `style="padding:0;overflow:hidden"`: el overflow hidden era solo para redondear las esquinas, y de paso mataba el sticky. Acá las esquinas las redondea la propia cabecera. */ .card--table { padding: 0; gap: 0; overflow: visible; } .card--table > .table:first-child > thead > tr > th:first-child, .card--table > .table-wrap:first-child > .table > thead > tr > th:first-child { border-top-left-radius: var(--r-lg); } .card--table > .table:first-child > thead > tr > th:last-child, .card--table > .table-wrap:first-child > .table > thead > tr > th:last-child { border-top-right-radius: var(--r-lg); } /* ──────────────────────────────────────────────────────────── 5 · PESTAÑAS — un solo lenguaje visual Conviven .tabs/.tab, .area-tabs, .subtabs y .paper-seg haciendo lo mismo con cuatro aspectos distintos. Sin renombrar nada, se igualan al mismo material: riel hundido + pastilla elevada. El riel tiene alto fijo, así la pestaña activa no hace saltar el bloque al cambiar de vista. ──────────────────────────────────────────────────────────── */ .tabs, .area-tabs, .subtabs, .paper-seg { background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); padding: 3px; gap: 2px; box-shadow: inset 0 1px 2px rgba(26,26,24,.05); /* Nunca envuelve a dos líneas: se desliza. Resuelve el salto de alto. La barra queda VISIBLE y fina, no oculta: esconderla es el patrón D-2/U-2 que este repo ya arregló dos veces (ver .scroll-x-thin en layout.css). Sin barra, en el teléfono la mitad de las pestañas simplemente no existe para el usuario — medido: 171px de contenido dentro de 88px visibles en la vista de finanzas a 390px. */ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(20, 30, 55, .28) transparent; -webkit-overflow-scrolling: touch; } /* v50 · El campo de archivo, con la letra de la app. Visto en Contabilidad, que es donde Hebert sube los CSV del SII todos los meses: decia «Seleccionar archivo · Sin archivos seleccionados» con el boton gris de Chrome y su tipografia, al lado de botones de la app. Nueve lugares de la app ya lo hacen bien —esconden el input y ponen su propio boton—; siete mostraban el crudo, incluido el campo generico de los modales, que sirve a cualquier formulario futuro. Por eso va en el CSS y no en los siete: se arregla el componente. */ .input[type="file"] { padding: 6px 8px; font-size: var(--text-13); color: var(--text-secondary); cursor: pointer; } .input[type="file"]::file-selector-button { font-family: var(--font-body); font-size: var(--text-13); font-weight: 600; color: var(--text-primary); background: var(--surface-elevated); border: 1.5px solid var(--border-default); border-radius: var(--r-sm); padding: 6px 12px; margin-right: 10px; cursor: pointer; box-shadow: var(--shadow-sm); transition: background-color var(--duration-fast) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .input[type="file"]::file-selector-button:hover { background: var(--cream-100); } } /* v49 · Solo para el lector de pantalla. La app no tenia ninguna utilidad de este tipo — cero en todo el CSS —, y hace falta cada vez que algo se dibuja pero no se lee: el esqueleto de carga es `aria-hidden` (son rayitas), asi que sin esto, cambiar la palabra «Cargando...» por el esqueleto dejaba mudo al lector. No se usa `display:none` ni `visibility:hidden`: las dos lo sacan tambien del arbol de accesibilidad, que es justo lo contrario. */ .solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* v49 · El riel y la acción que lo acompaña. En Contabilidad el botón «Respaldo del período» vivía DENTRO del riel con un margin-left automático, y a11y.js marca como pestaña a todo hijo botón del grupo: lo anunciaba «pestaña 7 de 7» y las flechas ← → caían ahí. Una acción no es una pestaña — va al lado, no adentro. */ .sii-riel { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .sii-riel > .tabs { flex: 1 1 auto; min-width: 0; } .sii-riel > .btn { flex: 0 0 auto; } .tabs::-webkit-scrollbar, .area-tabs::-webkit-scrollbar, .subtabs::-webkit-scrollbar, .paper-seg::-webkit-scrollbar { height: 5px; } .tabs::-webkit-scrollbar-track, .area-tabs::-webkit-scrollbar-track, .subtabs::-webkit-scrollbar-track, .paper-seg::-webkit-scrollbar-track { background: transparent; } .tabs::-webkit-scrollbar-thumb, .area-tabs::-webkit-scrollbar-thumb, .subtabs::-webkit-scrollbar-thumb, .paper-seg::-webkit-scrollbar-thumb { background: rgba(20, 30, 55, .22); border-radius: var(--r-xs); } .tab, .area-tabs button, .subtabs button, .paper-seg button { border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 600; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; white-space: nowrap; flex: 0 0 auto; transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-instant) var(--ease-out); } .tab:active, .area-tabs button:active, .subtabs button:active, .paper-seg button:active { transform: scale(0.96); } .tab--active, /* v45 · `.tab` con `aria-pressed` también se ve elegida. Sin esta línea, los filtros de Mi día, Cotizaciones y Obras quedaban todos planos: la pastilla sólo se pintaba en `.area-tabs`, `.subtabs` y `.paper-seg`, y el que estaba activo no se distinguía de los otros seis. */ .tab[aria-pressed="true"], .area-tabs button[aria-pressed="true"], .subtabs button[aria-pressed="true"], .paper-seg button[aria-pressed="true"], [role="tab"][aria-selected="true"] { background: var(--surface-elevated); color: var(--text-primary); font-weight: 600; /* Pastilla con luz arriba: parece una tecla, no un rectángulo pintado */ box-shadow: var(--shadow-sm) 0 2px 6px rgba(26,26,24,.06), inset 0 .5px 0 rgba(255,255,255,.85); } @media (hover: hover) and (pointer: fine) { .tab:not(.tab--active):hover, .area-tabs button:not([aria-pressed="true"]):hover, .subtabs button:not([aria-pressed="true"]):hover { color: var(--text-primary); } } /* ──────────────────────────────────────────────────────────── 6 · KPI — que la cifra gane de lejos Se mira de reojo desde un celular en obra: la etiqueta pasa a 11px con más tracking (texto chico quiere aire entre letras), la cifra sube a 28px con -0.03em y tabular-nums, y el fondo tintado completo se retira. El color del estado se conserva en un punto de 6px junto a la etiqueta y en un velo del 8% que apenas se insinúa: la tinta fuerte vuelve a ser el número. ──────────────────────────────────────────────────────────── */ .kpi { padding: 14px 16px; gap: 3px; border-radius: var(--r-lg); } .kpi__label { font-size: var(--text-11); font-weight: 600; letter-spacing: .015em; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; } .kpi__value { font-size: var(--text-28); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; } .kpi__delta { font-variant-numeric: tabular-nums; color: var(--text-secondary); } .kpi--success, .kpi--warning, .kpi--error, .kpi--info { background: var(--surface-elevated); border-color: var(--border-subtle); position: relative; overflow: hidden; } /* Velo diagonal del color de estado — presencia sin gritar */ .kpi--success::after, .kpi--warning::after, .kpi--error::after, .kpi--info::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .kpi--success::after { background: linear-gradient(158deg, var(--success-soft), transparent 58%); } .kpi--warning::after { background: linear-gradient(158deg, var(--warning-soft), transparent 58%); } .kpi--error::after { background: linear-gradient(158deg, var(--error-soft), transparent 58%); } .kpi--info::after { background: linear-gradient(158deg, var(--info-soft), transparent 58%); } /* Punto de color en la etiqueta: identifica el estado sin teñir la tarjeta */ :where(.kpi--success, .kpi--warning, .kpi--error, .kpi--info, .kpi--accent) .kpi__label::before { content: ""; width: 6px; height: 6px; border-radius: 2px; flex-shrink: 0; background: var(--text-secondary); } .kpi--success .kpi__label::before { background: var(--success); } .kpi--warning .kpi__label::before { background: var(--warning); } .kpi--error .kpi__label::before { background: var(--error); } .kpi--info .kpi__label::before { background: var(--info); } .kpi--accent .kpi__label::before { background: var(--brand-yellow-dark); } :where(.kpi--success, .kpi--warning, .kpi--error, .kpi--info) .kpi__label, :where(.kpi--success, .kpi--warning, .kpi--error, .kpi--info) .kpi__value, :where(.kpi--success, .kpi--warning, .kpi--error, .kpi--info) .kpi__delta { position: relative; z-index: 1; } .kpi--accent { background: linear-gradient(158deg, var(--brand-yellow-soft), var(--surface-elevated) 62%); border-top-width: 3px; } @media (hover: hover) and (pointer: fine) { .kpi:hover { box-shadow: var(--shadow-hover); } } .kpi { transition: box-shadow var(--duration-base) var(--ease-out); } /* ──────────────────────────────────────────────────────────── 7 · BADGES — cinco familias de estado que ya no se pisan "Borrador" y "Anulada" se veían idénticas y significan lo contrario. Borrador toma tinta azulada viva (es un documento vivo); anulada toma ceniza con el texto tachado (ya no existe). ──────────────────────────────────────────────────────────── */ .badge { padding: 3px 8px; letter-spacing: .01em; border-radius: var(--r-sm); line-height: 1.45; } .badge--pill { border-radius: var(--r-pill); } .badge--draft { background: var(--draft-soft); color: var(--draft); } .badge--void { background: var(--void-soft); color: var(--void); text-decoration: line-through; text-decoration-thickness: 1px; } .badge--dot::before { box-shadow: 0 0 0 2.5px color-mix(in srgb, currentColor 20%, transparent); } /* Badge "contador" — número dentro de un encabezado de panel */ .badge--count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; min-width: 20px; justify-content: center; border-radius: var(--r-pill); } /* ──────────────────────────────────────────────────────────── 8 · BOTÓN PRIMARIO — material, no rectángulo pintado Gradiente vertical corto + luz interior arriba + línea de sombra abajo. Al presionar la luz se invierte: el botón se hunde de verdad en vez de solo achicarse. ──────────────────────────────────────────────────────────── */ .btn--primary { background: linear-gradient(180deg, var(--brand-yellow-300), var(--brand-yellow) 52%, var(--brand-yellow-dark)); box-shadow: var(--shadow-yellow), inset 0 1px 0 rgba(255,255,255,.60), inset 0 -1px 0 rgba(120,95,0,.16); } .btn--primary:active { box-shadow: var(--shadow-sm) inset 0 1px 3px rgba(120,95,0,.26); } @media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: linear-gradient(180deg, var(--brand-yellow), var(--brand-yellow-dark) 60%, #D9AF00); } } .btn--secondary { box-shadow: 0 1px 2px rgba(26,26,24,.05), inset 0 1px 0 rgba(255,255,255,.7); } .btn--danger { background: linear-gradient(180deg, color-mix(in oklab, var(--error) 88%, #fff), var(--error)); box-shadow: 0 1px 2px rgba(165,36,36,.22), 0 4px 12px rgba(165,36,36,.18), inset 0 1px 0 rgba(255,255,255,.22); } /* ──────────────────────────────────────────────────────────── 9 · VIDRIO — solo donde hay algo detrás que desenfocar Overlays y drawers: el fondo oscurecido y el contenido de la página pasan por debajo, así que el material se lee de verdad. Prohibido en filas de tabla y listas largas. ──────────────────────────────────────────────────────────── */ .modal-overlay, .drawer-overlay, .app-sidebar-overlay { background: rgba(20, 20, 15, .38); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .modal-overlay, .drawer-overlay, .app-sidebar-overlay { background: rgba(20, 20, 15, .55); } } .modal, .drawer { border: 1px solid var(--border-subtle); box-shadow: var(--shadow-overlay); } .modal__head, .drawer__head { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-line); position: sticky; top: 0; z-index: 2; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .modal__head, .drawer__head { background: var(--surface-elevated); } } .modal__foot { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .modal__foot { background: var(--surface-sunken); } } /* Agarradera del bottom-sheet: señal de que se puede arrastrar */ @media (max-width: 767px) { .modal { border-radius: var(--r-xl) var(--r-xl) 0 0; } .modal__head::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--border-default); } .modal__head { position: relative; padding-top: 20px; } } /* ──────────────────────────────────────────────────────────── 10 · TARJETAS — radio anidado y sombra consistente Regla del radio anidado: hijo = padre − padding. Un radio 16 dentro de otro 16 delata el CSS; 16 → 10 se lee como material. ──────────────────────────────────────────────────────────── */ .card { border-radius: var(--r-lg); } .card--hero { border-radius: var(--r-xl); } .card > .card, .card .kpi, .card .tile, .card .panel { border-radius: var(--r-md); } .card--hero > .card, .card--hero .kpi { border-radius: var(--r-lg); } .card--accent { border-top-width: 3px; } /* Barra de progreso: sube a 6px (4px se pierde en pantalla al sol), con relieve interior y punta redondeada. */ .progress-bar { height: 6px; background: var(--surface-sunken); box-shadow: inset 0 1px 2px rgba(26,26,24,.08); } .progress-bar__fill { background: linear-gradient(90deg, color-mix(in oklab, var(--success) 78%, #fff), var(--success)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } .progress-bar__fill--warning { background: linear-gradient(90deg, color-mix(in oklab, var(--warning) 78%, #fff), var(--warning)); } .progress-bar__fill--error { background: linear-gradient(90deg, color-mix(in oklab, var(--error) 78%, #fff), var(--error)); } .progress-bar__fill--brand { background: linear-gradient(90deg, var(--brand-yellow-300), var(--brand-yellow-dark)); } /* Cifras: en toda la app los números se alinean dígito con dígito */ .text-mono, .kpi__value, .kpiv__v, .tile__v, .area__figure, .fin-hero__v, .fin-box__v, .obra__pct, .ot-stat .n, .aging__n { font-variant-numeric: tabular-nums; } /* `.mono` se usa en 142 lugares del marcado (folios, RUT, horas, montos, inputs numéricos) y NUNCA tuvo regla: pedía monoespaciada y salía en la fuente de texto. Acá se le da lo que siempre dijo tener. */ .mono, .text-mono { font-family: var(--font-mono); } .mono { font-variant-numeric: tabular-nums; } /* ──────────────────────────────────────────────────────────── 11 · COMPENSACIONES DE MODO OSCURO Donde el color semántico es FONDO con texto blanco encima, el token claro de oscuro no sirve: se usa la versión profunda. ──────────────────────────────────────────────────────────── */ [data-theme="dark"] .toast--success { background: #1F6142; } [data-theme="dark"] .toast--warning { background: #7A4A12; } [data-theme="dark"] .toast--error { background: #8C2C2C; } [data-theme="dark"] .toast--info { background: #17538F; } [data-theme="dark"] .btn--danger { background: linear-gradient(180deg, #B03A3A, #8C2C2C); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14); } [data-theme="dark"] .badge--dark { background: var(--cream-200); color: var(--text-primary); } [data-theme="dark"] .card--warn, [data-theme="dark"] .card--error, [data-theme="dark"] .card--success { color: var(--text-primary); } /* El vidrio en oscuro necesita el borde de luz más tenue, si no el marco blanco flota sobre el fondo negro. */ [data-theme="dark"] :where(.modal__head, .modal__foot, .drawer__head) { box-shadow: inset 0 .5px 0 rgba(255,255,255,.10); } [data-theme="dark"] .btn--secondary { box-shadow: 0 1px 2px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06); } [data-theme="dark"] input[type="checkbox"]:not([role="switch"]), [data-theme="dark"] input[type="radio"] { background: var(--surface-sunken); } [data-theme="dark"] input[type="checkbox"][role="switch"], [data-theme="dark"] .switch { background: var(--cream-200); box-shadow: inset 0 1px 3px rgba(0,0,0,.45); } [data-theme="dark"] input[type="checkbox"][role="switch"]::before, [data-theme="dark"] .switch::before { background: #E8E6DF; } [data-theme="dark"] .progress-bar { box-shadow: inset 0 1px 2px rgba(0,0,0,.40); } /* Divisor y estado vacío en el tercer nivel de texto, no en el segundo */ .divider { color: var(--text-tertiary); } .empty__icon { color: var(--text-tertiary); } .input::placeholder { color: var(--text-tertiary); } /* ──────────────────────────────────────────────────────────── 12 · FOCO — cierre de cascada La regla general del bloque 1 usa `:where()`, que tiene especificidad CERO a propósito (para no ganarle a nada por accidente). El costo es que cualquier `.clase { box-shadow }` declarada después la pisa — que es justo lo que pasaba con .btn--primary, .btn--secondary y .short. Este bloque va último y repite el anillo con especificidad de clase sobre los elementos que traen sombra propia. No es duplicación decorativa: sin esto no se ve dónde estás parado. ──────────────────────────────────────────────────────────── */ .btn:focus-visible, .short:focus-visible, .tab:focus-visible, .topbar-nuevo:focus-visible, .topbar-avatar:focus-visible, .m-bottomnav__item:focus-visible, .m-bottomnav__fab:focus-visible, .modal__close:focus-visible, .acc-rapida:focus-visible, .rep-card:focus-visible, .tpl-card:focus-visible, .icon-btn:focus-visible, .area-tabs button:focus-visible, .subtabs button:focus-visible, .paper-seg button:focus-visible, .sidebar-item:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible, input[type="checkbox"][role="switch"]:focus-visible, .switch:focus-visible, input[type="file"]:focus-visible, .photo-slot:focus-visible, .sub-check:focus-visible { outline: none; box-shadow: var(--focus-ring); z-index: 1; position: relative; } .sidebar-item:focus-visible { box-shadow: var(--focus-ring-dark); } /* Los campos conservan su halo cálido y suman el anillo */ .input:focus-visible, .inp:focus-visible, .ta:focus-visible, .sel:focus-visible { box-shadow: 0 0 0 3px rgba(255,207,0,.18), var(--focus-ring); } /* Fila de tabla enfocada por teclado: barra lateral, no anillo (un box-shadow difuso no se dibuja bien sobre table-row). */ .table tbody tr:focus-visible, table tbody tr:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: -2px; background: var(--brand-yellow-soft); } /* ──────────────────────────────────────────────────────────── PARCHE v3.1 · badge de marca en modo oscuro Medido en la app: navy #1A1A18 sobre brand-yellow-soft #2A2410 daba 1,13:1 — ilegible. Es el mismo tipo de bug que v3 corrigió en los badges semánticos, pero `--brand` se había quedado afuera. El amarillo de marca sobre su propio soft da 10,4:1. ──────────────────────────────────────────────────────────── */ [data-theme="dark"] .badge--brand { color: var(--brand-yellow); } /* ════════════════════════════════════════════════════════════ 14 · VISTAS QUE TRAÍAN SU PROPIO CSS · Fase 4 · Tanda B Cuatro vistas se inyectaban ~190 líneas de estilos desde JavaScript, en un