/* 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{display:flex;align-items:center;gap:9px;color:#fff;font-size:.9rem;font-weight:600;padding:5px 12px 5px 6px;border:1px solid #4a4b4f;border-radius:999px;background:#1c1d21;cursor:pointer;transition:border-color .15s,background .15s}
.user-chip:hover,.user-chip.activo{border-color:var(--accent);background:#25262a}
.user-chip .avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:800;letter-spacing:.5px}
.user-chip svg{width:14px;height:14px;stroke:#9aa0a6;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.user-chip:hover svg,.user-chip.activo svg{stroke:var(--accent)}
@media (max-width:640px){.user-chip-nombre{display:none}.user-chip{padding:5px}.user-chip svg{display:none}}
.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 <body>: 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)}
/* REQ-VF034 (v3.2.0) · menu lateral extendido: 200 px con el nombre de cada seccion, o 64 px
   solo con iconos (el de antes) con `.layout.menu-cerrado`. `flex-shrink:0` para que una tabla
   ancha no lo aplaste: el que cede es `.content` (min-width:0, REQ-033). Clases nuevas con
   prefijo `menu-`; `.sidebar` y `.nav-item` se amplian aqui y no se redeclaran en otra parte. */
.sidebar{width:200px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 0;gap:2px;transition:width .2s ease}
.nav-item{display:flex;align-items:center;gap:12px;color:var(--muted);padding:11px 12px 11px 15px;border-left:3px solid transparent;white-space:nowrap;overflow:hidden;min-width:0;font-size:.92rem}
.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)}
.nav-item:focus-visible,.menu-obra:focus-visible,.menu-desplegar:focus-visible,.menu-ocultar:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.menu-etiqueta{overflow:hidden;text-overflow:ellipsis;min-width:0}
.menu-proyectos{position:relative}
.menu-fila{display:flex;align-items:center}
.menu-fila .nav-item{flex:1}
.menu-desplegar{border:0;background:none;color:var(--muted);padding:4px 6px;margin-right:8px;cursor:pointer;display:inline-flex;border-radius:4px;flex-shrink:0}
.menu-desplegar:hover{color:var(--ink)}
.menu-desplegar svg{width:14px;height:14px;transition:transform .15s}
.menu-desplegar[aria-expanded="false"] svg{transform:rotate(-90deg)}
.menu-obras,.menu-flotante ul{list-style:none;margin:0;padding:0}
.menu-obras{margin:2px 0 6px;max-height:min(50vh,420px);overflow-y:auto}
.menu-obra{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 30px;font-size:.8rem;color:#4b5058;white-space:nowrap;overflow:hidden;border-left:3px solid transparent}
.menu-obra:hover{color:var(--ink);background:#f7f7f8}
.menu-obra.activa{color:var(--accent);font-weight:700}
.menu-obra-punto{width:6px;height:6px;border-radius:50%;background:#c3c7ce;flex-shrink:0}
.menu-obra.activa .menu-obra-punto{background:var(--accent)}
.menu-obra-nombre{overflow:hidden;text-overflow:ellipsis;min-width:0}
.menu-separador{height:1px;background:var(--line);margin:8px 14px}
.menu-ocultar{display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--muted);font:inherit;font-size:.85rem;padding:9px 14px 9px 18px;cursor:pointer;white-space:nowrap;overflow:hidden;text-align:left}
.menu-ocultar:hover{color:var(--ink)}
.menu-ocultar svg{width:16px;height:16px;flex-shrink:0}
.menu-flotante{display:none;position:absolute;left:100%;top:0;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:8px 0;min-width:220px;max-width:320px;max-height:70vh;overflow-y:auto}
.menu-flotante-titulo{margin:2px 14px 6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.menu-flotante .menu-obra{padding-left:14px}
/* el menu cerrado: el de antes (64 px, solo iconos); las obras en el panel flotante */
.layout.menu-cerrado .sidebar{width:64px}
.layout.menu-cerrado .menu-etiqueta,.layout.menu-cerrado .menu-desplegar,.layout.menu-cerrado .menu-obras{display:none}
.layout.menu-cerrado .nav-item{justify-content:center;padding:12px 4px}
.layout.menu-cerrado .menu-ocultar{justify-content:center;padding:9px 4px}
.layout.menu-cerrado .menu-ocultar svg{transform:rotate(180deg)}
.layout.menu-cerrado .menu-proyectos:hover .menu-flotante,.layout.menu-cerrado .menu-proyectos:focus-within .menu-flotante{display:block}
@media (prefers-reduced-motion: reduce){.sidebar,.menu-desplegar svg{transition:none}}
.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}

/* REQ-VF039 (v3.2.0) · conmutador segmentado (reemplaza a `.conmutador`): una capsula blanca con
   las dos opciones siempre visibles y una pastilla negra que se desliza bajo la activa. Las dos
   columnas miden lo mismo (la mas larga), asi la pastilla tiene un solo tamaño. Las opciones son
   los enlaces de siempre; el JavaScript de base.html solo anima antes de seguirlos.
   Se usa con `templates/_conmutador_segmentado.html` (Home, Proyeccion y Dashboard).
   v3.2.1 · de BLOQUE (`grid`, no `inline-grid`) y con el ancho de su contenido: ocupa su propia fila, como el
   `.conmutador` viejo. En linea, en el Dashboard se ponia al lado del grafico de «Historia de un material» cuando la
   tarjeta era ancha (sobre ~1325 px de pantalla). */
.conmutador-seg{position:relative;display:grid;width:max-content;grid-template-columns:1fr 1fr;background:#fff;border:1.5px solid #c9ccd3;border-radius:999px;padding:3px;margin:12px 0 10px}
.conmutador-seg-pastilla{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--dark);transition:transform .22s ease}
.conmutador-seg.conmutador-seg-der .conmutador-seg-pastilla{transform:translateX(100%)}
.conmutador-seg-opcion{position:relative;z-index:1;text-align:center;padding:6px 18px;font-size:.8rem;font-weight:700;color:var(--dark);border-radius:999px;white-space:nowrap;min-width:92px;transition:color .22s ease}
.conmutador-seg-opcion[aria-checked="true"]{color:#fff}
.conmutador-seg-opcion:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.conmutador-seg-pastilla,.conmutador-seg-opcion{transition:none}}

.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 <select> con tope de 25 sobre 395 materiales. */
.buscador-material{position:relative}
.buscador-material input[type=text]{flex:1;padding:9px 12px;border:1px solid var(--line);
  border-radius:8px;font-size:.86rem;background:var(--panel);min-width:0}
.buscador-material input[type=text]:focus{outline:none;border-color:var(--accent)}
.sugerencias{position:absolute;top:calc(100% + 4px);left:0;right:46px;z-index:30;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 8px 24px rgba(16,24,40,.14);max-height:320px;overflow-y:auto}
.sugerencia{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;
  background:none;border:none;border-bottom:1px solid #f4f6f8;padding:9px 13px;
  cursor:pointer;font-size:.82rem}
.sugerencia:hover,.sugerencia.marcada{background:#fff6f1}
.s-cod{font-family:ui-monospace,Menlo,monospace;font-size:.75rem;color:#344054;
  flex-shrink:0;width:92px}
.s-desc{color:#475467;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugerencia-vacia{padding:11px 13px;font-size:.8rem;color:var(--muted)}
.pista{font-size:.78rem;color:var(--muted)}
/* Los controles pasaron de <button> a <a> para conservar el ancla. */
.controles a{border:1px solid var(--line);background:var(--panel);border-radius:7px;
  padding:5px 12px;font-size:.76rem;color:var(--muted)}
.controles a.activo{background:var(--dark);color:#fff;border-color:var(--dark)}
/* Que el ancla no deje el casillero pegado al borde superior. */
#materiales,#historia{scroll-margin-top:18px}

/* Ajustes del gráfico y la tabla — v2.3.0 F7.2.
   Una semana sin consumo se atenúa: sigue estando, porque el eje es de tiempo
   y el hueco es informacion, pero no compite con las que si movieron. */
.g-cero{opacity:.3}
.tabla-detalle td.sin{color:inherit;opacity:.3}

/* Separador de seccion, con su titulo al medio.
   La integracion baja al pie: quien abre el dashboard viene a ver el negocio, y
   la salud del ETL es el respaldo de esos numeros, no su portada. */
.separador-seccion{display:flex;align-items:center;gap:14px;margin:34px 0 16px;
  color:var(--muted);font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1.4px}
.separador-seccion::before,.separador-seccion::after{content:"";flex:1;height:1px;
  background:var(--line)}