/* ==========================================================================
   SC8TIME DESIGN SYSTEM v3.0 — «Pristine SaaS Precision» (familia SC8)
   Mismo lenguaje visual que SC8Maintain: capas planas, azul solo para lo principal,
   turquesa como acento de estado, tipografía Geist. Densidad compacta CORA y WCAG AA.
   ========================================================================== */

/* ── 1. DESIGN TOKENS ────────────────────────────────────────────────────── */

:root {
  /* Capas: fondo, superficie y neutros */
  --sc8-bg-canvas: #F8FAFC;          /* background — lienzo de página */
  --sc8-bg-surface: #FFFFFF;         /* surface — tarjetas, paneles, menú lateral */
  --sc8-bg-subtle: #F1F5F9;          /* subtle — fondos neutros, pistas */
  --sc8-bg-hover: #F1F5F9;           /* hover de elementos interactivos */
  --sc8-bg-active: #E2E8F0;          /* pulsado */

  /* Texto */
  --sc8-text-primary: #0F172A;       /* ink — títulos y datos (17.8:1) */
  --sc8-text-secondary: #475569;     /* ink-muted — subtítulos y etiquetas (7.6:1) */
  --sc8-text-tertiary: #64748B;      /* metadatos (4.8:1) */
  --sc8-text-muted: #94A3B8;         /* ink-faint — marcadores, desactivado */
  --sc8-text-inverse: #FFFFFF;

  /* Bordes */
  --sc8-border-subtle: #F1F5F9;      /* separadores de filas */
  --sc8-border-default: #E2E8F0;     /* line — tarjetas y tablas */
  --sc8-border-strong: #CBD5E1;      /* line-strong — campos, hover */
  --sc8-border-focus: #1D55D5;

  /* Marca SC8 */
  --sc8-brand-navy: #0E1B2E;         /* navy — texto sobre píldoras turquesa, código */
  --sc8-brand-navy-light: #1E2B40;
  --sc8-brand-blue: #1D55D5;         /* primary — acción principal, activo, foco */
  --sc8-brand-blue-hover: #1746B3;
  --sc8-brand-blue-active: #123891;
  --sc8-brand-blue-rgb: 29, 85, 213;
  --sc8-brand-blue-subtle: #EFF4FF;  /* primary-soft — avisos informativos */
  --sc8-brand-blue-tint: #E6EEFF;    /* primary-tint — elemento activo del menú */
  --sc8-accent: #20BFC5;             /* turquesa — puntos, píldoras, iconos (nunca texto pequeño) */
  --sc8-accent-soft: #E3F7F8;
  --sc8-accent-ink: #00696D;         /* turquesa legible para texto (6.4:1) */
  --sc8-accent-bright: #6EF6FC;
  --sc8-brand-cyan: var(--sc8-accent);

  /* Estados (entrada / pausa / salida conservan su significado) */
  --sc8-status-success: #047857;
  --sc8-status-success-hover: #065F46;
  --sc8-status-success-rgb: 4, 120, 87;
  --sc8-status-success-bg: #ECFDF5;
  --sc8-status-success-text: #065F46;

  --sc8-status-warning: #D97706;
  --sc8-status-warning-hover: #B45309;
  --sc8-status-warning-rgb: 217, 119, 6;
  --sc8-status-warning-bg: #FFFBEB;
  --sc8-status-warning-text: #92400E;

  --sc8-status-danger: #B91C1C;
  --sc8-status-danger-hover: #991B1B;
  --sc8-status-danger-rgb: 185, 28, 28;
  --sc8-status-danger-bg: #FEF2F2;
  --sc8-status-danger-text: #991B1B;

  --sc8-status-info: var(--sc8-accent);
  --sc8-status-info-bg: var(--sc8-accent-soft);
  --sc8-status-info-text: var(--sc8-accent-ink);

  /* Tipografía */
  --sc8-font-sans: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sc8-font-mono: 'Geist Mono', 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --sc8-fs-body: 0.875rem;           /* 14 px */
  --sc8-fs-label: 0.8125rem;         /* label-md 13 px */
  --sc8-fs-eyebrow: 0.6875rem;       /* label-sm 11 px, mayúsculas */

  /* Espaciado (base 4 px) */
  --sc8-space-1: 4px;
  --sc8-space-2: 8px;
  --sc8-space-3: 12px;
  --sc8-space-4: 16px;
  --sc8-space-5: 20px;
  --sc8-space-6: 24px;
  --sc8-space-8: 32px;
  --sc8-space-10: 40px;
  --sc8-space-12: 48px;

  /* Radios: botones y campos 8 px · tarjetas y diálogos 10 px · grandes 16 px */
  --sc8-radius-sm: 6px;
  --sc8-radius-md: 8px;
  --sc8-radius-lg: 10px;
  --sc8-radius-xl: 16px;
  --sc8-radius-pill: 9999px;

  /* Sombras mínimas */
  --sc8-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sc8-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05);   /* card */
  --sc8-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07);                                       /* hover */
  --sc8-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04); /* pop */
  --sc8-shadow-modal: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --sc8-shadow-punch: 0 10px 25px -3px rgba(var(--sc8-brand-blue-rgb), 0.35);
  --sc8-focus-ring: 0 0 0 3px rgba(var(--sc8-brand-blue-rgb), 0.15);

  /* Estructura */
  --sc8-sidebar-w: 260px;
  --sc8-topbar-h: 56px;
  --sc8-mobile-nav-h: 64px;

  /* Transiciones */
  --sc8-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --sc8-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Bootstrap 5 */
  --bs-body-font-family: var(--sc8-font-sans);
  --bs-body-font-size: var(--sc8-fs-body);
  --bs-body-bg: var(--sc8-bg-canvas);
  --bs-body-color: var(--sc8-text-primary);
  --bs-secondary-color: var(--sc8-text-secondary);
  --bs-primary: var(--sc8-brand-blue);
  --bs-primary-rgb: var(--sc8-brand-blue-rgb);
  --bs-primary-bg-subtle: var(--sc8-brand-blue-subtle);
  --bs-primary-border-subtle: #C7D7FA;
  --bs-primary-text-emphasis: var(--sc8-brand-blue-active);
  --bs-link-color: var(--sc8-brand-blue);
  --bs-link-color-rgb: var(--sc8-brand-blue-rgb);
  --bs-link-hover-color: var(--sc8-brand-blue-hover);
  --bs-success: var(--sc8-status-success);
  --bs-success-rgb: var(--sc8-status-success-rgb);
  --bs-warning: var(--sc8-status-warning);
  --bs-warning-rgb: var(--sc8-status-warning-rgb);
  --bs-danger: var(--sc8-status-danger);
  --bs-danger-rgb: var(--sc8-status-danger-rgb);
  --bs-info: var(--sc8-accent);
  --bs-info-rgb: 32, 191, 197;
  --bs-info-bg-subtle: var(--sc8-accent-soft);
  --bs-info-border-subtle: #B4E9EB;
  --bs-info-text-emphasis: var(--sc8-accent-ink);
  --bs-border-radius: var(--sc8-radius-md);
  --bs-border-radius-lg: var(--sc8-radius-lg);
  --bs-border-radius-xl: var(--sc8-radius-xl);
  --bs-border-color: var(--sc8-border-default);
  --bs-focus-ring-color: rgba(var(--sc8-brand-blue-rgb), 0.15);
}

/* ── 2. SC8TIME PRO DARK MODE (PREPARED TOKENS) ──────────────────────────── */

[data-bs-theme="dark"] {
  --sc8-bg-canvas: #0C101C;
  --sc8-bg-surface: #151B2E;
  --sc8-bg-subtle: #1C243B;
  --sc8-bg-hover: #26314D;
  --sc8-bg-active: #324065;

  --sc8-text-primary: #F8FAFC;
  --sc8-text-secondary: #CBD5E1;
  --sc8-text-tertiary: #94A3B8;
  --sc8-text-muted: #64748B;

  --sc8-border-subtle: #192138;
  --sc8-border-default: #222C46;
  --sc8-border-strong: #2F3D61;

  --sc8-brand-blue-subtle: rgba(var(--sc8-brand-blue-rgb), 0.18);
  --sc8-status-success-bg: rgba(5, 150, 105, 0.18);
  --sc8-status-success-text: #34D399;
  --sc8-status-warning-bg: rgba(217, 119, 6, 0.18);
  --sc8-status-warning-text: #FBBF24;
  --sc8-status-danger-bg: rgba(220, 38, 38, 0.18);
  --sc8-status-danger-text: #F87171;
  --sc8-status-info-bg: rgba(32, 191, 197, 0.18);
  --sc8-status-info-text: #38BDF8;

  --bs-body-bg: var(--sc8-bg-canvas);
  --bs-body-color: var(--sc8-text-primary);
  --bs-border-color: var(--sc8-border-default);
}

/* ── 3. BASE & ACCESSIBILITY ─────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--sc8-font-sans);
  background-color: var(--sc8-bg-canvas);
  color: var(--sc8-text-primary);
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* Focus Visible Accessible Styling */
:focus-visible {
  outline: 2px solid var(--sc8-border-focus) !important;
  outline-offset: 2px !important;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a {
  color: var(--sc8-brand-blue);
  text-decoration: none;
  transition: color var(--sc8-transition-fast);
}
a:hover {
  color: var(--sc8-brand-blue-hover);
}

/* ── 4. TYPOGRAPHY ───────────────────────────────────────────────────────── */
/* Geist: títulos en seminegrita con tracking negativo, cuerpo de 14 px, etiquetas de 11 px. */

h1, .h1 {
  font-size: 1.75rem;   /* 28px */
  font-weight: 600;
  color: var(--sc8-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.28;
}

h2, .h2 {
  font-size: 1.375rem;  /* 22px */
  font-weight: 600;
  color: var(--sc8-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

h3, .h3 {
  font-size: 1.125rem;  /* 18px */
  font-weight: 600;
  color: var(--sc8-text-primary);
  letter-spacing: -0.015em;
  line-height: 1.35;
}

h4, h5, h6, .h4, .h5, .h6 {
  font-weight: 600;
  color: var(--sc8-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.fw-bold, .fw-bolder { letter-spacing: -0.005em; }

/* Cabecera de página (page-header): título a la izquierda, acciones a la derecha */
.sc8-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sc8-space-3) var(--sc8-space-6);
  margin-bottom: var(--sc8-space-5);
}
.sc8-page-header-text {
  flex: 1 1 20rem;
  min-width: 0;
}
.sc8-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc8-space-2);
}
.sc8-page-title-icon {
  color: var(--sc8-brand-blue);
  margin-right: 10px;
  font-size: 0.85em;
}
.sc8-page-title {
  font-size: 1.5rem;    /* 24px */
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sc8-text-primary);
  margin-bottom: 2px;
}
.sc8-page-subtitle {
  font-size: var(--sc8-fs-body);
  color: var(--sc8-text-secondary);
  margin: 0;
}

/* Etiqueta de sección en mayúsculas (eyebrow de SC8Maintain) */
.sc8-eyebrow {
  font-size: var(--sc8-fs-eyebrow);
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sc8-text-tertiary);  /* 4.8:1 (AA); el ink-faint de SC8Maintain no llega */
}
.sc8-section-title {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sc8-text-primary);
  margin: 0;
}
code, kbd, samp, .font-monospace { font-family: var(--sc8-font-mono); }

/* ── 5. LAYOUT: BARRA SUPERIOR + MENÚ LATERAL (familia SC8) ─────────────── */
/* Barra superior fija de 56 px a todo el ancho; menú lateral blanco de 260 px fijo desde
   992 px y cajón por debajo. Los ids (#sc8Sidebar, #sc8MobileMenuBtn, #sc8SidebarOverlay)
   se mantienen porque los usan sc8time.js y los tests. */

.sc8-layout {
  display: flex;
  min-height: 100vh;
}
.sc8-layout-auth {
  padding-top: var(--sc8-topbar-h);
}

/* Barra superior */
.sc8-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1045;
  height: var(--sc8-topbar-h);
  padding: 0 var(--sc8-space-5);
  background-color: var(--sc8-bg-surface);
  border-bottom: 1px solid var(--sc8-border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc8-space-3);
}
.sc8-topbar-left,
.sc8-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sc8-space-3);
  min-width: 0;
}
.sc8-topbar-right { flex-shrink: 0; }
.sc8-topbar-divider {
  width: 1px;
  height: 20px;
  background-color: var(--sc8-border-default);
}

.sc8-logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.sc8-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--sc8-radius-md);
  background-color: var(--sc8-brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: inset 0 -3px 0 var(--sc8-accent);
}
.sc8-logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sc8-brand-blue);
  letter-spacing: -0.03em;
  line-height: 1;
}
.sc8-logo-text span {
  color: var(--sc8-text-primary);
}

/* Píldora con la empresa activa (como el código de empresa de SC8Maintain) */
.sc8-company-pill {
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 3px 10px;
  border-radius: var(--sc8-radius-pill);
  background-color: var(--sc8-accent-soft);
  border: 1px solid rgba(32, 191, 197, 0.35);
  color: var(--sc8-brand-navy);
  font-size: var(--sc8-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sc8-company-pill i { color: var(--sc8-accent-ink); }

.sc8-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sc8-user-initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--sc8-brand-blue-tint);
  border: 1px solid rgba(var(--sc8-brand-blue-rgb), 0.2);
  color: var(--sc8-brand-blue);
  font-size: var(--sc8-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sc8-user-text {
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.sc8-user-name {
  font-size: var(--sc8-fs-label);
  font-weight: 600;
  color: var(--sc8-text-primary);
  white-space: nowrap;
}
.sc8-user-role {
  font-size: 0.75rem;
  color: var(--sc8-text-secondary);
  white-space: nowrap;
}

/* Botón de solo icono (icon-btn) */
.sc8-icon-btn,
.sc8-mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--sc8-radius-md);
  background: none;
  color: var(--sc8-text-muted);
  font-size: 1.15rem;
  cursor: pointer;
  transition: background-color var(--sc8-transition-fast), color var(--sc8-transition-fast);
}
.sc8-icon-btn:hover,
.sc8-mobile-menu-btn:hover {
  background-color: var(--sc8-bg-subtle);
  color: var(--sc8-text-primary);
}
.sc8-mobile-menu-btn {
  display: none;
  color: var(--sc8-text-secondary);
  font-size: 1.35rem;
}

/* Menú lateral */
.sc8-sidebar {
  position: fixed;
  left: 0;
  top: var(--sc8-topbar-h);
  bottom: 0;
  width: var(--sc8-sidebar-w);
  background-color: var(--sc8-bg-surface);
  border-right: 1px solid var(--sc8-border-default);
  color: var(--sc8-text-primary);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: transform var(--sc8-transition);
}
.sc8-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--sc8-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--sc8-space-4);
}
.sc8-sidebar-cta { min-height: 40px; }

.sc8-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sc8-space-4);
}
.sc8-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--sc8-space-4);
  border-top: 1px solid var(--sc8-border-default);
}
.sc8-sidebar-group-title {
  font-size: var(--sc8-fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sc8-text-tertiary);
  padding: 0 4px 6px;
}

.sc8-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--sc8-radius-md);
  border-left: 2px solid transparent;
  color: var(--sc8-text-secondary);
  font-size: var(--sc8-fs-label);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--sc8-transition-fast), color var(--sc8-transition-fast);
  min-height: 36px;
}
.sc8-sidebar-link i {
  font-size: 1.05rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--sc8-text-muted);
}
.sc8-sidebar-link:hover {
  color: var(--sc8-text-primary);
  background-color: var(--sc8-bg-canvas);
}
.sc8-sidebar-link.active {
  color: var(--sc8-brand-blue);
  background-color: var(--sc8-brand-blue-tint);
  border-left-color: var(--sc8-brand-blue);
  font-weight: 600;
}
.sc8-sidebar-link.active i {
  color: var(--sc8-brand-blue);
}

.sc8-sidebar-footer {
  padding: var(--sc8-space-3) var(--sc8-space-4);
  border-top: 1px solid var(--sc8-border-default);
  background-color: var(--sc8-bg-canvas);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc8-space-2);
}
.sc8-sidebar-footer-company {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sc8-sidebar-footer-company > i { color: var(--sc8-text-muted); font-size: 1.05rem; }
.sc8-sidebar-footer-name {
  display: block;
  font-size: var(--sc8-fs-label);
  font-weight: 600;
  color: var(--sc8-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc8-sidebar-footer-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--sc8-text-secondary);
}
.sc8-sidebar-footer-meta i { color: var(--sc8-status-success); }
.sc8-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--sc8-accent);
}

.sc8-sidebar-overlay {
  display: none;
  position: fixed;
  inset: var(--sc8-topbar-h) 0 0 0;
  background-color: rgba(15, 23, 42, 0.4);
  z-index: 1035;
}
.sc8-sidebar-overlay.active {
  display: block;
}

/* Contenido */
.sc8-main-container {
  flex: 1;
  min-width: 0;   /* sin esto el contenedor flex crece con tablas anchas y desborda la página */
  display: flex;
  flex-direction: column;
  margin-left: var(--sc8-sidebar-w);
}
.sc8-main-container.sc8-main-fullwidth {
  margin-left: 0 !important;
}

.sc8-main {
  flex: 1;
  padding: var(--sc8-space-6) var(--sc8-space-8);
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}
.sc8-main-auth {
  padding: 0;
  max-width: 100%;
}

/* Cajón por debajo de 992 px */
@media (max-width: 991.98px) {
  .sc8-sidebar {
    transform: translateX(-100%);
  }
  .sc8-sidebar.sc8-sidebar-open {
    transform: translateX(0);
    box-shadow: var(--sc8-shadow-modal);
  }
  .sc8-main-container {
    margin-left: 0 !important;
  }
  .sc8-mobile-menu-btn {
    display: inline-flex;
  }
  .sc8-main {
    padding: var(--sc8-space-5);
  }
}

/* ── 6. CARDS & BENTO GRID ────────────────────────────────────────────────── */

.sc8-card {
  background-color: var(--sc8-bg-surface);
  border: 1px solid var(--sc8-border-default);
  border-radius: var(--sc8-radius-lg);
  box-shadow: var(--sc8-shadow-sm);
  padding: 20px;
  transition: box-shadow var(--sc8-transition), border-color var(--sc8-transition);
}
.sc8-card:hover {
  box-shadow: var(--sc8-shadow-md);
}

.sc8-bento-grid {
  display: grid;
  gap: var(--sc8-space-3);
}
.sc8-bento-4 { grid-template-columns: repeat(4, 1fr); }
.sc8-bento-3 { grid-template-columns: repeat(3, 1fr); }
.sc8-bento-2 { grid-template-columns: repeat(2, 1fr); }

.sc8-kpi-card {
  background-color: var(--sc8-bg-surface);
  border: 1px solid var(--sc8-border-default);
  border-radius: var(--sc8-radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--sc8-shadow-sm);
  transition: transform var(--sc8-transition), box-shadow var(--sc8-transition);
}
.sc8-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--sc8-shadow-md);
}

.sc8-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sc8-kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--sc8-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.sc8-kpi-icon-primary { background-color: var(--sc8-brand-blue-subtle); color: var(--sc8-brand-blue); }
.sc8-kpi-icon-success { background-color: var(--sc8-status-success-bg); color: var(--sc8-status-success); }
.sc8-kpi-icon-warning { background-color: var(--sc8-status-warning-bg); color: var(--sc8-status-warning); }
.sc8-kpi-icon-danger  { background-color: var(--sc8-status-danger-bg);  color: var(--sc8-status-danger); }
.sc8-kpi-icon-info    { background-color: var(--sc8-status-info-bg);    color: var(--sc8-status-info); }

.sc8-kpi-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sc8-text-tertiary);
}
.sc8-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--sc8-text-primary);
  line-height: 1.1;
  margin: 2px 0;
}
.sc8-kpi-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sc8-text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: auto;
  transition: color var(--sc8-transition-fast);
}
.sc8-kpi-link:hover {
  color: var(--sc8-brand-blue);
}

/* ── 7. PILLS & STATUS BADGES ─────────────────────────────────────────────── */

.sc8-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--sc8-radius-pill);
  font-size: 0.71875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.sc8-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.sc8-pill-success {
  background-color: var(--sc8-status-success-bg);
  color: var(--sc8-status-success-text);
  border: 1px solid rgba(5, 150, 105, 0.2);
}
.sc8-pill-success .sc8-pill-dot {
  background-color: var(--sc8-status-success);
}

.sc8-pill-warning {
  background-color: var(--sc8-status-warning-bg);
  color: var(--sc8-status-warning-text);
  border: 1px solid rgba(217, 119, 6, 0.2);
}
.sc8-pill-warning .sc8-pill-dot {
  background-color: var(--sc8-status-warning);
}

.sc8-pill-danger {
  background-color: var(--sc8-status-danger-bg);
  color: var(--sc8-status-danger-text);
  border: 1px solid rgba(220, 38, 38, 0.2);
}
.sc8-pill-danger .sc8-pill-dot {
  background-color: var(--sc8-status-danger);
}

.sc8-pill-info {
  background-color: var(--sc8-status-info-bg);
  color: var(--sc8-status-info-text);
  border: 1px solid rgba(32, 191, 197, 0.35);
}
.sc8-pill-info .sc8-pill-dot {
  background-color: var(--sc8-status-info);
}

.sc8-pill-neutral {
  background-color: var(--sc8-bg-subtle);
  color: var(--sc8-text-secondary);
  border: 1px solid var(--sc8-border-default);
}
.sc8-pill-neutral .sc8-pill-dot {
  background-color: var(--sc8-text-tertiary);
}

/* ── 8. HERO DE FICHAJE RÁPIDO (< 2 SEGUNDOS) ────────────────────────────── */

.sc8-punch-hero {
  text-align: center;
  padding: 24px 20px;
  background-color: var(--sc8-bg-surface);
  border: 1px solid var(--sc8-border-default);
  border-radius: var(--sc8-radius-lg);
  box-shadow: var(--sc8-shadow-sm);
  margin-bottom: var(--sc8-space-4);
}

.sc8-punch-clock {
  font-family: var(--sc8-font-mono);
  font-size: 2.85rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--sc8-text-primary);
  line-height: 1;
  margin-bottom: 2px;
}

.sc8-punch-date {
  font-size: 0.8125rem;
  color: var(--sc8-text-tertiary);
  font-weight: 500;
  margin-bottom: var(--sc8-space-3);
}

.sc8-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--sc8-radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: var(--sc8-space-4);
}
.sc8-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.sc8-status-working {
  background-color: var(--sc8-status-success-bg);
  color: var(--sc8-status-success-text);
  border: 1px solid rgba(5, 150, 105, 0.25);
}
.sc8-status-working .sc8-status-dot {
  background-color: var(--sc8-status-success);
  animation: sc8Pulse 2s infinite;
}

.sc8-status-paused {
  background-color: var(--sc8-status-warning-bg);
  color: var(--sc8-status-warning-text);
  border: 1px solid rgba(217, 119, 6, 0.25);
}
.sc8-status-paused .sc8-status-dot {
  background-color: var(--sc8-status-warning);
  animation: sc8Pulse 2s infinite;
}

.sc8-status-inactive {
  background-color: var(--sc8-bg-subtle);
  color: var(--sc8-text-secondary);
  border: 1px solid var(--sc8-border-default);
}
.sc8-status-inactive .sc8-status-dot {
  background-color: var(--sc8-text-tertiary);
}

.sc8-punch-actions {
  display: flex;
  justify-content: center;
  gap: var(--sc8-space-3);
  margin-bottom: var(--sc8-space-3);
  flex-wrap: wrap;
}

/* Primary Punch Button (Strictly ≥ 56px height preserved) */
.sc8-btn-punch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 32px;
  border: none;
  border-radius: var(--sc8-radius-md);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--sc8-font-sans);
  cursor: pointer;
  color: #FFF;
  transition: all var(--sc8-transition);
  touch-action: manipulation;
}
.sc8-btn-punch:hover {
  transform: translateY(-1px);
}
.sc8-btn-punch:active {
  transform: translateY(0);
}
.sc8-btn-punch:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.sc8-btn-punch i {
  font-size: 1.25rem;
}

.sc8-btn-punch-in {
  background-color: var(--sc8-status-success);
  box-shadow: 0 4px 14px rgba(var(--sc8-status-success-rgb), 0.3);
}
.sc8-btn-punch-in:hover {
  background-color: var(--sc8-status-success-hover);
  box-shadow: 0 6px 18px rgba(var(--sc8-status-success-rgb), 0.4);
}

.sc8-btn-punch-out {
  background-color: var(--sc8-status-danger);
  box-shadow: 0 4px 14px rgba(var(--sc8-status-danger-rgb), 0.3);
}
.sc8-btn-punch-out:hover {
  background-color: var(--sc8-status-danger-hover);
  box-shadow: 0 6px 18px rgba(var(--sc8-status-danger-rgb), 0.4);
}

.sc8-btn-punch-pause {
  background-color: var(--sc8-status-warning);
  color: #FFF;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);
}
.sc8-btn-punch-pause:hover {
  background-color: var(--sc8-status-warning-hover);
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.4);
}

.sc8-btn-punch-resume {
  background-color: var(--sc8-brand-blue);
  box-shadow: 0 4px 14px rgba(var(--sc8-brand-blue-rgb), 0.3);
}
.sc8-btn-punch-resume:hover {
  background-color: var(--sc8-brand-blue-hover);
  box-shadow: 0 6px 18px rgba(var(--sc8-brand-blue-rgb), 0.4);
}

.sc8-punch-last-entry {
  font-size: 0.775rem;
  color: var(--sc8-text-tertiary);
}

/* ── 9. COMPONENTES (botones, formularios, tablas, tarjetas, avisos…) ─────── */
/* Se aplican sobre las clases de Bootstrap que ya usan las plantillas, para que todas
   las pantallas adopten el lenguaje SC8 sin reescribir su HTML. */

/* 9.1 Botones — 40 px; primary (uno por zona) / secondary / ghost / danger */
.btn {
  --bs-btn-font-family: var(--sc8-font-sans);
  --bs-btn-font-size: var(--sc8-fs-body);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--sc8-radius-md);
  --bs-btn-padding-x: 16px;
  --bs-btn-padding-y: 8px;
  --bs-btn-focus-box-shadow: var(--sc8-focus-ring);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color var(--sc8-transition-fast), border-color var(--sc8-transition-fast),
              color var(--sc8-transition-fast), box-shadow var(--sc8-transition-fast);
}
.btn:focus-visible { outline: none !important; box-shadow: var(--sc8-focus-ring); }
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-x: 10px;
  --bs-btn-padding-y: 4px;
  --bs-btn-font-size: var(--sc8-fs-label);
  --bs-btn-border-radius: var(--sc8-radius-md);
  min-height: 32px;
}
.btn-xs {
  --bs-btn-padding-x: 8px;
  --bs-btn-padding-y: 2px;
  --bs-btn-font-size: 0.75rem;
  min-height: 26px;
}
.btn-lg { --bs-btn-padding-x: 20px; --bs-btn-padding-y: 10px; --bs-btn-font-size: 1rem; min-height: 46px; }

.btn-primary, .btn-premium-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sc8-brand-blue);
  --bs-btn-border-color: var(--sc8-brand-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sc8-brand-blue-hover);
  --bs-btn-hover-border-color: var(--sc8-brand-blue-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sc8-brand-blue-active);
  --bs-btn-active-border-color: var(--sc8-brand-blue-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--sc8-brand-blue);
  --bs-btn-disabled-border-color: var(--sc8-brand-blue);
  box-shadow: var(--sc8-shadow-xs);
}
/* btn-premium-primary no tenía estilos: se trata como el botón principal */
.btn-premium-primary { color: var(--bs-btn-color); background-color: var(--bs-btn-bg); border: 1px solid var(--bs-btn-border-color); }
.btn-premium-primary:hover { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); }
.btn-premium-primary:active { background-color: var(--bs-btn-active-bg); }

/* secondary: blanco con borde */
.btn-outline-secondary, .btn-secondary, .btn-light, .btn-outline-dark {
  --bs-btn-color: var(--sc8-text-primary);
  --bs-btn-bg: var(--sc8-bg-surface);
  --bs-btn-border-color: var(--sc8-border-default);
  --bs-btn-hover-color: var(--sc8-text-primary);
  --bs-btn-hover-bg: var(--sc8-bg-canvas);
  --bs-btn-hover-border-color: var(--sc8-border-strong);
  --bs-btn-active-color: var(--sc8-text-primary);
  --bs-btn-active-bg: var(--sc8-bg-subtle);
  --bs-btn-active-border-color: var(--sc8-border-strong);
  --bs-btn-disabled-color: var(--sc8-text-muted);
  --bs-btn-disabled-bg: var(--sc8-bg-surface);
  --bs-btn-disabled-border-color: var(--sc8-border-default);
}
/* Botones de selección (btn-check / .active en grupos): estado elegido en azul */
.btn-outline-secondary.active, .btn-check:checked + .btn-outline-secondary,
.btn-secondary.active, .btn-check:checked + .btn-secondary {
  color: #fff;
  background-color: var(--sc8-brand-blue);
  border-color: var(--sc8-brand-blue);
}

.btn-outline-primary {
  --bs-btn-color: var(--sc8-brand-blue);
  --bs-btn-bg: var(--sc8-bg-surface);
  --bs-btn-border-color: rgba(var(--sc8-brand-blue-rgb), 0.35);
  --bs-btn-hover-color: var(--sc8-brand-blue);
  --bs-btn-hover-bg: var(--sc8-brand-blue-subtle);
  --bs-btn-hover-border-color: var(--sc8-brand-blue);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sc8-brand-blue);
  --bs-btn-active-border-color: var(--sc8-brand-blue);
  --bs-btn-disabled-color: var(--sc8-brand-blue);
  --bs-btn-disabled-bg: transparent;
}

.btn-danger {
  --bs-btn-bg: var(--sc8-status-danger);
  --bs-btn-border-color: var(--sc8-status-danger);
  --bs-btn-hover-bg: var(--sc8-status-danger-hover);
  --bs-btn-hover-border-color: var(--sc8-status-danger-hover);
  --bs-btn-active-bg: var(--sc8-status-danger-hover);
  --bs-btn-active-border-color: var(--sc8-status-danger-hover);
  --bs-btn-disabled-bg: var(--sc8-status-danger);
  --bs-btn-disabled-border-color: var(--sc8-status-danger);
}
.btn-outline-danger {
  --bs-btn-color: var(--sc8-status-danger);
  --bs-btn-bg: var(--sc8-bg-surface);
  --bs-btn-border-color: rgba(var(--sc8-status-danger-rgb), 0.3);
  --bs-btn-hover-color: var(--sc8-status-danger);
  --bs-btn-hover-bg: var(--sc8-status-danger-bg);
  --bs-btn-hover-border-color: var(--sc8-status-danger);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sc8-status-danger);
  --bs-btn-active-border-color: var(--sc8-status-danger);
}
.btn-success {
  --bs-btn-bg: var(--sc8-status-success);
  --bs-btn-border-color: var(--sc8-status-success);
  --bs-btn-hover-bg: var(--sc8-status-success-hover);
  --bs-btn-hover-border-color: var(--sc8-status-success-hover);
  --bs-btn-active-bg: var(--sc8-status-success-hover);
  --bs-btn-active-border-color: var(--sc8-status-success-hover);
  --bs-btn-disabled-bg: var(--sc8-status-success);
  --bs-btn-disabled-border-color: var(--sc8-status-success);
}
.btn-outline-success {
  --bs-btn-color: var(--sc8-status-success);
  --bs-btn-bg: var(--sc8-bg-surface);
  --bs-btn-border-color: rgba(var(--sc8-status-success-rgb), 0.35);
  --bs-btn-hover-color: var(--sc8-status-success);
  --bs-btn-hover-bg: var(--sc8-status-success-bg);
  --bs-btn-hover-border-color: var(--sc8-status-success);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sc8-status-success);
  --bs-btn-active-border-color: var(--sc8-status-success);
}
/* ghost: sin fondo */
.btn-link {
  --bs-btn-color: var(--sc8-brand-blue);
  --bs-btn-hover-color: var(--sc8-brand-blue-hover);
  --bs-btn-font-weight: 500;
  text-decoration: none;
}
.btn-ghost {
  --bs-btn-color: var(--sc8-text-secondary);
  --bs-btn-hover-color: var(--sc8-text-primary);
  --bs-btn-hover-bg: var(--sc8-bg-subtle);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
}

/* Botón de cierre: los diálogos ahora son blancos, así que la X siempre es oscura */
.btn-close { --bs-btn-close-focus-shadow: var(--sc8-focus-ring); }
.btn-close-white { filter: none; }
.btn-close-sm { width: 0.6em; height: 0.6em; padding: 0.35em; background-size: 0.6em; }

/* 9.2 Formularios — campos de 42 px; 16 px en móvil para que iOS no amplíe */
.form-control, .form-select {
  border-radius: var(--sc8-radius-md);
  border: 1px solid var(--sc8-border-default);
  font-size: var(--sc8-fs-body);
  padding: 9px 12px;
  min-height: 42px;
  background-color: var(--sc8-bg-surface);
  color: var(--sc8-text-primary);
  transition: border-color var(--sc8-transition-fast), box-shadow var(--sc8-transition-fast);
}
.form-select { padding-right: 36px; }
.form-control:hover, .form-select:hover { border-color: var(--sc8-border-strong); }
.form-control::placeholder { color: var(--sc8-text-muted); }
.form-control:focus, .form-select:focus {
  border-color: var(--sc8-brand-blue);
  box-shadow: var(--sc8-focus-ring);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
  background-color: var(--sc8-bg-subtle);
  color: var(--sc8-text-secondary);
}
.form-control-sm, .form-select-sm {
  min-height: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: var(--sc8-fs-label);
  border-radius: var(--sc8-radius-md);
}
.form-control-color { padding: 4px; min-height: 42px; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--sc8-status-danger); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(var(--sc8-status-danger-rgb), 0.18); }
.invalid-feedback { font-size: 0.75rem; color: var(--sc8-status-danger); }
.form-label {
  font-size: var(--sc8-fs-label);
  font-weight: 500;
  color: var(--sc8-text-primary);
  margin-bottom: 6px;
}
.form-text { font-size: 0.75rem; color: var(--sc8-text-secondary); margin-top: 6px; }
.input-group-text {
  background-color: var(--sc8-bg-canvas);
  border-color: var(--sc8-border-default);
  color: var(--sc8-text-muted);
  font-size: var(--sc8-fs-body);
}
.input-group > .form-control:focus, .input-group > .form-select:focus { z-index: 5; }
.form-check-input {
  border-color: var(--sc8-border-strong);
}
.form-check-input:checked {
  background-color: var(--sc8-brand-blue);
  border-color: var(--sc8-brand-blue);
}
.form-check-input:focus { border-color: var(--sc8-brand-blue); box-shadow: var(--sc8-focus-ring); }
.form-check-label { font-size: var(--sc8-fs-body); }

/* 9.3 Tablas de datos — cabeceras de 11 px en mayúsculas, filas con resaltado */
.table-responsive {
  border-radius: var(--sc8-radius-lg);
  border: 1px solid var(--sc8-border-default);
  background-color: var(--sc8-bg-surface);
  -webkit-overflow-scrolling: touch;
}
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--sc8-text-primary);
  --bs-table-hover-bg: var(--sc8-bg-canvas);
  --bs-table-hover-color: var(--sc8-text-primary);
  --bs-table-striped-bg: var(--sc8-bg-canvas);
  --bs-table-border-color: var(--sc8-border-subtle);
  font-size: var(--sc8-fs-body);
  margin-bottom: 0;
}
.table > thead > tr > th,
.table > thead.table-light > tr > th {
  font-size: var(--sc8-fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sc8-text-secondary);
  background-color: var(--sc8-bg-canvas);
  border-bottom: 1px solid var(--sc8-border-default);
  padding: 10px 16px;
  white-space: nowrap;
  vertical-align: middle;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--sc8-border-subtle);
  color: var(--sc8-text-primary);
}
.table-sm > thead > tr > th { padding: 8px 12px; }
.table-sm > tbody > tr > td, .table-sm > tbody > tr > th { padding: 8px 12px; }
.table > tbody > tr:last-child > td,
.table > tbody > tr:last-child > th {
  border-bottom: none;
}
.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--sc8-bg-canvas);
  background-color: var(--sc8-bg-canvas);
}
.table tbody tr[data-href], .table tbody tr[data-clickable] { cursor: pointer; }
.table > :not(caption) > * > * { box-shadow: none; }

/* 9.4 Tarjetas y paneles — superficie blanca, borde de 1 px, sombra mínima */
.card, .card-premium {
  --bs-card-bg: var(--sc8-bg-surface);
  --bs-card-border-color: var(--sc8-border-default);
  --bs-card-border-radius: var(--sc8-radius-lg);
  --bs-card-inner-border-radius: calc(var(--sc8-radius-lg) - 1px);
  --bs-card-cap-bg: var(--sc8-bg-surface);
  --bs-card-spacer-x: 20px;
  --bs-card-spacer-y: 20px;
  --bs-card-cap-padding-y: 14px;
  --bs-card-cap-padding-x: 20px;
  box-shadow: var(--sc8-shadow-sm);
}
/* card-premium no tenía estilos propios */
.card-premium {
  background-color: var(--sc8-bg-surface);
  border: 1px solid var(--sc8-border-default);
  border-radius: var(--sc8-radius-lg);
}
.card.shadow-sm, .card-premium.shadow-sm { box-shadow: var(--sc8-shadow-sm) !important; }
.card.shadow, .card.shadow-lg { box-shadow: var(--sc8-shadow-sm) !important; }
.card-header {
  border-bottom: 1px solid var(--sc8-border-default);
  font-weight: 600;
}
.card-footer { background-color: var(--sc8-bg-canvas); border-top: 1px solid var(--sc8-border-default); }
.card-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.bg-light-premium { background-color: var(--sc8-bg-canvas) !important; }
.text-premium-primary { color: var(--sc8-brand-blue) !important; }
.bg-premium-gradient { background-color: var(--sc8-brand-blue) !important; }
/* «Barra de filtros» encima de una tabla (toolbar) */
.sc8-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sc8-space-2);
  padding: var(--sc8-space-3) var(--sc8-space-4);
  border-bottom: 1px solid var(--sc8-border-default);
  background-color: var(--sc8-bg-surface);
}
/* Estado vacío con borde discontinuo */
.sc8-empty {
  border: 1px dashed var(--sc8-border-strong);
  border-radius: var(--sc8-radius-lg);
  background-color: rgba(255, 255, 255, 0.6);
  padding: var(--sc8-space-8);
  text-align: center;
  font-size: var(--sc8-fs-body);
  color: var(--sc8-text-secondary);
}

/* 9.5 Diálogos — blancos, borde fino, sombra modal; el tono queda en una franja superior */
.modal {
  --bs-modal-border-color: var(--sc8-border-default);
  --bs-modal-border-radius: var(--sc8-radius-lg);
  --bs-modal-inner-border-radius: calc(var(--sc8-radius-lg) - 1px);
  --bs-modal-box-shadow: var(--sc8-shadow-modal);
  --bs-modal-header-border-color: var(--sc8-border-default);
  --bs-modal-footer-border-color: var(--sc8-border-default);
  --bs-modal-header-padding: 16px 20px;
  --bs-modal-padding: 20px;
}
.modal-backdrop { --bs-backdrop-bg: #0F172A; --bs-backdrop-opacity: 0.4; }
.modal-content { box-shadow: var(--sc8-shadow-modal); }
.modal-title { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.modal-header[class*="bg-"],
.modal-header.text-white {
  background: var(--sc8-bg-surface) !important;
  color: var(--sc8-text-primary) !important;
  border-bottom: 1px solid var(--sc8-border-default) !important;
  box-shadow: inset 0 3px 0 var(--sc8-brand-blue);
}
.modal-header.bg-success { box-shadow: inset 0 3px 0 var(--sc8-status-success); }
.modal-header.bg-danger { box-shadow: inset 0 3px 0 var(--sc8-status-danger); }
.modal-header.bg-warning { box-shadow: inset 0 3px 0 var(--sc8-status-warning); }
.modal-header.bg-dark { box-shadow: inset 0 3px 0 var(--sc8-brand-navy); }
.modal-header[class*="bg-"] .modal-title,
.modal-header.text-white .modal-title,
.modal-header.text-white :is(h5, h6, small, i) { color: inherit; }
.modal-footer { background-color: var(--sc8-bg-canvas); }
/* bordes «blancos» heredados del antiguo tema oscuro: en claro serían invisibles */
.border-white.border-opacity-10, .border-white.border-opacity-25 { border-color: var(--sc8-border-default) !important; }

/* 9.6 Avisos — banda con borde del mismo tono */
.alert {
  --bs-alert-border-radius: var(--sc8-radius-lg);
  --bs-alert-padding-x: 16px;
  --bs-alert-padding-y: 12px;
  font-size: var(--sc8-fs-body);
  border: 1px solid transparent;
}
.alert.border-0 { border: 1px solid transparent !important; }
.alert.shadow-sm { box-shadow: none !important; }
.alert-info, .alert-primary {
  --bs-alert-color: var(--sc8-text-primary);
  --bs-alert-bg: var(--sc8-brand-blue-subtle);
  --bs-alert-border-color: rgba(var(--sc8-brand-blue-rgb), 0.2);
  --bs-alert-link-color: var(--sc8-brand-blue);
  border-color: rgba(var(--sc8-brand-blue-rgb), 0.2) !important;
}
.alert-success {
  --bs-alert-color: var(--sc8-status-success-text);
  --bs-alert-bg: var(--sc8-status-success-bg);
  border-color: rgba(var(--sc8-status-success-rgb), 0.2) !important;
}
.alert-danger {
  --bs-alert-color: var(--sc8-status-danger-text);
  --bs-alert-bg: var(--sc8-status-danger-bg);
  border-color: rgba(var(--sc8-status-danger-rgb), 0.2) !important;
}
.alert-warning {
  --bs-alert-color: var(--sc8-status-warning-text);
  --bs-alert-bg: var(--sc8-status-warning-bg);
  border-color: rgba(var(--sc8-status-warning-rgb), 0.25) !important;
}
.alert-secondary, .alert-light {
  --bs-alert-color: var(--sc8-text-primary);
  --bs-alert-bg: var(--sc8-bg-subtle);
  border-color: var(--sc8-border-default) !important;
}

/* 9.7 Insignias y píldoras */
.badge {
  --bs-badge-font-size: 0.6875rem;
  --bs-badge-font-weight: 600;
  --bs-badge-padding-x: 8px;
  --bs-badge-padding-y: 3px;
  letter-spacing: 0.02em;
}

/* 9.8 Pestañas — nav-pills como control segmentado; nav-tabs subrayadas en azul */
.nav-pills {
  --bs-nav-pills-border-radius: var(--sc8-radius-sm);
  --bs-nav-pills-link-active-bg: var(--sc8-brand-blue);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-link-color: var(--sc8-text-secondary);
  --bs-nav-link-hover-color: var(--sc8-text-primary);
  --bs-nav-link-font-size: var(--sc8-fs-label);
  --bs-nav-link-font-weight: 500;
  --bs-nav-link-padding-x: 12px;
  --bs-nav-link-padding-y: 6px;
  gap: 4px;
}
.nav-pills .nav-link:not(.active):hover { background-color: var(--sc8-bg-canvas); }
.nav-pills .nav-link.active { font-weight: 600; box-shadow: var(--sc8-shadow-xs); }
.nav-tabs {
  --bs-nav-tabs-border-color: var(--sc8-border-default);
  --bs-nav-tabs-link-active-color: var(--sc8-brand-blue);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--sc8-brand-blue);
  --bs-nav-tabs-link-hover-border-color: transparent transparent var(--sc8-border-strong);
  --bs-nav-link-color: var(--sc8-text-secondary);
  --bs-nav-link-hover-color: var(--sc8-text-primary);
  --bs-nav-link-font-size: var(--sc8-fs-label);
  --bs-nav-link-font-weight: 500;
  --bs-nav-tabs-border-radius: 0;
}
.nav-tabs .nav-link { border-width: 0 0 2px 0; margin-bottom: -1px; }
.nav-tabs .nav-link.active { font-weight: 600; }
/* Control segmentado explícito */
.sc8-segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--sc8-border-default);
  border-radius: var(--sc8-radius-md);
  background-color: var(--sc8-bg-surface);
}

/* 9.9 Desplegables, paginación, listas */
.dropdown-menu {
  --bs-dropdown-border-color: var(--sc8-border-default);
  --bs-dropdown-border-radius: var(--sc8-radius-lg);
  --bs-dropdown-box-shadow: var(--sc8-shadow-lg);
  --bs-dropdown-font-size: var(--sc8-fs-body);
  --bs-dropdown-link-active-bg: var(--sc8-brand-blue);
  --bs-dropdown-link-hover-bg: var(--sc8-bg-canvas);
  box-shadow: var(--sc8-shadow-lg);
}
.pagination {
  --bs-pagination-color: var(--sc8-text-secondary);
  --bs-pagination-border-color: var(--sc8-border-default);
  --bs-pagination-hover-bg: var(--sc8-bg-canvas);
  --bs-pagination-active-bg: var(--sc8-brand-blue);
  --bs-pagination-active-border-color: var(--sc8-brand-blue);
  --bs-pagination-font-size: var(--sc8-fs-label);
}
.list-group {
  --bs-list-group-border-color: var(--sc8-border-default);
  --bs-list-group-active-bg: var(--sc8-brand-blue);
  --bs-list-group-active-border-color: var(--sc8-brand-blue);
  --bs-list-group-action-hover-bg: var(--sc8-bg-canvas);
}
.progress { --bs-progress-bg: var(--sc8-bg-subtle); --bs-progress-bar-bg: var(--sc8-brand-blue); }
.kbd, kbd {
  border: 1px solid var(--sc8-border-default);
  border-radius: 4px;
  background-color: var(--sc8-bg-surface);
  color: var(--sc8-text-secondary);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  box-shadow: var(--sc8-shadow-xs);
}

/* 9.10 Utilidades usadas por las plantillas que Bootstrap no trae (escala de 2 px) */
.py-0\.5 { padding-top: 2px !important; padding-bottom: 2px !important; }
.px-1\.5 { padding-left: 6px !important; padding-right: 6px !important; }
.py-1\.5 { padding-top: 6px !important; padding-bottom: 6px !important; }
.px-2\.5 { padding-left: 10px !important; padding-right: 10px !important; }
.gap-1\.5 { gap: 6px !important; }
.shadow-xs { box-shadow: var(--sc8-shadow-xs) !important; }
.border-dashed { border-style: dashed !important; }
.border-opacity-5 { --bs-border-opacity: 0.05; }
.min-w-0 { min-width: 0 !important; }

/* ── 10. ACCESO (entrar, recuperar, nueva contraseña) ───────────────────── */
/* Modo claro, sin degradados: panel de marca en azul suave y tarjeta centrada. */

.sc8-auth-wrapper {
  min-height: 100vh;
  display: flex;
  width: 100%;
  overflow-x: hidden;
}

.sc8-auth-brand {
  flex: 1.1;
  background-color: var(--sc8-brand-blue-subtle);
  border-right: 1px solid var(--sc8-border-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sc8-space-10);
  color: var(--sc8-text-primary);
}
.sc8-auth-brand-content {
  max-width: 440px;
  text-align: center;
}
.sc8-auth-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sc8-space-5);
  border-radius: var(--sc8-radius-xl);
  background-color: var(--sc8-brand-blue);
  box-shadow: inset 0 -5px 0 var(--sc8-accent), var(--sc8-shadow-md);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
}
.sc8-auth-brand-logo {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--sc8-brand-blue);
  margin-bottom: var(--sc8-space-3);
}
.sc8-auth-brand-logo span {
  color: var(--sc8-text-primary);
}
.sc8-auth-brand-tagline {
  font-size: 1rem;
  color: var(--sc8-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--sc8-space-6);
}
.sc8-auth-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  margin-top: var(--sc8-space-6);
  padding: var(--sc8-space-5);
  border-radius: var(--sc8-radius-lg);
  border: 1px solid var(--sc8-border-default);
  background-color: var(--sc8-bg-surface);
  box-shadow: var(--sc8-shadow-sm);
}
.sc8-auth-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--sc8-fs-body);
  color: var(--sc8-text-secondary);
}
.sc8-auth-feature i {
  font-size: 1.1rem;
  color: var(--sc8-accent-ink);
}
.sc8-auth-badge-legal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--sc8-radius-pill);
  background-color: var(--sc8-accent-soft);
  border: 1px solid rgba(32, 191, 197, 0.35);
  font-size: var(--sc8-fs-label);
  color: var(--sc8-brand-navy);
}

.sc8-auth-form-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sc8-space-8);
  background-color: var(--sc8-bg-canvas);
}
.sc8-auth-card {
  width: 100%;
  max-width: 420px;
  background-color: var(--sc8-bg-surface);
  border: 1px solid var(--sc8-border-default);
  border-radius: var(--sc8-radius-lg);
  padding: var(--sc8-space-8);
  box-shadow: var(--sc8-shadow-sm);
}
.sc8-auth-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sc8-text-primary);
  margin-bottom: var(--sc8-space-1);
}
.sc8-auth-subtitle {
  font-size: var(--sc8-fs-body);
  color: var(--sc8-text-secondary);
  margin-bottom: var(--sc8-space-6);
}
.sc8-auth-card .input-group-text { background-color: var(--sc8-bg-surface) !important; }

/* ── 11. QUIOSCO TÁCTIL REDESIGN ─────────────────────────────────────────── */

.sc8-kiosk-page {
  min-height: 100vh;
  background-color: var(--sc8-brand-navy);
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sc8-space-6);
}

.sc8-kiosk-card {
  background-color: #151F3C;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--sc8-radius-xl);
  padding: var(--sc8-space-8);
  box-shadow: var(--sc8-shadow-lg);
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

.sc8-kiosk-pin-display {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: var(--sc8-space-6) 0;
}
.sc8-kiosk-pin-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #475569;
  background-color: transparent;
  transition: all var(--sc8-transition-fast);
}
.sc8-kiosk-pin-dot.filled {
  background-color: #38BDF8;
  border-color: #38BDF8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.sc8-kiosk-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.sc8-kiosk-btn {
  height: 72px;
  border-radius: var(--sc8-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.06);
  color: #FFF;
  font-size: 1.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--sc8-transition-fast);
  touch-action: manipulation;
  user-select: none;
}
.sc8-kiosk-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}
.sc8-kiosk-btn:active {
  background-color: #2563EB;
  transform: scale(0.96);
}
.sc8-kiosk-btn-action {
  font-size: 1.25rem;
  background-color: rgba(255, 255, 255, 0.04);
}

/* ── 12. MOBILE NAVIGATION BAR ───────────────────────────────────────────── */

.sc8-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--sc8-mobile-nav-h);
  background-color: var(--sc8-bg-surface);
  border-top: 1px solid var(--sc8-border-default);
  z-index: 1030;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px;
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.05);
}

.sc8-mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 48px;
  padding: 4px 8px;
  border-radius: var(--sc8-radius-md);
  color: var(--sc8-text-tertiary);
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: 600;
  transition: color var(--sc8-transition-fast);
}
.sc8-mobile-nav-item i {
  font-size: 1.35rem;
  margin-bottom: 2px;
}
.sc8-mobile-nav-item:hover, .sc8-mobile-nav-item.active {
  color: var(--sc8-brand-blue);
}

/* ── 13. ANIMATIONS & RESPONSIVE ─────────────────────────────────────────── */

@keyframes sc8FadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sc8Pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

@media (max-width: 991.98px) {
  .sc8-bento-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
  .sc8-topbar {
    padding: 0 var(--sc8-space-3);
  }
  .sc8-main {
    padding: var(--sc8-space-4);
  }
  .sc8-mobile-nav {
    display: flex;
  }
  .sc8-main-container.sc8-has-mobile-nav .sc8-main {
    padding-bottom: calc(var(--sc8-mobile-nav-h) + var(--sc8-space-6));
  }
  .sc8-punch-clock {
    font-size: 2.75rem;
  }
  .sc8-auth-brand {
    display: none;
  }
  .sc8-auth-form-side {
    padding: var(--sc8-space-4);
  }
  .sc8-auth-card {
    padding: var(--sc8-space-6);
  }
}

@media (max-width: 575.98px) {
  .sc8-bento-4, .sc8-bento-3 {
    grid-template-columns: 1fr;
  }
  .sc8-btn-punch {
    width: 100%;
    padding: 14px 20px;
  }
}

/* ── 14. CONTRASTE LEGIBLE (WCAG AA) ─────────────────────────────────────── */
/* Cian (info) y ámbar (warning) de Bootstrap no alcanzan contraste como color de texto sobre
   fondos claros: se usan sus variantes "emphasis", que Bootstrap redefine en modo oscuro. */
.text-info { color: var(--bs-info-text-emphasis) !important; }
.text-warning { color: var(--bs-warning-text-emphasis) !important; }

.btn-outline-info {
  --bs-btn-color: var(--bs-info-text-emphasis);
  --bs-btn-border-color: #0aa2c0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #087990;
  --bs-btn-hover-border-color: #087990;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #087990;
  --bs-btn-active-border-color: #087990;
  --bs-btn-disabled-color: var(--bs-info-text-emphasis);
}
.btn-outline-warning {
  --bs-btn-color: var(--bs-warning-text-emphasis);
  --bs-btn-border-color: #cc9a06;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffc107;
  --bs-btn-active-border-color: #ffc107;
  --bs-btn-disabled-color: var(--bs-warning-text-emphasis);
}

/* Insignias sobre cian/ámbar: texto oscuro en lugar del blanco por defecto */
.badge.bg-info, .badge.bg-warning { --bs-badge-color: #111827; color: #111827; }

/* Los títulos (color fijo por la tipografía) heredan el blanco de cabeceras de color */
.text-white :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: inherit; }

/* Verde de estado sobre fondos "-subtle" (insignias, resúmenes): variante oscura */
[class*="-subtle"].text-success, [class*="-subtle"] .text-success { color: var(--bs-success-text-emphasis) !important; }

/* ── 15. PANTALLAS: CONTENEDORES Y PIEZAS COMUNES ───────────────────────── */

/* .sc8-main ya aplica el margen de página: los contenedores de Bootstrap de cada pantalla
   no deben sumar otro relleno lateral (antes se duplicaba y estrechaba las tablas). */
.sc8-main > .container-fluid,
.sc8-main > .container {
  max-width: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}
.sc8-main > .container-fluid > .row:first-child,
.sc8-main > .row:first-child { margin-top: 0; }

/* Las tarjetas que envuelven una pantalla entera usan el relleno estándar de 20 px */
.sc8-main .card-premium.p-4 { padding: var(--sc8-space-5) !important; }

/* Avatar con iniciales (como las iniciales del usuario en la barra superior) */
.sc8-avatar {
  background-color: var(--sc8-brand-blue-tint) !important;
  color: var(--sc8-brand-blue) !important;
  border: 1px solid rgba(var(--sc8-brand-blue-rgb), 0.2);
  box-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

/* Tarjetas resumen con filete de color a la izquierda (border-start border-4 border-*):
   la utilidad border-4 engordaba los cuatro bordes; se deja 1 px y un filete de 3 px. */
.card.border-start.border-4 {
  border-width: 1px !important;
  border-left-width: 3px !important;
  border-color: var(--sc8-border-default) !important;
}
.card.border-start.border-4.border-primary { border-left-color: var(--sc8-brand-blue) !important; }
.card.border-start.border-4.border-success { border-left-color: var(--sc8-status-success) !important; }
.card.border-start.border-4.border-warning { border-left-color: var(--sc8-status-warning) !important; }
.card.border-start.border-4.border-danger  { border-left-color: var(--sc8-status-danger) !important; }
.card.border-start.border-4.border-info    { border-left-color: var(--sc8-accent) !important; }
.card.border-start.border-4.border-secondary { border-left-color: var(--sc8-border-strong) !important; }

/* Columnas secundarias de tablas: la clase sc8-col{N}-{bp} en <table> muestra la columna N
   solo desde ese punto de ruptura (como hidden md:table-cell en SC8Maintain).
   bp: sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400 · wide 1600 px. */
@media (max-width: 575.98px) {
  .sc8-col1-sm > :is(thead, tbody, tfoot) > tr > :nth-child(1),
  .sc8-col2-sm > :is(thead, tbody, tfoot) > tr > :nth-child(2),
  .sc8-col3-sm > :is(thead, tbody, tfoot) > tr > :nth-child(3),
  .sc8-col4-sm > :is(thead, tbody, tfoot) > tr > :nth-child(4),
  .sc8-col5-sm > :is(thead, tbody, tfoot) > tr > :nth-child(5),
  .sc8-col6-sm > :is(thead, tbody, tfoot) > tr > :nth-child(6),
  .sc8-col7-sm > :is(thead, tbody, tfoot) > tr > :nth-child(7),
  .sc8-col8-sm > :is(thead, tbody, tfoot) > tr > :nth-child(8),
  .sc8-col9-sm > :is(thead, tbody, tfoot) > tr > :nth-child(9),
  .sc8-col10-sm > :is(thead, tbody, tfoot) > tr > :nth-child(10),
  .sc8-col11-sm > :is(thead, tbody, tfoot) > tr > :nth-child(11),
  .sc8-col12-sm > :is(thead, tbody, tfoot) > tr > :nth-child(12) { display: none; }
}
@media (max-width: 767.98px) {
  .sc8-col1-md > :is(thead, tbody, tfoot) > tr > :nth-child(1),
  .sc8-col2-md > :is(thead, tbody, tfoot) > tr > :nth-child(2),
  .sc8-col3-md > :is(thead, tbody, tfoot) > tr > :nth-child(3),
  .sc8-col4-md > :is(thead, tbody, tfoot) > tr > :nth-child(4),
  .sc8-col5-md > :is(thead, tbody, tfoot) > tr > :nth-child(5),
  .sc8-col6-md > :is(thead, tbody, tfoot) > tr > :nth-child(6),
  .sc8-col7-md > :is(thead, tbody, tfoot) > tr > :nth-child(7),
  .sc8-col8-md > :is(thead, tbody, tfoot) > tr > :nth-child(8),
  .sc8-col9-md > :is(thead, tbody, tfoot) > tr > :nth-child(9),
  .sc8-col10-md > :is(thead, tbody, tfoot) > tr > :nth-child(10),
  .sc8-col11-md > :is(thead, tbody, tfoot) > tr > :nth-child(11),
  .sc8-col12-md > :is(thead, tbody, tfoot) > tr > :nth-child(12) { display: none; }
}
@media (max-width: 991.98px) {
  .sc8-col1-lg > :is(thead, tbody, tfoot) > tr > :nth-child(1),
  .sc8-col2-lg > :is(thead, tbody, tfoot) > tr > :nth-child(2),
  .sc8-col3-lg > :is(thead, tbody, tfoot) > tr > :nth-child(3),
  .sc8-col4-lg > :is(thead, tbody, tfoot) > tr > :nth-child(4),
  .sc8-col5-lg > :is(thead, tbody, tfoot) > tr > :nth-child(5),
  .sc8-col6-lg > :is(thead, tbody, tfoot) > tr > :nth-child(6),
  .sc8-col7-lg > :is(thead, tbody, tfoot) > tr > :nth-child(7),
  .sc8-col8-lg > :is(thead, tbody, tfoot) > tr > :nth-child(8),
  .sc8-col9-lg > :is(thead, tbody, tfoot) > tr > :nth-child(9),
  .sc8-col10-lg > :is(thead, tbody, tfoot) > tr > :nth-child(10),
  .sc8-col11-lg > :is(thead, tbody, tfoot) > tr > :nth-child(11),
  .sc8-col12-lg > :is(thead, tbody, tfoot) > tr > :nth-child(12) { display: none; }
}
@media (max-width: 1199.98px) {
  .sc8-col1-xl > :is(thead, tbody, tfoot) > tr > :nth-child(1),
  .sc8-col2-xl > :is(thead, tbody, tfoot) > tr > :nth-child(2),
  .sc8-col3-xl > :is(thead, tbody, tfoot) > tr > :nth-child(3),
  .sc8-col4-xl > :is(thead, tbody, tfoot) > tr > :nth-child(4),
  .sc8-col5-xl > :is(thead, tbody, tfoot) > tr > :nth-child(5),
  .sc8-col6-xl > :is(thead, tbody, tfoot) > tr > :nth-child(6),
  .sc8-col7-xl > :is(thead, tbody, tfoot) > tr > :nth-child(7),
  .sc8-col8-xl > :is(thead, tbody, tfoot) > tr > :nth-child(8),
  .sc8-col9-xl > :is(thead, tbody, tfoot) > tr > :nth-child(9),
  .sc8-col10-xl > :is(thead, tbody, tfoot) > tr > :nth-child(10),
  .sc8-col11-xl > :is(thead, tbody, tfoot) > tr > :nth-child(11),
  .sc8-col12-xl > :is(thead, tbody, tfoot) > tr > :nth-child(12) { display: none; }
}
@media (max-width: 1399.98px) {
  .sc8-col1-xxl > :is(thead, tbody, tfoot) > tr > :nth-child(1),
  .sc8-col2-xxl > :is(thead, tbody, tfoot) > tr > :nth-child(2),
  .sc8-col3-xxl > :is(thead, tbody, tfoot) > tr > :nth-child(3),
  .sc8-col4-xxl > :is(thead, tbody, tfoot) > tr > :nth-child(4),
  .sc8-col5-xxl > :is(thead, tbody, tfoot) > tr > :nth-child(5),
  .sc8-col6-xxl > :is(thead, tbody, tfoot) > tr > :nth-child(6),
  .sc8-col7-xxl > :is(thead, tbody, tfoot) > tr > :nth-child(7),
  .sc8-col8-xxl > :is(thead, tbody, tfoot) > tr > :nth-child(8),
  .sc8-col9-xxl > :is(thead, tbody, tfoot) > tr > :nth-child(9),
  .sc8-col10-xxl > :is(thead, tbody, tfoot) > tr > :nth-child(10),
  .sc8-col11-xxl > :is(thead, tbody, tfoot) > tr > :nth-child(11),
  .sc8-col12-xxl > :is(thead, tbody, tfoot) > tr > :nth-child(12) { display: none; }
}
@media (max-width: 1599.98px) {
  .sc8-col1-wide > :is(thead, tbody, tfoot) > tr > :nth-child(1),
  .sc8-col2-wide > :is(thead, tbody, tfoot) > tr > :nth-child(2),
  .sc8-col3-wide > :is(thead, tbody, tfoot) > tr > :nth-child(3),
  .sc8-col4-wide > :is(thead, tbody, tfoot) > tr > :nth-child(4),
  .sc8-col5-wide > :is(thead, tbody, tfoot) > tr > :nth-child(5),
  .sc8-col6-wide > :is(thead, tbody, tfoot) > tr > :nth-child(6),
  .sc8-col7-wide > :is(thead, tbody, tfoot) > tr > :nth-child(7),
  .sc8-col8-wide > :is(thead, tbody, tfoot) > tr > :nth-child(8),
  .sc8-col9-wide > :is(thead, tbody, tfoot) > tr > :nth-child(9),
  .sc8-col10-wide > :is(thead, tbody, tfoot) > tr > :nth-child(10),
  .sc8-col11-wide > :is(thead, tbody, tfoot) > tr > :nth-child(11),
  .sc8-col12-wide > :is(thead, tbody, tfoot) > tr > :nth-child(12) { display: none; }
}

/* ── 16. MÓVIL Y TABLETA ─────────────────────────────────────────────────── */
/* Base para las futuras apps iOS/Android (WebView): zonas seguras, objetivos táctiles de
   44 px, campos de 16 px (iOS no amplía la página al enfocarlos) y tablas compactas. */

.sc8-topbar { padding-top: env(safe-area-inset-top); height: calc(var(--sc8-topbar-h) + env(safe-area-inset-top)); }
.sc8-layout-auth { padding-top: calc(var(--sc8-topbar-h) + env(safe-area-inset-top)); }
.sc8-sidebar { top: calc(var(--sc8-topbar-h) + env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); }

/* Barra inferior del empleado: una línea por etiqueta, indicador del elemento activo */
.sc8-mobile-nav {
  height: calc(var(--sc8-mobile-nav-h) + env(safe-area-inset-bottom));
  padding: 0 4px env(safe-area-inset-bottom);
  box-shadow: none;
}
.sc8-mobile-nav-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  padding: 6px 2px;
  gap: 3px;
  position: relative;
  color: var(--sc8-text-secondary);
  font-size: 0.6875rem;
  font-weight: 500;
}
.sc8-mobile-nav-item span {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc8-mobile-nav-item i { font-size: 1.3rem; margin: 0; color: var(--sc8-text-muted); }
.sc8-mobile-nav-item.active { color: var(--sc8-brand-blue); font-weight: 600; }
.sc8-mobile-nav-item.active i { color: var(--sc8-brand-blue); }
.sc8-mobile-nav-item.active::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 25%;
  right: 25%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background-color: var(--sc8-brand-blue);
}

@media (max-width: 991.98px) {
  /* En el cajón los enlaces son objetivos táctiles de 44 px */
  .sc8-sidebar-link { min-height: 44px; }
  .sc8-sidebar { width: min(var(--sc8-sidebar-w), 85vw); }
}

@media (max-width: 767.98px) {
  .sc8-main-container.sc8-has-mobile-nav .sc8-main {
    padding-bottom: calc(var(--sc8-mobile-nav-h) + env(safe-area-inset-bottom) + var(--sc8-space-6));
  }
  .sc8-page-title { font-size: 1.375rem; line-height: 1.75rem; }
  .sc8-page-header { margin-bottom: var(--sc8-space-4); }
  .sc8-page-actions { width: 100%; }
  .sc8-page-actions > * { flex-wrap: wrap; }
  .table > thead > tr > th { padding: 8px 12px; }
  .table > tbody > tr > td, .table > tbody > tr > th { padding: 10px 12px; }
  .sc8-main .card-premium.p-4 { padding: var(--sc8-space-4) !important; }
  .modal-dialog:not(.modal-fullscreen) { margin: var(--sc8-space-3); }
}

@media (max-width: 575.98px) {
  .form-control, .form-select, .input-group-text { font-size: 16px; }
  .form-control-sm, .form-select-sm { font-size: 16px; }
  .sc8-topbar { gap: var(--sc8-space-2); }
  .sc8-logo-text { font-size: 1.125rem; }
}

/* Botones pequeños de las barras de acciones: una sola línea por botón */
.btn-sm { white-space: nowrap; }

/* ── 17. SOBRIEDAD Y DENSIDAD (v3.1) ─────────────────────────────────────── */
/* Escala más contenida y menos color decorativo, como SC8Maintain: texto de 13 px, títulos
   cortos, controles de 34 px en escritorio, insignias en tono suave con borde, iconos neutros
   y cifras en color de texto. En móvil se mantienen los 16 px de los campos y los 44 px
   táctiles. Los colores de estado solo marcan estado, nunca decoran. */

:root {
  --sc8-fs-body: 0.8125rem;          /* 13 px */
  --sc8-fs-label: 0.75rem;           /* 12 px */
  --sc8-fs-eyebrow: 0.6875rem;       /* 11 px */
  --sc8-sidebar-w: 240px;
  --sc8-topbar-h: 52px;
  --sc8-control-h: 34px;
  --sc8-control-h-sm: 28px;
  --bs-body-font-size: var(--sc8-fs-body);
  --bs-body-line-height: 1.5;
}
body { font-size: var(--sc8-fs-body); }

/* Títulos: jerarquía por peso y tamaño moderado, nunca por tamaño grande */
.sc8-main :is(h1, .h1) { font-size: 1.25rem; }
.sc8-main :is(h2, .h2) { font-size: 1.125rem; }
.sc8-main :is(h3, .h3) { font-size: 1rem; }
.sc8-main :is(h4, .h4) { font-size: 0.9375rem; }
.sc8-main :is(h5, .h5) { font-size: 0.875rem; }
.sc8-main :is(h6, .h6) { font-size: 0.8125rem; }
.sc8-main :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { font-weight: 600; letter-spacing: -0.01em; }
.sc8-main :is(h3, h4, h5, h6) > i.bi:first-child { font-size: 0.95em; color: var(--sc8-text-muted) !important; }
.sc8-page-title { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.015em; }
.sc8-page-title-icon { display: none; }
.sc8-page-subtitle { font-size: var(--sc8-fs-body); color: var(--sc8-text-tertiary); }
.sc8-page-header { margin-bottom: var(--sc8-space-4); align-items: center; }
.sc8-section-title, .card-title, .modal-title { font-size: 0.9375rem; }

/* Pesos: el negrita (700) se reserva para cifras; el resto, seminegrita */
.fw-bold { font-weight: 600 !important; }
.lead { font-size: 0.9375rem; font-weight: 400; }
.sc8-main .fs-1 { font-size: 1.75rem !important; }
.sc8-main .fs-2 { font-size: 1.5rem !important; }
.sc8-main .fs-3 { font-size: 1.25rem !important; }
.sc8-main .fs-4 { font-size: 1.0625rem !important; }
.sc8-main .fs-5 { font-size: 0.9375rem !important; }
.sc8-main .fs-6 { font-size: 0.8125rem !important; }
small, .small { font-size: 0.8571em; }

/* Estructura */
.sc8-topbar { padding-left: var(--sc8-space-4); padding-right: var(--sc8-space-4); }
.sc8-logo-icon { width: 24px; height: 24px; font-size: 0.8125rem; border-radius: 6px; box-shadow: inset 0 -2px 0 var(--sc8-accent); }
.sc8-logo-text { font-size: 1.0625rem; letter-spacing: -0.02em; }
.sc8-user-initials { width: 28px; height: 28px; font-size: 0.625rem; }
.sc8-user-name { font-size: var(--sc8-fs-label); }
.sc8-user-role { font-size: 0.6875rem; }
.sc8-icon-btn, .sc8-mobile-menu-btn { width: 32px; height: 32px; font-size: 1rem; }
.sc8-company-pill { font-size: 0.625rem; padding: 2px 8px; }
.sc8-sidebar-scroll { padding: var(--sc8-space-3); gap: var(--sc8-space-3); }
.sc8-sidebar-nav { gap: var(--sc8-space-3); }
.sc8-sidebar-group { padding-top: var(--sc8-space-3); gap: 1px; }
.sc8-sidebar-group-title { font-size: 0.625rem; padding: 0 8px 4px; }
.sc8-sidebar-link { min-height: 30px; padding: 5px 8px; gap: 9px; font-size: var(--sc8-fs-body); border-radius: 6px; }
.sc8-sidebar-link i { font-size: 0.9375rem; width: 16px; }
.sc8-sidebar-cta { min-height: var(--sc8-control-h); }
.sc8-sidebar-footer { padding: var(--sc8-space-2) var(--sc8-space-3); }
.sc8-sidebar-footer-name { font-size: var(--sc8-fs-label); }
.sc8-sidebar-footer-meta { font-size: 0.6875rem; }
.sc8-main { padding: var(--sc8-space-5) var(--sc8-space-6); }

/* Tarjetas: relleno de 16 px y sin elevación al pasar el ratón */
.card, .card-premium {
  --bs-card-spacer-x: 16px;
  --bs-card-spacer-y: 16px;
  --bs-card-cap-padding-y: 10px;
  --bs-card-cap-padding-x: 16px;
}
.sc8-card { padding: 16px; }
.sc8-card:hover { box-shadow: var(--sc8-shadow-sm); }
.sc8-main .card-premium.p-4, .sc8-main .card.p-4, .sc8-main .card-body.p-4 { padding: var(--sc8-space-4) !important; }
.sc8-main .card-body.p-5, .sc8-main .card.p-5 { padding: var(--sc8-space-6) !important; }
.sc8-main .card-header { font-size: var(--sc8-fs-body); }
.sc8-main .mb-5 { margin-bottom: var(--sc8-space-6) !important; }
.sc8-main .mb-4 { margin-bottom: var(--sc8-space-4) !important; }
.sc8-main .mt-4 { margin-top: var(--sc8-space-4) !important; }
.sc8-main .py-4 { padding-top: var(--sc8-space-4) !important; padding-bottom: var(--sc8-space-4) !important; }
.sc8-main .g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.card.shadow-sm, .card-premium.shadow-sm, .card.shadow, .card.shadow-lg, .sc8-main .shadow-sm, .sc8-main .shadow { box-shadow: var(--sc8-shadow-xs) !important; }

/* KPI: etiqueta pequeña, cifra en color de texto, icono neutro sin burbuja */
.sc8-kpi-card { padding: 12px 14px; gap: 2px; box-shadow: var(--sc8-shadow-xs); }
.sc8-kpi-card:hover { transform: none; box-shadow: var(--sc8-shadow-xs); border-color: var(--sc8-border-strong); }
.sc8-kpi-label { font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--sc8-text-tertiary); }
.sc8-kpi-value { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--sc8-text-primary) !important; font-variant-numeric: tabular-nums; }
.sc8-kpi-icon { width: auto; height: auto; background: none !important; color: var(--sc8-text-muted) !important; font-size: 1rem; }
.sc8-kpi-link { font-size: 0.6875rem; font-weight: 500; }
.sc8-main .rounded-circle.p-3 { padding: 0 !important; background: none !important; color: var(--sc8-text-muted) !important; }
.sc8-main .rounded-circle.p-3 > i, .sc8-main .rounded-circle.p-3 > .bi { font-size: 1.125rem !important; }

/* Botones de 34 px (28 px los pequeños); sin formas de píldora ni sombras de color */
.btn {
  --bs-btn-font-size: var(--sc8-fs-body);
  --bs-btn-font-weight: 500;
  --bs-btn-padding-x: 12px;
  --bs-btn-padding-y: 5px;
  --bs-btn-border-radius: 6px;
  min-height: var(--sc8-control-h);
  gap: 6px;
}
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-x: 9px;
  --bs-btn-padding-y: 2px;
  --bs-btn-font-size: var(--sc8-fs-label);
  --bs-btn-border-radius: 6px;
  min-height: var(--sc8-control-h-sm);
}
.btn-xs { min-height: 22px; --bs-btn-font-size: 0.6875rem; }
.btn-lg { --bs-btn-padding-x: 16px; --bs-btn-padding-y: 7px; --bs-btn-font-size: 0.875rem; min-height: 38px; }
.btn.rounded-pill { border-radius: 6px !important; }
.btn.shadow-sm, .btn.shadow { box-shadow: none !important; }
.btn-primary, .btn-premium-primary { box-shadow: none; }
.btn i.bi { font-size: 0.95em; }
/* Avisos de acción (antes amarillo relleno): blanco con borde ámbar */
.btn-warning {
  --bs-btn-color: var(--sc8-status-warning-text);
  --bs-btn-bg: var(--sc8-status-warning-bg);
  --bs-btn-border-color: rgba(var(--sc8-status-warning-rgb), 0.35);
  --bs-btn-hover-color: var(--sc8-status-warning-text);
  --bs-btn-hover-bg: #FEF3C7;
  --bs-btn-hover-border-color: var(--sc8-status-warning);
  --bs-btn-active-color: var(--sc8-status-warning-text);
  --bs-btn-active-bg: #FDE68A;
  --bs-btn-active-border-color: var(--sc8-status-warning);
}

/* Campos de 34 px (28 px los pequeños) */
.form-control, .form-select {
  min-height: var(--sc8-control-h);
  padding: 6px 10px;
  font-size: var(--sc8-fs-body);
  border-radius: 6px;
}
.form-select { padding-right: 30px; background-position: right 8px center; }
.form-control-sm, .form-select-sm { min-height: var(--sc8-control-h-sm); padding-top: 3px; padding-bottom: 3px; font-size: var(--sc8-fs-label); }
.form-control-lg, .form-select-lg { min-height: 38px; font-size: 0.875rem; padding: 7px 12px; }
.form-control-color { min-height: var(--sc8-control-h); }
textarea.form-control { min-height: 60px; }
.input-group-text { font-size: var(--sc8-fs-body); padding: 4px 10px; }
.input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .input-group-text, .input-group-lg > .btn { font-size: 0.875rem; padding: 7px 12px; border-radius: 6px; }
.form-label { font-size: var(--sc8-fs-label); font-weight: 500; color: var(--sc8-text-secondary); margin-bottom: 4px; }
.form-text { font-size: 0.6875rem; margin-top: 4px; }
.form-check-label { font-size: var(--sc8-fs-body); }

/* Tablas densas: filas de unos 36 px */
.table { font-size: var(--sc8-fs-body); }
.table > thead > tr > th, .table > thead.table-light > tr > th { font-size: 0.6875rem; padding: 8px 12px; color: var(--sc8-text-tertiary); }
.table > tbody > tr > td, .table > tbody > tr > th { padding: 8px 12px; }
.table-sm > thead > tr > th, .table-sm > tbody > tr > td, .table-sm > tbody > tr > th { padding: 6px 10px; }
.table .fw-bold { font-weight: 500 !important; }
.table-responsive { border-radius: 8px; }

/* Insignias: tono suave con borde del mismo color (como las píldoras de SC8Maintain) */
.badge {
  --bs-badge-font-size: 0.6875rem;
  --bs-badge-font-weight: 500;
  --bs-badge-padding-x: 7px;
  --bs-badge-padding-y: 2px;
  --bs-badge-border-radius: 4px;
  letter-spacing: 0;
  line-height: 1.45;
  border: 1px solid transparent;
}
.badge.rounded-pill { border-radius: 9999px; }
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--sc8-brand-blue-subtle) !important; color: var(--sc8-brand-blue-active) !important; border-color: rgba(var(--sc8-brand-blue-rgb), 0.25) !important; }
.badge.bg-success, .badge.text-bg-success { background-color: var(--sc8-status-success-bg) !important; color: var(--sc8-status-success-text) !important; border-color: rgba(var(--sc8-status-success-rgb), 0.25) !important; }
.badge.bg-danger, .badge.text-bg-danger { background-color: var(--sc8-status-danger-bg) !important; color: var(--sc8-status-danger-text) !important; border-color: rgba(var(--sc8-status-danger-rgb), 0.25) !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: var(--sc8-status-warning-bg) !important; color: var(--sc8-status-warning-text) !important; border-color: rgba(var(--sc8-status-warning-rgb), 0.3) !important; }
.badge.bg-info, .badge.text-bg-info { background-color: var(--sc8-accent-soft) !important; color: var(--sc8-accent-ink) !important; border-color: rgba(32, 191, 197, 0.35) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-dark, .badge.text-bg-dark, .badge.bg-light, .badge.text-bg-light { background-color: var(--sc8-bg-subtle) !important; color: var(--sc8-text-secondary) !important; border-color: var(--sc8-border-default) !important; }
.badge.fs-6, .badge.fs-5 { font-size: 0.75rem !important; }
.sc8-pill { font-size: 0.6875rem; font-weight: 500; padding: 1px 8px; letter-spacing: 0; }

/* Pestañas y avisos */
.nav-pills { --bs-nav-link-padding-y: 4px; --bs-nav-link-padding-x: 10px; --bs-nav-link-font-size: var(--sc8-fs-body); }
.nav-pills .nav-link.rounded-pill { border-radius: 6px !important; }
.nav-tabs { --bs-nav-link-font-size: var(--sc8-fs-body); --bs-nav-link-padding-y: 8px; --bs-nav-link-padding-x: 12px; }
.alert { --bs-alert-padding-x: 12px; --bs-alert-padding-y: 8px; --bs-alert-border-radius: 8px; font-size: var(--sc8-fs-body); }
.modal { --bs-modal-header-padding: 12px 16px; --bs-modal-padding: 16px; }
.dropdown-menu { --bs-dropdown-font-size: var(--sc8-fs-body); }
.sc8-empty { padding: var(--sc8-space-6); }
.sc8-main .bi.display-1, .sc8-main .bi.display-4, .sc8-main .bi.fs-1 { font-size: 1.75rem !important; color: var(--sc8-text-muted); }

/* Fichaje del empleado: protagonista, pero sin aspecto de juguete */
.sc8-punch-hero { padding: 20px 16px; }
.sc8-punch-clock { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.02em; }
.sc8-punch-date { font-size: var(--sc8-fs-label); margin-bottom: var(--sc8-space-2); }
.sc8-status-badge { padding: 3px 10px; font-size: var(--sc8-fs-label); font-weight: 500; margin-bottom: var(--sc8-space-3); }
.sc8-btn-punch { min-height: 44px; padding: 8px 24px; font-size: 0.875rem; font-weight: 600; gap: 8px; border-radius: 8px; box-shadow: none !important; }
.sc8-btn-punch:hover { transform: none; }
.sc8-btn-punch i { font-size: 1rem; }
.sc8-punch-last-entry { font-size: 0.75rem; }

/* Acceso */
.sc8-auth-mark { width: 44px; height: 44px; font-size: 1.375rem; border-radius: 10px; box-shadow: inset 0 -3px 0 var(--sc8-accent); }
.sc8-auth-brand-logo { font-size: 2rem; }
.sc8-auth-brand-tagline { font-size: 0.875rem; }
.sc8-auth-card { max-width: 380px; padding: var(--sc8-space-6); }
.sc8-auth-title { font-size: 1.25rem; }

@media (max-width: 991.98px) {
  .sc8-sidebar-link { min-height: 44px; font-size: 0.875rem; }
  .sc8-main { padding: var(--sc8-space-4); }
}
@media (max-width: 767.98px) {
  .sc8-page-title { font-size: 1.125rem; line-height: 1.5rem; }
  .table > thead > tr > th { padding: 8px 10px; }
  .table > tbody > tr > td, .table > tbody > tr > th { padding: 8px 10px; }
  .sc8-punch-clock { font-size: 2rem; }
}
@media (max-width: 575.98px) {
  /* Objetivos táctiles cómodos y campos de 16 px en móvil */
  .btn { min-height: 40px; }
  .btn-sm, .btn-group-sm > .btn { min-height: 34px; }
  .form-control, .form-select, .input-group-text { min-height: 40px; font-size: 16px; }
  .sc8-btn-punch { min-height: 48px; }
}

/* Botones de icono redondos y rellenos de las tablas: cuadrado de 28 px en tono suave */
.sc8-main .btn.rounded-circle { border-radius: 6px !important; width: 28px !important; height: 28px !important; min-height: 28px; box-shadow: none !important; }
.sc8-main .btn-success.rounded-circle { --bs-btn-color: var(--sc8-status-success); --bs-btn-bg: var(--sc8-status-success-bg); --bs-btn-border-color: rgba(var(--sc8-status-success-rgb), 0.3); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sc8-status-success); }
.sc8-main .btn-danger.rounded-circle { --bs-btn-color: var(--sc8-status-danger); --bs-btn-bg: var(--sc8-status-danger-bg); --bs-btn-border-color: rgba(var(--sc8-status-danger-rgb), 0.3); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sc8-status-danger); }
.sc8-main .btn-primary.rounded-circle { --bs-btn-color: var(--sc8-brand-blue); --bs-btn-bg: var(--sc8-brand-blue-subtle); --bs-btn-border-color: rgba(var(--sc8-brand-blue-rgb), 0.3); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sc8-brand-blue); }
.sc8-main .btn.rounded-circle i { font-size: 0.875rem !important; }
.sc8-punch-actions .bi.fs-3 { font-size: 1rem !important; }

/* Tipo de ausencia: píldora neutra con un punto del color elegido por la empresa */
.badge.sc8-type-chip { display: inline-flex; align-items: center; gap: 6px; background-color: var(--sc8-bg-surface); color: var(--sc8-text-primary); border-color: var(--sc8-border-default); }
.sc8-type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12); }

/* Los rellenos py-2/py-3 y px-4/px-5 de las plantillas inflaban los botones: se acotan */
.sc8-main .btn:is(.py-2, .py-3) { padding-top: 5px !important; padding-bottom: 5px !important; }
.sc8-main .btn-sm:is(.py-2, .py-3) { padding-top: 2px !important; padding-bottom: 2px !important; }
.sc8-main .btn:is(.px-4, .px-5) { padding-left: 14px !important; padding-right: 14px !important; }
.sc8-main .btn.fw-bold, .sc8-main .btn.fw-semibold { font-weight: 500 !important; }
.sc8-main .btn.rounded-3 { border-radius: 6px !important; }

/* Tarjetas resumen con filete: sin franja de color, como las KPI del panel */
.card.border-start.border-4,
.card.border-start.border-4:is(.border-primary, .border-success, .border-warning, .border-danger, .border-info, .border-secondary) {
  border-left-width: 1px !important;
  border-left-color: var(--sc8-border-default) !important;
}