:root{
  --bg:#edf1f6;--sur:#fff;--sur2:#dde4ed;--bor:#b8c6d6;
  --topnav-h:80px;--botnav-h:64px;
  --ac:#3a6ea5;--acd:#2d5585;--ac2:#e85d2f;
  --tx:#1a2535;--mu:#3d5066;--di:#7a8fa6;
  --ok:#27ae60;--wa:#e67e22;--er:#e74c3c;
  --r:12px;--sh:0 2px 12px rgba(0,0,0,.06);
  --topnav-h:80px;--botnav-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--tx);font-family:'Instrument Sans',sans-serif;font-size:15px}

/* ══════════════════════════════
   MENÚ SUPERIOR (escritorio + móvil)
══════════════════════════════ */
.topnav{
  position:fixed;top:0;left:0;right:0;
  background:linear-gradient(135deg,#0d2a4e 0%,#1a3a5c 60%,#1e4976 100%);
  display:flex;flex-direction:column;
  z-index:100;
  box-shadow:0 4px 24px rgba(0,0,0,.22);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topnav-row1{display:flex;align-items:center;height:var(--topnav-h);padding:0 24px;gap:20px}
.topnav-row2{display:none;align-items:center;justify-content:space-between;padding:4px 14px 6px;border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.2);height:36px}
.topnav-row2.show{display:flex}
.topnav-row2.show~* .layout, body.logged .layout{padding-top:calc(var(--topnav-h) + 36px)}
.tnr2-info{font-size:13px;color:rgba(255,255,255,.75);font-weight:600;display:flex;align-items:center;gap:8px}
.tnr2-info::before{content:'👤';font-size:13px;opacity:.7}

/* Logo + nombre */
.tn-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.tn-logo{
  width:52px;height:52px;
  object-fit:contain;
  border-radius:14px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.tn-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:#fff;line-height:1.2;letter-spacing:-.01em}
.tn-ver{font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.06em;font-weight:500;margin-top:1px}

/* Separador */
.tn-sep{flex:1}

/* Nav pills container */
.tn-links{
  display:flex;align-items:center;gap:2px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:4px;
  backdrop-filter:blur(10px);
}

/* Botones pill */
.tn-btn{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;
  border:none;background:transparent;
  color:rgba(255,255,255,.65);
  font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:500;
  border-radius:10px;cursor:pointer;
  transition:all .2s cubic-bezier(.34,1.2,.64,1);
  white-space:nowrap;letter-spacing:.01em;
  position:relative;
}
.tn-btn:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
  transform:translateY(-1px);
}
.tn-btn.active{
  background:linear-gradient(135deg,#e85d2f,#c94e24);
  color:#fff;
  font-weight:600;
  box-shadow:0 4px 12px rgba(232,93,47,.35);
  transform:translateY(-1px);
}
.tn-btn .ic{font-size:14px;line-height:1}

/* ── Botones pie modal unificados ── */
.mf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:42px;padding:0 18px;border-radius:12px;border:none;
  font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .18s cubic-bezier(.34,1.2,.64,1);
  white-space:nowrap;letter-spacing:.01em;
}
.doc-row-actions .mf-btn{height:34px;padding:0 12px;font-size:12px;border-radius:9px;}
.mf-btn:hover{transform:translateY(-2px);filter:brightness(1.08);}
.mf-btn:active{transform:scale(.96);}
.mf-btn-cancel{background:var(--sur2);color:var(--mu);border:1.5px solid var(--bor);}
.mf-btn-cancel:hover{background:var(--bor);color:var(--tx);}
.mf-btn-danger{background:#fee2e2;color:#c0392b;border:1.5px solid #fca5a5;}
.mf-btn-danger:hover{background:#c0392b;color:#fff;}
.mf-btn-warning{background:#fef3c7;color:#92400e;border:1.5px solid #fcd34d;}
.mf-btn-warning:hover{background:#f59e0b;color:#fff;}
.mf-btn-success{background:#dcfce7;color:#166534;border:1.5px solid #86efac;}
.mf-btn-success:hover{background:#27ae60;color:#fff;}
.mf-btn-primary{background:linear-gradient(135deg,#e85d2f,#c94e24);color:#fff;box-shadow:0 4px 12px rgba(232,93,47,.3);}
.mf-btn-primary:hover{box-shadow:0 6px 18px rgba(232,93,47,.4);}

/* Botones icono asistencia */
.btn-ico-as{
  min-width:54px;height:54px;border-radius:12px;border:none;
  cursor:pointer;font-size:20px;display:inline-flex;
  flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:#fff;transition:transform .15s,opacity .15s;
  flex-shrink:0;position:relative;padding:0 8px;
}
.btn-ico-as span.lbl{font-size:9px;font-weight:600;letter-spacing:.03em;line-height:1;opacity:.9;}
.btn-ico-as:hover{transform:translateY(-2px);opacity:.85;}
.btn-ico-as[title]:hover::after{
  content:attr(title);position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);background:#1e293b;color:#fff;
  font-size:11px;white-space:nowrap;padding:4px 8px;border-radius:6px;
  pointer-events:none;z-index:9999;font-family:'Instrument Sans',sans-serif;
}

/* Menú desplegable grupos */
.tn-group{position:relative;display:flex;}
.tn-group-btn{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;
  border:none;background:transparent;
  color:rgba(255,255,255,.65);
  font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:500;
  border-radius:10px;cursor:pointer;
  transition:all .2s cubic-bezier(.34,1.2,.64,1);
  white-space:nowrap;letter-spacing:.01em;
}
.tn-group-btn:hover,.tn-group-btn.open{
  background:rgba(255,255,255,.1);color:#fff;transform:translateY(-1px);
}
.tn-group-btn.active,.tn-group-btn.has-active{
  background:linear-gradient(135deg,#e85d2f,#c94e24);
  color:#fff;font-weight:600;
  box-shadow:0 4px 12px rgba(232,93,47,.35);
  transform:translateY(-1px);
}
.tn-group-btn .ic{font-size:14px;line-height:1}
.tn-group-btn .arr{font-size:9px;opacity:.7;transition:transform .2s;margin-left:2px}
.tn-group-btn.open .arr{transform:rotate(180deg)}
.tn-dropdown{
  display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--sur);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:5px;
  min-width:180px;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  z-index:9000;
  backdrop-filter:blur(12px);
}
.tn-dropdown.open{display:block;animation:dropIn .18s cubic-bezier(.34,1.2,.64,1);}
@keyframes dropIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.tn-drop-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:8px;
  font-size:13px;font-weight:500;color:var(--tx);
  cursor:pointer;border:none;background:none;width:100%;text-align:left;
  transition:background .15s;white-space:nowrap;
  font-family:'Instrument Sans',sans-serif;
}
.tn-drop-item:hover{background:var(--sur2);}
.tn-drop-item.active{background:rgba(232,93,47,.12);color:#e85d2f;font-weight:600;}
.tn-drop-item .ic{font-size:15px;width:20px;text-align:center}
.tn-drop-sep{height:1px;background:var(--bor);margin:4px 0;}

/* Estadísticas mini en topnav */
.tn-stats{display:flex;gap:12px;margin-left:8px;border-left:1px solid rgba(255,255,255,.15);padding-left:16px}
.tn-stat{text-align:center;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s}
.tn-stat:hover{background:rgba(255,255,255,.1)}
.tn-stat .ts-n{font-family:'Syne',sans-serif;font-size:18px;font-weight:600;color:#fff;line-height:1}
.tn-stat .ts-l{font-size:9px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.07em;margin-top:1px}

/* ── LAYOUT ── */
.layout{padding-top:var(--topnav-h);min-height:100vh}
.main{max-width:1400px;margin:0 auto;padding:28px 24px;min-height:calc(100vh - var(--topnav-h))}

/* ── PÁGINAS ── */
.page{display:none}.page.active{display:block;animation:fi .2s ease}
#page-estadisticas.active{}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── CABECERAS ── */
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.pt{font-family:'Syne',sans-serif;font-size:22px;font-weight:600}.pt span{color:var(--ac)}

/* ── BOTONES ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:10px;font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:all .2s;touch-action:manipulation}
.btn.active{background:var(--ac);color:#fff}
.bp{background:linear-gradient(135deg,#2d5a8e,#1a3a5c);color:#fff;box-shadow:0 3px 10px rgba(45,90,142,.25);letter-spacing:.02em}.bp:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(45,90,142,.35)}.bp:active{transform:translateY(0)}
.ba{background:linear-gradient(135deg,#e85d2f,#c94e24);color:#fff;box-shadow:0 3px 10px rgba(232,93,47,.25);letter-spacing:.02em}.ba:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(232,93,47,.35)}.ba:active{transform:translateY(0)}
.bg{background:transparent;border:1.5px solid var(--bor);color:var(--mu)}.bg:hover{border-color:var(--ac);color:var(--ac)}
.bd{background:transparent;border:1.5px solid #fcc;color:var(--er)}.bd:hover{background:#fff0f0}
.bs{background:var(--ok);color:#fff}.bs:hover{background:#1f8f4e}
.btn-sm{padding:6px 12px;font-size:13px}

/* ── CARD ── */
.card{background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);box-shadow:var(--sh)}

/* ── STATS DASHBOARD ── */
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.sc{background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);padding:20px;box-shadow:var(--sh)}
.sc .sl{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--mu);margin-bottom:6px;font-weight:600;text-align:center}
.sc .sv{font-family:'Syne',sans-serif;font-size:30px;font-weight:600;color:var(--ac);text-align:center;display:block}
.sc .ss{font-size:12px;color:var(--mu);margin-top:4px;text-align:center}
.sc.fact .sv{font-family:'Courier New',Courier,monospace;font-size:26px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sc.acc{background:var(--ac);border-color:var(--ac)}.sc.acc .sl{color:rgba(255,255,255,.6)}.sc.acc .sv{color:#fff}.sc.acc .ss{color:rgba(255,255,255,.5)}
.sc-link{cursor:pointer;transition:transform .15s,box-shadow .15s}.sc-link:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.1)}.sc-link:active{transform:scale(.97)}

/* ── TABLAS ── */
.sbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.sbar input,.sbar select{background:var(--sur);border:1.5px solid var(--bor);border-radius:10px;padding:10px 14px;font-family:'Instrument Sans',sans-serif;font-size:14px;color:var(--tx);outline:none;transition:border-color .15s}
.sbar input{flex:1;min-width:180px}.sbar input:focus,.sbar select:focus{border-color:var(--ac)}.sbar input::placeholder{color:var(--di)}
.tw{overflow-x:auto;border-radius:var(--r)}
table{width:100%;border-collapse:collapse}
thead tr{background:var(--sur2)}
th{padding:11px 14px;text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--mu);border-bottom:1.5px solid var(--bor);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--bor);font-size:14px;color:var(--tx);vertical-align:middle}
tr:last-child td{border-bottom:none}tbody tr:hover{background:#f5f8fc}

/* ── CARDS MÓVIL ── */
.mob-list{display:none;flex-direction:column;gap:10px}
.mob-card{background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh)}
.mob-card-title{font-weight:600;font-size:15px;margin-bottom:4px}
.cl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:stretch}
.as-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:stretch}
.cl-card{background:var(--sur);border:1px solid var(--bor);border-radius:var(--r);padding:10px 12px;box-shadow:var(--sh);word-break:break-word;min-width:0}
.cl-num{font-size:11px;font-weight:700;color:var(--ac);letter-spacing:.05em;margin-bottom:3px}
.cl-num-nombre{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.cl-num-inline{font-size:12px;font-weight:700;color:var(--ac);letter-spacing:.05em;flex-shrink:0}
.cl-nombre{font-weight:700;font-size:14px;color:var(--tx)}
.cl-sub{font-size:12px;color:var(--mu);margin-bottom:1px}
/* Dashboard KPIs */
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
@keyframes pulse-banner{0%,100%{box-shadow:0 0 0 0 rgba(194,65,12,.4);}50%{box-shadow:0 0 0 8px rgba(194,65,12,0);}}
.banner-fact-pend{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(135deg,#7c2d12,#c2410c);
  border-radius:14px;
  padding:18px 22px;
  margin-bottom:20px;
  flex-wrap:wrap;
  border:2px solid rgba(255,255,255,.2);
  animation:pulse-banner 2s infinite;
}
.banner-fact-pend.visible{ display:flex; }
.banner-fact-pend .banner-txt{ color:#fff; font-size:14px; font-weight:600; flex:1; min-width:180px; }
.banner-fact-pend .banner-txt span{ font-size:12px; font-weight:400; opacity:.85; display:block; margin-top:2px; }
.banner-fact-pend .banner-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.banner-fact-pend button{
  border:none; border-radius:8px; padding:8px 14px;
  font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.banner-fact-pend .btn-ver-fact{ background:rgba(255,255,255,.2); color:#fff; }
.banner-fact-pend .btn-ver-fact:hover{ background:rgba(255,255,255,.3); }
.banner-fact-pend .btn-env-fact{ background:#fff; color:#c2410c; }
.banner-fact-pend .btn-env-fact:hover{ opacity:.9; }
.dash-kpi{display:flex;align-items:center;gap:12px;background:var(--bg);border:1.5px solid var(--bor);border-radius:14px;padding:14px 16px;transition:border-color .2s,box-shadow .15s,transform .15s}
.dash-kpi:hover{border-color:var(--ac);box-shadow:0 4px 16px rgba(45,90,142,.1);transform:translateY(-2px)}
.dash-kpi-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.dash-kpi-body{flex:1;min-width:0}
.dash-kpi-val{font-family:'Syne',sans-serif;font-size:22px;font-weight:700;color:var(--ac);line-height:1.1}
.dash-kpi-lbl{font-size:11px;color:var(--mu);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.dash-kpi-arr{font-size:18px;color:var(--di);flex-shrink:0}
/* Dashboard secciones */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:4px}
.dash-sec-hd{display:flex;align-items:center;justify-content:space-between;padding:0 2px 10px;font-family:'Syne',sans-serif;font-weight:700;font-size:14px;color:var(--tx);border-bottom:2px solid var(--bor);margin-bottom:10px}
.dash-sec-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px}
.dash-empty{text-align:center;padding:30px;color:var(--mu);font-size:14px}
/* Filas del dashboard — igual que lista-row pero sin cursor pointer global */
.dash-row{display:flex;align-items:center;gap:0;background:var(--bg);border:1.5px solid var(--bor);border-radius:12px;margin-bottom:7px;overflow:hidden;transition:border-color .15s,box-shadow .15s;cursor:pointer}
.dash-row:hover{border-color:var(--ac);box-shadow:0 2px 10px rgba(45,90,142,.08)}
.dash-row-accent{width:3px;align-self:stretch;flex-shrink:0}
.dash-row-body{flex:1;padding:9px 12px;min-width:0}
.dash-row-top{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.dash-row-num{font-size:11px;font-weight:700;color:var(--ac)}
.dash-row-name{font-weight:600;font-size:13px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.dash-row-badge{display:inline-flex;align-items:center;padding:1px 7px;border-radius:6px;font-size:10px;font-weight:700;white-space:nowrap;flex-shrink:0}
.dash-row-meta{font-size:11px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-row-right{padding:8px 10px 8px 0;display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.dash-row-fecha{font-size:11px;color:var(--mu)}
/* Responsive dashboard */
@media(max-width:900px){.dash-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .dash-kpis{grid-template-columns:1fr 1fr;gap:8px}
  .dash-kpi{padding:10px 12px}
  .dash-kpi-val{font-size:18px}
  .dash-kpi-ico{width:34px;height:34px;font-size:17px}
  .dash-grid{grid-template-columns:1fr;gap:16px}
  /* Cuadrículas dashboard en móvil: no desborden */
  .dash-row{min-width:0;overflow:hidden}
  .dash-row-body{min-width:0;padding:8px 8px}
  .dash-row-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dash-row-meta{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dash-row-right{padding:6px 6px 6px 0;flex-shrink:0}
  .dash-row-badge{font-size:9px;padding:1px 5px}
  /* Listas en móvil */
  .lista-row-titulo{white-space:normal;word-break:break-word}
  .lista-row-actions{flex-wrap:wrap;max-width:none;padding:6px 8px 6px 0;gap:4px}
  /* Documentos en móvil */
  .doc-row{min-width:0}
  .doc-row-body{min-width:0}
  .doc-row-cli{white-space:normal;word-break:break-word;font-size:13px}
}
/* Lista unificada — mismo diseño que documentos */
.lista-row{display:flex;align-items:center;gap:0;background:var(--bg);border:1.5px solid var(--bor);border-radius:14px;margin-bottom:8px;overflow:hidden;transition:border-color .2s,box-shadow .15s;cursor:pointer}
.lista-row:hover{border-color:var(--ac);box-shadow:0 2px 12px rgba(45,90,142,.1)}
.lista-row-accent{width:4px;align-self:stretch;flex-shrink:0}
.lista-row-body{flex:1;padding:11px 13px;min-width:0}
.lista-row-titulo{font-weight:700;font-size:14px;color:var(--tx);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-row-sub{font-size:12px;color:var(--mu);margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-row-meta{font-size:11px;color:var(--di);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lista-row-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:700;white-space:nowrap}
.lista-row-actions{display:flex;gap:5px;padding:8px 10px 8px 0;flex-shrink:0;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:140px}
.cl-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}

.hist-titulo{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--mu);margin:18px 0 10px;padding-bottom:6px;border-bottom:1.5px solid var(--bor)}
.hist-row{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:9px 0;border-bottom:1px solid var(--bor);font-size:13px;align-items:center}
.hist-row:last-child{border-bottom:none}
.hist-fecha{color:var(--mu);font-size:12px}
.hist-equipo{color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.hist-precio{font-weight:600;color:var(--ok);font-size:12px;text-align:right}
.hist-empty{text-align:center;padding:20px;color:var(--di);font-size:13px}

.mob-card-sub{font-size:13px;color:var(--mu);margin-bottom:2px}
.mob-card-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.mob-card-actions{display:flex;gap:6px}

/* ── BADGE ── */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:500}
.bp2{background:#fef3e2;color:#c07a10}.bc{background:#dbeafe;color:#1d5faf}.bt{background:#dcfce7;color:#166534}

/* ── MODAL ── */
.mo{display:none;position:fixed;inset:0;background:rgba(44,62,80,.5);z-index:300;justify-content:center;align-items:center;padding:20px;overflow-y:auto}
.mo.open{display:flex}
.modal{background:var(--sur);border-radius:16px;width:100%;max-width:640px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:mi .2s ease;margin:auto}
@keyframes mi{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.mh{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid var(--bor);position:sticky;top:0;background:var(--sur);z-index:1}
.mh h3{font-family:'Syne',sans-serif;font-size:22px;font-weight:600}
.mc-b{background:none;border:none;font-size:22px;cursor:pointer;color:var(--mu);border-radius:6px;padding:4px 8px;transition:background .15s}
.mc-b:hover{background:var(--sur2);color:var(--er)}
.mb{padding:26px}
.mf{padding:16px 26px;border-top:1px solid var(--bor);display:flex;justify-content:flex-end;gap:10px;background:var(--sur2);border-radius:0 0 16px 16px;position:sticky;bottom:0}

/* ── FORMULARIO ── */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:16px}.fg .full{grid-column:1/-1}.fi-row{display:flex;gap:8px;align-items:flex-start;flex-wrap:nowrap}
.fi{display:flex;flex-direction:column;gap:5px}
.fi label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--mu)}
.fi input,.fi select,.fi textarea{background:var(--bg);border:1.5px solid var(--bor);border-radius:10px;padding:10px 13px;font-family:'Instrument Sans',sans-serif;font-size:14px;color:var(--tx);outline:none;transition:border-color .15s,background .15s;width:100%;-webkit-appearance:none}
.fi input:focus,.fi select:focus,.fi textarea:focus{border-color:var(--ac);background:#fff}
.fi textarea{resize:vertical;min-height:70px}

/* ── LOADER ── */
.loader{display:none;position:fixed;inset:0;background:rgba(255,255,255,.8);z-index:500;align-items:center;justify-content:center;flex-direction:column;gap:12px}
.loader.on{display:flex}
.sp{width:36px;height:36px;border:3px solid var(--bor);border-top-color:var(--ac);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── CUADRANTE ── */
.snav{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.snb{background:var(--sur);border:1.5px solid var(--bor);border-radius:10px;padding:8px 16px;font-size:20px;cursor:pointer;color:var(--mu);transition:all .15s;line-height:1;touch-action:manipulation}
.snb:hover{border-color:var(--ac);color:var(--ac)}
.slbl{font-family:'Syne',sans-serif;font-size:16px;font-weight:600;flex:1;text-align:center}
.cuad-legend{display:flex;gap:14px;margin-bottom:10px;font-size:12px;color:var(--mu)}
.cuad-legend span{display:flex;align-items:center;gap:5px}
.leg-dot{width:10px;height:10px;border-radius:2px}
.cuad-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cuad{display:block;width:100%;min-width:620px}
.cuad-head-row{display:grid;grid-template-columns:90px 30px repeat(4,1fr);border-bottom:2px solid var(--bor);background:var(--sur2)}
.cuad-th-corner{padding:8px 6px;background:var(--sur2)}
.cuad-th-sf{display:flex;align-items:center;justify-content:center;padding:8px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;writing-mode:vertical-rl;background:var(--sur2);border-right:1px solid var(--bor)}
.cuad-th-slot{padding:8px 6px;text-align:center;font-size:11px;font-weight:600;color:var(--mu);border-right:1px solid var(--bor)}
.cuad-th-slot:last-child{border-right:none}
.cuad-dia-block{border-bottom:2px solid var(--bor)}
.cuad-dia-block:last-child{border-bottom:none}
.cuad-dia-block.hoy-block{background:#f0f7ff}
.cuad-dia-header{display:grid;grid-template-columns:90px 1fr;background:var(--sur2);border-bottom:1px solid var(--bor);padding:6px 10px;align-items:center;gap:8px}
.cuad-dia-header.hoy-dia{background:#dbeafe}
.cuad-dia-dn{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mu)}
.cuad-dia-df{font-family:'Syne',sans-serif;font-size:22px;font-weight:600;color:var(--tx);line-height:1}
.cuad-dia-header.hoy-dia .cuad-dia-df{color:var(--ac)}
.cuad-sf-row{display:grid;grid-template-columns:90px 30px repeat(4,1fr);border-bottom:1px solid var(--bor);min-height:90px}
.cuad-sf-row:last-child{border-bottom:none}
.cuad-sf-label{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;writing-mode:vertical-rl;border-right:1px solid var(--bor);padding:4px 2px}
.cuad-sf-label.mn{color:#b45309;background:#fffbeb}
.cuad-sf-label.td{color:#1d5faf;background:#eff6ff}
.cuad-cel{border-right:1px solid var(--bor);padding:5px;vertical-align:top;background:#fff;position:relative}
.cuad-cel:last-child{border-right:none}
.cuad-cel.hoy-col{background:#f8fbff}
.cuad-cel.drag-over{background:#dbeafe;outline:2px dashed var(--ac)}
.svi{background:#dbeafe;border-left:3px solid var(--ac);border-radius:6px;padding:6px 24px 6px 8px;margin-bottom:3px;font-size:13px;position:relative;cursor:pointer;user-select:none}
.svi.dragging{opacity:.4}
.svi .svn{font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.svi .svi2{color:var(--mu);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svi-hora{font-size:13px;font-weight:700;color:var(--ac);margin-bottom:3px}
.svi-nombre{font-weight:500;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-top:2px}
.svi .svd{position:absolute;top:3px;right:4px;background:none;border:none;cursor:pointer;color:#94a3b8;font-size:12px;line-height:1;padding:0;touch-action:manipulation}
.svi .svd:hover{color:var(--er)}
.badd{width:100%;background:none;border:1px dashed var(--bor);border-radius:5px;padding:5px;font-size:16px;color:var(--di);cursor:pointer;transition:all .15s;display:block;margin-top:2px}
.badd:hover{border-color:var(--ac);color:var(--ac);background:#f0f6ff}

/* ── PRINT ── */
@media print{body *{visibility:hidden}#pa,#pa *{visibility:visible}#pa{position:fixed;inset:0;padding:30px;background:white}}
@media print{
  #print-semana-wrap { visibility:visible !important; position:fixed; inset:0; padding:16px; background:white; }
  #print-semana-wrap * { visibility:visible !important; }
  .snav, .ph button, .cel-actions, .snb { display:none !important; }
}
.drop-zona-semana {
  display:none;
  width:100%;
  padding:10px 0;
  text-align:center;
  font-size:13px;
  font-weight:600;
  border-radius:8px;
  margin:4px 0;
  cursor:default;
  transition:background .15s, border-color .15s;
  border:2px dashed var(--bor);
  color:var(--mu);
}
.drop-zona-semana.drag-activo {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.drop-zona-semana.drag-over-zona {
  background:rgba(232,93,47,.12);
  border-color:#e85d2f;
  color:#e85d2f;
}
#pa{display:none;font-family:'Instrument Sans',sans-serif;font-size:13px;color:#2c3e50}
.prh{display:flex;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid #3a6ea5}
.prl{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;color:#3a6ea5}
.prl small{display:block;font-size:10px;color:#e85d2f;text-transform:uppercase;letter-spacing:.08em}
.prn{text-align:right;font-size:12px;color:#6b7a8d}
.prn strong{font-size:16px;color:#3a6ea5;font-family:'Syne',sans-serif;display:block}
.prs{margin-bottom:16px}.prs h4{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#3a6ea5;margin-bottom:8px;font-weight:600}
.prg{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
.prf{padding:5px 0;border-bottom:1px solid #eee}
.pfl{font-size:10px;color:#999;text-transform:uppercase;letter-spacing:.06em}
.pfv{font-size:13px;color:#2c3e50;margin-top:1px}
.pfoot{margin-top:24px;padding-top:14px;border-top:1px solid #eee;display:flex;justify-content:space-between;font-size:11px;color:#aaa}

/* ══════════════════════════════
   RESPONSIVE MÓVIL
══════════════════════════════ */
@media(max-width:768px){
  .hide-mob{display:none !important}
  .login-offices{grid-template-columns:1fr 1fr}
  .cl-grid{grid-template-columns:1fr}
  .as-grid{grid-template-columns:1fr}
.tec-card{cursor:pointer}
.tec-nombre{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--tx);margin-bottom:4px}
.tec-usuario{font-size:12px;color:var(--mu);margin-bottom:2px}
.tec-rol{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;margin-top:6px;text-transform:uppercase;letter-spacing:.05em}
.rol-admin{background:#dbeafe;color:#1d4ed8}
.rol-tecnico{background:#dcfce7;color:#166534}
  :root{--topnav-h:64px}
  .topnav-row1{height:64px;padding:0 14px}
  .topnav{padding:0;gap:0}
  .tn-logo{width:42px;height:42px;border-radius:10px}
  .tn-title{font-size:14px;font-weight:700}
  .tn-ver{font-size:10px}
  .tn-links{display:none}
  .tn-stats{display:none}
  .tn-sep{display:none}
  .mob-botnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,#0d2a4e 0%,#1a3a5c 100%);z-index:200;height:calc(var(--botnav-h) + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -4px 20px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom)}
  .mob-botnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;background:transparent;color:rgba(255,255,255,.55);cursor:pointer;touch-action:manipulation;padding:8px 4px;transition:all .15s;border-radius:0}
  .mob-botnav-btn .bic{font-size:26px;line-height:1}
  .mob-botnav-btn.active{color:#fff;background:rgba(255,255,255,.1);border-radius:12px}
  .mob-botnav-btn:active{transform:scale(.88)}
  /* Menú más items */
  .mob-mas-item{display:flex;align-items:center;gap:12px;width:100%;border:none;background:transparent;color:rgba(255,255,255,.8);padding:14px 18px;font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s;text-align:left;position:relative}
  .mob-mas-item:hover,.mob-mas-item:active{background:rgba(255,255,255,.1)}
  .mob-mas-item+.mob-mas-item{border-top:1px solid rgba(255,255,255,.08)}
  /* Punto rojo notificación en opciones del menú "..." y en el propio botón */
  .mas-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px #0d2a4e;margin-left:auto;flex-shrink:0}
  .mnav-dot{position:absolute;top:8px;right:10px;width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px #1a3a5c,0 0 6px rgba(239,68,68,.6);display:none}
  .mnav-dot.active{display:block}
  .layout{padding-top:var(--topnav-h)}
  .main{padding:14px 12px;padding-bottom:calc(var(--botnav-h) + 14px)}
  .sg{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .sc{padding:14px}.sc .sv{font-size:24px}
  .desk-table{display:none}
  .mob-list{display:flex}
  /* Listado asistencias: solo tb-as-desk visible */
  #tb-as-desk{display:block !important}
  #tb-as-mob{display:none !important}
  /* Pestañas documentos más pequeñas en móvil */
  .docs-tab{font-size:10px;padding:7px 4px;gap:3px}
  .docs-tab-ico{font-size:12px}
  .docs-tab-badge{font-size:9px;padding:1px 4px}
  .fg{grid-template-columns:1fr}.fg .full{grid-column:1}
  #page-pem.active{display:flex !important;flex-direction:column;align-items:center}
  #pem-vista-form{display:none}
  #page-pem [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr 1fr !important}
  #page-pem [style*="grid-template-columns:2fr 1fr"]{grid-template-columns:1fr !important}
  .mo{align-items:flex-end;padding:0}
  .modal{border-radius:20px 20px 0 0;max-height:96vh}
  .mf{flex-direction:row}
  .mf .btn{flex:1}
  .sbar{flex-direction:column}
  .cuad-wrap{margin:0 -12px;border-radius:0}
  .cuad{min-width:500px}
  .ph{margin-bottom:14px}.pt{font-size:19px}
  /* Lista unificada — responsive móvil */
  .lista-row{border-radius:12px}
  .lista-row-titulo{font-size:13px;white-space:normal}
  .lista-row-actions{max-width:none;padding:6px 8px 6px 0;gap:4px}
  .doc-btn{padding:5px 9px;font-size:11px}
  /* Dashboard KPIs — 2 col en móvil, estilo vertical igual que email */
  .dash-kpis{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
  .dash-kpi{padding:12px 11px;gap:8px;flex-direction:column;align-items:flex-start}
  .dash-kpi-ico{width:32px;height:32px;font-size:16px;border-radius:10px}
  .dash-kpi-val{font-size:17px}
  .dash-kpi-lbl{font-size:10px}
  .dash-kpi-arr{display:none}
  .dash-grid{grid-template-columns:1fr;gap:14px}
  .dash-sec-hd{font-size:13px}
  /* Pestañas documentos */
  .docs-tabs{gap:0}
  .docs-tab{font-size:12px;padding:8px 8px}
  .docs-tab-ico{font-size:14px}
  /* Email tarjetas — columna única en móvil */
  #email-screen-tipo .dash-kpis{grid-template-columns:1fr !important}
  #email-screen-tipo .dash-kpi{flex-direction:row !important;align-items:center !important;padding:14px !important;gap:12px !important}
  #email-screen-tipo .dash-kpi > div:last-child{align-self:center !important}
}

@media(min-width:769px){
  .mob-botnav{display:none}
  .mob-list{display:none}
  .desk-table{display:block}
  
}

/* ── FIRMA ── */
.firma-canvas{border:2px solid var(--bor);border-radius:10px;background:#fff;touch-action:none;cursor:crosshair;width:100%;display:block}
.firma-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--di);font-size:14px;pointer-events:none;text-align:center}
.firma-wrap{position:relative}
.firma-ok{background:#f0fff4;border:1.5px solid var(--ok);border-radius:10px;padding:12px;text-align:center;color:var(--ok);font-weight:600;display:none}

/* ── TÉCNICO MODAL ── */
.tec-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ac);color:#fff;border-radius:8px;font-weight:700;font-size:15px;flex-shrink:0}
.toggle-grupo{display:flex;gap:0;border-radius:10px;overflow:hidden;border:1.5px solid var(--bor)}
.toggle-op{flex:1;padding:10px;text-align:center;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;background:var(--bg);color:var(--mu);border:none;font-family:'Instrument Sans',sans-serif}
.toggle-op.activo-si{background:#16a34a;color:#fff}
.toggle-op.activo-no{background:#dc2626;color:#fff}

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --azul:    #2d5a8e;
    --azul-os: #1a3a5c;
    --naranja: #e85d2f;
    --gris:    #64748b;
    --txt:     #1e293b;
    --borde:   #cbd5e1;
  }

  body {
    font-family: 'DM Sans', sans-serif;
    background: #f8fafc;
    color: var(--txt);
    min-height: 100svh;
    overflow-x: hidden;
  }

  /* ── HERO ── */
  .hero {
    background: linear-gradient(180deg, var(--azul-os) 0%, var(--azul) 50%, #6ba3d6 80%, #aac8eb 100%);
    padding: 40px 40px 60px;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(232,93,47,.22) 0%, transparent 70%);
    border-radius: 50%;
  }
  .hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.08));
  }
  .hero-bottom-white {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50%;
    background: #fff;
    z-index: 0;
    pointer-events: none;
  }
  .hero-deco {
    position: absolute;
    bottom: 60px; left: -60px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
    border-radius: 50%;
  }

  .hero-inner {
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    width: 100%;
  }

  /* Badge */
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 12px;
    color: rgba(255,255,255,.85);
    margin-bottom: 18px;
    font-weight: 500;
    letter-spacing: .05em;
  }
  .hero-badge::before { content: '●'; color: #4ade80; font-size: 9px; }

  /* Logo + título */
  .hero-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 14px;
  }
  .hero-logo {
    width: 180px; height: 180px;
    background: rgba(255,255,255,.1);
    border-radius: 36px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
    border: 1.5px solid rgba(255,255,255,.2);
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    overflow: hidden;
  }
  .hero-logo img {
    width: 160px; height: 160px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
  }
  .hero-text h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 12px;
    letter-spacing: -.02em;
  }
  .hero-text h1 span { color: #ffa07a; }
  .hero-text p {
    font-size: 16px;
    color: rgba(255,255,255,.65);
    line-height: 1.65;
    max-width: 520px;
    font-weight: 300;
  }

  /* Stats */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 520px;
  }
  .hstat {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 18px;
    padding: 22px 18px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: transform .2s, background .2s;
  }
  .hstat:hover {
    background: rgba(255,255,255,.16);
    transform: translateY(-3px);
  }
  .hstat-icon {
    font-size: 30px;
    display: block;
    margin-bottom: 10px;
    line-height: 1;
  }
  .hstat-label {
    font-size: 12px;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    line-height: 1.3;
  }

  /* Pie */
  .hero-footer {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid rgba(45,90,142,.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
  }
  .hero-footer-brand {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1a3a5c;
  }
  .hero-footer-brand strong { color: #1a3a5c; }
  .hero-footer-web {
    font-size: 13px;
    color: #2d5a8e;
    text-decoration: none;
    letter-spacing: .03em;
    font-weight:500;
  }
  .hero-footer-web:hover { color: #1a3a5c; }
  .hero-footer-design {
    font-size: 12px;
    color: #64748b;
    font-style: italic;
  }
  .hero-footer-design strong { color: #1a3a5c; font-style: normal; font-weight:700; }

  /* Botón acceder */
  .btn-acceder {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 12px;
    padding: 12px 24px;
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: all .2s;
    letter-spacing: .03em;
    margin-top: 32px;
    position: relative;
    z-index: 1;
  }
  .btn-acceder:hover {
    background: rgba(255,255,255,.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
  }

  /* Responsive */
  @media (max-width: 640px) {
    .hero { padding: 16px 14px 80px; min-height: 100svh; overflow-y: auto; justify-content: flex-start; }
    .hero-inner { max-width: 100%; padding: 0 4px; }
    .hero-logo { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto; }
    .hero-logo img { width: 60px; height: 60px; }
    .hero-top { flex-direction: column; text-align: center; gap: 8px; margin-bottom: 8px; }
    .hero-text h1 { font-size: clamp(20px, 6vw, 28px); }
    .hero-text p { margin: 0 auto; font-size: 12px; }
    .hero-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .hero-inner > div[style*="grid"] { max-width: 100% !important; }
    .hstat { padding: 10px; border-radius: 12px; }
    .hstat-icon { font-size: 20px; margin-bottom: 6px; }
    .hstat-label { font-size: 10px; }
    .hero-badge-wrap { margin-bottom: 12px !important; }
    .hero-text h1 { margin-bottom: 4px; }
    .hero-footer { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-top: 10px; margin-top: 12px; }
    .hero-bottom-white { height: 55%; }
    .btn-login { padding: 10px 36px !important; font-size: 14px !important; margin-top: 10px !important; }
  }

  /* Animación */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-badge { animation: fadeUp .5s ease both; }
  .hero-top   { animation: fadeUp .5s ease .1s both; }
  .hstat:nth-child(1) { animation: fadeUp .5s ease .2s both; }
  .hstat:nth-child(2) { animation: fadeUp .5s ease .28s both; }
  .hstat:nth-child(3) { animation: fadeUp .5s ease .36s both; }
  .hstat:nth-child(4) { animation: fadeUp .5s ease .44s both; }
  .btn-acceder { animation: fadeUp .5s ease .5s both; }

  .hero input::placeholder { color: rgba(26,58,92,.4); }
  .hero input:focus { border-bottom-color: #2d5a8e !important; }
  input, select, textarea { font-size: 16px !important; }
  * { -webkit-text-size-adjust: 100%; }

.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.no-spin { -moz-appearance:textfield; }

  @media(max-width:640px){
    /* Modal asistencia en móvil */

    /* Nº + Fecha + Técnico: en móvil Nº pequeño, fecha y técnico al 100% */

    /* Tipo + KM: en misma fila pero KM más pequeño */

    /* Trabajos + Precio: en móvil se apilan */

    /* Total e IVA en móvil: en columna */
  }

/* ── FIN CSS LOGIN ── */

  /* ── CAMPOS MODAL ASISTENCIA DESKTOP ── */

  /* ── MODAL ASISTENCIA MÓVIL ── */
  @media (max-width: 640px) {
    /* Estado, serie: ancho completo en móvil */
    /* Fila tipo + KM: wrap */
    /* Fila trabajos + precio: columna */
    /* Total e IVA wrap */
  }

  /* ── MODAL ASISTENCIA ── */
  #modal-as .fi-km     { flex:0 0 84px; }
  #modal-as .fi-precio { flex:0 0 90px; }
  #modal-as .fi-estado { flex:0 0 115px; }
  #modal-as .fi-tipo   { flex:2; min-width:0; }
  #modal-as .fi-serie  { flex:1; }

  @media (max-width: 640px) {
    /* KM: ancho para 7 dígitos */
    #modal-as .fi-km { flex:0 0 84px !important; }
    /* Estado: más pequeño */
    #modal-as .fi-estado { flex:0 0 115px !important; }
    /* Tipo: ocupa el resto */
    #modal-as .fi-tipo { flex:1 !important; min-width:0 !important; }
    /* Fila trabajos+precio: columna en móvil */
    #modal-as .row-trab-precio { flex-direction:column !important; }
    #modal-as .row-trab-precio > .fi { width:100% !important; flex:none !important; }
    #modal-as .row-trab-precio .fi-precio { width:100% !important; flex:none !important; }
    #modal-as .fi-precio > div { flex-direction:row !important; height:56px !important; }
    #modal-as .fi-precio > div input { flex:1 !important; min-width:0 !important; }
  }

  /* ── PAGE DOCUMENTOS sin padding extra ── */
  @media (max-width: 640px) {
  }

  /* ── PAGE DOCUMENTOS ── */
  #page-documentos .docs-lista {
    overflow-y: auto;
  }
/* Pestañas documentos */
.docs-tabs{display:flex;gap:0;background:var(--sur2);border-radius:14px;padding:4px;margin-bottom:20px;border:1px solid var(--bor)}
.docs-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 12px;border-radius:10px;border:none;background:transparent;color:var(--mu);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}
.docs-tab:hover{color:var(--tx);background:rgba(0,0,0,.04)}
.docs-tab.active{background:#fff;color:var(--ac);box-shadow:0 2px 10px rgba(0,0,0,.1);border:1px solid var(--bor)}
body.dark .docs-tab.active{background:var(--sur);color:var(--ac);box-shadow:0 2px 10px rgba(0,0,0,.3)}
.docs-tab-ico{font-size:16px}
.docs-tab-txt{white-space:nowrap}
.docs-tab-badge{background:var(--ac);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;min-width:18px;text-align:center}
.docs-tab.active .docs-tab-badge{background:var(--ac)}
@media(max-width:500px){
  .docs-tab{padding:8px 4px;gap:3px}
  .docs-tab-txt{display:none}
  .docs-tab-ico{font-size:18px}
}
/* Filas documentos */
.doc-row{display:flex;align-items:center;gap:0;background:var(--bg);border:1.5px solid var(--bor);border-radius:14px;margin-bottom:8px;overflow:hidden;transition:border-color .2s,box-shadow .15s}
.doc-row:hover{border-color:var(--ac);box-shadow:0 2px 12px rgba(45,90,142,.1)}
.doc-row-accent{width:4px;align-self:stretch;flex-shrink:0}
.doc-row-body{flex:1;padding:11px 13px;min-width:0}
.doc-row-num{font-weight:700;font-size:13px;margin-bottom:2px}
.doc-row-cli{font-size:13px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-row-meta{font-size:11px;color:var(--mu);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.doc-row-estado{display:inline-flex;align-items:center;padding:2px 7px;border-radius:8px;font-size:10px;font-weight:700}
.doc-row-actions{display:flex;flex-wrap:wrap;gap:5px;padding:10px 10px 10px 0;flex-shrink:0;align-items:center;max-width:260px;justify-content:flex-end}
.doc-btn{display:flex;align-items:center;justify-content:center;gap:4px;border:none;border-radius:9px;padding:6px 8px;font-size:11px;font-weight:700;cursor:pointer;transition:opacity .15s;white-space:nowrap;width:100%;box-sizing:border-box}
.doc-btn:hover{opacity:.82}
.doc-btn-ver{background:var(--ac);color:#fff}
.doc-btn-env{background:#27ae60;color:#fff}
.doc-btn-del{background:transparent;color:#c0392b;border:1.5px solid #f0b8b8}
.doc-btn-del:hover{background:#fff0f0;opacity:1}
.doc-btn-del:hover{background:#fff0f0 !important;opacity:1}

/* Toggle switch permisos */
.perm-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.perm-switch input{opacity:0;width:0;height:0}
.perm-slider{position:absolute;cursor:pointer;inset:0;background:#d1d5db;border-radius:24px;transition:.2s}
.perm-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.perm-switch input:checked+.perm-slider{background:var(--ac)}
.perm-switch input:checked+.perm-slider:before{transform:translateX(18px)}
.perm-item{transition:background .15s}
.perm-item:hover{background:var(--sur2)}

/* ══ PANTALLA BIENVENIDA TILES ══ */
.bv-tile{
  background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.13);
  border-radius:18px;padding:16px 12px 12px;
  cursor:pointer;text-align:center;
  transition:all .25s cubic-bezier(.34,1.2,.64,1);
  position:relative;overflow:hidden;user-select:none;
}
.bv-tile:hover{background:rgba(255,255,255,.14);transform:translateY(-3px);border-color:rgba(255,255,255,.26);box-shadow:0 10px 28px rgba(0,0,0,.2)}
.bv-tile:active{transform:scale(.95)}
.bv-tile.bv-selected{background:rgba(255,255,255,.93) !important;border-color:#fff !important;transform:translateY(-4px) scale(1.03) !important;box-shadow:0 16px 44px rgba(0,0,0,.3) !important}
.bv-tile.bv-selected .bv-tile-label{color:#0d2a4e}
.bv-tile.bv-selected .bv-tile-sub{color:#3a6ea5}
.bv-tile.bv-selected .bv-tile-check{opacity:1;transform:scale(1)}
.bv-tile-check{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#27ae60,#2ecc71);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:700;opacity:0;transform:scale(.4);transition:all .25s cubic-bezier(.34,1.56,.64,1);z-index:2}
.bv-tile-icon{font-size:28px;display:block;margin-bottom:7px;line-height:1}
.bv-tile-label{font-family:'Syne',sans-serif;font-size:12.5px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:2px;transition:color .2s}
.bv-tile-sub{font-size:10px;color:rgba(255,255,255,.45);line-height:1.3;transition:color .2s}
.bv-tile-sm{padding:14px 10px 11px}
.bv-tile-sm .bv-tile-icon{font-size:26px;margin-bottom:6px}

/* ══ HISTORIAL EMAILS ══ */
@media(max-width:768px){.mob-hidden{display:none!important}}
@media(min-width:769px){.mob-only{display:none!important}}
.email-historial{display:block}
@media(max-width:768px){.email-historial{display:none}}
.email-hist-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:3px}
.email-hist-row:nth-child(odd){background:#f8f9fb}
.email-hist-row:nth-child(even){background:#edf1f6}
.email-hist-ico{font-size:16px;flex-shrink:0;width:28px;text-align:center}
.email-hist-body{flex:1;min-width:0}
.email-hist-dest{font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-hist-asunto{font-size:11px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-hist-fecha{font-size:11px;color:var(--di);flex-shrink:0;white-space:nowrap}
.email-hist-tipo{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;flex-shrink:0}
.email-screen{display:none}
.email-screen.active{display:block}
.email-opt{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:var(--r);border:1.5px solid var(--bor);cursor:pointer;background:var(--sur);transition:all .18s}
.email-opt:hover{border-color:var(--ac);background:var(--sur2);transform:translateX(3px)}
.email-opt-text{display:flex;flex-direction:column;gap:2px}
.email-opt-text strong{font-size:14px;color:var(--tx)}
.email-opt-text span{font-size:12px;color:var(--mu)}
.email-label{display:block;font-size:11px;font-weight:700;color:var(--ac);text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px}
.email-chip{display:inline-flex;align-items:center;gap:6px;background:var(--sur2);border:1px solid var(--bor);border-radius:20px;padding:4px 10px;font-size:12px;color:var(--tx)}
.email-chip button{background:none;border:none;cursor:pointer;color:var(--di);font-size:14px;padding:0;line-height:1}
.email-chip button:hover{color:var(--er)}

/* ── Buscador global ── */
#buscador-global-overlay{
  display:none;position:fixed;inset:0;z-index:3000;
  background:rgba(15,30,50,.7);backdrop-filter:blur(4px);
  padding:80px 16px 20px;
}
#buscador-global-overlay.visible{display:block}
#buscador-global-box{
  background:var(--car,#fff);border-radius:18px;
  max-width:600px;margin:0 auto;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
  overflow:hidden;
}
#buscador-global-input-wrap{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-bottom:1.5px solid var(--bor);
}
#buscador-global-input-wrap .ico{font-size:20px;flex-shrink:0;color:var(--mu)}
#buscador-global-inp{
  flex:1;border:none;outline:none;font-size:17px;
  font-family:'Instrument Sans',sans-serif;
  background:transparent;color:var(--tx);
}
#buscador-global-inp::placeholder{color:var(--mu)}
#buscador-global-close{
  background:none;border:none;cursor:pointer;
  font-size:20px;color:var(--mu);padding:4px;line-height:1;
  flex-shrink:0;
}
#buscador-global-results{
  max-height:420px;overflow-y:auto;
  padding:8px 0;
}
.bg-seccion{
  padding:6px 18px 4px;
  font-size:11px;font-weight:700;
  color:var(--mu);text-transform:uppercase;letter-spacing:.07em;
}
.bg-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;cursor:pointer;
  transition:background .12s;
}
.bg-item:hover{background:var(--sur2)}
.bg-item-ico{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.bg-item-body{flex:1;min-width:0}
.bg-item-titulo{font-size:13px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-item-sub{font-size:11px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-empty{padding:32px;text-align:center;color:var(--mu);font-size:14px}
.bg-sep{height:1px;background:var(--bor);margin:4px 0}
#btn-buscar-global{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  background:transparent;border:none;
  cursor:pointer;font-size:22px;color:rgba(255,255,255,.9);
  transition:opacity .15s;flex-shrink:0;
}
#btn-buscar-global:hover{opacity:.7}

.btn-logout{
  background:rgba(232,93,47,.15);
  border:1px solid rgba(232,93,47,.3);
  color:rgba(255,255,255,.85);
  padding:5px 16px;border-radius:20px;
  cursor:pointer;font-size:12px;
  font-family:'Instrument Sans',sans-serif;font-weight:600;
  transition:all .2s;
}
.btn-logout:hover{background:rgba(232,93,47,.5);border-color:#e85d2f;color:#fff}
/* ══ TABLA PROGRAMACIÓN ══ */
.tprog{width:100%;border-collapse:collapse;background:var(--sur);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);table-layout:fixed}
.tprog th,.tprog td{border:1.5px solid var(--bor);vertical-align:top}
.tprog .th-dia{background:linear-gradient(135deg,#1a3a5c,#2d5a8e);color:#fff;font-family:'Syne',sans-serif;font-size:13px;font-weight:700;padding:10px 8px;vertical-align:middle;letter-spacing:.02em;text-align:center}
.tprog .th-dia.festivo{background:linear-gradient(135deg,#7f1d1d,#b91c1c) !important}
.tprog .th-slot{background:var(--sur2);color:var(--mu);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:6px 4px;text-align:center}
/* Fila 1 cada día: gris claro */
.tprog .td-cel.fila1{background:#f8f9fb}
.tprog .td-cel.fila1:hover{filter:brightness(.95)}
/* Fila 2 cada día: gris más oscuro */
.tprog .td-cel.fila2{background:#eaecf0}
.tprog .td-cel.fila2:hover{filter:brightness(.95)}

/* ── Toggle switches marcadores cita ── */
.cita-toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cita-toggle-item{display:flex;align-items:center;justify-content:space-between;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600;cursor:pointer;user-select:none;gap:8px}
.cita-toggle-item input[type=checkbox]{display:none}
.cita-toggle-track{position:relative;width:38px;height:20px;border-radius:10px;background:#ccc;flex-shrink:0;transition:background .2s}
.cita-toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.cita-toggle-item input:checked ~ .cita-toggle-track{background:var(--toggle-color,#22c55e)}
.cita-toggle-item input:checked ~ .cita-toggle-track .cita-toggle-thumb{left:20px}
/* Marcadores — especificidad alta para ganar siempre */
.tprog .td-cel.cel-prior,.tprog .td-cel.cel-prior:hover{background:#fef08a !important}
.tprog .td-cel.cel-conf,.tprog .td-cel.cel-conf:hover{background:#bbf7d0 !important}
.tprog .td-cel.cel-esp,.tprog .td-cel.cel-esp:hover{background:#bfdbfe !important}
.tprog .td-cel.cel-wa-pend,.tprog .td-cel.cel-wa-pend:hover{background:#fed7aa !important}
.tprog .td-cel{padding:0;position:relative;cursor:pointer;transition:background .15s;overflow:hidden}
.cel-inner{padding:8px 8px;min-height:82px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cel-hora{font-size:11px;font-weight:700;color:var(--ac);display:flex;align-items:center;gap:4px}
.cel-tel{font-size:12px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cel-nombre{font-size:12px;color:var(--tx);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cel-pob{font-size:11px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cel-actions{margin-top:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.cel-wa{display:inline-flex;align-items:center;gap:3px;background:#25d366;color:#fff;border:none;border-radius:7px;padding:3px 7px;font-size:10px;font-weight:700;cursor:pointer;transition:opacity .15s;white-space:nowrap}
.cel-wa:hover{opacity:.85}
.cel-maps{display:inline-flex;align-items:center;gap:3px;background:#1a73e8;color:#fff;border:none;border-radius:7px;padding:3px 7px;font-size:10px;font-weight:700;cursor:pointer;transition:opacity .15s;white-space:nowrap}
.cel-maps:hover{opacity:.85}
.cel-ficha{display:inline-flex;align-items:center;gap:3px;background:var(--ac);color:#fff;border:none;border-radius:7px;padding:3px 7px;font-size:10px;font-weight:700;cursor:pointer;transition:opacity .15s;white-space:nowrap}
.cel-ficha:hover{opacity:.85}
.tprog .td-cel.drag-over{background:#bfdbfe !important;outline:2px dashed var(--ac);outline-offset:-2px}
.tprog .td-cel.cel-seleccionada{outline:3px solid #e85d2f !important;outline-offset:-3px;box-shadow:inset 0 0 0 3px #e85d2f33}
.tprog .td-cel.cel-destino-ok:hover{outline:2px dashed #22c55e !important;outline-offset:-2px;background:rgba(34,197,94,.08) !important}
.tprog .td-cel.cel-reubicar1{background:#fef9c3 !important}
.tprog .td-cel.cel-reubicar1:hover{background:#fef08a !important}
.tprog .td-cel.cel-reubicar2{background:#fef08a !important}
.tprog .td-cel.cel-reubicar2:hover{background:#fde047 !important}
.th-reubicar{background:linear-gradient(135deg,#ca8a04,#a16207);color:#fff;font-family:'Syne',sans-serif;font-size:12px;font-weight:700;padding:10px 8px;vertical-align:middle;letter-spacing:.02em;text-align:center}
#menu-cita-sel{
  position:fixed;
  z-index:9999;
  background:var(--car,#fff);
  border:1.5px solid var(--bor);
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  padding:8px;
  display:none;
  flex-direction:column;
  gap:6px;
  min-width:180px;
}
#menu-cita-sel.visible{display:flex}
#menu-cita-sel button{
  display:flex;align-items:center;gap:8px;
  background:none;border:1.5px solid var(--bor);border-radius:8px;
  padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer;
  color:var(--tx);transition:background .12s,border-color .12s;text-align:left;
}
#menu-cita-sel button:hover{background:var(--sur2)}
#menu-cita-sel .btn-mover{border-color:#e85d2f;color:#e85d2f}
#menu-cita-sel .btn-mover:hover{background:#fff5f0}
#menu-cita-sel .btn-copiar{border-color:#2d5a8e;color:#2d5a8e}
#menu-cita-sel .btn-copiar:hover{background:#f0f5ff}
#menu-cita-sel .btn-cancelar{border-color:var(--bor);color:var(--mu)}
.sel-hint{
  display:none;
  align-items:center;gap:8px;
  background:linear-gradient(90deg,#e85d2f,#c94e24);
  color:#fff;border-radius:10px;padding:8px 14px;
  font-size:12px;font-weight:600;margin-bottom:4px;
}
.sel-hint.visible{display:flex}
.sel-hint button{background:rgba(255,255,255,.25);border:none;border-radius:6px;color:#fff;padding:3px 9px;font-size:11px;cursor:pointer;font-weight:700}
.sel-hint button:hover{background:rgba(255,255,255,.4)}
.tprog .td-cel[draggable="true"]{cursor:grab}
.tprog .td-cel[draggable="true"]:active{cursor:grabbing}
.cel-tec-nombre{
  font-size:10px;font-weight:700;margin-top:auto;padding-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85;
}
.cel-vacia{display:flex;align-items:center;justify-content:center;min-height:82px;color:var(--bor);font-size:22px;transition:color .15s}
.tprog .td-cel:hover .cel-vacia{color:var(--di)}
/* Modal cita */
#modal-cita .fg{grid-template-columns:1fr 1fr}
@media(max-width:640px){
  /* Modal cita: layout optimizado para móvil */
  #modal-cita .fg{grid-template-columns:1fr 1fr !important}
  #modal-cita .fi.full{grid-column:1/-1}
  /* Teléfono: fila completa */
  #cita-tel-wrap{grid-column:1/-1}
  /* Hora y Técnico: 2 columnas compactas */
  #cita-hora-wrap,#cita-tec-wrap{grid-column:auto}
  /* Nombre y Población: 2 columnas */
  #cita-nom-wrap,#cita-pob-wrap{grid-column:auto}
  #modal-cita .modal{max-height:95vh;border-radius:16px 16px 0 0;margin:auto auto 0;position:fixed;bottom:0;left:0;right:0;width:100%}
  #modal-cita input,#modal-cita select{font-size:16px !important}
}
@media(max-width:640px){
  .tprog .th-dia{width:54px;min-width:54px;font-size:10px;padding:6px 3px}
  .cel-inner{padding:4px 5px;min-height:66px}
  .cel-nombre,.cel-tel{font-size:10px}
  .cel-wa,.cel-ficha{font-size:9px;padding:2px 5px}
}

#sync-btn.syncing{pointer-events:none;opacity:.8}
#sync-btn.syncing #sync-ico{animation:syncSpin .7s linear infinite}
#sync-btn.offline-state{background:rgba(232,93,47,.15) !important;border-color:rgba(232,93,47,.4) !important}
#sync-btn.pendientes-state{background:rgba(255,180,0,.12) !important;border-color:rgba(255,180,0,.35) !important;animation:pulseWarn 2s ease infinite}
@keyframes syncSpin{to{transform:rotate(360deg)}}
@keyframes pulseWarn{0%,100%{box-shadow:0 0 0 0 rgba(255,180,0,.5)}60%{box-shadow:0 0 0 5px rgba(255,180,0,0)}}