/* ── RHH Module Styles ────────────────────────────────────────────────────── */
:root {
  --rhh-sidebar: #064e3b;
  --rhh-sidebar-hover: rgba(255,255,255,0.12);
  --rhh-accent: #059669;
  --rhh-accent-light: #d1fae5;
  --rhh-accent-dark: #047857;
}

/* Override sidebar color for RHH */
.rhh-layout .sidebar {
  background: var(--rhh-sidebar);
}

.rhh-layout .brand {
  color: #d1fae5;
}

.rhh-layout .nav a {
  color: #a7f3d0;
}

.rhh-layout .nav a.active,
.rhh-layout .nav a:hover {
  background: var(--rhh-sidebar-hover);
  color: #fff;
}

.rhh-layout .sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 8px;
}

.rhh-layout .sidebar-footer a {
  display: block;
  color: #6ee7b7;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
}

.rhh-layout .sidebar-footer a:hover {
  background: var(--rhh-sidebar-hover);
  color: #fff;
}

/* Calendar styles */
.cal-week-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cal-week-table th {
  background: #f0fdf4;
  padding: 8px 6px;
  border-bottom: 2px solid #d1fae5;
  text-align: center;
  font-size: 12px;
}

.cal-week-table td {
  padding: 6px;
  border: 1px solid var(--line);
  vertical-align: top;
  min-width: 90px;
}

.cal-week-table tr:hover td {
  background: #f9fafb;
}

.cell-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.cell-asignado { background: #d1fae5; color: #065f46; }
.cell-falta { background: #fee2e2; color: #991b1b; }
.cell-vacacion { background: #fef9c3; color: #854d0e; }
.cell-permiso { background: #fef9c3; color: #854d0e; }
.cell-incapacidad { background: #ede9fe; color: #5b21b6; }
.cell-tiempo_extra { background: #dbeafe; color: #1e40af; }
.cell-no_laboral { background: #f3f4f6; color: #9ca3af; }

/* Month calendar */
.month-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.month-cal-header {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  padding: 4px;
}

.month-cal-day {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  min-height: 64px;
  font-size: 12px;
  position: relative;
}

.month-cal-day.today {
  border-color: var(--rhh-accent);
  background: #f0fdf4;
}

.month-cal-day.empty {
  background: #f9fafb;
  border-color: transparent;
}

.month-cal-day .day-num {
  font-weight: 700;
  color: var(--text);
  font-size: 13px;
}

.month-cal-day.today .day-num {
  color: var(--rhh-accent);
}

.month-cal-day .day-chips {
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* KPI card accent */
.kpi-rhh {
  border-left: 4px solid var(--rhh-accent);
}

/* Status pills */
.pill.aprobada { background: #d1fae5; color: #065f46; }
.pill.pendiente { background: #fef9c3; color: #854d0e; }
.pill.rechazada { background: #fee2e2; color: #991b1b; }
.pill.active { background: #d1fae5; color: #065f46; }
.pill.inactive { background: #e5e7eb; color: #374151; }

/* Nav week controls */
.week-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.week-nav button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-weight: 700;
}

.week-nav button:hover {
  background: #f0fdf4;
  border-color: var(--rhh-accent);
}

.week-label {
  font-weight: 700;
  color: var(--text);
  min-width: 200px;
  text-align: center;
}

/* Incidence type pills */
.type-falta { background: #fee2e2; color: #991b1b; }
.type-vacacion { background: #dbeafe; color: #1e40af; }
.type-permiso { background: #fef9c3; color: #854d0e; }
.type-incapacidad { background: #ede9fe; color: #5b21b6; }
.type-tiempo_extra { background: #d1fae5; color: #065f46; }
.type-cumpleanos { background: #fce7f3; color: #9d174d; }

/* Tabs */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 18px;
}

.tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: -2px;
  border-radius: 0;
}

.tab-btn.active {
  color: var(--rhh-accent);
  border-bottom-color: var(--rhh-accent);
}

/* Filter bar */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}

.filter-bar label {
  margin: 0 0 4px;
  font-size: 12px;
}

.filter-bar select,
.filter-bar input {
  width: auto;
  min-width: 140px;
  padding: 8px 10px;
  font-size: 13px;
}

/* Shift color dot */
.shift-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

/* Coverage indicator */
.coverage-bar {
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  overflow: hidden;
  margin-top: 4px;
}

.coverage-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--rhh-accent);
  transition: width 0.3s;
}

/* Form sections */
.form-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.form-section h3 {
  color: var(--rhh-accent);
  margin-bottom: 16px;
  font-size: 15px;
}

/* Prenomina table */
.prenomina-table th {
  background: #f0fdf4;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}

.empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

/* Toast notifications */
#rhh-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background: #1f2937;
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  animation: slideIn 0.2s ease;
  max-width: 320px;
}

.toast.success { background: #065f46; }
.toast.error { background: #991b1b; }
.toast.warning { background: #854d0e; }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Loading */
.loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--muted);
  font-size: 15px;
}

/* Responsive tweaks */
@media (max-width: 1000px) {
  .grid[style*="repeat(6"] { grid-template-columns: repeat(3, 1fr) !important; }
  .grid[style*="1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .cal-week-table { font-size: 11px; }
  .month-cal { grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .month-cal-day { min-height: 44px; padding: 3px; }
  .filter-bar { flex-direction: column; }
  .filter-bar select, .filter-bar input { min-width: unset; width: 100%; }
  .grid[style*="repeat(6"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Lista de asistencia semanal ─────────────────────────────────────────────── */
.attendance-wrap { width: 100%; overflow-x: auto; }
.attendance-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.att-week-nav { display:flex; align-items:center; gap:8px; }
.att-week-label { font-size:15px; font-weight:800; min-width:240px; text-align:center; color:var(--text); }

.attendance-table { border-collapse: collapse; min-width: 1200px; font-size: 12px; }
.attendance-table th {
  background: #f8fafc; font-weight:700; font-size:11px; color:#64748b;
  padding:7px 6px; border:1px solid #e2e8f0; white-space:nowrap;
  position:sticky; top:0; z-index:10;
}
.attendance-table td { padding:5px 6px; border:1px solid #e2e8f0; vertical-align:middle; }

/* Cabecera de día festivo */
.att-day-holiday-head { background:#e0e7ff !important; color:#3730a3 !important; }

/* Columnas sticky */
.col-name {
  position:sticky; left:0; background:#fff; z-index:5;
  min-width:180px; max-width:200px; font-weight:600;
  box-shadow: 2px 0 4px rgba(0,0,0,0.04);
}
.col-area { position:sticky; left:180px; background:#fff; z-index:5; min-width:85px; }
.col-project { position:sticky; left:265px; background:#fff; z-index:5; min-width:80px; }
.col-position { position:sticky; left:345px; background:#fff; z-index:5; min-width:120px; cursor:pointer; }
.col-shift { position:sticky; left:465px; background:#fff; z-index:5; min-width:45px; text-align:center; }

/* Cabeceras sticky de filas fijas */
.attendance-table th.col-name,
.attendance-table th.col-area,
.attendance-table th.col-project,
.attendance-table th.col-position,
.attendance-table th.col-shift { z-index:15; }

/* Separador de turno */
.shift-separator td {
  background: var(--shift-color, #f1f5f9);
  font-weight:800; font-size:12px; color:#fff;
  padding:6px 10px; letter-spacing:.5px;
}
.shift-separator td.col-name,
.shift-separator td.col-area,
.shift-separator td.col-project,
.shift-separator td.col-position,
.shift-separator td.col-shift {
  background: var(--shift-color, #f1f5f9) !important;
}

/* Celdas de asistencia */
.att-cell {
  min-width:90px; text-align:center; cursor:pointer; border-radius:4px;
  transition: filter .1s;
  padding: 4px 3px;
  font-size:11px; font-weight:600;
  position: relative;
  white-space: nowrap;
}
.att-cell:hover { filter: brightness(.92); }
.att-cell.no-editable { cursor: default; }
.att-cell.no-editable:hover { filter: none; }

/* Celdas TE */
.te-cell {
  min-width:50px; text-align:center; cursor:pointer;
  font-size:12px; font-weight:700;
  color: #16a34a;
}
.te-cell.te-negative { color: #dc2626; }
.te-cell:hover { background: #f0fdf4; }
.te-cell input {
  width:44px; text-align:center; border:1px solid #059669; border-radius:4px;
  font-size:12px; padding:2px 4px;
}

/* Dropdown flotante */
.status-dropdown {
  position:fixed; z-index:9999; background:#fff;
  border:1px solid #e2e8f0; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  padding:4px; min-width:160px;
}
.status-dropdown-item {
  padding:7px 12px; border-radius:7px; cursor:pointer;
  font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px;
}
.status-dropdown-item:hover { background:#f8fafc; }

/* Warning sin puesto */
.no-position-warn { background:#fef9c3 !important; color:#92400e !important; }

/* Columnas de totales */
.col-total { min-width:80px; text-align:center; font-size:11px; }
.col-total.hidden { display:none; }

/* Modal genérico (evaluaciones, confirmaciones, etc.) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  box-sizing: border-box;
}
.modal {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  width: 100%;
  box-sizing: border-box;
}
.modal-header { padding-bottom: 12px; }
.modal-body   { padding: 16px 0; }
.modal-footer { display:flex; gap:10px; justify-content:flex-end; padding-top:12px; }

/* Modal TE */
.te-modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.4); z-index:999;
  place-items:center;
}
.te-modal-overlay.open { display:grid; }
.te-modal-box {
  background:#fff; border-radius:16px; padding:24px;
  width:min(380px,95vw);
  box-shadow:0 16px 48px rgba(0,0,0,.2);
}
.te-modal-box h3 { margin:0 0 16px; color:#064e3b; }
.te-modal-box label { display:block; font-size:12px; font-weight:700; margin:10px 0 3px; }
.te-modal-box input, .te-modal-box textarea { width:100%; }
.te-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }

/* Dropdown puestos */
.position-dropdown {
  position:fixed; z-index:9999; background:#fff;
  border:1px solid #e2e8f0; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  padding:6px; min-width:200px; max-height:280px; overflow-y:auto;
}
.position-dropdown-item {
  padding:6px 10px; border-radius:6px; cursor:pointer;
  font-size:12px; display:flex; align-items:center; gap:6px;
}
.position-dropdown-item:hover { background:#f0fdf4; }

/* Toggle totales btn */
.btn-toggle-totals {
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:6px 12px; cursor:pointer; font-size:12px; font-weight:700;
  color:var(--muted);
}
.btn-toggle-totals:hover { background:#f0fdf4; border-color:var(--rhh-accent); color:var(--rhh-accent); }

/* Festivo btn */
.btn-add-holiday {
  background:#e0e7ff; border:1px solid #a5b4fc; border-radius:8px;
  padding:6px 12px; cursor:pointer; font-size:12px; font-weight:700;
  color:#3730a3;
}
.btn-add-holiday:hover { background:#c7d2fe; }