/* deploy-hash: 20260523T034500 */ /* Fuentes AUTO-HOSPEDADAS (Inter, Geist, JetBrains Mono) — auditoría 2026-07-04 (I3). Antes se cargaban de Google Fonts (fuga de IP/Referer a un tercero + dependencia externa). Ahora viven en /shared/fonts/ y se declaran en fonts.css. Toda página que importa base.css hereda las 3 familias; font-display:swap evita bloquear el render. ⚠ El @import DEBE ir antes de cualquier regla de estilo (spec CSS) — por eso al tope. */ @import url('/shared/fonts/fonts.css?v=301'); /* ===================================================== GATE ANTI-FLASH (pre-paint) — ver auth-gate.js ===================================================== El head-script marca cuando la cache NO confirma acceso a la página (config/módulo). Mantiene el body oculto hasta que el guard async confirme (revela quitando la clase) o redirija. Returning users con cache positiva NO reciben la clase → pintan al instante (sin flash). .mod-write: revela los controles de escritura (data-write-only, ej. botón "Nueva") solo a encargado/admin; el solo-lectura nunca los ve parpadear. */ html.gate-hold body { visibility: hidden !important; } html:not(.mod-write) [data-write-only] { display: none !important; } /* ===================================================== BASE.CSS — Paleta de Obra (modo claro, alta visibilidad) ===================================================== Diseñado para legibilidad bajo sol caribeño, pantallas sucias, y reflejos típicos de uso en exteriores. Inspiración visual: - Planos de ingeniería (blueprint blue #0F172A) - Maquinaria pesada (Caterpillar yellow #EAB308) - Materiales base (gris cemento #F8FAFC) Reglas de oro: - Modo claro por default. Dark NO es opción para obra. - Tipografía bold (500+ base, 700 para títulos). - Contraste WCAG AA mínimo en todo texto crítico. - Cero glass / blur que se pierde bajo sol directo. - Shadows sutiles + borders nítidos para definición. ===================================================== */ :root { /* ===== FONDOS — gris cemento, NO blanco puro ===== */ --bg: #F8FAFC; /* Fondo base — gris cemento suave */ --bg-elev: #FFFFFF; /* Cards, modals, surfaces elevadas */ --bg-soft: #F1F5F9; /* Hover de inputs, secciones secundarias */ --bg-input: #FFFFFF; --bg-input-hover: #F8FAFC; /* ===== TEXTO — azul plano profundo dominante ===== */ --text: #0F172A; /* Azul plano (blueprint) — títulos y montos */ --text2: #334155; /* Gris acero — texto secundario importante */ --text3: #64748B; /* Gris acero claro — meta, fechas, códigos */ --text-soft: #94A3B8; /* Placeholders, deshabilitado */ /* ===== BORDERS — gris cemento medio ===== */ --border: #E2E8F0; /* Border default — cards, inputs */ --border-strong: #CBD5E1; /* Border más visible para énfasis */ --border-hover: #94A3B8; /* Hover de inputs */ /* ===== ACENTOS — paleta de obra ===== */ --amber: #EAB308; /* Amarillo Caterpillar — acciones primarias */ --amber-deep: #CA8A04; /* Amarillo más oscuro para hover */ --amber-soft: #FEF3C7; /* Background suave para alerts amber */ --amber-glow: rgba(234, 179, 8, 0.25); --orange: #EA580C; /* Naranja vial — acciones críticas alternas */ --orange-soft: #FFEDD5; --orange-deep: #9A3412; /* Naranja oscuro — texto sobre orange-soft */ /* Navy de marca Mabrick (sesión 22 F2.5). Acentos sutiles que refuerzan identidad: bordes de cards destacadas, valores monetarios principales, links secundarios. NO usar para CTAs (eso sigue amber). */ --navy: #1A2547; /* Navy del logo MABRICK */ --navy-soft: #E0E7FF; /* Tint para badges/highlights */ --navy-glow: rgba(26, 37, 71, 0.15); --red: #DC2626; /* Rojo seguridad — alertas críticas */ --red-soft: #FEE2E2; --red-deep: #991B1B; --green: #15803D; /* Verde aprobado — confirmaciones */ --green-soft: #DCFCE7; --green-deep: #14532D; --blue: #0F172A; /* Azul plano (mismo que text para coherencia) */ /* ===== BRAND (override por org via JS si quieren branding propio) ===== */ --brand-primary: var(--amber); --brand-text: var(--text); /* Altura estándar de un control de formulario de una línea (text/select/number). Centraliza la altura para igualar los date/time (que renderizan más altos). */ --control-h: 44px; /* ===== RADIUS + TIPOGRAFÍA ===== */ --r: 12px; /* Radius default — cards, inputs, botones */ --r-sm: 8px; /* Botones secundarios, badges */ --r-lg: 16px; /* Modals, large cards */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* ===== SHADOWS — sutiles pero presentes ===== */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04); --shadow-amber: 0 4px 12px rgba(234, 179, 8, 0.3), 0 1px 2px rgba(234, 179, 8, 0.2); /* ===== ELEVACIÓN EN CAPAS (sombras tintadas en navy, no negro) ===== Sistema premium reusable: e1 = reposo de card, e3 = card en hover/elevada, e4 = modal/popover. Tintado en el navy de marca para armonizar. Centralizado: cualquier superficie de la app puede adoptar var(--e1..e4). */ --shadow-navy: 222deg 39% 18%; --e1: 0 1px 1px hsl(var(--shadow-navy) / .04), 0 2px 4px hsl(var(--shadow-navy) / .05); --e2: 0 1px 1px hsl(var(--shadow-navy) / .05), 0 3px 6px hsl(var(--shadow-navy) / .06), 0 6px 12px hsl(var(--shadow-navy) / .05); --e3: 0 1px 1px hsl(var(--shadow-navy) / .05), 0 6px 10px hsl(var(--shadow-navy) / .08), 0 14px 24px hsl(var(--shadow-navy) / .09), 0 22px 38px hsl(var(--shadow-navy) / .06); --e4: 0 2px 4px hsl(var(--shadow-navy) / .06), 0 8px 16px hsl(var(--shadow-navy) / .09), 0 18px 36px hsl(var(--shadow-navy) / .10), 0 30px 60px hsl(var(--shadow-navy) / .08); /* ===== SPACING ===== */ --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px; --sp7: 48px; } * { box-sizing: border-box; } /* Sin el flash gris nativo de iOS al tocar: nuestras animaciones :active dan el feedback. */ * { -webkit-tap-highlight-color: transparent; } /* ===================================================== MOVIMIENTO — utilidades centralizadas (entrada escalonada) + accesibilidad. .reveal: la usa el Hub (y cualquier grilla) para que sus items entren con fade+rise escalonado vía --i. Solo transform/opacity = GPU, 60fps en iOS. ===================================================== */ @keyframes mk-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .reveal { opacity: 0; animation: mk-rise .55s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(var(--i, 0) * 70ms); } /* Respeta a quien pide menos movimiento (Ajustes de iOS/macOS). Backstop global además de los fallbacks por componente. */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; animation: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ===================================================== .lift-card — patrón de tarjeta premium CENTRALIZADO (una sola definición, cero drift entre módulos). Se AÑADE a cualquier card existente (que ya trae su bg/border/radius/padding); aporta: elevación en capas + acento del color `--mod` en el borde izquierdo, spotlight que sigue el cursor (::before, desktop), y sombra profunda + anillo ámbar en hover (::after, crossfade por opacidad = GPU). El JS setea `--mod` por card y llama `attachSpotlight()` (ui.js) tras render. La card NO debe declarar su propio box-shadow (lo gana el de aquí). ===================================================== */ .lift-card { position: relative; isolation: isolate; box-shadow: inset 3px 0 0 var(--mod, var(--amber)), var(--e1); transition: transform .22s cubic-bezier(.22, 1, .36, 1); } .lift-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--mod, var(--amber)) 15%, transparent), transparent 60%); } .lift-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: -1; box-shadow: var(--e3), 0 0 0 1px hsl(48 90% 50% / .35); } .lift-card > * { position: relative; z-index: 1; } @media (hover: hover) { .lift-card:hover { transform: translateY(-5px); } .lift-card:hover::before { opacity: 1; } .lift-card:hover::after { opacity: 1; } } .lift-card:active { transform: translateY(-2px) scale(.997); } /* Hover de fila para TABLAS DE DATOS (opt-in: clase .data-table en el ). Última superficie plana de la fase visual: resalte sutil al recorrer filas. - Opt-in para NO tocar las tablas de reporte PDF (caja/reportes, personal/reportes). - Excluye la fila propia (.is-me, resalte ámbar) para no pisarla. - `> td` ⇒ solo filas de datos; el thead (th) queda intacto. - Gateado a hover:hover ⇒ sin hover pegajoso en táctil. */ @media (hover: hover) { .data-table tr { transition: background-color .12s ease; } .data-table tr:not(.is-me):hover > td { background: var(--bg-soft); } } html, body { margin: 0; padding: 0; } html { background: var(--bg); } body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100dvh; font-size: 15px; font-weight: 500; /* BOLD por default para legibilidad en obra */ line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; overflow-x: hidden; } /* ===================================================== TIPOGRAFÍA — bold dominante, jerarquía clara ===================================================== */ h1, h2, h3, h4 { font-weight: 700; color: var(--text); margin: 0 0 var(--sp3); letter-spacing: -0.02em; } h1 { font-size: 28px; line-height: 1.15; } h2 { font-size: 20px; line-height: 1.2; } h1, h2 { font-family: var(--font-display); } /* F2.6 — Geist display en títulos (h3=eyebrow y h4 se quedan en Inter) */ h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text3); font-weight: 700; } h4 { font-size: 14px; font-weight: 600; } a { color: var(--text); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: opacity 0.15s; font-weight: 600; } a:hover { opacity: 0.75; } .muted { color: var(--text3); font-weight: 500; } .mono { font-family: var(--mono); font-weight: 600; } .text-sm { font-size: 13px; } .text-xs { font-size: 11px; } .text-bold { font-weight: 700; } /* Códigos de proyecto / referencias en mono */ .code-ref { font-family: var(--mono); font-size: 12px; color: var(--text2); background: var(--bg-soft); padding: 2px 7px; border-radius: 4px; font-weight: 600; letter-spacing: 0.02em; } /* ===================================================== INPUTS — blanco con border fuerte, focus amarillo ===================================================== */ /* :where() mantiene la especificidad de este reset en (0,0,1): así cualquier clase local (.hrs, .seed-account-input, etc.) puede ajustar ancho/padding de un input chico sin pelear contra los 4 :not([type]) (que la inflaban a (0,4,1) y clobbeaban los overlays locales). El filtro de tipos es idéntico. */ input:where(:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file])), select, textarea { font-family: var(--font); /* 16px es el umbral: con <16px, iOS Safari hace ZOOM al enfocar el campo y eso descuadra la página (no se recompone hasta navegar). NUNCA bajar de 16px en controles de formulario. Era la causa del "desfase al escribir". */ font-size: 16px; font-weight: 500; background: var(--bg-input); color: var(--text); border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); padding: 11px 14px; width: 100%; outline: none; -webkit-appearance: none; appearance: none; transition: border-color 0.12s, box-shadow 0.12s, background 0.12s; } input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--border-hover); } input:focus, select:focus, textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); } input::placeholder, textarea::placeholder { color: var(--text-soft); font-weight: 500; } /* Los renderizan ~2px MÁS altos que text/select/number (su edición interna ::-webkit-datetime-edit impone la altura) → desalinea las filas de filtros (Desde/Hasta vs Obra/Buscar) y sus labels. Medido en preview: text/select/number=44px, date=46px. Fijar el date a la altura estándar lo iguala. Macro: aplica a TODA la app (date/time nunca son compactos, así que un height fijo es seguro). --control-h centraliza el valor. */ input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week] { height: var(--control-h); } /* ===================================================== FIELDS ===================================================== */ .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--sp4); } .field:last-child { margin-bottom: 0; } .lbl { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.08em; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--sp4); /* ritmo vertical: separa la fila del campo siguiente */ } .grid2 .field { margin-bottom: 0; } /* Fila de campos lado-a-lado en formularios/modales (Fecha+Monto, NCF+Reporte…). ESTÁNDAR centralizado: antes se duplicaba en el