/* HERMES — sistema visual editorial (30/09/2026), a partir de Runvyt_Consultas_Sobrio.html.
   Principios: pocas superficies (solo cuando significan algo), separación con tipografía, espacio y líneas;
   radios de 6px (controles) y 8px (contenedores); sin sombras decorativas; color con función semántica
   (navy = cifras y estructura · gris azulado = secundario · verde = positivo · terracota = vencido/negativo ·
   ocre = acentos y estados intermedios). Los alias de abajo son los nombres que usan las pantallas. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  color-scheme:light;
  /* marca */
  --ink:#101A2C;--ink-soft:#1E2A3E;
  --barra:#0D1E33;  /* barra lateral: el azul de la guía de HERMES (28/10/2026) */
  --paper:#FAF6EF;--surface:#FFFFFF;
  --rule:rgba(16,26,44,.65);          /* línea superior de cada sección */
  --line:#EDE6D8;                     /* separadores internos */
  --line-strong:#DCD3C2;              /* bordes de campos y botones */
  --text-body:#38424F;--text-dim:#7B8595;--text-faint:#B1B6BE;
  --gold:#B8843A;--gold-dark:#96692A;--gold-tint:#F1E7D7;
  --teal:#2E6B84;--teal-tint:#E3ECEF;
  --success:#227A50;--success-tint:#E1F0E7;
  --danger:#B85142;--danger-tint:#F5E8E5;
  --atencion:rgba(184,81,66,.055);    /* fondo suave: requiere atención */
  --soft:#F4EEE3;                     /* superficie mínima (deshabilitado, encabezados) */
  --radius-lg:8px;--radius-md:8px;--radius-sm:6px;
  --font-body:'Poppins',ui-sans-serif,system-ui,sans-serif;
  /* alias usados por las pantallas */
  --bg:var(--paper);--card:var(--surface);
  --border:var(--line);--border2:var(--line-strong);
  --text:var(--ink-soft);--text2:var(--text-dim);--text3:var(--text-faint);
  --accent:var(--teal);--accent2:var(--ink);--accent-soft:var(--teal-tint);
  --nav:var(--ink);--nav2:rgba(255,255,255,.06);
  --green:var(--success);--green-bg:var(--success-tint);
  --amber:var(--gold-dark);--amber-bg:var(--gold-tint);
  --red:var(--danger);--red-bg:var(--danger-tint);
  --blue:var(--teal);--blue-bg:var(--teal-tint);
  --r:var(--radius-sm);--r2:var(--radius-lg);
}
[hidden]{display:none !important}
html,body{height:100%}
body{font-family:var(--font-body);background:var(--paper);color:var(--text-body);font-size:14px;line-height:1.5;display:flex;height:100vh;overflow:hidden}
h1,h2,h3{font-family:var(--font-body);font-weight:600;color:var(--ink);text-wrap:balance}
b,strong{font-weight:600}
a{color:var(--teal)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}

/* ---------- Sidebar ---------- */
.sidebar{width:264px;min-width:264px;background:var(--barra);color:#EDF1F8;display:flex;flex-direction:column;height:100vh;overflow:hidden;
  padding:22px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.brand{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 4px 6px}
.brand-logo{display:flex;align-items:center;gap:12px;margin-left:-6px}
.brand-logo img{display:block;height:auto}
.brand-iso{display:none!important}
.brand-tagline{font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#65718A;
  padding:4px 6px 18px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:8px}
.campana{position:relative;background:none;border:none;color:#AEB8C9;cursor:pointer;padding:8px;border-radius:var(--radius-sm);line-height:0;flex-shrink:0}
.campana:hover,.campana.active{background:rgba(255,255,255,.05);color:#fff}
.campana:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.campana-n{position:absolute;top:1px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gold);color:#fff;
  font-size:10.5px;font-weight:600;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--ink)}
.nav-sec{margin-bottom:2px;display:flex;flex-direction:column;gap:1px}
.nav-lbl{font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#56627A;padding:11px 12px 4px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border-radius:var(--radius-sm);background:none;border:none;
  color:#AEB8C9;font-family:var(--font-body);font-size:13.5px;font-weight:400;cursor:pointer;text-align:left;transition:background .15s,color .15s;padding-top:7px;padding-bottom:7px}
.nav-item:hover{background:rgba(255,255,255,.04);color:#fff}
.nav-item:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.nav-item.active{background:rgba(184,132,58,.13);color:#fff;font-weight:500;box-shadow:inset 2px 0 0 0 var(--gold);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.nav-item .soon{margin-left:auto;font-size:10px;color:#56627A;text-transform:uppercase;letter-spacing:.08em}
/* la marca (arriba) y la firma de Yumbi (abajo) quedan fijas; se desliza solo el menú (28/10/2026) */
.sb-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0 -6px;padding:0 6px 10px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.sb-firma{flex:0 0 auto;margin-top:0;border-top:1px solid rgba(255,255,255,.07);padding:14px 6px 2px;display:flex;align-items:center;gap:10px;font-size:11px;line-height:15px;color:#65718A}
.sb-firma img{height:32px;width:auto;opacity:.9;flex:0 0 auto}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:500;font-size:12.5px;flex:0 0 auto}
/* usuario arriba a la derecha (sobre el contenido) */
.topbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:14px 42px 0;max-width:1360px;position:relative;z-index:2}
.topbar .avatar{width:28px;height:28px;font-size:12px}
.topbar #sb-user{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--ink);padding:4px 6px;border-radius:var(--radius-sm)}
.topbar #sb-user:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.topbar #logout{background:none;border:1px solid transparent;cursor:pointer;font-family:var(--font-body);font-size:12.5px;color:var(--text-dim);padding:4px 10px;border-radius:var(--radius-sm)}
.topbar #logout:hover{color:var(--ink);border-color:var(--line-strong)}

/* ---------- Menú comprimido (angosto, solo íconos; se recuerda por navegador) ---------- */
.ni-i{display:block;flex:0 0 auto;opacity:.7}
.nav-item:hover .ni-i,.nav-item.active .ni-i{opacity:1}
.nav-item.active .ni-i{color:var(--gold)}
.nav-toggle{display:flex;align-items:center;gap:8px;margin:0 0 4px;width:100%;padding:7px 12px;background:none;border:none;border-radius:var(--radius-sm);
  color:#65718A;font-family:var(--font-body);font-size:12px;cursor:pointer;text-align:left}
.nav-toggle .ni-i{display:block;width:16px;height:16px}
.nav-toggle:hover{color:#fff;background:rgba(255,255,255,.04)}
.nav-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(min-width:901px){
  .sidebar{transition:width .18s ease,min-width .18s ease}
  body.menu-mini .sidebar{width:68px;min-width:68px;padding-left:10px;padding-right:10px;overflow-x:hidden}
  body.menu-mini .brand{flex-direction:column;gap:10px;padding:2px 0 8px}
  body.menu-mini .brand-horizontal{display:none}
  body.menu-mini .brand-iso{display:block!important;margin-left:0}
  body.menu-mini .brand-logo{margin-left:0}
  body.menu-mini .brand-tagline,body.menu-mini .ni-t,body.menu-mini .sb-firma span{display:none}
  body.menu-mini .nav-lbl{height:1px;padding:0;margin:9px 8px;background:rgba(255,255,255,.07);font-size:0;overflow:hidden}
  body.menu-mini .nav-item{justify-content:center;padding:9px 0;border-radius:var(--radius-sm)}
  body.menu-mini .nav-item.active{box-shadow:inset 2px 0 0 0 var(--gold)}
  body.menu-mini .nav-toggle{justify-content:center;padding:8px 0}
  body.menu-mini .nav-toggle .ni-i{transform:rotate(180deg)}
  body.menu-mini .sb-firma{justify-content:center;padding-left:0;padding-right:0}
  body.menu-mini .sb-firma img{height:26px}
}
@media(max-width:900px){.nav-toggle{display:none}}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;height:100vh;position:relative}
.page{position:relative;z-index:1;padding:14px 42px 60px;max-width:1360px}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 24px;flex-wrap:wrap;margin-bottom:28px}
.ph h1{font-size:24px;font-weight:600;letter-spacing:-.2px;line-height:1.2;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ph p{margin-top:6px;max-width:72ch;color:var(--text-dim);font-size:13.5px}
.ph .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.back{background:none;border:none;color:var(--teal);cursor:pointer;font-size:13px;font-weight:500;margin-bottom:10px;font-family:var(--font-body);padding:0}
.back:hover{text-decoration:underline}

/* ---------- Secciones (antes "cards") ----------
   Abiertas sobre el fondo: una línea navy suave arriba, título chico y contenido. */
.card{background:transparent;border:none;border-top:1px solid var(--rule);border-radius:0;padding:12px 0 0;margin-bottom:36px}
.card h2{font-size:15px;font-weight:600;margin-bottom:14px;display:flex;align-items:baseline;gap:6px 10px;justify-content:space-between;flex-wrap:wrap}
.card h2 small{font-family:var(--font-body);font-weight:400;color:var(--text-dim);font-size:12.5px;margin-right:auto}
.card > table{margin:0}
.card.empty,.empty{padding:14px 0;text-align:left;color:var(--text-dim);font-size:13.5px}
td.empty{padding:16px 0}
.muted{color:var(--text-dim)}.small{font-size:12.5px}
.row{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:flex-end}
.grid{display:grid;gap:14px 18px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.grid .span2{grid-column:span 2}.grid .full{grid-column:1/-1}
/* barra de filtros arriba de un listado: sin caja, solo aire */
.filtros{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px}

/* ---------- Cifras (totales de una pantalla) ----------
   Misma lógica que el dashboard: el valor primero, la etiqueta debajo. */
.cifras{display:flex;flex-wrap:wrap;gap:14px 52px;border-top:1px solid var(--rule);padding:14px 0 4px;margin-bottom:36px}
.filtros + .cifras{border-top:none;padding-top:4px}
.cifra{min-width:0}
.cifra .v{display:block;font-size:22px;font-weight:600;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
.cifra .l{display:block;font-size:13px;color:var(--text-dim);margin-top:3px}
.cifra.pos .v{color:var(--success)}.cifra.neg .v{color:var(--danger)}
.cifra.atencion{background:var(--atencion);border-radius:var(--radius-sm);margin:-8px -12px;padding:8px 12px}
.cifras.cuentas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 36px;padding-top:4px}
.cifras.cuentas .cifra{padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.cifras.cuentas .cifra .v{font-size:19px}
.cifras.cuentas .cifra .l{margin:0 0 2px}
.cifras.cuentas .cifra:hover .l{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.cifras.cuentas .cifra.sel{box-shadow:inset 0 -2px 0 var(--gold)}
.cifras.cuentas .cifra.sel .l{color:var(--ink)}

/* ---------- Formularios ---------- */
label.f{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}
input,select,textarea{font-family:var(--font-body);font-size:14px;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);padding:8px 11px;width:100%;text-transform:none;letter-spacing:normal;font-weight:400}
textarea{min-height:64px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--gold-dark);box-shadow:none}
label.chk{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;color:var(--ink-soft)}
input:disabled,select:disabled,textarea:disabled{background:var(--soft);color:var(--text-dim);border-color:var(--line)}
::placeholder{color:var(--text-faint)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-size:13.5px;font-weight:500;
  padding:9px 16px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--ink);white-space:nowrap;
  background:var(--ink);color:#fff;transition:background .12s,border-color .12s,color .12s}
.btn:hover{background:var(--ink-soft)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn.ghost{background:transparent;border-color:var(--line-strong);color:var(--ink-soft)}
.btn.ghost:hover{border-color:var(--ink-soft);background:transparent}
.btn.danger{background:transparent;border-color:#E3C4BD;color:var(--danger)}
.btn.danger:hover{background:var(--atencion);border-color:var(--danger)}
.btn.sm{font-size:12.5px;padding:5px 11px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-faint);font-size:14px;padding:3px 7px;border-radius:var(--radius-sm);line-height:1.2}
.icon-btn:hover{color:var(--danger);background:var(--atencion)}

/* ---------- Menú "…" de acciones secundarias ---------- */
.mas{display:inline-flex;position:relative;vertical-align:middle}
.mas-btn{background:none;border:1px solid transparent;cursor:pointer;color:var(--text-dim);font-size:16px;line-height:1;letter-spacing:1px;
  padding:4px 9px 8px;border-radius:var(--radius-sm);font-family:var(--font-body)}
.mas-btn:hover,.mas-btn[aria-expanded=true]{color:var(--ink);border-color:var(--line-strong);background:var(--surface)}
.mas-btn:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
/* al lado de botones (encabezado de la pantalla): misma altura que ellos */
.actions .mas{align-self:stretch}
.actions .mas-btn{padding:0 12px 6px;border-color:var(--line-strong)}
.mas-menu{position:fixed;z-index:80;min-width:190px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  padding:5px;box-shadow:0 6px 20px rgba(16,26,44,.10);display:flex;flex-direction:column;text-align:left;font-weight:400;letter-spacing:0;text-transform:none}
.mas-menu > button,.mas-menu > .btn{all:unset;box-sizing:border-box;display:block;width:100%;padding:7px 11px;border-radius:4px;cursor:pointer;
  font-family:var(--font-body);font-size:13.5px;color:var(--ink-soft);white-space:nowrap;text-align:left}
.mas-menu > button:hover,.mas-menu > button:focus-visible{background:var(--paper);color:var(--ink)}
.mas-menu > .danger{color:var(--danger)}
.mas-menu > .danger:hover{background:var(--atencion);color:var(--danger)}
.mas-menu > button:disabled{opacity:.45;cursor:not-allowed}
.mas-menu hr{border:none;border-top:1px solid var(--line);margin:4px 2px}

/* ---------- Tablas ----------
   Herramienta de gestión: alineadas al borde de la sección, líneas beige, sin cajas. */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:10.5px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;padding:8px 12px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-soft)}
th:first-child,td:first-child{padding-left:0}
th:last-child,td:last-child{padding-right:0}
tbody tr:last-child td{border-bottom:none}
tr.click{cursor:pointer}
tr.click:hover td{color:var(--ink)}
tr.click:hover td:nth-child(-n+2),tr.click:hover td:nth-child(-n+2) b{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
td.click{cursor:pointer}
td.click:hover b{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
td b{color:var(--ink);font-weight:500}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.sel td{background:rgba(34,122,80,.06)}
tr.sel td:first-child{padding-left:8px;box-shadow:inset 2px 0 0 var(--success)}
td input,td select{padding:5px 8px;font-size:13.5px}
td:has(> .mas){width:1%;text-align:right}
/* listados: cada dato en una línea; si no entra, la tabla se desplaza de costado */
.table-scroll{overflow-x:auto}
table.lista td{white-space:nowrap}
table.lista td.sin-titulo{color:var(--text-dim);font-style:italic}

/* ---------- Etiquetas de estado (pills: únicas que conservan la forma) ---------- */
.badge{display:inline-flex;align-items:center;font-family:var(--font-body);font-size:11.5px;font-weight:500;padding:2px 9px;border-radius:999px;
  background:var(--soft);color:var(--text-dim);white-space:nowrap;letter-spacing:0;vertical-align:middle}
.ph h1 .badge{font-size:12px}
.b-borrador{background:var(--soft);color:var(--text-dim)}
.b-enviado{background:var(--teal-tint);color:var(--teal)}
.b-aceptado,.b-convertida,.b-pagada,.b-activa{background:var(--success-tint);color:var(--success)}
.b-descartado,.b-perdida,.b-cancelada{background:var(--danger-tint);color:var(--danger)}
.b-abierta,.b-pendiente{background:var(--gold-tint);color:var(--gold-dark)}
.b-finalizada{background:var(--soft);color:var(--ink-soft)}

/* ---------- Pestañas ---------- */
.tabs{display:flex;gap:2px 6px;border-bottom:1px solid var(--line-strong);margin-bottom:24px;flex-wrap:wrap;align-items:center}
.tab{background:none;border:none;border-bottom:2px solid transparent;padding:8px 10px;font-size:13.5px;font-weight:500;color:var(--text-dim);cursor:pointer;font-family:var(--font-body);margin-bottom:-1px}
.tab:first-child{padding-left:0}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--gold)}
.tabs + .card{border-top:none;padding-top:0}

/* ---------- Presupuesto ---------- */
/* cada servicio es un bloque editable: acá la superficie sí separa (es la unidad de trabajo) */
.linea{border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:12px;background:var(--surface)}
.linea-head{display:grid;grid-template-columns:1.2fr 1fr 2fr auto;gap:12px;align-items:end}
.linea td:first-child,.linea th:first-child{padding-left:0}
/* resumen económico: renglón de cifras, sin caja */
.eco{display:flex;gap:10px 28px;flex-wrap:wrap;margin:14px 0 10px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--text-dim)}
.eco div{display:flex;flex-direction:column;gap:1px}
.eco b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.eco .hl b{font-size:16.5px;color:var(--ink)}
.eco input{padding:5px 8px;font-size:13.5px}
.aviso{background:rgba(184,132,58,.09);color:var(--gold-dark);border-radius:var(--radius-sm);padding:10px 14px;font-size:13.5px;margin-bottom:14px}
.resumen-op{border-top:1px solid var(--rule);padding:12px 0 0}
.resumen-op h2{font-size:15px}
.resumen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:28px 44px}

/* ---------- Tareas ---------- */
table.tareas td{vertical-align:top}
tr.hecha b{text-decoration:line-through;color:var(--text-faint)}
.vencida{color:var(--danger);font-weight:500}

/* ---------- Agenda ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line-strong);border-left:1px solid var(--line)}
.cal-h{font-size:10.5px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;padding:8px 10px;border-bottom:1px solid var(--line-strong);border-right:1px solid var(--line)}
.cal-d{min-height:100px;padding:6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;cursor:default;background:var(--surface)}
.cal-d.fuera{background:transparent}.cal-d.fuera .cal-n{color:var(--text-faint)}
.cal-d.hoy .cal-n{background:var(--gold);color:#fff;border-radius:var(--radius-sm);padding:0 7px;display:inline-block}
.cal-n{font-size:12.5px;font-weight:500;margin-bottom:4px;color:var(--ink-soft)}
.cal-ev,.cal-ta{font-size:11.5px;line-height:1.35;padding:2px 6px;border-radius:4px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal-ev{background:var(--teal-tint);color:var(--ink-soft)}
.cal-ev span{font-weight:600;color:var(--teal)}
.cal-ta{background:var(--gold-tint);color:var(--gold-dark)}
.cal-ta.vencida{background:var(--danger-tint);color:var(--danger)}

/* ---------- Notificaciones ---------- */
.notif{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.notif:last-child{border-bottom:none}
.notif .punto{width:8px;height:8px;border-radius:50%;margin-top:7px;flex-shrink:0;background:var(--gold)}
.notif.leida .punto{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.notif.leida .n-msg{color:var(--text-dim);font-weight:400}
.n-msg{font-weight:500;cursor:pointer;color:var(--ink)}
.n-msg:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.n-meta{font-size:12px;color:var(--text-dim);margin-top:3px;display:flex;gap:8px;align-items:center}
.n-acc{margin-left:auto;display:flex;gap:4px;flex-shrink:0}
.nivel{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:1px 7px;border-radius:999px}
.nivel-urgente{background:var(--danger-tint);color:var(--danger)}
.nivel-aviso{background:var(--gold-tint);color:var(--gold-dark)}

/* ---------- Dashboard (Inicio) ----------
   Editorial: sin tarjetas ni sombras. Los grupos se separan con una línea navy suave arriba
   y los renglones con líneas finas; la jerarquía la dan el tamaño, el peso y el color. */
.dash .ph .f{width:210px}
/* indicadores: tarjetas (a pedido del usuario, 07/10: solo acá; el resto del dashboard sigue editorial) */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:40px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 1px 2px rgba(16,26,44,.04)}
.kpi .k-l{font-size:12.5px;color:var(--text-dim);font-weight:500}
.kpi .k-v{font-family:var(--font-body);font-size:24px;font-weight:700;color:var(--ink);margin-top:4px;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi .k-v small{font-family:var(--font-body);font-size:14.5px;font-weight:600;display:block;color:var(--ink-soft)}
.kpi .k-d{font-size:12.5px;margin-top:6px;color:var(--text-dim)}
.k-d .sube{color:var(--success);font-weight:600}.k-d .baja{color:var(--danger);font-weight:600}
.kpi.click{cursor:pointer;transition:border-color .12s,transform .12s}.kpi.click:hover{border-color:var(--gold);transform:translateY(-1px)}
.dash-cols{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:0 44px;margin-bottom:44px}
.dash-sec{border-top:1px solid var(--rule);padding-top:12px;min-width:0}
.dash-sec > header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.dash-sec h2{font-size:15px;font-weight:600;color:var(--ink)}
.dash-sec h2 small{font-size:12.5px;font-weight:400;color:var(--text-dim);margin-left:6px}
.dash-sec header select{width:auto;padding:5px 8px;font-size:12.5px}
.dash .salida-cli{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;width:100%}
.dash .debe{color:var(--gold-dark);font-weight:500}.dash .saldada{color:var(--success)}
.dash .vacio{font-size:13px;color:var(--text-dim);padding:6px 0}
.dash details{margin-top:10px}
.dash details summary{font-size:12.5px;cursor:pointer}
@media(max-width:1100px){.dash-cols{grid-template-columns:1fr;gap:36px 0}}
.graf{position:relative}
.graf svg{width:100%;height:auto;display:block}
.graf .tt{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;padding:5px 9px;border-radius:var(--radius-sm);white-space:nowrap;transform:translate(-50%,-100%);margin-top:-8px;opacity:0;transition:opacity .1s}

/* ---------- Campañas: editor + vista previa del correo ---------- */
.camp-grid{display:grid;grid-template-columns:minmax(0,1fr) 640px;gap:0 36px;align-items:start}
.camp-prev{position:sticky;top:20px;border-top:1px solid var(--rule);padding-top:12px}
.camp-prev iframe,.previa-modal{display:block;width:100%;height:calc(100vh - 140px);min-height:520px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#EFE8DA}
.previa-modal{height:70vh}
@media(max-width:1250px){.camp-grid{grid-template-columns:1fr}.camp-prev{position:static}.camp-prev iframe{height:80vh}}

/* ---------- Campo editable con tooltip ---------- */
.celda-edit{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end}
.celda-edit input{width:110px;text-align:right}
.icon-btn.deshacer:hover{color:var(--teal);background:var(--teal-tint)}
.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  color:var(--teal);cursor:help;font-size:14px;outline:none}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);right:-6px;background:var(--ink);color:#fff;
  font-size:12px;font-weight:400;white-space:nowrap;padding:6px 10px;border-radius:var(--radius-sm);
  opacity:0;pointer-events:none;transform:translateY(2px);transition:opacity .12s,transform .12s;z-index:20}
.tip:hover::after,.tip:focus::after{opacity:1;transform:none}

/* ---------- Autocompletado y chips ---------- */
.ac-wrap{position:relative;width:100%}
.ac-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:0 6px 20px rgba(16,26,44,.08);z-index:60;max-height:300px;overflow:auto}
.ac-item{padding:8px 12px;cursor:pointer;font-size:13.5px}
.ac-iata{display:inline-block;min-width:34px;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.ac-sub{margin-left:38px;font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tramo .ac-list{min-width:min(340px,78vw)}
.tramo .ac-wrap:has([data-k=destino]) .ac-list{left:auto;right:0}
/* dentro de un label.f (ej. buscador de clientes en la consulta): sin las mayúsculas de la etiqueta */
label.f .ac-list,label.f .ac-wrap + div{text-transform:none;letter-spacing:normal;font-weight:400;color:var(--ink-soft);font-size:13px}
.ac-item.on,.ac-item:hover{background:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--teal-tint);color:var(--ink);border-radius:var(--radius-sm);padding:3px 6px 3px 10px;font-size:12.5px;font-weight:500}
.chip button{background:none;border:none;cursor:pointer;color:var(--ink-soft);font-size:13px;line-height:1;padding:0 2px}
.chip .muted{font-weight:400}
.req-corto{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.req-item{padding:10px 0;border-top:1px solid var(--line)}
.req-item:first-child{border-top:none;padding-top:2px}
.req-item p{margin:4px 0 0;white-space:pre-line}
.tramo{display:grid;grid-template-columns:64px minmax(0,1fr) 14px minmax(0,1fr) 28px;gap:8px;align-items:center;margin-bottom:6px}
@media(max-width:520px){.tramo{grid-template-columns:1fr 1fr}.tramo > span:first-child{grid-column:1/-1}.tramo > span.muted:not(:first-child){display:none}}
.otro-linea{margin:-4px 0 14px;display:flex;justify-content:flex-start}
.checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 14px;max-height:340px;overflow:auto;padding:4px 0}

/* ---------- Avisos y ventanas ---------- */
#toast{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:8px;z-index:100}
.toast{background:var(--ink);color:#fff;padding:10px 15px;border-radius:var(--radius-sm);font-size:13.5px;box-shadow:0 6px 20px rgba(16,26,44,.18);max-width:400px}
.toast.err{background:var(--danger)}
.modal-bg{position:fixed;inset:0;background:rgba(16,26,44,.42);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:var(--surface);border-radius:var(--radius-lg);padding:24px 26px;width:580px;max-width:100%;max-height:90vh;overflow:auto;box-shadow:0 12px 36px rgba(16,26,44,.18)}
.modal.wide{width:740px}
.modal h3{font-size:18px;font-weight:600;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.modal .foot{display:flex;justify-content:flex-end;gap:8px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
details summary{color:var(--text-dim)}

/* ---------- Responsive ---------- */
/* Celular y tablet (26/10/2026): el menú es un panel que se abre de costado con la pestaña de la izquierda;
   el contenido ocupa todo el ancho de la pantalla. */
.menu-tab,.menu-fondo,.campana-m{display:none}
@media(max-width:900px){
  html,body{height:auto;max-width:100%}
  body{display:block;overflow-x:hidden;overflow-y:auto}
  .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:60;width:min(280px,84vw);min-width:0;height:100dvh;
    transform:translateX(-100%);transition:transform .2s ease;box-shadow:none;padding:18px 14px calc(14px + env(safe-area-inset-bottom,0px))}
  body.menu-abierto .sidebar{transform:none;box-shadow:8px 0 24px rgba(16,26,44,.25)}
  .menu-fondo{display:block;position:fixed;inset:0;z-index:55;background:rgba(16,26,44,.35)}
  .menu-fondo[hidden]{display:none}
  .menu-tab{display:flex;align-items:center;justify-content:center;position:fixed;left:0;top:12px;z-index:65;width:26px;height:40px;
    padding:0;border:none;border-radius:0 8px 8px 0;background:var(--ink);color:#fff;cursor:pointer;box-shadow:1px 1px 6px rgba(16,26,44,.2);
    transition:left .2s ease}
  .menu-tab svg{transition:transform .2s ease}
  body.menu-abierto .menu-tab{left:min(280px,84vw)}
  body.menu-abierto .menu-tab svg{transform:rotate(180deg)}
  .menu-tab:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  .brand-tagline{padding-bottom:10px;margin-bottom:6px}
  .sb-firma{padding-bottom:4px}
  .topbar{padding:12px 16px 0 40px;justify-content:flex-end}
  .campana-m{display:inline-flex;position:relative;color:var(--ink-soft);margin-right:auto}
  .campana-m:hover,.campana-m.active{background:var(--soft);color:var(--ink)}
  .campana-m .campana-n{box-shadow:0 0 0 2px var(--paper)}
  .main{height:auto;overflow:visible}
  .page{padding:10px 14px 44px}
  .linea-head{grid-template-columns:1fr}
  .cal-d{min-height:64px}.cal-ev span{display:none}
  .cifras{gap:14px 32px}
  /* en pantallas chicas las tablas se desplazan de costado en vez de estirar la página */
  table{display:block;overflow-x:auto;white-space:nowrap}
  .grid .span2{grid-column:1/-1}
}
@media(max-width:520px){
  .ph{margin-bottom:18px}
  .ph .actions{width:100%}
  .ph h1{font-size:20px}
  .ph p{font-size:12.5px}
  /* indicadores del Inicio: de a dos, compactos, para verlos todos juntos */
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:24px}
  .kpi{padding:10px 11px;border-radius:12px}
  .kpi .k-l{font-size:11px;line-height:1.25}
  .kpi .k-v{font-size:17px;margin-top:2px}
  .kpi .k-v small{font-size:11.5px;font-weight:500}
  .kpi .k-d{font-size:10.5px;margin-top:3px;line-height:1.3}
  /* totales de cada pantalla: de a dos por fila */
  .cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-bottom:24px}
  .cifra .v{font-size:16px;white-space:normal;overflow-wrap:anywhere}
  .cifra .l{font-size:11.5px}
  .cifras.cuentas{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  .cifras.cuentas .cifra .v{font-size:15px}
  .card{margin-bottom:22px}
  .filtros label.f{width:100% !important}
}

/* ---------- Envío de campañas (27/10/2026) ---------- */
.barra-envio{height:8px;background:var(--soft);border-radius:4px;overflow:hidden;margin:4px 0 8px}
.barra-envio span{display:block;height:100%;background:var(--success);transition:width .4s ease}
.cuenta-correo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line)}
.cuenta-correo:first-child{border-top:none}

/* ---------- Por pagar / por cobrar / proyección (23/10/2026) ---------- */
tr.atencion td{background:var(--atencion)}
td.neg{color:var(--danger)}td.pos{color:var(--success)}
.proy-barras{display:flex;gap:10px;align-items:flex-end;height:150px;padding:6px 0;border-bottom:1px solid var(--line)}
.proy-mes{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;min-width:0}
.proy-par{flex:1;width:100%;display:flex;gap:3px;align-items:flex-end;justify-content:center}
.proy-b{width:min(18px,40%);border-radius:3px 3px 0 0;min-height:1px}
.proy-b.ing,.proy-ley.ing{background:var(--success)}
.proy-b.egr,.proy-ley.egr{background:var(--danger)}
.proy-ley{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px}
/* sin selección de texto al arrastrar el mouse en lo que es navegación o botones (28/10/2026, pedido de la usuaria);
   en tablas y textos se sigue pudiendo seleccionar y copiar */
.sidebar,.topbar,.menu-tab,.kpi,.tabs,.btn,.icon-btn,.mas,.mas-menu,.badge,.campana,.back,.proy-flecha{-webkit-user-select:none;user-select:none}
.sidebar img,.kpi,.nav-item,.brand-logo{-webkit-user-drag:none}
/* navegación con links (28/10/2026): se pueden abrir en otra pestaña */
a.nav-item,a.back,a.tab,a.kpi,a.n-msg{text-decoration:none}
a.kpi{display:block;color:inherit}
a.n-msg{display:block}
a.fila{color:inherit;text-decoration:none}
/* la fila entera es el link: el clic secundario ofrece "Abrir en una pestaña nueva" en cualquier parte de la fila */
tr.click{position:relative}
a.fila::after{content:'';position:absolute;inset:0}
tr.click :is(button,input,select,textarea,label,.mas,a:not(.fila)){position:relative;z-index:1}
.mas-menu > a{all:unset;box-sizing:border-box;display:block;width:100%;padding:7px 11px;border-radius:4px;cursor:pointer;
  font-family:var(--font-body);font-size:13.5px;color:var(--ink-soft);white-space:nowrap;text-align:left}
.mas-menu > a:hover,.mas-menu > a:focus-visible{background:var(--paper);color:var(--ink)}
/* detalle de un mes de la proyección (27/10/2026): se abre al tocar la fila */
.proy-flecha{display:inline-block;width:12px;color:var(--gold-dark)}
tr.proy-det > td{background:var(--soft);padding:14px 16px !important;white-space:normal}
.proy-detalle{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px}
.proy-lado h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin:0 0 8px;font-weight:600}
.proy-grupo{margin-bottom:12px}
.proy-gt{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line-strong);padding-bottom:3px;margin-bottom:4px;color:var(--ink)}
.proy-p{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:4px 0;border-bottom:1px solid var(--line);font-size:13px}
.proy-p:last-child{border-bottom:none}
.proy-p .num{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:900px){
  .proy-detalle{grid-template-columns:1fr}
  /* la fila de detalle ocupa el ancho de la pantalla, no el de la tabla desplazada */
  .proy-detalle{position:sticky;left:16px;width:calc(100vw - 60px)}
}
/* tablas que no entran: sombra en el borde y una pista para deslizarlas (marcarDesbordes en core.js) */
.desborda:not(.al-final){background:linear-gradient(to left,rgba(16,26,44,.13),rgba(16,26,44,0)) right center/18px 100% no-repeat scroll}
.scroll-pista{font-size:11.5px;color:var(--text-dim);text-align:right;margin:0 0 4px}
.scroll-pista[hidden]{display:none}
/* agenda: feriados y pagos */
.cal-d.feriado{background:var(--gold-tint)}
.cal-fer{font-size:11px;color:var(--gold-dark);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-pago{font-size:11.5px;line-height:1.35;padding:2px 6px;border-radius:4px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  background:var(--success-tint);color:var(--success);border-left:2px solid var(--success)}
.cal-pago.vencido{background:var(--danger-tint);color:var(--danger);border-left-color:var(--danger)}