/* portal.it2go.mx · estilos complementarios (bloques 2-16 de su index.html) */

.rrhh-tabs{display:flex;gap:4px;background:var(--bg2);padding:4px;border-radius:12px;margin-bottom:16px;overflow-x:auto}
.rrhh-tabs button{flex:0 0 auto;padding:9px 18px;border:0;border-radius:9px;background:transparent;color:var(--tx2);
  font-size:14px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.rrhh-tabs button.on{background:var(--bg);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.rrhh-filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px;background:var(--bg2);
  border-radius:12px;margin-bottom:16px}
.rrhh-filtros .inp{min-width:150px}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.kpi{background:var(--bg2);border-radius:12px;padding:14px 16px}
.kpi .et{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--tx2);margin-bottom:6px}
.kpi .vl{font-size:24px;font-weight:700;line-height:1.1}
.doc-fondo{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px}
.doc-caja{background:var(--bg);border-radius:16px;width:min(920px,100%);height:min(88vh,100%);display:flex;flex-direction:column;overflow:hidden}
.doc-top{display:flex;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bd)}
.doc-cuerpo{flex:1;overflow:auto;background:var(--bg2)}
.doc-cuerpo iframe{width:100%;height:100%;border:0}
.doc-cuerpo pre{margin:0;padding:16px;font-size:12px;white-space:pre-wrap;word-break:break-all;color:var(--tx)}
@media(max-width:700px){.doc-caja{height:94vh;width:100%}.rrhh-filtros{padding:10px}}


.rrhh-wrap{display:block;padding:0 22px 40px;box-sizing:border-box;max-width:100%;overflow-x:hidden}
.rrhh-wrap .card{box-sizing:border-box;margin-bottom:16px;padding:20px}
.rrhh-wrap h2{margin:0 0 6px;font-size:22px}
.rrhh-wrap table{min-width:640px}
.rrhh-wrap th{padding:10px 8px;font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:var(--tx2);font-weight:600}
.rrhh-wrap td{padding:12px 8px;vertical-align:middle}
.rrhh-tabs{margin:0 22px 18px}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{box-sizing:border-box}
[x-cloak]{display:none!important}
@media(max-width:700px){.rrhh-wrap{padding:0 12px 32px}.rrhh-tabs{margin:0 12px 14px}.rrhh-wrap .card{padding:14px}}


.xml-vista{background:#0d1117;color:#c9d1d9;padding:18px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.65;margin:0;min-height:100%;white-space:pre;overflow:auto;tab-size:2}
.xml-vista .tg{color:#7ee787}.xml-vista .at{color:#79c0ff}.xml-vista .vl{color:#a5d6ff}
.xml-vista .tx{color:#e6edf3}.xml-vista .dc{color:#8b949e;font-style:italic}
.doc-cuerpo{background:#0d1117}


.doc-fondo{padding:0}
.doc-caja{width:min(1000px,100%);height:100%;max-height:100vh;border-radius:0}
@media(min-width:760px){.doc-fondo{padding:20px}.doc-caja{height:min(90vh,100%);border-radius:16px}}
.doc-top{gap:6px;flex-wrap:wrap;padding:10px 12px;position:sticky;top:0;background:var(--bg);z-index:2}
.doc-top strong{min-width:100%;order:-1;font-size:13px}
@media(min-width:760px){.doc-top strong{min-width:0;order:0;font-size:14px}}
.doc-top .btn{padding:9px 14px;font-size:13px}
.doc-cuerpo iframe{min-height:60vh}
.doc-movil{padding:28px 20px;text-align:center;color:var(--tx)}
.doc-movil a{display:inline-block;margin-top:14px}
@media(max-width:760px){.xml-vista{font-size:11.5px;padding:12px}}


.pdf-lienzo{padding:14px;display:flex;flex-direction:column;align-items:center;gap:14px;background:#525659;min-height:100%}
.pdf-lienzo canvas{max-width:100%;height:auto;box-shadow:0 2px 12px rgba(0,0,0,.4);border-radius:4px;background:#fff}
.pdf-lienzo .doc-movil{color:#fff}
@media(max-width:760px){.pdf-lienzo{padding:8px;gap:8px}}


.barra{height:8px;border-radius:4px;background:var(--bd);overflow:hidden;margin-top:6px}
.barra i{display:block;height:100%;border-radius:4px}
.fila-con{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--bd)}
.fila-con .im{font-weight:700;white-space:nowrap}
.ev{display:flex;align-items:flex-end;gap:6px;height:140px;padding-top:10px}
.ev>div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.ev .b{width:100%;background:linear-gradient(180deg,#00836F,#00a88d);border-radius:5px 5px 0 0;min-height:3px}
.ev .m{font-size:10px;color:var(--tx2);white-space:nowrap}


.cal-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-mes{min-width:150px;text-align:center;font-size:15px;text-transform:capitalize}
.cal-kpis{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.cal-k{font-size:12px;color:var(--tx2);padding:5px 11px;border-radius:20px;
  border:1px solid var(--c);background:transparent}
.cal-k b{color:var(--c);font-size:13px}
.cal-sem{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-sem span{text-align:center;font-size:11px;font-weight:600;color:var(--tx2);
  text-transform:uppercase;letter-spacing:.4px;padding:4px 0}
.cal-rej{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-d{aspect-ratio:1/.92;border-radius:10px;padding:7px 8px;background:var(--bg2);
  border:1px solid transparent;cursor:pointer;transition:.15s;overflow:hidden;display:flex}
.cal-d>div{display:flex;flex-direction:column;gap:1px;width:100%;min-width:0}
.cal-d:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.12)}
.cal-d.vacio{background:transparent;cursor:default;border:0}
.cal-d.vacio:hover{transform:none;box-shadow:none}
.cal-n{font-size:15px;font-weight:700;line-height:1.1}
.cal-e{font-size:10.5px;font-weight:600;line-height:1.2}
.cal-h,.cal-hr,.cal-p{font-size:9.5px;color:var(--tx2);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-d.asistencia{border-color:rgba(0,131,111,.35)} .cal-d.asistencia .cal-e{color:#00836F}
.cal-d.retardo{border-color:rgba(245,166,35,.4)} .cal-d.retardo .cal-e{color:#F5A623}
.cal-d.falta{border-color:rgba(224,53,43,.35)} .cal-d.falta .cal-e{color:#e0352b}
.cal-d.permiso{border-color:rgba(37,99,235,.35)} .cal-d.permiso .cal-e{color:#2563EB}
.cal-d.descanso{opacity:.5} .cal-d.descanso .cal-e{color:var(--tx2)}
.cal-d.hoy{outline:2px solid #00836F;outline-offset:1px}
.cal-d.ajust::after{content:'';position:absolute;margin:2px 0 0 auto;width:5px;height:5px;
  border-radius:50%;background:#F5A623;align-self:flex-start}
@media(max-width:700px){
  .cal-d{aspect-ratio:1/1.1;padding:5px;border-radius:8px}
  .cal-rej,.cal-sem{gap:4px}
  .cal-n{font-size:13px} .cal-e{font-size:9px} .cal-h,.cal-hr,.cal-p{display:none}
  .cal-mes{min-width:0;flex:1;font-size:14px}
}


/* --- panel de día --- */
.dia-panel{align-items:flex-end}
.dia-caja{background:var(--bg);color:var(--tx);width:100%;max-height:88vh;border-radius:18px 18px 0 0;
  display:flex;flex-direction:column;overflow:hidden}
.dia-top{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--bd);
  background:var(--bg2)}
.dia-top>div:first-child{flex:1}
.dia-f{font-size:17px;font-weight:700;color:var(--tx)}
.dia-e{font-size:13px;font-weight:600;color:var(--c);margin-top:2px}
.dia-cuerpo{flex:1;overflow:auto;padding:18px 20px;color:var(--tx)}
.dia-pie{padding:14px 20px;border-top:1px solid var(--bd)}
.dia-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.dia-kpis>div{background:var(--bg2);border-radius:10px;padding:11px 13px}
.dia-kpis .et{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--tx2)}
.dia-kpis b{font-size:19px;color:var(--tx)}
.dia-sec{margin-bottom:20px}
.dia-sec h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2);font-weight:600}
.dia-ch{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--bd)}
.dia-ch:last-child{border-bottom:0}
.dia-ic{width:26px;height:26px;border-radius:7px;background:var(--bg2);display:flex;
  align-items:center;justify-content:center;font-size:13px;flex-shrink:0;color:var(--tx)}
.dia-ch-t{font-size:14px;color:var(--tx)}
.dia-ch-d{font-size:12px;line-height:1.45}
@media(min-width:700px){
  .dia-panel{align-items:center;justify-content:center;padding:24px}
  .dia-caja{max-width:560px;border-radius:18px}
}

/* --- contraste general --- */
.rrhh-wrap .card, .dia-caja, .rrhh-tabs{color:var(--tx)}
.rrhh-wrap .chip{border:1px solid var(--bd);color:var(--tx2);background:transparent;
  padding:3px 9px;border-radius:20px;font-size:11.5px;display:inline-block}
.rrhh-wrap .inp, .dia-caja .inp{background:var(--bg);color:var(--tx);border:1px solid var(--bd)}
.rrhh-wrap select.inp option{background:var(--bg);color:var(--tx)}
.rrhh-wrap .btn{color:var(--tx)}
.rrhh-wrap .btn-g{color:#fff}
.rrhh-wrap table td, .rrhh-wrap table th{color:inherit}
.rrhh-wrap tbody td{color:var(--tx)}
.rrhh-wrap .muted{color:var(--tx2)}
.rrhh-tabs button{color:var(--tx2)}
.rrhh-tabs button.on{background:var(--bg);color:var(--tx)}
.kpi .vl{color:var(--tx)}
.hito-ver,.hito-t{color:var(--tx)}
.cal-n{color:var(--tx)}

/* --- modo oscuro --- */
:root[data-theme="dark"] .rrhh-tabs{background:rgba(255,255,255,.06)}
:root[data-theme="dark"] .rrhh-tabs button.on{background:rgba(255,255,255,.14);color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.4)}
:root[data-theme="dark"] .rrhh-filtros{background:rgba(255,255,255,.05)}
:root[data-theme="dark"] .kpi{background:rgba(255,255,255,.05)}
:root[data-theme="dark"] .cal-d{background:rgba(255,255,255,.05)}
:root[data-theme="dark"] .cal-d:hover{background:rgba(255,255,255,.09)}
:root[data-theme="dark"] .dia-ic,
:root[data-theme="dark"] .dia-kpis>div{background:rgba(255,255,255,.07)}
:root[data-theme="dark"] .rrhh-wrap .inp,
:root[data-theme="dark"] .dia-caja .inp{background:rgba(255,255,255,.06);color:#e6edf3;
  border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .rrhh-wrap select.inp option{background:#1c1c1e;color:#e6edf3}
:root[data-theme="dark"] .rrhh-wrap .btn{background:rgba(255,255,255,.08);color:#e6edf3;
  border-color:rgba(255,255,255,.12)}
:root[data-theme="dark"] .rrhh-wrap .btn:hover{background:rgba(255,255,255,.14)}
:root[data-theme="dark"] .rrhh-wrap .btn-g{background:#00836F;color:#fff}
:root[data-theme="dark"] .rrhh-wrap .chip{border-color:rgba(255,255,255,.18);color:#c9d1d9}
:root[data-theme="dark"] .barra{background:rgba(255,255,255,.1)}
:root[data-theme="dark"] .fila-con,
:root[data-theme="dark"] .dia-ch{border-color:rgba(255,255,255,.09)}
:root[data-theme="dark"] .linea-t::before{background:rgba(255,255,255,.12)}
:root[data-theme="dark"] .hito::before{border-color:#1c1c1e}
:root[data-theme="dark"] .rrhh-wrap table tr{border-color:rgba(255,255,255,.09) !important}
:root[data-theme="dark"] .doc-top{background:#1c1c1e}
:root[data-theme="dark"] .xml-vista{background:#0d1117}


.dia-panel{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dia-caja{
  background:#ffffff !important; color:#1d1d1f !important; opacity:1 !important;
  box-shadow:0 -6px 40px rgba(0,0,0,.28);
}
.dia-top{background:#f5f5f7 !important; border-bottom:1px solid #e5e5ea; position:relative}
.dia-top::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.dia-f{color:#1d1d1f !important;text-transform:capitalize}
.dia-fc{font-size:11.5px;color:#86868b;margin-top:1px}
.dia-e{color:var(--c) !important;font-weight:700}
.dia-cuerpo{color:#1d1d1f !important}
.dia-kpis>div{background:#f5f5f7 !important}
.dia-kpis .et{color:#86868b !important}
.dia-kpis b{color:#1d1d1f !important}
.dia-sec h4{color:#86868b !important}
.dia-ic{background:#f5f5f7 !important;color:#1d1d1f !important}
.dia-ch{border-bottom:1px solid #e5e5ea}
.dia-ch-t{color:#1d1d1f !important}
.dia-ch-d{color:#86868b !important}
.dia-pie{border-top:1px solid #e5e5ea;background:#fff}
.dia-caja .chip{border:1px solid #d2d2d7;color:#515154;background:#fff}
.dia-caja .btn{background:#f5f5f7;color:#1d1d1f;border:1px solid #d2d2d7}
.dia-caja .btn-g{background:#00836F;color:#fff;border-color:#00836F}

:root[data-theme="dark"] .dia-caja{background:#1c1c1e !important;color:#e6edf3 !important;
  box-shadow:0 -6px 40px rgba(0,0,0,.6)}
:root[data-theme="dark"] .dia-top{background:#242426 !important;border-bottom-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .dia-f,
:root[data-theme="dark"] .dia-cuerpo,
:root[data-theme="dark"] .dia-kpis b,
:root[data-theme="dark"] .dia-ch-t,
:root[data-theme="dark"] .dia-ic{color:#e6edf3 !important}
:root[data-theme="dark"] .dia-fc,
:root[data-theme="dark"] .dia-kpis .et,
:root[data-theme="dark"] .dia-sec h4,
:root[data-theme="dark"] .dia-ch-d{color:#98989d !important}
:root[data-theme="dark"] .dia-kpis>div,
:root[data-theme="dark"] .dia-ic{background:rgba(255,255,255,.08) !important}
:root[data-theme="dark"] .dia-ch{border-bottom-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .dia-pie{background:#1c1c1e;border-top-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .dia-caja .chip{border-color:rgba(255,255,255,.18);color:#c9d1d9;background:transparent}
:root[data-theme="dark"] .dia-caja .btn{background:rgba(255,255,255,.08);color:#e6edf3;border-color:rgba(255,255,255,.14)}


/* Mapas de México a ancho completo */
.mapa-container{min-height:clamp(360px, 44vw, 640px) !important;width:100% !important}
.mapa-container svg{width:100% !important;height:auto !important;display:block;margin:0 auto}
#mapa-geo, #mapa-clientes{width:100% !important;max-width:none !important}

/* la tarjeta que los contiene ocupa toda la fila */
.card:has(#mapa-geo), .card:has(#mapa-clientes),
div:has(> .mapa-container){grid-column:1 / -1 !important}
section:has(#mapa-geo), section:has(#mapa-clientes){grid-column:1 / -1 !important}

@media (max-width:700px){
  .mapa-container{min-height:300px !important}
}


.mod-chk{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;
  background:var(--bg2);border:1.5px solid transparent;cursor:pointer;font-size:13px;
  color:var(--tx);transition:.15s}
.mod-chk:hover{border-color:var(--bd)}
.mod-chk.on{border-color:#00836F;background:rgba(0,131,111,.1)}
.mod-chk input{accent-color:#00836F;width:15px;height:15px;cursor:pointer;flex-shrink:0}
:root[data-theme="dark"] .mod-chk{background:rgba(255,255,255,.05)}
:root[data-theme="dark"] .mod-chk.on{background:rgba(0,131,111,.2)}


.mod-sw{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  gap:2px 12px;align-items:center;padding:12px 14px;border-radius:11px;background:var(--bg2);
  border:1.5px solid transparent;cursor:pointer;transition:.18s;user-select:none}
.mod-sw:hover{border-color:var(--bd)}
.mod-sw.on{border-color:#00836F;background:rgba(0,131,111,.08)}
.mod-nom{font-size:13.5px;font-weight:600;color:var(--tx);line-height:1.25}
.mod-est{font-size:10.5px;color:var(--tx2);grid-column:1;letter-spacing:.2px}
.mod-sw.on .mod-est{color:#00836F;font-weight:600}
.mod-sw .sr{position:absolute;opacity:0;width:0;height:0}
.mod-sw .sw{grid-column:2;grid-row:1 / span 2;width:40px;height:23px;border-radius:99px;
  background:var(--bd);position:relative;transition:.2s;flex-shrink:0}
.mod-sw.on .sw{background:#00836F}
.mod-sw .sw-b{position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.mod-sw.on .sw-b{transform:translateX(17px)}
:root[data-theme="dark"] .mod-sw{background:rgba(255,255,255,.05)}
:root[data-theme="dark"] .mod-sw.on{background:rgba(0,131,111,.18)}
:root[data-theme="dark"] .mod-sw .sw{background:rgba(255,255,255,.18)}

/* encabezado de grupo con conteo */
.grp-cab{display:flex;align-items:center;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.grp-cab strong{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2)}
.grp-n{font-size:11px;color:var(--tx2);background:var(--bg2);padding:2px 8px;border-radius:20px}


.er{display:flex;flex-direction:column;gap:2px}
.er-f{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--bd);color:var(--tx)}
.er-f span{font-size:14px}
.er-f b{font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.er-t b{font-size:20px;font-weight:700}
.er-sub{padding:7px 0 7px 18px;border-bottom:0}
.er-sub span,.er-sub b{font-size:13px;color:var(--tx2)}
.er-sub b{font-weight:600}
.er-neg b{color:#e0352b}
.er-r{background:var(--bg2);margin:6px -10px;padding:12px 10px;border-radius:9px;border-bottom:0}
.er-r b{font-size:17px;font-weight:700;color:#2563EB}
.er-final{margin-top:8px;padding:16px 10px;background:rgba(0,131,111,.1);border-radius:11px;border-bottom:0}
.er-final span{font-size:15px;font-weight:600}
.er-final b{font-size:22px;font-weight:700;color:#00836F}
.er-p{font-style:normal;font-size:11px;color:var(--tx2);background:var(--bg2);
  padding:2px 7px;border-radius:20px;margin-left:6px}
:root[data-theme="dark"] .er-final{background:rgba(0,131,111,.2)}
@media(max-width:560px){
  .er-f{flex-direction:column;gap:2px}
  .er-f b{align-self:flex-end}
}


.tema-rapido{display:inline-flex;gap:2px;background:var(--bg2);padding:3px;border-radius:10px;
  margin-right:8px;vertical-align:middle}
.tema-rapido button{width:30px;height:30px;border:0;border-radius:7px;background:transparent;
  color:var(--tx2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;padding:0}
.tema-rapido button svg{width:16px;height:16px}
.tema-rapido button:hover{color:var(--tx)}
.tema-rapido button.on{background:var(--bg);color:#00836F;box-shadow:0 1px 2px rgba(0,0,0,.12)}
:root[data-theme="dark"] .tema-rapido{background:rgba(255,255,255,.07)}
:root[data-theme="dark"] .tema-rapido button.on{background:rgba(255,255,255,.14);color:#5EEAD4}
@media(max-width:600px){.tema-rapido{margin-right:4px;padding:2px}
  .tema-rapido button{width:26px;height:26px}}


.v120-banda{margin:0 0 clamp(12px,2vw,20px)}
.v120-alerta{border:1px solid #d98324;border-left:4px solid #d98324;background:rgba(217,131,36,.08);border-radius:10px;padding:clamp(12px,2vw,18px)}
.v120-tit{font-weight:650;color:#b86a10;margin-bottom:8px}
:root[data-theme="dark"] .v120-tit{color:#f0a94c}
.v120-rango{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:clamp(1.15rem,3vw,1.6rem);font-weight:700}
.v120-piso{color:#c0392b}.v120-techo{color:#1e7a4d}
.v120-sep{font-size:.8rem;font-weight:400;opacity:.65}
.v120-barra{height:6px;border-radius:3px;margin:10px 0 8px;background:linear-gradient(90deg,#c0392b,#d98324,#1e7a4d)}
.v120-nota{font-size:.85rem;line-height:1.5;opacity:.85}
.v120-det{margin-top:10px;font-size:.85rem}
.v120-det summary{cursor:pointer;font-weight:600}
.v120-tabla{width:100%;margin-top:8px;border-collapse:collapse}
.v120-tabla td{padding:4px 0;border-bottom:1px solid rgba(128,128,128,.18)}
.v120-tabla td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.v120-ok{border:1px solid rgba(30,122,77,.35);background:rgba(30,122,77,.08);border-radius:10px;padding:12px 16px}