/* SIPRECE · SEGUIMIENTO DE PROYECTO (REV-37) — estilos del módulo, prefijo seg-.
   Usa las variables de styles.css (tema oscuro/claro): --bg --panel --panel2 --line --txt --muted
   --accent --accent2 --eco --dem --warn --equ --head --radius --shadow. */

/* ---- utilidades ---- */
.seg-sm{font-size:12px}
.seg-nw{white-space:nowrap}
.seg-dim{opacity:.55}
.seg-mono{font-family:Consolas,'Courier New',monospace;font-size:12px;line-height:1.35}
.seg-warntx{color:var(--warn);font-weight:600}
.seg-danger{color:var(--dem)}
.seg-link{cursor:pointer}
.seg-link:hover{color:var(--accent2);text-decoration:underline}
.seg-hint{font-size:12px;margin:-6px 0 12px}
.seg-h2{font-size:15px;margin:0 0 10px}
.seg-h3{font-size:14px;margin:0 0 8px}
.seg-left{justify-content:flex-start}
.seg-inline{display:inline-flex;align-items:center;gap:6px;margin:4px 12px 4px 0;font-size:13px;color:var(--txt)}
.seg-inline input[type=checkbox],.seg-inline input[type=radio]{width:auto;margin:0}
.seg-ind{margin-left:22px}
.seg-radios{display:flex;flex-wrap:wrap;gap:4px 8px}
.seg-checks label{display:inline-flex;align-items:center;gap:5px;margin:2px 10px 2px 0;font-size:12px;color:var(--txt)}
.seg-checks input{width:auto}

/* ---- iconos inline del módulo (misma clase .ei que app.js) ---- */
.seg-icobtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;vertical-align:middle}
.seg-icobtn:hover{background:var(--panel2);color:var(--txt);border-color:var(--line)}
.seg-icobtn.seg-danger:hover{color:var(--dem)}
.seg-icobtn svg,.seg-filelink svg,.seg-chip svg,.seg-pin svg,.seg-badge svg,.btn svg.ei{width:15px;height:15px;vertical-align:-3px}
.seg-pin{display:inline-flex;margin-left:5px;color:var(--warn);vertical-align:middle}
.seg-tipo svg{width:18px;height:18px;color:var(--muted)}

/* ---- chips de estado (semáforo) ---- */
.seg-chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;border:1px solid var(--line);background:var(--panel2);color:var(--txt);white-space:nowrap;line-height:1.5}
.seg-chip.seg-click{cursor:pointer}
.seg-chip.seg-click:hover{filter:brightness(1.12);box-shadow:0 0 0 2px rgba(56,189,248,.25)}
.seg-chip.seg-mini{padding:0 7px;font-size:10px}
.seg-chip.seg-big{font-size:14px;padding:5px 14px}
.seg-st-A,.seg-st-AO{background:rgba(34,197,94,.16);color:#4ade80;border-color:rgba(34,197,94,.5)}
.seg-st-PA{background:rgba(245,158,11,.16);color:#fbbf24;border-color:rgba(245,158,11,.5)}
.seg-st-O,.seg-st-R{background:rgba(239,68,68,.16);color:#f87171;border-color:rgba(239,68,68,.5)}
.seg-st-S{background:var(--panel2);color:var(--muted);border-color:var(--line);text-decoration:line-through}
.seg-st-PI{background:var(--panel2);color:var(--muted);border-color:var(--line)}
html.light .seg-st-A,html.light .seg-st-AO{color:#1f7a3f}
html.light .seg-st-PA{color:#9a6207}
html.light .seg-st-O,html.light .seg-st-R{color:#b3261e}
/* Casilla del semáforo pintada ENTERA según el estado (no solo la letra). Va con selector
   compuesto .seg-cell.X porque .seg-cell (definido más abajo) fija su propio background y, a
   igual especificidad, ganaba por orden de fuente. Tinte más saturado que el chip para que se
   lea de un vistazo; texto oscuro sobre claro / claro sobre oscuro, contraste AA en los dos temas. */
.seg-cell.seg-st-A,.seg-cell.seg-st-AO{background:rgba(34,197,94,.28);color:#bbf7d0;border-color:rgba(34,197,94,.75)}
.seg-cell.seg-st-PA{background:rgba(245,158,11,.30);color:#fde68a;border-color:rgba(245,158,11,.75)}
.seg-cell.seg-st-O,.seg-cell.seg-st-R{background:rgba(239,68,68,.28);color:#fecaca;border-color:rgba(239,68,68,.75)}
.seg-cell.seg-st-PI{background:var(--panel2);color:var(--muted);border-color:var(--line)}
html.light .seg-cell.seg-st-A,html.light .seg-cell.seg-st-AO{background:#dcfce7;color:#14532d;border-color:#86efac}
html.light .seg-cell.seg-st-PA{background:#fef3c7;color:#854d0e;border-color:#fcd34d}
html.light .seg-cell.seg-st-O,html.light .seg-cell.seg-st-R{background:#fee2e2;color:#991b1b;border-color:#fca5a5}
.seg-revletter{display:inline-block;min-width:22px;text-align:center;font-weight:700;font-size:12px;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;margin-right:2px}
.seg-badge{display:inline-block;font-size:11px;padding:1px 7px;border-radius:6px;background:var(--panel2);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.seg-badge.seg-visto{color:var(--eco);border-color:rgba(34,197,94,.4)}
.seg-wait{color:var(--warn);font-size:11px;font-weight:600;margin-top:2px}
.seg-wait.seg-old,small.seg-old{color:var(--dem)}

/* ---- toolbar / KPIs ---- */
.seg-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 14px}
.seg-toolbar #seg-buscar{width:240px;padding:7px 10px;font-size:13px}
.seg-toolbar .btn{flex:none}
.seg-selinfo{font-size:13px;color:var(--muted)}
.seg-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.seg-kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.seg-kpi .k{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.seg-kpi .v{font-size:24px;font-weight:700;font-family:var(--font-num);line-height:1.2;margin:2px 0}
.seg-kpi .n{font-size:11px;color:var(--muted)}
.seg-kpi.seg-kpi-bad{border-color:rgba(239,68,68,.5)}
.seg-kpi.seg-kpi-bad .v{color:var(--dem)}
@media(max-width:900px){.seg-kpis{grid-template-columns:1fr 1fr}}

/* ---- tabla de documentos ---- */
.seg-sechead{display:flex;align-items:baseline;gap:10px;margin:18px 0 8px}
.seg-sechead h2{margin:0;font-size:14px;letter-spacing:.06em;color:var(--accent)}
.seg-sechead .n{font-size:12px;color:var(--muted)}
.seg-tcard{padding:4px 10px}
.seg-wrap{max-height:none;border:none;border-radius:0}
table.seg-tbl{width:100%;border-collapse:collapse;font-size:13px}
table.seg-tbl th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.seg-tbl td{padding:7px 8px;border-bottom:1px dashed var(--line);vertical-align:middle}
table.seg-tbl tr.seg-docrow:hover td{background:rgba(255,255,255,.03)}
html.light table.seg-tbl tr.seg-docrow:hover td{background:rgba(20,40,70,.04)}
table.seg-tbl .seg-w1{width:30px}
table.seg-tbl .seg-acts{white-space:nowrap;text-align:right;width:150px}
table.seg-tbl tr.seg-histrow td{background:var(--bg);border-bottom:1px solid var(--line);padding:6px 10px 10px}
.seg-selbox{width:auto;margin:0}
.seg-hist{display:flex;flex-direction:column;gap:6px}
.seg-rv{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;background:var(--panel);border:1px solid var(--line);font-size:12.5px}
.seg-rv .seg-obs{flex:1 1 260px;font-size:12px;color:var(--muted);line-height:1.35}
.seg-rv .seg-obs b{color:var(--txt);font-weight:600}
.seg-filelink{display:inline-flex;align-items:center;gap:4px;color:var(--accent2);cursor:pointer;font-size:12px;white-space:nowrap}
.seg-filelink:hover{text-decoration:underline}
label.seg-filelink{margin:0;color:var(--accent2)}

/* ---- drag & drop ---- */
.seg-dropmsg{display:none;position:fixed;inset:0;z-index:40;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;background:rgba(14,46,80,.72);pointer-events:none}
.seg-dragging .seg-dropmsg{display:flex}

/* ---- por piso (matriz) ---- */
.seg-legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.seg-matrix table{width:100%;border-collapse:separate;border-spacing:4px;font-size:13px}
.seg-matrix th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:4px 6px}
.seg-matrix th.seg-c,.seg-matrix td.seg-c{text-align:center}
.seg-matrix td{padding:0}
.seg-matrix td.seg-nivel{font-weight:700;padding:6px 8px;white-space:nowrap}
.seg-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:52px;padding:6px 8px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);font-weight:700;font-size:12.5px;cursor:pointer;text-align:center;transition:.15s}
.seg-cell small{font-weight:500;font-size:10.5px;color:inherit;opacity:.85}
.seg-cell:hover{filter:brightness(1.1);box-shadow:0 0 0 2px rgba(56,189,248,.25)}
.seg-cell.seg-cell-venc{box-shadow:inset 0 0 0 2px var(--dem)}
.seg-gengrid{display:flex;flex-wrap:wrap;gap:8px}
.seg-gengrid .seg-cell{min-width:150px;min-height:44px}

/* ---- eventos ---- */
.seg-evento{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:12px 16px;margin-bottom:10px}
.seg-evento.seg-cerrado{border-left-color:var(--line);opacity:.7}
.seg-evento h4{margin:0 0 4px;font-size:14px}
.seg-evento .seg-meta{font-size:12px;color:var(--muted);margin-bottom:6px}
.seg-evento .seg-det{font-size:13px;margin:4px 0;line-height:1.4}
.seg-docs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* ---- pedidos / actividad / log ---- */
.seg-log{display:flex;flex-direction:column;gap:4px}
.seg-logrow{display:grid;grid-template-columns:120px 110px 110px 1fr;gap:10px;font-size:12px;padding:4px 0;border-bottom:1px dashed var(--line)}
@media(max-width:780px){.seg-logrow{grid-template-columns:1fr;gap:2px}}

/* ---- bandeja de mails ---- */
.seg-mail{border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin-bottom:10px;background:var(--panel)}
.seg-mail.seg-mail-aplicado{opacity:.7;border-left:4px solid var(--eco)}
.seg-mail.seg-mail-descartado{opacity:.5}
.seg-mail.seg-mail-pendiente{border-left:4px solid var(--warn)}
.seg-mailhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.seg-mailhead b{flex:1 1 200px}
.seg-cuerpo{margin-top:6px}
.seg-cuerpo summary{cursor:pointer;color:var(--muted)}
.seg-cuerpo pre{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:12.5px;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:10px;max-height:320px;overflow:auto;margin:6px 0 0}

/* ---- formularios en modales ---- */
.seg-frm{display:grid;grid-template-columns:150px 1fr;gap:8px 12px;align-items:center;margin:10px 0}
.seg-frm>label{margin:0;font-size:12px;color:var(--muted)}
.seg-frm>label.seg-full,.seg-frm>.seg-full{grid-column:1/-1}
.seg-frm input,.seg-frm select,.seg-frm textarea{padding:7px 10px;font-size:13px}
.seg-frm textarea{resize:vertical}
.seg-full{width:100%}
.seg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center}
.seg-actions .spacer{flex:1}
.modal.seg-lg{width:860px}
.modal{position:relative}
.seg-x{position:absolute;top:10px;right:10px;width:30px;height:30px;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center}
.seg-x:hover{background:var(--panel2);color:var(--txt)}
.seg-x svg{width:16px;height:16px}
.seg-estadopick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px}
.seg-estadopick .btn{flex-direction:column;gap:4px;padding:10px 8px}
.seg-estadopick .btn small{font-size:11px;font-weight:500;opacity:.85}
.seg-checklist{max-height:200px;overflow:auto;border:1px solid var(--line);border-radius:7px;padding:6px 8px;background:var(--bg)}
.seg-checklist label{display:flex;align-items:center;gap:6px;margin:2px 0;font-size:12px;color:var(--txt)}
.seg-checklist input{width:auto;margin:0}
.seg-dest label.seg-inline{display:flex;margin:4px 0}
.seg-lista{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.7}
.seg-imp{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.seg-imp .btn{margin-top:8px}
#resTx{min-height:320px}

/* ---- impresión ---- */
@media print{.seg-toolbar,.seg-actions,.seg-icobtn,.seg-dropmsg{display:none!important}}