/* =====================================================================
   Estilos del módulo Reloj checador que usan sus dos pantallas:
   /talento/reloj.html (configuración, Checadas, Festivos) y
   /talento/tablero-asistencia.html (el tablero de los gerentes).
   Incluye etiquetas de estado, barra de filtros con multi-select y todo
   el tablero (KPIs, pastillas de periodo, barras y comparativos).
   ===================================================================== */
/* Etiquetas de la pestaña Checadas (siguen el patrón de .pill del sistema) */
.k-eti{display:inline-block;font-size:12px;font-weight:600;padding:3px 11px;border-radius:999px;}
.k-eti.sin-hor{background:#fef3c7;color:#b45309;}
.k-eti.sin-reg{background:#fee2e2;color:#b91c1c;}
.k-eti.baja{background:var(--surface-2);color:var(--text-soft);}
/* Vacaciones: el día que la nómina justificó. Verde-azul para que no se
   confunda con el ámbar de "sin horario" ni con el rojo de un problema:
   aquí no hay nada que corregir. */
.k-eti.vac{background:#d1fae5;color:#047857;}
:root[data-theme="dark"] .k-eti.sin-hor{background:#3a2e14;color:#e8b45c;}
:root[data-theme="dark"] .k-eti.sin-reg{background:#3a1b20;color:#f0909a;}
:root[data-theme="dark"] .k-eti.vac{background:#0f3a2c;color:#5fd6a5;}
/* Total clicable que despliega fechas/detalle (vacaciones, sin comida, sin
   checar, descuentos, STPS): sin esto se ve como texto plano y nadie sabe
   que se puede abrir. */
.acc{cursor:pointer;color:var(--primary);font-weight:600;}
.acc:hover{text-decoration:underline;}
/* Columnas más angostas en las tablas de este módulo: con varias de ellas
   trayendo 7-9 columnas, el padding de 13px/15px de styles.css (pensado
   para tablas de pocas columnas) sobraba y empujaba el contenido fuera de
   pantallas chicas sin necesidad. */
.tabla th,.tabla td{padding:9px 11px;}
/* Selección masiva (Descuentos: Autorizar/Rechazar a varios de un golpe).
   Mismo patrón que la Bandeja de Helpdesk, para que se vea igual en todo
   el SIG. */
.col-sel{width:30px;text-align:center;}
.barra-sel{display:none;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--primary);border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:13px;flex-wrap:wrap;}
.barra-sel.visible{display:flex;}
/* Atajos de periodo del tablero: pastillas en su propio renglón */
.dash-filters-tablero{align-items:flex-end;row-gap:14px;}
.dash-filters .fg-full{flex:1 1 100%;gap:7px;}
.per-chips{display:flex;gap:7px;flex-wrap:wrap;}
.per-chip{padding:6px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);
  cursor:pointer;font-size:13px;font-weight:600;color:var(--text-soft);font-family:inherit;line-height:1.4;}
.per-chip:hover{border-color:var(--primary);color:var(--primary);}
.per-chip.active{background:var(--primary);border-color:var(--primary);color:#fff;}
/* El rango de fechas sólo aparece con el periodo Personalizado */
.fg-rango{flex-direction:row!important;gap:12px;align-items:flex-end;}

/* Contexto bajo el título del tablero: periodo, alcance y tamaño */
.cab-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.cab-chip{background:var(--surface-2);color:var(--text-soft);font-weight:600;}

/* Análisis por empresa/ubicación en tarjetas: el número es el total de
   retardos y el color lo pone la tasa (alta/media/baja). */
.suc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px;}
.suc-card{--sev:var(--text-soft);background:var(--surface);border:1px solid var(--border);
  border-top:3px solid var(--sev);border-radius:12px;padding:14px 16px 15px;}
/* Color de énfasis por marca: Nissan rojo, Renault amarillo, Changan azul,
   ECOS verde y corporativo negro (blanco en tema oscuro). Los tonos claros
   son los legibles sobre fondo blanco; los oscuros, sobre fondo oscuro. */
.m-nissan{--sev:#dc2626;}
.m-renault{--sev:#b07d02;}
.m-changan{--sev:#1d4ed8;}
.m-ecos{--sev:#15803d;}
.m-corp{--sev:#111827;}
.m-otro{--sev:var(--text-soft);}
:root[data-theme="dark"] .m-nissan{--sev:#f87171;}
:root[data-theme="dark"] .m-renault{--sev:#facc15;}
:root[data-theme="dark"] .m-changan{--sev:#7ba9fb;}
:root[data-theme="dark"] .m-ecos{--sev:#4ade80;}
:root[data-theme="dark"] .m-corp{--sev:#ffffff;}
/* Barras de las gráficas cuando el color lo pone la marca */
.bar-fill.marca{background:var(--sev);}
.suc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.suc-nom{font-size:15px;font-weight:700;line-height:1.25;}
.suc-sub{font-size:12px;color:var(--text-soft);margin-top:2px;}
.suc-num{font-size:28px;font-weight:800;line-height:1;color:var(--sev);font-variant-numeric:tabular-nums;}
.suc-mid{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-top:12px;}
.suc-tasa{font-weight:700;color:var(--sev);}
.suc-barra{height:7px;border-radius:999px;background:var(--surface-2);margin-top:7px;overflow:hidden;}
.suc-barra span{display:block;height:100%;border-radius:999px;background:var(--sev);min-width:3px;}
.suc-pie{font-size:11.5px;color:var(--text-soft);margin-top:10px;padding-top:9px;border-top:1px solid var(--border);}

/* Comparativo contra el periodo anterior, en tarjetas */
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.cmp-card{--tono:var(--text-soft);background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px 13px;text-align:center;}
.cmp-card.sube{--tono:#dc2626;} .cmp-card.baja{--tono:#15803d;}
:root[data-theme="dark"] .cmp-card.sube{--tono:#f87171;}
:root[data-theme="dark"] .cmp-card.baja{--tono:#4ade80;}
.cmp-tit{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);}
.cmp-duo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:10px 0 8px;}
.cmp-eti{font-size:11.5px;color:var(--text-soft);}
.cmp-val{font-size:25px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;}
.cmp-val.antes{color:var(--text-soft);}
.cmp-val.ahora{color:var(--tono);}
.cmp-flecha{color:var(--text-soft);font-size:17px;}
.cmp-nota{font-size:12.5px;font-weight:700;color:var(--tono);}
/* Barras por tipo de retardo: antes y ahora, una sobre otra */
.cmp-tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;}
.cmp-tipo-tit{font-size:12.5px;font-weight:700;margin-bottom:8px;}
.cmp-punto{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--primary);}
.cmp-punto.n1{background:#f59e0b;} .cmp-punto.n2{background:#f97316;} .cmp-punto.n3{background:#dc2626;}
.cmp-bar{display:grid;grid-template-columns:78px 1fr 56px;align-items:center;gap:8px;font-size:12.5px;margin-bottom:5px;}
.cmp-bar-eti{color:var(--text-soft);text-align:right;}
.cmp-bar-val{font-weight:700;font-variant-numeric:tabular-nums;}
.cmp-bar-val b.sube{color:#dc2626;} .cmp-bar-val b.baja{color:#15803d;}

/* Ranking, dona por tipo y días de la semana */
.rank-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:14px;margin-top:14px;}
@media(max-width:900px){.rank-grid{grid-template-columns:1fr;}}
.bar-row.rank{grid-template-columns:minmax(140px,240px) 1fr 42px;}
.bar-row.uni{grid-template-columns:minmax(150px,250px) 1fr 46px 54px;}
.bar-row.uni .bar-label{text-align:left;}
.bar-tasa{font-size:12px;color:var(--text-soft);text-align:right;font-variant-numeric:tabular-nums;}
.bar-row.rank .bar-label{text-align:left;}
.dona-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.dona circle{fill:none;stroke-width:16;}
.dona .dona-arco{transform:rotate(-90deg);transform-origin:70px 70px;}
.dona-num{text-anchor:middle;font-size:24px;font-weight:800;fill:var(--text);}
.dona-txt{text-anchor:middle;font-size:10px;fill:var(--text-soft);text-transform:uppercase;letter-spacing:.05em;}
.dona-leyenda{display:flex;flex-direction:column;gap:8px;font-size:13px;}
.dona-item{display:grid;grid-template-columns:10px 92px auto auto;align-items:center;gap:8px;}
.dona-item i{width:10px;height:10px;border-radius:50%;display:inline-block;}
.dona-item b{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;}
.dona-item .muted{font-size:12px;}
.sem-grid{display:flex;gap:14px;flex-wrap:wrap;}
.sem-dia{text-align:center;min-width:64px;}
.sem-eti{font-size:11.5px;color:var(--text-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.sem-burbuja{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;
  background:var(--surface-2);color:var(--text-soft);}
.sem-burbuja.alta{background:color-mix(in srgb,#dc2626 18%,transparent);color:#b91c1c;}
.sem-burbuja.media{background:color-mix(in srgb,#f59e0b 22%,transparent);color:#b45309;}
.sem-burbuja.baja{background:color-mix(in srgb,#16a34a 18%,transparent);color:#15803d;}
:root[data-theme="dark"] .sem-burbuja.alta{color:#f87171;}
:root[data-theme="dark"] .sem-burbuja.media{color:#fbbf24;}
:root[data-theme="dark"] .sem-burbuja.baja{color:#4ade80;}
.sem-sub{font-size:11px;color:var(--text-soft);margin-top:5px;}

/* ── Tablero ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px;}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;}
.kpi-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);}
.kpi-value{font-size:28px;font-weight:800;line-height:1.15;margin:6px 0 2px;}
.kpi-sub{font-size:12px;color:var(--text-soft);}
.kpi-delta{font-size:12.5px;font-weight:700;}
.kpi-delta.up{color:var(--danger);} .kpi-delta.down{color:var(--success);} .kpi-delta.flat{color:var(--text-soft);}
.kpi-delta.up.bueno{color:var(--success);} .kpi-delta.down.malo{color:var(--danger);}
/* Cada tarjeta con su color: franja superior, etiqueta y número.
   Los tonos claros son los legibles sobre fondo blanco; los oscuros van
   en el bloque de tema oscuro de más abajo. */
.kpi-card{--kc:var(--primary);border-top:3px solid var(--kc);}
.kpi-card .kpi-label{color:var(--kc);}
.kpi-card .kpi-value{color:var(--text);}
.kpi-card.k-plantilla{--kc:#4f46e5;}
.kpi-card.k-dias{--kc:#0891b2;}
.kpi-card.k-retardos{--kc:#dc2626;}
.kpi-card.k-tasa{--kc:#ea580c;}
.kpi-card.k-comida{--kc:#7c3aed;}
.kpi-card.k-sinchecar{--kc:#b45309;}
.kpi-card.k-vacaciones{--kc:#047857;}
:root[data-theme="dark"] .kpi-card.k-plantilla{--kc:#a5b4fc;}
:root[data-theme="dark"] .kpi-card.k-dias{--kc:#67e8f9;}
:root[data-theme="dark"] .kpi-card.k-retardos{--kc:#f87171;}
:root[data-theme="dark"] .kpi-card.k-tasa{--kc:#fdba74;}
:root[data-theme="dark"] .kpi-card.k-comida{--kc:#c4b5fd;}
:root[data-theme="dark"] .kpi-card.k-sinchecar{--kc:#fbbf24;}
:root[data-theme="dark"] .kpi-card.k-vacaciones{--kc:#5fd6a5;}
/* La tarjeta abierta se resalta con su propio color */
.kpi-card.clicable:hover{border-color:var(--kc);}
.kpi-card.abierta{border-color:var(--kc);box-shadow:0 0 0 2px color-mix(in srgb, var(--kc) 25%, transparent);}
/* Tarjetas que despliegan su detalle al hacer clic */
.kpi-card.clicable{cursor:pointer;transition:border-color .12s, box-shadow .12s;}
.kpi-label{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.kpi-flecha{font-size:10px;opacity:.7;}
/* Bloque que despliega una tarjeta (gráficas + tabla) */
.det-bloque{margin-top:16px;padding-top:4px;}
.det-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.det-tit{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.fila-fechas > td{background:var(--surface-2);}
.fechas-cab{font-size:11.5px;color:var(--text-soft);margin-bottom:7px;}
.fechas-lista{display:flex;gap:6px;flex-wrap:wrap;}
/* Desglose dentro de una tarjeta (los tres niveles de retardo) */
.kpi-pie{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--border);font-size:12px;color:var(--text-soft);}
.niv{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.niv i{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--text-soft);}
.niv i.n1{background:#f59e0b;} .niv i.n2{background:#f97316;} .niv i.n3{background:#dc2626;}
.niv b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;}
.dash-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 16px;}
.dash-tab{padding:7px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);cursor:pointer;font-size:13px;font-weight:600;color:var(--text-soft);}
.dash-tab.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.charts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px;}
.bar-row{display:grid;grid-template-columns:150px 1fr 54px;align-items:center;gap:10px;margin-bottom:7px;font-size:12.5px;}
.bar-label{color:var(--text-soft);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-track{background:var(--surface-2);border-radius:6px;height:16px;overflow:hidden;}
.bar-fill{display:block;height:100%;border-radius:6px;background:var(--primary);min-width:2px;}
.bar-fill.n1{background:#f59e0b;} .bar-fill.n2{background:#f97316;} .bar-fill.n3{background:#dc2626;}
.bar-val{font-weight:700;font-variant-numeric:tabular-nums;}
.nivel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;}
.comp-row{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);}
.comp-row:last-child{border-bottom:0;}
.comp-lado{text-align:center;}
.comp-lado b{display:block;font-size:22px;font-weight:800;}
.comp-lado span{font-size:11.5px;color:var(--text-soft);text-transform:uppercase;letter-spacing:.04em;}
.dash-sec{font-size:15px;font-weight:700;margin:0 0 12px;}

/* ── STPS: cumplimiento de jornada semanal ── */
.stps-top{display:grid;grid-template-columns:290px 1fr;gap:14px;align-items:start;}
@media(max-width:900px){.stps-top{grid-template-columns:1fr;}}
.stps-medidor{padding:18px 16px 20px;text-align:center;}
.stps-kpis{margin-bottom:0;}
.stps-kpis .kpi-value{font-size:24px;}
.med-wrap{display:flex;justify-content:center;}
.med-arco{fill:none;stroke-width:15;stroke-linecap:butt;transform:rotate(180deg);transform-origin:110px 110px;}
.med-aguja{stroke:var(--text);stroke-width:4;stroke-linecap:round;}
.med-eje{fill:var(--text);}
.med-num{text-anchor:middle;font-size:30px;font-weight:800;fill:var(--text);}
.stps-leyenda{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft);margin-top:4px;}
.stps-limite{font-size:12.5px;font-weight:700;margin-top:3px;}
.stps-pie{padding:16px 18px;margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;}
@media(max-width:900px){.stps-pie{grid-template-columns:1fr;}}
.stps-nota{font-size:12px;margin:0;line-height:1.5;}

/* Lista de relojes con checkboxes (Asignar horario). Con 17 equipos hace
   falta scroll, y el agrupado por marca es lo que hace la lista legible. */
.chk-list{border:1px solid var(--border);border-radius:10px;max-height:220px;overflow-y:auto;background:var(--surface);}
.chk-grp{position:sticky;top:0;background:var(--surface-2);color:var(--text-soft);font-size:11.5px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;}
/* El `label` de los formularios del SIG va en versalitas; aquí es el nombre
   del reloj, no una etiqueta de campo, así que se lee tal cual se llama. */
.chk-op{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:13.5px;cursor:pointer;
  text-transform:none;letter-spacing:normal;font-weight:500;color:var(--text);}
.chk-op .muted{text-transform:none;letter-spacing:normal;}
.chk-op:hover{background:var(--surface-2);}
.chk-op input{margin:0;}
/* Los relojes de un colaborador, en la tabla de asignados. */
.k-eti.reloj-chip{background:var(--surface-2);color:var(--text);font-weight:500;font-size:11.5px;padding:2px 9px;}

/* Los siete días de descanso, en una fila de casillas. Se ven todos a la
   vez —incluido el domingo— porque la pregunta es "cuáles descansa", y con
   un desplegable había que abrirlo para saber qué estaba elegido. */
.dow-fila{display:flex;flex-wrap:wrap;gap:6px;}
.dow-op{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;
  padding:5px 12px;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;
  text-transform:none;letter-spacing:normal;margin:0;background:var(--surface);}
.dow-op:hover{background:var(--surface-2);}
.dow-op:has(input:checked){border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent);
  color:var(--primary);font-weight:600;}
.dow-op input{margin:0;}

/* El asterisco de las jornadas con la comida a medias: la hora está, pero
   sin descontar la comida, y eso hay que poder verlo en la tabla. */
.k-hr-nota{color:var(--warning);font-weight:700;margin-left:2px;cursor:help;}