/* Fonts loaded via tags in HTML - no @import needed */
@import url('./modules/pdrs-navbar.css');
/* =========================================================================
SKELETON SHIMMER - sistema de precarga visual reutilizable
=========================================================================
Uso: agregar `data-loading="true"` al . Cuando el módulo JS
termina de renderizar, llama `document.body.removeAttribute('data-loading')`.
Los bloques `.page-skeleton` se muestran solo durante la carga; el
contenido real (`.page-content`) se oculta hasta que el loading termina.
========================================================================= */
body[data-loading] .page-skeleton { display: flex; flex-direction: column; gap: 1.5rem; }
body:not([data-loading]) .page-skeleton { display: none; }
body[data-loading] .page-content { display: none; }
.sk {
background: #e5e7eb;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.dark .sk, [data-theme='dark'] .sk {
background: #2a2a2a;
}
.sk::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
animation: sk-shimmer 1.5s ease-in-out infinite;
}
.dark .sk::after, [data-theme='dark'] .sk::after {
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
}
@keyframes sk-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.sk-text { height: 14px; margin-bottom: 8px; }
.sk-text-lg { height: 20px; margin-bottom: 10px; }
.sk-text-xl { height: 32px; margin-bottom: 12px; }
.sk-card {
border-radius: 12px;
border: 1px solid #e5e7eb;
padding: 1rem;
}
.dark .sk-card, [data-theme='dark'] .sk-card {
border-color: #333;
}
.sk-row {
height: 48px;
margin-bottom: 4px;
border-radius: 0;
}
.sk-circle {
border-radius: 50%;
}
.sk-btn { height: 40px; width: 140px; border-radius: 8px; }
.sk-filter { height: 38px; border-radius: 8px; }
.sk-kpi { height: 100px; border-radius: 12px; }
.sk-chart { height: 250px; border-radius: 12px; }
/* Skeleton específico de attendance: refleja el layout real (scanner card +
6 KPIs + tabs + filtro + tabla). Cada bloque adopta el mismo shape que
su contraparte en `.page-content` para que la transición no dispare
layout shift. */
body[data-loading] .page-skeleton.sk-attendance-layout {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.sk-attendance-scanner {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
border-radius: 16px;
border: 1px solid var(--color-border, #e5e7eb);
background: var(--color-surface, #ffffff);
flex-wrap: wrap;
}
.dark .sk-attendance-scanner, [data-theme='dark'] .sk-attendance-scanner {
background: #1a1a1a;
border-color: #2a2a2a;
}
.sk-attendance-kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
@media (min-width: 1024px) {
.sk-attendance-kpis { grid-template-columns: repeat(6, 1fr); }
}
/* Skeleton específico de settings: refleja el layout real (sidebar + cards) */
body[data-loading] .page-skeleton.sk-settings-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 1.5rem;
align-items: start;
}
.sk-settings-sidebar {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
border-radius: 16px;
background: var(--color-surface, #ffffff);
border: 1px solid var(--color-border, #e5e5e5);
}
.dark .sk-settings-sidebar, [data-theme='dark'] .sk-settings-sidebar {
background: #1a1a1a;
border-color: #2a2a2a;
}
.sk-settings-nav { height: 36px; border-radius: 8px; }
.sk-settings-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sk-settings-card { height: 260px; border-radius: 16px; }
@media (max-width: 768px) {
body[data-loading] .page-skeleton.sk-settings-layout {
grid-template-columns: 1fr;
}
.sk-settings-sidebar { flex-direction: row; overflow-x: auto; }
.sk-settings-nav { min-width: 100px; flex-shrink: 0; }
}
/* =========================================
.consent-check - checkbox de consentimiento con texto multi-línea al lado.
Usado por: DPA en superadmin (Nuevo Club), términos en login y saas-login.
Centralizado acá para no repetir estilos inline y mantener un solo lugar
de verdad para el patrón "acepto X".
========================================= */
.consent-check {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.85rem;
line-height: 1.5;
cursor: pointer;
}
/* label.consent-check para elevar specificity (0,2,2) por sobre
`.sa-modal input[type="checkbox"]` (0,2,1) que vive en