/* =========================================================
   VLRFull -LAB · estilos compartidos
   Se carga después de los estilos de cada módulo y los ajusta:
   menos bordes, menos mayúsculas, una sola capa de contenedores.
   ========================================================= */
:root{
  --page:#f6f6f4;           /* fondo de la zona de trabajo */
  --surface:#ffffff;        /* tarjetas, paneles, menús */
  --surface-2:#fbfbfa;      /* encabezados de tabla, pies de tarjeta */
  --card-ring:0 0 0 1px rgba(20,20,19,.06),0 1px 2px rgba(20,20,19,.04);
  --ink-2:#444;             /* texto secundario oscuro */
}

/* ---------- Capas: página gris claro, tarjetas blancas sin borde duro ---------- */
body{background:var(--surface)}
.view{background:var(--page)}
.view .card,.view .kpis,.view .sds,.view .rc,.view .case,.view .acard,.view .pcard,.view .cat-item{border-color:transparent;box-shadow:var(--card-ring)}
.view .seg{background:#ededea;border-color:transparent}
.view > .page{animation:vl-in .16s ease both}
@keyframes vl-in{from{opacity:0;transform:translateY(4px)}}
.ph{margin:14px 0 18px}
.ph p{font-size:var(--fs-sm)}

/* ---------- Pestañas: sin la barra de desplazamiento fantasma (▲▼) ---------- */
.tabs{overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}

/* ---------- Etiquetas en tipo oración (no en MAYÚSCULAS) ---------- */
.tbl th,.kpi .l,.sec-t,.mini .l,.pal-list .g,.pop .g,.recent-h,.attn-g,.lots th,.cal .dh,.alist .g,.prev-wrap th,.em-lbl,.week button span{
  text-transform:none!important;letter-spacing:0!important;font-size:var(--fs-xs)!important;font-weight:500;color:var(--muted)}
.tbl th{background:var(--surface-2)}
.sec-t{margin:6px 0 -6px}
/* Códigos: misma fuente del texto, tamaño pequeño y cifras tabulares */
.mono{font-family:inherit!important;font-size:var(--fs-xs);color:var(--faint);letter-spacing:0;font-variant-numeric:tabular-nums}

/* ---------- Indicadores en una sola franja ---------- */
.kpis{gap:0!important;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kpis > .kpi{border:0!important;border-radius:0!important;border-left:1px solid var(--line)!important;box-shadow:none!important;background:transparent;position:relative;margin:0}
.kpis > .kpi:first-child{border-left:0!important}
a.kpi,button.kpi,.kpi[data-kv]{cursor:pointer}
a.kpi:hover,button.kpi:hover,.kpi[data-kv]:hover{background:var(--surface-2)!important}
a.kpi::after,button.kpi::after,.kpi[data-kv]::after{content:"";position:absolute;right:14px;top:16px;width:7px;height:7px;border-top:1.6px solid var(--faint);border-right:1.6px solid var(--faint);transform:rotate(45deg);opacity:0;transition:opacity .12s}
a.kpi:hover::after,button.kpi:hover::after,.kpi[data-kv]:hover::after{opacity:1}
.kpi.on{box-shadow:inset 0 -2px 0 var(--accent)!important}

/* ---------- Encabezado global ---------- */
header.hd{background:var(--surface);border-bottom:1px solid var(--line);height:60px}
.hd-r{gap:6px!important}
.vl-search{display:flex;align-items:center;gap:8px;height:36px;width:260px;padding:0 8px 0 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);color:var(--faint);cursor:pointer;font-size:var(--fs-sm)}
.vl-search:hover{border-color:#cfcfcb;color:var(--muted)}
.vl-search span{flex:1;text-align:left}
.vl-search kbd{font-size:var(--fs-2xs)}
.vl-reg{height:36px;padding:0 12px;border-radius:10px}
.vl-bell{position:relative}
.vl-bell .dot{position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--warn);color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}
.vl-bell .dot.bad{background:var(--bad)}
.vl-sos{color:var(--bad)!important}
.vl-sos:hover{background:var(--bad-bg)!important}
/* Menú lateral */
aside.sb{background:var(--surface)}
.ndot{width:7px;height:7px;border-radius:50%;margin-left:auto;background:var(--warn);flex-shrink:0}
.ndot.bad{background:var(--bad)}
.app.collapsed .ndot{position:absolute;margin:0;transform:translate(10px,-8px)}
.app.collapsed .nav-item{position:relative}
.sb-user.vl-user .avatar{cursor:pointer}
.sb-user.vl-user .who{cursor:default}
.app.collapsed #vlUser{display:none}

/* ---------- Menús flotantes ---------- */
.vl-pop{position:absolute;z-index:130;min-width:220px;max-width:calc(100vw - 16px);max-height:calc(100vh - 80px);overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;animation:vl-pop .12s ease}
@keyframes vl-pop{from{opacity:0;transform:translateY(-3px)}}
.vl-pop .it{display:flex!important;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;text-align:left;cursor:pointer;font-size:var(--fs-base);color:var(--text);text-decoration:none;justify-content:flex-start!important}
.vl-pop .it:hover,.vl-pop .it:focus-visible{background:var(--hover)}
.vl-pop .it:disabled{opacity:.45;cursor:not-allowed}
.vl-pop .it .mi{color:var(--muted);display:flex}
.vl-pop .it .mt{flex:1;min-width:0;display:flex;flex-direction:column}
.vl-pop .it .mt small{font-size:var(--fs-xs);color:var(--faint)}
.vl-pop .it > svg{color:var(--accent-ink)}
.vl-pop .it.on{color:var(--accent-ink);font-weight:500}
.vl-pop .it.danger,.vl-pop .it.danger .mi{color:var(--bad)}
.vl-pop .g{padding:8px 10px 4px}
.vl-pop hr{border:0;height:1px;background:var(--line);margin:4px 6px}
.av-h{font-weight:600;padding:8px 10px 2px}
.av-pop .it.av{font-size:var(--fs-sm)}
.av-pop .it.av > svg{color:var(--faint)}
.av-d{width:8px;height:8px;border-radius:50%;background:var(--info);flex-shrink:0}
.av-d.bad{background:var(--bad)} .av-d.warn{background:#d99a2b}
.av-empty{display:flex;align-items:center;gap:6px;padding:4px 10px 8px;font-size:var(--fs-sm);color:var(--faint)}
.av-empty svg{color:var(--accent)}

/* ---------- Botón ⋯ de fila ---------- */
.ibtn.more{color:var(--faint)}
.ibtn.more:hover,.ibtn.more[aria-expanded=true]{color:var(--text);background:var(--hover)}
@media (pointer:fine){
  .tbl tbody tr .ibtn.more{opacity:.55}
  .tbl tbody tr:hover .ibtn.more,.tbl tbody tr .ibtn.more[aria-expanded=true]{opacity:1}
}
.row-act{display:flex;gap:4px;justify-content:flex-end;align-items:center}

/* ---------- Barra de filtros ---------- */
.vf{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.vf-q{flex:1 1 240px;max-width:360px}
.vf-q .inp{background:var(--surface)}
.vf-btn .cnt{background:var(--accent);color:#fff;height:18px;min-width:18px;padding:0 5px;border-radius:9px;font-size:var(--fs-2xs)}
.vf-btn.on{border-color:var(--accent);color:var(--accent-ink)}
.vf-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vf-chip{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 4px 0 10px;border-radius:15px;background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.vf-chip .faint{color:var(--accent-ink);opacity:.7;font-weight:400}
.vf-chip button{width:22px;height:22px;border:0;border-radius:11px;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer}
.vf-chip button:hover{background:rgba(31,138,106,.16)}
.vf-r{margin-left:auto;display:flex;gap:8px;align-items:center}
.vf-pop{padding:10px 12px 12px;display:flex;flex-direction:column;gap:10px}
.vf-h{font-weight:600}
.vf-pop .field{display:flex;flex-direction:column;gap:4px}
.vf-pop .field > span{font-size:var(--fs-xs);color:var(--muted);font-weight:500}
.vf-pop .sel{width:100%;height:36px}
.vp-btn{gap:8px}
.vp-c{display:flex;flex-direction:column;gap:6px;padding:4px 10px 8px}
.vp-c .inp{height:34px}

/* ---------- Barra "cambios sin guardar" ---------- */
.savebar{position:fixed;left:50%;bottom:20px;transform:translate(-50%,24px);opacity:0;pointer-events:none;z-index:150;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:14px;background:#1f1f1f;color:#fff;box-shadow:var(--shadow);transition:opacity .15s,transform .15s;font-size:var(--fs-sm);max-width:calc(100% - 32px)}
.savebar.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.savebar span{flex:1;padding-right:8px;white-space:nowrap}
.savebar .btn.alt{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}
.savebar .btn.alt:hover{background:rgba(255,255,255,.2)}

/* ---------- Selección múltiple: barra fija arriba de la tabla ---------- */
.selbar{position:sticky;top:0;z-index:4}

/* ---------- Estados discretos ---------- */
.okdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.55}
.grp td{background:var(--surface-2)!important;font-size:var(--fs-xs);font-weight:600;color:var(--muted);padding-top:8px!important;padding-bottom:8px!important}
.cell-trunc{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.click,.sds.click,.rc.click,.acard.click{cursor:pointer;transition:box-shadow .12s ease,transform .12s ease}
.card.click:hover,.sds.click:hover,.rc.click:hover,.acard.click:hover{box-shadow:0 0 0 1px rgba(20,20,19,.1),0 6px 18px rgba(20,20,19,.07)}
details.help{font-size:var(--fs-sm);color:var(--muted)}
details.help summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;list-style:none}
details.help summary::-webkit-details-marker{display:none}
details.help[open] summary{margin-bottom:6px}
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-sm);margin-top:8px}
.backlink:hover{color:var(--text)}

/* ---------- Responsive del encabezado ---------- */
@media (max-width:1100px){ .vl-search{width:200px} }
@media (max-width:900px){
  header.hd{height:56px}
  .vl-search{width:36px;padding:0;justify-content:center;border-color:transparent;background:transparent;color:var(--muted)}
  .vl-search span,.vl-search kbd{display:none}
  .vl-reg{width:36px;padding:0;justify-content:center}
  .vl-reg span{display:none}
  .kpis{display:flex!important;overflow-x:auto;scrollbar-width:none;border-radius:12px}
  .kpis::-webkit-scrollbar{display:none}
  .kpis > .kpi{flex:1 0 150px;padding:12px 14px!important}
  .vf-q{flex:1 1 100%;max-width:none}
  .vf-r{margin-left:0}
  .savebar{bottom:12px}
}
@media (max-width:600px){ .vl-bell,.vl-sos{width:36px!important;height:36px!important} }

/* =========================================================
   Tema oscuro (Cuenta → Tema). Tokens + superficies con fondo fijo.
   ========================================================= */
:root[data-theme=dark]{
  color-scheme:dark;
  --page:#121211; --surface:#1b1b1a; --surface-2:#20201f;
  --bg:#1b1b1a; --soft:#232322; --hover:#2a2a28; --line:#2c2c2a; --line-2:#383835;
  --text:#ececea; --muted:#a6a6a2; --faint:#7d7d79; --ink-2:#c9c9c5;
  --accent:#34a67f; --accent-ink:#6fd1ae; --accent-soft:#17312a; --accent-ring:rgba(52,166,127,.3);
  --warn:#e3ad52; --warn-bg:#352a12; --bad:#f07e74; --bad-bg:#3b1d1b; --info:#86b4ef; --info-bg:#172638; --vio:#b9a3f0; --vio-bg:#2a2340;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.45);
  --card-ring:0 0 0 1px rgba(255,255,255,.06);
}
:root[data-theme=dark] body{background:var(--surface);color:var(--text)}
:root[data-theme=dark] :is(aside.sb,.btn,.inp,.sel,textarea.inp,.card,.kpi,.modal,.drawer,.pop,.dd,.tile,.sds,.rc,.case,.res,.recent button,.cat-item,.pcard,.ri,.step button,.step input,kbd,.attn .it,.acard,.ag,.list-r,.rchip,.lbl-card,.qr-card,.tnum,.rg-top,.rg-ronda,.rg-area,.rg-ah,.rg-item,.rg-rep,.em-top,.em-call,.em-list,.em-row,.em-now,.em-sec,.what button,.pill,.tel-row .inp,.steps label,.steps .st,.prev-list,.alist,.fbar,.vf-q .inp,.pfilter .box,.cal .d,.week,.linkbox .inp){background-color:var(--surface)!important;color:inherit;border-color:var(--line-2)}
:root[data-theme=dark] :is(.tbl th,.ov-f,.cart-foot,.rep-card .foot,.qr-ah,.lots td,.lots td.c,.prev-wrap th,.cal .dh,.grp td){background:var(--surface-2)!important}
:root[data-theme=dark] :is(.tbl tbody tr:hover td,.list-r:hover,.attn .it:hover,.ag:hover,.rg-item:active){background:var(--hover)!important}
:root[data-theme=dark] .btn.pri{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff}
:root[data-theme=dark] .btn.pri:hover{background:#2c8d6c!important}
:root[data-theme=dark] :is(.btn.ghost){background:transparent!important;border-color:transparent}
:root[data-theme=dark] .btn.ghost:hover{background:var(--hover)!important}
:root[data-theme=dark] :is(.btn.dark){background:#ececea!important;color:#1b1b1a!important;border-color:#ececea!important}
:root[data-theme=dark] :is(.btn.red){background:var(--bad)!important;color:#1b1b1a!important;border-color:var(--bad)!important}
:root[data-theme=dark] .sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a6a6a2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important}
:root[data-theme=dark] .view .seg{background:#262624}
:root[data-theme=dark] .seg button.on{background:var(--hover)!important;color:var(--text);box-shadow:0 0 0 1px var(--line-2)}
:root[data-theme=dark] :is(.sub a,.chip,.field > label,.cat-item .s,.aux .it p,.steps,.lbl-card .m,.em-sec .in){color:var(--ink-2)}
:root[data-theme=dark] :is(.chip,.b-neu,.cnt){background:var(--hover);color:var(--ink-2)}
:root[data-theme=dark] .empty b{color:var(--ink-2)}
:root[data-theme=dark] :is(.empty .ic,.tile.pend,.sheet,.qr-sheet){background:var(--soft)!important}
:root[data-theme=dark] :is(.ibtn,.ibtn.lg){color:var(--muted)}
:root[data-theme=dark] .ibtn:hover{color:var(--text)}
:root[data-theme=dark] .tile.bad{background:var(--bad-bg)!important;border-color:transparent}
:root[data-theme=dark] .tile.off{background:var(--warn-bg)!important;border-color:transparent}
:root[data-theme=dark] .mini.bad{background:var(--bad-bg)!important;border-color:transparent}
:root[data-theme=dark] .mini.warn{background:var(--warn-bg)!important;border-color:transparent}
:root[data-theme=dark] :is(.hz.danger){background:var(--bad-bg);border-color:transparent}
:root[data-theme=dark] :is(.hz.warn){background:var(--warn-bg);border-color:transparent}
:root[data-theme=dark] :is(.hz.ok){background:var(--accent-soft);border-color:transparent}
:root[data-theme=dark] .rg-seg button.on,:root[data-theme=dark] .pill.on,:root[data-theme=dark] .pg.on{background:var(--text)!important;color:#1b1b1a!important}
:root[data-theme=dark] .tel{background:var(--bad-bg)!important}
:root[data-theme=dark] .tel.main{background:var(--bad)!important;color:#1b1b1a!important}
:root[data-theme=dark] .what button.on{background:var(--bad-bg)!important}
:root[data-theme=dark] :is(.rg-bar,.em-bar){background:linear-gradient(to top,var(--page) 65%,transparent)}
:root[data-theme=dark] body.reg-mode,:root[data-theme=dark] body.em-mode{background:var(--page)}
:root[data-theme=dark] .rg-top,:root[data-theme=dark] .em-top{background:rgba(27,27,26,.94)!important}
:root[data-theme=dark] .chart svg text{fill:#8b8b87}
:root[data-theme=dark] .chart svg line[stroke="#f0f0ee"]{stroke:#2a2a28}
:root[data-theme=dark] .chart svg line[stroke="#dcdcd8"],:root[data-theme=dark] .chart svg line[stroke="#cfcfca"]{stroke:#3a3a37}
:root[data-theme=dark] .chart svg [stroke="#fff"]{stroke:var(--surface)}
:root[data-theme=dark] :is(.qr-card,.lbl-card){color:#111;background:#fff!important}
:root[data-theme=dark] .vl-search{background:var(--surface-2)}
:root[data-theme=dark] .tip,:root[data-theme=dark] .toast,:root[data-theme=dark] .savebar,:root[data-theme=dark] .cart-bar.show{background:#2d2d2b;box-shadow:0 0 0 1px var(--line-2),var(--shadow)}
:root[data-theme=dark] .note.warn{background:var(--warn-bg)} :root[data-theme=dark] .note.bad{background:var(--bad-bg)} :root[data-theme=dark] .note.info{background:var(--info-bg)} :root[data-theme=dark] .note.ok{background:var(--accent-soft)}
:root[data-theme=dark] .logo{background:var(--accent)}
:root[data-theme=dark] .drop{border-color:var(--line-2)}
:root[data-theme=dark] .progress{background:var(--hover)}
:root[data-theme=dark] .ov{background:rgba(0,0,0,.55)}
:root[data-theme=dark] .week button.on b,:root[data-theme=dark] .week button.on span{color:#fff}

/* Filas de agrupación (por día) dentro de tablas que pasan a tarjetas en pantallas angostas */
@media (max-width:1180px){
  .tbl.stack > tbody > tr.grp{padding:8px 14px;background:var(--surface-2)}
  .tbl.stack > tbody > tr.grp > td{display:block;padding:0;background:transparent!important}
  .tbl.stack > tbody > tr.grp > td::before{display:none}
  .tbl.stack > tbody > tr .row-act:empty{display:none}
}
.sec-g{padding:10px 16px 4px;font-size:var(--fs-xs);color:var(--muted);font-weight:500;border-top:1px solid var(--line)}
.sec-g:first-child{border-top:0}

/* ---------- Ajustes para celular ---------- */
@media (max-width:900px){
  .ph{position:relative}
  .ph > div:first-child{padding-right:44px}
  .ph .acts > .ibtn.more{position:absolute;top:-2px;right:-6px}
  .ph .acts:has(> .ibtn.more:only-child){width:0;height:0;margin:0}
}
@media (max-width:1180px){
  .tbl.stack > tbody > tr > td:empty,.tbl.stack > tbody > tr > td:has(> .row-act:empty){display:none!important}
  .tbl.stack > tbody > tr > td > .row-act{width:100%;justify-content:flex-end}
  .tbl.stack > tbody > tr.grp > td{text-align:left}
}
:root[data-theme=dark] :is(.alist button,.pop a,.dd button,.pal-list button,.rep-list button,.gopt label){color:var(--ink-2)}
:root[data-theme=dark] :is(.alist button.on,.rep-list button.on){background:var(--accent-soft);color:var(--accent-ink)}