@charset "UTF-8";
/* =====================================================================================================================
 * SNAP UI — hoja de estilos común del sistema
 *
 * Se carga en init/layoutStartTw.php (después de jQuery UI y SlickGrid) y en index.php.
 *
 *  1. Tokens de diseño (colores, tipografía, radios, sombras). Tailwind los usa como brand-*, accent-*, etc.
 *  2. Base (tipografía, enlaces, foco, scroll).
 *  3. Componentes nuevos con prefijo snap-: botones, tarjetas, formularios, tablas, badges, alertas, encabezado de página.
 *  4. Compatibilidad: estilos modernos para las clases que ya usan los módulos (formLabel, formComponent, buttonsDiv,
 *     #leftSidebarDiv, #contentDiv, #dialogDiv, #warningDiv, ...). Solo aplica dentro de body.snap-ui.
 *  5. HTML que devuelven los .ajax.php (búsqueda general, alertas urgentes, ficha de empleado).
 *  6. jQuery UI (datepicker, dialog, autocomplete, tabs, botones).
 *  7. SlickGrid.
 *  8. Utilidades e impresión.
 *
 * Los selectores de compatibilidad usan :where() para no tener especificidad: cualquier clase de Tailwind
 * que se ponga en el HTML gana sobre estos estilos.
 *
 * Capas: se declara el mismo orden que usa Tailwind v4. Las secciones 2 a 4 van en la capa "components", así ganan a
 * la base de Tailwind (preflight) y cualquier utilidad de Tailwind (capa "utilities") gana sobre ellas.
 * jQuery UI y SlickGrid no usan capas, por eso las secciones 5 a 7 (que conviven con sus clases) quedan fuera de capa.
 * ===================================================================================================================*/

@layer theme, base, components, utilities;

/* 1. Tokens ---------------------------------------------------------------------------------------------------------*/
:root {
    /* Marca (azul SNAP en versión pastel: tonos claros suaves y 700-950 con contraste suficiente para texto y botones) */
    --snap-brand-50: #f3f7fd;
    --snap-brand-100: #e4edfa;
    --snap-brand-200: #cddcf4;
    --snap-brand-300: #a9c3ea;
    --snap-brand-400: #7fa3dc;
    --snap-brand-500: #5a84cb;
    --snap-brand-600: #4469b3;
    --snap-brand-700: #375699;
    --snap-brand-800: #2f4880;
    --snap-brand-900: #283c66;
    --snap-brand-950: #1b2742;

    /* Acento (ocre/durazno pastel, heredado del amarillo de SNAP) */
    --snap-accent-50: #fdf8ee;
    --snap-accent-100: #fbeed5;
    --snap-accent-200: #f6dcaa;
    --snap-accent-300: #f1cb88;
    --snap-accent-400: #edbd6a;
    --snap-accent-500: #dba450;
    --snap-accent-600: #c48a35;
    --snap-accent-700: #9a6a28;
    --snap-accent-800: #6f4c1e;

    /* Neutros */
    --snap-gray-50: #f8fafc;
    --snap-gray-100: #f1f5f9;
    --snap-gray-200: #e2e8f0;
    --snap-gray-300: #cbd5e1;
    --snap-gray-400: #94a3b8;
    --snap-gray-500: #64748b;
    --snap-gray-600: #475569;
    --snap-gray-700: #334155;
    --snap-gray-800: #1e293b;
    --snap-gray-900: #0f172a;

    /* Estados (fondos pastel, texto oscuro) */
    --snap-success-50: #f1f8f2;
    --snap-success-100: #dcefdf;
    --snap-success-200: #c3e3c8;
    --snap-success-600: #3f8f52;
    --snap-success-700: #2f7341;
    --snap-warning-50: #fdf8ee;
    --snap-warning-200: #f6dcaa;
    --snap-warning-600: #c48a35;
    --snap-warning-800: #7a531c;
    --snap-danger-50: #fdf3f3;
    --snap-danger-100: #fbe3e3;
    --snap-danger-200: #f5caca;
    --snap-danger-600: #d14b4b;
    --snap-danger-700: #b33939;
    --snap-danger-800: #8f2f2f;
    --snap-info-50: var(--snap-brand-50);
    --snap-info-200: var(--snap-brand-200);
    --snap-info-700: var(--snap-brand-700);

    /* Superficies: fondo crema muy claro y tarjetas blancas */
    --snap-bg: #f6f6f2;
    --snap-surface: #ffffff;
    --snap-surface-muted: #f8f9fb;
    --snap-border: #e6e9ef;
    --snap-border-strong: #d5dbe5;
    --snap-text: var(--snap-gray-800);
    --snap-text-muted: var(--snap-gray-500);
    --snap-text-strong: var(--snap-brand-950);

    /* Tipografía: Inter para texto y Poppins (geométrica) para títulos */
    --snap-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --snap-font-display: "Poppins", var(--snap-font);
    --snap-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --snap-text-xs: 0.75rem;
    --snap-text-sm: 0.875rem;
    --snap-text-base: 1rem;

    /* Forma: bordes muy redondeados y sombras suaves */
    --snap-radius-sm: 0.5rem;
    --snap-radius: 0.75rem;
    --snap-radius-lg: 1rem;
    --snap-radius-xl: 1.25rem;
    --snap-shadow-sm: 0 1px 2px 0 rgb(27 39 66 / 0.04), 0 2px 8px -2px rgb(27 39 66 / 0.05);
    --snap-shadow: 0 2px 4px -1px rgb(27 39 66 / 0.04), 0 8px 20px -6px rgb(27 39 66 / 0.08);
    --snap-shadow-lg: 0 20px 45px -15px rgb(27 39 66 / 0.22), 0 6px 14px -8px rgb(27 39 66 / 0.08);
    --snap-ring: 0 0 0 4px rgb(68 105 179 / 0.16);
    --snap-control-h: 2.5rem;
    --snap-control-h-sm: 2rem;
    --snap-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@layer components {

/* 2. Base -----------------------------------------------------------------------------------------------------------*/
html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--snap-font);
    color: var(--snap-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fondo crema con dos halos pastel (azul arriba a la izquierda, durazno arriba a la derecha) */
body.snap-ui {
    background:
        radial-gradient(1100px 520px at -5% -10%, rgb(205 220 244 / 0.55), transparent 65%),
        radial-gradient(900px 420px at 105% -5%, rgb(251 238 213 / 0.6), transparent 65%),
        var(--snap-bg);
    background-attachment: fixed;
}

::selection {
    background: var(--snap-brand-200);
    color: var(--snap-brand-950);
}

:where(.snap-ui) :where(a:not([class])) {
    color: var(--snap-brand-700);
    font-weight: 500;
    text-decoration: none;
}

:where(.snap-ui) :where(a:not([class])):hover {
    color: var(--snap-brand-800);
    text-decoration: underline;
}

:where(.snap-ui) :where(:focus-visible) {
    outline: 2px solid var(--snap-brand-600);
    outline-offset: 2px;
}

:where(.snap-ui #workspaceDiv) :where(h1) { font-family: var(--snap-font-display); font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--snap-text-strong); letter-spacing: -0.015em; }
:where(.snap-ui #workspaceDiv) :where(h2) { font-family: var(--snap-font-display); font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--snap-text-strong); }
:where(.snap-ui #workspaceDiv) :where(h3) { font-family: var(--snap-font-display); font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; color: var(--snap-text-strong); margin: 0.75rem 0 0.5rem; }
:where(.snap-ui #workspaceDiv) :where(h4) { font-size: var(--snap-text-sm); font-weight: 600; color: var(--snap-text-strong); margin: 0.5rem 0; }
:where(.snap-ui #workspaceDiv) :where(ul:not([class]), ol:not([class])) { padding-left: 1.25rem; margin: 0.5rem 0; }
:where(.snap-ui #workspaceDiv) :where(ul:not([class])) { list-style: disc; }
:where(.snap-ui #workspaceDiv) :where(ol:not([class])) { list-style: decimal; }
:where(.snap-ui #workspaceDiv) :where(hr) { border: 0; border-top: 1px solid var(--snap-border); margin: 1rem 0; }

.snap-ui ::-webkit-scrollbar { width: 10px; height: 10px; }
.snap-ui ::-webkit-scrollbar-thumb { background: var(--snap-gray-300); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
.snap-ui ::-webkit-scrollbar-thumb:hover { background-color: var(--snap-gray-400); }
.snap-ui ::-webkit-scrollbar-track { background: transparent; }

/* 3. Componentes ----------------------------------------------------------------------------------------------------*/

/* Botones: <button class="snap-btn snap-btn-primary"> */
.snap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--snap-control-h);
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: var(--snap-radius);
    font: 600 var(--snap-text-sm)/1 var(--snap-font);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    text-decoration: none !important;
    transition: background-color var(--snap-transition), border-color var(--snap-transition), color var(--snap-transition), box-shadow var(--snap-transition);
}
.snap-btn:focus-visible { outline: none; box-shadow: var(--snap-ring); }
.snap-btn:disabled, .snap-btn.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.snap-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.snap-btn-primary { background: linear-gradient(180deg, var(--snap-brand-600), var(--snap-brand-700)); color: #fff; box-shadow: 0 1px 2px rgb(27 39 66 / 0.08), 0 6px 14px -6px rgb(55 86 153 / 0.55); }
.snap-btn-primary:hover { background: var(--snap-brand-800); }
/* Botón suave (pastel): <button class="snap-btn snap-btn-soft"> */
.snap-btn-soft { background: var(--snap-brand-100); border-color: var(--snap-brand-200); color: var(--snap-brand-800); }
.snap-btn-soft:hover { background: var(--snap-brand-200); color: var(--snap-brand-900); }
.snap-btn-secondary { background: var(--snap-surface); border-color: var(--snap-border-strong); color: var(--snap-gray-700); box-shadow: var(--snap-shadow-sm); }
.snap-btn-secondary:hover { background: var(--snap-gray-50); border-color: var(--snap-gray-400); color: var(--snap-gray-900); }
.snap-btn-success { background: var(--snap-success-600); color: #fff; }
.snap-btn-success:hover { background: var(--snap-success-700); }
.snap-btn-danger { background: var(--snap-danger-600); color: #fff; }
.snap-btn-danger:hover { background: var(--snap-danger-700); }
.snap-btn-ghost { background: transparent; color: var(--snap-gray-600); }
.snap-btn-ghost:hover { background: var(--snap-gray-100); color: var(--snap-gray-900); }
.snap-btn-link { background: transparent; color: var(--snap-brand-700); padding: 0 0.25rem; height: auto; }
.snap-btn-link:hover { text-decoration: underline !important; }

.snap-btn-sm { height: var(--snap-control-h-sm); padding: 0 0.75rem; font-size: var(--snap-text-xs); }
.snap-btn-lg { height: 3rem; padding: 0 1.5rem; font-size: var(--snap-text-base); }
.snap-btn-icon { width: var(--snap-control-h); padding: 0; }
.snap-btn-icon.snap-btn-sm { width: var(--snap-control-h-sm); }
.snap-btn-block { display: flex; width: 100%; }

.snap-btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.snap-btn-group.is-end { justify-content: flex-end; }

/* Botón dentro de un renglón de SlickGrid (renglones de 23px): <button class="snap-grid-btn snap-grid-btn-danger"> */
.snap-grid-btn {
    height: 19px;
    margin-top: 2px;
    padding: 0 0.5rem;
    border: 1px solid var(--snap-brand-200);
    border-radius: var(--snap-radius-sm);
    background: var(--snap-brand-50);
    color: var(--snap-brand-800);
    font-size: var(--snap-text-xs);
    font-weight: 600;
    line-height: 17px;
    cursor: pointer;
}
.snap-grid-btn:hover { background: var(--snap-brand-700); border-color: var(--snap-brand-700); color: #fff; }
.snap-grid-btn-danger { border-color: var(--snap-danger-200); background: var(--snap-danger-50); color: var(--snap-danger-700); }
.snap-grid-btn-danger:hover { background: var(--snap-danger-600); border-color: var(--snap-danger-600); color: #fff; }

/* Tarjetas: <div class="snap-card"><div class="snap-card-header">…</div><div class="snap-card-body">…</div></div> */
.snap-card {
    background: var(--snap-surface);
    border: 1px solid rgb(230 233 239 / 0.8);
    border-radius: var(--snap-radius-xl);
    box-shadow: var(--snap-shadow);
    overflow: hidden;
}
.snap-card + .snap-card { margin-top: 1rem; }
/* Dentro de un grid o flex la separación la da gap; el margen desalineaba la segunda tarjeta de cada renglón */
:is(.grid, .flex) > .snap-card + .snap-card { margin-top: 0; }
.snap-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.125rem 1.375rem 0.875rem;
    border-bottom: 1px solid var(--snap-gray-100);
}
/* Título de sección con barrita de acento a la izquierda (también sirve fuera de tarjetas: .snap-section-title) */
.snap-card-title, .snap-section-title { position: relative; margin: 0; padding-left: 0.875rem; font-family: var(--snap-font-display); font-size: 1rem; font-weight: 600; line-height: 1.5rem; color: var(--snap-text-strong); }
.snap-card-title::before, .snap-section-title::before { content: ""; position: absolute; left: 0; top: 0.2rem; bottom: 0.2rem; width: 4px; border-radius: 9999px; background: linear-gradient(180deg, var(--snap-brand-300), var(--snap-accent-300)); }
.snap-section-title { margin-bottom: 0.75rem; font-size: 1.0625rem; }
.snap-card-subtitle { margin: 0.125rem 0 0; padding-left: 0.875rem; font-size: var(--snap-text-sm); color: var(--snap-text-muted); }
.snap-card-body { padding: 1.25rem 1.375rem; }
.snap-card-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.375rem;
    border-top: 1px solid var(--snap-gray-100);
    background: var(--snap-surface-muted);
}

/* Encabezado de página tipo "hero": degradado pastel (azul grisáceo a crema), título, descripción y acciones */
.snap-page-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1.5rem;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgb(255 255 255 / 0.7);
    border-radius: var(--snap-radius-xl);
    background: linear-gradient(115deg, #dfe8f4 0%, #edf2f8 42%, #f8f3e8 100%);
    box-shadow: var(--snap-shadow-sm);
}
/* Halos decorativos tenues */
.snap-page-header::before, .snap-page-header::after { content: ""; position: absolute; z-index: -1; border-radius: 9999px; pointer-events: none; }
.snap-page-header::before { right: -4rem; top: -5rem; width: 16rem; height: 16rem; background: radial-gradient(circle, rgb(169 195 234 / 0.45), transparent 70%); }
.snap-page-header::after { right: 22%; bottom: -7rem; width: 14rem; height: 14rem; background: radial-gradient(circle, rgb(246 220 170 / 0.45), transparent 70%); }
.snap-page-title { margin: 0; font-family: var(--snap-font-display); font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--snap-text-strong); }
.snap-page-description { margin: 0.125rem 0 0; max-width: 46rem; font-size: 0.8125rem; line-height: 1.4; color: var(--snap-gray-600); }
@media (max-width: 639px) {
    .snap-page-header { padding: 0.625rem 1rem; }
    .snap-page-title { font-size: 1.125rem; line-height: 1.5rem; }
}

/* Etiqueta pequeña en mayúsculas: <p class="snap-eyebrow">Agencia</p> */
.snap-eyebrow { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--snap-gray-400); }

/* Ícono dentro de un cuadro redondeado pastel: <span class="snap-icon-tile snap-icon-tile-brand"><svg…></span> */
.snap-icon-tile { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--snap-radius); background: var(--snap-gray-100); color: var(--snap-gray-600); }
.snap-icon-tile svg { width: 1.25rem; height: 1.25rem; }
.snap-icon-tile-sm { width: 2.25rem; height: 2.25rem; border-radius: var(--snap-radius-sm); }
.snap-icon-tile-sm svg { width: 1rem; height: 1rem; }
.snap-icon-tile-brand { background: var(--snap-brand-100); color: var(--snap-brand-700); }
.snap-icon-tile-accent { background: var(--snap-accent-100); color: var(--snap-accent-700); }
.snap-icon-tile-success { background: var(--snap-success-100); color: var(--snap-success-700); }
.snap-icon-tile-danger { background: var(--snap-danger-100); color: var(--snap-danger-700); }

/* Formularios */
.snap-form { display: grid; gap: 1rem; }
.snap-form-grid { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.snap-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.snap-field.is-inline { flex-direction: row; align-items: center; gap: 0.75rem; }
.snap-label { font-size: 0.8125rem; font-weight: 600; color: var(--snap-gray-600); }
.snap-label .is-required, .snap-required { color: var(--snap-danger-600); margin-left: 0.125rem; }
.snap-help { font-size: var(--snap-text-xs); color: var(--snap-text-muted); }
.snap-error { font-size: var(--snap-text-xs); color: var(--snap-danger-700); font-weight: 500; }

.snap-input, .snap-select, .snap-textarea {
    display: block;
    width: 100%;
    min-height: var(--snap-control-h);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--snap-border-strong);
    border-radius: var(--snap-radius);
    background: var(--snap-surface);
    color: var(--snap-text-strong);
    font: 400 var(--snap-text-sm)/1.25rem var(--snap-font);
    box-shadow: var(--snap-shadow-sm);
    transition: border-color var(--snap-transition), box-shadow var(--snap-transition);
}
.snap-input::placeholder, .snap-textarea::placeholder { color: var(--snap-gray-400); }
.snap-input:focus, .snap-select:focus, .snap-textarea:focus { outline: none; border-color: var(--snap-brand-600); box-shadow: var(--snap-ring); }
.snap-input:disabled, .snap-select:disabled, .snap-textarea:disabled,
.snap-input[readonly], .snap-textarea[readonly] { background: var(--snap-gray-100); color: var(--snap-gray-500); cursor: not-allowed; }
.snap-input.is-invalid, .snap-select.is-invalid, .snap-textarea.is-invalid { border-color: var(--snap-danger-600); }
.snap-input.is-invalid:focus { box-shadow: 0 0 0 4px rgb(220 38 38 / 0.15); }
.snap-textarea { min-height: 6rem; resize: vertical; }
.snap-select {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.6rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem;
}
.snap-input-sm { min-height: var(--snap-control-h-sm); padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: var(--snap-text-xs); }
.snap-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--snap-text-sm); color: var(--snap-gray-700); cursor: pointer; }
.snap-check input { width: 1rem; height: 1rem; accent-color: var(--snap-brand-700); cursor: pointer; }

/* Tablas: <div class="snap-table-wrap"><table class="snap-table">…</table></div> */
.snap-table-wrap { overflow-x: auto; border: 1px solid var(--snap-border); border-radius: var(--snap-radius-lg); background: var(--snap-surface); }
.snap-table { width: 100%; border-collapse: collapse; font-size: var(--snap-text-sm); }
.snap-table th {
    position: sticky;
    top: 0;
    padding: 0.625rem 0.875rem;
    background: var(--snap-surface-muted);
    border-bottom: 1px solid var(--snap-border);
    color: var(--snap-gray-500);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.snap-table td { padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--snap-gray-100); color: var(--snap-gray-700); vertical-align: middle; }
.snap-table tbody tr:last-child td { border-bottom: 0; }
.snap-table tbody tr:hover td { background: var(--snap-brand-50); }
.snap-table.is-striped tbody tr:nth-child(even) td { background: var(--snap-gray-50); }
.snap-table.is-compact th, .snap-table.is-compact td { padding: 0.375rem 0.625rem; }
.snap-table .is-num, .snap-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Badges tipo "pill": fondo pastel y texto en el mismo tono más oscuro */
.snap-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.125rem 0.625rem; border: 1px solid var(--snap-gray-200); border-radius: 9999px; font-size: var(--snap-text-xs); font-weight: 600; line-height: 1.25rem; white-space: nowrap; background: var(--snap-gray-100); color: var(--snap-gray-700); }
.snap-badge svg { width: 0.875rem; height: 0.875rem; }
.snap-badge-brand { border-color: var(--snap-brand-200); background: var(--snap-brand-100); color: var(--snap-brand-800); }
.snap-badge-success { border-color: var(--snap-success-200); background: var(--snap-success-100); color: var(--snap-success-700); }
.snap-badge-warning, .snap-badge-accent { border-color: var(--snap-accent-200); background: var(--snap-accent-100); color: var(--snap-warning-800); }
.snap-badge-danger { border-color: var(--snap-danger-200); background: var(--snap-danger-100); color: var(--snap-danger-800); }

/* Alertas: <div class="snap-alert snap-alert-warning">…</div> */
.snap-alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1.125rem; border: 1px solid; border-left-width: 4px; border-radius: var(--snap-radius-lg); font-size: var(--snap-text-sm); line-height: 1.5; }
.snap-alert-info { background: var(--snap-info-50); border-color: var(--snap-info-200); border-left-color: var(--snap-brand-400); color: var(--snap-brand-900); }
.snap-alert-success { background: var(--snap-success-50); border-color: var(--snap-success-200); border-left-color: var(--snap-success-600); color: #1f4d2b; }
.snap-alert-warning { background: var(--snap-warning-50); border-color: var(--snap-warning-200); border-left-color: var(--snap-warning-600); color: var(--snap-warning-800); }
.snap-alert-danger { background: var(--snap-danger-50); border-color: var(--snap-danger-200); border-left-color: var(--snap-danger-600); color: var(--snap-danger-800); }

/* Estado vacío y carga */
.snap-empty { padding: 3rem 1.5rem; text-align: center; color: var(--snap-text-muted); font-size: var(--snap-text-sm); }
.snap-empty-title { margin-bottom: 0.25rem; font-weight: 600; color: var(--snap-gray-700); }
.snap-spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--snap-brand-200); border-top-color: var(--snap-brand-600); border-radius: 9999px; animation: snap-spin 0.7s linear infinite; vertical-align: -0.15em; }
@keyframes snap-spin { to { transform: rotate(360deg); } }

/* Barra de herramientas sobre tablas o grids */
.snap-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }

/* 4. Compatibilidad con los módulos existentes (solo en body.snap-ui) -----------------------------------------------*/

/* Controles sin clase dentro del área de trabajo */
:where(.snap-ui #workspaceDiv, .snap-ui .ui-dialog) :where(input:not([type]), input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=date], select, textarea):where(:not([class*="snap-"]):not(.slick-cell *):not(.editor-text)) {
    min-height: 2.25rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--snap-border-strong);
    border-radius: var(--snap-radius);
    background-color: var(--snap-surface);
    color: var(--snap-text-strong);
    font: 400 var(--snap-text-sm)/1.25rem var(--snap-font);
    box-shadow: var(--snap-shadow-sm);
    transition: border-color var(--snap-transition), box-shadow var(--snap-transition);
    max-width: 100%;
}
:where(.snap-ui #workspaceDiv, .snap-ui .ui-dialog) :where(input, select, textarea):where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=button]):not([type=submit]):not(.slick-cell *)):focus {
    outline: none;
    border-color: var(--snap-brand-600);
    box-shadow: var(--snap-ring);
}
:where(.snap-ui #workspaceDiv, .snap-ui .ui-dialog) :where(input:disabled, select:disabled, textarea:disabled, input[readonly]) {
    background-color: var(--snap-gray-100);
    color: var(--snap-gray-500);
}
:where(.snap-ui #workspaceDiv) :where(textarea) { min-height: 5rem; }
:where(.snap-ui #workspaceDiv) :where(input[type=checkbox], input[type=radio]) { width: 1rem; height: 1rem; accent-color: var(--snap-brand-700); vertical-align: middle; }
:where(.snap-ui #workspaceDiv) :where(input[type=file]) { font-size: var(--snap-text-sm); color: var(--snap-gray-600); }
:where(.snap-ui #workspaceDiv) :where(input[type=file])::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--snap-border-strong);
    border-radius: var(--snap-radius);
    background: var(--snap-surface);
    color: var(--snap-gray-700);
    font: 600 var(--snap-text-xs) var(--snap-font);
    cursor: pointer;
}
:where(.snap-ui #workspaceDiv) :where(input.emptyText, .emptyText) { color: var(--snap-gray-400); }
:where(.snap-ui #workspaceDiv) :where(input.integerText) { width: 6rem; text-align: right; }
:where(.snap-ui #workspaceDiv) :where(input.moneyText) { width: 8rem; text-align: right; font-variant-numeric: tabular-nums; }
:where(.snap-ui #workspaceDiv) :where(input.dateText) { width: 9rem; }
:where(.snap-ui #workspaceDiv) :where(select.employeeBox, select.planCombo) { width: 20rem; }
:where(.snap-ui #workspaceDiv) :where(select.customerCombo, select.positionCombo, select.periodCombo) { width: 14rem; }
:where(.snap-ui #workspaceDiv) :where(select.patronalKeyCombo, select.routeCombo) { width: 17rem; }

/* Botones sin clase (antes los estilizaba jQuery UI con $("button").button()) */
:where(.snap-ui #workspaceDiv) :where(button:not([class]), button.ui-button, input[type=button], input[type=submit]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    margin: 0.125rem 0.25rem 0.125rem 0;
    padding: 0 0.9rem;
    border: 1px solid var(--snap-border-strong);
    border-radius: var(--snap-radius);
    background: var(--snap-surface);
    color: var(--snap-gray-700);
    font: 600 var(--snap-text-sm)/1 var(--snap-font);
    box-shadow: var(--snap-shadow-sm);
    cursor: pointer;
    transition: background-color var(--snap-transition), border-color var(--snap-transition);
}
:where(.snap-ui #workspaceDiv) :where(button:not([class]), button.ui-button, input[type=button], input[type=submit]):hover {
    background: var(--snap-gray-50);
    border-color: var(--snap-gray-400);
    color: var(--snap-gray-900);
}
:where(.snap-ui #workspaceDiv) :where(button[type=submit]:not([class]), input[type=submit]) {
    background: var(--snap-brand-700);
    border-color: var(--snap-brand-700);
    color: #fff;
}
:where(.snap-ui #workspaceDiv) :where(button[type=submit]:not([class]), input[type=submit]):hover { background: var(--snap-brand-800); color: #fff; }
:where(.snap-ui #workspaceDiv) :where(button:disabled, input[type=button]:disabled, input[type=submit]:disabled) { opacity: 0.55; cursor: not-allowed; }

} /* fin @layer components */

/* 4b. Estructura de los módulos existentes: fuera de capa y con .snap-ui delante para ganar a los CSS propios de cada
 *     módulo (leftSidebar.css, grid.css, twoBarContent.css, ...), que tampoco usan capas y se cargan después. */
/* Estructura típica: #leftSidebarDiv (acciones) + #contentDiv (#warningDiv, #dialogDiv, #resultDiv) */
.snap-ui #workspaceDiv > div:has(> #leftSidebarDiv) {
    display: flex;
    float: none !important;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
}
.snap-ui :is(#leftSidebarDiv) {
    position: sticky;
    top: 8rem;
    flex: 0 0 15rem;
    width: 15rem;
    float: none;
    margin: 0;
    padding: 0.5rem;
    border: 1px solid rgb(230 233 239 / 0.8);
    border-radius: var(--snap-radius-xl);
    background: var(--snap-surface);
    box-shadow: var(--snap-shadow);
}
.snap-ui :is(.sidebarElement) {
    display: flex;
    align-items: center;
    float: none;
    width: auto;
    height: auto;
    min-height: 2.25rem;
    margin: 0 0 0.125rem;
    padding: 0.4rem 0.75rem;
    border: 0;
    border-radius: var(--snap-radius);
    background: transparent;
    color: var(--snap-gray-700);
    font-size: var(--snap-text-sm);
    font-weight: 500;
    line-height: 1.25rem;
    cursor: pointer;
    transition: background-color var(--snap-transition), color var(--snap-transition);
}
.snap-ui :is(.sidebarElement:hover, .sidebarElement.selected) { background: var(--snap-brand-50); color: var(--snap-brand-800); }
.snap-ui :is(.sidebarElement.active) { background: var(--snap-brand-100); color: var(--snap-brand-900); font-weight: 600; box-shadow: inset 3px 0 0 var(--snap-brand-500); }

.snap-ui :is(#contentDiv) {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    float: none;
    margin: 0;
}
.snap-ui :is(#dialogDiv) {
    float: none;
    width: auto;
    margin-bottom: 1rem;
    padding: 1.25rem;
    border: 1px solid rgb(230 233 239 / 0.8);
    border-radius: var(--snap-radius-xl);
    background: var(--snap-surface);
    box-shadow: var(--snap-shadow);
}
.snap-ui :is(#dialogDiv)::after, .snap-ui :is(.buttonsDiv)::after { content: ""; display: table; clear: both; }
.snap-ui :is(#resultDiv) { float: none; width: auto; }
.snap-ui :is(#resultDiv:not(:empty)) {
    padding: 1.25rem;
    border: 1px solid rgb(230 233 239 / 0.8);
    border-radius: var(--snap-radius-xl);
    background: var(--snap-surface);
    box-shadow: var(--snap-shadow);
    font-size: var(--snap-text-sm);
}
.snap-ui :is(#warningDiv) {
    float: none;
    width: auto;
    height: auto;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--snap-warning-200);
    border-left: 4px solid var(--snap-warning-600);
    border-radius: var(--snap-radius-lg);
    background: var(--snap-warning-50);
    color: var(--snap-warning-800);
    font-size: var(--snap-text-sm);
    line-height: 1.5;
    text-align: left;
}

/* Formularios con formLabel / formComponent: etiqueta y control en el mismo renglón */
.snap-ui :is(div:has(> .formLabel + .formComponent)) {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.625rem;
}
.snap-ui :is(.formLabel) {
    float: none;
    width: auto;
    height: auto;
    color: var(--snap-gray-700);
    font-size: var(--snap-text-sm);
    font-weight: 600;
    line-height: 1.25rem;
}
.snap-ui :is(.formComponent) {
    float: none;
    height: auto;
    min-width: 0;
    color: var(--snap-gray-800);
    font-size: var(--snap-text-sm);
    line-height: 1.25rem;
}
.snap-ui :is(.formText, .textLabel) { color: var(--snap-gray-700); font-size: var(--snap-text-sm); }
.snap-ui :is(.barDiv) { float: none; }
.snap-ui :is(.buttonsDiv) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    float: none;
    width: auto;
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--snap-gray-100);
}
.snap-ui :is(.right) { float: right; }

/* Listas de instrucciones (advice-list) */
.snap-ui :is(.advice-list) { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: var(--snap-text-sm); }
.snap-ui :is(.advice-list li) { position: relative; padding: 0.5rem 0.75rem 0.5rem 2.25rem; border-radius: var(--snap-radius); background: var(--snap-gray-50); color: var(--snap-gray-700); }
.snap-ui :is(.advice-list li)::before { position: absolute; left: 0.75rem; top: 0.5rem; font-weight: 700; }
.snap-ui :is(.advice-list .advice-right) { background: var(--snap-success-50); }
.snap-ui :is(.advice-list .advice-right)::before { content: "\2713"; color: var(--snap-success-600); }
.snap-ui :is(.advice-list .advice-wrong) { background: var(--snap-danger-50); }
.snap-ui :is(.advice-list .advice-wrong)::before { content: "\2715"; color: var(--snap-danger-600); }

/* Tablas HTML sin clase dentro de resultados */
:where(.snap-ui #workspaceDiv) :where(table:not([class])) { width: 100%; border-collapse: collapse; font-size: var(--snap-text-sm); background: var(--snap-surface); }
:where(.snap-ui #workspaceDiv) :where(table:not([class]) th) { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--snap-border); background: var(--snap-gray-50); color: var(--snap-gray-600); font-size: var(--snap-text-xs); font-weight: 600; text-align: left; text-transform: uppercase; }
:where(.snap-ui #workspaceDiv) :where(table:not([class]) td) { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--snap-gray-100); }

/* Grids de parámetros (SlickGrid): grid.css los deja flotando; aquí ocupan el ancho de su contenedor.
   El alto depende de cada pantalla y se define por id en el módulo */
.snap-ui :is(.paramGrid) { float: none; width: 100%; border: 1px solid var(--snap-border); border-radius: var(--snap-radius-lg); overflow: hidden; background: var(--snap-surface); }

/* Días de la semana (weekdayBtn / weekdayLbl) */
.snap-ui :is(.weekdayLbl) { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.5rem; font-size: var(--snap-text-sm); color: var(--snap-gray-700); cursor: pointer; }

/* Pantallas angostas: la barra lateral pasa arriba y las etiquetas sobre el control */
@media (max-width: 1023px) {
    .snap-ui #workspaceDiv > div:has(> #leftSidebarDiv) { flex-direction: column; }
    .snap-ui :is(#leftSidebarDiv) { position: static; display: flex; flex-wrap: wrap; gap: 0.25rem; width: 100%; flex-basis: auto; }
    .snap-ui :is(#contentDiv) { width: 100%; }
}
@media (max-width: 639px) {
    .snap-ui :is(div:has(> .formLabel + .formComponent)) { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}

/* 5. HTML de los .ajax.php de misc/ y employee/ ---------------------------------------------------------------------*/

/* Búsqueda general (misc/generalSearch.ajax.php) */
#searchResultElementDivs { font-size: var(--snap-text-sm); color: var(--snap-gray-700); }
#searchResultElementDivs > strong:first-child { display: inline-block; margin: 0.25rem 0 0.5rem; }
.searchResultElementDiv { margin-top: 0.5rem; border: 1px solid var(--snap-border); border-radius: var(--snap-radius-lg); background: var(--snap-surface); overflow: hidden; transition: box-shadow var(--snap-transition), border-color var(--snap-transition); }
.searchResultElementDiv.selected { border-color: var(--snap-brand-300); box-shadow: 0 4px 14px -6px rgb(30 58 138 / 0.35); }
.generalSearchElementHeaderDiv { padding: 0.5rem 0.875rem; background: linear-gradient(90deg, var(--snap-brand-50), var(--snap-accent-50)); color: var(--snap-brand-900); font-weight: 600; }
.generalSearchElementContentDiv { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem; }
.generalSearchLeftColumnDiv[onclick], .generalSearchRightColumnDiv[onclick] { cursor: pointer; }
.generalSearchImage { width: 44px; height: 44px; object-fit: contain; border-radius: var(--snap-radius); background: var(--snap-gray-50); border: 1px solid var(--snap-border); }
.generalSearchRightColumnDiv { flex: 1; min-width: 0; line-height: 1.4; }
.generalSearchElementTypeDiv { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--snap-gray-500); }
.generalSearchActionMenuDiv select { max-width: 9rem; border: 1px solid var(--snap-border-strong); border-radius: var(--snap-radius); padding: 0.25rem 0.5rem; font-size: 0.8rem; background: var(--snap-surface); }
.generalSearchActionMenuDiv a { color: var(--snap-brand-700); font-weight: 600; font-size: 0.8rem; }
.generalSearchActionMenuDiv a:hover { text-decoration: underline; }
.searchResultElementDetailDiv { display: none; margin-top: 0.25rem; padding: 0.75rem; border: 1px solid var(--snap-border); border-radius: var(--snap-radius-lg); background: var(--snap-gray-50); }

/* Alertas urgentes (misc/urgentAlerts.ajax.php) */
#urgentAlertDiv { position: relative; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 3rem 0.75rem 1rem; background: var(--snap-danger-50); border: 1px solid var(--snap-danger-200); border-left: 4px solid var(--snap-danger-600); border-radius: var(--snap-radius-lg); color: var(--snap-danger-800); font-size: var(--snap-text-sm); }
#urgentAlertDiv .message strong { margin-right: 0.35rem; }
#urgentAlertDiv button { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.75rem; height: 1.75rem; border-radius: 9999px; border: 0; background: transparent; color: var(--snap-danger-700); cursor: pointer; }
#urgentAlertDiv button:hover { background: #fee2e2; }
#urgentAlertDiv button .ui-icon { display: none; }
#urgentAlertDiv button::after { content: "\2715"; font-size: 0.85rem; }

/* Ficha de empleado (employee/employeesInfo.ajax.php): etiqueta y valor en el mismo renglón */
.snap-ui .employeeInfoDiv { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); float: none; width: auto; overflow: hidden; border: 1px solid var(--snap-border); border-radius: var(--snap-radius); background: var(--snap-surface); font-size: 0.8125rem; }
.snap-ui .employeeInfoDiv + .employeeInfoDiv { margin-top: 0.5rem; }
.snap-ui .employeeInfoHeaderDiv { grid-column: 1 / -1; float: none; width: auto; padding: 0.5rem 0.75rem; background: var(--snap-brand-50); color: var(--snap-brand-900); font-size: inherit; font-weight: 600; line-height: 1.25rem; }
.snap-ui .employeeInfoDiv1Label, .snap-ui .employeeInfoDiv1Text { float: none; width: auto; padding: 0.375rem 0.75rem; border-top: 1px solid var(--snap-gray-100); line-height: 1.25rem; }
.snap-ui .employeeInfoDiv1Label { font-weight: 600; color: var(--snap-gray-600); background: var(--snap-gray-50); }
.snap-ui .employeeInfoDiv1Text { color: var(--snap-gray-900); background: var(--snap-surface); overflow-wrap: anywhere; }

/* 6. jQuery UI ------------------------------------------------------------------------------------------------------*/
.snap-ui .ui-widget { font-family: var(--snap-font); font-size: var(--snap-text-sm); }
.snap-ui .ui-widget input, .snap-ui .ui-widget select, .snap-ui .ui-widget textarea, .snap-ui .ui-widget button { font-family: var(--snap-font); }
.snap-ui .ui-widget-content { border-color: var(--snap-border); background: var(--snap-surface); color: var(--snap-text); }
.snap-ui .ui-widget-header { border: 0; border-bottom: 1px solid var(--snap-border); background: var(--snap-gray-50); color: var(--snap-text-strong); font-weight: 600; }
.snap-ui .ui-corner-all { border-radius: var(--snap-radius-lg); }
.snap-ui .ui-widget-overlay { background: rgb(27 39 66 / 0.35); opacity: 1; backdrop-filter: blur(4px); }

/* Estados (el tema blitzer era rojo) */
.snap-ui .ui-state-default, .snap-ui .ui-widget-content .ui-state-default, .snap-ui .ui-widget-header .ui-state-default { border: 1px solid var(--snap-border-strong); background: var(--snap-surface); color: var(--snap-gray-700); font-weight: 500; }
.snap-ui .ui-state-hover, .snap-ui .ui-widget-content .ui-state-hover, .snap-ui .ui-widget-header .ui-state-hover,
.snap-ui .ui-state-focus, .snap-ui .ui-widget-content .ui-state-focus { border-color: var(--snap-brand-300); background: var(--snap-brand-50); color: var(--snap-brand-800); }
.snap-ui .ui-state-active, .snap-ui .ui-widget-content .ui-state-active, .snap-ui .ui-widget-header .ui-state-active { border-color: var(--snap-brand-700); background: var(--snap-brand-700); color: #fff; }
.snap-ui .ui-state-highlight, .snap-ui .ui-widget-content .ui-state-highlight { border-color: var(--snap-accent-400); background: var(--snap-accent-100); color: var(--snap-warning-800); }
.snap-ui .ui-state-error, .snap-ui .ui-widget-content .ui-state-error { border-color: var(--snap-danger-200); background: var(--snap-danger-50); color: var(--snap-danger-800); }
.snap-ui .ui-state-default a, .snap-ui .ui-state-hover a, .snap-ui .ui-state-active a { color: inherit; }

/* Datepicker */
.snap-ui .ui-datepicker { z-index: 120 !important; width: 17.5rem; padding: 0.5rem; border: 1px solid var(--snap-border); border-radius: var(--snap-radius-lg); background: var(--snap-surface); box-shadow: var(--snap-shadow-lg); }
.snap-ui .ui-datepicker .ui-datepicker-header { padding: 0.35rem 0; border: 0; border-radius: var(--snap-radius); background: transparent; }
.snap-ui .ui-datepicker .ui-datepicker-title { display: flex; justify-content: center; gap: 0.25rem; margin: 0 2.25rem; line-height: 1.9rem; font-weight: 600; color: var(--snap-text-strong); }
.snap-ui .ui-datepicker .ui-datepicker-title select { height: 1.9rem; margin: 0; padding: 0 0.25rem; border: 1px solid var(--snap-border); border-radius: var(--snap-radius-sm); font-size: var(--snap-text-xs); }
.snap-ui .ui-datepicker .ui-datepicker-prev, .snap-ui .ui-datepicker .ui-datepicker-next { top: 0.35rem; width: 1.9rem; height: 1.9rem; border: 0; border-radius: var(--snap-radius); cursor: pointer; }
.snap-ui .ui-datepicker .ui-datepicker-prev-hover, .snap-ui .ui-datepicker .ui-datepicker-next-hover { top: 0.35rem; border: 0; background: var(--snap-gray-100); }
.snap-ui .ui-datepicker .ui-datepicker-prev { left: 0.25rem; }
.snap-ui .ui-datepicker .ui-datepicker-next { right: 0.25rem; }
.snap-ui .ui-datepicker .ui-datepicker-prev span, .snap-ui .ui-datepicker .ui-datepicker-next span { display: none; }
.snap-ui .ui-datepicker .ui-datepicker-prev::after, .snap-ui .ui-datepicker .ui-datepicker-next::after { display: block; line-height: 1.9rem; text-align: center; color: var(--snap-gray-600); font-size: 1rem; }
.snap-ui .ui-datepicker .ui-datepicker-prev::after { content: "\2039"; }
.snap-ui .ui-datepicker .ui-datepicker-next::after { content: "\203A"; }
.snap-ui .ui-datepicker table { margin: 0.25rem 0 0; font-size: var(--snap-text-xs); }
.snap-ui .ui-datepicker th { padding: 0.35rem 0; color: var(--snap-gray-400); font-weight: 600; }
.snap-ui .ui-datepicker td { padding: 1px; }
.snap-ui .ui-datepicker td a, .snap-ui .ui-datepicker td span { padding: 0.35rem 0; border: 0 !important; border-radius: var(--snap-radius-sm); background: transparent !important; color: var(--snap-gray-700); text-align: center; }
.snap-ui .ui-datepicker td a:hover { background: var(--snap-brand-50) !important; color: var(--snap-brand-800); }
.snap-ui .ui-datepicker td a.ui-state-highlight { background: var(--snap-accent-100) !important; color: var(--snap-warning-800); font-weight: 600; }
.snap-ui .ui-datepicker td a.ui-state-active { background: var(--snap-brand-700) !important; color: #fff; font-weight: 600; }
.snap-ui .ui-datepicker .ui-datepicker-buttonpane { margin: 0.5rem 0 0; padding: 0.5rem 0 0; border-top: 1px solid var(--snap-gray-100); background: transparent; }
.snap-ui .ui-datepicker .ui-datepicker-buttonpane button { margin: 0 0 0 0.25rem; padding: 0.25rem 0.75rem; border-radius: var(--snap-radius); font-size: var(--snap-text-xs); }

/* Dialog (por si algún módulo usa .dialog() directamente) */
.snap-ui .ui-dialog { z-index: 100 !important; padding: 0; overflow: hidden; border: 0; border-radius: var(--snap-radius-xl); background: var(--snap-surface); box-shadow: 0 25px 50px -12px rgb(15 23 42 / 0.35); }
.snap-ui .ui-dialog .ui-dialog-titlebar { padding: 1rem 1.25rem; border: 0; border-bottom: 1px solid var(--snap-gray-100); border-radius: 0; background: var(--snap-surface); }
.snap-ui .ui-dialog .ui-dialog-title { float: none; margin: 0; font-family: var(--snap-font-display); font-size: 1.0625rem; font-weight: 600; color: var(--snap-text-strong); }
.snap-ui .ui-dialog .ui-dialog-titlebar-close { top: 50%; right: 0.75rem; width: 2rem; height: 2rem; margin: -1rem 0 0; padding: 0; border: 0; border-radius: var(--snap-radius); background: transparent; }
.snap-ui .ui-dialog .ui-dialog-titlebar-close:hover { background: var(--snap-gray-100); }
.snap-ui .ui-dialog .ui-dialog-titlebar-close span { display: none; }
.snap-ui .ui-dialog .ui-dialog-titlebar-close::after { content: "\2715"; display: block; line-height: 2rem; text-align: center; color: var(--snap-gray-500); }
.snap-ui .ui-dialog .ui-dialog-content { padding: 1.25rem; color: var(--snap-gray-600); font-size: var(--snap-text-sm); line-height: 1.6; }
.snap-ui .ui-dialog .ui-dialog-buttonpane { margin: 0; padding: 0.75rem 1.25rem; border-top: 1px solid var(--snap-gray-100); background: var(--snap-gray-50); }
.snap-ui .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { display: flex; flex-direction: row-reverse; gap: 0.5rem; float: none; }
.snap-ui .ui-dialog .ui-dialog-buttonpane button { margin: 0; padding: 0; border-radius: var(--snap-radius); font-weight: 600; }
.snap-ui .ui-dialog .ui-dialog-buttonpane button:first-child { border-color: var(--snap-brand-700); background: var(--snap-brand-700); color: #fff; }
.snap-ui .ui-dialog .ui-dialog-buttonpane button .ui-button-text { padding: 0.5rem 1rem; }

/* Autocomplete */
.snap-ui .ui-autocomplete { z-index: 120 !important; max-height: 18rem; overflow-y: auto; padding: 0.25rem; border: 1px solid var(--snap-border); border-radius: var(--snap-radius-lg); background: var(--snap-surface); box-shadow: var(--snap-shadow-lg); }
.snap-ui .ui-autocomplete .ui-menu-item a { padding: 0.4rem 0.625rem; border: 0; border-radius: var(--snap-radius-sm); font-size: var(--snap-text-sm); }
.snap-ui .ui-autocomplete .ui-menu-item a.ui-state-hover, .snap-ui .ui-autocomplete .ui-menu-item a.ui-state-focus { margin: 0; border: 0; background: var(--snap-brand-50); color: var(--snap-brand-800); }

/* Tabs */
.snap-ui .ui-tabs { padding: 0; border: 1px solid var(--snap-border); border-radius: var(--snap-radius-xl); background: var(--snap-surface); overflow: hidden; }
.snap-ui .ui-tabs .ui-tabs-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.5rem 0.75rem 0; border: 0; border-bottom: 1px solid var(--snap-border); border-radius: 0; background: var(--snap-gray-50); }
.snap-ui .ui-tabs .ui-tabs-nav li { float: none; margin: 0; border: 0; border-radius: var(--snap-radius) var(--snap-radius) 0 0; background: transparent; }
.snap-ui .ui-tabs .ui-tabs-nav li a { padding: 0.5rem 0.9rem; color: var(--snap-gray-600); font-size: var(--snap-text-sm); font-weight: 500; }
.snap-ui .ui-tabs .ui-tabs-nav li.ui-tabs-selected, .snap-ui .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 0; border: 1px solid var(--snap-border); border-bottom-color: var(--snap-surface); background: var(--snap-surface); }
.snap-ui .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .snap-ui .ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: var(--snap-brand-800); font-weight: 600; }
.snap-ui .ui-tabs .ui-tabs-panel { padding: 1.25rem; }

/* Botones jQuery UI */
.snap-ui .ui-button { border-radius: var(--snap-radius); font-weight: 600; }
.snap-ui .ui-button .ui-button-text { line-height: 1.25rem; }

/* blockUI del plugin (por si un módulo lo llama directo con $.blockUI) */
.snap-ui .blockUI.blockMsg { border: 0 !important; border-radius: var(--snap-radius-lg) !important; background: var(--snap-surface) !important; color: var(--snap-gray-700) !important; box-shadow: var(--snap-shadow-lg); font: 600 var(--snap-text-sm)/50px var(--snap-font) !important; }
.snap-ui .blockUI.blockOverlay { background: rgb(27 39 66 / 0.25) !important; }

/* 7. SlickGrid ------------------------------------------------------------------------------------------------------*/
.snap-ui .slick-header.ui-state-default, .snap-ui .slick-headerrow.ui-state-default { border: 0; border-bottom: 1px solid var(--snap-border); background: var(--snap-gray-50); }
.snap-ui .slick-header-column.ui-state-default {
    height: auto;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-right: 1px solid var(--snap-border);
    background: var(--snap-gray-50);
    color: var(--snap-gray-600);
    font-size: var(--snap-text-xs);
    font-weight: 600;
    line-height: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.snap-ui .slick-header-column.ui-state-default:hover { background: var(--snap-gray-100); color: var(--snap-gray-800); }
.snap-ui .slick-row.ui-widget-content, .snap-ui .slick-row .slick-cell { font-size: var(--snap-text-xs); }
.snap-ui .slick-row.odd { background: var(--snap-gray-50); }
.snap-ui .slick-row:hover { background: var(--snap-brand-50); }
/* SlickGrid calcula alto y ancho de celdas y encabezados restando padding y borde (modelo content-box); el preflight de
 * Tailwind pone border-box a todo y el texto quedaba cortado. Los editores (inputs dentro de la celda) siguen en border-box. */
.snap-ui .slick-row, .snap-ui .slick-cell, .snap-ui .slick-header-column, .snap-ui .slick-headerrow-column { box-sizing: content-box; }
/* Sin padding vertical: el alto de la celda es rowHeight menos los bordes y el texto queda centrado con line-height */
.snap-ui .slick-cell { border-color: transparent var(--snap-gray-100) var(--snap-gray-100) transparent; padding: 0 6px; line-height: 23px; }
.snap-ui .slick-cell.selected { background: var(--snap-brand-100); }
.snap-ui .slick-cell.active { border-color: var(--snap-brand-600); box-shadow: inset 0 0 0 1px var(--snap-brand-600); }
.snap-ui .slick-cell input.editor-text { width: 100%; height: 100%; border: 0; padding: 0 4px; background: #fff; font: inherit; }
.snap-ui .slick-viewport { background: var(--snap-surface); }

/* 7b. Filtros + resultados en dos columnas ---------------------------------------------------------------------------
 *  <div class="snap-search-layout">
 *      <section class="snap-card snap-filters">
 *          <div class="snap-card-header">… <button class="snap-filters-toggle" data-snap-filters-toggle>…</button></div>
 *          <div class="snap-filters-body"> card-body + card-footer </div>
 *      </section>
 *      <section class="snap-card">resultados</section>
 *  </div>
 *  Desde lg: filtros fijos a la izquierda (sticky) y resultados a la derecha.
 *  Debajo de lg: una columna y los filtros se contraen con el botón (layoutEndTw.php). */
.snap-search-layout { display: grid; gap: 1rem; align-items: start; }
.snap-search-layout > * { min-width: 0; }
.snap-filters-toggle { display: inline-flex; }
.snap-filters-toggle svg { transition: transform var(--snap-transition); }
.snap-filters.is-collapsed .snap-filters-toggle svg { transform: rotate(-90deg); }
.snap-filters.is-collapsed .snap-filters-body { display: none; }
.snap-filters-summary { display: none; }
.snap-filters.is-collapsed .snap-filters-summary { display: block; }
.snap-filters.is-collapsed .snap-card-subtitle:not(.snap-filters-summary) { display: none; }
@media (min-width: 1024px) {
    .snap-search-layout { grid-template-columns: minmax(18rem, 20rem) minmax(0, 1fr); }
    .snap-filters { position: sticky; top: 8rem; max-height: calc(100dvh - 9rem); overflow-y: auto; }
    .snap-filters-toggle { display: none; }
    .snap-filters.is-collapsed .snap-filters-body { display: block; }
    .snap-filters.is-collapsed .snap-filters-summary { display: none; }
    .snap-filters.is-collapsed .snap-card-subtitle:not(.snap-filters-summary) { display: block; }
    /* En la columna angosta los campos van uno debajo de otro y el botón principal ocupa el ancho */
    .snap-filters .snap-filters-body .grid { grid-template-columns: minmax(0, 1fr); }
    .snap-filters .snap-filters-body .grid > * { grid-column: auto; }
    .snap-filters .snap-card-footer { justify-content: stretch; }
    .snap-filters .snap-card-footer > .snap-btn { flex: 1 1 auto; justify-content: center; }
}
@media (min-width: 1536px) {
    .snap-search-layout { grid-template-columns: minmax(20rem, 22rem) minmax(0, 1fr); }
}

/* 8. Utilidades e impresión -----------------------------------------------------------------------------------------*/
.tw-hidden { display: none !important; }
.snap-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.snap-muted { color: var(--snap-text-muted); }
.snap-mono { font-family: var(--snap-font-mono); }

@media print {
    .snap-ui header, .snap-ui #menuDiv, .snap-ui #menuBackdrop, .snap-ui #calendarDiv, .snap-ui #searchResultDiv,
    .snap-ui #agencyChangeDiv, .snap-ui #payrollCloseDiv, .snap-ui #urgentAlertsDiv, .snap-ui #testDiv,
    .snap-ui #leftSidebarDiv, .snap-ui .buttonsDiv, .snap-ui .snap-no-print, .intercom-lightweight-app { display: none !important; }
    body.snap-ui { background: #fff; }
    .snap-ui .snap-card, .snap-ui #dialogDiv, .snap-ui #resultDiv:not(:empty) { box-shadow: none; border-color: #ccc; }
}