/* ===================================================
   TIMETECH — DESIGN SYSTEM
   Single source of truth for all component styles.
   =================================================== */

/* ===================================================
   1. DESIGN TOKENS
   =================================================== */
:root {
  /* Brand */
  --primary-red:        #C62828;
  --primary-red-hover:  #B71C1C;
  --primary-red-light:  rgba(198, 40, 40, 0.08);

  --sysadmin-blue:      #1565C0;
  --sysadmin-blue-hover:#0D47A1;
  --sysadmin-blue-light:rgba(21, 101, 192, 0.08);

  --empleado-teal:      #2E7D32;
  --empleado-teal-hover:#1B5E20;
  --empleado-teal-light:rgba(46, 125, 50, 0.08);

  /* Neutral scale */
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  /* Semantic aliases (backward compat) */
  --white:        #FFFFFF;
  --black:        #0F172A;
  --dark-gray:    #334155;
  --medium-gray:  #94A3B8;
  --light-gray:   #F1F5F9;
  --border-color: #E2E8F0;

  /* Feedback */
  --success:       #16A34A;
  --success-light: #DCFCE7;
  --success-dark:  #166534;
  --warning:       #D97706;
  --warning-light: #FEF3C7;
  --warning-dark:  #92400E;
  --danger:        #DC2626;
  --danger-light:  #FEF2F2;
  --danger-dark:   #991B1B;
  --info:          #2563EB;
  --info-light:    #EFF6FF;
  --info-dark:     #1E40AF;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-lg: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);

  /* Radii */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Layout */
  --sidebar-width: 260px;
  --header-height: 62px;
  --container-max: 1280px;

  /* Transitions */
  --transition:      all 0.2s ease;
  --transition-fast: all 0.15s ease;
}

/* ===================================================
   2. ROLE-BASED THEME OVERRIDES
   =================================================== */
.sysadmin-mode {
  --primary-red:        var(--sysadmin-blue);
  --primary-red-hover:  var(--sysadmin-blue-hover);
  --primary-red-light:  var(--sysadmin-blue-light);
  background-color: #EBF3FF;
}

/* El portal del legajo (.empleado-mode) usa la misma paleta roja/gris que el
   resto de la app — coincide con el logo y la identidad de marca. Antes tenía
   su propio verde (--empleado-teal, todavía definido arriba por si se
   necesita puntualmente), pero no tenía sentido como color de marca. */

.sysadmin-mode .bg-primary-light { background-color: var(--sysadmin-blue-light); }

/* ===================================================
   3. RESET & BASE
   =================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  background-color: var(--gray-100);
  color: var(--gray-900);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
img { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }

/* ===================================================
   4. TYPOGRAPHY
   =================================================== */
h1, .h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.2;  letter-spacing: -0.025em; color: var(--gray-900); }
h2, .h2 { font-size: 1.5rem;   font-weight: 700; line-height: 1.25; letter-spacing: -0.02em;  color: var(--gray-900); }
h3, .h3 { font-size: 1.25rem;  font-weight: 600; line-height: 1.3;  letter-spacing: -0.01em;  color: var(--gray-800); }
h4, .h4 { font-size: 1.0625rem;font-weight: 600; line-height: 1.4;                            color: var(--gray-800); }
h5, .h5 { font-size: 0.9375rem;font-weight: 600; line-height: 1.5;                            color: var(--gray-700); }
h6, .h6 { font-size: 0.8125rem;font-weight: 700; line-height: 1.5;  text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); }

.text-xs   { font-size: 0.6875rem; }
.text-sm   { font-size: 0.8125rem; }
.text-base { font-size: 0.9375rem; }
.text-lg   { font-size: 1.0625rem; }
.text-xl   { font-size: 1.25rem; }

.font-normal    { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.uppercase   { text-transform: uppercase; letter-spacing: 0.05em; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Text colors */
.text-primary     { color: var(--primary-red); }
.text-primary-red { color: var(--primary-red); }
.text-muted       { color: var(--gray-500); }
.text-secondary   { color: var(--gray-600); }
.text-danger      { color: var(--danger); }
.text-success     { color: var(--success); }
.text-warning     { color: var(--warning); }
.text-info        { color: var(--info); }
.text-dark        { color: var(--gray-900); }

/* Encabezado de sección dentro de una tarjeta o formulario. Nace del tab de
   ausentismo del Golden Template (empleado_form.html), donde vivía suelto. */
.aus-section-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
}

/* Variante contrastada, para números grandes sobre fondo claro. Son los nombres
   que devuelve `PoolEmpleado.color_alerta`, así que el modelo habla en este
   vocabulario: vivían duplicados en dos templates del legajo. */
.text-c-success   { color: var(--success-dark); }
.text-c-info      { color: var(--info-dark); }
.text-c-warning   { color: var(--warning-dark); }
.text-c-orange    { color: #9A3412; }
.text-c-danger    { color: var(--danger-dark); }

/* ===================================================
   5. LAYOUT
   =================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Reportes: a diferencia del resto del sitio, crecen con el monitor en vez
   de taparse en --container-max — mismo criterio que la pantalla del QR
   (punto_fichada_display.html), que ya escala con vw/clamp(). */
.container-report {
  max-width: min(96vw, 1900px);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Dashboard two-column grid */
.dashboard-container {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: 1.75rem;
  align-items: start;
  margin-top: 1.5rem;
}

.dashboard-main { min-width: 0; }

/* ===================================================
   6. SPACING UTILITIES
   =================================================== */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }    .mt-1 { margin-top: 0.25rem; }  .mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; }   .mt-5 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.25rem; }.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }.mb-4 { margin-bottom: 1.0rem; }.mb-5 { margin-bottom: 1rem; }
.ms-1 { margin-left: 0.25rem; }  .ms-2 { margin-left: 0.5rem; }   .ms-3 { margin-left: 0.75rem; }
.me-1 { margin-right: 0.25rem; } .me-2 { margin-right: 0.5rem; }  .me-3 { margin-right: 0.75rem; }
.me-4 { margin-right: 1.5rem; }

.p-0 { padding: 0; }
.p-2 { padding: 0.5rem; }  .p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }  .p-5 { padding: 2rem; }
.pt-3 { padding-top: 1rem; }    .pt-4 { padding-top: 1.0rem; }    .pt-5 { padding-top: 2rem; }
.pb-3 { padding-bottom: 1rem; } .pb-4 { padding-bottom: 1.0rem; } .pb-5 { padding-bottom: 2rem; }

.gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; }  .gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }    .gap-5 { gap: 1.5rem; }  .gap-6 { gap: 2rem; }

/* ===================================================
   7. BACKGROUND & COLOR UTILITIES
   =================================================== */
.bg-white        { background-color: var(--white); }
.bg-gray-50      { background-color: var(--gray-50); }
.bg-light-gray   { background-color: var(--gray-50); }
.bg-primary-light{ background-color: var(--primary-red-light); }

/* ===================================================
   8. DISPLAY & FLEX UTILITIES
   =================================================== */
.d-none        { display: none !important; }
.d-block       { display: block; }
.d-inline      { display: inline; }
.d-flex        { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid        { display: grid; }

.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.flex-shrink-0   { flex-shrink: 0; }

.justify-start          { justify-content: flex-start; }
.justify-end            { justify-content: flex-end; }
.justify-center         { justify-content: center; }
.justify-between        { justify-content: space-between; }
.justify-content-between{ justify-content: space-between; }

.align-items-start  { align-items: flex-start; }
.align-items-end    { align-items: flex-end; }
.align-items-center { align-items: center; }

.w-100  { width: 100%; }
.h-100  { height: 100%; }
.w-full { width: 100%; }

/* ===================================================
   9. BORDER UTILITIES
   =================================================== */
.border        { border: 1px solid var(--border-color); }
.border-top    { border-top: 1px solid var(--border-color); }
.border-bottom { border-bottom: 1px solid var(--border-color); }
.border-0      { border: none !important; }

.rounded        { border-radius: var(--radius); }
.rounded-sm     { border-radius: var(--radius-sm); }
.rounded-md     { border-radius: var(--radius-md); }
.rounded-lg     { border-radius: var(--radius-lg); }
.rounded-xl     { border-radius: var(--radius-xl); }
.rounded-full   { border-radius: var(--radius-full); }
.rounded-circle { border-radius: 50%; }

/* ===================================================
   10. SHADOW UTILITIES
   =================================================== */
.shadow-none { box-shadow: none; }
.shadow-xs   { box-shadow: var(--shadow-xs); }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow      { box-shadow: var(--shadow); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }

/* ===================================================
   11. GRID (Bootstrap-compatible columns)
   =================================================== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.col-md-2  { flex: 0 0 16.666%; padding: 0 0.75rem; }
.col-md-3  { flex: 0 0 25%;     padding: 0 0.75rem; }
.col-md-4  { flex: 0 0 33.333%; padding: 0 0.75rem; }
.col-md-5  { flex: 0 0 41.666%; padding: 0 0.75rem; }
.col-md-6  { flex: 0 0 50%;     padding: 0 0.75rem; }
.col-md-7  { flex: 0 0 58.333%; padding: 0 0.75rem; }
.col-md-8  { flex: 0 0 66.666%; padding: 0 0.75rem; }
.col-md-9  { flex: 0 0 75%;     padding: 0 0.75rem; }
.col-md-12 { flex: 0 0 100%;    padding: 0 0.75rem; }

.mb-md-0 { /* handled per breakpoint below */ }

/* ===================================================
   12. HEADER & NAVIGATION
   =================================================== */
.main-header {
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color);
  height: var(--header-height);
  position: sticky;
  top: 0;
  z-index: 1060;
  box-shadow: var(--shadow-xs);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

/* Logo area */
.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.header-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-800);
  display: inline-flex;
  align-items: baseline;
}

.logo-time    { color: var(--primary-red); }

/* Role badges in header */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

.badge-sysadmin {
  background-color: rgba(21, 101, 192, 0.1);
  color: var(--sysadmin-blue);
  border: 1px solid rgba(21, 101, 192, 0.25);
}

.badge-empleado {
  background-color: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
}

/* Nav links */
.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.nav-menu a {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--gray-600);
  font-weight: 500;
  font-size: 0.875rem;
  transition: var(--transition-fast);
}

.nav-menu a:hover {
  color: var(--gray-900);
  background-color: var(--gray-100);
}

.nav-icon    { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; margin-right: 4px; }
.nav-icon-sm { width: 12px; height: 12px; }

/* Nav outline buttons (login page) */
.nav-menu a.btn-outline {
  border: 1.5px solid var(--border-color);
  color: var(--gray-700);
  padding: 0.4rem 0.875rem;
  font-size: 0.8125rem;
  background: transparent;
}
.nav-menu a.btn-outline:hover {
  border-color: var(--primary-red);
  color: var(--primary-red);
  background-color: var(--white);
}

/* Nav dropdown */
.nav-dropdown { position: relative; }

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  user-select: none;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  list-style: none;
  padding: 0.375rem 0;
  min-width: 260px;
  display: none;
  z-index: 1080;
  overflow: visible;
}

.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -0.75rem;
  left: 0;
  width: 100%;
  height: 0.75rem;
  background: transparent;
  display: block;
}

.nav-dropdown.active .nav-dropdown-menu { display: block; }

.nav-dropdown-menu li { position: relative; z-index: 1; }

.nav-dropdown-menu li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  color: var(--gray-700);
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition-fast);
  text-decoration: none;
}

.nav-dropdown-menu li a:hover {
  background-color: var(--gray-50);
  color: var(--primary-red);
}

.profile-header {
  padding: 1rem 1.25rem 0.875rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.25rem;
  background: var(--gray-50);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.profile-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
  margin-bottom: 0.3rem;
}

.profile-role {
  display: inline-block;
  font-size: 0.6875rem;
  color: var(--primary-red);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background-color: var(--primary-red-light);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
}

.dropdown-divider { border: none; border-top: 1px solid var(--border-color); margin: 0.25rem 0; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }

.nav-dropdown-item-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.6rem 1.25rem;
  color: var(--gray-700);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-fast);
  font-family: inherit;
}

.nav-dropdown-item-btn:hover {
  background-color: var(--gray-50);
  color: var(--primary-red);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-600);
  padding: 0.375rem;
  border-radius: var(--radius);
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.nav-hamburger i { width: 20px; height: 20px; display: block; }
.nav-hamburger:hover { background-color: var(--gray-100); color: var(--gray-900); }

/* Nav button link */
.nav-btn-link {
  background: none;
  border: none;
  color: var(--gray-600);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-fast);
}

/* ===================================================
   13. IMPERSONATION BANNER
   =================================================== */
.impersonation-banner {
  background-color: #7F1D1D;
  color: var(--white);
  width: 100%;
  padding: 0.55rem 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  letter-spacing: 0.01em;
}

.impersonation-exit-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.5);
  color: var(--white);
  padding: 0.2rem 0.875rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background 0.15s;
  margin-left: 0.375rem;
  font-family: inherit;
}
.impersonation-exit-btn:hover { background: rgba(255,255,255,0.28); }

/* ===================================================
   14. SIDEBAR
   =================================================== */
.sidebar {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
  height: fit-content;
  position: sticky;
  top: calc(var(--header-height) + 1.5rem);
  z-index: 10;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  overflow: hidden;
}

.sidebar-inner { overflow: hidden; }

.sidebar-header {
  padding: 1.25rem 1.25rem 0.875rem;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-header h3 {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sidebar-nav ul { list-style: none; padding: 0.5rem 0; margin: 0; }

.sidebar-nav a {
  display: flex;
  align-items: center;
  padding: 0.6rem 1.25rem;
  text-decoration: none;
  color: var(--gray-600);
  border-left: 3px solid transparent;
  transition: var(--transition-fast);
  font-weight: 500;
  font-size: 0.875rem;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  background: var(--primary-red-light);
  color: var(--primary-red);
  border-left-color: var(--primary-red);
}

.sidebar-icon {
  width: 18px;
  height: 18px;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.sidebar-label { flex: 1; min-width: 0; line-height: 1.3; }

.sidebar-section-title {
  padding: 1rem 1.25rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Sidebar form button (for submit actions in nav) */
.sidebar-form { margin: 0; padding: 0; }
.sidebar-form-btn {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0.6rem 1.25rem;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--gray-600);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
}
.sidebar-form-btn:hover {
  background: var(--primary-red-light);
  color: var(--primary-red);
  border-left-color: var(--primary-red);
}

/* Collapsible sidebar sections */
.sidebar-collapsible {
  border-top: 1px solid var(--border-color);
}

.sidebar-collapsible-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.25rem;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--gray-500);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: inherit;
}

.sidebar-collapsible-trigger > span { display: flex; align-items: center; }
.sidebar-collapsible-trigger:hover { background-color: var(--gray-50); color: var(--gray-700); }

.sidebar-collapsible-trigger .chevron {
  width: 14px; height: 14px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.sidebar-collapsible.open .sidebar-collapsible-trigger .chevron { transform: rotate(180deg); }

/* Ítem del menú que además despliega subpantallas: Relojes con sus
   Inconsistencias. A diferencia de Reportes y Usuarios el encabezado es un
   link común —misma tipografía, mismo hover, mismo estado activo que el resto
   del menú, porque Relojes tiene pantalla propia— y la flecha es un botón
   aparte pegado al borde derecho. Sin borde superior: no abre un grupo, es una
   fila más de la lista. */
.sidebar-item-row {
  display: flex;
  align-items: stretch;
}
.sidebar-item-row > a { flex: 1 1 auto; min-width: 0; }

.sidebar-item-chevron {
  flex: 0 0 auto;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--transition-fast);
}
.sidebar-item-chevron:hover { color: var(--primary-red); }

/* Con el ítem activo la franja se pinta entera, chevron incluido: si el fondo
   cortara justo antes de la flecha parecería que la flecha no es parte de la
   fila. Donde `:has` no exista se cae al fondo del link solo, que se ve bien
   igual. */
.sidebar-item-row:has(> a.active) { background: var(--primary-red-light); }
.sidebar-item-row:has(> a.active) .sidebar-item-chevron { color: var(--primary-red); }
.sidebar-item-chevron .chevron {
  width: 14px; height: 14px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.sidebar-item-collapsible.open .sidebar-item-chevron .chevron { transform: rotate(180deg); }

.sidebar-collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.sidebar-collapsible.open .sidebar-collapsible-content,
.sidebar-item-collapsible.open .sidebar-collapsible-content { max-height: 600px; }

.sidebar-collapsible-content ul { padding: 0.25rem 0 0.5rem; }
.sidebar-collapsible-content a {
  padding: 0.5rem 1.25rem 0.5rem 1.75rem;
  font-size: 0.8125rem;
  border-left: none;
}
.sidebar-collapsible-content a:hover,
.sidebar-collapsible-content a.active {
  background-color: var(--primary-red-light);
  color: var(--primary-red);
  border-left: none;
}

/* Sidebar backdrop (mobile) */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1049;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sidebar-backdrop.active { opacity: 1; pointer-events: all; }

/* ===================================================
   15. MAIN CONTENT & FOOTER
   =================================================== */
.main-content {
  flex: 1;
  padding: 1.75rem 0 2.5rem;
}

.main-footer {
  background-color: var(--gray-800);
  color: var(--gray-400);
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.8125rem;
  margin-top: auto;
}

/* ===================================================
   16. PAGE HEADER COMPONENT
   =================================================== */
.page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.page-header-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--primary-red-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-red);
}
.page-header-icon i,
.page-header-icon svg { width: 24px; height: 24px; }

.page-header-text { flex: 1; min-width: 0; }
.page-title    { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); letter-spacing: -0.02em; line-height: 1.2; }
.page-subtitle { font-size: 0.875rem; color: var(--gray-500); margin-top: 0.2rem; }

.page-header-actions { flex-shrink: 0; display: flex; gap: 0.5rem; align-items: center; }

/* Section header (legacy: title on left, action on right) */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.dashboard-header { margin-bottom: 1.75rem; }

/* ===================================================
   17. CARDS
   =================================================== */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
}

/* Clickable card */
.clickable-card { cursor: pointer; transition: box-shadow 0.2s, transform 0.2s; }
.clickable-card:hover  { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.clickable-card:focus  { outline: none; box-shadow: 0 0 0 3px rgba(198,40,40,0.15), var(--shadow-md); }

/* Metric card */
.metric-card { position: relative; overflow: visible; z-index: 20; }
.metric-number { font-weight: 800; color: var(--gray-900); }
.metric-main   { font-size: 2.2rem; line-height: 1; }
.metric-sub    { font-size: 1rem; color: var(--gray-400); margin-left: 0.2rem; }

/* Stat cards (sysadmin) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.stat-card {
  padding: 1.5rem 1.25rem;
  text-align: center;
  border-top: 3px solid var(--primary-red);
  transition: box-shadow 0.2s, transform 0.15s;
}

.stat-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
a.stat-card { text-decoration: none; }

.stat-label {
  display: block;
  color: var(--gray-500);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--primary-red);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.stat-value i { width: 28px; height: 28px; }

/* Quick action cards */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.quick-action-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  text-decoration: none;
  color: var(--gray-700);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--white);
  transition: all 0.15s;
}

.quick-action-card:hover {
  border-color: var(--primary-red);
  color: var(--primary-red);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.quick-action-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--primary-red-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary-red);
  transition: background 0.15s;
}
.quick-action-icon i { width: 20px; height: 20px; }

.quick-action-label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.quick-action-desc {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-top: 0.1rem;
}

/* ===================================================
   18. BUTTONS
   =================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 1rem;
  height: 38px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-fast);
  border: 1.5px solid transparent;
  white-space: nowrap;
  font-family: inherit;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-outline:disabled:hover {
  background-color: transparent;
  color: var(--primary-red);
}

.btn-primary {
  background-color: var(--primary-red);
  color: var(--white);
  border-color: var(--primary-red);
}
.btn-primary:hover {
  background-color: var(--primary-red-hover);
  border-color: var(--primary-red-hover);
}

.btn-secondary {
  background-color: var(--gray-100);
  color: var(--gray-700);
  border-color: var(--border-color);
}
.btn-secondary:hover { background-color: var(--gray-200); color: var(--gray-900); }

.btn-outline {
  background-color: transparent;
  color: var(--primary-red);
  border-color: var(--primary-red);
}
.btn-outline:hover { background-color: var(--primary-red); color: var(--white); }

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
  border-color: transparent;
}
.btn-ghost:hover { background-color: var(--gray-100); color: var(--gray-900); }

.btn-danger, .btn-danger-solid {
  background-color: var(--danger);
  color: var(--white);
  border-color: var(--danger);
}
.btn-danger:hover, .btn-danger-solid:hover {
  background-color: var(--danger-dark);
  border-color: var(--danger-dark);
}

.btn-warning {
  background-color: var(--warning-light);
  color: var(--warning-dark);
  border: 1.5px solid #FCD34D;
}
.btn-warning:hover { background-color: #FEF08A; }

.btn-success {
  background-color: var(--success-light);
  color: var(--success-dark);
  border-color: #86EFAC;
}
.btn-success:hover { background-color: #BBF7D0; }

/* Reactivar (same as btn-success) */
.btn-reactivar {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--success-light);
  color: var(--success-dark);
  border: 1px solid #86EFAC;
  border-radius: var(--radius);
  padding: 0.4rem 0.875rem;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-fast);
  font-family: inherit;
}
.btn-reactivar:hover { background-color: #BBF7D0; }

/* Dar de baja */
.btn-dar-baja {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--danger-light);
  color: var(--danger-dark);
  border: 1px solid #FECACA;
  border-radius: var(--radius);
  padding: 0.4rem 0.875rem;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  font-family: inherit;
}
.btn-dar-baja:hover { background: #FEE2E2; border-color: #FCA5A5; }

/* Ghost small */
.btn-ghost-sm {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--gray-600);
  border-radius: var(--radius);
  padding: 0 1rem;
  height: 38px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
}
.btn-ghost-sm:hover { border-color: var(--gray-400); color: var(--gray-900); }

/* Sizes */
.btn-sm { height: 32px; padding: 0 0.75rem; font-size: 0.8125rem; }
.btn-lg { height: 46px; padding: 0 1.5rem;  font-size: 0.9375rem; }
.btn-block { width: 100%; justify-content: center; }

/* Save / Cancel (tall variants, 44px) */
.btn-save {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.75rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  text-decoration: none;
  background-color: var(--primary-red);
  color: var(--white);
  border: none;
  gap: 0.5rem;
  transition: var(--transition-fast);
  font-family: inherit;
}
.btn-save:hover {
  background-color: var(--primary-red-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(198,40,40,0.2);
}

/* La acción principal de una pantalla de solo lectura: se ve igual que
   Guardar, pero no guarda nada. Vestirla con .btn-save dejaba la misma clase
   en un enlace que navega y en el botón que envía el formulario, y los tests
   que buscan "el botón de guardar" encontraban cualquiera de los dos. */
.btn-edit {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.75rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  text-decoration: none;
  background-color: var(--primary-red);
  color: var(--white);
  border: none;
  gap: 0.5rem;
  transition: var(--transition-fast);
  font-family: inherit;
}
.btn-edit:hover {
  background-color: var(--primary-red-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(198,40,40,0.2);
}

.btn-cancel {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none;
  background-color: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--border-color);
  transition: var(--transition-fast);
  font-family: inherit;
}
.btn-cancel:hover { background-color: var(--gray-200); color: var(--gray-900); }

/* Icon inside buttons */
.btn-icon { width: 16px; height: 16px; }

/* Text / link buttons */
.btn-link {
  color: var(--primary-red);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: inherit;
}
.btn-link:hover { color: var(--primary-red-hover); }
.btn-link.text-warning { color: var(--warning); }
.btn-link.text-warning:hover { opacity: 0.8; }
.btn-link.text-danger  { color: var(--danger); }
.btn-link.text-danger:hover  { color: var(--danger-dark); }
.btn-link.text-success { color: var(--success); }

.btn-secondary-link { color: var(--gray-500); margin-left: 1rem; }
.btn-secondary-link:hover { color: var(--gray-900); }

.btn-secondary-outline {
  color: var(--gray-500);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  transition: color 0.15s;
}
.btn-secondary-outline:hover { color: var(--primary-red); }

.btn-logout {
  background: transparent;
  color: var(--gray-500);
  padding: 0.4rem 0.875rem;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.btn-logout:hover { background-color: var(--danger-light); color: var(--danger); border-color: #FECACA; }

/* ===================================================
   19. FORMS
   =================================================== */
.form-group { margin-bottom: 1.25rem; }

.form-group label,
.form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--gray-700);
}

.form-control,
.form-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  background-color: var(--white);
  color: var(--gray-900);
  transition: var(--transition-fast);
  appearance: none;
  line-height: 1.5;
}

select.form-input,
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.25rem;
}

.form-control:focus,
/* Día + mes de una fecha que se repite todos los años (reinicio del pool de
   días). En pantallas angostas los dos selectores pasan a filas. */
.reinicio-fecha {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  align-items: center;
}

@media (max-width: 480px) {
  .reinicio-fecha { grid-template-columns: 1fr; }
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px var(--primary-red-light);
}

.form-control:hover,
.form-input:hover { border-color: var(--gray-400); }

.form-section { margin-bottom: 1rem; }

/* Help-text lists (Django password validators) */
.form-group ul {
  margin: 0.25rem 0 0;
  padding-left: 1.1em;
  font-size: 0.6875rem;
  color: var(--gray-500);
  line-height: 1.6;
}
.form-group ul li { padding-left: 0.1em; }

.form-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
  margin-top: 2rem;
}

/* Section title (inside forms) */
.section-title { color: var(--gray-700); font-size: 1rem; font-weight: 600; }

/* ===================================================
   20. TABLES
   =================================================== */
.table-container { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: 0.875rem;
}

.table th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tr:hover td { background-color: var(--gray-50); }

/* Row states */
.row-baja td { opacity: 0.55; }

/* Name link */
.name-link {
  text-decoration: none;
  color: var(--gray-900);
  font-weight: 600;
  transition: color 0.15s;
}
.name-link:hover { color: var(--primary-red); }

/* ===================================================
   21. ALERTS & MESSAGES
   =================================================== */
.messages-container { margin-bottom: 1.25rem; }

.alert {
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  border-left: 4px solid transparent;
  font-weight: 500;
  font-size: 0.875rem;
}

.alert-success { background-color: #F0FDF4; color: var(--success-dark); border-left-color: var(--success); }
.alert-error,
.alert-danger  { background-color: var(--danger-light); color: var(--danger-dark); border-left-color: var(--danger); }
.alert-warning { background-color: var(--warning-light); color: var(--warning-dark); border-left-color: var(--warning); }
.alert-info    { background-color: var(--info-light); color: var(--info-dark); border-left-color: var(--info); }

/* Info bar (inline, inside cards) */
.alert-info-bar {
  background: var(--info-light);
  border-left: 3px solid var(--info);
  color: var(--info-dark);
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  margin: 0.5rem 1rem 0;
  border-radius: var(--radius-sm);
}

/* Baja banner */
.baja-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--danger-light);
  border: 1px solid #FECACA;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--danger-dark);
}
.baja-banner-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.75rem; flex-wrap: wrap; }

/* ===================================================
   22. BADGES
   =================================================== */
.badge-activo {
  display: inline-flex;
  align-items: center;
  background: var(--success-light);
  color: var(--success-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
}

.badge-baja {
  display: inline-flex;
  align-items: center;
  background: var(--danger-light);
  color: var(--danger-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  margin-left: 0.375rem;
}

.badge-warning {
  display: inline-flex;
  align-items: center;
  background: var(--warning-light);
  color: var(--warning-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
}

/* ===================================================
   23. MODALS
   =================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  backdrop-filter: blur(2px);
}

.modal-box {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 2rem;
  max-width: 440px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.2s ease;
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-box h3 { font-size: 1.125rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.625rem; }
.modal-box p  { color: var(--gray-600); font-size: 0.9375rem; margin-bottom: 1.5rem; line-height: 1.6; }
.modal-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

/* ===================================================
   24. PAGINATION
   =================================================== */
.pagination-bar {
  padding: 0.875rem 1.25rem;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--border-color);
}

.pagination-links { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--gray-600);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: var(--transition-fast);
}
.page-link:hover  { border-color: var(--primary-red); color: var(--primary-red); }
.page-link.active { background: var(--primary-red); color: var(--white); border-color: var(--primary-red); }
.page-link.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.page-ellipsis { padding: 0 0.25rem; color: var(--gray-400); font-size: 0.875rem; }

/* ===================================================
   25. CARD TOOLBAR (list page header)
   =================================================== */
.card-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  gap: 0.75rem;
  flex-wrap: wrap;
}

.search-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex: 1;
  min-width: 200px;
}

.search-input {
  width: min(480px, 100%);
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--gray-900);
  background-color: var(--white);
  transition: var(--transition-fast);
}
.search-input:focus {
  outline: none;
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px var(--primary-red-light);
}

/* ===================================================
   26. DASHBOARD CHARTS & METRICS
   =================================================== */
.metric-title-row { display: flex; align-items: center; gap: 0.4rem; position: relative; width: fit-content; }

.chart-row  { display: grid; gap: 1.25rem; align-items: center; }
.chart-wrap { width: 200px; height: 200px; display: grid; place-items: center; }

.chart-legend  { display: flex; flex-direction: column; gap: 0.5rem; }
.legend-item   { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.875rem; }
.legend-value  { font-weight: 800; color: var(--gray-700); }
.legend-dot    { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 0.375rem; flex-shrink: 0; }

.dot-present  { background: var(--primary-red); }
.dot-absent   { background: var(--gray-200); }
.dot-leave    { background: #F59E0B; }
.dot-noleave  { background: var(--gray-200); }

/* Events list */
.events-list { display: flex; flex-direction: column; }
.event-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr 56px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.event-row:hover { background: var(--gray-50); }
.event-row + .event-row { border-top: 1px solid var(--gray-100); }

.event-tipo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  width: fit-content;
}
.tipo-e { background: #DCFCE7; color: #15803D; }
.tipo-s { background: #FEE2E2; color: #B91C1C; }

.event-nombre { font-weight: 600; color: var(--gray-800); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-reloj  { color: var(--gray-400); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-hora   { font-weight: 700; color: var(--gray-700); text-align: right; font-variant-numeric: tabular-nums; font-size: 0.875rem; }

/* ===================================================
   27. HINT POPOVER
   =================================================== */
.hint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: var(--white);
  color: var(--gray-400);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-fast);
  font-family: inherit;
}
.hint-btn:hover { border-color: var(--primary-red); color: var(--primary-red); }
.hint-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--primary-red-light); }

.hint-popover {
  position: absolute;
  top: 34px;
  left: 0;
  z-index: 500;
  width: min(340px, 80vw);
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
  font-size: 0.8125rem;
}

.hint-popover::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 12px;
  width: 9px;
  height: 9px;
  background: var(--white);
  border-left: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  transform: rotate(45deg);
}

.hint-popover-title { font-weight: 700; margin-bottom: 0.25rem; color: var(--gray-800); font-size: 0.875rem; }

/* ===================================================
   28. EMPLOYEE FORM SPECIFICS
   =================================================== */
.acciones-legajo-bar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: stretch; margin-bottom: 2rem; }

.accion-card {
  flex: 1;
  min-width: 220px;
  background: var(--gray-50);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: border-color 0.15s;
}
.accion-card:hover { border-color: var(--gray-300); }
.accion-card-info h4 { font-size: 0.875rem; font-weight: 700; color: var(--gray-800); margin-bottom: 0.2rem; }
.accion-card-info p  { font-size: 0.8125rem; color: var(--gray-500); margin: 0; }

/* Barra de acciones rápidas del legajo (compacta, una sola línea) */
.legajo-quick-actions-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0.75rem 1rem;
  background: var(--gray-50);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.legajo-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  font-size: 0.835rem;
  font-weight: 600;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s, box-shadow 0.15s;
  background: none;
  line-height: 1.4;
}
.legajo-quick-btn:hover { filter: brightness(0.94); box-shadow: 0 1px 4px rgba(0,0,0,0.08); text-decoration: none; }

.legajo-quick-btn--blue  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.legajo-quick-btn--green { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.legajo-quick-btn--red   { background: #fff1f2; color: #b91c1c; border-color: #fecaca; }

.legajo-quick-meta { font-weight: 400; font-size: 0.78rem; color: inherit; opacity: 0.75; margin-left: 0.2rem; }

/* Acceso radio cards */
.acceso-option { cursor: pointer; }
.acceso-option input[type="radio"] { display: none; }
.acceso-option-box {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  transition: all 0.15s;
  background: var(--white);
}
.acceso-option input:checked + .acceso-option-box {
  border-color: var(--primary-red);
  background: var(--primary-red-light);
  box-shadow: 0 0 0 3px rgba(198,40,40,0.08);
}
.acceso-option:hover .acceso-option-box { border-color: var(--gray-400); }

/* ===================================================
   29. LOGIN PAGE
   =================================================== */
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - var(--header-height) - 80px);
  padding: 2rem 1rem;
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 2.5rem 2rem 2rem;
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

.login-header { text-align: center; margin-bottom: 2rem; }

.login-header-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-lg);
  background: var(--primary-red-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: var(--primary-red);
}
.login-header-icon i { width: 26px; height: 26px; }
.login-header h2 { font-size: 1.375rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.375rem; }
.login-header p  { font-size: 0.875rem; color: var(--gray-500); }

.password-input-wrap { position: relative; display: block; }
.password-input-wrap .form-control,
.password-input-wrap .form-input {
  width: 100%;
  padding-right: 2.75rem;
}
.password-toggle-btn {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gray-500);
  cursor: pointer;
  border-radius: var(--radius);
  transition: var(--transition-fast);
}
.password-toggle-btn:hover {
  color: var(--primary-red);
  background: var(--gray-50);
}
.password-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15);
}
.password-toggle-btn i { width: 18px; height: 18px; pointer-events: none; }

/* ===================================================
   30. MISCELLANEOUS BACKWARD-COMPAT UTILITIES
   =================================================== */
/* Bootstrap-ish spacing aliases that templates use */
.mb-md-0 { /* overridden in responsive below */ }

/* Text utilities used across templates */
.text-center { text-align: center; }

/* Legacy form aliases */
.form-actions { margin-top: 1.5rem; }

/* ===================================================
   31. FORM COMPONENTS (Phase 2)
   =================================================== */

/* Checkbox */
.form-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--primary-red);
  flex-shrink: 0;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9375rem;
}
.checkbox-container input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary-red); }

/* Delete button */
.btn-delete {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 1rem;
  height: 38px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid #FCA5A5;
  background: var(--danger-light);
  color: var(--danger);
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: inherit;
}
.btn-delete:hover { background: #FEE2E2; border-color: #F87171; }

/* Campo de fecha con texto que no es una fecha: datetime-pickers.js conserva
   lo tipeado en vez de borrarlo, y lo marca acá para que se vea qué corregir. */
.date-picker-invalido,
input.form-input.date-picker-invalido {
  border-color: #dc2626;
  background-color: #fef2f2;
}
.date-picker-invalido:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.date-picker-error {
  color: #dc2626;
  font-size: 0.8125rem;
  margin-top: 0.25rem;
}

/* Address autocomplete dropdown (punto_fichada_form) */
.suggestion-item {
  padding: 0.6rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.875rem;
  line-height: 1.4;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--gray-50); }
.suggestion-main { font-weight: 600; color: var(--gray-900); }
.suggestion-sub  { color: var(--gray-500); font-size: 0.8rem; }

/* Impact banner (horario_form — edit warning) */
.impacto-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--info-light);
  border: 1px solid #93C5FD;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--info-dark);
  font-size: 0.875rem;
}

/* Inline error block (horario_form) */
.error-block {
  background-color: var(--danger-light);
  border: 1px solid #FECACA;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: none;
}
.error-block h4 { color: var(--danger-dark); margin-bottom: 0.5rem; font-size: 1rem; font-weight: 700; }
.error-block ul { color: #B91C1C; margin-left: 1.5rem; margin-bottom: 0; }

/* Midnight badge (Tabulator cell) */
.midnight-badge {
  background: var(--danger-light);
  color: var(--danger);
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 0.7rem;
  margin-left: 3px;
  border: 1px solid #FECACA;
}

/* Small icon button (Tabulator header buttons) */
.btn-icon-sm {
  background: var(--white);
  border: 1px solid var(--border-color);
  padding: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: var(--gray-500);
  transition: var(--transition-fast);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.btn-icon-sm:hover { background: var(--gray-100); color: var(--primary-red); border-color: var(--primary-red); }
.col-header-btns  { display: flex; gap: 4px; margin-top: 4px; }

/* Constrained-width form containers */
.form-card { max-width: 600px; padding: 1.5rem 1.75rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Padding Y utilities */
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 2rem;   padding-bottom: 2rem; }

/* ===================================================
   32. LIST & TABLE COMPONENTS (Phase 3)
   =================================================== */

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
}
.status-badge .badge-icon,
.status-badge [data-lucide] { width: 14px; height: 14px; }
.status-online  { background: #ecfdf5; color: #059669; }
.status-offline { background: #f8f9fa; color: #6c757d; }
.status-normal  { background: #ecfdf5; color: #059669; }
.status-ausente { background: #fef2f2; color: #dc2626; }

/* Action links in table rows */
.action-link {
  color: var(--gray-500);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.action-link:hover { color: var(--primary-red); }
.action-link i, .action-link svg { width: 16px; height: 16px; }
.action-link-danger { color: #dc2626 !important; }
.action-link-danger:hover { color: #991b1b !important; }

/* Small count pill (e.g. "3 dispositivos") */
.badge-count {
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 0.73rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
}

/* Inline code identifier badge */
.codigo-badge {
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-family: 'Consolas', 'Monaco', monospace;
  letter-spacing: 0.03em;
}

/* Orange "active session" badge */
.badge-activa {
  background: #fff7ed;
  color: #c2410c;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Boolean/state badges */
.badge-success {
  background: #dcfce7; color: #166534;
  padding: 0.25rem 0.6rem; border-radius: 9999px;
  font-size: 0.73rem; font-weight: 600;
}
.badge-secondary {
  background: var(--gray-100); color: var(--gray-500);
  padding: 0.25rem 0.6rem; border-radius: 9999px;
  font-size: 0.73rem; font-weight: 600;
}

/* In-card search bar */
.search-bar-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}
.search-input-wrap { position: relative; flex: 1; max-width: 380px; }
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--gray-400);
  pointer-events: none;
}
.search-bar-container .search-input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--white);
  font-family: inherit;
  color: var(--gray-800);
}
.search-bar-container .search-input:focus {
  border-color: var(--primary-red);
  box-shadow: 0 0 0 2px rgba(198,40,40,0.1);
}
.search-count { font-size: 0.83rem; color: var(--gray-500); white-space: nowrap; }
.hidden-row { display: none !important; }

/* Back nav link */
.back-link {
  color: var(--gray-500);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.15s;
}
.back-link:hover { color: var(--primary-red); }

/* Inline button cluster in table rows */
.actions-group { display: flex; gap: 0.5rem; align-items: center; }
.actions-group .btn { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Empty state placeholder */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1rem;
  color: var(--medium-gray);
  gap: 0.5rem;
  text-align: center;
}
.empty-state p { margin: 0.25rem 0; }

/* Contextual import / secondary-action button */
.btn-secondary-import {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  color: var(--gray-600);
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.btn-secondary-import:hover { border-color: var(--primary-red); color: var(--primary-red); }
.btn-secondary-import .btn-icon { width: 18px; height: 18px; }

/* Pagination wrapper for sysadmin pages */
.pagination-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  justify-content: flex-end;
}

/* API log detail viewer */
.detail-container {
  background: #1e1e1e;
  color: #dcdcdc;
  padding: 1.5rem;
  border-radius: 4px;
  max-height: 400px;
  overflow-y: auto;
}
.monospace-detail {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}
.btn-copy {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  transition: all 0.15s;
}
.btn-copy:hover { background: var(--gray-50); border-color: var(--gray-400); color: var(--primary-red); }

/* ===================================================
   33. REPORT STYLES (Phase 5)
   =================================================== */

/* Simple col aliases (no -md breakpoint) for report param forms */
.col-4  { flex: 0 0 33.333%; padding: 0 0.75rem; min-width: 150px; }
.col-6  { flex: 0 0 50%;     padding: 0 0.75rem; min-width: 200px; }
.col-12 { flex: 0 0 100%;    padding: 0 0.75rem; }

/* Missing generic utilities referenced in reports */
.text-end          { text-align: right; }
.fw-bold           { font-weight: 700; }
.small             { font-size: 0.875rem; }
.justify-content-center { justify-content: center; }

/* Checkbox toggle for "incluir bajas" */
.incluir-bajas-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--gray-700);
}
.incluir-bajas-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-red);
}

/* ---- Report outer wrapper (rendered in new tab) ---- */
.report-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  overflow: hidden;
}
.report-actions {
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.5rem;
}
.report-header-box {
  background: var(--gray-50);
  border-bottom: 2px solid var(--border-color);
  padding: 1.5rem;
}
.report-brand {
  font-weight: 700;
  color: var(--primary-red);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.report-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.report-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.report-info-item { display: flex; flex-direction: column; }
.report-info-span-2 { grid-column: span 2; }
.report-info-label {
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.report-content-padding { padding: 1.5rem; overflow-x: auto; }

/* ---- Report table ---- */
.report-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.report-table th,
.report-table td {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-color);
  text-align: left;
  font-size: 0.875rem;
}
.report-table th {
  background: var(--gray-50);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray-600);
}
.report-table tbody tr:hover { background: var(--gray-50); }

/* ---- Section groupings within reports ---- */
.report-day-section,
.day-report-section,
.employee-report-section { margin-bottom: 2rem; page-break-inside: avoid; }

.report-section-heading {
  background: var(--gray-50);
  padding: 0.5rem 0.75rem;
  border-left: 4px solid var(--primary-red);
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-800);
}
.report-section-heading--gray  { border-left-color: var(--gray-400); }
.report-section-heading--amber { border-left-color: #d97706; }

.report-employee-section { margin-bottom: 1.25rem; padding-left: 1rem; }
.report-employee-header  { font-size: 0.95rem; margin-bottom: 0.4rem; color: var(--gray-800); font-weight: 600; }

/* ============================================================
   REPORTES — layout profesional unificado (web == PDF/export)
   Un solo diseño para la vista en pantalla y el PDF (WeasyPrint).
   Colores hardcodeados: WeasyPrint no resuelve las CSS vars de :root.
   Se usan unidades pt para que pantalla y PDF salgan idénticos.
   ============================================================ */

/* Hoja del reporte: en pantalla se ve como papel; impresa/PDF, plana. */
.report-doc {
  background: #fff;
  color: #1E293B;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 2rem 2.25rem 2.5rem;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 9pt;
  line-height: 1.4;
  overflow-x: auto;
}

/* La hoja está diseñada en pt sobre una A4: en un monitor grande queda chica
   aunque el contenedor se ensanche. Se escala entera —texto, padding y
   bordes— en vez de tocar font-size, que dejaría atrás los pt del espaciado y
   descuadraría la hoja. zoom reflowea el contenido, a diferencia de
   transform: scale(), así que la tabla se reacomoda al ancho disponible.
   En impresión y PDF no corre: ahí la hoja tiene que seguir midiendo lo mismo. */
@media screen and (min-width: 1600px) { .report-doc { zoom: 1.12; } }
@media screen and (min-width: 2000px) { .report-doc { zoom: 1.25; } }
@media screen and (min-width: 2560px) { .report-doc { zoom: 1.40; } }

/* ── Control de zoom de la hoja ──────────────────────────────────────────
   Flota al pie, centrado, como el de un visor de documentos. El escalado
   automático de arriba sigue fijando el punto de partida; estos botones lo
   corren desde ahí y lo que el usuario elija manda por encima. */
.rpt-zoom {
  /* Sticky y no fixed: flota mientras se recorre el reporte, pero se queda
     dentro de su contenedor en vez de montarse sobre el pie del sitio cuando
     se llega al final. */
  position: sticky;
  bottom: 1.25rem;
  z-index: 40;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.14);
}
.rpt-zoom-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--gray-600, #475569);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.rpt-zoom-btn:hover:not(:disabled) { background: var(--gray-100, #f1f5f9); color: #0f172a; }
.rpt-zoom-btn:disabled { opacity: 0.35; cursor: default; }
/* El porcentaje también resetea: es el atajo que espera cualquiera que haya
   usado un visor, y evita tener que contar clics para volver al tamaño base. */
.rpt-zoom-nivel {
  min-width: 3.4rem;
  padding: 0 0.15rem;
  border: none;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gray-600, #475569);
  cursor: pointer;
}
.rpt-zoom-nivel:hover { color: #0f172a; }

/* El control flota sobre la pantalla, así que la hoja tiene que terminar
   antes: sin este aire el pie del reporte le queda debajo. */
@media screen {
  .container-report { padding-bottom: 5.5rem; }
}

/* ── Carátula ── */
.rpt-caratula {
  border-bottom: 2.5pt solid #C62828;
  padding-bottom: 10pt;
  margin-bottom: 16pt;
}
.rpt-marca-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 8pt;
}
.rpt-brand {
  font-size: 12pt;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #C62828;
}
.rpt-brand small {
  display: block;
  font-size: 7.5pt;
  font-weight: 400;
  color: #94A3B8;
  letter-spacing: 0.02em;
}
.rpt-empresa {
  text-align: right;
  font-size: 10pt;
  font-weight: 700;
  color: #1E293B;
  string-set: doc-empresa content();
}
.rpt-empresa small {
  display: block;
  font-size: 7.5pt;
  font-weight: 400;
  color: #64748B;
}
.rpt-titulo {
  font-size: 16pt;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #1E293B;
  margin: 4pt 0 8pt;
  string-set: doc-titulo content();
}
.rpt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4pt 22pt;
}
.rpt-meta-item { min-width: 120pt; display: flex; flex-direction: column; }
.rpt-meta-label {
  font-size: 6.8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
}
.rpt-meta-val { font-size: 9pt; color: #1E293B; }

/* ── Encabezado de grupo (por empleado / por fecha) ── */
.rpt-grupo { margin-top: 12pt; page-break-inside: auto; }
.rpt-grupo:first-of-type { margin-top: 0; }
.rpt-grupo-head {
  background: #F1F5F9;
  border-left: 3pt solid #C62828;
  padding: 5pt 8pt;
  margin-bottom: 5pt;
  page-break-after: avoid;
  break-after: avoid;
}
.rpt-grupo-head--gris { border-left-color: #94A3B8; }
.rpt-grupo-head--ambar { border-left-color: #D97706; }
.rpt-grupo-titulo { font-size: 10.5pt; font-weight: 700; color: #1E293B; }
.rpt-grupo-titulo .rpt-legajo { font-weight: 600; color: #C62828; margin-right: 5pt; }
.rpt-grupo-meta { margin-top: 2pt; font-size: 7.8pt; color: #64748B; }
.rpt-grupo-meta .sep { color: #CBD5E1; margin: 0 5pt; }
.rpt-grupo-meta b { color: #475569; font-weight: 600; }

/* ── Tablas ── */
.rpt-table { width: 100%; border-collapse: collapse; margin-bottom: 4pt; }
.rpt-table thead { display: table-header-group; }
.rpt-table th {
  background: #F8FAFC;
  color: #475569;
  text-align: left;
  font-size: 6.8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4pt 6pt;
  border-bottom: 1.5pt solid #C62828;
}
.rpt-table td {
  padding: 3.5pt 6pt;
  font-size: 8.2pt;
  border-bottom: 0.5pt solid #E2E8F0;
  vertical-align: top;
}
.rpt-table tbody tr:nth-child(even) td { background: #FBFCFE; }

/* Columna "Link al verificador" (solo pantalla): ícono que abre el Verificador de
   Registros para ese legajo y ese día en el reporte Fuera de Estándar. Sin caja
   de botón: en una tabla de muchas filas, un botón por legajo competía
   visualmente con el detalle, que es lo que hay que leer. La celda cubre con
   rowspan todas las inconsistencias del legajo en esa fecha, así que se centra
   verticalmente en vez de alinearse arriba como el resto. */
.rpt-table td.rpt-celda-accion {
  vertical-align: middle;
  padding: 5pt 6pt;
}
.rpt-link-verificador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Mismo rojo que el ítem activo "Verificador de registros" en la sidebar:
     el ícono y el color son la pista de a dónde lleva el link. */
  color: var(--primary-red);
  border-radius: 6px;
  padding: 4px;
  transition: var(--transition-fast);
}
.rpt-link-verificador:hover,
.rpt-link-verificador:focus-visible {
  background: var(--primary-red-light);
}
.rpt-link-verificador [data-lucide] { width: 16px; height: 16px; }
.rpt-table tr { page-break-inside: avoid; break-inside: avoid; }
.rpt-table tfoot td {
  background: #F1F5F9;
  border-top: 1.5pt solid #CBD5E1;
  font-weight: 700;
  padding: 5pt 6pt;
}

/* Utilidades (dentro de la hoja del reporte) */
.report-doc .t-center, .rpt-table th.t-center { text-align: center; }
.report-doc .t-right,  .rpt-table th.t-right  { text-align: right; }
.report-doc .t-center, .rpt-table th.t-center { text-align: center; }
.report-doc .t-num { font-variant-numeric: tabular-nums; }
.report-doc .muted { color: #94A3B8; }
.report-doc .fw-b  { font-weight: 700; }
.report-doc .small { font-size: 7.5pt; color: #64748B; }
.report-doc .fh-zero { color: #CBD5E1; }
/* Horas indeterminadas ("?"): día inconsistente cuyas horas no se pudieron
   calcular. Se destaca en vez de atenuarse — es un dato a corregir, no un cero. */
.report-doc .fh-indef { color: #B45309; font-weight: 600; }
/* Ficha de horas: anchos fijos para que todos los legajos rendericen la tabla
   igual. Con el layout automático cada tabla (una por empleado) media su propio
   contenido y las columnas bailaban entre un legajo con muchas marcas y otro
   sin ninguna. Padding más chico y horas abreviadas para que Horario, Fichadas,
   Causa y Justificación se queden con el ancho. */
.fh-table { table-layout: fixed; }
/* En pantallas angostas la hoja ya scrollea (.report-doc, overflow-x:auto):
   con anchos fijos en % las columnas se aplastarían hasta pisarse, así que
   se le pone un piso de ancho. En el PDF manda el ancho de la hoja. */
.fh-table { min-width: 680px; }
.fh-table th, .fh-table td { padding-left: 3.5pt; padding-right: 3.5pt; }
/* Las columnas de horas van pegadas a su borde derecho, así que sin este aire
   el último dígito toca la columna siguiente. Pasa igual con la última marca
   de Fichadas contra el encabezado de Previstas. */
.fh-table th.t-right, .fh-table td.t-right { padding-right: 4pt; }
/* Fichadas: el par de marcas no se parte, así que si roza el borde termina
   tocando el encabezado de Previstas. Va por clase y no por posición: la fila
   de Totales abre con un td de colspan 3, así que `td:nth-child(3)` caía sobre
   el total de Normales y le comía el ancho hasta partirle el "HH:MM". */
.fh-table td.fh-col-fichadas { padding-right: 5pt; }

/* La fila de Totales lleva el mismo padding lateral que el resto de la grilla.
   La regla general `.rpt-table tfoot td` le pone 6pt y le gana en especificidad
   a `.fh-table td`, así que la celda del pie se quedaba con 2.5pt menos de
   lugar que su columna y el total cortaba de renglón en el PDF. */
.fh-table tfoot td { padding-left: 3.5pt; padding-right: 3.5pt; }
.fh-table tfoot td.t-right { padding-right: 4pt; }
/* Los encabezados de las columnas de horas cortan de renglón —"Extra 100%" en
   dos líneas— en vez de ensanchar la columna o pisar al vecino. */
.fh-table th { overflow-wrap: break-word; word-wrap: break-word; hyphens: none; }
/* El texto que no entra corta de renglón en vez de ensanchar la columna. */
.fh-table td { overflow-wrap: break-word; word-wrap: break-word; }
.report-doc .fh-sin-marcas { white-space: nowrap; }

/* Aclaración del resto que dejan los mínimos, debajo del resumen del legajo. */
.report-doc .fh-nocomp { margin-top: 0.6rem; }

/* ── Corte por convenio ──────────────────────────────────────────────────
   Cada grupo lleva sólo las columnas de su convenio, así que las tablas de
   dos grupos tienen anchos distintos: el encabezado es lo que hace evidente
   que son cortes separados y no un desalineado. */
.report-doc .fh-grupo-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1.5pt solid #991b1b;
}
.report-doc .fh-grupo-k {
  font-size: 7.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}
.report-doc .fh-grupo-nombre { font-size: 11pt; font-weight: 700; color: #0f172a; }
.report-doc .fh-grupo-n { font-size: 8pt; color: #64748b; margin-left: auto; }
.report-doc .fh-grupo + .fh-grupo { margin-top: 1.6rem; }

@media print {
  /* Cada convenio arranca en hoja nueva: es un corte de liquidación, y dos
     cortes compartiendo hoja se leen como una sola tabla mal alineada. */
  .report-doc .fh-grupo-nueva-pagina { break-before: page; page-break-before: always; }
  .report-doc .fh-grupo-head { break-after: avoid; page-break-after: avoid; }
}

/* Marcas de fichada en Ficha de horas: texto plano "E:07:55" (sin caja). */
.report-doc .fh-badge { display: inline; padding: 0; margin-right: 4pt; font-size: 8pt; white-space: nowrap; }
/* Renglón de a dos marcas: la columna no crece con la cantidad de
   fichadas del día, así el PDF sigue entrando en el ancho de la hoja. */
.report-doc .fh-linea { white-space: nowrap; line-height: 1.35; }
.report-doc .fh-linea .fh-badge:last-child { margin-right: 0; }

/* Marcas / estados: texto plano, sin caja de color (estética de los modelos) */
.report-doc .pill {
  display: inline;
  padding: 0;
  background: none;
  color: inherit;
  font-weight: inherit;
  white-space: nowrap;
}

/* Resumen por causa de ausentismo (Ficha de horas) */
.fh-resumen { margin: 8pt 0 2pt; }
.fh-resumen-h {
  font-size: 8.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  margin-bottom: 4pt;
}

/* Estado vacío */
.rpt-vacio { text-align: center; padding: 40pt 0; color: #94A3B8; }
.rpt-vacio b { display: block; font-size: 11pt; color: #475569; margin-bottom: 3pt; }

/* ---- Overlay "Generando…" al exportar (PDF/Excel) ---- */
.report-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.report-overlay.visible { display: flex; }
.report-overlay-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  padding: 2.5rem 3rem;
  text-align: center;
  max-width: 360px;
  width: calc(100% - 2rem);
}
.report-overlay-card .spin-icon {
  width: 56px;
  height: 56px;
  color: var(--primary-red);
  margin-bottom: 1rem;
}
.report-overlay-card .report-overlay-icon-error {
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
}
.report-overlay-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0 0 0.35rem;
}
.report-overlay-msg {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin: 0 0 1.25rem;
}

/* ---- Report status badge classes (inline, no wrapper needed) ---- */
.report-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}
/* .status-normal and .status-ausente already exist above */
.status-licencia       { background: #dbeafe; color: #1e40af; }
.status-feriado        { background: #e0f2fe; color: #075985; }
.status-pendiente      { background: #fefce8; color: #854d0e; }
.status-tarde,
.status-temprano,
.status-tarde_temprano { background: #fef9c3; color: #854d0e; }
.status-inconsistente  { background: #fef2f2; color: #991b1b; }
.status-sin_turno      { background: var(--gray-100); color: var(--gray-500); }
/* Observaciones por fila (reportes Tardes/Ausentes y Fuera de Estándar) */
.status-llegada_tarde,
.status-salida_anticipada,
.status-salida_intermedia { background: #fef9c3; color: #854d0e; }
.status-ausente_parcial   { background: #ffedd5; color: #9a3412; }
.status-fuera_horario     { background: #ede9fe; color: #5b21b6; }
.status-falta_entrada     { background: #ffe5d9; color: #9c2b00; }
.status-falta_salida      { background: #dbeafe; color: #1d4ed8; }
.status-en_curso          { background: #ecfdf5; color: #047857; }
.status-ausente_parcial,
.status-llegada_tarde,
.status-salida_anticipada,
.status-salida_intermedia,
.status-fuera_horario { white-space: nowrap; }

/* Fichada type/channel badges */
.badge-entrada { background: #dcfce7; color: #166534; }
.badge-salida  { background: #fee2e2; color: #991b1b; }
.badge-reloj   { background: #d1ecf1; color: #0c5460; }
.badge-qr      { background: #e0f2fe; color: #075985; }
.badge-online  { background: #dcfce7; color: #166534; }
.badge-manual  { background: #fef9c3; color: #854d0e; }

/* Light semantic backgrounds used in ficha/presente tables */
.bg-success-light { background: #d4edda; color: #155724; }
.bg-danger-light  { background: #f8d7da; color: #721c24; }

.ficha-marca-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  align-items: flex-start;
}
.ficha-marca-item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}
.ficha-marca-origen {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gray-500);
  line-height: 1.2;
  padding-left: 0.1rem;
}

/* Fuera-estandar missing-stamp badges */
.status-falta-entrada { background: #ffe5d9; color: #9c2b00; }
.status-falta-salida  { background: #dbeafe; color: #1d4ed8; }

/* Small muted helper */
.text-muted-sm { color: var(--gray-500); font-size: 0.85rem; }

/* ---- Loading spinner & indeterminate progress ---- */
.spin-icon { animation: spin 2s linear infinite; display: inline-block; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.progress-bar-container {
  width: 100%;
  height: 8px;
  background: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.progress-bar-fill-indeterminate {
  width: 40%;
  height: 100%;
  background: var(--primary-red);
  position: absolute;
  animation: indeterminate 1.5s infinite linear;
  border-radius: 4px;
}
@keyframes indeterminate {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* ---- Flatpickr overrides (date pickers throughout the app) ---- */
.flatpickr-wrapper { display: block; width: 100%; }
.dt-picker,
.date-picker    { font-family: inherit; }
.flatpickr-input { font-family: inherit; }
.flatpickr-calendar {
  font-family: inherit;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
  overflow: hidden;
}
.flatpickr-months { border-bottom: 1px solid #eef2f7; }
.flatpickr-current-month { font-weight: 800; color: var(--gray-800); }
.flatpickr-weekday  { color: var(--gray-500); font-weight: 700; }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange { background: var(--primary-red); border-color: var(--primary-red); }
.flatpickr-day.today { border-color: var(--primary-red); }
.fp-quickbar {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem;
  border-top: 1px solid #eef2f7;
  background: var(--white);
}
.fp-quickbtn {
  appearance: none;
  border: 1px solid var(--border-color);
  background: var(--gray-50);
  color: var(--gray-700);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition-fast);
}
.fp-quickbtn:hover { border-color: var(--primary-red); color: var(--primary-red); background: var(--white); }

/* ---- Report param form: style Django-rendered inputs by type ---- */
.report-params-form .row {
  row-gap: 1.25rem;
}
.report-params-form .col-4,
.report-params-form .col-6,
.report-params-form .col-12 {
  margin-bottom: 0;
}
.report-params-form .form-label {
  margin-bottom: 0.5rem;
  margin-left: 0;
  padding-left: 0;
}
.report-params-form .legajo-rango-sublabel {
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 0.25rem;
  margin-bottom: 0;
  color: var(--gray-600);
}
.report-params-form input[type="date"],
.report-params-form input[type="text"],
.report-params-form input[type="number"],
.report-params-form select,
.report-params-form .form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--gray-50);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--gray-800);
  transition: var(--transition-fast);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  line-height: 1.5;
  margin-left: 0;
}
.report-params-form .flatpickr-wrapper {
  margin-left: 0;
}
.report-params-form input[type="date"]:focus,
.report-params-form input[type="text"]:focus,
.report-params-form input[type="number"]:focus,
.report-params-form select:focus,
.report-params-form .form-input:focus {
  outline: none;
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px rgba(198,40,40,0.1);
  background: var(--white);
}
.report-params-form input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.report-params-form input[type="number"]::-webkit-inner-spin-button,
.report-params-form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- Print / PDF (WeasyPrint) ----
   El bloque @page con encabezado/pie corridos y "Página X de Y" vive inline en
   report_base.html (necesita {{ today }} de Django). Acá solo se oculta el
   chrome del sitio y se aplana la hoja del reporte para que impreso == pantalla. */
.no-print { }
@media print {
  .main-header, .main-footer, .report-actions, .sidebar,
  .help-panel, .help-panel-backdrop, .sidebar-backdrop,
  .nav-dropdown-menu, #notif-dropdown,
  .no-print { display: none !important; }
  /* body es display:flex (ver #3. RESET & BASE) para el sticky footer en
     pantalla — WeasyPrint no fragmenta contenedores flex entre páginas, así
     que un reporte de PDF con más contenido que una página se corta a mitad
     y el resto queda en blanco. Volver a block solo para impresión/PDF. */
  body { display: block !important; background: white !important; padding: 0 !important; margin: 0 !important; }
  .container, .container-report { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  /* Hoja del reporte plana (sin sombra/borde/padding) en el PDF. */
  .report-doc { box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; overflow: visible !important; }
  .fh-table { min-width: 0 !important; }
  /* Compat: reportes antiguos (auditoría) que aún usan .report-card/.report-table. */
  .report-card { box-shadow: none !important; border: none !important; }
  .report-table th,
  .report-table td { border-color: #ccc !important; font-size: 0.8rem; padding: 0.4rem 0.5rem; }
  .report-table thead { display: table-header-group; }
  .employee-report-section,
  .report-day-section,
  .day-report-section { page-break-inside: avoid; }
  .report-section-heading { page-break-after: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* ===================================================
   34. RESPONSIVE
   =================================================== */
@media (max-width: 1023px) {
  .dashboard-container {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 0;
  }

  .has-sidebar .nav-hamburger { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    min-width: 280px;
    z-index: 1050;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--border-color);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
  }

  .sidebar.drawer-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }

  .dashboard-main { padding: 1.25rem 0; }
}

@media (max-width: 768px) {
  .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-12 { flex: 0 0 100%; }
  .mb-md-0 { margin-bottom: 0 !important; }
  .row { margin: 0; }
  .row > [class*="col-"] { padding: 0; }
}

@media (max-width: 640px) {
  .container     { padding: 0 1rem; }
  .main-content  { padding: 1.25rem 0 2rem; }
  .card-toolbar  { flex-direction: column; align-items: stretch; }
  .search-form   { width: 100%; }
  .page-header   { gap: 0.75rem; }
  .page-title    { font-size: 1.25rem; }
  .stats-grid    { grid-template-columns: 1fr 1fr; }
  .section-header{ flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .form-actions-bar { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .col-4, .col-6 { flex: 0 0 100%; }

  /* Columnas secundarias de tablas ocultas en mobile */
  .col-hide-mobile { display: none; }
}

@media (max-width: 480px) {
  .stats-grid         { grid-template-columns: 1fr; }
  .modal-box          { padding: 1.5rem; }
  .acciones-legajo-bar{ flex-direction: column; }
  .quick-actions-grid { grid-template-columns: 1fr; }
}

/* ===================================================
   35. MOBILE NAVIGATION
   =================================================== */

/* On < 768px: show icon-only nav to prevent header overflow */
@media (max-width: 767px) {
  /* Badge (System Admin / Portal Legajo) is too wide on mobile */
  .main-header .badge { display: none; }

  /* Dashboard/Mi Portal link is redundant with logo on mobile — hide it */
  .nav-home-link { display: none; }

  /* Hide nav-label text spans — icons remain visible via width/height */
  .nav-label { display: none; }

  /* Tighten nav item padding and remove icon gap */
  .nav-menu > li > a,
  .nav-menu > li > .nav-dropdown-trigger {
    gap: 0;
    padding: 0.5rem 0.375rem;
  }
  .nav-menu .nav-icon  { margin-right: 0; }
  .nav-icon-sm         { display: none; }  /* hide dropdown chevron-down */

  /* Dropdown menus: keep inside viewport on right-anchored items */
  .nav-dropdown-menu {
    right: 0;
    left: auto;
    min-width: 200px;
    max-width: calc(100vw - 1rem);
  }

  /* Impersonation banner: allow text to wrap on narrow screens */
  .impersonation-banner {
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    gap: 0.375rem;
    font-size: 0.75rem;
    text-align: center;
    justify-content: center;
  }

  /* Page header actions: stack vertically */
  .page-header-actions { flex-wrap: wrap; }

  /* Legajo tabs: allow wrapping and smaller font */
  .legajo-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .legajo-tab  { font-size: 0.8rem; padding: 0.6rem 0.875rem; }
}

/* On < 480px: slim down logo further */
@media (max-width: 479px) {
  .logo-text    { font-size: 1rem; }
  .header-logo  { height: 22px; }
}

/* ── Horario assignment cards grid (empleado_form) ──────────────── */
.horario-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .horario-cards-grid { grid-template-columns: 1fr; }
}

/* ── Report responsive fixes ─────────────────────────────────────── */
@media (max-width: 640px) {
  .report-title-row    { flex-direction: column; gap: 0.75rem; }
  .report-info-grid    { grid-template-columns: 1fr; }
  .report-info-span-2  { grid-column: span 1; }
  .report-actions      { flex-wrap: wrap; }
  .report-content-padding { padding: 1rem; }
  .report-header-box   { padding: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Panel flotante de ayuda contextual
   ═══════════════════════════════════════════════════════════════ */

/* Backdrop semitransparente */
.help-panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1040;
  animation: helpBackdropIn 0.2s ease;
}
.help-panel-backdrop.active { display: block; }

@keyframes helpBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Panel principal */
.help-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.help-panel.open { transform: translateX(0); }

/* Header */
.help-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  background: #fff;
}
.help-panel-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.help-panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.help-panel-back-btn {
  display: none;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary-red, #D32F2F);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0;
}
.help-panel-back-btn:hover { opacity: 0.75; }
.help-panel-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 0.25rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.help-panel-close-btn:hover { background: #f3f4f6; color: #111827; }

/* Barra de búsqueda */
.help-panel-search-wrapper {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  background: #fff;
}
.help-panel-search-input-wrap {
  position: relative;
}
.help-panel-search-input {
  width: 100%;
  padding: 0.6rem 2.25rem 0.6rem 2.25rem;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9rem;
  outline: none;
  background: #f9fafb;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
}
.help-panel-search-input:focus {
  border-color: var(--primary-red, #D32F2F);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(211,47,47,0.1);
}
.help-panel-search-icon {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  width: 15px;
  height: 15px;
}
.help-panel-search-clear {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  padding: 0;
  display: none;
  align-items: center;
}
.help-panel-search-clear:hover { color: #374151; }
.help-panel-search-clear.visible { display: flex; }

/* Área de contenido con scroll */
.help-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

/* Estado: Home — grid de temas frecuentes */
.help-panel-home { display: block; }
.help-panel-home-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.help-panel-topics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}
.help-panel-topic-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.875rem 0.75rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}
.help-panel-topic-btn:hover {
  border-color: var(--primary-red, #D32F2F);
  background: #fff5f5;
}
.help-panel-topic-icon {
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-red, #D32F2F);
  border: 1px solid #f0f0f0;
}
.help-panel-topic-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  line-height: 1.3;
}

/* Estado: Resultados de búsqueda */
.help-panel-results { display: none; }
.help-panel-results-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.help-panel-result-item {
  display: block;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.help-panel-result-item:hover {
  border-color: var(--primary-red, #D32F2F);
  box-shadow: 0 2px 8px rgba(211,47,47,0.08);
}
.help-panel-result-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.help-panel-result-snippet {
  font-size: 0.8rem;
  color: #6b7280;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.help-panel-no-results {
  text-align: center;
  padding: 2rem 1rem;
  color: #6b7280;
  font-size: 0.875rem;
}

/* Estado: Artículo */
.help-panel-article { display: none; }
.help-panel-article-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 1.25rem;
  padding-bottom: 0.875rem;
  border-bottom: 2px solid #f3f4f6;
}
.help-panel-article-body h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #374151;
  margin: 1.25rem 0 0.5rem;
}
.help-panel-article-body p,
.help-panel-article-body li {
  font-size: 0.85rem;
  color: #4b5563;
  line-height: 1.65;
}
.help-panel-article-body ul,
.help-panel-article-body ol {
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
}
.help-panel-article-body li { margin-bottom: 0.3rem; }
.help-panel-article-body .highlight {
  background: #fff5f5;
  color: var(--primary-red, #D32F2F);
  font-weight: 600;
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
  font-size: 0.82rem;
}
.help-panel-article-body .info-box,
.help-panel-article-body .help-note {
  font-size: 0.82rem;
}
/* Remisión a otro artículo. Se distingue del `.highlight` —que nombra un botón
   o un campo de la pantalla y no lleva a ningún lado— por el subrayado. */
.help-ref {
  color: var(--primary-red, #D32F2F);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.help-ref:hover {
  text-decoration-style: solid;
  background: #fff5f5;
  border-radius: 3px;
}

/* Footer del panel — enlace a ayuda completa */
.help-panel-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
  background: #f9fafb;
}
.help-panel-footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  color: var(--primary-red, #D32F2F);
  font-weight: 600;
  text-decoration: none;
}
.help-panel-footer-link:hover { opacity: 0.75; }

/* Responsive: en pantallas pequeñas el panel ocupa el ancho completo */
@media (max-width: 480px) {
  .help-panel { width: 100vw; }
}

/* ── Entity tabs (legajos, horarios, etc.) ───────────────────────────────── */
.legajo-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 2rem;
    gap: 0;
}
.legajo-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-500);
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.legajo-tab:hover { color: var(--gray-800); }
.legajo-tab.tab-active { color: var(--primary-red); border-bottom-color: var(--primary-red); }

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-red);
    color: #fff;
    border-radius: 999px;
    font-size: 0.68rem;
    padding: 0.05rem 0.45rem;
    min-width: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
}

.tab-panel { display: none; }
.tab-panel.tab-active { display: block; }

/* ── Estado badges (audit, etc.) ─────────────────────────────────────────── */
.badge-estado {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.badge-verde    { background: #dcfce7; color: #15803d; }
.badge-amarillo { background: #fef9c3; color: #854d0e; }
.badge-rojo     { background: #fee2e2; color: #991b1b; }

/* ── Audit diff expandible ───────────────────────────────────────────────── */
.aud-details { display: inline-block; }
.aud-summary {
    cursor: pointer;
    font-size: 0.78rem;
    color: #2563eb;
    user-select: none;
    list-style: none;
}
.aud-summary::-webkit-details-marker { display: none; }
.aud-summary::before { content: '▶ '; font-size: 0.65rem; }
details[open] .aud-summary::before { content: '▼ '; }
.aud-body {
    padding: 0.4rem 0.75rem;
    border-left: 3px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.aud-details .aud-body { margin-top: 0.4rem; }
.aud-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    font-size: 0.78rem;
}
.aud-key {
    font-weight: 600;
    color: #475569;
    min-width: 9rem;
    flex-shrink: 0;
}
.aud-antes  { color: #b91c1c; text-decoration: line-through; }
.aud-despues { color: #15803d; }
.aud-arrow  { color: #94a3b8; font-size: 0.7rem; }
.aud-val    { color: #334155; }
.aud-null   { color: #94a3b8; font-style: italic; }

/* ===================================================
   CONVENIOS — ABM y ficha de reglas
   =================================================== */

.form-help {
    font-size: 0.78rem;
    color: var(--gray-500);
    margin-top: 0.35rem;
    line-height: 1.45;
}

/* Nota explicativa al pie de una sección */
.conv-nota {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-red);
    border-radius: var(--radius-lg);
    padding: 0.9rem 1.1rem;
    font-size: 0.82rem;
    color: var(--gray-700);
    line-height: 1.55;
}
.conv-nota i { flex-shrink: 0; margin-top: 2px; color: var(--gray-500); }
.conv-nota p { margin: 0 0 0.45rem; }
.conv-nota p:last-child { margin-bottom: 0; }

/* ── Caja de una regla ─────────────────────────────────────────────────── */
.conv-reglas { display: flex; flex-direction: column; gap: 1.25rem; }

.conv-regla {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.conv-regla:focus-within { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07); }
/* La caja marcada para borrar se atenúa sin desaparecer: el borrado recién
   ocurre al guardar y hay que poder revertirlo. */
.conv-regla.is-borrando { opacity: 0.45; }

.conv-regla-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--border-color);
}
.conv-regla-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border-color);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
}
.conv-regla-titulo {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-700);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-regla-titulo .muted { font-weight: 400; color: var(--gray-500); }
.conv-regla-body { padding: 1.25rem; }
.conv-regla-body .row + .row { margin-top: 0.25rem; }

/* Franja de días, separada del resto */
.conv-regla-dias {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color);
}

/* ── Controles ─────────────────────────────────────────────────────────── */
.conv-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--gray-700);
    cursor: pointer;
    /* Alinea con la altura de un form-input de la misma fila */
    min-height: 2.4rem;
}
.conv-check input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; flex-shrink: 0; }

.conv-regla-borrar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--gray-500);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
}
.conv-regla-borrar:hover { color: #b91c1c; border-color: #fecaca; background: #fff1f2; }
.conv-regla-borrar input[type="checkbox"] { width: 0.9rem; height: 0.9rem; margin: 0; }

.regla-dias-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}
.regla-dias-list li { margin: 0; }
/* Cada día es un chip que se pinta al tildarse: siete checkboxes sueltos en
   fila se leen como una lista y no como un selector. */
.regla-dias-list label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--gray-700);
    cursor: pointer;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
}
.regla-dias-list label:hover { border-color: #cbd5e1; background: var(--gray-50); }
.regla-dias-list label:has(input:checked) {
    border-color: var(--primary-red);
    background: #fff5f5;
    color: var(--gray-700);
    font-weight: 600;
}
.regla-dias-list input[type="checkbox"] { width: 0.9rem; height: 0.9rem; margin: 0; }

/* ── Ficha de sólo lectura ─────────────────────────────────────────────── */
.conv-ver-grid { display: flex; flex-direction: column; gap: 1rem; }

.conv-ver-regla {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
}
.conv-ver-regla .conv-regla-num { margin-top: 0.1rem; }
.conv-ver-cuerpo { flex: 1; min-width: 0; }
.conv-ver-nombre {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* Los atributos de la regla en pares etiqueta/valor, no en prosa: se comparan
   dos reglas a golpe de vista. */
.conv-ver-atributos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.7rem 1.5rem;
}
.conv-ver-atributo { min-width: 0; }
.conv-ver-k {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    margin-bottom: 0.15rem;
}
.conv-ver-v { font-size: 0.85rem; color: var(--gray-700); }
.conv-ver-v.is-off { color: var(--gray-500); font-style: italic; }

.conv-pill-tipo {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--gray-50);
    color: var(--gray-500);
}
.conv-pill-tipo.is-adicional { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.conv-pill-tipo.is-activo    { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }

/* Contenedor de pills: sin él quedan pegadas, porque son inline sin margen */
.conv-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.conv-vacio {
    padding: 1.5rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.88rem;
    background: var(--gray-50);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
}

/* ── Explicación del convenio en lenguaje de negocio ─────────────────────
   La escribe el SysAdmin con el marcado simple de `core/markup.py` y la leen
   dos pantallas: la ficha del convenio y la ventana del legajo. La tipografía
   se calca del panel de ayuda, que resuelve este mismo problema más arriba en
   esta hoja: es texto corrido de lectura, no una tabla de configuración. */
.conv-desc-textarea {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.85rem;
    line-height: 1.6;
    resize: vertical;
}
.conv-desc-nombre {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    margin: 0 0 0.75rem;
}
.conv-desc-body p,
.conv-desc-body li {
    font-size: 0.88rem;
    color: #4b5563;
    line-height: 1.65;
}
.conv-desc-body p { margin: 0 0 0.85rem; }
.conv-desc-body p:last-child { margin-bottom: 0; }
.conv-desc-titulo {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    /* El margen superior es mayor que el inferior para que el subtítulo quede
       atado al texto que abre y separado del que cierra la sección anterior. */
    margin: 1.5rem 0 0.6rem;
}
.conv-desc-body > .conv-desc-titulo:first-child { margin-top: 0; }
.conv-desc-lista {
    padding-left: 1.25rem;
    margin: 0 0 0.85rem;
}
.conv-desc-lista li { margin-bottom: 0.3rem; }
.conv-desc-lista li:last-child { margin-bottom: 0; }

/* ── Responsive: las filas de controles pasan a columna ────────────────── */
@media (max-width: 768px) {
    .conv-regla-head { flex-wrap: wrap; }
    .conv-regla-titulo { white-space: normal; }
    .conv-ver-regla { flex-direction: column; gap: 0.75rem; }
    .conv-ver-atributos { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ===================================================
   FICHA DE SOLO LECTURA (legajo)
   Datos ya cargados, mostrados como información y no
   como campos: mismas secciones que la edición, sin
   nada que parezca editable.
   =================================================== */
.ro-rows {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--white);
    margin: 0;
}
.ro-row {
    display: flex;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--gray-100);
}
.ro-row:last-child { border-bottom: none; }
.ro-row:nth-child(even) { background: var(--gray-50); }
.ro-row dt {
    flex: 0 0 210px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-500);
    margin: 0;
}
.ro-row dd {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
}
.ro-row dd.ro-empty { color: var(--gray-400); font-weight: 500; }
/* Filas que listan cosas (puntos, por ejemplo): el nombre manda, no la etiqueta. */
.ro-row--item dt { color: var(--gray-900); font-size: 0.9375rem; font-weight: 700; }
.ro-row--item dd { font-weight: 500; }

/* Un valor con una acción al lado (el convenio y su "Ver reglas", por ejemplo). */
.ro-row dd.ro-dd-con-accion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    /* Ocupa el ancho que queda para que la acción cierre contra el margen. */
    flex: 1 1 auto;
}

/* Un valor que abre una ventana con más detalle (el horario, por ejemplo). */
.ro-link {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--primary-red);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.ro-link:hover { text-decoration: underline; }

.ro-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.ro-section-head i,
.ro-section-head svg { width: 24px; height: 24px; flex-shrink: 0; }

@media (max-width: 640px) {
    .ro-row { flex-direction: column; gap: 0.15rem; }
    .ro-row dt { flex: none; }
}