/* Juanva · Base: tema (colores, tipografía, controles comunes) y barra de pestañas. */

/* ════════ theme (antes theme.css) ════════ */
/* =====================================================================
   EDITOR · Tema unificado para todos los módulos
   ---------------------------------------------------------------------
   Variables base de los controles, ajustadas por estudio.css.
   Tipografía: Segoe UI con fallback a system-ui / sans-serif.
   ===================================================================== */

:root{
  --zb:        #1E3A8A;
  --zb-dark:   #142B6B;
  --zb-light:  #2F5BC4;
  --zb-pale:   #E8EEF9;
  --zb-paler:  #F3F6FC;
  --zr:        #C8102E;
  --zr-dark:   #A00C24;
  --zr-pale:   #FDECEF;
  --bg:        #F3F5FA;
  --bd:        #d9e0ee;
  --bd-soft:   #ECEFF5;
  --w:         #ffffff;
  --text:      #1a2035;
  --text-soft: #4a4a4a;
  --text-mute: #8a8a8a;
  --ok:        #2f8f4e;
  --ok-pale:   #e4f4e8;
  --warn:      #d77f00;
  --warn-pale: #fff2df;
  --mod-yellow: #E0A800;
  --mod-pink:   #D6336C;
  --shadow:    0 2px 6px rgba(30,58,138,.10);
  --shadow-md: 0 6px 24px rgba(30,58,138,.18);
  --shadow-lg: 0 14px 48px rgba(30,58,138,.25);
  --radius:    10px;
  --radius-lg: 14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Segoe UI',Tahoma,system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--text)}
a{color:var(--zb);text-decoration:none}
a:hover{color:var(--zb-light)}

/* ─── HEADER común ─── */
.zb-hdr{
  background:linear-gradient(135deg,#fff 0%,#f6f8fd 100%);
  border-bottom:4px solid var(--zb);
  padding:10px 18px;
  display:flex;align-items:center;gap:16px;
  box-shadow:var(--shadow);
  position:relative;z-index:10;
}
.zb-hdr .logo{display:flex;align-items:center;gap:10px}
.zb-hdr .logo img{height:46px;width:auto;display:block}
.zb-hdr h1{color:var(--zb);font-size:18px;font-weight:800;letter-spacing:.4px;line-height:1.1}
.zb-hdr h1 small{display:block;font-size:11px;font-weight:500;color:var(--text-mute);letter-spacing:.6px;margin-top:2px}
.zb-hdr .spacer{flex:1}
.zb-hdr .user-chip{
  display:flex;align-items:center;gap:8px;
  background:var(--zb-pale);color:var(--zb);
  padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;
  border:1px solid #c9d4ee;
}
.zb-hdr .user-chip .role{
  background:var(--zb);color:#fff;border-radius:10px;padding:1px 8px;font-size:10px;font-weight:700;
}
.zb-hdr .user-chip .role.admin{background:var(--zr)}
/* v318 · El nombre del chip abre "Mi cuenta": se ve igual que antes (texto),
   con subrayado al pasar por encima. */
.zb-hdr .user-chip .zb-acct{
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
  text-align:left;border-radius:4px;
}
.zb-hdr .user-chip .zb-acct:hover,.zb-hdr .user-chip .zb-acct:focus-visible{text-decoration:underline}

/* v318 · Mi cuenta / Sesiones y dispositivos */
.zb-acct-modal{max-width:600px}
.zb-acct-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.zb-acct-help{font-size:12px;color:var(--text-mute);margin:4px 0 10px}
.zb-devs{display:flex;flex-direction:column;gap:6px}
.zb-dev{display:flex;align-items:center;gap:10px;border:1px solid var(--bd);border-radius:10px;padding:8px 10px;background:#fff}
.zb-dev.cur{border-color:#b9c9ee;background:var(--zb-paler)}
.zb-dev .ico{font-size:20px;line-height:1;flex:none}
.zb-dev .txt{flex:1;min-width:0}
.zb-dev .nm{font-size:13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.zb-dev .nm .alias{color:var(--text-soft);font-style:italic}
.zb-dev .nm .zb-input{flex:1;min-width:120px;padding:5px 8px;font-size:13px}
.zb-dev .meta{font-size:11.5px;color:var(--text-mute);margin-top:1px}
.zb-dev .acts{display:flex;gap:4px;flex:none}
.zb-acct-pwd{margin-top:16px;border-top:1px solid var(--bd);padding-top:12px}
.zb-acct-pwd summary{cursor:pointer;font-weight:700;color:var(--zb);font-size:13px}
.zb-acct-pwd .zb-field{margin-top:8px;max-width:320px}
.zb-acct-pwd .chk{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;cursor:pointer}
@media screen and (max-width:520px){
  .zb-dev{flex-wrap:wrap}
  .zb-dev .acts{width:100%;justify-content:flex-end}
}

/* ─── NAV de retorno ─── */
.zb-nav{
  background:#fff;
  border-bottom:1px solid var(--bd);
  padding:8px 18px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-size:13px;
}
.zb-nav a{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:7px;
  color:var(--text-soft);font-weight:500;
  border:1px solid transparent;transition:.15s;
}
.zb-nav a:hover{background:var(--zb-pale);color:var(--zb)}
.zb-nav a.active{background:var(--zb);color:#fff}

/* ─── CONTENEDORES ─── */
.zb-container{max-width:1200px;margin:0 auto;padding:22px 18px}
.zb-section{display:none}
.zb-section.active{display:block;animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ─── CARDS ─── */
.zb-card{
  background:var(--w);
  border:1px solid var(--bd);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
  margin-bottom:18px;
}
.zb-card-head{
  background:var(--zb);color:#fff;
  padding:11px 18px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:14px;font-weight:600;letter-spacing:.3px;
}
.zb-card-head .actions{display:flex;gap:6px;flex-wrap:wrap}
.zb-card-body{padding:18px}
.zb-card-foot{
  padding:12px 18px;background:var(--zb-paler);
  border-top:1px solid var(--bd);
  display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;
}

/* ─── BOTONES ─── */
.zb-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:8px;
  font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid transparent;
  transition:transform .12s,filter .12s,background .15s,border-color .15s;
}
.zb-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.zb-btn:active{transform:translateY(0)}
.zb-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.zb-btn-pri{background:var(--zb);color:#fff}
.zb-btn-pri:hover{background:var(--zb-light)}
.zb-btn-red{background:var(--zr);color:#fff}
.zb-btn-red:hover{background:var(--zr-dark)}
.zb-btn-ok{background:var(--ok);color:#fff}
.zb-btn-warn{background:var(--warn);color:#fff}
.zb-btn-ghost{background:transparent;color:var(--zb);border-color:var(--zb)}
.zb-btn-ghost:hover{background:var(--zb-pale)}
.zb-btn-ghost-red{background:transparent;color:var(--zr);border-color:var(--zr)}
.zb-btn-ghost-red:hover{background:var(--zr-pale)}
.zb-btn-soft{background:#fff;color:var(--text-soft);border-color:var(--bd)}
.zb-btn-soft:hover{background:var(--zb-paler);border-color:var(--zb)}
.zb-btn-sm{padding:5px 11px;font-size:12px;border-radius:6px}
.zb-btn-lg{padding:12px 22px;font-size:15px;border-radius:10px}
.zb-btn-icon{padding:6px 9px;font-size:13px}

/* ─── FORMULARIOS ─── */
.zb-field{display:flex;flex-direction:column;gap:4px}
.zb-field label{font-size:11px;font-weight:700;color:var(--text-mute);text-transform:uppercase;letter-spacing:.5px}
.zb-input,.zb-select,.zb-textarea{
  border:1.5px solid var(--bd);background:#fff;
  border-radius:8px;padding:8px 12px;font-size:14px;
  color:var(--text);outline:none;width:100%;
  transition:border-color .15s,background .15s;
}
.zb-input:focus,.zb-select:focus,.zb-textarea:focus{border-color:var(--zb);background:#fff}
.zb-textarea{resize:vertical;min-height:60px}

/* ─── TABLAS ─── */
.zb-table-wrap{overflow-x:auto;border-radius:var(--radius);}
.zb-table{width:100%;border-collapse:collapse;background:#fff}
.zb-table thead th{
  background:var(--zb);color:#fff;padding:10px 12px;text-align:left;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;
}
.zb-table thead th.r{text-align:right}
.zb-table tbody tr{border-bottom:1px solid var(--bd-soft)}
.zb-table tbody tr:hover{background:var(--zb-paler)}
.zb-table tbody td{padding:8px 12px;font-size:13px;vertical-align:middle}
.zb-table tbody td.r{text-align:right;font-variant-numeric:tabular-nums}
.zb-table tfoot td{padding:10px 12px;font-weight:700;background:var(--zb-pale);color:var(--zb);border-top:2px solid var(--zb)}
.zb-tbl-inp{border:none;background:transparent;width:100%;font:inherit;color:inherit;padding:2px 4px;border-radius:4px}
.zb-tbl-inp:focus{outline:none;background:#fffde8}
.zb-tbl-inp.r{text-align:right;font-variant-numeric:tabular-nums}

/* ─── BADGES ─── */
.zb-badge{display:inline-block;padding:2px 9px;border-radius:14px;font-size:11px;font-weight:700;letter-spacing:.3px}
.zb-badge-blue{background:var(--zb-pale);color:var(--zb)}
.zb-badge-red{background:var(--zr-pale);color:var(--zr)}
.zb-badge-ok{background:var(--ok-pale);color:var(--ok)}
.zb-badge-warn{background:var(--warn-pale);color:var(--warn)}
.zb-badge-w{background:rgba(255,255,255,.2);color:#fff}

/* ─── KPI ─── */
.zb-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.zb-kpi{background:#fff;border:1px solid var(--bd);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow);border-left:4px solid var(--zb)}
.zb-kpi.r{border-left-color:var(--zr)}
.zb-kpi.g{border-left-color:var(--ok)}
.zb-kpi.o{border-left-color:var(--warn)}
.zb-kpi-lbl{font-size:10px;color:var(--text-mute);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.zb-kpi-val{font-size:24px;font-weight:800;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.zb-kpi-sub{font-size:11px;color:var(--text-mute);margin-top:3px}

/* ─── TOOLBAR ─── */
.zb-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.zb-toolbar .zb-field{min-width:140px}

/* ─── MODAL ─── */
.zb-modal-bg{
  position:fixed;inset:0;background:rgba(15,30,80,.55);z-index:1000;
  display:none;align-items:center;justify-content:center;padding:16px;
}
.zb-modal-bg.show{display:flex}
.zb-modal{
  background:#fff;border-radius:var(--radius-lg);
  max-width:520px;width:100%;max-height:90vh;max-height:90dvh;overflow:auto;
  box-shadow:var(--shadow-lg);
  animation:zoomIn .18s ease-out;
}
@keyframes zoomIn{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.zb-modal-head{
  background:var(--zb);color:#fff;padding:12px 18px;
  font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:center;
}
.zb-modal-head.red{background:var(--zr)}
.zb-modal-head .close{background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
/* v308 · En ventanas largas, la cabecera (con la ×) y el pie (con Guardar/Cancelar)
   quedan fijos arriba y abajo mientras se desplaza el contenido: antes había
   que bajar hasta el final para encontrar Guardar. Si la ventana no se desplaza,
   se ve exactamente igual que antes. */
.zb-modal-head{position:sticky;top:0;z-index:3}
.zb-modal-foot{position:sticky;bottom:0;z-index:3}
.zb-modal-body{padding:18px}
.zb-modal-foot{padding:12px 18px;background:var(--zb-paler);border-top:1px solid var(--bd);display:flex;justify-content:flex-end;gap:8px}

/* ─── TOAST ─── */
.zb-toast-wrap{position:fixed;top:18px;right:18px;z-index:2000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.zb-toast{
  background:var(--zb);color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:500;
  box-shadow:var(--shadow-md);min-width:220px;max-width:360px;
  animation:slideIn .25s ease-out;pointer-events:auto;
}
.zb-toast.ok  {background:var(--ok)}
.zb-toast.err {background:var(--zr)}
.zb-toast.warn{background:var(--warn)}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

/* ─── FAB (floating action buttons) ─── */
.zb-fab-wrap{
  position:fixed;bottom:18px;right:18px;z-index:50;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
}
.zb-fab{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 16px;border-radius:30px;
  font-weight:700;font-size:13px;color:#fff;
  box-shadow:var(--shadow-md);border:none;cursor:pointer;
}
.zb-fab.pri{background:var(--zr)}
.zb-fab.sec{background:var(--zb)}
.zb-fab.ghost{background:#fff;color:var(--zb);border:2px solid var(--zb)}

/* ─── LOGIN / HOME hero ─── */
.zb-hero{
  min-height:100vh;min-height:100dvh;
  background:
    radial-gradient(circle at 25% 20%, rgba(200,16,46,.18) 0%, transparent 50%),
    radial-gradient(circle at 75% 80%, rgba(30,58,138,.25) 0%, transparent 55%),
    linear-gradient(160deg,#0d1a44 0%,#1E3A8A 60%,#2F5BC4 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px 16px;color:#fff;
}
.zb-hero-card{
  background:#fff;color:var(--text);
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  width:100%;max-width:440px;
  overflow:hidden;
  animation:popIn .35s ease-out;
}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.zb-hero-head{
  background:linear-gradient(135deg,var(--zb) 0%,var(--zb-light) 100%);
  color:#fff;padding:24px 26px 18px;text-align:center;
  border-bottom:4px solid var(--zr);
}
.zb-hero-head img{height:64px;margin-bottom:8px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.zb-hero-head h1{font-size:22px;font-weight:800;letter-spacing:.5px}
.zb-hero-head p{font-size:12px;opacity:.85;margin-top:4px}
.zb-hero-body{padding:22px 26px 26px}

/* ─── Botonera de módulos en el hub ─── */
.zb-modules{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:18px;
}
.zb-mod-btn{
  background:#fff;color:var(--zb);
  border:2px solid var(--zb-pale);
  border-radius:14px;
  padding:22px 18px;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  cursor:pointer;text-align:left;
  transition:all .2s;font:inherit;
  position:relative;overflow:hidden;
}
.zb-mod-btn::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--zb);
}
/* Color de la banda izquierda POR módulo (no por posición), así nunca se
   repite ni se descoloca si cambia el orden de las tarjetas. */
.zb-mod-btn.mod-arqueos::before { background:var(--zb); }          /* azul   */
.zb-mod-btn.mod-rutas::before   { background:var(--zr); }          /* rojo   */
.zb-mod-btn.mod-gasoil::before  { background:var(--ok); }          /* verde  */
.zb-mod-btn.mod-palets::before  { background:var(--warn); }        /* naranja*/
.zb-mod-btn.mod-clientes::before{ background:var(--mod-yellow); }  /* amarillo */
.zb-mod-btn.mod-backup::before  { background:var(--mod-pink); }    /* rosa   */
.zb-mod-btn:hover{
  transform:translateY(-3px);
  border-color:var(--zb);
  box-shadow:var(--shadow-md);
}
.zb-mod-btn .ico{font-size:28px;line-height:1}
.zb-mod-btn .ttl{font-size:16px;font-weight:800;color:var(--text);letter-spacing:.2px}
.zb-mod-btn .desc{font-size:12px;color:var(--text-mute);line-height:1.35}
.zb-mod-btn[disabled]{
  opacity:.45;cursor:not-allowed;background:#f7f8fc;border-color:var(--bd-soft);
}
.zb-mod-btn[disabled]::before,
.zb-mod-btn[disabled].mod-arqueos::before,
.zb-mod-btn[disabled].mod-rutas::before,
.zb-mod-btn[disabled].mod-gasoil::before,
.zb-mod-btn[disabled].mod-palets::before,
.zb-mod-btn[disabled].mod-clientes::before,
.zb-mod-btn[disabled].mod-backup::before{background:var(--bd)}
.zb-mod-btn[disabled]:hover{transform:none;box-shadow:none;border-color:var(--bd-soft)}

/* ─── Helpers ─── */
.zb-h-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zb-h-grow{flex:1}
.zb-text-mute{color:var(--text-mute)}
.zb-text-red{color:var(--zr)}
.zb-text-blue{color:var(--zb)}
.zb-text-ok{color:var(--ok)}
.zb-mb-0{margin-bottom:0!important}
.zb-mt-1{margin-top:14px}
.zb-empty{text-align:center;color:var(--text-mute);padding:32px;font-size:13px}

/* ─── Impresión ─── */
@media print{
  .zb-hdr,.zb-nav,.zb-fab-wrap,.zb-btn,.zb-toolbar,.no-print{display:none!important}
  body{background:#fff}
  .zb-card{box-shadow:none;border-color:#000}
}

/* ─── Responsive ─── */
@media (max-width:640px){
  .zb-hdr{padding:8px 12px;gap:10px}
  .zb-hdr h1{font-size:15px}
  .zb-container{padding:14px 10px}
  .zb-toolbar{gap:8px}
  .zb-toolbar .zb-field{min-width:120px}
}
/* v306 · Cabecera en el móvil: antes medía 585px en una sola fila y el móvil
   alejaba TODA la página para que cupiera (todo se veía pequeño). Ahora, si no
   cabe, el chip del usuario pasa a una segunda línea a la derecha y el nombre
   se recorta con "…" si hace falta. En escritorio no cambia nada. */
@media screen and (max-width:640px){
  .zb-hdr{flex-wrap:wrap;row-gap:6px}
  .zb-hdr .logo img{height:36px}
  .zb-hdr > div:not(.user-chip):not(.spacer){min-width:0}
  .zb-hdr .user-chip{margin-left:auto;min-width:0;max-width:100%}
  .zb-hdr .user-chip > span:first-child,
  .zb-hdr .user-chip > .zb-acct{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ═══════════ Efectos visuales (v244) — globales a todos los módulos ═══════════ */
.zb-card{transition:box-shadow .22s ease}
.zb-card:hover{box-shadow:var(--shadow-md)}
.zb-kpi,.chart-card,.ana-hero-card,.zb-mod-btn,.ult-cell{transition:transform .18s ease, box-shadow .18s ease}
.zb-kpi:hover,.chart-card:hover,.ana-hero-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.zb-btn{will-change:transform}
.zb-btn:active{transform:translateY(0) scale(.96)}
.zb-table tbody tr{transition:background .12s ease}

/* Entrada escalonada de las tarjetas al activar una pestaña */
.zb-section.active .zb-card{animation:zbCardIn .45s cubic-bezier(.22,.61,.36,1) both}
.zb-section.active .zb-card:nth-child(2){animation-delay:.05s}
.zb-section.active .zb-card:nth-child(3){animation-delay:.10s}
.zb-section.active .zb-card:nth-child(4){animation-delay:.15s}
.zb-section.active .zb-card:nth-child(5){animation-delay:.20s}
.zb-section.active .zb-card:nth-child(n+6){animation-delay:.24s}
@keyframes zbCardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* v317 · Tarjetas de cifras (KPI) de Arqueos, Gasoil y Repartos:
   al abrir la pestaña entran una tras otra (las cifras suben con ui.js), y
   cuando un filtro cambia una cifra, esta se ilumina un momento.
   Solo en esas páginas: ui.js pone la clase zb-kpi-anim en <html>. */
@media screen and (prefers-reduced-motion: no-preference){
  .zb-kpi-anim .zb-section.active .zb-kpi,
  .zb-kpi-anim .zb-section.active .ana-hero-card{animation:zbCardIn .5s cubic-bezier(.22,.61,.36,1) backwards}
  .zb-kpi-anim .zb-section.active .zb-kpi:nth-child(2),.zb-kpi-anim .zb-section.active .ana-hero-card:nth-child(2){animation-delay:.07s}
  .zb-kpi-anim .zb-section.active .zb-kpi:nth-child(3),.zb-kpi-anim .zb-section.active .ana-hero-card:nth-child(3){animation-delay:.14s}
  .zb-kpi-anim .zb-section.active .zb-kpi:nth-child(4),.zb-kpi-anim .zb-section.active .ana-hero-card:nth-child(4){animation-delay:.21s}
  .zb-kpi-anim .zb-section.active .zb-kpi:nth-child(5),.zb-kpi-anim .zb-section.active .ana-hero-card:nth-child(5){animation-delay:.28s}
  .zb-kpi-anim .zb-section.active .zb-kpi:nth-child(n+6),.zb-kpi-anim .zb-section.active .ana-hero-card:nth-child(n+6){animation-delay:.33s}
  .zb-kpi-anim .zb-kpi-flash .zb-kpi-val,.zb-kpi-anim .zb-kpi-flash .ana-hero-num{animation:zbNumFlash .9s ease-out}
}
@keyframes zbNumFlash{0%{color:inherit}25%{color:#2F5BC4;text-shadow:0 0 12px rgba(47,91,196,.35)}100%{text-shadow:none}}

/* Latido del indicador "Conectado" */
/* Indicador de conexión (compartido a todos los módulos) */
.srv-status{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:18px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;background:#eef0f3;color:#6b7280;transition:background .25s,color .25s}
.srv-status .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.srv-status.ok{background:rgba(34,197,94,.12);color:#16a34a}
.srv-status.off{background:rgba(200,16,46,.10);color:#c8102e}
.srv-status.ok{animation:zbChipPulse 2s ease-in-out infinite}
@keyframes zbChipPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
  50%{box-shadow:0 0 12px 1px rgba(34,197,94,.5)}
}
.srv-status.ok .dot{animation:zbDot 2s ease-in-out infinite}
@keyframes zbDot{0%,100%{opacity:1}50%{opacity:.55}}

@media (prefers-reduced-motion: reduce){
  .zb-section.active .zb-card,.srv-status.ok,.srv-status.ok .dot{animation:none}
  .zb-kpi:hover,.chart-card:hover,.ana-hero-card:hover{transform:none}
}

/* ═══════════ v307 · Reglas generales para móvil y pantallas táctiles ═══════════
   Todo va dentro de "screen": la impresión no cambia. En el ordenador (ratón,
   pantalla ancha) tampoco cambia nada. */

/* 1) Tamaño mínimo para el dedo en pantallas táctiles (móvil y tablet).
      Antes los botones pequeños medían 26px de alto; ahora 36px (40 los normales). */
@media screen and (pointer:coarse){
  .zb-btn{min-height:40px;justify-content:center}
  .zb-btn-sm{min-height:36px;min-width:36px}
  .zb-btn-icon{min-width:40px}
  .zb-modal-head .close{min-width:40px;min-height:40px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px;flex:none}
  /* v336 · El nombre de la cabecera (abre «Mi cuenta») medía 17 px de alto: zona de
     toque más grande sin cambiar cómo se ve */
  .zb-hdr .user-chip .zb-acct{position:relative}
  .zb-hdr .user-chip .zb-acct::after{content:'';position:absolute;inset:-9px -6px}
}

/* 2) En el móvil, los campos con letra menor de 16px hacen que el iPhone
      amplíe la pantalla al tocarlos. Con 16px ya no lo hace. */
@media screen and (max-width:640px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),
  select,textarea{font-size:16px!important}
}

/* 3) Letra mínima en móvil/tablet y cifras KPI en una línea
      (ui.js reduce la cifra lo justo si no cabe en su tarjeta). */
@media screen and (max-width:900px){
  .zb-kpi-lbl{font-size:11px}
  .zb-hdr .user-chip .role{font-size:11px}
  .zb-kpi-val{white-space:nowrap}
}

/* 4) Barras de pestañas que se desplazan de lado: el borde se difumina por
      donde hay más pestañas (clases que pone ui.js solo si la barra no cabe). */
.zb-tabs-hint-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.zb-tabs-hint-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
.zb-tabs-hint-l.zb-tabs-hint-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}

/* v308 · Cabeceras de tarjeta con botones en el móvil: el título ya no queda
   aplastado en una columna estrecha; si no caben, los botones bajan a una
   segunda línea (alineados a la izquierda). */
@media screen and (max-width:640px){
  .zb-card-head{flex-wrap:wrap;row-gap:8px}
  .zb-card-head > :first-child{flex:1 1 auto;min-width:min(150px,100%)}
  .zb-card-head .actions{justify-content:flex-start}
}

/* ═══ v324 · Siluetas de carga ════════════════════════════════════════
   Mientras llegan los datos del servidor se dibuja la FORMA de la pantalla
   (barras grises con un brillo que pasa) en vez de ceros, huecos vacíos o
   «Cargando…». Todas las siluetas comparten el mismo brillo (va fijo a la
   ventana), así se mueven a la vez. ui.js tiene las funciones para
   crearlas (ZUi.sk, ZUi.skRows, ZUi.skLines). */
.zb-sk{
  display:inline-block;vertical-align:middle;height:12px;max-width:100%;border-radius:6px;
  background-color:#e6eaf1;
  background-image:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 100%);
  background-size:360px 100%;background-repeat:no-repeat;background-attachment:fixed;
  animation:zbSkBrillo 1.5s ease-in-out infinite;
}
@keyframes zbSkBrillo{from{background-position:-360px 0}to{background-position:calc(100vw + 360px) 0}}
.zb-sk-pill{height:20px;border-radius:10px}
.zb-sk-num{height:.8em;border-radius:7px}
.zb-sk-btn{width:28px;height:22px;border-radius:5px}
.zb-sk-stack{display:inline-flex;flex-direction:column;gap:6px;vertical-align:middle;max-width:100%}
.zb-sk-stack .zb-sk{display:block}
tr.zb-sk-row td{height:52px}
tbody tr.zb-sk-row:hover,tbody tr.zb-sk-row:nth-child(even){background:inherit}
.zb-sk-acts{display:inline-flex;gap:4px}
.zb-sk-lines{display:flex;flex-direction:column;gap:14px;padding:6px 0}
.zb-sk-line{display:flex;align-items:center;gap:12px}
.zb-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Al llegar los datos, aparecen con un fundido corto */
.zb-sk-in{animation:zbSkIn .35s ease-out}
@keyframes zbSkIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .zb-sk{animation:none} .zb-sk-in{animation:none} }
@media print{ .zb-sk{background:#eee!important;animation:none!important} }
/* v325 · Cifra o etiqueta que ya existe en la página y que, mientras carga,
   se ve como silueta (se esconde el texto, p. ej. un «0,00 €» provisional). */
.zb-sk-txt{
  color:transparent!important;-webkit-text-fill-color:transparent!important;border-color:transparent!important;box-shadow:none!important;
  background-color:#e6eaf1!important;
  background-image:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 100%)!important;
  background-size:360px 100%!important;background-repeat:no-repeat!important;background-attachment:fixed!important;
  animation:zbSkBrillo 1.5s ease-in-out infinite;border-radius:7px;
}
.zb-sk-txt *{visibility:hidden}
@media (prefers-reduced-motion:reduce){ .zb-sk-txt{animation:none} }

/* ═══ v339 · Iconos propios (ver ui.js): dibujo de trazo del color del texto ═══ */
.zb-ico{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.zb-ico-warn{color:#d97706}
.zb-ico-ok{color:#16a34a}
.zb-ico-green{color:#16a34a} .zb-ico-red{color:#dc2626} .zb-ico-orange{color:#ea580c}
/* Sobre cabeceras y botones de color, el aviso y el «ok» van del color del texto */
.zb-card-head .zb-ico-warn,.zb-modal-head .zb-ico-warn,.zb-btn .zb-ico-warn,.zb-btn .zb-ico-ok,
.zb-card-head .zb-ico-ok,.zb-toast .zb-ico-warn{color:inherit}
/* Pestañas: el icono un poco más separado del texto */
.zb-tabbar .ti .zb-ico{margin-right:1px}
/* Buscadores: la lupa dibujada dentro del cuadro */
input.zb-ph-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:10px 50%;background-size:16px 16px;padding-left:34px!important}
@media print{ .zb-ico{stroke:currentColor} }

/* ═══ v340 · Modo oscuro (la conversión de colores la hace ui.js) ═══ */
@media screen{
  /* Todo solo en pantalla: al imprimir siempre en claro */
  html[data-theme="dark"]{color-scheme:dark;background:#12182a}
  html[data-theme="dark"] body{background-color:#12182a}
  /* Mientras ui.js prepara los colores oscuros no se enseña la página (máx. 1,8 s) */
  html.zb-dark-pending body{opacity:0}
  /* Logo: sobre una placa blanca (su azul no se vería sobre fondo oscuro) */
  html[data-theme="dark"] .zb-hdr .logo img{background:#fff;border-radius:8px;padding:3px 6px}
  /* Ilustraciones de los módulos (fondo blanco): con esquinas redondeadas */
  html[data-theme="dark"] img[src*=".webp"]{border-radius:12px}
  /* Mapas: el callejero en versión nocturna */
  html[data-theme="dark"] .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.8)}
  html[data-theme="dark"] .leaflet-container{background:#1b2130}
  /* Botón del tema en la cabecera */
  .zb-theme-btn{padding:5px 8px!important}
  .zb-theme-btn .zb-ico{width:1.2em;height:1.2em;margin:-.25px 0;vertical-align:middle}
}

/* ═══ v341 · Buscador general (lupa de la cabecera, «/» o Ctrl+K) ═══ */
@media screen{
  .zb-srch-btn{padding:5px 8px!important}
  .zb-srch-btn .zb-ico{width:1.2em;height:1.2em;margin:-.25px 0;vertical-align:middle}
  html.zb-srch-open, html.zb-srch-open body{overflow:hidden}
  .zb-srch-bg{position:fixed;inset:0;z-index:4000;background:rgba(15,23,42,.45);display:flex;justify-content:center;align-items:flex-start;padding:8vh 16px 16px}
  .zb-srch-bg[hidden]{display:none}
  .zb-srch{width:100%;max-width:680px;max-height:84vh;display:flex;flex-direction:column;background:var(--w);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--bd)}
  .zb-srch-top{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:2px solid var(--zb)}
  .zb-srch-lupa{width:22px;height:22px;color:var(--zb)}
  .zb-srch-q{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font-size:17px;padding:8px 0;color:var(--text)}
  .zb-srch-q::placeholder{color:var(--text-mute)}
  .zb-srch-res{overflow-y:auto;overscroll-behavior:contain;padding:6px 0 10px;flex:1 1 auto}
  .zb-srch-grp{display:flex;align-items:center;gap:6px;padding:10px 16px 4px;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text-mute)}
  .zb-srch-grp .zb-ico{width:14px;height:14px}
  .zb-srch-it{display:flex;align-items:center;gap:12px;padding:9px 16px;cursor:pointer;min-height:48px;border-left:3px solid transparent}
  .zb-srch-it.act{background:var(--zb-pale);border-left-color:var(--zb)}
  .zb-srch-ic{flex:none;width:32px;height:32px;border-radius:9px;background:var(--zb-paler);color:var(--zb);display:flex;align-items:center;justify-content:center}
  .zb-srch-ic .zb-ico{width:18px;height:18px}
  .zb-srch-dot{width:14px;height:14px;border-radius:50%;display:block}
  .zb-srch-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
  .zb-srch-tx b{font-size:14px;color:var(--text);font-weight:700;overflow-wrap:anywhere}
  .zb-srch-tx small{font-size:12px;color:var(--text-soft);overflow-wrap:anywhere}
  .zb-srch-tx mark{background:#fde68a;color:inherit;border-radius:3px;padding:0 1px}
  .zb-srch-ex{flex:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:45%}
  .zb-srch-ref{font-size:11px;font-weight:700;color:var(--text-mute);white-space:nowrap}
  .zb-srch-num{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
  .zb-srch-tel{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;min-height:34px;border-radius:999px;background:var(--ok-pale);color:var(--ok);font-weight:700;font-size:12px;text-decoration:none;white-space:nowrap}
  .zb-srch-tel .zb-ico{width:15px;height:15px}
  .zb-srch-hint{display:flex;gap:12px;align-items:flex-start;padding:18px 18px;color:var(--text-soft);font-size:13px;line-height:1.5}
  .zb-srch-hint > .zb-ico{width:22px;height:22px;flex:none;color:var(--zb);margin-top:2px}
  .zb-srch-wait{color:var(--text-mute)}
  .zb-srch-foot{display:flex;gap:16px;justify-content:flex-end;padding:8px 14px;border-top:1px solid var(--bd-soft);font-size:11.5px;color:var(--text-mute)}
  .zb-srch-foot kbd{font:inherit;font-weight:700;border:1px solid var(--bd);border-bottom-width:2px;border-radius:5px;padding:0 5px;margin-right:3px;background:var(--zb-paler);color:var(--text-soft)}
  @media (pointer:coarse){ .zb-srch-foot{display:none} }
  /* Móvil tumbado (poca altura): todo el alto para ver más resultados */
  @media (max-height:500px){ .zb-srch-bg{padding:0 16px} .zb-srch{max-height:none;height:100%;border-radius:0;border-top:0;border-bottom:0} }
  /* Móvil: a pantalla completa */
  @media (max-width:600px){
    .zb-srch-bg{padding:0;align-items:stretch}
    .zb-srch{max-width:none;max-height:none;height:100%;height:100dvh;border-radius:0;border:0}
    .zb-srch-top{padding:8px 10px 8px 14px}
    .zb-srch-q{font-size:16px}
    .zb-srch-it{padding:10px 14px;gap:10px}
    .zb-srch-ex{max-width:none}
    .zb-srch-tel span{display:none}
    .zb-srch-tel{padding:8px 10px;min-height:40px;min-width:40px;justify-content:center}
  }
}
@media print{ .zb-srch-bg{display:none!important} }

/* ═══ v362 · Lo que no se puede recuperar, solo el administrador ═══
   Los botones que borran para siempre llevan «data-solo-admin» y solo se ven siendo administrador
   (ui.js pone la clase «zb-admin» en <html>). El servidor lo exige igualmente. */
html:not(.zb-admin) [data-solo-admin]{display:none!important}

/* ═══ v343 · Campanita de avisos ═══ */
@media screen{
  .zb-bell-btn{position:relative;padding:5px 8px!important}
  .zb-bell-btn .zb-ico{width:1.2em;height:1.2em;margin:-.25px 0;vertical-align:middle}
  .zb-bell-btn.on{color:var(--zr)}
  .zb-bell-n{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--zr);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--w)}
  .zb-bell-n[hidden]{display:none}
  .zb-bell-pop{position:fixed;z-index:3900;background:var(--w);border:1px solid var(--bd);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;max-height:min(70vh,560px);display:flex;flex-direction:column}
  .zb-bell-pop[hidden]{display:none}
  .zb-bell-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 10px 14px;border-bottom:2px solid var(--zb)}
  .zb-bell-hd b{display:flex;align-items:center;gap:7px;color:var(--zb);font-size:15px}
  .zb-bell-list{overflow-y:auto;overscroll-behavior:contain;padding:4px 0}
  .zb-bell-it{display:flex;align-items:center;gap:12px;padding:11px 14px;text-decoration:none;color:var(--text);border-left:4px solid transparent;border-bottom:1px solid var(--bd-soft)}
  .zb-bell-it:last-child{border-bottom:0}
  .zb-bell-it:hover,.zb-bell-it:focus-visible{background:var(--zb-paler);outline:0}
  .zb-bell-it.warn{border-left-color:#d97706} .zb-bell-it.ko{border-left-color:var(--zr)} .zb-bell-it.info{border-left-color:var(--zb-light)}
  .zb-bell-ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--zb-paler);color:var(--zb);display:flex;align-items:center;justify-content:center}
  .zb-bell-it.warn .zb-bell-ic{background:var(--warn-pale);color:#b45309}
  .zb-bell-it.ko .zb-bell-ic{background:var(--zr-pale);color:var(--zr)}
  .zb-bell-ic .zb-ico{width:18px;height:18px}
  .zb-bell-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
  .zb-bell-tx small{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text-mute)}
  .zb-bell-tx b{font-size:14px}
  .zb-bell-tx span{font-size:12.5px;color:var(--text-soft);overflow-wrap:anywhere}
  .zb-bell-go{flex:none;color:var(--text-mute)}
  .zb-bell-empty{display:flex;align-items:center;gap:10px;padding:18px 16px;color:var(--text-soft);font-size:14px}
  .zb-bell-empty .zb-ico{width:22px;height:22px;color:var(--ok)}
}
@media print{ .zb-bell-pop{display:none!important} }
/* v343 · Tablets y móvil tumbado: con la campana, el nombre del usuario se
   recorta con «…» en vez de partirse en dos líneas */
@media screen and (min-width:641px) and (max-width:1000px){
  .zb-hdr .user-chip > .zb-acct{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;min-width:0}
}

/* ═══ v347 · Aviso de datos repetidos al importar (Repartos y Repostajes · impdup.js) ═══ */
.zb-idup{border:2px solid #e39a2d;background:#fffaf0;border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:13.5px;line-height:1.5;color:var(--text);min-width:0}
.zb-idup.is-ok{border:1px solid #b5dcc0;background:var(--ok-pale);padding:9px 12px;font-weight:600;color:#1f6b38}
.zb-idup-tit{font-size:16px;font-weight:800;color:#8a4300;margin-bottom:8px;line-height:1.3}
.zb-idup-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2px}
.zb-idup-chip{display:inline-block;padding:4px 10px;border-radius:14px;font-size:12.5px;font-weight:700;line-height:1.35}
.zb-idup-chip.ok{background:var(--ok-pale);color:#1f6b38}
.zb-idup-chip.ko{background:var(--zr-pale);color:#a00c24}
.zb-idup-chip.wa{background:#ffe9c7;color:#8a4300}
.zb-idup-blk{border-radius:10px;padding:10px 12px;margin-top:10px;border:1px solid;min-width:0}
.zb-idup-blk.ko{background:var(--zr-pale);border-color:#efb1bd}
.zb-idup-blk.wa{background:var(--warn-pale);border-color:#eccb8f}
.zb-idup-blk b.h{display:block;font-size:14.5px;line-height:1.35;margin-bottom:2px}
.zb-idup-blk.ko b.h{color:#a00c24}
.zb-idup-blk.wa b.h{color:#8a4300}
.zb-idup-blk > span{display:block;overflow-wrap:anywhere}
.zb-idup-blk > span.mini{font-size:12.5px;color:var(--text-soft);margin-top:4px}
.zb-idup-fs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.zb-idup-fs details{flex:1 1 100%;min-width:0}
.zb-idup-fs summary{cursor:pointer;font-size:12.5px;font-weight:700;color:#8a4300;padding:4px 0}
.zb-idup-f{display:inline-block;background:#fff;border:1px solid #eccb8f;border-radius:8px;padding:3px 9px;font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.zb-idup-chk{display:flex;align-items:flex-start;gap:8px;margin-top:8px;font-size:13px;cursor:pointer;padding:2px 2px}
.zb-idup-chk input{flex:none;width:17px;height:17px;margin-top:2px}
.zb-idup-dec{margin-top:10px;padding-top:10px;border-top:1px dashed #dcb878}
.zb-idup-dec .q{display:block;font-weight:800;font-size:13.5px;margin-bottom:6px}
.zb-idup-dec.pend .q{color:#a00c24}
.zb-idup-dec .ops{display:flex;flex-wrap:wrap;gap:8px}
.zb-idup-op{flex:1 1 240px;min-width:0;min-height:40px;padding:8px 12px;border-radius:9px;border:2px solid #d9b56f;background:#fff;color:var(--text);
  font:inherit;font-size:13px;font-weight:700;line-height:1.3;cursor:pointer;text-align:left;overflow-wrap:anywhere}
.zb-idup-op:hover{border-color:var(--zb-light)}
.zb-idup-op.on{border-color:var(--zb);background:var(--zb);color:#fff}
.zb-idup-op:focus-visible{outline:3px solid rgba(47,91,196,.4);outline-offset:1px}
.zb-idup-pie{margin-top:10px;font-size:13.5px}
.zb-idup-pie.pend{font-weight:800;color:#a00c24}
/* Tabla de la vista previa: nº de fila del Excel + estado */
.zb-idup-nf{color:var(--text-mute);font-variant-numeric:tabular-nums}
.zb-idup-td{min-width:150px;max-width:260px;white-space:normal!important}
.zb-idup-td small{display:block;font-size:11.5px;line-height:1.35;color:var(--text-soft);margin-top:2px;overflow-wrap:anywhere}
.zb-idup-td small.zb-idup-sube{display:inline-block;margin:0 0 0 6px;font-weight:700}
.zb-idup-td small.zb-idup-sube.no{color:#a00c24}
.zb-idup-td small.zb-idup-sube.si{color:#1f6b38}
.zb-idup-td small.zb-idup-sube.pd{color:#8a4300}
.zb-idup-st{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.zb-idup-st.st-nueva{background:var(--ok-pale);color:#1f6b38}
.zb-idup-st.st-igual,.zb-idup-st.st-rep{background:#f8ccd4;color:#8f0b20}
.zb-idup-st.st-fecha,.zb-idup-st.st-doble,.zb-idup-st.st-dia{background:#ffdfa8;color:#7a3b00}
.zb-table tr.zb-idup-r.r-igual > td,.zb-table tr.zb-idup-r.r-rep > td{background:#fdf1f3}
.zb-table tr.zb-idup-r.r-fecha > td,.zb-table tr.zb-idup-r.r-doble > td,.zb-table tr.zb-idup-r.r-dia > td{background:#fff8ea}
.zb-idup-info{font-size:12px;color:var(--text-mute)}
@media screen and (pointer:coarse){
  .zb-idup-op{min-height:44px}
  .zb-idup-chk{min-height:44px;align-items:center}
  .zb-idup-chk input{width:20px;height:20px;margin-top:0}
  .zb-idup-fs summary{min-height:40px;display:flex;align-items:center}
}
@media screen and (max-width:640px){
  .zb-idup{padding:10px 10px}
  .zb-idup-tit{font-size:15px}
  .zb-idup-blk{padding:9px 10px}
  .zb-idup-op{flex:1 1 100%;min-height:44px}
  .zb-idup-chk input{width:20px;height:20px}
}

/* v347 · Móvil tumbado y tablet pequeña con pantalla táctil (641–800 px de ancho): los
   botones de la cabecera son más anchos para el dedo y el chip del usuario se salía por
   la derecha (toda la página se podía arrastrar de lado). Logo y título algo menores y
   sin la etiqueta del rol: cabe todo en una línea, también con nombres largos. */
@media screen and (min-width:641px) and (max-width:800px){
  .zb-hdr{padding:8px 10px;gap:8px}
  .zb-hdr .logo img{height:36px}
  .zb-hdr h1{font-size:15px}
  .zb-hdr .user-chip .role{display:none}
}

/* ════════ tabbar (antes tabbar.css) ════════ */
/* =====================================================================
 *  EDITOR · Barra de pestañas común a todos los módulos  (v312)
 *  ---------------------------------------------------------------------
 *  Una sola apariencia y un solo comportamiento para la barra que hay
 *  bajo la cabecera azul ("← Inicio" + pestañas del módulo):
 *    · Ordenador: solapas; si no caben, bajan a otra fila (nunca quedan
 *      pestañas escondidas fuera de la pantalla).
 *    · Tablet y móvil: botones en filas, "← Inicio" siempre a la vista.
 *  Se aplica añadiendo la clase "zb-tabbar" a la barra de cada módulo
 *  (y "zb-tabbar--tabs" si tiene pestañas). Este archivo se carga el
 *  ÚLTIMO en cada página para que mande sobre los estilos antiguos de
 *  cada módulo, que siguen ahí para la impresión.
 *  Todo va dentro de @media screen: la IMPRESIÓN no cambia.
 * ===================================================================== */

@media screen{
  .zb-tabbar{
    background:#fff;
    border-bottom:2px solid var(--bd);
    display:flex;align-items:center;
    gap:2px;row-gap:4px;
    padding:0 18px;
    flex-wrap:wrap;
    overflow:visible;
    font-size:13px;
    font-family:'Segoe UI',Tahoma,system-ui,-apple-system,sans-serif;
  }
  .zb-tabbar > a{
    display:inline-flex;align-items:center;gap:5px;
    padding:10px 14px;
    border-radius:8px 8px 0 0;
    color:var(--text-soft);font-weight:600;
    white-space:nowrap;text-decoration:none;
    border:1px solid transparent;border-bottom:none;
    box-shadow:none;
    transition:background .15s,color .15s;
    cursor:pointer;flex-shrink:0;
  }
  .zb-tabbar > a:hover{background:var(--zb-paler);color:var(--zb);text-decoration:none}
  .zb-tabbar > a.active{background:var(--zb);color:#fff;border-color:var(--bd)}

  /* "← Inicio" */
  .zb-tabbar .home-lnk{
    position:static;left:auto;z-index:auto;box-shadow:none;
    font-weight:500;color:var(--text-mute);font-size:12px;
    margin-right:6px;flex-shrink:0;min-height:0;
  }
  .zb-tabbar .home-lnk::before{content:none}
  .zb-tabbar .home-lnk:hover{color:var(--zb);background:var(--zb-pale);text-decoration:none}

  .zb-tabbar .spacer, .zb-tabbar .zb-spacer{flex:1;min-width:8px}

  /* Nombre del módulo cuando la barra no tiene pestañas (Olvidadizos,
     Rutas reales, Comercial): mismo alto que una pestaña */
  .zb-tabbar .zb-tabbar-title{margin:0 8px 0 2px;padding:8px 0;line-height:1.3}

}

/* Icono (<i class="ti">) y final largo de algunas etiquetas (.tl-x): se ven
   igual que si fuera texto seguido (también al imprimir); existen solo para
   poder ocultarlos en el móvil. */
.zb-tabbar .ti{font-style:normal}
.zb-tabbar .ti, .zb-tabbar .tl-x{display:contents}

/* ── Tablet y móvil: botones en filas ─────────────────────────────── */
@media screen and (max-width:900px){
  .zb-tabbar{padding:8px 10px;gap:4px;border-bottom-width:1px}
  .zb-tabbar > a{
    padding:6px 9px;font-size:12px;gap:4px;
    border-radius:8px;border:1px solid var(--bd);background:#fff;
    min-height:32px;
  }
  .zb-tabbar > a:hover{background:var(--zb-paler)}
  .zb-tabbar > a.active{background:var(--zb);border-color:var(--zb);color:#fff}
  .zb-tabbar .home-lnk{
    font-size:12px;margin-right:0;color:var(--zb);
    background:var(--zb-paler);border-color:transparent;font-weight:700;
  }
  .zb-tabbar .spacer, .zb-tabbar .zb-spacer{display:none}
  .zb-tabbar .zb-tabbar-title{padding:4px 0}
  /* Indicador de conexión: con conexión, solo un punto verde pequeño en
     la esquina de la barra (no ocupa sitio ni fila propia). Si se cae la
     conexión vuelve a su sitio con el texto "Sin conexión". */
  .zb-tabbar{position:relative}
  .zb-tabbar.ol-tabs, .zb-tabbar.pv-tabs, .zb-tabbar.rr-tabs{position:sticky}
  .zb-tabbar .srv-status{margin-left:auto;padding:5px 7px}
  .zb-tabbar .srv-status.ok{
    position:absolute;top:0;right:2px;margin:0;padding:0;
    background:none;animation:none;
  }
  .zb-tabbar .srv-status.ok .dot{width:7px;height:7px}
  .zb-tabbar .srv-status.ok .srv-txt,
  .zb-tabbar .srv-status.ok #srv-status-txt{display:none}
}
@media screen and (max-width:640px){
  .zb-tabbar{padding:8px;gap:4px}
  .zb-tabbar > a{padding:6px 5px;gap:3px;font-size:11.5px;justify-content:center}
  .zb-tabbar .home-lnk{font-size:11.5px}
  .zb-tabbar:not(.zb-tabbar--tabs) .home-lnk{padding:6px 10px}
  /* En las barras con pestañas cada fila se reparte el ancho: queda como
     una botonera ordenada */
  .zb-tabbar--tabs > a{flex:1 1 auto}
  .zb-tabbar .tl-x{display:none}
}
/* Móviles de hasta 399 px (casi todos los iPhone y Android): sin los
   iconos de las pestañas, para que quepan en menos filas */
@media screen and (max-width:399px){
  .zb-tabbar--tabs > a{padding:6px 6px}
  .zb-tabbar > a .ti{display:none}
}
@media screen and (pointer:coarse){
  .zb-tabbar > a{min-height:36px}
}

/* v313 · Un botón con el atributo "hidden" dentro de la barra no se ve
   (antes el botón "Instalar app" de Comercial salía siempre, aunque el
   navegador no permitiera instalar, y al pulsarlo no hacía nada). */
.zb-tabbar [hidden]{display:none!important}