/* =============================================================
theme-seline.css — Estilo "Seline Analytics" (Refero Design)
"Escritorio de analista sobre papel cálido"
Capa de diseño que se carga DESPUÉS de theme.css y components.css
(ver includes/theme_head.php). No cambia el marcado ni las opciones
de ninguna página: redefine los tokens y restiliza los componentes.
Para volver al tema anterior basta con quitar el de este archivo.
Principios del estilo:
- Lienzo piedra cálido (#fafaf9); tarjetas blancas con borde fino #e8e6e5.
- Un solo acento cromático: cian #3ba6f1. Todo lo demás, neutros piedra.
- Títulos en Inter Tight peso 400 con tracking negativo (autoridad sin gritar).
- Cuerpo en Inter 14px / 1.64.
- Controles en píldora (9999px); tarjetas 10px; inputs 6px.
- Sombras mínimas: el borde ES la estructura.
- Estados de asistencia (presente / tardanza / falta): se mantienen por
ser información, pero en tintes suaves y desaturados.
============================================================= */
/* ============================================================
1. TOKENS
============================================================ */
:root {
/* ---- Paleta Seline ---- */
--sl-canvas: #fafaf9; /* Stone Canvas: fondo de página */
--sl-white: #ffffff; /* Pure White: tarjetas, inputs */
--sl-border: #e8e6e5; /* Stone Border: hairline estructural */
--sl-muted: #d6d3d1; /* Stone Muted: bordes secundarios */
--sl-ash: #a8a29e; /* Ash Gray: texto auxiliar, iconos */
--sl-warm: #78716c; /* Warm Gray: texto secundario, nav */
--sl-ink: #0c0a09; /* Ink Black: títulos, texto fuerte */
--sl-soot: #1c1917; /* Soot: superficies invertidas */
--sl-sky: #c1e1f7; /* Sky Wash: resaltado */
--sl-cyan: #3ba6f1; /* Cyan Signal: acción primaria */
--sl-cyan-edge: #3398e1; /* Cyan Edge: bordes/enlaces */
/* ---- Escala "indigo" del tema base remapeada a cian ----
(todo componente que usaba indigo pasa a hablar con la voz cian) */
--indigo-50: #f0f8fe;
--indigo-100: #e0f0fd;
--indigo-200: #c1e1f7;
--indigo-300: #93cdf4;
--indigo-400: #5db6f3;
--indigo-500: #3ba6f1;
--indigo-600: #3ba6f1;
--indigo-700: #3398e1;
--indigo-800: #2a7fbd;
--indigo-900: #1f5577;
--indigo-950: #163a52;
/* ---- Escala "zinc" remapeada a stone (neutros cálidos) ---- */
--zinc-0: #ffffff;
--zinc-50: #fafaf9;
--zinc-100: #f5f5f4;
--zinc-200: #e8e6e5;
--zinc-300: #d6d3d1;
--zinc-400: #a8a29e;
--zinc-500: #78716c;
--zinc-600: #57534e;
--zinc-700: #44403c;
--zinc-800: #292524;
--zinc-900: #1c1917;
--zinc-950: #0c0a09;
/* ---- Semánticos atenuados (solo para estados de asistencia) ---- */
--success-50: #f0f7f2; --success-500: #4c9a6a; --success-700: #2f7a4f; --success-900: #1f5135;
--warning-50: #fbf6ea; --warning-500: #c9962e; --warning-700: #956a12; --warning-900: #66480b;
--danger-50: #fbf1ef; --danger-500: #c9574c; --danger-700: #a43c31; --danger-900: #702820;
--info-50: #f0f8fe; --info-500: #3ba6f1; --info-700: #2a7fbd; --info-900: #1f5577;
/* ---- Superficies ---- */
--bg-app: var(--sl-canvas);
--bg-surface: var(--sl-white);
--bg-surface-2: #f5f5f4;
--bg-overlay: rgba(12, 10, 9, 0.35);
--bg-sidebar: var(--sl-white);
--bg-sidebar-active: #f5f5f4;
--text-primary: var(--sl-ink);
--text-secondary: var(--sl-warm);
--text-tertiary: var(--sl-warm);
--text-disabled: var(--sl-ash);
--text-on-brand: #ffffff;
--text-on-sidebar: var(--sl-warm);
--text-on-sidebar-muted: var(--sl-ash);
--border-subtle: #f0eeed;
--border-default: var(--sl-border);
--border-strong: var(--sl-muted);
--border-brand: var(--sl-cyan-edge);
/* ---- Radios ---- */
--r-xs: 4px; /* iconos */
--r-sm: 6px; /* inputs */
--r-md: 6px;
--r-lg: 10px; /* tarjetas */
--r-xl: 16px; /* tarjeta destacada / modal */
--r-2xl: 16px;
--r-pill: 9999px;
/* ---- Sombras (mínimas) ---- */
--shadow-xs: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
--shadow-sm: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
--shadow-md: rgba(0, 0, 0, 0.05) 0px 4px 16px 0px;
--shadow-lg: rgba(0, 0, 0, 0.05) 0px 4px 16px 0px;
--shadow-xl: rgba(17, 12, 46, 0.12) 0px 12px 45px 0px;
--shadow-2xl: rgba(17, 12, 46, 0.12) 0px 12px 45px 0px;
--shadow-focus: 0 0 0 2px rgba(59, 166, 241, 0.45);
--shadow-inset: none;
/* ---- Tipografía ---- */
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--fs-2xs: 0.6875rem; /* 11px */
--fs-xs: 0.75rem; /* 12px */
--fs-sm: 0.8125rem; /* 13px */
--fs-base: 0.875rem; /* 14px */
--fs-md: 0.9375rem; /* 15px */
--fs-lg: 1rem; /* 16px */
--fs-xl: 1.125rem; /* 18px */
--fs-2xl: 1.25rem; /* 20px subheading */
--fs-3xl: 2rem; /* 32px heading-sm */
--fs-4xl: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); /* 52px display */
--lh-tight: 1.2;
--lh-snug: 1.25;
--lh-normal: 1.64;
--lh-relaxed: 1.69;
/* ---- Bootstrap ---- */
--bs-body-bg: var(--sl-canvas);
--bs-body-color: var(--sl-ink);
--bs-body-font-family: var(--font-sans);
--bs-body-font-size: 0.875rem;
--bs-body-line-height: 1.64;
--bs-primary: #3ba6f1;
--bs-primary-rgb: 59, 166, 241;
--bs-secondary: #78716c;
--bs-secondary-rgb: 120, 113, 108;
--bs-success: #4c9a6a;
--bs-warning: #c9962e;
--bs-danger: #c9574c;
--bs-info: #3ba6f1;
--bs-light: #fafaf9;
--bs-dark: #1c1917;
--bs-link-color: #3398e1;
--bs-link-color-rgb: 51, 152, 225;
--bs-link-hover-color: #2a7fbd;
--bs-border-color: #e8e6e5;
--bs-border-radius: 6px;
--bs-border-radius-sm: 6px;
--bs-border-radius-lg: 10px;
--bs-border-radius-xl: 16px;
--bs-emphasis-color: #0c0a09;
--bs-secondary-color: #78716c;
--bs-tertiary-bg: #f5f5f4;
}
/* ---- Modo oscuro (toggle del sidebar): piedra oscura, mismo acento ---- */
html[data-theme="dark"] {
--bg-app: #0c0a09;
--bg-surface: #1c1917;
--bg-surface-2: #292524;
--bg-sidebar: #1c1917;
--bg-sidebar-active: #292524;
--text-primary: #f5f5f4;
--text-secondary: #a8a29e;
--text-tertiary: #a8a29e;
--text-disabled: #78716c;
--text-on-sidebar: #a8a29e;
--text-on-sidebar-muted: #78716c;
--border-subtle: #292524;
--border-default: #2f2b29;
--border-strong: #44403c;
--zinc-50: #1c1917;
--zinc-100: #292524;
--shadow-md: rgba(0, 0, 0, 0.35) 0px 4px 16px 0px;
--shadow-xl: rgba(0, 0, 0, 0.5) 0px 12px 45px 0px;
--bs-body-bg: #0c0a09;
--bs-body-color: #f5f5f4;
--bs-border-color: #2f2b29;
}
/* ============================================================
2. BASE Y TIPOGRAFÍA
============================================================ */
body {
background-color: var(--bg-app) !important;
color: var(--text-primary);
font-family: var(--font-sans) !important;
font-size: 14px !important;
line-height: 1.64;
letter-spacing: 0.004em;
font-feature-settings: 'cv11', 'ss01';
}
::selection { background: var(--sl-sky); color: var(--sl-ink); }
/* Títulos: Inter Tight peso 400, tracking negativo. Nunca negrita. */
h1, .h1, h2, .h2, h3, .h3,
.page-header__title, .login-form-card__title, .login-shell__hero-title,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
font-family: var(--font-display) !important;
font-weight: 400 !important;
color: var(--text-primary);
}
h1, .h1 { font-size: 2rem !important; line-height: 1.25; letter-spacing: -0.025em; }
h2, .h2 { font-size: 1.625rem !important; line-height: 1.25; letter-spacing: -0.022em; }
h3, .h3 { font-size: 1.25rem !important; line-height: 1.22; letter-spacing: -0.017em; }
h4, .h4 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.017em; }
h5, .h5 { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em; }
h6, .h6 { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; }
/* Iconos que acompañan a los títulos de página: discretos, cian */
h1 > .bi, h2 > .bi, .h1 > .bi, .h2 > .bi { color: var(--sl-cyan); font-size: 0.8em; }
p { color: var(--text-secondary); line-height: 1.64; }
small, .small { font-size: 0.8125rem; }
strong, b { font-weight: 600; }
a { color: var(--sl-cyan-edge); }
a:hover { color: var(--indigo-800); }
/* Resaltado editorial (patrón firma de Seline): */
.sl-highlight {
color: var(--sl-cyan-edge);
background: var(--sl-sky);
border-radius: 4px;
padding: 0 0.3em;
}
/* Números tabulares en datos */
td, .kpi-card__value, .card .card-text, .card .h2, .card .h4 { font-variant-numeric: tabular-nums; }
/* ============================================================
3. ENCABEZADO SUPERIOR (includes/header.php)
Barra blanca con borde fino; el logo y el nombre en tinta.
============================================================ */
.navbar.app-header,
.navbar.bg-primary,
.navbar.navbar-dark {
background-color: var(--bg-surface) !important;
border-bottom: 1px solid var(--border-default) !important;
box-shadow: none !important;
min-height: 56px;
}
.navbar.app-header .navbar-brand,
.navbar.bg-primary .navbar-brand,
.navbar.navbar-dark .navbar-brand {
color: var(--text-primary) !important;
font-family: var(--font-sans);
font-weight: 500 !important;
font-size: 14px !important;
}
.navbar.app-header .navbar-text,
.navbar.bg-primary .navbar-text,
.navbar.navbar-dark .navbar-text {
color: var(--text-secondary) !important;
font-size: 13px;
}
.navbar.app-header .btn-outline-light,
.navbar.bg-primary .btn-outline-light,
.navbar.navbar-dark .btn-outline-light {
background: transparent !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-default) !important;
}
.navbar.app-header .btn-outline-light:hover,
.navbar.bg-primary .btn-outline-light:hover,
.navbar.navbar-dark .btn-outline-light:hover {
background: var(--bg-surface-2) !important;
border-color: var(--border-strong) !important;
}
.navbar .text-white, .navbar .text-light { color: var(--text-primary) !important; }
.system-name { color: var(--text-primary); font-weight: 500; }
/* ============================================================
4. SIDEBAR (includes/sidebar.php)
Blanco, borde derecho fino, activo en piedra con icono cian.
============================================================ */
.app-sidebar,
.sidebar.bg-light {
background-color: var(--bg-sidebar) !important;
border-right: 1px solid var(--border-default) !important;
color: var(--text-on-sidebar);
}
.app-sidebar__header {
border-bottom: 1px solid var(--border-default);
color: var(--text-primary);
}
.app-sidebar__header .sidebar-toggle-btn { color: var(--sl-ash) !important; }
.app-sidebar__header .sidebar-toggle-btn:hover,
body.sidebar-collapsed .app-sidebar__header .sidebar-toggle-btn {
color: var(--text-primary) !important;
background: var(--bg-surface-2) !important;
}
/* Marca: chip negro tinta (glyph de marca Seline), sin degradado ni brillo */
.app-sidebar__brand {
background: var(--sl-ink) !important;
box-shadow: none !important;
border-radius: 8px;
color: #fff;
}
html[data-theme="dark"] .app-sidebar__brand { background: #f5f5f4 !important; color: var(--sl-ink); }
.app-sidebar__title {
color: var(--text-primary);
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
letter-spacing: 0;
}
.app-sidebar__section-title {
color: var(--sl-ash);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.06em;
}
.app-sidebar .nav-link,
.sidebar.bg-light .nav-link {
color: var(--text-on-sidebar) !important;
font-weight: 400 !important;
font-size: 14px !important;
border-radius: 8px !important;
padding: 0.45rem 0.75rem !important;
}
.app-sidebar .nav-link i,
.sidebar.bg-light .nav-link i { color: var(--sl-ash); }
.app-sidebar .nav-link:hover,
.sidebar.bg-light .nav-link:hover {
background-color: var(--bg-surface-2);
color: var(--text-primary) !important;
}
.app-sidebar .nav-link:hover i,
.sidebar.bg-light .nav-link:hover i { color: var(--text-primary); }
.app-sidebar .nav-link.active,
.sidebar.bg-light .nav-link.active,
.app-sidebar .collapse .nav-link.active,
.sidebar.bg-light .collapse .nav-link.active {
background-color: var(--bg-sidebar-active) !important;
color: var(--text-primary) !important;
font-weight: 500 !important;
box-shadow: inset 0 0 0 1px var(--border-default);
}
.app-sidebar .nav-link.active i,
.sidebar.bg-light .nav-link.active i { color: var(--sl-cyan); }
.app-sidebar .collapse .nav-link,
.sidebar.bg-light .collapse .nav-link { color: var(--text-on-sidebar) !important; }
.sidebar .nav-link[data-bs-toggle="collapse"] .bi-chevron-down { color: var(--sl-ash); }
.sidebar .nav-link[aria-expanded="true"] .bi-chevron-down { color: var(--text-primary); }
.app-sidebar__footer {
border-top: 1px solid var(--border-default);
background: transparent;
}
.app-sidebar__user-avatar {
background: var(--bg-surface-2);
color: var(--text-primary);
box-shadow: inset 0 0 0 1px var(--border-default);
font-weight: 500;
}
.app-sidebar__user-name { color: var(--text-primary); }
.app-sidebar__user-role { color: var(--sl-ash); letter-spacing: 0.04em; font-size: 10.5px; }
.app-sidebar__footer .nav-link { color: var(--text-on-sidebar) !important; }
.theme-toggle {
background: transparent !important;
border: 1px solid var(--border-default) !important;
color: var(--text-secondary) !important;
border-radius: 9999px !important;
}
.theme-toggle:hover { background: var(--bg-surface-2) !important; color: var(--text-primary) !important; }
body.sidebar-mobile-show::after { background: var(--bg-overlay); backdrop-filter: none; }
/* ============================================================
5. BOTONES — píldora; el cian relleno es la única acción "encendida"
============================================================ */
.btn {
border-radius: 9999px !important;
padding: 0.5rem 1rem !important;
font-weight: 500 !important;
font-size: 14px !important;
letter-spacing: 0;
box-shadow: none !important;
transform: none !important;
}
.btn-sm { padding: 0.3rem 0.8rem !important; font-size: 13px !important; }
.btn-lg { padding: 0.65rem 1.4rem !important; font-size: 15px !important; }
.btn:focus-visible { box-shadow: var(--shadow-focus) !important; }
/* Primaria: cian relleno */
.btn-primary {
background-color: var(--sl-cyan) !important;
border: 1px solid var(--sl-cyan-edge) !important;
color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: var(--sl-cyan-edge) !important;
border-color: var(--sl-cyan-edge) !important;
color: #fff !important;
}
/* Acciones primarias repetidas dentro de tarjetas, tablas y listas
(ej. "Editar" en cada empleado): fantasmas con icono cian, para que el
cian relleno quede solo en la acción principal de la pantalla. */
.card-body .btn-primary.btn-sm, .table .btn-primary:not(.mode-toggle .btn), .list-group .btn-primary.btn-sm,
.btn-group:not(.mode-toggle) > .btn-primary {
background-color: var(--bg-surface) !important;
border: 1px solid var(--border-default) !important;
color: var(--text-primary) !important;
}
.card-body .btn-primary.btn-sm .bi, .table .btn-primary:not(.mode-toggle .btn) .bi,
.list-group .btn-primary.btn-sm .bi, .btn-group:not(.mode-toggle) > .btn-primary .bi { color: var(--sl-cyan-edge); }
.card-body .btn-primary.btn-sm:hover, .table .btn-primary:not(.mode-toggle .btn):hover,
.list-group .btn-primary.btn-sm:hover, .btn-group:not(.mode-toggle) > .btn-primary:hover {
background-color: var(--indigo-50) !important;
border-color: var(--sl-sky) !important;
color: var(--text-primary) !important;
}
/* Secundarias: fantasma con borde piedra */
.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary,
.btn-outline-dark, .btn-outline-light, .btn-outline-info, .btn-ghost {
background-color: transparent !important;
border: 1px solid var(--border-default) !important;
color: var(--text-primary) !important;
font-weight: 400 !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover,
.btn-outline-dark:hover, .btn-outline-light:hover, .btn-outline-info:hover, .btn-ghost:hover {
background-color: var(--bg-surface-2) !important;
border-color: var(--border-strong) !important;
color: var(--text-primary) !important;
}
/* Estado activo (botones de alternancia en grupos): invertido en hollín */
.btn-check:checked + .btn, .btn.active,
.btn-dark {
background-color: var(--sl-soot) !important;
border-color: var(--sl-soot) !important;
color: #fff !important;
}
/* Selectores de modo (Gestionar rostros: Facial / Manual / Ambos): la opción
activa usa la variante "sólida" (btn-primary/secondary/info) → hollín;
las inactivas usan "outline" → fantasma. */
.mode-toggle .btn-primary, .mode-toggle .btn-secondary, .mode-toggle .btn-info {
background-color: var(--sl-soot) !important;
border-color: var(--sl-soot) !important;
color: #fff !important;
}
.mode-toggle .btn-primary .bi, .mode-toggle .btn-secondary .bi, .mode-toggle .btn-info .bi { color: #fff !important; }
.mode-toggle .btn[class*="btn-outline-"] .bi { color: var(--sl-ash); }
html[data-theme="dark"] .mode-toggle .btn-primary, html[data-theme="dark"] .mode-toggle .btn-secondary,
html[data-theme="dark"] .mode-toggle .btn-info { background-color: #f5f5f4 !important; border-color: #f5f5f4 !important; }
html[data-theme="dark"] .mode-toggle .btn-primary .bi, html[data-theme="dark"] .mode-toggle .btn-secondary .bi,
html[data-theme="dark"] .mode-toggle .btn-info .bi { color: var(--sl-ink) !important; }
html[data-theme="dark"] .btn-check:checked + .btn,
html[data-theme="dark"] .btn.active,
html[data-theme="dark"] .btn-dark { background-color: #f5f5f4 !important; border-color: #f5f5f4 !important; color: var(--sl-ink) !important; }
/* Acciones semánticas (Exportar Excel, Registro manual, Eliminar...):
fantasmas con el icono en el color del significado, sin rellenos de color */
.btn-success, .btn-warning, .btn-info, .btn-danger {
background-color: var(--bg-surface) !important;
border: 1px solid var(--border-default) !important;
color: var(--text-primary) !important;
font-weight: 500 !important;
}
.btn-success .bi, .btn-outline-success .bi { color: var(--success-700); }
.btn-warning .bi, .btn-outline-warning .bi { color: var(--warning-700); }
.btn-info .bi { color: var(--sl-cyan-edge); }
.btn-danger .bi, .btn-outline-danger .bi { color: var(--danger-700); }
.btn-success:hover, .btn-warning:hover, .btn-info:hover {
background-color: var(--bg-surface-2) !important;
border-color: var(--border-strong) !important;
color: var(--text-primary) !important;
}
.btn-danger:hover, .btn-outline-danger:hover {
background-color: var(--danger-50) !important;
border-color: #ecc9c4 !important;
color: var(--danger-700) !important;
}
.btn-outline-success, .btn-outline-warning, .btn-outline-danger {
background-color: transparent !important;
border: 1px solid var(--border-default) !important;
color: var(--text-primary) !important;
font-weight: 400 !important;
}
.btn-outline-success:hover, .btn-outline-warning:hover {
background-color: var(--bg-surface-2) !important;
border-color: var(--border-strong) !important;
}
.btn-link { color: var(--sl-cyan-edge) !important; border-color: transparent !important; background: transparent !important; }
.btn-close { border-radius: 9999px !important; }
/* Grupos de botones: píldoras unidas */
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; }
/* ============================================================
6. TARJETAS — blancas, radio 10, borde fino, sombra apenas
============================================================ */
.card {
background-color: var(--bg-surface) !important;
border: 1px solid var(--border-default) !important;
border-radius: 10px !important;
box-shadow: var(--shadow-md) !important;
}
.card:hover, .card.card-interactive:hover, .card.shadow-hover:hover { transform: none !important; }
.card-header {
background: var(--bg-surface) !important; /* shorthand: anula también degradados heredados */
border-bottom: 1px solid var(--border-default) !important;
padding: 1rem 1.5rem !important;
color: var(--text-primary) !important;
font-weight: 500;
}
.card-header h5, .card-header .h5, .card-header h6, .card-header .card-title {
font-family: var(--font-sans) !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--text-primary) !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 0;
}
.card-header .bi { color: var(--sl-ash); }
.card-body { padding: 1.5rem !important; }
.card-footer { background-color: var(--bg-surface) !important; border-top: 1px solid var(--border-default) !important; }
/* Cabeceras de tarjeta "de color" (bg-primary, bg-info, bg-dark, degradados...):
en Seline todo encabezado es blanco con texto tinta. */
.card-header.bg-primary, .card-header.bg-info, .card-header.bg-success,
.card-header.bg-warning, .card-header.bg-danger, .card-header.bg-dark,
.card-header.bg-secondary, .card-header[class*="bg-gradient"],
.card-header[style*="gradient"], .card-header[style*="background"] {
background: var(--bg-surface) !important;
color: var(--text-primary) !important;
}
.card-header.bg-primary *, .card-header.bg-info *, .card-header.bg-success *,
.card-header.bg-warning *, .card-header.bg-danger *, .card-header.bg-dark *,
.card-header.bg-secondary *, .card-header[style*="gradient"] *,
.card-header .text-white, .card-header .text-light {
color: var(--text-primary) !important;
}
.card-header.bg-primary .bi, .card-header.bg-info .bi, .card-header.bg-dark .bi,
.card-header[style*="gradient"] .bi { color: var(--sl-ash) !important; }
/* Etiqueta de tarjeta (KPI): caption pequeño en gris cálido */
.card .card-title {
font-family: var(--font-sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--text-secondary) !important;
text-transform: none !important;
letter-spacing: 0.01em !important;
}
/* Cifra de KPI: Inter Tight peso 400 — susurrada, no gritada */
.card .card-text, .card .h4, .card .h2, .kpi-card__value {
font-family: var(--font-display) !important;
font-weight: 400 !important;
font-size: 2rem !important;
letter-spacing: -0.025em !important;
line-height: 1.12 !important;
color: var(--text-primary) !important;
}
/* ...salvo en párrafos de texto dentro de tarjetas */
.card p.card-text { font-family: var(--font-sans) !important; font-size: 14px !important; letter-spacing: 0 !important; line-height: 1.64 !important; color: var(--text-secondary) !important; }
/* Icono de KPI: chip piedra con trazo fino, sin colores */
.card .stat-icon, .kpi-card__icon,
.kpi-card__icon--indigo, .kpi-card__icon--success, .kpi-card__icon--warning,
.kpi-card__icon--danger, .kpi-card__icon--info {
background: var(--bg-surface-2) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-default);
border-radius: 8px !important;
}
.card .stat-icon i, .card .stat-icon .bi { color: var(--text-primary) !important; }
.kpi-card {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: 10px;
box-shadow: var(--shadow-md);
}
.kpi-card:hover { transform: none; box-shadow: var(--shadow-md); border-color: var(--border-strong); }
/* Tarjetas de estadísticas de páginas con borde izquierdo de color
(gestionar_rostros, etc.): borde neutro, el dato manda */
.stats-card, .stat-card { border-left-color: var(--border-default) !important; }
.stats-card:hover, .stat-card:hover { transform: none !important; }
/* Iconos decorativos grandes en tarjetas de estadísticas: trazo piedra */
.stats-card .bi, .stat-card .bi, .card .display-4.bi, .card .fs-1.bi, .card i.fa-2x, .card i.fa-3x,
.card-body > .d-flex > .bi:last-child, .card-body > .d-flex > div > .bi[style*="font-size"] {
color: var(--sl-muted) !important;
}
/* Porcentajes de color bajo las cifras: gris cálido */
.stats-card small, .stats-card .small { color: var(--sl-warm) !important; }
/* ============================================================
7. FORMULARIOS
============================================================ */
.form-control, .form-select {
background-color: var(--bg-surface) !important;
border: 1px solid var(--sl-muted) !important;
border-radius: 6px !important;
color: var(--text-primary) !important;
font-size: 14px !important;
padding: 0.45rem 0.75rem !important;
box-shadow: none !important;
}
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { border-color: var(--border-strong) !important; }
.form-control::placeholder { color: var(--sl-warm) !important; opacity: 0.8; }
.form-control:focus, .form-select:focus {
border-color: var(--sl-cyan) !important;
box-shadow: 0 0 0 2px rgba(59, 166, 241, 0.35) !important;
}
.form-control-sm, .form-select-sm { font-size: 13px !important; padding: 0.3rem 0.6rem !important; }
.form-label {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--text-primary) !important;
}
.form-label .bi { color: var(--sl-ash); }
.form-text { color: var(--sl-warm) !important; font-size: 12.5px; }
.input-group-text {
background-color: var(--bg-surface-2) !important;
border-color: var(--sl-muted) !important;
color: var(--text-secondary) !important;
border-radius: 6px;
}
.form-check-input { border-color: var(--sl-muted) !important; }
.form-check-input:checked {
background-color: var(--sl-cyan) !important;
border-color: var(--sl-cyan-edge) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 2px rgba(59, 166, 241, 0.35) !important; border-color: var(--sl-cyan) !important; }
.form-switch .form-check-input { border-radius: 9999px !important; }
/* Select2 (filtros de reportes/asistencias) */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
border: 1px solid var(--sl-muted) !important;
border-radius: 6px !important;
background-color: var(--bg-surface) !important;
box-shadow: none !important;
font-size: 14px !important;
min-height: 38px;
}
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
html[data-theme="dark"] .select2-container--default .select2-selection--single { border-color: var(--border-strong) !important; }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
border-color: var(--sl-cyan) !important;
box-shadow: 0 0 0 2px rgba(59, 166, 241, 0.35) !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: var(--sl-warm) !important; }
.select2-container--bootstrap-5 .select2-dropdown {
border-color: var(--border-default) !important;
border-radius: 10px !important;
box-shadow: var(--shadow-md) !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: var(--bg-surface-2) !important; color: var(--text-primary) !important; }
.select2-container--bootstrap-5 .select2-results__option--selected { background-color: var(--indigo-50) !important; color: var(--text-primary) !important; }
/* ============================================================
8. TABLAS — densas, separadores finos, cabecera en caption
============================================================ */
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--text-primary);
--bs-table-striped-bg: transparent;
--bs-table-hover-bg: var(--bg-surface-2);
font-size: 13.5px;
}
.table > thead > tr > th,
.table > thead.table-dark > tr > th,
.table > thead.table-light > tr > th,
.table > thead.table-primary > tr > th,
.table-dark > thead > tr > th {
background-color: var(--bg-surface) !important;
color: var(--sl-warm) !important;
font-family: var(--font-sans);
font-size: 12px !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0.01em !important;
border-top: none !important;
border-bottom: 1px solid var(--border-default) !important;
padding: 0.7rem 1rem !important;
white-space: nowrap;
}
.table > tbody > tr > td {
border-bottom: 1px solid var(--border-subtle) !important;
padding: 0.7rem 1rem !important;
color: var(--text-primary) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: transparent !important; box-shadow: none !important; }
.table-hover > tbody > tr:hover > td { background-color: var(--bg-surface-2) !important; }
.table-bordered, .table-bordered > :not(caption) > * > * { border-color: var(--border-default) !important; }
.table-responsive { border-radius: 10px; box-shadow: none !important; }
.table-sm > tbody > tr > td, .table-sm > thead > tr > th { padding: 0.45rem 0.75rem !important; }
/* Filas resaltadas por estado (table-success/warning/danger...): tinte mínimo */
.table-success > td, tr.table-success > * { background-color: var(--success-50) !important; }
.table-warning > td, tr.table-warning > * { background-color: var(--warning-50) !important; }
.table-danger > td, tr.table-danger > * { background-color: var(--danger-50) !important; }
.table-info > td, tr.table-info > * { background-color: var(--indigo-50) !important; }
.table-primary > td, tr.table-primary > * { background-color: var(--indigo-50) !important; }
/* ============================================================
9. BADGES / ETIQUETAS — píldoras tenues
============================================================ */
.badge {
border-radius: 9999px !important;
font-weight: 500 !important;
font-size: 12px !important;
padding: 0.2rem 0.6rem !important;
letter-spacing: 0.01em;
border: 1px solid transparent;
}
.badge.bg-primary, .bg-primary:not(.navbar):not(.card-header):not(.btn):not(.progress-bar) {
background-color: var(--indigo-50) !important;
color: var(--indigo-800) !important;
border-color: var(--sl-sky);
}
.badge.bg-secondary, .bg-secondary:not(.btn):not(.card-header) { background-color: var(--bg-surface-2) !important; color: var(--zinc-600) !important; border-color: var(--border-default); }
.badge.bg-dark, .bg-dark:not(.btn):not(.card-header) { background-color: var(--sl-soot) !important; color: #fff !important; }
.badge.bg-light { background-color: var(--bg-surface-2) !important; color: var(--text-primary) !important; border-color: var(--border-default); }
.badge.bg-info, .bg-info:not(.btn):not(.card-header) { background-color: var(--indigo-50) !important; color: var(--indigo-800) !important; }
.bg-success:not(.btn):not(.card-header), .badge.bg-success, .status-presente, .estado-presente {
background-color: var(--success-50) !important; color: var(--success-700) !important; border-color: #d3e8da;
}
.bg-warning:not(.btn):not(.card-header), .badge.bg-warning, .status-tardanza, .estado-tardanza {
background-color: var(--warning-50) !important; color: var(--warning-700) !important; border-color: #efe0bd;
}
.bg-danger:not(.btn):not(.card-header), .badge.bg-danger, .status-falta, .estado-falta {
background-color: var(--danger-50) !important; color: var(--danger-700) !important; border-color: #f0d3ce;
}
.status-permiso, .status-vacaciones, .status-licencia {
background-color: var(--indigo-50) !important; color: var(--indigo-800) !important;
}
/* texto blanco forzado sobre fondos que ahora son claros */
.bg-success.text-white, .bg-warning.text-white, .bg-danger.text-white,
.bg-info.text-white, .bg-primary.text-white:not(.btn), .bg-secondary.text-white { color: inherit !important; }
.badge.text-dark { color: var(--text-primary) !important; }
.rounded-pill { border-radius: 9999px !important; }
/* Utilidades de texto de color */
.text-primary { color: var(--sl-cyan-edge) !important; }
.text-info { color: var(--sl-cyan-edge) !important; }
.text-success { color: var(--success-700) !important; }
.text-warning { color: var(--warning-700) !important; }
.text-danger { color: var(--danger-700) !important; }
.text-muted, .text-secondary { color: var(--sl-warm) !important; }
.text-dark { color: var(--text-primary) !important; }
.text-body { color: var(--text-primary) !important; }
.border-primary { border-color: var(--sl-cyan) !important; }
.border-success, .border-warning, .border-danger, .border-info, .border-secondary { border-color: var(--border-default) !important; }
.border-start.border-4, .border-left-primary, .border-left-success,
.border-left-warning, .border-left-danger, .border-left-info { border-left-color: var(--border-default) !important; }
/* ============================================================
10. PESTAÑAS — grupo de píldoras (activo en hollín)
============================================================ */
.nav-tabs {
border-bottom: none !important;
gap: 6px;
flex-wrap: wrap;
padding-bottom: 0.25rem;
}
.nav-tabs .nav-link {
border: 1px solid var(--border-default) !important;
border-radius: 9999px !important;
background: var(--bg-surface) !important;
color: var(--text-primary) !important;
font-size: 13.5px;
font-weight: 400;
padding: 0.35rem 0.9rem !important;
margin: 0 !important;
}
.nav-tabs .nav-link .bi { color: var(--sl-ash); }
.nav-tabs .nav-link:hover { background: var(--bg-surface-2) !important; border-color: var(--border-strong) !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
background: var(--sl-soot) !important;
border-color: var(--sl-soot) !important;
color: #fff !important;
}
.nav-tabs .nav-link.active .bi { color: #fff; }
html[data-theme="dark"] .nav-tabs .nav-link.active { background: #f5f5f4 !important; color: var(--sl-ink) !important; }
html[data-theme="dark"] .nav-tabs .nav-link.active .bi { color: var(--sl-ink); }
.nav-pills .nav-link { border-radius: 9999px !important; color: var(--text-primary); }
.nav-pills .nav-link.active { background: var(--sl-soot) !important; color: #fff !important; }
/* Paginación */
.pagination { gap: 4px; }
.page-link {
border-radius: 9999px !important;
border: 1px solid var(--border-default) !important;
color: var(--text-primary) !important;
background: var(--bg-surface) !important;
font-size: 13px;
min-width: 34px;
text-align: center;
}
.page-item.active .page-link { background: var(--sl-soot) !important; border-color: var(--sl-soot) !important; color: #fff !important; }
.page-link:hover { background: var(--bg-surface-2) !important; }
/* ============================================================
11. ALERTAS — planas, borde fino, sin color de fondo intenso
============================================================ */
.alert {
border-radius: 10px !important;
border: 1px solid var(--border-default) !important;
background: var(--bg-surface) !important;
color: var(--text-primary) !important;
font-size: 13.5px;
box-shadow: none;
}
.alert-primary, .alert-info { background: var(--indigo-50) !important; border-color: var(--sl-sky) !important; color: var(--indigo-900) !important; }
.alert-success { background: var(--success-50) !important; border-color: #d3e8da !important; color: var(--success-900) !important; }
.alert-warning { background: var(--warning-50) !important; border-color: #efe0bd !important; color: var(--warning-900) !important; }
.alert-danger { background: var(--danger-50) !important; border-color: #f0d3ce !important; color: var(--danger-900) !important; }
.alert-secondary, .alert-light, .alert-dark { background: var(--bg-surface-2) !important; color: var(--text-primary) !important; }
.alert .alert-link { color: inherit !important; text-decoration: underline; font-weight: 500; }
/* ============================================================
12. MODALES, DROPDOWNS, TOOLTIPS, LIST GROUPS
============================================================ */
.modal-content {
border: 1px solid var(--border-default) !important;
border-radius: 16px !important;
box-shadow: var(--shadow-xl) !important;
background: var(--bg-surface) !important;
}
.modal-header, .modal-footer { border-color: var(--border-default) !important; background: var(--bg-surface) !important; }
.modal-header.bg-primary, .modal-header.bg-info, .modal-header.bg-success, .modal-header.bg-warning,
.modal-header.bg-danger, .modal-header.bg-dark, .modal-header[style*="gradient"] {
background: var(--bg-surface) !important;
color: var(--text-primary) !important;
}
.modal-header.bg-primary *, .modal-header.bg-info *, .modal-header.bg-success *, .modal-header.bg-warning *,
.modal-header.bg-danger *, .modal-header.bg-dark *, .modal-header .text-white { color: var(--text-primary) !important; }
.modal-header .btn-close-white { filter: none !important; }
.modal-title { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 1.25rem !important; letter-spacing: -0.017em; }
.modal-backdrop.show { background-color: var(--sl-ink); opacity: 0.3; }
.dropdown-menu {
border: 1px solid var(--border-default) !important;
border-radius: 10px !important;
box-shadow: var(--shadow-md) !important;
}
.dropdown-item { border-radius: 6px; font-size: 13.5px; }
.dropdown-item.active, .dropdown-item:active { background: var(--bg-surface-2) !important; color: var(--text-primary) !important; }
.list-group-item { border-color: var(--border-default) !important; background: var(--bg-surface); color: var(--text-primary); }
.list-group-item.active { background: var(--bg-surface-2) !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; font-weight: 500; }
.list-group-item-action:hover { background: var(--bg-surface-2); }
.tooltip-inner { background: var(--sl-soot); border-radius: 6px; font-size: 12px; }
/* Barras de progreso: cian fino */
.progress { height: 6px; background: var(--bg-surface-2) !important; border-radius: 9999px; }
.progress-bar { background-color: var(--sl-cyan) !important; }
.progress-bar.bg-success { background-color: var(--success-500) !important; }
.progress-bar.bg-warning { background-color: var(--warning-500) !important; }
.progress-bar.bg-danger { background-color: var(--danger-500) !important; }
.spinner-border, .spinner-grow { color: var(--sl-cyan) !important; }
/* ============================================================
13. ENCABEZADO DE PÁGINA (h1 + acciones) — patrón Bootstrap del sistema
============================================================ */
main .border-bottom:first-child,
main > .d-flex.border-bottom,
.page-header {
border-bottom: 1px solid var(--border-default) !important;
}
.page-header__title { font-size: 2rem; letter-spacing: -0.025em; }
.page-header__subtitle { color: var(--sl-warm); }
/* ============================================================
14. LOGIN (split screen): panel editorial claro
============================================================ */
.login-shell { background: var(--bg-app); }
.login-shell__hero {
background: var(--bg-app) !important;
color: var(--text-primary) !important;
border-right: 1px solid var(--border-default);
}
.login-shell__hero::before { display: none; }
.login-shell__hero-brand-mark { background: var(--sl-ink); backdrop-filter: none; border-radius: 8px; }
.login-shell__hero .login-shell__hero-brand-mark,
.login-shell__hero .login-shell__hero-brand-mark * { color: #fff !important; }
.login-shell__hero-title { font-size: var(--fs-4xl) !important; letter-spacing: -0.021em; line-height: 1.12; color: var(--text-primary) !important; }
.login-shell__hero-subtitle { color: var(--sl-warm) !important; font-size: 16px; line-height: 1.69; }
.login-shell__hero-footer { color: var(--sl-ash) !important; }
.login-shell__hero * { color: inherit; }
.login-shell__form { background: var(--bg-surface); }
.login-form-card__title { font-size: 2rem !important; letter-spacing: -0.025em; }
.login-form-card__subtitle { color: var(--sl-warm); }
/* ============================================================
15. VISTAS DE EMPLEADO / MÓVIL
============================================================ */
.reloj-digital, .clock-display {
background: var(--bg-surface) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-default) !important;
box-shadow: var(--shadow-xl) !important;
border-radius: 16px !important;
}
.reloj-digital::before { display: none !important; }
.reloj-hora { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: -0.03em; color: var(--text-primary) !important; }
.reloj-fecha, .reloj-segundos { color: var(--sl-warm) !important; }
.bottom-nav, .mobile-bottom-nav { background: var(--bg-surface) !important; border-top: 1px solid var(--border-default) !important; box-shadow: none !important; }
.bottom-nav .nav-item { color: var(--sl-warm) !important; }
.bottom-nav .nav-item.active { color: var(--text-primary) !important; }
.bottom-nav .nav-item.active i { color: var(--sl-cyan) !important; }
.mobile-header { background: var(--bg-surface) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-default) !important; box-shadow: none !important; }
.mobile-header * { color: inherit; }
.btn-action { border-radius: 9999px !important; box-shadow: none !important; }
.video-container { border-radius: 16px !important; border: 1px solid var(--border-default); box-shadow: var(--shadow-md); }
/* Vista del empleado (index.php) */
body.dashboard-page .navbar { background-color: var(--bg-surface) !important; }
body.dashboard-page .avatar-container { border: 1px solid var(--border-default) !important; background: var(--bg-surface-2) !important; }
.welcome-hero {
background: var(--bg-surface) !important;
border: 1px solid var(--border-default) !important;
border-radius: 16px !important;
box-shadow: var(--shadow-md) !important;
}
/* Franja motivacional inferior: banda clara con borde fino, texto editorial */
.motivational-message {
background: var(--bg-surface) !important;
color: var(--text-secondary) !important;
border-top: 1px solid var(--border-default) !important;
font-family: var(--font-display) !important;
font-weight: 400 !important;
letter-spacing: -0.01em;
}
.motivational-message * { color: inherit !important; }
.footer-fixed, .fixed-footer, footer.fixed-bottom { border-top: 1px solid var(--border-default) !important; color: var(--text-secondary) !important; }
/* Tablas de reporte (reportes y vista del empleado): cabecera blanca */
.table-report thead th {
background: var(--bg-surface) !important;
color: var(--sl-warm) !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0.01em !important;
font-size: 12px !important;
border-bottom: 1px solid var(--border-default) !important;
}
.table-report .jefe-row { background-color: var(--bg-surface-2) !important; }
/* Tarjetas "de acento" que algunas vistas pintan con fondo de color sólido */
.card.bg-primary, .card.bg-info, .card.bg-success, .card.bg-warning, .card.bg-danger, .card.bg-dark,
.card.text-white[class*="bg-"] {
background: var(--bg-surface) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-default) !important;
}
.card.bg-primary *, .card.bg-info *, .card.bg-success *, .card.bg-warning *, .card.bg-danger *,
.card.bg-dark *, .card.text-white[class*="bg-"] * { color: inherit; }
.card.text-white[class*="bg-"] .text-white, .card.text-white[class*="bg-"] .text-white-50 { color: var(--text-secondary) !important; }
/* Móvil (mobile.css): cabeceras de tarjeta con degradado → blancas */
@media (max-width: 991.98px) {
.card-header { background: var(--bg-surface) !important; color: var(--text-primary) !important; }
}
:root {
--mobile-bg-gradient: var(--bg-app);
--mobile-info-bg: var(--indigo-50);
--mobile-overlay-bg: rgba(12, 10, 9, 0.75);
--mobile-btn-capture: var(--sl-cyan);
--mobile-btn-disabled: var(--sl-muted);
}
/* Calendario (FullCalendar) en la vista del empleado */
.fc .fc-button-primary { background: var(--bg-surface) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; border-radius: 9999px !important; box-shadow: none !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--sl-soot) !important; color: #fff !important; border-color: var(--sl-soot) !important; }
.fc .fc-toolbar-title { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid { border-color: var(--border-default) !important; }
.fc .fc-daygrid-day.fc-day-today { background: var(--indigo-50) !important; }
.calendar-event { background-color: var(--sl-cyan) !important; }
/* SweetAlert */
.swal2-popup { border-radius: 16px !important; border: 1px solid var(--border-default); box-shadow: var(--shadow-xl) !important; font-family: var(--font-sans) !important; }
.swal2-title { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: -0.02em; color: var(--text-primary) !important; }
.swal2-styled { border-radius: 9999px !important; box-shadow: none !important; font-weight: 500 !important; }
.swal2-styled.swal2-confirm { background: var(--sl-cyan) !important; border: 1px solid var(--sl-cyan-edge) !important; }
.swal2-styled.swal2-cancel { background: transparent !important; color: var(--text-primary) !important; border: 1px solid var(--border-default) !important; }
/* ============================================================
16. GRÁFICOS (ApexCharts / Chart.js) — analíticos minimalistas
============================================================ */
.apexcharts-canvas { font-family: var(--font-sans) !important; }
.apexcharts-title-text { font-family: var(--font-sans) !important; font-weight: 500 !important; fill: var(--text-primary) !important; }
.apexcharts-gridline { stroke: var(--border-subtle) !important; }
.apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-legend-text { fill: var(--sl-warm) !important; color: var(--sl-warm) !important; }
.apexcharts-toolbar { opacity: 0.55; }
.apexcharts-toolbar:hover { opacity: 1; }
.apexcharts-tooltip {
border: 1px solid var(--border-default) !important;
border-radius: 8px !important;
box-shadow: var(--shadow-md) !important;
background: var(--bg-surface) !important;
}
.apexcharts-tooltip-title { background: var(--bg-surface-2) !important; border-bottom-color: var(--border-default) !important; }
/* ============================================================
17. SCROLLBAR Y FOCO
============================================================ */
* { scrollbar-color: var(--sl-muted) transparent; }
*::-webkit-scrollbar-thumb { background: var(--sl-muted); }
*::-webkit-scrollbar-thumb:hover { background: var(--sl-ash); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { box-shadow: var(--shadow-focus); }
/* ============================================================
18. IMPRESIÓN — sin sombras ni fondos
============================================================ */
@media print {
.card, .modal-content { box-shadow: none !important; }
body { background: #fff !important; }
}