/* ============================================================
   Sistema de diseño — Reportes Reloj Control
   Basado en mockup-reportes-relojcontrol.html
   ============================================================ */

/* Variables */
.rrc-page {
  --blue-900: #0a3d7a;
  --blue-800: #0652a6;
  --blue-700: #0b6ec7;
  --blue-600: #0b78d1;
  --blue-500: #2a93e8;
  --blue-100: #e8f2fc;
  --blue-50: #f0f7ff;
  --surface: #ffffff;
  --bg: #f4f7fc;
  --border: #dde6f0;
  --text-primary: #0f1f3d;
  --text-secondary: #4a6080;
  --text-muted: #8099b8;
  --green: #16a34a;
  --green-bg: #dcfce7;
  --orange: #d97706;
  --orange-bg: #fef3c7;
  --red: #dc2626;
  --red-bg: #fee2e2;
  --purple: #7c3aed;
  --purple-bg: #ede9fe;
  --teal: #0891b2;
  --teal-bg: #cffafe;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 2px 12px rgba(6, 82, 166, .08);
  --shadow-lg: 0 8px 32px rgba(6, 82, 166, .14);

  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  font-size: 14px;
  padding-bottom: 2rem;
}

/* ---- HEADER ---- */
.rrc-header {
  background: linear-gradient(135deg, #0a3d7a, #0b6ec7);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(10, 61, 122, .3);
  border-radius: var(--radius);
  margin-bottom: 0;
}

.rrc-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rrc-header__icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, .15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}

.rrc-header__icon svg {
  width: 24px;
  height: 24px;
  color: #fff;
}

.rrc-header__eyebrow {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, .6);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rrc-header__title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-top: 2px;
}

.rrc-header__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---- Botones de header ---- */
.rrc-btn {
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all .2s;
  line-height: 1;
  text-decoration: none;
}

.rrc-btn--white {
  background: #fff;
  color: var(--blue-800);
}

.rrc-btn--white:hover:not(:disabled) {
  background: var(--blue-50);
}

.rrc-btn--ghost {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
}

.rrc-btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, .2);
}

.rrc-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ---- NAV TABS ---- */
.rrc-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 16px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: var(--shadow);
}

.rrc-nav::-webkit-scrollbar {
  display: none;
}

.rrc-nav__item {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  background: none;
  transition: all .2s;
}

.rrc-nav__item:hover {
  color: var(--blue-700);
  background: var(--blue-50);
}

.rrc-nav__item--active {
  color: var(--blue-700);
  border-bottom-color: var(--blue-600);
  font-weight: 600;
}

/* ---- CONTENIDO PRINCIPAL ---- */
.rrc-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- FILTER BAR ---- */
.rrc-filter-bar {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.rrc-filter-bar__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}

.rrc-filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.rrc-filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rrc-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.rrc-input,
.rrc-select {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg);
  font-family: inherit;
  min-width: 140px;
  outline: none;
  transition: border-color .2s;
  box-shadow: none;
}

.rrc-input:focus,
.rrc-select:focus {
  border-color: var(--blue-500);
  box-shadow: none;
}

.rrc-input[readonly],
.rrc-input:read-only {
  background: #f0f4f8;
  color: var(--text-muted);
  cursor: not-allowed;
}

.rrc-input--wide {
  min-width: 220px;
}

.rrc-btn--filter-primary {
  height: 36px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: var(--blue-700);
  color: #fff;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rrc-btn--filter-primary:hover:not(:disabled) {
  background: var(--blue-800);
}

.rrc-btn--filter-primary:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.rrc-btn--filter-secondary {
  height: 36px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--blue-100);
  background: var(--blue-50);
  color: var(--blue-700);
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rrc-btn--filter-secondary:hover:not(:disabled) {
  background: var(--blue-100);
}

.rrc-btn--filter-secondary:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ---- NOTICE / ALERT ---- */
.rrc-notice {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-800);
}

/* ---- KPI GRID ---- */
.rrc-kpi-grid {
  display: grid;
  gap: 16px;
}

.rrc-kpi-grid--4 { grid-template-columns: repeat(4, 1fr); }
.rrc-kpi-grid--5 { grid-template-columns: repeat(5, 1fr); }
.rrc-kpi-grid--6 { grid-template-columns: repeat(6, 1fr); }

.rrc-kpi-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  border-top: 3px solid var(--blue-600);
}

.rrc-kpi-card--blue  { border-top-color: var(--blue-600); }
.rrc-kpi-card--green { border-top-color: var(--green); }
.rrc-kpi-card--orange{ border-top-color: var(--orange); }
.rrc-kpi-card--red   { border-top-color: var(--red); }
.rrc-kpi-card--purple{ border-top-color: var(--purple); }
.rrc-kpi-card--teal  { border-top-color: var(--teal); }
.rrc-kpi-card--muted { border-top-color: var(--border); }

.rrc-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.rrc-kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.rrc-kpi-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* ---- TABLE CARD ---- */
.rrc-table-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}

.rrc-table-card__header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rrc-table-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.rrc-table-card__count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
}

.rrc-table-wrap {
  overflow-x: auto;
}

/* ---- PILLS ---- */
.rrc-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.rrc-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.rrc-pill--green  { background: var(--green-bg);  color: var(--green); }
.rrc-pill--orange { background: var(--orange-bg); color: var(--orange); }
.rrc-pill--red    { background: var(--red-bg);    color: var(--red); }
.rrc-pill--purple { background: var(--purple-bg); color: var(--purple); }
.rrc-pill--teal   { background: var(--teal-bg);   color: var(--teal); }
.rrc-pill--gray   { background: #f1f5f9;           color: #64748b; }
.rrc-pill--blue   { background: var(--blue-100);  color: var(--blue-800); }

/* ---- MONOSPACE ---- */
.rrc-mono {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
}

/* ---- PORTAL CARD (solo portal-trabajador) ---- */
.rrc-portal-card {
  background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
  border-radius: var(--radius);
  padding: 24px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: var(--shadow-lg);
}

.rrc-portal-card--green {
  background: linear-gradient(135deg, #0f5132, #198754);
}

.rrc-portal-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}

.rrc-portal-name { font-size: 20px; font-weight: 700; }
.rrc-portal-sub  { font-size: 13px; opacity: .75; margin-top: 3px; }

.rrc-portal-meta { display: flex; gap: 20px; margin-top: 12px; }
.rrc-portal-meta-item { font-size: 12px; opacity: .8; }
.rrc-portal-meta-item strong { display: block; font-size: 14px; opacity: 1; }

/* ---- SECTION LABEL ---- */
.rrc-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ---- DETAIL PANEL ---- */
.rrc-detail-panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue-600);
}

.rrc-detail-panel__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.rrc-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.rrc-detail-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.rrc-detail-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 3px;
}

/* ---- EMPTY STATE ---- */
.rrc-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ---- CHECKBOX GROUP ---- */
.rrc-checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
}

.rrc-checkbox-group label {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.rrc-checkbox-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--blue-600);
}

/* ---- TABLA (deep scoped para TablaConPaginador) ---- */
:deep(table) {
  width: 100%;
  border-collapse: collapse;
}

:deep(th) {
  padding: 11px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

:deep(td) {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-primary);
  vertical-align: middle;
}

:deep(tr:last-child td) {
  border-bottom: none;
}

:deep(tr:hover td) {
  background: var(--blue-50);
}

/* Row states */
:deep(.rrc-row--complete td)    { background: rgba(220, 252, 231, .35) !important; }
:deep(.rrc-row--warning td)     { background: rgba(254, 243, 199, .35) !important; }
:deep(.rrc-row--danger td)      { background: rgba(254, 226, 226, .35) !important; }
:deep(.rrc-row--empty td)       { background: rgba(241, 245, 249, .7) !important; }
:deep(.rrc-row--incidencias td) { background: rgba(237, 233, 254, .35) !important; }

/* ---- CHARTS ---- */
.rrc-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rrc-chart-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.rrc-chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

/* Donut */
.rrc-donut-wrap { display: flex; align-items: center; gap: 24px; }
.rrc-donut { width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; }
.rrc-donut-legend { display: flex; flex-direction: column; gap: 8px; }
.rrc-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.rrc-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Bar chart */
.rrc-bar-chart { display: flex; flex-direction: column; gap: 10px; }
.rrc-bar-row { display: flex; align-items: center; gap: 10px; }
.rrc-bar-label { width: 110px; font-size: 12px; color: var(--text-secondary); text-align: right; flex-shrink: 0; }
.rrc-bar-track { flex: 1; height: 20px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.rrc-bar-fill { height: 100%; border-radius: 4px; display: flex; align-items: center; padding-left: 8px; }
.rrc-bar-val { font-size: 11px; font-weight: 600; color: #fff; }

/* ---- AVATAR / WORKER CELL ---- */
.rrc-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.rrc-worker-cell { display: flex; align-items: center; gap: 10px; }
.rrc-worker-name { font-weight: 600; }
.rrc-worker-rut  { font-size: 11px; color: var(--text-muted); }

/* ---- DOTS ---- */
.rrc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rrc-dot--green  { background: var(--green); }
.rrc-dot--orange { background: var(--orange); }
.rrc-dot--red    { background: var(--red); }
.rrc-dot--gray   { background: #cbd5e1; }

/* ---- RESPONSIVO ---- */
@media (max-width: 1199px) {
  .rrc-kpi-grid--4,
  .rrc-kpi-grid--6 { grid-template-columns: repeat(3, 1fr); }
  .rrc-kpi-grid--5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .rrc-kpi-grid--4,
  .rrc-kpi-grid--5,
  .rrc-kpi-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .rrc-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rrc-detail-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .rrc-charts-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .rrc-kpi-grid--4,
  .rrc-kpi-grid--5,
  .rrc-kpi-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .rrc-kpi-value { font-size: 22px; }
}

/* ============================================================
   CLASES SIN PREFIJO (usadas en mockups HTML standalone)
   Las variables están en .rrc-page; aquí se duplican en :root
   para que funcionen fuera del scope de .rrc-page.
   ============================================================ */

:root {
  --blue-900: #0a3d7a;
  --blue-800: #0652a6;
  --blue-700: #0b6ec7;
  --blue-600: #0b78d1;
  --blue-500: #2a93e8;
  --blue-100: #e8f2fc;
  --blue-50:  #f0f7ff;
  --surface:  #ffffff;
  --bg:       #f4f7fc;
  --border:   #dde6f0;
  --text-primary:   #0f1f3d;
  --text-secondary: #4a6080;
  --text-muted:     #8099b8;
  --green:     #16a34a;
  --green-bg:  #dcfce7;
  --orange:    #d97706;
  --orange-bg: #fef3c7;
  --red:       #dc2626;
  --red-bg:    #fee2e2;
  --purple:    #7c3aed;
  --purple-bg: #ede9fe;
  --teal:      #0891b2;
  --teal-bg:   #cffafe;
  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 2px 12px rgba(6, 82, 166, .08);
  --shadow-lg: 0 8px 32px rgba(6, 82, 166, .14);
}

/* FILTER BAR (sin prefijo) */
.filter-bar {
  background: var(--surface); border-radius: var(--radius);
  padding: 20px 24px; box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.filter-bar__title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.filter-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.filter-input, .filter-select {
  height: 36px; padding: 0 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; color: var(--text-primary);
  background: var(--bg); font-family: 'Inter', sans-serif;
  min-width: 140px; outline: none; transition: border-color .2s;
}
.filter-input:focus, .filter-select:focus { border-color: var(--blue-500); }
.filter-input[readonly] { background: #f0f4f8; color: var(--text-muted); cursor: not-allowed; }
.filter-search { min-width: 220px; }
.btn-filter {
  height: 36px; padding: 0 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; transition: all .2s;
}
.btn-filter--primary { background: var(--blue-700); color: #fff; }
.btn-filter--primary:hover { background: var(--blue-800); }
.btn-filter--secondary { background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); }
.btn-filter--secondary:hover { background: var(--blue-100); }

/* NOTICE (sin prefijo) */
.notice {
  padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px;
  display: flex; align-items: flex-start; gap: 10px;
}
.notice--blue { background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-800); }

/* NAV TABS (sin prefijo) */
.report-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky; top: 84px; z-index: 90;
  box-shadow: var(--shadow);
}
.report-nav::-webkit-scrollbar { display: none; }
.report-nav__item {
  padding: 14px 18px; font-size: 13px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: all .2s;
  background: none; border-top: none; border-left: none; border-right: none;
}
.report-nav__item:hover { color: var(--blue-700); background: var(--blue-50); }
.report-nav__item--active { color: var(--blue-700); border-bottom-color: var(--blue-600); font-weight: 600; }

/* VIEW SECTION (sin prefijo) */
.view-section {
  display: flex; flex-direction: column; gap: 20px;
  padding: 24px 32px; max-width: 1400px; margin: 0 auto;
}

/* KPI ROW (sin prefijo) */
.kpi-row { display: grid; gap: 16px; }
.kpi-row--4 { grid-template-columns: repeat(4, 1fr); }
.kpi-row--6 { grid-template-columns: repeat(6, 1fr); }
.kpi-row-portal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 20px 24px; box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.kpi-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi-value { font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; color: var(--text-muted); }
.kpi-card--blue   { border-top: 3px solid var(--blue-600); }
.kpi-card--green  { border-top: 3px solid var(--green); }
.kpi-card--orange { border-top: 3px solid var(--orange); }
.kpi-card--red    { border-top: 3px solid var(--red); }
.kpi-card--purple { border-top: 3px solid var(--purple); }
.kpi-card--teal   { border-top: 3px solid var(--teal); }

/* TABLE (sin prefijo) */
.table-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--border); overflow: hidden;
}
.table-card__header {
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.table-card__title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.table-card__count { font-size: 12px; color: var(--text-muted); background: var(--bg); padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); }
.table-wrap { overflow-x: auto; }

/* AVATAR / WORKER CELL (sin prefijo) */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.worker-cell { display: flex; align-items: center; gap: 10px; }
.worker-name { font-weight: 600; }
.worker-rut  { font-size: 11px; color: var(--text-muted); }

/* PILLS (sin prefijo) */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.pill--green  { background: var(--green-bg);  color: var(--green); }
.pill--orange { background: var(--orange-bg); color: var(--orange); }
.pill--red    { background: var(--red-bg);    color: var(--red); }
.pill--purple { background: var(--purple-bg); color: var(--purple); }
.pill--teal   { background: var(--teal-bg);   color: var(--teal); }
.pill--gray   { background: #f1f5f9;           color: #64748b; }
.pill--blue   { background: var(--blue-100);  color: var(--blue-800); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* MONO (sin prefijo) */
.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; }

/* DOTS (sin prefijo) */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--green  { background: var(--green); }
.dot--orange { background: var(--orange); }
.dot--red    { background: var(--red); }
.dot--gray   { background: #cbd5e1; }

/* CHARTS ROW (sin prefijo) */
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 20px 24px; box-shadow: var(--shadow); border: 1px solid var(--border);
}
.chart-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }

/* DONUT (sin prefijo) */
.donut-wrap { display: flex; align-items: center; gap: 24px; }
.donut { width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* BAR CHART (sin prefijo) */
.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-label { width: 110px; font-size: 12px; color: var(--text-secondary); text-align: right; flex-shrink: 0; }
.bar-track { flex: 1; height: 20px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; display: flex; align-items: center; padding-left: 8px; }
.bar-val { font-size: 11px; font-weight: 600; color: #fff; }

/* DETAIL PANEL (sin prefijo) */
.detail-panel {
  background: var(--surface); border-radius: var(--radius);
  padding: 20px 24px; box-shadow: var(--shadow); border: 1px solid var(--border);
  border-left: 4px solid var(--blue-600);
}
.detail-panel__title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; }
.detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.detail-item__label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.detail-item__value { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-top: 3px; }

/* PORTAL CARD (sin prefijo) */
.portal-card {
  background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
  border-radius: var(--radius); padding: 24px; color: #fff;
  display: flex; align-items: center; gap: 24px;
  box-shadow: var(--shadow-lg);
}
.portal-avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; flex-shrink: 0; }
.portal-name { font-size: 20px; font-weight: 700; }
.portal-sub  { font-size: 13px; opacity: .75; margin-top: 3px; }
.portal-meta { display: flex; gap: 20px; margin-top: 12px; }
.portal-meta-item { font-size: 12px; opacity: .8; }
.portal-meta-item strong { display: block; font-size: 14px; opacity: 1; }

/* CHECKBOX GROUP (sin prefijo) */
.checkbox-group { display: flex; align-items: center; gap: 8px; }
.checkbox-group label { font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.checkbox-group input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--blue-600); }

/* RESPONSIVE (sin prefijo) */
@media (max-width: 900px) {
  .kpi-row--4, .kpi-row--6, .kpi-row-portal { grid-template-columns: repeat(2,1fr); }
  .charts-row { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: repeat(2,1fr); }
  .view-section { padding: 16px; }
  .report-nav { padding: 0 16px; }
}