/* portal.css — generado por build_portal_assets.py (CSS del index.html). */
:root{
--primary:#544D37; --secondary:#A2B6A0; --accent:#F2BA8C;
--dark:#3A3528; --mid:#8B8273; --light:#E8E2D8;
--neutral-1:#D6CFC2; --neutral-2:#8B8273;
--warm-1:#F2BA8C; --warm-2:#E89B5F;
--cool-1:#BAD3D3; --cool-2:#CABCD8; --cool-3:#AB95C1;
--ok:#7BAE7E; --warn:#E8C078; --err:#B57165;
--bg:#F4F1ED; --bg-alt:#ECE5DA;
--white:#FFFFFF; --soft:#FAF9F8; --teal:#80AFAE;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--white);color:#000;font-family:"DM Sans",-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;min-height:100vh}
body{display:flex;flex-direction:column}
a{color:var(--primary)}
.container{max-width:100%;margin:0;padding:0 32px}
.hidden{display:none!important}
/* Header */
header{background:var(--bg);color:var(--primary);padding:20px 0 0}
header .container{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:0 24px;align-items:start}
.hdr-left{grid-column:1;grid-row:1 / span 2}
.hdr-left h1{margin:0 0 2px;font-size:26px;font-weight:700;letter-spacing:-.2px;color:var(--primary)}
.hdr-left h1#header-title{cursor:pointer}
.hdr-left h2{margin:0 0 10px;font-size:17px;font-weight:500;color:var(--mid)}
.hdr-right{grid-column:2;grid-row:1;justify-self:end;display:flex;flex-direction:column;align-items:center;gap:8px}
.hdr-right img{height:60px;display:block}
/* En los modulos el logo es mas pequeño; en la Portada conserva su tamaño. */
header:not(.portada-active) .hdr-right img{height:40px}
/* Botones de navegacion bajo el logo (solo simbolos). Visibles en modulos;
en la Portada se ocultan (ahi viven Informacion / Cerrar sesion). */
.hdr-nav{display:flex;gap:8px;justify-content:center}
header.portada-active .hdr-nav{display:none}
.hdr-nav button{background:transparent;border:1px solid var(--neutral-1);color:var(--primary);border-radius:6px;padding:5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:0}
.hdr-nav button:hover{background:rgba(84,77,55,.08)}
.hdr-nav button svg{width:18px;height:18px;stroke:currentColor;fill:none}
.tab-row{grid-column:1 / -1;grid-row:3;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
.tab-bar{display:flex;gap:2px;flex-wrap:wrap}
.tab-bar button{background:transparent;border:0;color:var(--mid);padding:8px 16px 12px;font:inherit;font-weight:500;cursor:pointer;border-bottom:3px solid transparent;transition:all .15s}
.tab-bar button:hover{color:var(--primary)}
.tab-bar button.active{color:var(--primary);border-bottom-color:var(--warm-1)}
.hdr-actions{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.btn-info{background:transparent;border:1px solid var(--neutral-1);color:var(--primary);padding:4px 10px;border-radius:5px;cursor:pointer;font:inherit;font-size:12px;line-height:1.3;white-space:nowrap}
.btn-info:hover{background:rgba(84,77,55,.08)}
/* Main */
main.container{flex:1;margin:0;padding-top:15px;padding-bottom:64px;background:var(--white)}
main.container.portada-active{background:var(--bg)}
.view h3{margin:0 0 14px;font-size:16px;color:var(--primary);font-weight:700}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px;padding:12px;background:var(--soft);border-radius:8px}
.toolbar label{display:flex;flex-direction:column;font-size:11px;color:var(--mid);gap:3px;font-weight:500;align-items:flex-start;text-align:left}
.toolbar input, .toolbar select{font:inherit;padding:5px 8px;border:1px solid var(--neutral-1);border-radius:5px;min-width:110px;background:var(--white)}
.toolbar .group{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap}
.toolbar .btn{background:var(--primary);color:#fff;border:0;padding:7px 14px;border-radius:6px;cursor:pointer;font:inherit;font-weight:500}
.toolbar .btn:hover{background:var(--dark)}
.toolbar .btn[id$="-copy"]{background:var(--warm-1)}
.toolbar .btn[id$="-copy"]:hover{background:var(--warm-2)}
.toolbar .btn.sec{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.toolbar .btn.sec:hover{background:rgba(84,77,55,.08)}
.toolbar details.multi{font-size:inherit}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;background:var(--white);border:1px solid var(--neutral-1);border-radius:14px;font-size:12px;cursor:pointer;user-select:none}
.chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.chip.on-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Multi-select dropdown (details+checkboxes) */
details.multi{position:relative;font-size:13px}
details.multi summary{list-style:none;cursor:pointer;padding:5px 28px 5px 10px;background:var(--white);border:1px solid var(--neutral-1);border-radius:5px;min-width:140px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;text-align:left;color:var(--primary);font-weight:400}
details.multi summary::-webkit-details-marker{display:none}
details.multi summary::after{content:"▾";position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--mid);font-size:10px}
details.multi[open] summary{border-color:var(--primary);box-shadow:0 0 0 2px rgba(84,77,55,.15)}
details.multi .multi-body{position:absolute;z-index:10;top:calc(100% + 2px);left:0;min-width:220px;max-height:260px;overflow-y:auto;background:var(--white);border:1px solid var(--neutral-1);border-radius:5px;padding:6px 4px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
details.multi .multi-body label{display:flex !important;flex-direction:row !important;align-items:center;gap:6px;padding:4px 8px;cursor:pointer;border-radius:4px;font-size:13px;color:var(--primary);font-weight:400}
details.multi .multi-body label:hover{background:var(--bg-alt)}
details.multi .multi-body input[type=checkbox]{margin:0;cursor:pointer}
details.multi .multi-body .head{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-bottom:1px solid var(--neutral-1);margin-bottom:4px}
details.multi .multi-body .head a{font-size:11px;color:var(--primary);cursor:pointer;text-decoration:underline}
/* Tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--neutral-1);border-radius:8px;background:var(--white)}
/* registro: limitar alto del wrap para scroll vertical y que position:sticky del thead funcione */
#view-flujos_efectivo .tbl-wrap{max-height:60vh;overflow-y:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t thead th{background:var(--secondary);color:var(--white);text-align:left;padding:8px 10px;font-weight:500;white-space:nowrap;cursor:pointer;user-select:none;position:sticky;top:0;z-index:1}
table.t thead th.num{text-align:right}
table.t thead th.ctr{text-align:center}
table.t thead th .arr{color:var(--primary);margin-left:4px}
table.t tbody td{padding:6px 10px;border-top:1px solid var(--neutral-1)}
table.t tbody tr:nth-child(even){background:var(--soft)}
table.t tbody tr:hover{background:rgba(84,77,55,.06)}
table.t td.num{text-align:right;font-variant-numeric:tabular-nums}
table.t td.ctr{text-align:center}
table.t td.neg{color:var(--err)}
table.t tfoot td{padding:8px 10px;font-weight:700;background:var(--white);border-top:2px solid var(--primary)}
table.t tfoot td.num{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.b-ok{background:#DDE7DC;color:#3F5640}
.b-warn{background:#FAEAD8;color:#7A5630}
.b-err{background:#F0D9D2;color:#7A3C30}
.b-info{background:#DCE7E7;color:var(--primary)}
.b-mid{background:var(--light);color:var(--mid)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.dot-ok{background:var(--ok)} .dot-warn{background:var(--warn)} .dot-orange{background:var(--accent)} .dot-err{background:var(--err)} .dot-pag{background:var(--teal)} .dot-pend{background:var(--cool-1)}
.totals{display:flex;flex-wrap:wrap;gap:16px;margin:8px 0 14px}
.stat{background:var(--soft);border-radius:8px;padding:10px 14px;min-width:160px}
.stat .lbl{font-size:11px;color:var(--mid);text-transform:uppercase;letter-spacing:.4px;font-weight:500}
.stat .val{font-size:20px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.stat.accent .val{color:var(--accent)}
.stat-group{background:var(--soft);border-radius:8px;padding:10px 14px;min-width:220px;display:flex;flex-direction:column;gap:4px}
.stat-group .group-lbl{font-size:11px;color:var(--mid);text-transform:uppercase;letter-spacing:.4px;font-weight:500;margin-bottom:4px}
.stat-group .sub{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13px;line-height:1.3}
.stat-group .sub .sub-lbl{color:var(--mid);font-weight:500}
.stat-group .sub .sub-val{font-variant-numeric:tabular-nums;font-weight:700;color:var(--primary)}
.stat-group .sub.pend .sub-val{color:var(--err)}
.bars{margin:12px 0}
.bar-row{display:flex;align-items:center;gap:10px;margin:3px 0;font-size:12px}
.bar-row .lbl{min-width:140px;color:var(--dark)}
.bar-row .bar{flex:1;height:14px;background:var(--soft);border-radius:3px;position:relative;overflow:hidden}
.bar-row .bar .fill{height:100%;background:var(--secondary);border-radius:3px}
.bar-row .bar .fill.neg{background:var(--warm-2)}
.bar.split{display:flex}
.bar.split .seg{height:100%}
.bar.split .seg.pag{background:var(--teal)}
.bar.split .seg.pend{background:var(--cool-1)}
.bar.split .seg:first-child{border-radius:3px 0 0 3px}
.bar.split .seg:last-child{border-radius:0 3px 3px 0}
.bar.split .seg:only-child{border-radius:3px}
.bar-row .val{min-width:100px;text-align:right;font-variant-numeric:tabular-nums;color:var(--dark)}
/* Footer */
footer{text-align:center;font-size:10px;color:var(--mid);padding:8px 0 10px;border-top:1px solid var(--neutral-1);background:var(--white)}
/* Info modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px}
.info-card{background:var(--soft);border-radius:8px;max-width:760px;width:100%;max-height:86vh;overflow-y:auto;padding:26px 30px 28px;box-shadow:0 20px 60px rgba(0,0,0,.25);border-top:4px solid var(--warm-1);position:relative;text-align:left}
.info-card .close{position:absolute;top:10px;right:12px;background:transparent;border:0;font-size:22px;cursor:pointer;color:var(--mid);line-height:1}
.info-card .close:hover{color:var(--primary)}
.info-card .logo-wrap{text-align:center;margin:4px 0 18px}
.info-card .logo-wrap img{height:72px}
.info-card h2{margin:0 0 18px;text-align:center;color:var(--primary);font-size:22px;font-weight:700}
.info-card h3{margin:16px 0 6px;color:var(--primary);font-size:14px;font-weight:700;border-bottom:1px solid var(--neutral-1);padding-bottom:4px}
.info-card p{margin:0 0 8px;font-size:13px;color:var(--primary);line-height:1.55}
.info-card ul{margin:4px 0 10px;padding-left:20px;font-size:13px;line-height:1.55}
.info-card ul li{margin-bottom:3px}
.note{font-size:11px;color:var(--mid);margin:6px 0}
.banner{background:#FAEAD8;border-left:3px solid var(--warn);padding:8px 12px;border-radius:4px;font-size:12px;color:#7A5630;margin:10px 0}
.small{font-size:11px;color:var(--mid)}
.tag-row{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 12px;font-size:12px}
.tag-row span b{color:var(--primary)}
.sort-asc::after{content:" ↑";color:var(--primary)}
.sort-desc::after{content:" ↓";color:var(--primary)}
@media (max-width:820px){
.container{padding:0 16px}
.hdr-left h1{font-size:20px}
.hdr-left h2{font-size:15px}
.hdr-right img{height:44px}
.tab-row{flex-direction:column;align-items:flex-start;gap:4px}
}
/* Login overlay */
body.locked header, body.locked main, body.locked footer{display:none !important}
#login-overlay .info-card{max-width:420px;text-align:center}
#login-overlay h2{margin-bottom:28px}
#login-overlay input[type=password],#login-overlay input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--neutral-1);border-radius:5px;font:inherit;font-size:14px;box-sizing:border-box}
#login-overlay #login-user{margin-bottom:8px}
#login-overlay .pwd-wrap{position:relative}
#login-overlay .pwd-wrap input{padding-right:40px}
#login-overlay .pwd-toggle{position:absolute;top:0;right:0;width:40px;height:100%;margin:0;padding:0;background:none;border:0;cursor:pointer;color:var(--neutral-1);display:flex;align-items:center;justify-content:center}
#login-overlay .pwd-toggle:hover{background:none;color:var(--primary)}
#login-overlay .pwd-toggle .icon-eye-off{display:none}
#login-overlay .pwd-toggle.showing .icon-eye{display:none}
#login-overlay .pwd-toggle.showing .icon-eye-off{display:block}
#login-overlay input[type=password]:focus,#login-overlay input[type=text]:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(84,77,55,.15)}
#login-overlay button{width:100%;background:var(--warm-2);color:#fff;border:0;padding:10px;border-radius:6px;cursor:pointer;font:inherit;font-weight:500;margin-top:10px}
#login-overlay button:hover{background:var(--warm-1)}
#login-overlay button:disabled{opacity:.6;cursor:wait}
#login-error{color:var(--err);font-size:12px;min-height:18px;margin-top:8px}
/* Portada (landing post-login) */
.tab-row.portada-active{justify-content:flex-end}
.portada-head{margin:8px 0 18px;text-align:center}
.portada-head h3{margin:0 0 4px;font-size:20px;color:var(--primary);font-weight:700}
.portada-head .note{margin:0}
.portada-filters{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:flex-end;margin:0 0 18px}
.portada-filters label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--mid);font-weight:500;text-align:left}
.portada-filters input,.portada-filters select{font:inherit;padding:6px 10px;border:1px solid var(--neutral-1);border-radius:6px;background:var(--white);min-width:220px}
.portada-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,260px));gap:16px;justify-content:center}
.portada-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:var(--soft);border:1px solid var(--neutral-1);border-radius:10px;padding:20px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.portada-card:hover{border-color:var(--warm-1);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.10)}
.portada-card .pc-icon{line-height:0}
.portada-card .pc-icon svg{width:30px;height:30px;display:block;stroke:currentColor;fill:none}
.portada-card .pc-title{font-weight:700;color:var(--primary);font-size:15px}
.portada-card .pc-desc{font-size:12px;color:var(--mid);line-height:1.5}
/* === CLIENT_CSS === (estilos especificos del cliente, opcional) */
/* ============================================================================
modules.css — estilos especificos de los modulos del cliente.
El base_template.html del Core ya trae el grueso del CSS (paleta, header,
tablas, badges, toolbar, etc.). Aqui van solo los estilos puntuales que
alguna vista adiciona.
============================================================================ */
/* registro + zoom + pendientes: fila clickable + detalle de fila (modal) */
#r-table tbody tr[data-idx],#z-detail-table tbody tr[data-idx],#p-table tbody tr[data-idx]{cursor:pointer}
#r-table tbody tr[data-idx]:hover,#z-detail-table tbody tr[data-idx]:hover,#p-table tbody tr[data-idx]:hover{background:var(--soft)}
.kv{display:grid;grid-template-columns:max-content 1fr;column-gap:18px;row-gap:7px;margin:2px 0 6px}
.kv dt{color:var(--mid);font-size:12px}
.kv dd{margin:0;font-variant-numeric:tabular-nums;word-break:break-word}
/* Botones de toolbar compactos: misma talla en Registro, Detalle
Clientes/Proveedores, Resumen CxC/CxP y Planeacion. Variante mas
chica del .toolbar .btn base para que queden alineados visualmente
con los selects/inputs de la izquierda (heredan align-items:flex-end
de .toolbar; solo faltaba reducir su tamaño). */
#r-clear, #r-copy, #z-clear, #z-copy, #p-clear, #p-copy, #pl-clear-filters{
padding:4px 10px;font-size:12px;font-weight:500
}
/* Badge de Ratio de Calidad: pildora minimal con punto de color (mismo
semaforo del modulo Diagnostico). No invade visualmente la card. */
.pl-q{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--mid);
padding:2px 8px;border-radius:10px;background:var(--soft);border:1px solid var(--neutral-1);
white-space:nowrap;cursor:help}
.pl-q-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mid)}
.pl-q.diag-ok .pl-q-dot{background:var(--ok)}
.pl-q.diag-warn .pl-q-dot{background:var(--warn)}
.pl-q.diag-err .pl-q-dot{background:var(--err)}
.pl-q.diag-ok {color:#3F5640;border-color:#DDE7DC}
.pl-q.diag-warn {color:#7A5630;border-color:#FAEAD8}
.pl-q.diag-err {color:#7A3C30;border-color:#F0D9D2}
/* ===== Portada: referencia de tipo de módulo (badge estilo "Calidad") ===== */
/* Anclada a la esquina superior derecha de cada caja. */
.portada-card{position:relative}
.pc-tag{position:absolute;top:10px;right:10px;margin:0}
.pl-q.pc-cat-info .pl-q-dot{background:#F2BA8C} /* Informativo */
.pl-q.pc-cat-analisis .pl-q-dot{background:#80AFAE} /* Análisis */
/* ===== Navegación solo desde la Portada ===== */
/* Se oculta la barra de pestañas de módulos (se conserva en el DOM para no
romper el orden de la portada ni los listeners del Core). Para entrar a un
módulo se usa la Portada; para volver, el nombre del cliente o el logo.
Las acciones (Información / Cerrar sesión) quedan alineadas a la derecha. */
#tab-bar{display:none}
.tab-row{justify-content:flex-end}
/* Información y Cerrar sesión solo en la Portada (.tab-row.portada-active). */
.hdr-actions{display:none}
.tab-row.portada-active .hdr-actions{display:flex}
/* ===== Filtros por columna: embudo en el
+ panel flotante ===== */
/* El embudo va dentro del encabezado, pero con su propio click: el titulo
sigue ordenando. Atenuado hasta que la columna tiene filtro puesto. */
.cf-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
margin-left:6px;vertical-align:-3px;border-radius:3px;cursor:pointer;opacity:.45}
.cf-btn svg{width:11px;height:11px;fill:currentColor}
.cf-btn:hover{opacity:1;background:rgba(255,255,255,.18)}
.cf-btn.cf-on{opacity:1;background:var(--white);color:var(--secondary)}
th.num .cf-btn{margin-left:4px}
/* Panel: cuelga del (position:fixed) porque .tbl-wrap recorta y el
es sticky. Misma pinta que .multi-body del toolbar. */
.cf-pop{position:fixed;z-index:120;min-width:230px;max-width:320px;background:var(--white);
border:1px solid var(--neutral-1);border-radius:5px;padding:6px 4px;
box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:13px;color:var(--primary)}
.cf-pop.hidden{display:none}
.cf-pop .cf-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
padding:4px 8px;border-bottom:1px solid var(--neutral-1);margin-bottom:4px}
.cf-pop .cf-head a{font-size:11px;color:var(--primary);cursor:pointer;text-decoration:underline}
.cf-pop .cf-head span{font-size:11px;color:var(--mid)}
.cf-pop .cf-search{width:calc(100% - 16px);margin:0 8px 6px;padding:4px 6px;font-size:12px;
border:1px solid var(--neutral-1);border-radius:4px}
.cf-pop .cf-list{max-height:240px;overflow-y:auto}
.cf-pop .cf-list label{display:flex;flex-direction:row;align-items:center;gap:6px;padding:4px 8px;
cursor:pointer;border-radius:4px;font-weight:400}
.cf-pop .cf-list label:hover{background:var(--bg-alt)}
.cf-pop .cf-list input{margin:0;cursor:pointer}
/* ============================ DIAGNOSTICO =================================
Modulo de calidad de captura. Reusa .stat / .bar-row / .tbl-wrap / .badge
del Core; abajo viven solo los extras del modulo (semaforo del score y
tarjetas de Objetivos).
============================================================================ */
/* KPI cards (score global + por area) con color de semaforo en el numero */
.diag-kpi{min-width:170px}
.diag-kpi.diag-ok .val{color:var(--ok)}
.diag-kpi.diag-warn .val{color:var(--warn)}
.diag-kpi.diag-err .val{color:var(--err)}
.diag-kpi.diag-na .val{color:var(--mid)}
/* El wrap de la tabla de Flags no recorta: deja que el tooltip del
Ratio de Calidad se desborde por encima de la celda. */
.diag-flags-wrap{overflow:visible}
/* Ratio de Calidad en la tabla de Flags */
.diag-pct.diag-ok {color:var(--ok);font-weight:700}
.diag-pct.diag-warn{color:#7A5630;font-weight:700}
.diag-pct.diag-err {color:var(--err);font-weight:700}
.diag-pct.diag-na {color:var(--mid)}
/* Tooltip del Ratio de Calidad — caja que explica el calculo al pasar
el cursor (o al enfocar con tab) sobre el valor. */
.diag-tip{position:relative;cursor:help;display:inline-block;border-bottom:1px dotted var(--mid);outline:none}
.diag-tip .diag-tip-box{
display:none;position:absolute;right:0;bottom:calc(100% + 6px);z-index:30;
width:max-content;max-width:280px;text-align:left;white-space:pre-line;
background:var(--primary);color:#fff;font-weight:400;font-size:11px;line-height:1.5;
padding:8px 10px;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.diag-tip:hover .diag-tip-box,
.diag-tip:focus .diag-tip-box{display:block}
/* Badge de severidad — reusa .badge del core; añadimos variantes por severity */
.badge.sev-alta {background:#F0D9D2;color:#7A3C30}
.badge.sev-media{background:#FAEAD8;color:#7A5630}
.badge.sev-baja {background:#DCE7E7;color:var(--primary)}
.badge.sev-nula {background:var(--neutral-1);color:var(--mid)}
/* Selector de Prioridad editable en la tabla de Flags. Imita el look del
.badge de severidad pero es un