/* REQ-VF008 · Century Gothic primero (D-F5-14): quien la tenga instalada -viene con Microsoft Office, asi que es probable en los equipos del cliente- la ve tal cual. Es una fuente PROPIETARIA de Monotype: no hay licencia de webfont, asi que no se aloja ni se sirve a nadie. 'Jost' es el respaldo geometrico, alojado en el proyecto (static/fuentes/Jost-Variable.woff2, @font-face abajo) y NUNCA desde un CDN externo: la aplicacion no depende hoy de ningun tercero para renderizar, y no es este REQ el que va a estrenar esa dependencia. Se eligio Jost sobre Questrial porque es una fuente VARIABLE con negrita real (eje `wght` 100-900): Century Gothic no tiene negrita real en muchas instalaciones y el navegador la sintetiza, viendose sucia (§4.3) -Jost evita el mismo problema en su propio respaldo-. El resto de la pila son geometricas del sistema que existan de paso. */ @font-face{ font-family:'Jost'; src:url("/static/fuentes/Jost-Variable.928f4210aa48.woff2") format('woff2-variations'), url("/static/fuentes/Jost-Variable.928f4210aa48.woff2") format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } :root{ --bg:#f4f5f7; --panel:#ffffff; --ink:#1c1d21; --muted:#6b7280; --dark:#111214; --accent:#e8581c; --accent-2:#c9531f; --line:#e6e7ea; --green:#1f9d57; --fuente-base:'Century Gothic','Jost','URW Gothic','Apple Gothic', 'Muli',Futura,'Trebuchet MS',sans-serif; } *{box-sizing:border-box} body{margin:0;font-family:var(--fuente-base);background:var(--bg);color:var(--ink)} a{color:inherit;text-decoration:none} .accent{color:var(--accent)} .muted{color:var(--muted)} .small{font-size:.82rem} .bold{font-weight:700} /* Topbar */ .topbar{display:flex;align-items:center;justify-content:space-between;background:var(--dark);color:#fff;padding:0 24px;height:60px;border-bottom:3px solid var(--accent)} .brand{display:flex;align-items:center;gap:14px} .brand-logo{font-weight:800;letter-spacing:2px;color:var(--accent)} .brand-sep{width:1px;height:26px;background:#3a3b3f} .brand-title{font-weight:700} .topbar-right{display:flex;align-items:center;gap:12px} .user-chip{color:#cfd2d6;font-size:.9rem} .logout-form{margin:0} .btn-outline{background:transparent;border:1px solid #4a4b4f;color:#fff;padding:6px 14px;border-radius:8px;cursor:pointer} /* Layout */ /* REQ-033 · `min-width:0` en los dos contenedores flex. Un item flex trae `min-width:auto`, que significa "no me encojas por debajo del ancho de mi contenido". Una tabla de 25 columnas hacia que `.content` reclamara ese ancho entero, `flex:1` no podia achicarlo, y el ensanche subia hasta : la pagina entera crecia y la barra superior —que mide 100% del viewport, no del documento— se quedaba corta. De ahi la sensacion de que la tabla "se sale del banner". Con `min-width:0` el contenedor toma el ancho real disponible, `.table-scroll` recibe un ancho finito y su `overflow-x:auto` recien entonces actua: la tabla se desliza dentro de su marco en vez de empujar la pagina. */ .layout{display:flex;min-width:0;min-height:calc(100vh - 60px - 34px)} .sidebar{width:64px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 0;gap:6px} .nav-item{display:flex;align-items:center;justify-content:center;color:var(--muted);padding:12px 4px;border-left:3px solid transparent} .nav-item svg{width:22px;height:22px;flex-shrink:0} .nav-item.active{color:var(--accent);border-left-color:var(--accent);background:#fdf1ec} .nav-item:hover{color:var(--ink)} .content{flex:1;min-width:0;padding:26px 34px} /* Sub-navegacion de proyecto (Proyeccion | Adicionales | Mano de Obra | Materiales | GG Obra) */ .project-subnav{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;margin-bottom:18px} .project-subnav a{padding:8px 18px;border-radius:8px;font-size:.85rem;font-weight:600;color:var(--muted)} .project-subnav a:hover{color:var(--ink)} .project-subnav a.active{color:var(--accent);background:#fdf1ec} /* Headings */ .breadcrumb{color:var(--muted);font-size:.85rem;margin-bottom:10px} .page-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px} h1{font-size:1.7rem;margin:0 0 4px} /* Buttons */ .btn-primary{background:var(--accent);color:#fff;border:none;padding:11px 20px;border-radius:8px;font-weight:600;cursor:pointer;display:inline-block} .btn-primary:hover{background:var(--accent-2)} .btn-primary.sm{padding:8px 16px;font-size:.9rem} .btn-primary.full{width:100%;margin-top:14px} /* Cards */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px} .proj-card{background:var(--panel);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)} .proj-card-head{background:#25262a;color:#9aa0a6;font-size:.72rem;letter-spacing:1px;padding:16px 18px} .proj-card-body{padding:18px} .proj-card-body h3{margin:0 0 4px;font-size:1.05rem} .avance-row{display:flex;justify-content:space-between;margin:14px 0 6px;font-size:.85rem} .avance-bar{height:6px;background:var(--line);border-radius:4px;overflow:hidden} .avance-fill{height:100%;background:var(--accent)} .metrics{display:flex;justify-content:space-between;margin-top:18px;text-align:center} .metric-val{display:block;font-weight:700} .metric-lbl{font-size:.72rem;color:var(--muted)} .proj-card-foot{padding:14px 18px;border-top:1px solid var(--line);text-align:right} /* Pills */ .pills{display:flex;gap:10px} .pill{background:var(--dark);color:#fff;padding:8px 14px;border-radius:8px;font-size:.85rem} /* Table */ .table-wrap{background:var(--panel);border-radius:10px;overflow:auto} .proj-table{width:100%;border-collapse:collapse;font-size:.85rem} .proj-table th{background:var(--dark);color:#fff;padding:12px 10px;text-align:right;font-weight:600} .proj-table th.left{text-align:left} .proj-table td{padding:10px;text-align:right;border-bottom:1px solid var(--line)} .proj-table td.left{text-align:left} .proj-table td.indent{padding-left:26px;color:#374151} .row-cuenta{background:#1c1d21;color:#fff;font-weight:700} .row-cuenta td{border-bottom:none} .dif{color:var(--green)} /* Login */ .login-wrap{display:flex;justify-content:center;padding-top:8vh} .login-card{background:var(--panel);padding:34px;border-radius:14px;width:360px;box-shadow:0 6px 24px rgba(0,0,0,.12)} .login-card label{display:block;margin:14px 0 6px;font-size:.85rem;color:var(--muted)} .login-card input{width:100%;padding:11px;border:1px solid var(--line);border-radius:8px} .alert-error{background:#fdecea;color:#b3261e;padding:10px;border-radius:8px;font-size:.85rem;margin-top:10px} /* Maintenance */ .maintenance{display:flex;justify-content:center;padding-top:8vh} .maintenance-card{background:var(--panel);padding:44px;border-radius:14px;text-align:center;max-width:460px;box-shadow:0 2px 10px rgba(0,0,0,.08)} .maintenance-icon{font-size:3rem;margin-bottom:10px} /* Footer con la version, la autoria y la procedencia (v2.0.0, ampliado en v2.3.0 REQ-032) */ .appfooter{display:flex;justify-content:space-between;align-items:center;gap:16px;height:34px;padding:0 24px;background:var(--panel);border-top:1px solid var(--line)} .appfooter-version{color:var(--muted);font-size:.75rem;letter-spacing:.3px} .appfooter-version a{color:var(--muted);text-decoration:underline} .appfooter-version a:hover{color:var(--accent)} /* La procedencia es dato de diagnostico, no de negocio: se lee si la buscas y no compite con el resto del pie. Es lo que deja ver la deriva de H-2. */ .appfooter-procedencia{color:var(--muted);font-size:.7rem;opacity:.65;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap} /* Avisos (mensajes de Django) — v2.0.0 F4 */ .avisos{display:flex;flex-direction:column;gap:10px;margin-bottom:18px} .aviso{border-radius:10px;padding:13px 16px;font-size:.86rem;line-height:1.55;border-left:4px solid} .aviso-error{background:#fdecea;border-color:#c0392b;color:#7f1d14} .aviso-warning{background:#fef6e7;border-color:#d68910;color:#7a4f06} .aviso-success{background:#eaf7ef;border-color:var(--green);color:#14603a} .aviso-info,.aviso-debug{background:#eef2f7;border-color:#5b6b7f;color:#33404f} /* Contador de consumos sin clasificar en la sub-navegacion (M3, v2.0.0 F7) */ .contador-pendientes { display:inline-block; margin-left:7px; min-width:20px; padding:1px 7px; background:#E8521A; color:#fff; border-radius:999px; font-size:.7rem; font-weight:700; line-height:1.5; vertical-align:middle; } .project-subnav a.active .contador-pendientes { background:#1a1a1a; } /* Origen del dato en las pantallas de gasto — v2.3.0 REQ-037 E-5. Discreto a proposito: es contexto permanente, no un aviso. Un banner que grita todos los dias lo mismo se deja de leer en una semana. */ .origen-del-dato{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; margin:10px 0 0;padding:9px 13px;border-radius:8px;background:#f4f7fa; border:1px solid #e2e8f0;color:#4a5568;font-size:.78rem;line-height:1.55} .origen-del-dato strong{color:#2d3748} .origen-punto{width:7px;height:7px;border-radius:50%;background:var(--green,#198754); flex-shrink:0;align-self:center} .origen-matiz{color:#718096} /* Frescura del dato bajo la tabla de Proyeccion — v2.3.0 REQ-029 §29.2. Discreta y en cursiva, como pide el requerimiento: es un pie de tabla, no una alarma. El color solo aparece cuando hay algo que decir — en verde se queda gris, porque "al dia" no necesita gritarlo. */ .frescura{margin:10px 2px 0;font-size:.78rem;color:var(--muted)} .frescura-antiguedad{font-weight:600} .frescura-ambar{color:#8a6d3b} .frescura-rojo{color:#a8410f} /* Documentos eliminados en el ERP — v2.3.0 REQ-034. El aviso va al pie de la tabla y no compite con ella: es una nota que explica, no una alarma que interrumpe. */ .aviso-congelados{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; margin:14px 0 0;padding:11px 15px;border-radius:8px;background:#fff8f3; border:1px solid #f0c4ae;border-left:4px solid #E8521A; font-size:.82rem;line-height:1.55;color:#7a3a12} .aviso-congelados-icono{font-size:.95rem;line-height:1} .aviso-congelados-texto{flex:1;min-width:240px} .aviso-congelados-texto strong{color:#5c2a0d} .aviso-congelados-enlace{font-weight:700;color:#E8521A;white-space:nowrap} .aviso-congelados-enlace:hover{text-decoration:underline} /* La pagina de detalle */ .congelados-resumen{display:flex;gap:34px;background:var(--panel);border:1px solid var(--line); border-radius:10px;padding:16px 20px;margin-bottom:18px} .congelados-resumen .rot{display:block;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px} .congelados-resumen .val{font-size:1.3rem;font-weight:700} .congelado{background:var(--panel);border:1px solid var(--line);border-radius:10px; padding:18px 20px;margin-bottom:16px} .congelado-cab{display:flex;justify-content:space-between;align-items:baseline; border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px} .congelado-folio{font-weight:700;font-size:1.02rem} .congelado-monto{font-weight:700;font-size:1.02rem;color:#a8410f} .congelado-datos{width:100%;border-collapse:collapse;font-size:.84rem} .congelado-datos th{text-align:left;color:var(--muted);font-weight:600;padding:5px 10px 5px 0; white-space:nowrap;vertical-align:top;width:190px} .congelado-datos td{padding:5px 0} .congelado-evidencia{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)} .congelado-evidencia h4{margin:0 0 4px;font-size:.8rem;text-transform:uppercase; letter-spacing:.4px;color:var(--muted)} .congelado-evidencia-meta{font-size:.76rem;color:var(--muted);margin:0 0 8px} .congelado-evidencia pre{background:#f7f7f8;border:1px solid var(--line);border-radius:6px; padding:10px 12px;font-size:.74rem;overflow-x:auto;margin:0} .congelado-sin-evidencia{margin-top:14px;padding:10px 13px;border-radius:6px; background:#f4f6f8;color:#5b6b7f;font-size:.79rem;line-height:1.5} .congelado-acciones{margin-top:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .btn-confirmar-baja{background:transparent;border:1px solid #E8521A;color:#E8521A; padding:7px 16px;border-radius:7px;font-weight:600;font-size:.82rem;cursor:pointer} .btn-confirmar-baja:hover{background:#E8521A;color:#fff} .congelado-ayuda{font-size:.74rem;color:var(--muted);flex:1;min-width:220px} .congelados-vacio{background:var(--panel);border:1px solid var(--line);border-radius:10px; padding:26px;text-align:center;color:var(--muted)} .congelados-historial{margin-top:8px;font-size:.84rem} .congelados-historial summary{cursor:pointer;color:var(--muted);padding:8px 0} .volver{margin:0 0 14px;font-size:.84rem} /* Dashboard — v2.3.0 REQ-031 */ .salud{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px} .salud-item{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 15px} .salud-item .rot{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)} .salud-item .val{display:block;font-size:1.15rem;font-weight:700;margin-top:3px} .salud-item .val small{font-size:.8rem;font-weight:600;color:var(--muted)} .salud-item .pie{display:block;font-size:.72rem;color:var(--muted);margin-top:2px} .salud-alerta{border-color:#f0c4ae;background:#fff8f3} .tablero{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px} .casillero{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px;min-width:0} .casillero-ancho{grid-column:1/-1} .casillero h3{margin:0 0 2px;font-size:.76rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)} .casillero .ayuda{margin:0 0 12px;font-size:.74rem;color:var(--muted)} .cifra{font-size:1.9rem;font-weight:800;line-height:1.15} .cifra small{font-size:.85rem;font-weight:600;color:var(--muted)} .cifra-sub{font-size:1rem;font-weight:700;color:#a8410f;margin-top:2px} .separador{height:1px;background:var(--line);margin:14px 0} .estados{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px} .pastilla{background:#eef1f5;color:var(--muted);padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:600} .pastilla-viva{background:#e7f5ee;color:#15653f} .barra{height:8px;background:#eef1f5;border-radius:5px;overflow:hidden;margin-top:5px} .barra i{display:block;height:100%;background:var(--accent)} /* REQ-VF012 §4.1 · casillero 1 del Dashboard: cifra protagonista. El titular es UN numero (el gasto), asi que va grande y primero; los proyectos y sus pastillas -identidad, no magnitud- quedan abajo, mas chicos. */ .hero-gasto{margin-top:4px} .hero-cifra{font-size:2.35rem;font-weight:800;line-height:1.1;color:var(--ink)} .hero-etiqueta{font-size:.8rem;font-weight:600;color:var(--muted);margin-top:2px} /* PAUSADA (pedido del PO, 10-sep-2026): el grafico de clasificado/sin clasificar de la tarjeta 1 se reemplazo por el avance economico (mas abajo). Se dejan estas reglas -las usa `_svg_barra_gasto()`, tambien pausada- por si se retoma. Clasificado/sin clasificar son DOS PASOS DEL MISMO TONO (§5.2): no es una paleta categorica, es la misma magnitud partida en dos. */ .barra-apilada{display:block;width:100%;height:28px;margin-top:14px} .segmento-clasificado{fill:var(--accent)} .segmento-sin-clasificar{fill:var(--accent);fill-opacity:.32} .etiqueta-segmento{font-size:11px;font-weight:700;font-family:inherit} .etiqueta-clasificado{fill:#fff} .etiqueta-sin-clasificar{fill:#7a3411} .barra-apilada-leyenda{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:.78rem;color:var(--muted)} .barra-apilada-leyenda strong{color:var(--ink);font-weight:700} .leyenda-item{display:inline-flex;align-items:center;gap:6px} .leyenda-swatch{width:9px;height:9px;border-radius:2px;display:inline-block} .swatch-clasificado{background:var(--accent)} .swatch-sin-clasificar{background:var(--accent);opacity:.32} /* El avance economico general (gastado/presupuesto, todas las obras): misma cabecera+barra que ya usa el casillero 2, para que las dos pantallas hablen el mismo idioma visual. */ .avance-economico{margin-top:14px} .avance-economico-cabecera{display:flex;justify-content:space-between;align-items:baseline;font-size:.83rem} .avance-economico-pct{font-weight:700} .meta-proyectos{font-size:.82rem;color:var(--muted);font-weight:600} .meta-cifra{color:var(--ink);font-weight:800;font-size:1rem} .obra-linea{display:flex;justify-content:space-between;align-items:baseline;font-size:.83rem;margin-top:11px} .obra-pct{font-weight:700} .sin-presupuesto{color:#b42318;font-weight:600;font-size:.75rem} .vacio{color:var(--muted);font-size:.82rem;padding:8px 0} .vacio-alto{padding:34px 0;text-align:center} .controles{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .controles button{border:1px solid var(--line);background:var(--panel);border-radius:7px; padding:5px 12px;font-size:.76rem;cursor:pointer;color:var(--muted)} .controles button.activo{background:var(--dark);color:#fff;border-color:var(--dark)} ol.ranking{list-style:none;margin:0;padding:0} ol.ranking li{padding:8px 0;border-bottom:1px solid #f4f6f8;font-size:.81rem} ol.ranking .pos{width:19px;color:var(--muted);font-weight:700;text-align:right;flex-shrink:0} ol.ranking .cod{font-family:ui-monospace,Menlo,monospace;font-size:.74rem;width:92px;flex-shrink:0} ol.ranking .desc{flex:1;color:#475467;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} ol.ranking .monto{font-weight:700;white-space:nowrap} /* REQ-VF012 §4.3 · casillero 3: solo el ranking y la sparkline -F0 midio que cabe-; la barra horizontal por fila se saco el 10-sep-2026 (pedido del PO). La cantidad ya no va en la etiqueta: pasa al `title` (tooltip) del monto, junto con el monto exacto (la etiqueta se abrevia en millones, `clp_millones`). */ .material-cabecera{display:flex;align-items:baseline;gap:9px} .sparkline{width:52px;height:18px;flex-shrink:0} .sparkline-linea{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .buscador-material{display:flex;gap:8px;align-items:center;margin-bottom:10px} .buscador-material select{flex:1;padding:9px 11px;border:1px solid var(--line); border-radius:8px;font-size:.84rem;background:var(--panel);min-width:0} .quitar{border:1px solid var(--line);border-radius:8px;width:34px;height:34px; display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0} .quitar:hover{border-color:var(--accent);color:var(--accent)} .ficha{display:flex;gap:26px;flex-wrap:wrap;background:#f8fafc;border:1px solid var(--line); border-radius:9px;padding:11px 15px;margin-bottom:12px} .ficha .rot{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)} .ficha .val{font-size:1rem;font-weight:700} .ficha .val small{font-size:.76rem;color:var(--muted)} .ficha .val-desc{font-size:.86rem;font-weight:600} .ficha .val-chico{font-size:.86rem} .conmutador{display:flex;gap:6px;margin:12px 0 10px} .conmutador a{border:1px solid var(--line);border-radius:7px;padding:5px 14px; font-size:.76rem;color:var(--muted)} .conmutador a.activo{background:var(--dark);color:#fff;border-color:var(--dark)} .grafico{width:100%;max-width:720px} .g-guia{stroke:#eceff3} .g-eje{font-size:9.5px;fill:#98a2b3} .g-linea{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:.45} .g-punto{fill:var(--accent)} .g-valor{font-size:10px;font-weight:700;fill:#7a3a12} .tabla-detalle{overflow-x:auto} .tabla-detalle table{width:100%;border-collapse:collapse;font-size:.79rem} .tabla-detalle th{background:var(--dark);color:#fff;padding:8px 6px;font-size:.7rem;font-weight:600;white-space:nowrap} .tabla-detalle th.obra{text-align:left;padding-left:12px;position:sticky;left:0;background:var(--dark)} .tabla-detalle td{text-align:center;padding:8px 6px;border-bottom:1px solid var(--line)} .tabla-detalle td.obra{text-align:left;font-weight:600;padding-left:12px;position:sticky;left:0;background:var(--panel)} .tabla-detalle td.con{font-weight:700;background:#fff6f1;color:#a8410f} .tabla-detalle td.sin{color:#d0d5dd} .tabla-detalle td.total,.tabla-detalle th.total{font-weight:800;background:#f8fafc} /* Buscador de materiales con sugerencias — v2.3.0, correccion del 13-ago. Reemplaza al