:root{--bg:#f4f6f8;--card:#fff;--ink:#17202a;--muted:#6b7280;--border:#d8dee6;--brand:#111827;--danger:#b42318}*{box-sizing:border-box}body{margin:0;font-family:Verdana,Arial,sans-serif;background:var(--bg);color:var(--ink)}.hidden{display:none!important}.loginView{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#111827,#374151)}.loginCard{background:#fff;width:min(430px,100%);padding:28px;border-radius:18px;box-shadow:0 25px 70px rgba(0,0,0,.28)}.loginCard h1{margin:0;letter-spacing:.08em}.loginCard input,.loginCard button{width:100%;margin:8px 0}.topbar{background:#111827;color:#fff;padding:18px 24px;display:flex;justify-content:space-between;gap:18px;align-items:center}.topbar h1{margin:0;font-size:24px}.topbar p{margin:5px 0 0;color:#d1d5db}.topActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}main{max-width:1420px;margin:0 auto;padding:18px}.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:18px;box-shadow:0 8px 18px rgba(17,24,39,.06)}h2{margin:0 0 14px}h3{margin:0 0 10px}input,select,button,.button{font:inherit;border-radius:10px;border:1px solid var(--border);padding:10px 12px;background:#fff;color:var(--ink)}button,.button{background:var(--brand);color:#fff;border-color:var(--brand);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}button.secondary,.button.secondary{background:#fff;color:var(--brand)}button.danger{background:var(--danger);border-color:var(--danger);color:#fff}button:disabled{opacity:.55;cursor:not-allowed}label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700}.gridForm,.filters,.personGrid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px;align-items:end}.wide{grid-column:span 2}.dailyImportExport,.miniActions,.recordsActions,.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0 14px}.importButton{position:relative;overflow:hidden;background:#fff;color:var(--brand);border:1px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer;font-weight:700}.importButton input{position:absolute;inset:0;opacity:0;cursor:pointer}.hint{color:var(--muted);font-size:13px}.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:14px 0}.kpi{background:#f9fafb;border:1px solid var(--border);padding:16px;border-radius:14px}.kpi span{display:block;font-size:26px;font-weight:900}.kpi small{color:var(--muted)}.chartsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.chartBox{border:1px solid var(--border);border-radius:14px;padding:14px;min-width:0}.chartHeader{display:flex;justify-content:space-between;align-items:center;gap:10px}.chartHeader select{width:auto}canvas{width:100%;display:block}.tableHeader{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}.tableWrap{overflow:auto;border:1px solid var(--border);border-radius:12px}table{width:100%;border-collapse:collapse;font-size:13px}th,td{border-bottom:1px solid var(--border);padding:9px;text-align:left;white-space:nowrap}th{background:#f9fafb;position:sticky;top:0}.adminGrid{display:grid;grid-template-columns:1fr;gap:14px}.adminBox{border:1px solid var(--border);border-radius:14px;padding:14px}.searchWrap{position:relative}.searchResults{position:absolute;z-index:20;top:72px;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 15px 35px rgba(0,0,0,.16);max-height:280px;overflow:auto}.searchItem{padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer}.searchItem:hover{background:#f3f4f6}.searchItem strong{display:block}.searchItem small{color:var(--muted)}@media(max-width:900px){.topbar{flex-direction:column;align-items:flex-start}.gridForm,.filters,.personGrid,.kpis,.chartsGrid{grid-template-columns:1fr}.wide{grid-column:span 1}.dailyImportExport>*,.recordsActions>*,.miniActions>*{width:100%}}

.importResult{margin-top:12px;padding:12px;border:1px solid #86efac;border-radius:10px;background:#f0fdf4;color:#14532d;font-size:13px;line-height:1.5;word-break:break-word}
.modalOverlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(17,24,39,.58)}
.modalCard{width:min(480px,100%);padding:24px;border-radius:16px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.3);text-align:center}
.spinner{width:38px;height:38px;margin:0 auto 14px;border:4px solid #d1d5db;border-top-color:#111827;border-radius:50%;animation:ksSpin .9s linear infinite}
@keyframes ksSpin{to{transform:rotate(360deg)}}

.dateFormat {
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
}
.dateNotice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
}


/* V23: calendario interno visible y búsqueda estable */
.dateControl { display:flex; gap:8px; align-items:center; }
.dateControl input { flex:1; min-width:0; }
.calendarButton { flex:0 0 auto; width:42px; padding:9px; font-size:18px; line-height:1; background:#fff; color:#17202a; border:1px solid var(--border); }
.calendarOverlay { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:18px; background:rgba(15,23,42,.48); }
.calendarCard { width:min(410px,100%); background:#fff; border-radius:16px; padding:16px; box-shadow:0 24px 55px rgba(0,0,0,.25); }
.calendarTop { display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:8px; margin-bottom:12px; text-align:center; }
.calendarTop button { padding:7px; font-size:24px; line-height:1; }
.calendarGrid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.calendarWeekday { text-align:center; color:#64748b; font-size:12px; font-weight:700; padding:7px 0; }
.calendarBlank { min-height:38px; }
.calendarDay { min-height:38px; padding:6px; background:#fff; color:#17202a; border:1px solid #e2e8f0; border-radius:9px; }
.calendarDay:hover { background:#e2e8f0; }
.calendarDay.selected { background:#111827; color:#fff; border-color:#111827; }
.calendarDay.today { outline:2px solid #94a3b8; outline-offset:1px; }
.calendarActions { display:flex; justify-content:space-between; gap:10px; margin-top:14px; }
.searchItem { width:100%; text-align:left; background:#fff; color:#17202a; border:none; border-bottom:1px solid var(--border); border-radius:0; }
.searchItem strong { display:block; }
.searchItem small { color:#64748b; }
.importResult { margin-top:12px; padding:12px; border:1px solid #cbd5e1; border-radius:10px; background:#f8fafc; line-height:1.55; }
@media (max-width: 900px) { .dateControl { width:100%; } }


/* V24: estado visible y comprobable de importaciones */
.importStatus {
  position: fixed;
  z-index: 11000;
  right: 18px;
  bottom: 18px;
  width: min(520px, calc(100vw - 36px));
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #eff6ff;
  color: #1e3a8a;
  box-shadow: 0 16px 40px rgba(15,23,42,.22);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}
.importStatus.success { background:#f0fdf4; border-color:#86efac; color:#14532d; }
.importStatus.warning { background:#fffbeb; border-color:#fcd34d; color:#78350f; }
.importStatus.error { background:#fef2f2; border-color:#fca5a5; color:#7f1d1d; }
.importResult.error { border-color:#fca5a5; background:#fef2f2; color:#7f1d1d; }


/* V25: gráficos estables, con alto fijo y desplazamiento interno */
.chartBox {
  overflow: hidden;
}

.chartBoxPie {
  min-height: 500px;
}

.chartScrollHint {
  margin: 2px 0 8px;
  color: #6b7280;
  font-size: 11px;
}

.chartViewport {
  height: 300px;
  max-height: 300px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  border: 1px solid #eef1f5;
  border-radius: 10px;
  background: #ffffff;
  -webkit-overflow-scrolling: touch;
}

.chartViewportPie {
  height: 420px;
  max-height: 420px;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.chartViewport canvas {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
}

@media (max-width: 900px) {
  .chartViewport {
    height: 285px;
    max-height: 285px;
  }

  .chartViewportPie {
    height: 420px;
    max-height: 420px;
  }
}


/* V26: leyenda y colores de estados para barras apiladas y líneas */
.chartLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 11px;
  margin: 7px 0 4px;
  font-size: 11px;
  color: #334155;
}

.chartLegend span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.legendSwatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
}

.legendPresent { background: #16a34a; }
.legendLate { background: #d97706; }
.legendAbsence { background: #dc2626; }
.legendPermit { background: #7c3aed; }
.legendLeave { background: #0284c7; }
.legendVacation { background: #eab308; }


/* V27: color de presencia en torta y vacaciones amarillas en estados */
.chartBoxPie .chartScrollHint {
  margin-bottom: 4px;
}


/* V28: etiquetas y tooltip para segmentos del gráfico Por trabajador */
.chartTooltip {
  position: fixed;
  z-index: 9999;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, .96);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .28);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
}

.chartTooltip strong {
  display: block;
  margin-bottom: 3px;
}

.chartTooltip .chartTooltipState {
  font-weight: 700;
}

#chartWorker {
  cursor: default;
}


/* V29: más espacio para la torta y tooltip ampliado para resumen */
.chartTooltip .chartTooltipMuted {
  color: #cbd5e1;
}

.chartTooltip .chartTooltipSummary {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.18);
}

.chartTooltip .chartTooltipSummary div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.chartTooltip .chartTooltipSummary strong {
  display: inline;
  margin: 0;
}

.chartTooltip .chartTooltipPill {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}


/* V30: títulos de gráficos en mayúsculas y etiquetas ajustables */
.chartHeader h3{ text-transform: uppercase; letter-spacing: .03em; }
.chartHeader span{ text-transform: uppercase; }


/* V32: la leyenda de la torta es HTML y queda fuera del canvas para evitar recortes */
.chartBoxPie {
  min-height: 500px;
}

.chartViewportPie {
  height: 430px;
  max-height: 430px;
  overflow: hidden;
}

.pieContent {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(360px, 1.08fr) minmax(320px, .92fr);
  gap: 26px;
  align-items: center;
  padding: 4px 8px 6px 4px;
}

.pieCanvasWrap {
  min-width: 0;
  height: 410px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pieCanvasWrap canvas {
  display: block;
  max-width: 100%;
}

.pieLegend {
  min-width: 0;
  max-height: 390px;
  overflow: auto;
  padding: 8px 12px 8px 4px;
}

.pieLegendTitle {
  margin: 0 0 10px;
  font-size: 12px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.pieLegendItem {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #eef2f7;
}

.pieLegendSwatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
}

.pieLegendName {
  min-width: 0;
  color: #17202a;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.pieLegendValue {
  text-align: right;
  color: #17202a;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .chartBoxPie { min-height: 650px; }
  .chartViewportPie { height: 590px; max-height: 590px; overflow: auto; }
  .pieContent {
    height: auto;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .pieCanvasWrap { height: 390px; }
  .pieLegend { max-height: 190px; }
}


/* V33: tooltip para la torta */
#chartPie { cursor: default; }
#chartPieTooltip { max-width: 320px; }


/* V34: detalle por estado más compacto para que se vea completo */
.pieContent {
  grid-template-columns: minmax(380px, 1.16fr) minmax(250px, .84fr);
  gap: 18px;
}

.pieLegend {
  max-height: 390px;
  padding: 4px 8px 4px 2px;
}

.pieLegendTitle {
  margin: 0 0 6px;
  font-size: 11px;
}

.pieLegendItem {
  grid-template-columns: 12px minmax(0, 1fr) max-content;
  gap: 8px;
  padding: 6px 0;
}

.pieLegendSwatch {
  width: 12px;
  height: 12px;
}

.pieLegendName {
  font-size: 12px;
  line-height: 1.2;
}

.pieLegendValue {
  font-size: 12px;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .pieLegendTitle { font-size: 11px; }
  .pieLegendName, .pieLegendValue { font-size: 12px; }
}


/* V35: desplaza torta y detalle hacia la izquierda para evitar cortes */
.pieContent {
  grid-template-columns: minmax(360px, 1.10fr) minmax(220px, .78fr);
  gap: 14px;
  padding: 2px 34px 6px 0;
}

.pieCanvasWrap {
  justify-content: flex-start;
  padding-left: 6px;
}

.pieLegend {
  max-width: 330px;
  padding: 2px 2px 2px 0;
}

.pieLegendTitle {
  margin: 0 0 5px;
  font-size: 10px;
}

.pieLegendItem {
  padding: 5px 0;
  gap: 7px;
}

.pieLegendName {
  font-size: 11px;
}

.pieLegendValue {
  font-size: 11px;
}

@media (max-width: 900px) {
  .pieContent {
    padding-right: 0;
  }
  .pieCanvasWrap {
    justify-content: center;
    padding-left: 0;
  }
  .pieLegend {
    max-width: none;
  }
}

#chartPieTooltip { max-width: 360px; }


/* KS ASISTENCIA: filtro de trabajador dentro del Panel de Análisis */
.analysisWorkerFilter {
  position: relative;
  grid-column: span 2;
}

.filterHelp {
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
}

.analysisWorkerInputRow {
  display: flex;
  gap: 7px;
  align-items: center;
}

.analysisWorkerInputRow input {
  min-width: 0;
  flex: 1;
}

.analysisClearButton {
  width: 38px;
  min-width: 38px;
  padding: 8px 10px;
  background: #fff;
  color: #17202a;
  border-color: #cbd5e1;
  font-size: 22px;
  line-height: 1;
}

.analysisClearButton:hover {
  background: #f1f5f9;
}

.analysisWorkerResults {
  top: 100%;
  margin-top: 6px;
  z-index: 60;
}

@media (max-width: 900px) {
  .analysisWorkerFilter { grid-column: span 1; }
}


/* Gráficos completos: indicador de cantidad de categorías mostradas */
.chartScrollHint strong {
  color: #166534;
  font-weight: 700;
}

/* JRVIC VOZ EXPERIMENTAL */
.jrvicVoice{position:fixed;right:22px;bottom:22px;z-index:1000;display:flex;align-items:flex-end;gap:12px}.jrvicMic{width:58px;height:58px;border-radius:50%;border:1px solid rgba(96,165,250,.7);background:linear-gradient(145deg,#0f2747,#1769aa);box-shadow:0 0 0 6px rgba(37,99,235,.12),0 15px 35px rgba(0,0,0,.35);font-size:24px;cursor:pointer}.jrvicMic.listening{animation:jrvicPulse 1s infinite}.jrvicPanel{display:none;width:min(390px,calc(100vw - 108px));padding:16px;border:1px solid rgba(96,165,250,.35);border-radius:16px;background:rgba(10,20,36,.97);box-shadow:0 18px 50px rgba(0,0,0,.5);color:#e5edf7}.jrvicVoice.open .jrvicPanel{display:block}.jrvicHead{display:flex;justify-content:space-between;align-items:center;color:#8ec5ff}.jrvicHead button{border:0;background:transparent;color:#a9b6c7;font-size:22px}.jrvicPanel p{margin:10px 0}.jrvicTranscript{font-size:13px;color:#aebdce;line-height:1.45;padding:10px;border-radius:10px;background:rgba(255,255,255,.04)}.jrvicPreview{display:grid;gap:5px;margin-top:10px;padding:11px;border-left:3px solid #37d67a;background:rgba(55,214,122,.08);font-size:13px}.jrvicPreview strong{color:#70e6a2}.jrvicActions{display:flex;gap:8px;margin-top:10px}.jrvicActions button{flex:1}.jrvicPanel small{display:block;margin-top:10px;color:#8293a8}@keyframes jrvicPulse{50%{box-shadow:0 0 0 15px rgba(37,99,235,.04),0 0 24px rgba(96,165,250,.8)}}@media(max-width:650px){.jrvicVoice{right:12px;bottom:12px}.jrvicVoice.open{left:12px}.jrvicPanel{width:auto;flex:1}.jrvicMic{width:52px;height:52px;flex:0 0 52px}}


/* JRVIC Voz V1.6: escucha continua, silencio y estado visible */
.jrvicMic.session-active{box-shadow:0 0 0 8px rgba(55,214,122,.14),0 0 28px rgba(55,214,122,.45),0 15px 35px rgba(0,0,0,.35);border-color:rgba(112,230,162,.9)}
.jrvicListeningState{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12px;color:#aebdce}
.jrvicListeningDot{width:9px;height:9px;border-radius:50%;background:#64748b;box-shadow:0 0 0 3px rgba(100,116,139,.12)}
.jrvicListeningDot.active{background:#37d67a;box-shadow:0 0 0 4px rgba(55,214,122,.12),0 0 12px rgba(55,214,122,.7)}
.jrvicQuickActions{display:flex;gap:8px;margin-top:10px}.jrvicQuickActions button{flex:1;padding:8px 10px;font-size:12px}
.jrvicQuickActions button.active{border-color:#70e6a2;color:#70e6a2;background:rgba(55,214,122,.08)}

/* Edición segura del maestro de trabajadores · V1.5 */
.adminSubsection{border-top:1px solid var(--border);padding-top:14px;margin-top:14px}
.adminSubsection:first-of-type{border-top:0;padding-top:0;margin-top:0}
.adminSubsection h4{margin:0 0 10px;font-size:14px}
.adminWorkerSearch{max-width:680px;margin:10px 0 14px}
.adminWorkerSearch .searchResults{top:68px}
.editWorkerFields{transition:opacity .18s ease}
.editWorkerFields.disabledSection{opacity:.55}
.editWorkerButtons{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.editWorkerButtons button{flex:1;min-width:145px}
@media(max-width:900px){.adminWorkerSearch{max-width:none}.editWorkerButtons{width:100%}.editWorkerButtons button{width:100%}}


/* JRVIC Conversacional V2.0 */
.jrvicListeningState{flex-wrap:wrap}
.jrvicMode{margin-left:auto;padding:3px 7px;border-radius:999px;background:rgba(245,158,11,.12);color:#fbbf24;font-size:10px;border:1px solid rgba(245,158,11,.25)}
.jrvicMode.active{background:rgba(55,214,122,.1);color:#70e6a2;border-color:rgba(55,214,122,.28)}


/* Resumen confiable de nuevo registro · V2.0.2 */
.jrvicPreviewHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:4px}
.jrvicDraftState{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:.03em}
.jrvicDraftState.ready{color:#86efac;background:rgba(34,197,94,.14);border:1px solid rgba(74,222,128,.35)}
.jrvicDraftState.incomplete{color:#fcd34d;background:rgba(245,158,11,.13);border:1px solid rgba(251,191,36,.32)}
.jrvicPreview span b{color:#dbeafe;font-weight:700}

/* JRVIC CORE V3.0 alpha1 */
.jrvicPanel{width:min(440px,calc(100vw - 108px))}
.jrvicCoreState{display:grid;gap:5px;margin-top:10px;padding:9px 10px;border:1px solid rgba(96,165,250,.18);border-radius:10px;background:rgba(15,39,71,.34)}
.jrvicStateBadge{justify-self:start;display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:rgba(59,130,246,.15);border:1px solid rgba(96,165,250,.3);color:#bfdbfe;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.jrvicStateBadge.ready{background:rgba(34,197,94,.14);border-color:rgba(74,222,128,.32);color:#86efac}
.jrvicStateBadge.warning{background:rgba(245,158,11,.13);border-color:rgba(251,191,36,.32);color:#fcd34d}
.jrvicStateBadge.saved{background:rgba(16,185,129,.15);border-color:rgba(52,211,153,.32);color:#a7f3d0}
.jrvicContextLine{font-size:11px;color:#aebdce;line-height:1.35}
.jrvicCommandTest{display:flex;gap:8px;margin-top:10px}
.jrvicCommandTest input{flex:1;min-width:0;padding:9px 10px;border:1px solid rgba(148,163,184,.28);border-radius:9px;background:rgba(255,255,255,.06);color:#f8fafc}
.jrvicCommandTest input::placeholder{color:#738398}
.jrvicCommandTest button{flex:0 0 auto;padding:9px 13px}
.jrvicHelp{display:grid;gap:5px;margin-top:10px;padding:10px;border-radius:10px;background:rgba(59,130,246,.08);border:1px solid rgba(96,165,250,.22);font-size:12px;color:#b9c8da}
.jrvicHelp strong{color:#bfdbfe;margin-bottom:3px}
.jrvicHelp span{padding-left:10px;position:relative}
.jrvicHelp span::before{content:'•';position:absolute;left:0;color:#60a5fa}
@media(max-width:650px){.jrvicCommandTest{flex-direction:column}.jrvicCommandTest button{width:100%}.jrvicQuickActions{flex-wrap:wrap}.jrvicQuickActions button{min-width:120px}}

/* ==========================================================
   RESUMEN GENERAL Y TABLAS COMPACTAS · JRVIC alpha1.5.2
   ========================================================== */

.systemSummaryCard {
  display: grid;
  gap: 14px;
}

.systemSummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
}

.systemSummaryItem {
  display: grid;
  gap: 5px;
  padding: 18px;
  text-align: center;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #f8fafc;
}

.systemSummaryItem span {
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
}

.systemSummaryItem small {
  font-weight: 600;
}

.recordsViewActions,
.recordsPager {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.recordsPager {
  justify-content: center;
  padding-top: 12px;
}

.recordsPager span {
  min-width: 130px;
  text-align: center;
  font-weight: 700;
}

.recordsViewActions button.isActive {
  outline: 3px solid rgba(37, 99, 235, 0.18);
  font-weight: 800;
}

.recordsScroll {
  max-height: 530px;
  overflow: auto;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
}

.auditScroll {
  max-height: 255px;
  overflow: auto;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
}

.recordsScroll thead th,
.auditScroll thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f8fafc;
  box-shadow: 0 1px 0 #dbe4ee;
}

@media (max-width: 900px) {
  .systemSummaryGrid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}

@media (max-width: 520px) {
  .systemSummaryGrid {
    grid-template-columns: 1fr;
  }

  .recordsScroll {
    max-height: 530px;
  }
}

.recordsDateFilter {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}

.recordsDateFilter input {
  min-width: 155px;
}

.recordsScroll thead tr,
.recordsScroll tbody tr {
  height: 48px;
}

.recordsScroll th,
.recordsScroll td {
  white-space: nowrap;
}

/* ==========================================================
   MAESTROS Y SECCIONES PLEGABLES · JRVIC alpha1.5.4
   ========================================================== */

.recordsActions {
  align-items: center;
}

#recordsDate {
  box-sizing: border-box;
  min-height: 42px;
  min-width: 160px;
  margin: 0;
}

.collapsibleHeader {
  display: flex;
  align-items: center;
  gap: 10px;
}

.collapsibleHeader h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.collapseButton {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
  font-size: 1.25rem;
  line-height: 1;
}

.collapsibleContent {
  margin-top: 16px;
}

.collapsibleSection.isCollapsed {
  padding-bottom: 18px;
}

.countBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #e2e8f0;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
}

.adminBox h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.masterListTitle {
  margin: 18px 0 8px;
}

.masterListScroll {
  overflow: auto;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
}

.masterFiveRows {
  max-height: 265px;
}

.masterThreeRows {
  max-height: 175px;
}

.masterListScroll table {
  margin: 0;
}

.masterListScroll thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f8fafc;
  box-shadow: 0 1px 0 #dbe4ee;
}

.masterListScroll tbody tr {
  height: 43px;
}

.masterListScroll th,
.masterListScroll td {
  white-space: nowrap;
}

@media (max-width: 720px) {
  #recordsDate {
    width: 100%;
  }

  .collapsibleHeader {
    align-items: flex-start;
  }
}

/* ==========================================================
   AJUSTES DE NAVEGACIÓN · JRVIC alpha1.5.5
   ========================================================== */

.recordsDangerRow {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 10px 0 4px;
}

.recordsDangerRow #btnDeleteAll {
  margin-left: auto;
}

.masterSearchRow {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.masterSearchRow input,
.masterSearchRow button {
  min-height: 42px;
  box-sizing: border-box;
}

#mastersContent {
  width: 100%;
}

@media (max-width: 620px) {
  .masterSearchRow {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   ALINEACIÓN Y EDICIÓN DE USUARIOS · JRVIC alpha1.5.6
   ========================================================== */

#recordsContent > .tableHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
}

#recordsContent .recordsActions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}

#recordsContent #recordsSearch {
  flex: 1 1 300px;
  max-width: 520px;
}

#recordsContent #btnDeleteAll {
  margin-left: auto;
}

.recordsDangerRow {
  display: none;
}

.masterSearchRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

#mastersObraSearch {
  flex: 0 1 auto;
  min-width: 18ch;
  max-width: 100%;
}

#btnSearchObra {
  flex: 0 0 auto;
}

.userEditSection {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #dbe4ee;
}

#editUserSelect {
  width: min(100%, 620px);
  min-height: 42px;
  margin-bottom: 12px;
}

.editUserButtons {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 760px) {
  #recordsContent #btnDeleteAll {
    margin-left: 0;
  }

  .masterSearchRow {
    flex-wrap: wrap;
  }
}

/* ==========================================================
   PERIODOS DE ESTADÍSTICAS · JRVIC alpha1.5.7
   ========================================================== */

.analysisPeriodPanel {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #f8fafc;
}

.analysisPeriodHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.analysisPeriodHeading strong {
  letter-spacing: .03em;
}

#analysisPeriodLabel {
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.analysisPeriodButtons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.analysisPeriodButton {
  min-height: 38px;
  padding: 8px 13px;
  white-space: nowrap;
}

.analysisPeriodButton.isActive {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, .15);
}

@media (max-width: 720px) {
  .analysisPeriodButtons {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .analysisPeriodButton {
    width: 100%;
  }
}

/* ==========================================================
   COMPARACIÓN DE PERIODOS · JRVIC alpha1.5.8
   ========================================================== */

.analysisPeriodHelp {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.analysisDatePicker,
.chartDatePicker {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 8px 5px 11px;
  border: 1px solid #d8dee6;
  border-radius: 10px;
  background: #ffffff;
  color: #17202a;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.analysisDatePicker input,
.chartDatePicker input {
  width: 142px;
  min-width: 142px;
  min-height: 30px;
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 12px;
}

.analysisDatePicker.isActive,
.chartDatePicker.isActive {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, .15);
}

.chartPeriodMount {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

.chartPeriodFooter {
  display: grid;
  gap: 9px;
}

.chartPeriodSummary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .025em;
}

.chartPeriodSummary strong {
  color: #334155;
  font-size: 12px;
  letter-spacing: 0;
}

.chartPeriodButtons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chartPeriodButton {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.chartPeriodButton.isActive {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
  box-shadow:
    0 0 0 2px rgba(37, 99, 235, .14);
}

.mastersHeaderCounts {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.masterHeaderBadge {
  gap: 6px;
  min-height: 28px;
  font-size: 0.72rem;
  letter-spacing: .02em;
}

.masterHeaderBadge strong {
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .analysisDatePicker,
  .chartDatePicker {
    width: 100%;
    justify-content: space-between;
  }

  .analysisDatePicker input,
  .chartDatePicker input {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .chartPeriodButtons {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .chartPeriodButton {
    width: 100%;
  }

  .mastersHeaderCounts {
    width: 100%;
    margin-top: 4px;
  }
}

/* ==========================================================
   CONTROLES COMPACTOS POR GRÁFICO · JRVIC alpha1.5.9
   El selector general conserva su tamaño.
   ========================================================== */

.chartPeriodMount {
  margin-top: 8px;
  padding-top: 8px;
}

.chartPeriodFooter {
  gap: 5px;
}

.chartPeriodSummary {
  gap: 6px;
  font-size: 10px;
}

.chartPeriodSummary strong {
  font-size: 11px;
}

/* Todos los controles del gráfico permanecen en una línea. */
.chartPeriodButtons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.chartPeriodButton {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 30px;
  padding: 5px 7px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
}

/* FECHA y el valor seleccionado quedan dentro del mismo recuadro. */
.chartDatePicker {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: auto;
  min-width: 166px;
  min-height: 30px;
  padding: 3px 5px 3px 8px;
  border-radius: 8px;
  overflow: visible;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.chartDatePicker > span {
  display: inline-block;
  flex: 0 0 auto;
  margin: 0;
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.chartDatePicker input[type="date"] {
  display: block;
  flex: 0 0 126px;
  width: 126px;
  min-width: 126px;
  max-width: 126px;
  min-height: 24px;
  margin: 0;
  padding: 2px 3px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #17202a;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}

.chartDatePicker input[type="date"]:focus {
  outline: 1px solid #2563eb;
  outline-offset: 1px;
}

/* Anula el diseño móvil anterior solamente para estos controles. */
@media (max-width: 720px) {
  .chartPeriodButtons {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
  }

  .chartPeriodButton {
    width: auto;
  }

  .chartDatePicker {
    width: auto;
    justify-content: flex-start;
  }

  .chartDatePicker input[type="date"] {
    flex: 0 0 126px;
    width: 126px;
    min-width: 126px;
  }
}


/* ==========================================================
   BOTONES AJUSTADOS POR GRÁFICO · JRVIC alpha1.5.11
   Se conserva PERIODO DEL GRÁFICO.
   ========================================================== */

.chartPeriodMount {
  margin-top: 8px;
  padding-top: 8px;
}

.chartPeriodFooter {
  display: grid;
  gap: 6px;
}

.chartPeriodSummary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 10px;
}

.chartPeriodSummary strong {
  font-size: 11px;
}

.chartPeriodButtons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 2px 0 3px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.chartPeriodButton {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 29px;
  height: 29px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05px;
  white-space: nowrap;
}

.chartPeriodButton.isActive {
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .14);
}

/* Se oculta la palabra FECHA y se gana espacio. */
.chartDatePicker {
  display: inline-flex;
  flex: 0 0 182px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 182px;
  min-width: 182px;
  max-width: 182px;
  min-height: 29px;
  height: 29px;
  margin: 0;
  padding: 2px 6px;
  border-radius: 7px;
  overflow: visible;
  font-size: 10.5px;
  line-height: 1;
  white-space: nowrap;
}

.chartDatePicker > span {
  display: none !important;
}

.chartDatePicker input[type="date"] {
  display: block;
  flex: 0 0 168px;
  width: 168px;
  min-width: 168px;
  max-width: 168px;
  min-height: 23px;
  height: 23px;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #17202a;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 23px;
  letter-spacing: -0.1px;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}

.chartDatePicker input[type="date"]::-webkit-date-and-time-value {
  min-height: 23px;
  margin: 0;
  padding: 0;
  text-align: left;
}

.chartDatePicker input[type="date"]::-webkit-calendar-picker-indicator {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

@media (max-width: 720px) {
  .chartPeriodButtons {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
  }

  .chartPeriodButton {
    width: auto;
    min-height: 29px;
    height: 29px;
  }

  .chartDatePicker {
    flex: 0 0 182px;
    width: 182px;
    min-width: 182px;
    max-width: 182px;
    height: 29px;
  }

  .chartDatePicker input[type="date"] {
    flex: 0 0 168px;
    width: 168px;
    min-width: 168px;
    max-width: 168px;
  }
}


/* ==========================================================
   AJUSTES DE FECHA Y RESUMEN · JRVIC alpha1.5.12
   ========================================================== */

/* Mantener el recuadro completo de fecha, general y por gráfico */
[class*="DatePicker"] {
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 7px;
}

.chartDatePicker,
.analysisDatePicker {
  flex: 0 0 196px;
  width: 196px;
  min-width: 196px;
  max-width: 196px;
  min-height: 29px;
  height: 29px;
  padding: 2px 6px;
}

.chartDatePicker input[type="date"],
.analysisDatePicker input[type="date"] {
  flex: 0 0 182px;
  width: 182px;
  min-width: 182px;
  max-width: 182px;
  min-height: 23px;
  height: 23px;
  padding: 0 2px;
  box-sizing: border-box;
}

/* Ocultar la palabra FECHA y ganar espacio */
.chartDatePicker > span,
.analysisDatePicker > span {
  display: none !important;
}

/* Resumen superior recuperado para % ASISTENCIA */
.chartTopSummary {
  margin: 4px 0 10px;
  color: #526079;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}

.chartTopSummary.hidden {
  display: none;
}

/* ==========================================================
   AJUSTE FINAL DE GRÁFICOS Y FECHAS · JRVIC alpha1.5.13
   ========================================================== */

/* Diez trabajadores visibles; el resto mantiene scroll. */
#chartWorkerViewport {
  height: 458px;
  max-height: 458px;
}

/*
 * El selector ocupa exactamente el espacio restante.
 * Así se ve completo el borde derecho sin salir del gráfico.
 */
.chartDatePicker {
  display: inline-flex;
  flex: 1 1 150px;
  width: auto;
  min-width: 150px;
  max-width: none;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #cbd5e1 !important;
  border-radius: 7px;
  padding: 2px 7px;
}

.chartDatePicker > span {
  display: none !important;
}

.chartDatePicker input[type="date"] {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 130px;
  max-width: none;
  box-sizing: border-box;
  border: 0;
  background: transparent;
}

/* Mismo comportamiento para el selector general. */
.analysisDatePicker {
  display: inline-flex;
  flex: 0 1 205px;
  width: 205px;
  min-width: 180px;
  max-width: 205px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #cbd5e1 !important;
  border-radius: 7px;
  padding: 4px 7px;
}

.analysisDatePicker > span {
  display: none !important;
}

.analysisDatePicker input[type="date"] {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  border: 0;
  background: transparent;
}

/* Resumen recuperado en la parte superior de la torta. */
.chartTopSummary {
  margin: 4px 0 10px;
  padding: 8px 10px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 720px) {
  #chartWorkerViewport {
    height: 458px;
    max-height: 458px;
  }

  .chartDatePicker {
    flex: 1 1 150px;
    width: auto;
    min-width: 150px;
    max-width: none;
  }

  .analysisDatePicker {
    flex: 1 1 180px;
    width: auto;
    max-width: none;
  }
}


/* ==========================================================
   AJUSTE VISUAL DE GRÁFICOS · JRVIC alpha1.5.14
   ========================================================== */

.chartBoxPie,
.chartBoxWorker {
  display: flex;
  flex-direction: column;
}

.chartBoxPie .chartPeriodMount,
.chartBoxWorker .chartPeriodMount {
  margin-top: auto;
}

.pieStatusLegend {
  margin: 3px 0 7px;
}

#chartWorkerViewport {
  height: 420px;
  max-height: 420px;
  overflow-y: auto;
}


/* ==========================================================
   RANGOS DE FECHAS · JRVIC alpha1.5.15
   ========================================================== */

.analysisRangePicker,
.chartRangePicker {
  display: none;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #f8fafc;
}

.analysisRangePicker {
  flex: 1 0 100%;
}

.analysisRangePicker.isActive,
.chartRangePicker.isActive {
  display: grid;
}

.rangeField {
  display: grid;
  gap: 3px;
  min-width: 0;
  margin: 0;
  color: #526079;
  font-size: 10px;
  font-weight: 800;
}

.rangeField input[type="date"] {
  width: 100%;
  min-width: 0;
  height: 31px;
  padding: 3px 7px;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  color: #17202a;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.chartRangePicker {
  flex: 1 0 100%;
}

@media (max-width: 720px) {
  .analysisRangePicker,
  .chartRangePicker {
    grid-template-columns: 1fr;
  }
}