/* Las fuentes se cargan desde el de cada página con preconnect (evita la cadena de bloqueo del @import y acelera el primer pintado). */ /* ============================================================================ EGM · Tema visual institucional — Claro corporativo (identidad Activo Más) Base blanca, azul marino en titulares, celeste #0095EB de acento. Tipografías: Raleway (titulares) + Source Sans (texto). Se conservan todos los nombres de clase del tema anterior: los 9 módulos funcionan sin cambios. ========================================================================== */ :root { /* -- Paleta base (Activo Más) -- */ --navy-900: #0B325B; /* marino profundo (titulares, marca) */ --navy-800: #123F72; /* azul medio */ --navy-700: #1C3F8E; /* royal (encabezados fuertes) */ --navy-600: #2A5EA8; /* azul acento frío */ --navy-500: #4A7FC0; /* azul claro de apoyo */ --accent-500: #0095EB; /* celeste principal (acento) */ --accent-400: #33ABF0; /* celeste claro */ --accent-600: #0077C4; /* celeste profundo (texto sobre blanco) */ --ink: #1F2A37; /* texto principal sobre blanco */ --ink-dim: #55637A; /* texto secundario */ --muted: #8A94A3; /* texto terciario / labels */ --green-500:#4E8A1E; /* positivo / excedente */ --red-500: #CE3B37; /* déficit / alerta */ --amber-500:#B4780F; /* advertencia / próximo vencimiento */ --blue-500: #0D6FB8; /* informativo */ /* -- Semánticos -- */ --bg: #EEF2F7; /* fondo general (gris azulado) */ --surface: #F6F9FC; /* superficies suaves */ --card: #FFFFFF; /* tarjetas */ --panel: #EAF3FD; /* paneles azul claro */ --border: #E1E8F1; --border-soft: #EEF2F7; --text: var(--ink); --text-dim: var(--ink-dim); --accent: var(--accent-500); /* -- Tipografía -- */ --ff-sans: "Raleway", "Georgia", serif; /* titulares */ --ff-ui: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius: 14px; --radius-sm:10px; --shadow: 0 10px 34px rgba(11,50,91,.12); --shadow-sm:0 2px 10px rgba(11,50,91,.07); --maxw: 1180px; } * { box-sizing: border-box; } /* Transición suave al navegar entre módulos (elimina el destello blanco). Navegadores sin soporte simplemente la ignoran. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100vw; } body { background: radial-gradient(1200px 600px at 82% -12%, rgba(0,149,235,.08), transparent 60%), var(--bg); color: var(--text); font-family: var(--ff-ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; } /* -- Titulares -- */ h1, h2, h3 { font-family: var(--ff-sans); font-weight: 700; letter-spacing: .2px; margin: 0; color: var(--navy-900); } h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } a { color: var(--accent-600); text-decoration: none; } a:hover { text-decoration: underline; } /* ============================================================================ Marca (compartida por login y menú lateral) ========================================================================== */ .brand { display: flex; align-items: center; gap: 10px; font-family: var(--ff-sans); } .brand .mark { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, var(--navy-900), var(--accent-500)); color: #fff; font-weight: 700; font-family: var(--ff-sans); box-shadow: var(--shadow-sm); } .brand .name { font-size: 1.15rem; letter-spacing: 1px; color: var(--navy-900); } .brand .sub { font-size: .72rem; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; } .role-pill { font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--panel); color: var(--accent-600); border: 1px solid rgba(0,149,235,.25); } /* ============================================================================ Menú lateral izquierdo (desktop) + barra superior con hamburguesa (móvil) ========================================================================== */ :root { --sbw: 236px; } body.has-sidebar { padding-left: var(--sbw); } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sbw); z-index: 50; background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; } .sb-brand { padding: 4px 8px 14px; border-bottom: 1px solid var(--border-soft); margin-bottom: 10px; } .sb-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .sb-label { font-size: .66rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 16px 10px 6px; } .sb-nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 9px; color: var(--text-dim); font-size: .9rem; font-weight: 500; text-decoration: none; } .sb-nav a svg { width: 18px; height: 18px; flex: none; opacity: .8; } .sb-nav a:hover { background: rgba(0,149,235,.07); color: var(--navy-900); text-decoration: none; } .sb-nav a.active { background: var(--panel); color: var(--accent-600); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent-500); } .sb-nav a.active svg { opacity: 1; } .sb-user { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; font-size: .85rem; color: var(--text-dim); } .sb-user .sb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Barra superior y telón: solo existen en pantallas angostas */ .mobilebar { display: none; } .sidebar-scrim { display: none; } .menu-btn { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--navy-900); cursor: pointer; touch-action: manipulation; /* evita el retraso/zoom de doble toque en móvil */ } .menu-btn:hover { background: var(--surface); } @media (max-width: 1023px) { body.has-sidebar { padding-left: 0; } .sidebar { transform: translateX(-105%); transition: transform .22s ease-out; } body.sb-open .sidebar { transform: translateX(0); box-shadow: var(--shadow); } .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(11,50,91,.45); opacity: 0; pointer-events: none; transition: opacity .22s; } body.sb-open .sidebar-scrim { opacity: 1; pointer-events: auto; } .mobilebar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); padding-top: max(8px, env(safe-area-inset-top)); } } @media (prefers-reduced-motion: reduce) { .sidebar, .sidebar-scrim { transition: none; } } /* ============================================================================ Layout ========================================================================== */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 22px 16px 80px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .page-head .lead { color: var(--muted); font-size: .9rem; margin-top: 4px; } .grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } } @media (min-width: 601px) and (max-width: 900px) { .g4 { grid-template-columns: repeat(2, 1fr); } } /* ============================================================================ Tarjetas ========================================================================== */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); } .card.pad-lg { padding: 22px; } .card h3 { margin-bottom: 12px; } .card .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; } /* -- KPI -- */ .kpi { display: flex; flex-direction: column; gap: 6px; } .kpi .label { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); } .kpi .value { font-family: var(--ff-sans); font-size: 1.65rem; line-height: 1.1; color: var(--navy-900); } .kpi .value.sm { font-size: 1.25rem; } .kpi .delta { font-size: .8rem; } .kpi .accent-bar { height: 3px; width: 42px; background: var(--accent-500); border-radius: 2px; margin-top: 2px; } .pos { color: var(--green-500); } .neg { color: var(--red-500); } .warn { color: var(--amber-500); } .info { color: var(--blue-500); } .gold { color: var(--accent-600); } /* énfasis (antes dorado) → celeste */ .dim { color: var(--muted); } /* ============================================================================ Botones ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-ui); font-size: .88rem; font-weight: 600; padding: 9px 15px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--navy-900); cursor: pointer; transition: background .15s, border-color .15s, transform .05s; } .btn:hover { background: var(--surface); border-color: #cfdae8; } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--accent-500); color: #fff; border-color: var(--accent-500); box-shadow: 0 2px 10px rgba(0,149,235,.28); } .btn.primary:hover { background: var(--accent-600); border-color: var(--accent-600); } .btn.ghost { background: transparent; } .btn.ghost:hover { background: rgba(0,149,235,.06); } .btn.danger { background: transparent; border-color: var(--red-500); color: var(--red-500); } .btn.danger:hover { background: rgba(206,59,55,.10); } .btn.sm { padding: 6px 10px; font-size: .8rem; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ============================================================================ Chips / badges ========================================================================== */ .chip { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); } .chip.green { background: #EEF7E2; color: #4E7D14; border-color: #D8EBBF; } .chip.red { background: #FCEBEA; color: #C0392B; border-color: #F5C6C2; } .chip.amber { background: #FDF3E0; color: #B4780F; border-color: #F5E1BC; } .chip.blue { background: #EAF3FD; color: #0D6FB8; border-color: #CFE6FB; } .chip.gold { background: rgba(0,149,235,.10); color: var(--accent-600); border-color: rgba(0,149,235,.28); } /* ============================================================================ Tablas ========================================================================== */ .table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); } table.tbl { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 560px; background: #fff; } table.tbl th, table.tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; } table.tbl th { color: var(--ink-dim); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; background: var(--surface); position: sticky; top: 0; } table.tbl tbody tr:hover { background: rgba(0,149,235,.045); } table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; } table.tbl td.strong { font-weight: 600; color: var(--navy-900); } table.tbl tfoot td { font-weight: 700; border-top: 2px solid var(--border); background: var(--surface); } /* ============================================================================ Edición en línea dentro de tablas (guardar al salir de la celda o Enter) ========================================================================== */ .cell-in { width: 100%; min-width: 90px; padding: 6px 8px; border-radius: 7px; border: 1px solid transparent; background: transparent; font: inherit; color: inherit; } .cell-in:hover { border-color: var(--border); background: #fff; } .cell-in:focus { outline: none; border-color: var(--accent-500); background: #fff; box-shadow: 0 0 0 3px rgba(0,149,235,.14); } .cell-in.num { text-align: right; font-variant-numeric: tabular-nums; } select.cell-in { cursor: pointer; min-width: 130px; } /* flecha nativa visible */ .cell-in.saved, .cell-check.saved { animation: cellsaved 1.1s ease-out; } @keyframes cellsaved { 0% { background: #EEF7E2; border-color: #D8EBBF; box-shadow: 0 0 0 3px rgba(78,138,30,.18); } 100% { background: transparent; box-shadow: none; } } .cell-check { width: 18px; height: 18px; accent-color: var(--accent-500); cursor: pointer; } /* Filas anexas (bodegas/estacionamientos bajo su departamento mandante): se ven como sub-ítem, no como una línea común. */ table.tbl tr.fila-anexa { background: var(--surface); } table.tbl tr.fila-anexa td { font-size: .8rem; color: var(--text-dim); padding-top: 4px; padding-bottom: 4px; border-bottom: 1px dashed var(--border-soft); } table.tbl tr.fila-anexa td:first-child { box-shadow: inset 3px 0 0 var(--border); } table.tbl tr.fila-anexa .cell-in { font-size: .8rem; padding: 4px 8px; } table.tbl tr.fila-anexa:hover { background: rgba(0,149,235,.05); } @media (pointer: coarse) { .cell-in { font-size: 16px; } } /* evita zoom iOS al enfocar */ /* ============================================================================ Formularios ========================================================================== */ .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .field label { font-size: .78rem; color: var(--text-dim); font-weight: 600; } .ni, input.ni, select.ni, textarea.ni { width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid #D4DEEA; background: #fff; color: var(--ink); font-family: var(--ff-ui); font-size: 16px; /* 16px evita zoom iOS */ } .ni::placeholder { color: #9aa6b6; } .ni:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px rgba(0,149,235,.16); } textarea.ni { resize: vertical; min-height: 70px; } select.ni { appearance: none; -webkit-appearance: none; } .field .hint { font-size: .72rem; color: var(--muted); } .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .form-row.c3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 640px) { .form-row, .form-row.c3 { grid-template-columns: 1fr; } } /* ============================================================================ Barra de progreso (metas de ahorro) ========================================================================== */ .pbar { height: 10px; background: #E4EBF3; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); } .pbar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-600), var(--accent-400)); } /* ============================================================================ Modales — SOLO cierran con X (nunca con click en backdrop) ========================================================================== */ .modal-ov { position: fixed; inset: 0; z-index: 60; background: rgba(11,50,91,.38); backdrop-filter: blur(3px); display: none; align-items: flex-start; justify-content: center; padding: max(24px, env(safe-area-inset-top)) 16px 40px; overflow-y: auto; } .modal-ov.open { display: flex; } .modal { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 640px; box-shadow: var(--shadow); margin-top: 10px; } .modal.wide { max-width: 920px; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); } .modal-head h3 { font-size: 1.1rem; } .modal-body { padding: 18px; } .modal-foot { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; } .modal-x { background: none; border: none; color: var(--muted); font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0 4px; } .modal-x:hover { color: var(--navy-900); } /* ============================================================================ Utilidades ========================================================================== */ .flex { display: flex; } .between { justify-content: space-between; } .center { align-items: center; } .gap8 { gap: 8px; } .gap12 { gap: 12px; } .wrap-w { flex-wrap: wrap; } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mb8 { margin-bottom: 8px; } .mb16 { margin-bottom: 16px; } .right { text-align: right; } .tcenter { text-align: center; } .tabular { font-variant-numeric: tabular-nums; } .small { font-size: .8rem; } .tiny { font-size: .72rem; } .hidden { display: none !important; } .empty-state { text-align: center; padding: 40px 16px; color: var(--muted); } .empty-state .ico { font-size: 2rem; opacity: .5; margin-bottom: 8px; } /* -- Toast -- */ .toast { position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--navy-900); border: 1px solid var(--navy-700); color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: var(--shadow); z-index: 80; font-size: .88rem; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); } .toast.err { border-color: var(--red-500); background: #B23A36; } .toast.ok { border-color: var(--green-500); background: #3E7A18; } /* -- Dropzone importadores -- */ .dropzone { border: 2px dashed #C7D4E4; border-radius: var(--radius); padding: 30px 18px; text-align: center; color: var(--text-dim); cursor: pointer; transition: border-color .15s, background .15s; background: var(--surface); } .dropzone:hover, .dropzone.drag { border-color: var(--accent-500); background: rgba(0,149,235,.06); } .dropzone .ico { font-size: 1.8rem; margin-bottom: 6px; } /* -- Login -- */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; } .login-card { width: 100%; max-width: 380px; } .login-card .brand { justify-content: center; margin-bottom: 18px; flex-direction: column; text-align: center; gap: 6px; } .login-card .mark { width: 52px; height: 52px; font-size: 1.4rem; } /* -- Spinner -- */ .spinner { width: 20px; height: 20px; border: 2px solid rgba(0,149,235,.2); border-top-color: var(--accent-500); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-screen { min-height: 60vh; display: grid; place-items: center; } /* -- Responsive nav en móvil -- */ @media (max-width: 640px) { .brand .sub { display: none; } h1 { font-size: 1.4rem; } .kpi .value { font-size: 1.4rem; } .wrap { padding: 16px 12px 80px; } }