/* ============================================================
   SIITH — Design system (Permisos y Vacaciones)
   Fase 1: tokens, componentes base, shell del módulo permisos
   ============================================================ */

:root {
    --siith-primary: #32266b;
    --siith-primary-dark: #211847;
    --siith-primary-mid: #4a3a8a;
    --siith-primary-soft: #f3f0fa;
    --siith-primary-focus: rgba(50, 38, 107, 0.12);

    /* Color unificado de popups fecha/hora (solicitud de permiso) */
    --siith-calendar: #40327e;
    --siith-calendar-mid: #5240a0;
    --siith-calendar-dark: #322663;
    --siith-calendar-soft: #f1eef9;
    --siith-calendar-focus: rgba(64, 50, 126, 0.16);

    --siith-surface: #ffffff;
    --siith-surface-alt: #f4f6f9;
    --siith-border: #cbd5e1;
    --siith-border-light: #e2e8f0;

    --siith-text: #334155;
    --siith-text-strong: #0f172a;
    --siith-text-muted: #64748b;
    --siith-label: #475569;

    --siith-success: #15803d;
    --siith-success-soft: #dcfce7;
    --siith-warning: #b45309;
    --siith-warning-soft: #fef3c7;

    --siith-radius-sm: 8px;
    --siith-radius-md: 12px;
    --siith-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 24px rgba(15, 23, 42, 0.06);
    --siith-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --siith-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --siith-transition: 0.15s ease;
    --siith-sidebar-width: clamp(280px, 24vw, 340px);
    --siith-topbar-min-height: clamp(52px, 6.5vh, 72px);
    --siith-topbar-height: var(--siith-topbar-min-height);

    /* Puente hacia styleTablas.css */
    --tabla-primary: var(--siith-primary);
    --tabla-primary-dark: var(--siith-primary-dark);
    --tabla-border: var(--siith-border-light);
    --tabla-cell-border: var(--siith-border-light);
    --tabla-row-alt: #f8fafc;
    --tabla-row-hover: #f1f5f9;
    --tabla-text: var(--siith-text);
    --tabla-muted: var(--siith-text-muted);
}

/* ===== EasyUI — base global ===== */
.tabs-title {
    font-size: 12px !important;
    letter-spacing: 0.01em;
}

.tabs-panels {
    border: none !important;
    background: transparent !important;
}

.panel-title {
    font-weight: 600 !important;
    color: var(--siith-text-strong) !important;
    letter-spacing: -0.01em;
}

.layout-split-west,
.layout-split-east {
    background: var(--siith-border-light) !important;
}

.ip-header {
    z-index: 1000 !important;
}

ul.fancytree-container {
    border: 0 !important;
    font-size: 12px !important;
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    font-family: var(--siith-font) !important;
    background: inherit !important;
}

#tabs_principal > .tabs-header {
    display: none !important;
}

#tabs_principal > .tabs-panels {
    border-width: 0;
}

/* ===== Componentes base ===== */
.siith-page {
    padding: clamp(12px, 2.2vh, 20px) clamp(12px, 2.5vw, 24px);
    background: var(--siith-surface-alt);
    min-height: 100%;
    box-sizing: border-box;
    font-family: var(--siith-font);
}

.siith-page-header {
    margin-bottom: clamp(12px, 2vh, 20px);
}

.siith-page-header__titulo {
    margin: 0;
    font-size: clamp(1.05rem, 1.5vh + 0.4vw, 1.25rem);
    font-weight: 700;
    color: var(--siith-text-strong);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.siith-page-header__sub {
    margin: 6px 0 0;
    font-size: clamp(12px, 1.3vh, 13px);
    color: var(--siith-text-muted);
    line-height: 1.45;
}

.siith-card {
    background: var(--siith-surface);
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-md);
    box-shadow: var(--siith-shadow);
    padding: clamp(14px, 2vh, 20px) clamp(14px, 2.2vw, 24px);
    box-sizing: border-box;
}

.siith-card + .siith-card {
    margin-top: 16px;
}

.siith-avatar,
.permisos-cabecera-usuario__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--siith-primary-mid) 0%, var(--siith-primary) 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    text-transform: uppercase;
}

.siith-user-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.siith-user-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    flex: 1;
    min-width: 0;
}

.siith-user-card__item label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--siith-text-muted);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.siith-user-card__item span {
    font-size: 13px;
    color: var(--siith-text-strong);
    line-height: 1.35;
}

.siith-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1100px) {
    .siith-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .siith-metrics {
        grid-template-columns: 1fr;
    }
}

.siith-metric-card {
    background: var(--siith-surface);
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-md);
    padding: 16px 18px;
    box-shadow: var(--siith-shadow-sm);
}

.siith-metric-card--highlight {
    border-color: var(--siith-primary);
    box-shadow: 0 0 0 1px rgba(50, 38, 107, 0.08), var(--siith-shadow-sm);
}

.siith-metric-card__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--siith-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.siith-metric-card__value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--siith-text-strong);
    line-height: 1.2;
}

.siith-radio-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .siith-radio-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.siith-radio-card {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: #fff;
    box-sizing: border-box;
    box-shadow: none;
    transition: border-color var(--siith-transition), background-color var(--siith-transition);
}

.siith-radio-card:hover {
    border-color: #a89fd4;
}

.siith-radio-card:has(.siith-radio-card__input:checked),
.siith-radio-card--selected {
    border-color: var(--siith-primary);
    background: #f3f0fa;
    box-shadow: none;
    outline: none;
}

.siith-radio-card__surface {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 88px;
    padding: 16px 16px 14px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
}

.siith-radio-card__surface:hover {
    border-color: transparent;
}

.siith-radio-card__input {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 16px;
    height: 16px;
    margin: 0;
    z-index: 2;
    accent-color: var(--siith-primary);
    cursor: pointer;
    background: transparent;
    outline: none;
    box-shadow: none;
}

.siith-radio-card__input:focus,
.siith-radio-card__input:focus-visible {
    outline: none;
    box-shadow: none;
}

.siith-radio-card__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-text);
    background: transparent;
    display: block;
}

.siith-radio-card__icon {
    width: 22px;
    height: 22px;
    color: var(--siith-primary);
    background: transparent;
    flex-shrink: 0;
}

.siith-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px;
}

.siith-form-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.siith-form-field--full {
    grid-column: 1 / -1;
}

.siith-form-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--siith-label);
    margin-bottom: 6px;
}

.siith-form-field input[type="text"],
.siith-form-field input[type="date"],
.siith-form-field input[type="time"],
.siith-form-field select,
.siith-form-field textarea {
    width: 100%;
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: var(--siith-font);
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    box-sizing: border-box;
    transition: border-color var(--siith-transition), box-shadow var(--siith-transition);
}

.siith-form-field textarea {
    min-height: 96px;
    resize: vertical;
}

.siith-form-field input:focus,
.siith-form-field select:focus,
.siith-form-field textarea:focus {
    outline: none;
    border-color: var(--siith-primary);
    box-shadow: 0 0 0 3px var(--siith-primary-focus);
}

.siith-alert {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--siith-text);
    background: var(--siith-primary-soft);
    border: 1px solid #ddd6fe;
    border-radius: var(--siith-radius-sm);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.siith-alert--info {
    color: #1e40af;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.siith-alert svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.siith-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1.4;
}

.siith-badge--success {
    color: var(--siith-success);
    background: var(--siith-success-soft);
}

.siith-badge--warning {
    color: var(--siith-warning);
    background: var(--siith-warning-soft);
}

.siith-badge--neutral {
    color: var(--siith-text-muted);
    background: #f1f5f9;
}

.siith-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.siith-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--siith-font);
    line-height: 1.3;
    border-radius: var(--siith-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--siith-transition), border-color var(--siith-transition), box-shadow var(--siith-transition), transform 0.1s ease;
}

.siith-btn--primary {
    color: #fff;
    background: linear-gradient(180deg, var(--siith-primary-mid) 0%, var(--siith-primary) 100%);
    border: none;
    box-shadow: 0 2px 8px rgba(50, 38, 107, 0.25);
}

.siith-btn--primary:hover {
    box-shadow: 0 4px 14px rgba(50, 38, 107, 0.3);
    transform: translateY(-1px);
}

.siith-btn--secondary {
    color: var(--siith-primary);
    background: var(--siith-surface);
    border: 1px solid var(--siith-border);
}

.siith-btn--secondary:hover {
    background: var(--siith-primary-soft);
    border-color: #c4b5fd;
}

.siith-btn--danger-outline {
    color: #dc2626;
    background: var(--siith-surface);
    border: 1px solid #fecaca;
}

.siith-btn--danger-outline:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}

.siith-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* ===== Diálogos / popups (reemplazo de messager y alert nativo) ===== */
.siith-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    box-sizing: border-box;
    animation: siith-dialog-fade-in 0.18s ease;
}

@keyframes siith-dialog-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.siith-dialog {
    width: min(440px, 100%);
    background: var(--siith-surface);
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-md);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    font-family: var(--siith-font);
    animation: siith-dialog-slide-in 0.22s ease;
}

@keyframes siith-dialog-slide-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.siith-dialog__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 0;
}

.siith-dialog__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.siith-dialog__icon svg {
    width: 20px;
    height: 20px;
}

.siith-dialog--info .siith-dialog__icon {
    color: var(--siith-primary);
    background: var(--siith-primary-soft);
}

.siith-dialog--error .siith-dialog__icon {
    color: #b91c1c;
    background: #fef2f2;
}

.siith-dialog--warning .siith-dialog__icon {
    color: #b45309;
    background: #fffbeb;
}

.siith-dialog--confirm .siith-dialog__icon {
    color: var(--siith-primary);
    background: var(--siith-primary-soft);
}

.siith-dialog__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--siith-text-strong);
    line-height: 1.3;
}

.siith-dialog__body {
    padding: 14px 20px 20px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--siith-text);
}

.siith-dialog__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 20px 18px;
}

.siith-dialog__actions .siith-btn {
    min-width: 96px;
}

body.siith-dialog-open {
    overflow: hidden;
}

/* EasyUI messager legacy — estilo corporativo si aún se renderiza en body */
body:has(.permisos-shell) .messager-window.panel.window {
    border-radius: var(--siith-radius-md) !important;
    border: 1px solid var(--siith-border-light) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22) !important;
    overflow: hidden;
}

body:has(.permisos-shell) .messager-window .panel-header {
    background: var(--siith-surface) !important;
    border-bottom: 1px solid var(--siith-border-light) !important;
    color: var(--siith-text-strong) !important;
    font-weight: 700 !important;
    font-family: var(--siith-font) !important;
}

body:has(.permisos-shell) .messager-window .panel-body {
    font-family: var(--siith-font) !important;
    font-size: 13px !important;
    color: var(--siith-text) !important;
    border: none !important;
}

body:has(.permisos-shell) .messager-window .messager-button .l-btn {
    background: linear-gradient(180deg, var(--siith-primary-mid) 0%, var(--siith-primary) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--siith-radius-sm) !important;
    font-weight: 600 !important;
}

/* ===== Cabecera módulo permisos (mockup) ===== */
.permisos-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--siith-surface-alt);
    font-family: var(--siith-font);
}

/* Drawer móvil: oculto por defecto (evita que el logo aparezca como “footer” en escritorio) */
.permisos-mobile-drawer,
.permisos-mobile-drawer__brand {
    display: none !important;
}

.permisos-topbar {
    position: absolute;
    top: 0;
    left: var(--siith-sidebar-width);
    right: 0;
    /* Altura natural según contenido + viewport; JS solo mide y sincroniza el offset del layout */
    height: auto;
    min-height: var(--siith-topbar-min-height);
    max-height: min(22vh, 120px);
    z-index: 120;
    background: var(--siith-surface);
    border-bottom: 1px solid var(--siith-border-light);
    box-shadow: var(--siith-shadow-sm);
    box-sizing: border-box;
    transition: left 0.2s ease;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    overflow: hidden;
}

.permisos-shell--sidebar-collapsed .permisos-topbar {
    left: 0;
}

/* Menú contraído + subtítulo: permite 2 líneas sin romper monitores bajos */
.permisos-shell--sidebar-collapsed.permisos-shell--cabecera-con-sub .permisos-topbar {
    max-height: min(28vh, 140px);
}

.permisos-shell--sidebar-collapsed.permisos-shell--cabecera-con-sub .permisos-cabecera-usuario {
    height: auto;
    max-height: none;
    align-items: center;
}

.permisos-shell--sidebar-collapsed.permisos-shell--cabecera-con-sub .permisos-cabecera-usuario__titulo-wrap {
    gap: clamp(1px, 0.35vh, 4px);
}

.permisos-perfiles-root {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
}

.permisos-perfil-panel {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.permisos-perfil-panel.is-active {
    display: block;
}

.permisos-perfil-panel > .easyui-layout {
    width: 100% !important;
    height: 100% !important;
}

.permisos-cabecera-usuario {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(6px, 1.2vw, 16px);
    padding: clamp(6px, 1vh, 10px) clamp(10px, 2vw, 24px);
    height: auto;
    min-height: var(--siith-topbar-min-height);
    max-height: none;
    box-sizing: border-box;
    background: transparent;
    border: none;
    box-shadow: none;
    font-family: var(--siith-font);
    overflow: hidden;
}

.permisos-cabecera-usuario__menu-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    color: var(--siith-text);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
}

.permisos-cabecera-usuario__menu-btn:hover {
    background: var(--siith-primary-soft);
    border-color: #c4b5fd;
    color: var(--siith-primary);
}

.permisos-cabecera-usuario__titulo-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    text-align: left;
    overflow: hidden;
}

.permisos-cabecera-usuario__titulo {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    text-align: left !important;
    font-size: clamp(0.88rem, 0.75rem + 0.45vw, 1.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--siith-text-strong);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.permisos-cabecera-usuario__titulo-base {
    color: var(--siith-text-strong);
}

.permisos-cabecera-usuario__titulo-sep {
    color: var(--siith-text-muted);
    font-weight: 500;
}

.permisos-cabecera-usuario__titulo-pagina {
    color: var(--siith-primary, #32266b);
    font-weight: 700;
}

.permisos-cabecera-usuario__subtitulo {
    margin: 0;
    width: 100%;
    max-width: 100%;
    font-size: clamp(11px, 0.65rem + 0.25vw, 13px);
    font-weight: 500;
    line-height: 1.35;
    color: var(--siith-text-muted);
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.permisos-cabecera-usuario__subtitulo[hidden],
.permisos-cabecera-usuario__titulo-sep[hidden] {
    display: none !important;
}

/* El título/descripcion ya viven en la cabecera superior */
.permisos-modulo .siith-page-header.siith-page-header--en-cabecera,
.permisos-modulo .siith-page-header--en-cabecera,
.permisos-direct-panel .siith-page-header.siith-page-header--en-cabecera,
.permisos-direct-panel .siith-page-header--en-cabecera {
    display: none !important;
}

.permisos-modulo .siith-page-header--en-cabecera:has(.rm-cal-page__actions),
.permisos-direct-panel .siith-page-header--en-cabecera:has(.rm-cal-page__actions) {
    display: flex !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 12px 24px 0 !important;
    min-height: 0;
    align-items: center;
    justify-content: flex-end;
}

.permisos-modulo .siith-page-header--en-cabecera:has(.rm-cal-page__actions) .rm-cal-page__header-main,
.permisos-direct-panel .siith-page-header--en-cabecera:has(.rm-cal-page__actions) .rm-cal-page__header-main {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.permisos-cabecera-usuario__acciones {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: clamp(8px, 1.2vw, 16px);
    min-width: 0;
    max-width: min(58vw, 720px);
}

.permisos-cabecera-usuario__rol-select {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
}

.permisos-cabecera-usuario__rol-select-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--siith-text-muted);
}

.permisos-cabecera-usuario__rol-select-input {
    height: 34px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: var(--siith-font);
    color: var(--siith-text-strong);
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    cursor: pointer;
}

.permisos-cabecera-usuario__rol-select-input:focus {
    outline: none;
    border-color: var(--siith-primary);
    box-shadow: 0 0 0 3px var(--siith-primary-focus);
}

.permisos-cabecera-usuario__usuario {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 380px;
}

.permisos-cabecera-usuario__salir {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-left: 4px;
    border: 1px solid var(--siith-primary);
    border-radius: var(--siith-radius-sm);
    background: linear-gradient(180deg, var(--siith-primary-mid) 0%, var(--siith-primary) 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(33, 24, 71, 0.18);
    transition: background var(--siith-transition), border-color var(--siith-transition), color var(--siith-transition), box-shadow var(--siith-transition);
}

.permisos-cabecera-usuario__salir:hover {
    background: linear-gradient(180deg, var(--siith-primary) 0%, var(--siith-primary-dark) 100%);
    border-color: var(--siith-primary-dark);
    color: #fff;
    box-shadow: 0 2px 6px rgba(33, 24, 71, 0.28);
}

.permisos-cabecera-usuario__salir-icon {
    flex: 0 0 auto;
    display: block;
    width: 18px;
    height: 18px;
}

/* El salir queda solo en la cabecera */

.permisos-cabecera-usuario__usuario-texto {
    min-width: 0;
    text-align: right;
}

.permisos-cabecera-usuario__nombre {
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-text-strong);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.permisos-cabecera-usuario__unidad {
    font-size: 11px;
    color: var(--siith-text-muted);
    line-height: 1.35;
    margin-top: 2px;
    max-width: 280px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.permisos-cabecera-usuario__rol {
    font-size: 11px;
    color: var(--siith-text-muted);
    line-height: 1.3;
    margin-top: 2px;
}

.permisos-cabecera-usuario__rol--oculto {
    display: none;
}

/* Logo institucional — mismo aspecto en login y sidebar (botonera) */
.siith-logo-institucional {
    display: block;
    width: auto;
    max-width: 248px;
    max-height: 80px;
    height: auto;
    object-fit: contain;
    object-position: left center;
    mix-blend-mode: normal;
    opacity: 1;
    filter: none;
}

.login-brand__logos .siith-logo-institucional {
    width: auto;
    max-width: min(100%, 520px);
    max-height: clamp(78px, 13vh, 130px);
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 960px) {
    .login-brand__logos .siith-logo-institucional {
        width: 100%;
        max-width: min(100%, 480px);
        max-height: clamp(56px, 10vh, 84px);
        height: auto;
        margin: 0 auto;
        object-position: center;
    }
}

@media (max-width: 480px) {
    .login-brand__logos .siith-logo-institucional {
        max-width: min(100%, 400px);
        max-height: clamp(48px, 9vh, 70px);
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    .login-brand__logos .siith-logo-institucional {
        max-width: min(100%, 300px);
        max-height: clamp(40px, 16vh, 64px);
        margin: 0 auto;
        object-position: center;
    }
}

/* Logo en sidebar — misma altura que .permisos-topbar (variable dinámica) */
.permisos-sidebar-logo {
    box-sizing: border-box;
    height: var(--siith-topbar-height, 64px);
    min-height: var(--siith-topbar-height, 64px);
    max-height: var(--siith-topbar-height, 64px);
    padding: 0 clamp(8px, 2vw, 14px);
    margin: 0 -6px clamp(10px, 1.5vh, 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    flex-shrink: 0;
}

.permisos-sidebar-logo__img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
}

.permisos-sidebar-logo .siith-logo-institucional {
    max-width: min(220px, 86%);
    max-height: min(44px, calc(var(--siith-topbar-height, 64px) - 16px));
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.permisos-modulo .layout-panel-west .permisos-sidebar-logo + div,
.permisos-modulo .layout-panel-west .permisos-sidebar-logo + table {
    margin-top: 0 !important;
}

.permisos-modulo .layout-panel-west .fancytree-folder .fancytree-title,
.permisos-modulo .layout-panel-west .fancytree-lastsib .fancytree-title {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Iconos del menú lateral — forzar blanco */
.permisos-modulo .layout-panel-west img.fancytree-icon {
    display: inline-block !important;
    visibility: visible !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 3px;
    vertical-align: middle;
    opacity: 0.95;
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
}

.permisos-modulo .layout-panel-west span.fancytree-icon,
.permisos-modulo .layout-panel-west span.fancytree-custom-icon {
    display: inline-block !important;
    visibility: visible !important;
    vertical-align: middle;
    opacity: 0.92;
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
}

.permisos-modulo .layout-panel-west span.fancytree-expander {
    opacity: 0.85;
    vertical-align: middle;
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
}

/* ===== Módulo permisos — shell layout mockup ===== */
.permisos-shell .permisos-perfil-panel.is-active .layout-panel-west {
    width: var(--siith-sidebar-width) !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    z-index: 110 !important;
    background: linear-gradient(180deg, var(--siith-primary-dark) 0%, #2a1f5c 45%, var(--siith-primary) 100%) !important;
}

.permisos-shell .permisos-perfil-panel.is-active .layout-panel-center {
    left: var(--siith-sidebar-width) !important;
    top: var(--siith-topbar-height, 64px) !important;
    width: calc(100% - var(--siith-sidebar-width)) !important;
    height: calc(100% - var(--siith-topbar-height, 64px)) !important;
}

/* Colapsar menú solo en escritorio (en móvil usa drawer por left, sin width:0) */
@media (min-width: 961px) {
    .permisos-shell--sidebar-collapsed .permisos-perfil-panel.is-active .layout-panel-west {
        width: 0 !important;
        overflow: hidden !important;
        opacity: 0;
        pointer-events: none;
    }

    .permisos-shell--sidebar-collapsed .permisos-perfil-panel.is-active .layout-panel-center {
        left: 0 !important;
        width: 100% !important;
    }
}

.permisos-shell .layout-panel-west .panel-header {
    display: none !important;
}

.permisos-modulo .tabs-panels .panel-body {
    background: var(--siith-surface-alt) !important;
}

.permisos-modulo .layout-panel-center .panel-body {
    background: var(--siith-surface-alt) !important;
    padding: 0 !important;
}

.permisos-modulo .layout-panel-north .panel-body {
    background: var(--siith-surface) !important;
    padding: 0 !important;
}

.permisos-modulo .panel-header,
.permisos-modulo .layout-panel-center .panel-header,
.permisos-modulo .layout-panel-north .panel-header {
    background: var(--siith-surface) !important;
    border: none !important;
    border-bottom: 1px solid var(--siith-border-light) !important;
    color: var(--siith-text-strong) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
}

.permisos-modulo .layout-panel-west .panel-body {
    background: transparent !important;
    padding: 0 6px 8px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    height: 100% !important;
}

.permisos-modulo .layout-panel-west .panel-body > div:not(.permisos-sidebar-logo):not(.permisos-sidebar-copy) {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.permisos-sidebar-copy {
    flex-shrink: 0;
    margin: 6px 0 0;
    padding: 0 4px;
    font-size: 9px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: center;
    color: rgba(255, 255, 255, 0.62);
    white-space: normal;
}

.permisos-modulo .layout-panel-west .panel {
    background: transparent !important;
}

.permisos-modulo .layout-panel-west ul.fancytree-container {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.88);
    padding-top: 8px !important;
    margin-top: 0;
    border: none !important;
}

.permisos-modulo .layout-panel-west .fancytree-node {
    padding: 0;
    min-height: 0;
}

.permisos-modulo .layout-panel-west .fancytree-title,
.permisos-modulo .layout-panel-west .fancytree-title a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 11.5px !important;
    padding: 5px 10px !important;
    border-radius: var(--siith-radius-sm);
    line-height: 1.25;
    border-left: 3px solid transparent;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: left !important;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
    touch-action: manipulation;
}

.permisos-modulo .layout-panel-west .fancytree-title a[style*="color:#000"],
.permisos-modulo .layout-panel-west .fancytree-title a[style*="color: #000"] {
    color: rgba(255, 255, 255, 0.9) !important;
}

.permisos-modulo .layout-panel-west .fancytree-active .fancytree-title,
.permisos-modulo .layout-panel-west .fancytree-selected .fancytree-title,
.permisos-modulo .layout-panel-west .fancytree-focused .fancytree-title,
.permisos-modulo .layout-panel-west .fancytree-node.is-menu-active > .fancytree-title,
.permisos-modulo .layout-panel-west .fancytree-node.is-menu-active .fancytree-title a {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    font-weight: 600;
    border-left-color: #c4b5fd;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.permisos-modulo .layout-panel-west .fancytree-node.is-menu-active,
.permisos-modulo .layout-panel-west .fancytree-node.fancytree-active {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--siith-radius-sm);
}

.permisos-modulo .layout-panel-west span.fancytree-title:hover,
.permisos-modulo .layout-panel-west .fancytree-title:hover,
.permisos-modulo .layout-panel-west .fancytree-title a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    background-image: none !important;
    filter: none !important;
    color: #fff !important;
    border-color: transparent !important;
    border-left-color: rgba(196, 181, 253, 0.55) !important;
}

.permisos-modulo .layout-panel-west .fancytree-active .fancytree-title:hover,
.permisos-modulo .layout-panel-west .fancytree-selected .fancytree-title:hover,
.permisos-modulo .layout-panel-west .fancytree-focused .fancytree-title:hover,
.permisos-modulo .layout-panel-west .fancytree-active .fancytree-title a:hover,
.permisos-modulo .layout-panel-west .fancytree-selected .fancytree-title a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    background-image: none !important;
    filter: none !important;
    color: #fff !important;
    border-color: transparent !important;
    border-left-color: #c4b5fd !important;
}

.permisos-modulo .layout-panel-west .fancytree-expander {
    color: rgba(255, 255, 255, 0.75) !important;
    flex-shrink: 0;
}

.permisos-modulo .layout-panel-west img.fancytree-icon,
.permisos-modulo .layout-panel-west span.fancytree-icon {
    flex-shrink: 0;
}

.permisos-modulo .layout-panel-west > table td,
.permisos-modulo .layout-panel-west > table tr {
    border: none !important;
    padding: 4px 8px !important;
    background: transparent !important;
}

.permisos-modulo .layout-panel-west input[type="submit"] {
    display: block;
    width: calc(100% - 8px);
    margin: 6px 4px 4px;
    padding: 7px 12px !important;
    font-size: 11.5px !important;
    font-weight: 600;
    font-family: var(--siith-font);
    color: rgba(255, 255, 255, 0.92) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: var(--siith-radius-sm) !important;
    cursor: pointer;
    transition: background var(--siith-transition), border-color var(--siith-transition);
}

.permisos-modulo .layout-panel-west input[type="submit"]:hover {
    background: rgba(254, 226, 226, 0.12) !important;
    border-color: rgba(252, 165, 165, 0.45) !important;
    color: #fecaca !important;
}

/* Ocultar pestañas de perfil (reemplazadas por selector) */
.permisos-modulo > .easyui-tabs > .tabs-header,
.permisos-shell > .easyui-tabs > .tabs-header,
.permisos-perfiles-root > .tabs-header {
    display: none !important;
}

.permisos-modulo > .easyui-tabs > .tabs-panels,
.permisos-shell > .easyui-tabs > .tabs-panels {
    border: none !important;
    padding: 0 !important;
}

.permisos-modulo [id^="visor_fn_"] > .tabs-header {
    background: var(--siith-surface) !important;
    border-bottom: 1px solid var(--siith-border-light) !important;
    padding: 0 12px !important;
}

.permisos-modulo [id^="visor_fn_"] .tabs li .tabs-inner {
    font-size: 12px !important;
    color: var(--siith-text-muted) !important;
    border: none !important;
    background: transparent !important;
    padding: 8px 14px !important;
}

.permisos-modulo [id^="visor_fn_"] .tabs li.tabs-selected .tabs-inner {
    color: var(--siith-primary) !important;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--siith-primary);
}

.permisos-modulo [id^="visor_fn_"] .tabs li .tabs-inner:hover {
    color: var(--siith-primary) !important;
    background: var(--siith-surface-alt) !important;
}

.permisos-modulo [id^="visor_fn_"] .tabs-panels .panel-body {
    background: var(--siith-surface-alt) !important;
}

.permisos-modulo [id^="visor_fn_"] > .tabs-panels,
.permisos-modulo [id^="visor_fn_"] > .tabs-panels > .tabs-panel,
.permisos-modulo [id^="visor_fn_"] > .tabs-panels .panel-body {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

.permisos-modulo [id^="visor_fn_"] > .tabs-panels .panel-body:has(.por-autorizar-page) {
    overflow: hidden !important;
    padding: 0 !important;
}

.permisos-modulo a.l-btn,
.permisos-modulo .l-btn {
    border-radius: var(--siith-radius-sm) !important;
}

.permisos-modulo .btn-ingresar-permiso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: linear-gradient(180deg, var(--siith-primary-mid) 0%, var(--siith-primary) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--siith-radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(50, 38, 107, 0.22);
}

.permisos-modulo .btn-ingresar-permiso:hover {
    box-shadow: 0 4px 14px rgba(50, 38, 107, 0.28);
}

.permisos-modulo .btn-ingresar-permiso:disabled,
.siith-btn:disabled,
.siith-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto;
}

.permisos-modulo #creacion-toolbar {
    background: transparent !important;
    border-bottom: none !important;
}

/* ===== Solicitud de permiso (mockup Fase 2) ===== */
.permisos-solicitud-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--siith-surface-alt);
    font-family: var(--siith-font);
}

.permisos-solicitud-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    padding: 12px 20px 14px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.permisos-solicitud-form {
    max-width: 980px;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

.permisos-solicitud-header {
    max-width: 980px;
    width: 100%;
    min-width: 0;
    margin: 0 auto 10px;
    box-sizing: border-box;
}

.permisos-solicitud-header .siith-page-header__titulo {
    font-size: 1.25rem;
    color: var(--siith-primary-dark);
}

.permisos-solicitud-hidden,
.permisos-solicitud-hidden-row {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    pointer-events: none !important;
}

.permisos-solicitud-page .siith-card.permisos-solicitud-user,
.permisos-solicitud-page .siith-card.permisos-solicitud-form-card {
    padding: 14px 18px;
}

.permisos-solicitud-page .siith-card + .siith-card {
    margin-top: 10px;
}

.permisos-solicitud-user {
    margin-bottom: 10px;
    background: var(--siith-primary-soft) !important;
    border: 1px solid #ddd6fe !important;
    box-shadow: none !important;
}

.permisos-solicitud-user__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .permisos-solicitud-user__grid {
        grid-template-columns: 1fr;
    }
}

.permisos-solicitud-user__col label,
.permisos-solicitud-user__servidor-info label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--siith-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    background: none !important;
}

.permisos-solicitud-user__col span:not(.siith-avatar):not(.permisos-solicitud-user__avatar),
.permisos-solicitud-user__servidor-info span {
    display: block;
    font-size: 13px;
    color: #0f172a !important;
    line-height: 1.4;
    background: none !important;
}

.permisos-solicitud-user__servidor {
    display: flex;
    align-items: center;
    gap: 14px;
}

.permisos-solicitud-page .permisos-solicitud-user__avatar.siith-avatar,
.permisos-solicitud-user__avatar.siith-avatar,
.permisos-solicitud-user__avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    line-height: 1 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    background: linear-gradient(180deg, var(--siith-primary-mid) 0%, var(--siith-primary) 100%) !important;
    color: #fff !important;
    border: none !important;
}

.permisos-solicitud-user__nombre {
    font-weight: 600;
    margin-bottom: 4px !important;
    color: #0f172a !important;
    background: none !important;
}

/* Evitar manchas blancas en labels/textos del formulario */
.permisos-solicitud-page .permisos-solicitud-field__label,
.permisos-solicitud-page .permisos-solicitud-field__label label,
.permisos-solicitud-page .permisos-solicitud-section-title,
.permisos-solicitud-page .permisos-solicitud-alert,
.permisos-solicitud-page .permisos-solicitud-alert span {
    background: none !important;
}

.permisos-solicitud-page .permisos-solicitud-field__label label {
    color: var(--siith-label) !important;
}

/* Anular estilos legacy #tbl_ingreso_monitoreo del shell SIITH */
.permisos-solicitud-page #tbl_ingreso_monitoreo.permisos-solicitud-grid *,
.permisos-solicitud-page #tbl_ingreso_monitoreo.permisos-solicitud-grid .permisos-solicitud-field__label,
.permisos-solicitud-page #tbl_ingreso_monitoreo.permisos-solicitud-grid .permisos-solicitud-field__label label {
    font-size: inherit !important;
    letter-spacing: normal !important;
}

.permisos-solicitud-page #tbl_ingreso_monitoreo.permisos-solicitud-grid .permisos-solicitud-field__label,
.permisos-solicitud-page #tbl_ingreso_monitoreo.permisos-solicitud-grid .permisos-solicitud-field__label label,
.permisos-solicitud-page #tbl_ingreso_monitoreo.permisos-solicitud-grid .permisos-solicitud-field__help {
    background: none !important;
}

.permisos-solicitud-page #tbl_ingreso_monitoreo.permisos-solicitud-grid input,
.permisos-solicitud-page #tbl_ingreso_monitoreo.permisos-solicitud-grid select,
.permisos-solicitud-page #tbl_ingreso_monitoreo.permisos-solicitud-grid textarea {
    border: 1px solid var(--siith-border) !important;
    border-radius: var(--siith-radius-sm) !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    box-shadow: none !important;
}

/* Contenedor visual del combo (flecha real en HTML, no solo background) */
.permisos-solicitud-field__control--select {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
}

.permisos-solicitud-field__control--select select,
.permisos-solicitud-page #tbl_ingreso_monitoreo.permisos-solicitud-grid .permisos-solicitud-field__control--select select,
.permisos-solicitud-field--tipo select#campo_ingreso_permisos_7 {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 48px 8px 12px !important;
    cursor: pointer !important;
    color: var(--siith-text-strong, #0f172a) !important;
    border: 1px solid #c4b5fd !important;
    border-radius: var(--siith-radius-sm) !important;
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px rgba(50, 38, 107, 0.04) !important;
}

.permisos-solicitud-page .permisos-solicitud-field__control > .permisos-solicitud-select-chevron,
.permisos-solicitud-field__control--select > .permisos-solicitud-select-chevron,
button.permisos-solicitud-select-chevron {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    bottom: auto !important;
    left: auto !important;
    width: 32px !important;
    height: 32px !important;
    margin-top: -16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    border: none !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg, #4a3a8a 0%, #32266b 100%) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    z-index: 6 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.permisos-solicitud-page .permisos-solicitud-field__control > .permisos-solicitud-select-chevron svg,
.permisos-solicitud-field__control--select > .permisos-solicitud-select-chevron svg,
button.permisos-solicitud-select-chevron svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    stroke: #fff !important;
    fill: none !important;
    flex-shrink: 0 !important;
}

.permisos-solicitud-page #tbl_ingreso_monitoreo.permisos-solicitud-grid .permisos-solicitud-field__control--select select:hover,
.permisos-solicitud-field--tipo select#campo_ingreso_permisos_7:hover {
    border-color: #7c3aed !important;
}

.permisos-solicitud-page #tbl_ingreso_monitoreo.permisos-solicitud-grid .permisos-solicitud-field__control--select select:focus,
.permisos-solicitud-field--tipo select#campo_ingreso_permisos_7:focus {
    outline: none !important;
    border-color: var(--siith-primary, #32266b) !important;
    box-shadow: 0 0 0 3px var(--siith-primary-focus, rgba(50, 38, 107, 0.12)) !important;
}

/* crearInput() envuelve inputs en <span>: el fondo blanco del wrapper filtra en las esquinas */
.permisos-solicitud-page .permisos-solicitud-field__control span[id^="span_"],
.permisos-solicitud-page .permisos-solicitud-field__control > span:not(.permisos-solicitud-select-chevron) {
    display: block;
    width: 100%;
    background: transparent !important;
    box-shadow: none !important;
}

.permisos-solicitud-page .permisos-solicitud-field__control span[id^="span_"] input,
.permisos-solicitud-page .permisos-solicitud-field__control > span > input {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    border: 1px solid var(--siith-border) !important;
    border-radius: var(--siith-radius-sm) !important;
    background: #fff !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    box-shadow: none !important;
    outline: none;
}

.permisos-solicitud-page .permisos-solicitud-field,
.permisos-solicitud-page .permisos-solicitud-field__label,
.permisos-solicitud-page .permisos-solicitud-field__control {
    background: transparent !important;
}

.permisos-solicitud-page .siith-card {
    box-shadow: none !important;
    border: 1px solid var(--siith-border-light);
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.permisos-solicitud-page .siith-card.permisos-solicitud-form-card {
    overflow: hidden;
}

.permisos-solicitud-page .siith-alert.permisos-solicitud-alert {
    background: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    border-radius: var(--siith-radius-sm);
    overflow: hidden;
    background-clip: padding-box;
}

.permisos-solicitud-form-card {
    padding: 14px 18px;
}

.permisos-solicitud-section-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.permisos-solicitud-modalidad {
    margin-bottom: 4px;
    min-width: 0;
    max-width: 100%;
}

.permisos-solicitud-modalidad .siith-radio-cards {
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.permisos-solicitud-modalidad .siith-radio-card,
.permisos-solicitud-modalidad .siith-radio-card__surface,
.permisos-solicitud-modalidad .siith-radio-card__label,
.permisos-solicitud-modalidad .siith-radio-card__icon {
    box-shadow: none !important;
    outline: none !important;
}

.permisos-solicitud-modalidad .siith-radio-card__surface,
.permisos-solicitud-modalidad .siith-radio-card__label,
.permisos-solicitud-modalidad .siith-radio-card__icon {
    background: transparent !important;
}

.permisos-solicitud-modalidad .siith-radio-card:has(.siith-radio-card__input:checked),
.permisos-solicitud-modalidad .siith-radio-card--selected {
    background-color: #f3f0fa !important;
    border-color: var(--siith-primary) !important;
}

.permisos-solicitud-modalidad .siith-radio-card__input {
    top: 8px;
    right: 8px;
    width: 14px;
    height: 14px;
    background: transparent !important;
}

.permisos-solicitud-modalidad .siith-radio-card__surface {
    min-height: 54px;
    padding: 8px 10px;
    gap: 4px;
}

.permisos-solicitud-modalidad .siith-radio-card__icon {
    width: 18px;
    height: 18px;
}

.permisos-solicitud-modalidad .siith-radio-card__label {
    font-size: 12px;
}

.permisos-solicitud-fields {
    margin-top: 12px;
    min-width: 0;
    max-width: 100%;
}

.permisos-solicitud-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Orden visual fecha/hora sin alterar IDs ni posición en el DOM */
.permisos-solicitud-grid #tr_campo_ingreso_permisos_7 { order: 10; }
.permisos-solicitud-grid #tr_campo_ingreso_permisos_8 { order: 20; }
.permisos-solicitud-grid #tr_campo_ingreso_permisos_9 { order: 30; }
.permisos-solicitud-grid #tr_campo_ingreso_permisos_10 { order: 31; }
.permisos-solicitud-grid #tr_campo_ingreso_permisos_periodo { order: 31; }
.permisos-solicitud-grid #tr_campo_ingreso_permisos_11 { order: 50; }
.permisos-solicitud-grid #tr_campo_ingreso_permisos_12 { order: 60; }
.permisos-solicitud-grid #tr_campo_ingreso_permisos_14 { order: 70; }
.permisos-solicitud-grid #tr_campo_fecha_falta_timbraje { order: 80; }
.permisos-solicitud-grid #tr_campo_hora_inicio_timbraje { order: 90; }
.permisos-solicitud-grid #tr_campo_hora_fin_timbraje { order: 100; }

/* Reemplazo + documento agrupados al final del formulario */
.permisos-solicitud-grid-footer {
    order: 110;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: flex-start;
}

.permisos-solicitud-grid-footer > .permisos-solicitud-field {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
}

.permisos-solicitud-grid-footer .permisos-solicitud-field__control {
    flex: 0 0 auto;
}

.permisos-solicitud-grid-footer > .permisos-solicitud-field[style*="display: none"],
.permisos-solicitud-grid-footer > .permisos-solicitud-field[style*="display:none"],
.permisos-solicitud-grid-footer > .permisos-solicitud-field[style*="visibility: hidden"],
.permisos-solicitud-grid-footer > .permisos-solicitud-field[style*="visibility:hidden"] {
    display: none !important;
}

.permisos-solicitud-grid > .permisos-solicitud-field[style*="visibility: hidden"],
.permisos-solicitud-grid > .permisos-solicitud-field[style*="visibility:hidden"] {
    display: none !important;
}

.permisos-solicitud-grid > .permisos-solicitud-field {
    flex: 1 1 calc(50% - 7px);
    min-width: 0;
    max-width: calc(50% - 7px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
}

.permisos-solicitud-grid > .permisos-solicitud-field--full,
.permisos-solicitud-grid > .permisos-solicitud-hidden-row {
    flex: 1 1 100%;
    max-width: 100%;
}

.permisos-solicitud-grid > .permisos-solicitud-field[style*="display: none"],
.permisos-solicitud-grid > .permisos-solicitud-field[style*="display:none"] {
    display: none !important;
}

.permisos-solicitud-field__label label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--siith-label);
    margin: 0;
}

.permisos-solicitud-field__control {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

.permisos-solicitud-field__control input[type="text"],
.permisos-solicitud-field__control select,
.permisos-solicitud-textarea {
    width: 100% !important;
    min-height: 36px;
    padding: 6px 10px !important;
    font-size: 12px;
    font-family: var(--siith-font);
    border: 1px solid var(--siith-border) !important;
    border-radius: var(--siith-radius-sm) !important;
    box-sizing: border-box;
    background-color: #fff;
    text-transform: none !important;
}

.permisos-solicitud-field__control select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}

.permisos-solicitud-field--hora-inicio input,
.permisos-solicitud-field--hora-fin input,
.permisos-solicitud-field[id="tr_campo_hora_inicio_timbraje"] input,
.permisos-solicitud-field[id="tr_campo_hora_fin_timbraje"] input,
.permisos-solicitud-field__control input.siith-hora-input {
    padding: 6px 118px 6px 10px !important;
    cursor: text !important;
    background-color: #fff !important;
}

.siith-hora-control,
.permisos-solicitud-field__control.siith-hora-control {
    position: relative !important;
    overflow: visible !important;
}

.siith-hora-step {
    position: absolute !important;
    top: 50% !important;
    width: 28px !important;
    height: 28px !important;
    margin-top: -14px !important;
    border: 1px solid var(--siith-border, #d5d0e8) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--siith-calendar, #40327e) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 4 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.siith-hora-step:hover {
    background: var(--siith-calendar-soft, #f1eef9) !important;
}

.siith-hora-step--minus {
    right: 72px !important;
}

.siith-hora-step--plus {
    right: 40px !important;
}

.siith-hora-btn {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    width: 30px !important;
    height: 30px !important;
    margin-top: -15px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2340327e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    cursor: pointer !important;
    z-index: 5 !important;
    padding: 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.siith-hora-btn:hover {
    background-color: var(--siith-calendar-soft, #f1eef9) !important;
    border-color: var(--siith-border, #d5d0e8) !important;
}

.permisos-solicitud-textarea {
    min-height: 72px;
    resize: vertical;
    flex: 1;
}

.permisos-solicitud-field__control input:focus,
.permisos-solicitud-field__control select:focus,
.permisos-solicitud-textarea:focus {
    outline: none;
    border-color: var(--siith-primary) !important;
    box-shadow: 0 0 0 3px var(--siith-primary-focus);
}

.permisos-solicitud-field--motivo {
    align-self: stretch;
}

@media (max-width: 768px) {
    .permisos-solicitud-grid > .permisos-solicitud-field {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Carga de archivo: barra horizontal delgada */
.permisos-solicitud-field--upload {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.permisos-solicitud-field--upload .permisos-solicitud-field__label {
    flex: 0 0 128px;
    max-width: 128px;
}

.permisos-solicitud-field--upload .permisos-solicitud-field__control {
    flex: 1;
    min-width: 0;
}

.permisos-solicitud-upload {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex: 1;
    min-height: 0;
    padding: 7px 12px;
    border: 1px dashed var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: #fafbff;
    text-align: left;
    box-sizing: border-box;
}

.permisos-solicitud-upload__icon {
    flex-shrink: 0;
    line-height: 0;
    color: var(--siith-primary);
}

.permisos-solicitud-upload__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.permisos-solicitud-upload__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
    flex: 1;
}

.permisos-solicitud-upload__link {
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.permisos-solicitud-upload__hint {
    margin: 0;
    font-size: 11px;
    color: var(--siith-text-muted);
    line-height: 1.3;
    white-space: nowrap;
}

.permisos-solicitud-upload__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.permisos-solicitud-upload__preview {
    font-size: 11px;
    line-height: 1.3;
}

.permisos-solicitud-upload__preview:not(:empty) {
    flex: 1 1 100%;
}

.permisos-solicitud-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.35;
    color: #1e3a5f;
    background: #eef2ff;
    border-color: #c7d2fe;
}

.permisos-solicitud-alert__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #3b82f6;
}

.permisos-solicitud-actions {
    margin-top: 10px;
    padding-top: 0;
}

.permisos-solicitud-actions .siith-btn {
    padding: 6px 14px;
    font-size: 12px;
}

.permisos-solicitud-actions#creacion-toolbar {
    position: static;
    min-height: 0;
    padding: 0;
    display: flex !important;
    flex-wrap: wrap;
    visibility: visible !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.permisos-solicitud-page .select2-container {
    max-width: 100% !important;
    box-sizing: border-box;
}

.permisos-tab-panel-host:has(.permisos-solicitud-page) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.permisos-modulo [id^="visor_fn_"] .tabs-panels .panel-body:has(.permisos-solicitud-page) {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.permisos-tab-panel-host:has(.permisos-solicitud-page) .permisos-solicitud-page {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    height: 100%;
}

.permisos-solicitud-btn-danger {
    color: #b91c1c !important;
    border-color: #fecaca !important;
}

.permisos-solicitud-btn-danger:hover {
    background: #fef2f2 !important;
}

/* ============================================================
   Solicitudes por autorizar
   ============================================================ */
.por-autorizar-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0;
    background: var(--siith-surface-alt);
    font-family: var(--siith-font);
}

.por-autorizar-page__header {
    flex-shrink: 0;
    padding: 20px 24px 0;
    margin-bottom: 0;
}

.por-autorizar-page > .por-autorizar-filtros {
    flex-shrink: 0;
    margin: 16px 24px;
}

.por-autorizar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 24px 24px;
    box-sizing: border-box;
}

.por-autorizar-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 16px !important;
    margin-bottom: 16px;
}

.por-autorizar-filtros__buscar {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    color: var(--siith-text-muted);
}

.por-autorizar-filtros__buscar input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong);
    min-width: 0;
}

.por-autorizar-filtros__select {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong);
}

.por-autorizar-filtros__limpiar {
    margin-left: auto;
}

.por-autorizar-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
}

.por-autorizar-layout > .siith-card {
    margin-top: 0 !important;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.por-autorizar-lista {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.por-autorizar-lista__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    min-height: 64px;
    margin: 0;
    padding: 12px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--siith-border-light);
}

.por-autorizar-lista__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--siith-text-strong);
}

.por-autorizar-cards {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 0;
    box-sizing: border-box;
}

.por-autorizar-cards__loading,
.por-autorizar-cards__empty,
.por-autorizar-detalle__empty,
.por-autorizar-detalle__loading {
    padding: 24px 12px;
    text-align: center;
    color: var(--siith-text-muted);
    font-size: 13px;
}

.por-autorizar-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color var(--siith-transition), box-shadow var(--siith-transition), background var(--siith-transition);
}

.por-autorizar-card:hover {
    border-color: #c4b5fd;
}

.por-autorizar-card.is-selected {
    border-color: var(--siith-primary);
    background: var(--siith-primary-soft) !important;
    box-shadow: 0 0 0 3px var(--siith-primary-focus);
}

.por-autorizar-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ede9fe;
    color: var(--siith-primary);
    flex-shrink: 0;
    border: 1px solid #ddd6fe;
}

.por-autorizar-card.is-selected .por-autorizar-card__icon {
    background: #ddd6fe;
    border-color: #c4b5fd;
    color: var(--siith-primary-dark);
}

.por-autorizar-card__body,
.por-autorizar-card__body span,
.por-autorizar-card__body strong {
    background: none !important;
}

.por-autorizar-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.por-autorizar-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.por-autorizar-card__top strong {
    font-size: 13px;
    color: var(--siith-text-strong);
}

.por-autorizar-card__badge {
    flex-shrink: 0;
}

.por-autorizar-card__meta,
.por-autorizar-card__tipo {
    display: block;
    font-size: 12px;
    color: var(--siith-text-muted);
    line-height: 1.35;
}

.por-autorizar-card__tipo {
    margin-top: 2px;
    color: var(--siith-text-strong);
    font-weight: 600;
}

.por-autorizar-card__periodo {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--siith-text-muted);
    line-height: 1.35;
}

.por-autorizar-lista__info {
    margin: 12px 16px 16px;
    flex-shrink: 0;
}

.por-autorizar-detalle {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0 !important;
}

.por-autorizar-detalle__inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.por-autorizar-detalle__form-hidden {
    display: none !important;
}

.por-autorizar-detalle__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    min-height: 64px;
    padding: 12px 16px;
    box-sizing: border-box;
    background: var(--siith-surface);
    border-bottom: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-md) var(--siith-radius-md) 0 0;
}

.por-autorizar-detalle__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto !important;
    max-height: calc(100vh - 320px);
    max-height: calc(100dvh - 320px);
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #32266b #ede9fe;
    background: var(--siith-surface);
}

.por-autorizar-detalle__body::-webkit-scrollbar {
    width: 10px;
}

.por-autorizar-detalle__body::-webkit-scrollbar-track {
    background: #f5f3ff;
    border-radius: 8px;
}

.por-autorizar-detalle__body::-webkit-scrollbar-thumb {
    background: #32266b;
    border-radius: 8px;
    border: 2px solid #ede9fe;
}

.por-autorizar-detalle__body::-webkit-scrollbar-thumb:hover {
    background: #1e1640;
}

.por-autorizar-detalle__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.por-autorizar-detalle__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--siith-text-strong);
    line-height: 1.3;
}

.por-autorizar-detalle__actions-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.por-autorizar-detalle__menu-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    color: var(--siith-text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.siith-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 8px 0 4px;
}

.siith-stepper__item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 0 8px;
}

.siith-stepper__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14px;
    left: calc(50% + 18px);
    width: calc(100% - 36px);
    height: 2px;
    background: var(--siith-border-light);
    z-index: 0;
}

.siith-stepper__item--done:not(:last-child)::after {
    background: var(--siith-primary);
}

.siith-stepper__marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid var(--siith-border);
    background: #fff;
    color: var(--siith-text-muted);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--siith-surface);
}

.siith-stepper__item--done .siith-stepper__marker {
    border-color: var(--siith-primary);
    background: var(--siith-primary);
    color: #fff;
    box-shadow: 0 0 0 3px var(--siith-surface);
}

.siith-stepper__item--current .siith-stepper__marker {
    border-color: var(--siith-warning);
    background: var(--siith-warning-soft);
    color: var(--siith-warning);
    box-shadow: 0 0 0 3px var(--siith-surface);
}

.siith-stepper__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--siith-text-muted);
    line-height: 1.3;
}

.siith-stepper__item--done .siith-stepper__label,
.siith-stepper__item--current .siith-stepper__label {
    color: var(--siith-text-strong);
}

.por-autorizar-user-card {
    background: var(--siith-primary-soft) !important;
    border: 1px solid #ddd6fe !important;
    box-shadow: none !important;
    padding: 16px 18px !important;
}

.por-autorizar-user-card .siith-user-card__item label {
    background: none !important;
    color: var(--siith-text-muted) !important;
}

.por-autorizar-user-card .siith-user-card__item span {
    display: block;
    background: none !important;
    color: #0f172a !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* Stepper del detalle: sin recorte (overflow:hidden rompía las bolitas) */
.por-autorizar-detalle__body > .siith-stepper,
.por-autorizar-detalle__body > .por-autorizar-stepper {
    padding: 10px 0 14px;
    margin-bottom: 2px;
    overflow: visible;
}

.por-autorizar-detalle__body > .siith-stepper .siith-stepper__item {
    overflow: visible;
}

.por-autorizar-detail-card {
    padding: 18px 20px !important;
}

.por-autorizar-detail-card__title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.por-autorizar-detail-grid__value {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-sm);
    background: #fff;
    font-size: 13px;
    color: var(--siith-text-strong);
    line-height: 1.35;
}

.por-autorizar-doc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-sm);
    background: #fff;
}

.por-autorizar-adjunto-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.por-autorizar-adjunto-card__head .por-autorizar-detail-card__title {
    margin: 0;
}

.por-autorizar-doc-viewer {
    margin-top: 10px;
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-sm);
    overflow: hidden;
    background: #f8fafc;
    min-height: 420px;
}

.por-autorizar-doc-viewer__iframe {
    display: block;
    width: 100%;
    height: min(62vh, 640px);
    min-height: 420px;
    border: 0;
    background: #fff;
}

.por-autorizar-doc-viewer__fallback,
.por-autorizar-doc-viewer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 160px;
    padding: 24px 16px;
    text-align: center;
    color: var(--siith-text-muted);
    font-size: 13px;
}

.por-autorizar-doc__info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--siith-primary);
    font-size: 13px;
    font-weight: 600;
}

.por-autorizar-doc__info span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.por-autorizar-doc__view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--siith-radius-sm);
    color: var(--siith-primary);
    background: var(--siith-primary-soft);
    text-decoration: none;
    opacity: 1 !important;
}

.por-autorizar-doc__view:hover,
.por-autorizar-doc__view:focus {
    opacity: 1 !important;
    color: var(--siith-primary-dark, #211847);
    background: #ede9fe;
    text-decoration: none;
}

.por-autorizar-doc__btn,
a.por-autorizar-doc__btn {
    opacity: 1 !important;
    color: var(--siith-primary) !important;
    background: #fff !important;
    border: 1px solid var(--siith-border) !important;
    text-decoration: none !important;
    filter: none !important;
    flex-shrink: 0;
}

.por-autorizar-doc__btn:hover,
.por-autorizar-doc__btn:focus,
.por-autorizar-doc__btn:active,
a.por-autorizar-doc__btn:hover,
a.por-autorizar-doc__btn:focus,
a.por-autorizar-doc__btn:active {
    opacity: 1 !important;
    color: var(--siith-primary-dark, #211847) !important;
    background: #ede9fe !important;
    border-color: #a78bfa !important;
    text-decoration: none !important;
    filter: none !important;
}

.por-autorizar-info {
    margin-top: 4px;
}

.por-autorizar-info .siith-alert,
.por-autorizar-info.siith-alert {
    align-items: flex-start;
}

.por-autorizar-info__meta {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--siith-text-muted);
    font-weight: 500;
}

.por-autorizar-detalle > .por-autorizar-detalle__empty,
.por-autorizar-detalle > .por-autorizar-detalle__loading {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
    padding: 24px;
    text-align: center;
    color: var(--siith-text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenedor EasyUI */
.permisos-tab-panel-host {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.permisos-tab-panel-host:has(.por-autorizar-page) {
    display: flex !important;
    flex-direction: column !important;
}

.permisos-modulo [id^="visor_fn_"] .tabs-panels .panel-body:has(.por-autorizar-page) {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.por-autorizar-detalle__body .siith-card {
    margin-top: 0;
}

@media (max-width: 1100px) {
    .por-autorizar-scroll {
        overflow-y: auto;
    }

    .por-autorizar-layout {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .por-autorizar-lista {
        max-height: 280px;
    }

    .por-autorizar-detalle {
        max-height: none;
        min-height: 420px;
    }
}

/* ============================================================
   Permisos autorizados (mockup)
   ============================================================ */
.perm-autorizados-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0;
    background: var(--siith-surface-alt);
    font-family: var(--siith-font);
}

.perm-autorizados-page__header {
    flex-shrink: 0;
    padding: 20px 24px 0;
    margin-bottom: 0;
}

.perm-autorizados-page__header .siith-page-header__titulo {
    color: var(--siith-primary-dark);
}

.perm-autorizados-page > .perm-autorizados-filtros {
    flex-shrink: 0;
    margin: 16px 24px;
}

.perm-autorizados-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 24px 24px;
    box-sizing: border-box;
}

.perm-autorizados-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 16px !important;
    margin-bottom: 16px;
}

.perm-autorizados-filtros__buscar {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    color: var(--siith-text-muted);
}

.perm-autorizados-filtros__buscar input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong);
    min-width: 0;
}

.perm-autorizados-filtros__select {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong);
}

.perm-autorizados-filtros__limpiar {
    margin-left: auto;
}

.perm-autorizados-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
}

.perm-autorizados-layout > .siith-card {
    margin-top: 0 !important;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.perm-autorizados-lista {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.perm-autorizados-lista__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    min-height: 64px;
    margin: 0;
    padding: 12px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--siith-border-light);
}

.perm-autorizados-lista__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--siith-text-strong);
}

.perm-autorizados-cards {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 0;
    box-sizing: border-box;
}

.perm-autorizados-cards__loading,
.perm-autorizados-cards__empty,
.perm-autorizados-detalle__empty,
.perm-autorizados-detalle__loading {
    padding: 24px 12px;
    text-align: center;
    color: var(--siith-text-muted);
    font-size: 13px;
}

.perm-autorizados-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color var(--siith-transition), box-shadow var(--siith-transition), background var(--siith-transition);
}

.perm-autorizados-card:hover {
    border-color: #c4b5fd;
}

.perm-autorizados-card.is-selected {
    border-color: var(--siith-primary);
    background: var(--siith-primary-soft) !important;
    box-shadow: 0 0 0 3px var(--siith-primary-focus);
}

.perm-autorizados-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ede9fe;
    color: var(--siith-primary);
    flex-shrink: 0;
    border: 1px solid #ddd6fe;
}

.perm-autorizados-card.is-selected .perm-autorizados-card__icon {
    background: #ddd6fe;
    border-color: #c4b5fd;
    color: var(--siith-primary-dark);
}

.perm-autorizados-card__body,
.perm-autorizados-card__body span,
.perm-autorizados-card__body strong {
    background: none !important;
}

.perm-autorizados-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.perm-autorizados-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.perm-autorizados-card__top strong {
    font-size: 13px;
    color: var(--siith-text-strong);
}

.perm-autorizados-card__badge {
    flex-shrink: 0;
    font-size: 10px;
    padding: 2px 8px;
}

.perm-autorizados-card__meta,
.perm-autorizados-card__tipo {
    font-size: 12px;
    color: var(--siith-text-muted);
    line-height: 1.35;
}

.perm-autorizados-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px 16px;
    margin-top: 0;
    border-top: 1px solid var(--siith-border-light);
    flex-shrink: 0;
}

.perm-autorizados-pagination__btn,
.perm-autorizados-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--siith-border-light);
    border-radius: 999px;
    background: var(--siith-surface);
    color: var(--siith-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.perm-autorizados-pagination__page.is-active {
    background: var(--siith-primary);
    border-color: var(--siith-primary);
    color: #fff;
}

.perm-autorizados-pagination__btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.perm-autorizados-detalle {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.perm-autorizados-detalle__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
}

.perm-autorizados-detalle__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    min-height: 64px;
    padding: 12px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--siith-border-light);
    flex-shrink: 0;
}

.perm-autorizados-detalle__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.perm-autorizados-detalle__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--siith-text-strong);
}

.perm-autorizados-detalle__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.perm-autorizados-detalle__viewer {
    flex: 1;
    min-height: 0;
    background: #374151;
    padding: 12px;
    box-sizing: border-box;
}

.perm-autorizados-detalle__iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: none;
    border-radius: 4px;
    background: #fff;
}

.perm-autorizados-detalle > .perm-autorizados-detalle__empty,
.perm-autorizados-detalle > .perm-autorizados-detalle__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: 24px;
}

.permisos-tab-panel-host:has(.perm-autorizados-page) {
    display: flex !important;
    flex-direction: column !important;
}

.permisos-modulo [id^="visor_fn_"] .tabs-panels .panel-body:has(.perm-autorizados-page) {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

@media (max-width: 1100px) {
    .perm-autorizados-scroll {
        overflow-y: auto;
    }

    .perm-autorizados-layout {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .perm-autorizados-lista {
        max-height: 320px;
    }

    .perm-autorizados-detalle {
        max-height: none;
        min-height: 420px;
    }
}

/* ============================================================
   Solicitar anulación (mockup)
   ============================================================ */
.perm-anulacion-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0;
    background: var(--siith-surface-alt);
    font-family: var(--siith-font);
}

.perm-anulacion-page__header {
    flex-shrink: 0;
    padding: 20px 0 0;
    margin-bottom: 0;
}

.perm-anulacion-page__header .siith-page-header__titulo {
    color: var(--siith-primary-dark);
}

.perm-anulacion-scroll > .perm-anulacion-filtros {
    flex-shrink: 0;
    margin: 16px 0;
}

.perm-anulacion-scroll {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 24px 24px;
    box-sizing: border-box;
}

.perm-anulacion-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 16px !important;
}

.perm-anulacion-filtros__buscar {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    color: var(--siith-text-muted);
}

.perm-anulacion-filtros__buscar input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong);
    min-width: 0;
}

.perm-anulacion-filtros__select {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong);
}

.perm-anulacion-filtros__limpiar {
    margin-left: auto;
}

.perm-anulacion-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(280px, 360px);
    gap: 16px;
    align-items: stretch;
    min-height: 0;
}

.perm-anulacion-layout > .siith-card {
    margin-top: 0 !important;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.perm-anulacion-lista,
.perm-anulacion-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.perm-anulacion-lista__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    min-height: 64px;
    margin: 0;
    padding: 12px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--siith-border-light);
}

.perm-anulacion-lista__title,
.perm-anulacion-form__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--siith-text-strong);
}

.perm-anulacion-form__title {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 12px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--siith-border-light);
    flex-shrink: 0;
}

.perm-anulacion-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 16px;
}

.perm-anulacion-cards__loading,
.perm-anulacion-cards__empty,
.perm-anulacion-detalle__empty,
.perm-anulacion-detalle__loading {
    padding: 24px 12px;
    text-align: center;
    color: var(--siith-text-muted);
    font-size: 13px;
}

.perm-anulacion-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color var(--siith-transition), box-shadow var(--siith-transition), background var(--siith-transition);
}

.perm-anulacion-card:hover {
    border-color: #c4b5fd;
}

.perm-anulacion-card.is-selected {
    border-color: var(--siith-primary);
    background: var(--siith-primary-soft) !important;
    box-shadow: 0 0 0 3px var(--siith-primary-focus);
}

.perm-anulacion-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ede9fe;
    color: var(--siith-primary);
    flex-shrink: 0;
    border: 1px solid #ddd6fe;
}

.perm-anulacion-card.is-selected .perm-anulacion-card__icon {
    background: #ddd6fe;
    border-color: #c4b5fd;
    color: var(--siith-primary-dark);
}

.perm-anulacion-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.perm-anulacion-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.perm-anulacion-card__top strong {
    font-size: 13px;
    color: var(--siith-text-strong);
}

.perm-anulacion-card__badge {
    flex-shrink: 0;
    font-size: 10px;
    padding: 2px 8px;
}

.perm-anulacion-card__meta,
.perm-anulacion-card__tipo {
    font-size: 12px;
    color: var(--siith-text-muted);
    line-height: 1.35;
}

.perm-anulacion-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px 14px;
    margin-top: 0;
    border-top: 1px solid var(--siith-border-light);
    flex-shrink: 0;
}

.perm-anulacion-pagination__btn,
.perm-anulacion-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--siith-border-light);
    border-radius: 999px;
    background: var(--siith-surface);
    color: var(--siith-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.perm-anulacion-pagination__page.is-active {
    background: var(--siith-primary);
    border-color: var(--siith-primary);
    color: #fff;
}

.perm-anulacion-pagination__btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.perm-anulacion-detalle {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.perm-anulacion-detalle__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
}

.perm-anulacion-detalle__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    min-height: 64px;
    padding: 12px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--siith-border-light);
    flex-shrink: 0;
}

.perm-anulacion-detalle__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.perm-anulacion-detalle__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.perm-anulacion-detalle__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.perm-anulacion-detalle__viewer {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    background: #374151;
    padding: 12px;
    box-sizing: border-box;
}

.perm-anulacion-detalle__iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    border: none;
    border-radius: 4px;
    background: #fff;
}

.perm-anulacion-detalle > .perm-anulacion-detalle__empty,
.perm-anulacion-detalle > .perm-anulacion-detalle__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding: 24px;
}

.perm-anulacion-form__alert {
    color: #9a3412;
    background: #fff7ed;
    border-color: #fed7aa;
    margin: 14px 16px;
}

.perm-anulacion-resumen {
    padding: 12px 14px;
    margin: 0 16px 16px;
    border-radius: var(--siith-radius-sm);
    background: #f3f4f6;
    border: 1px solid var(--siith-border-light);
}

.perm-anulacion-resumen--empty {
    background: #f9fafb;
}

.perm-anulacion-resumen__placeholder {
    margin: 0;
    font-size: 12px;
    color: var(--siith-text-muted);
    line-height: 1.45;
}

.perm-anulacion-resumen__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perm-anulacion-resumen__list div {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 8px;
    font-size: 12px;
}

.perm-anulacion-resumen__list dt {
    margin: 0;
    color: var(--siith-text-muted);
    font-weight: 600;
}

.perm-anulacion-resumen__list dd {
    margin: 0;
    color: var(--siith-text-strong);
    font-weight: 600;
}

.perm-anulacion-form__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 16px;
}

.perm-anulacion-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.perm-anulacion-field__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.perm-anulacion-field__req {
    color: #dc2626;
}

.perm-anulacion-field__textarea {
    width: 100%;
    min-height: 110px;
    padding: 10px 12px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong);
    resize: vertical;
    box-sizing: border-box;
}

.perm-anulacion-field__textarea:focus {
    outline: none;
    border-color: var(--siith-primary);
    box-shadow: 0 0 0 3px var(--siith-primary-focus);
}

.perm-anulacion-field__textarea:disabled {
    background: #f9fafb;
    color: var(--siith-text-muted);
}

.perm-anulacion-field__counter {
    font-size: 11px;
    color: var(--siith-text-muted);
    text-align: right;
}

.perm-anulacion-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: var(--siith-text);
    line-height: 1.45;
    cursor: pointer;
}

.perm-anulacion-check input {
    margin-top: 2px;
    flex-shrink: 0;
}

.perm-anulacion-form__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.perm-anulacion-form__note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 16px 16px;
    padding-top: 12px;
    border-top: 1px solid var(--siith-border-light);
    font-size: 11px;
    color: var(--siith-text-muted);
}

.permisos-tab-panel-host:has(.perm-anulacion-page) {
    display: flex !important;
    flex-direction: column !important;
}

.permisos-tab-panel-host:has(.perm-anulacion-page) .perm-anulacion-page,
.permisos-direct-panel:has(.perm-anulacion-page) .perm-anulacion-page {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.permisos-modulo [id^="visor_fn_"] .tabs-panels .panel-body:has(.perm-anulacion-page) {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

@media (max-width: 1280px) {
    .perm-anulacion-layout {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .perm-anulacion-lista,
    .perm-anulacion-detalle,
    .perm-anulacion-form {
        max-height: none;
        min-height: 0;
    }

    .perm-anulacion-detalle {
        min-height: 420px;
    }
}

/* ============================================================
   Consulta de vacaciones (mockup)
   ============================================================ */
.consulta-vacaciones-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--siith-surface-alt);
    font-family: var(--siith-font);
}

.consulta-vacaciones-page__header {
    flex-shrink: 0;
    padding: 20px 24px 0;
    margin-bottom: 0;
}

.consulta-vacaciones-page__header .siith-page-header__titulo {
    color: var(--siith-primary-dark);
}

.consulta-vacaciones-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 24px 24px;
    box-sizing: border-box;
}

.consulta-vacaciones-empty {
    padding: 32px 24px;
    color: var(--siith-text-muted);
    font-size: 14px;
}

.consulta-vacaciones-user {
    padding: 18px 20px !important;
    margin-bottom: 16px;
    background: var(--siith-surface) !important;
}

.consulta-vacaciones-user__layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.consulta-vacaciones-user__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ede9fe;
    color: var(--siith-primary);
    border: 1px solid #ddd6fe;
    flex-shrink: 0;
}

.consulta-vacaciones-user__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 28px;
    flex: 1;
    min-width: 0;
}

.consulta-vacaciones-user__item label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--siith-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.consulta-vacaciones-user__item span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-text-strong);
    line-height: 1.4;
}

.consulta-vacaciones-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
    align-items: stretch;
}

.consulta-vacaciones-metrics > .consulta-vacaciones-metric.siith-card,
.consulta-vacaciones-metrics > .consulta-vacaciones-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 96px;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--siith-border-light) !important;
    box-shadow: var(--siith-shadow-sm) !important;
}

.consulta-vacaciones-metric--highlight {
    border: 1px solid var(--siith-primary) !important;
    box-shadow: 0 0 0 1px rgba(50, 38, 107, 0.12), var(--siith-shadow-sm) !important;
}

.consulta-vacaciones-metric__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ede9fe;
    color: var(--siith-primary);
    flex-shrink: 0;
}

.consulta-vacaciones-metric__icon--solid {
    background: var(--siith-primary);
    color: #fff;
}

.consulta-vacaciones-metric__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.consulta-vacaciones-metric__label {
    font-size: 12px;
    color: var(--siith-text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.consulta-vacaciones-metric__value {
    font-size: 12px;
    color: var(--siith-text-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.consulta-vacaciones-metric__value strong {
    font-size: 22px;
    font-weight: 700;
    color: var(--siith-primary-dark);
    letter-spacing: -0.02em;
}

.consulta-vacaciones-metric__value em {
    font-style: normal;
    font-size: 12px;
    color: var(--siith-text-muted);
    margin-left: 2px;
}

.consulta-vacaciones-movimientos {
    padding: 18px 20px !important;
}

.consulta-vacaciones-movimientos__title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.consulta-vacaciones-table-wrap {
    overflow-x: auto;
}

.consulta-vacaciones-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.consulta-vacaciones-table thead th {
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--siith-text-muted);
    border-bottom: 1px solid var(--siith-border-light);
    background: transparent;
}

.consulta-vacaciones-table tbody td {
    padding: 12px;
    color: var(--siith-text);
    border-bottom: 1px solid var(--siith-border-light);
    vertical-align: middle;
}

.consulta-vacaciones-table tbody tr:last-child td {
    border-bottom: none;
}

.consulta-vacaciones-table__loading,
.consulta-vacaciones-table__empty {
    text-align: center !important;
    color: var(--siith-text-muted) !important;
    padding: 24px 12px !important;
}

.consulta-vacaciones-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--siith-success);
}

.consulta-vacaciones-estado__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--siith-success);
    flex-shrink: 0;
}

.consulta-vacaciones-movimientos__footer {
    display: flex;
    justify-content: center;
    padding-top: 14px;
    margin-top: 4px;
}

.consulta-vacaciones-mas-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-primary);
    cursor: pointer;
}

.consulta-vacaciones-mas-link:hover {
    color: var(--siith-primary-dark);
    text-decoration: underline;
}

.consulta-vacaciones-reportes-extra {
    margin-top: 16px;
}

/* Sin resaltado al pasar el mouse en reportes de consulta vacaciones */
.consulta-vacaciones-page .consulta-vacaciones-reportes-extra table:not(.datagrid-btable) tbody tr:not(.fondos1):not(.vacaciones-cab-principal):not(.vacaciones-cab-secundaria):hover > td,
.consulta-vacaciones-page .consulta-vacaciones-reportes-extra .datagrid-row-over,
.consulta-vacaciones-page .consulta-vacaciones-reportes-extra .datagrid-row-over td {
    background: #fff !important;
}

.consulta-vacaciones-page .consulta-vacaciones-reportes-extra table:not(.datagrid-btable) tbody tr:not(.fondos1):not(.vacaciones-cab-principal):not(.vacaciones-cab-secundaria):nth-child(even):hover > td {
    background: var(--tabla-row-alt, #f7f8fa) !important;
}

/* Cabeceras del reporte: color fijo (sin hover) */
.consulta-vacaciones-page .consulta-vacaciones-reportes-extra tr.vacaciones-cab-principal:hover > td,
.consulta-vacaciones-page .consulta-vacaciones-reportes-extra tr.vacaciones-cab-principal > td {
    background-color: var(--siith-primary, #32266b) !important;
    color: #fff !important;
}

.consulta-vacaciones-page .consulta-vacaciones-reportes-extra tr.vacaciones-cab-secundaria:hover > td,
.consulta-vacaciones-page .consulta-vacaciones-reportes-extra tr.vacaciones-cab-secundaria > td {
    background-color: var(--siith-primary-mid, #4a3a8a) !important;
    color: #fff !important;
}

.consulta-vacaciones-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
}

.permisos-center-region {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.permisos-direct-panel {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}

.permisos-direct-panel.is-visible {
    display: block !important;
}

.permisos-direct-iframe-wrap,
.permisos-direct-iframe-wrap iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    overflow: hidden;
}

.permisos-center-region > .easyui-tabs {
    width: 100%;
    height: 100%;
}

.permisos-modulo .layout-panel-center .permisos-center-region {
    height: 100%;
    min-height: 0;
}

.permisos-tab-panel-host:has(.consulta-vacaciones-page) {
    display: flex !important;
    flex-direction: column !important;
}

.permisos-tab-panel-host:has(.consulta-vacaciones-page) .consulta-vacaciones-page {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.permisos-modulo .consulta-vacaciones-page > .consulta-vacaciones-page__header,
.permisos-direct-panel .consulta-vacaciones-page > .consulta-vacaciones-page__header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.permisos-modulo [id^="visor_fn_"] .tabs-panels .panel-body:has(.consulta-vacaciones-page) {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.consulta-vacaciones-reportes-extra .panel-body {
    max-height: min(420px, 45vh);
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

.consulta-vacaciones-reportes-extra .consulta-vacaciones {
    overflow-x: auto;
}

.cv-reporte-paginacion.perm-autorizados-pagination {
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 8px;
    padding: 10px 8px 4px;
    border-top: 1px solid var(--siith-border-light);
}

.cv-reporte-paginacion__info {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.cv-reporte-paginacion__controls {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.cv-reporte-paginacion__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    color: var(--siith-text-muted);
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 1100px) {
    .consulta-vacaciones-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .consulta-vacaciones-user__grid {
        grid-template-columns: 1fr;
    }

    .consulta-vacaciones-metrics {
        grid-template-columns: 1fr;
    }

    .consulta-vacaciones-scroll {
        padding: 12px 16px 20px;
    }
}

/* ============================================================
   Reporte de permisos (mockup)
   ============================================================ */
.rp-permisos-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--siith-surface-alt);
    font-family: var(--siith-font);
}

.rp-permisos-page__header {
    flex-shrink: 0;
    padding: 20px 24px 0;
    margin-bottom: 0;
}

.rp-permisos-page__header .siith-page-header__titulo {
    color: var(--siith-primary-dark);
}

.rp-permisos-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.rp-permisos-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.rp-permisos-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 24px 24px;
    box-sizing: border-box;
}

.rp-permisos-empty {
    padding: 32px 24px;
    color: var(--siith-text-muted);
}

.rp-permisos-resumen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 24px;
    padding: 16px 20px !important;
    margin-bottom: 16px;
    background: #f8f7fc !important;
}

.rp-permisos-resumen__item label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--siith-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.rp-permisos-resumen__item span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-text-strong);
    line-height: 1.4;
}

.rp-permisos-filtros {
    padding: 18px 20px !important;
    margin-bottom: 16px;
}

.rp-permisos-filtros__title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--siith-primary-dark);
}

.rp-permisos-filtros__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 14px;
}

.rp-permisos-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rp-permisos-field--buscar {
    grid-column: span 2;
}

.rp-permisos-field > span {
    font-size: 12px;
    font-weight: 600;
    color: var(--siith-label);
    text-transform: none;
    letter-spacing: normal;
}

.rp-permisos-field input,
.rp-permisos-field select {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong);
    box-sizing: border-box;
}

/* Combos nativos unificados: una sola flecha (sin flechas dobles del navegador) */
select.siith-select,
.rm-cal-field > select,
.rp-permisos-field > select,
.siith-form-field select,
.por-autorizar-filtros__select,
.perm-autorizados-filtros__select,
.perm-anulacion-filtros__select,
.rm-cal-pagesize select,
.rp-permisos-footer__pagesize select,
.cis-filtros__field select,
.ath-filtros__field select,
.perm-actividades-field select,
.perm-teletrabajo-field select,
.permisos-cabecera-usuario__rol-select-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    min-height: 40px;
    padding: 0 36px 0 12px !important;
    border: 1px solid var(--siith-border, #d5d0e8);
    border-radius: var(--siith-radius-sm, 8px);
    background-color: var(--siith-surface, #fff) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2340327e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong, #2c2548);
    box-sizing: border-box;
    cursor: pointer;
}

select.siith-select:focus,
.rm-cal-field > select:focus,
.rp-permisos-field > select:focus,
.siith-form-field select:focus,
.por-autorizar-filtros__select:focus,
.perm-autorizados-filtros__select:focus,
.perm-anulacion-filtros__select:focus,
.cis-filtros__field select:focus,
.ath-filtros__field select:focus,
.perm-actividades-field select:focus {
    outline: none;
    border-color: var(--siith-primary, #40327e);
    box-shadow: 0 0 0 3px var(--siith-primary-focus, rgba(64, 50, 126, 0.16));
}

select.siith-select::-ms-expand,
.rm-cal-field > select::-ms-expand,
.rp-permisos-field > select::-ms-expand,
.siith-form-field select::-ms-expand {
    display: none;
}

.rp-permisos-field input.rp-permisos-fecha {
    min-width: 160px;
    color-scheme: light;
}

/* Calendario nativo unificado (mismo modelo que Reporte de permisos) */
input.siith-fecha,
input.rp-permisos-fecha,
input[type="date"].permisos-datepicker,
input[type="date"].fechasalida,
input[type="date"].fechallegada,
input[type="date"].fechasalida_especial,
input[type="date"].fechallegada_especial {
    min-height: 40px;
    min-width: 160px;
    padding: 0 12px;
    border: 1px solid var(--siith-border, #d5d0e8);
    border-radius: var(--siith-radius-sm, 8px);
    background: var(--siith-surface, #fff);
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong, #2c2548);
    box-sizing: border-box;
    color-scheme: light;
    text-transform: none !important;
}

input.siith-fecha:focus,
input.rp-permisos-fecha:focus,
input[type="date"].permisos-datepicker:focus {
    outline: none;
    border-color: var(--siith-calendar, #40327e);
    box-shadow: 0 0 0 3px var(--siith-calendar-focus, rgba(64, 50, 126, 0.16));
}

input.siith-fecha,
input.rp-permisos-fecha,
input[type="date"].permisos-datepicker,
input[type="date"].fechasalida,
input[type="date"].fechallegada,
input[type="date"].fechasalida_especial,
input[type="date"].fechallegada_especial,
input[type="date"] {
    accent-color: var(--siith-calendar, #40327e);
    color-scheme: light;
}

/* Estilos ligeros para inputs de hora (text + popup propio) */
.permisos-solicitud-field--hora-inicio input,
.permisos-solicitud-field--hora-fin input,
#campo_ingreso_permisos_9,
#campo_ingreso_permisos_11,
#campo_hora_inicio_timbraje,
#campo_hora_fin_timbraje,
input.siith-hora-input {
    min-height: 40px;
    text-transform: none !important;
    color-scheme: light;
    cursor: text !important;
}

/* Popup propio de horas / minutos */
.siith-hora-popup,
#siith-hora-popup {
    position: fixed !important;
    z-index: 2147483000 !important;
    min-width: 300px;
    max-width: 92vw;
    background: #ffffff !important;
    border: 1px solid var(--siith-border, #cbd5e1) !important;
    border-radius: var(--siith-radius-md, 10px) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-family: var(--siith-font, inherit);
    display: none !important;
}

.siith-hora-popup--open,
#siith-hora-popup.siith-hora-popup--open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.siith-hora-popup__cols {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.siith-hora-popup__col {
    flex: 1 1 50%;
    min-width: 130px;
    max-height: 280px;
    overflow: auto;
    background: #fff;
}

.siith-hora-popup__col--min,
.siith-hora-popup__col + .siith-hora-popup__col {
    border-left: 1px solid var(--siith-border-light, #e2e8f0);
}

.siith-hora-popup__title {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--siith-calendar, #40327e) !important;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    padding: 8px 6px;
}

.siith-hora-popup__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
}

.siith-hora-popup__cell {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    background: #f8fafc;
    color: var(--siith-text-strong, #0f172a);
    border-radius: 6px;
    min-height: 34px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}

.siith-hora-popup__cell:hover {
    background: var(--siith-calendar-soft, #f1eef9);
    border-color: rgba(64, 50, 126, 0.25);
}

.siith-hora-popup__cell.is-active {
    background: var(--siith-calendar, #40327e) !important;
    color: #fff !important;
    border-color: var(--siith-calendar, #40327e) !important;
}

.siith-hora-popup__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--siith-border-light, #e2e8f0);
    background: #f8fafc;
}

.siith-hora-popup__stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.siith-hora-popup__stepper-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    min-width: 28px;
}

.siith-hora-popup__step {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border: 1px solid var(--siith-border, #d5d0e8);
    border-radius: 6px;
    background: #fff;
    color: var(--siith-calendar, #40327e);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.siith-hora-popup__step:hover {
    background: var(--siith-calendar-soft, #f1eef9);
}

.siith-hora-popup__step-value {
    min-width: 34px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--siith-text-strong, #2c2548);
}

.siith-hora-popup__grid--minutes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Popup propio de fechas (mismo color #40327e que horas) */
.siith-fecha-popup,
#siith-fecha-popup {
    position: fixed !important;
    z-index: 2147483000 !important;
    width: 300px;
    max-width: 92vw;
    background: #ffffff !important;
    border: 1px solid var(--siith-border, #cbd5e1) !important;
    border-radius: var(--siith-radius-md, 10px) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
    overflow: hidden !important;
    font-family: var(--siith-font, inherit);
    display: none !important;
}

.siith-fecha-popup--open,
#siith-fecha-popup.siith-fecha-popup--open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.siith-fecha-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--siith-calendar, #40327e) !important;
    color: #fff !important;
    padding: 8px 10px;
    min-height: 40px;
}

.siith-fecha-popup__title {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.siith-fecha-popup__nav {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.siith-fecha-popup__nav:hover {
    background: rgba(255, 255, 255, 0.22);
}

.siith-fecha-popup__weekdays,
.siith-fecha-popup__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    padding: 8px 10px;
}

.siith-fecha-popup__weekdays {
    padding-bottom: 0;
}

.siith-fecha-popup__weekdays span {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--siith-text-muted, #64748b);
    text-transform: uppercase;
    padding: 4px 0;
}

.siith-fecha-popup__day {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    background: transparent;
    min-height: 34px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-text-strong, #0f172a);
    cursor: pointer;
}

.siith-fecha-popup__day.is-empty {
    visibility: hidden;
    pointer-events: none;
}

.siith-fecha-popup__day:hover:not(.is-disabled):not(.is-empty) {
    background: var(--siith-calendar-soft, #f1eef9);
    color: var(--siith-calendar, #40327e);
}

.siith-fecha-popup__day.is-today {
    border-color: var(--siith-calendar, #40327e);
    color: var(--siith-calendar, #40327e);
}

.siith-fecha-popup__day.is-active {
    background: var(--siith-calendar, #40327e) !important;
    color: #fff !important;
    border-color: var(--siith-calendar, #40327e) !important;
}

.siith-fecha-popup__day.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.siith-fecha-control {
    position: relative !important;
}

.siith-fecha-btn {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2340327e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    cursor: pointer !important;
    z-index: 3 !important;
    padding: 0 !important;
}

.siith-fecha-btn:hover {
    background-color: var(--siith-calendar-soft, #f1eef9) !important;
}

input.siith-fecha,
input.rp-permisos-fecha {
    padding-right: 40px !important;
    cursor: text !important;
    background-color: #fff !important;
}

.rp-permisos-field .siith-fecha-control,
.rm-cal-field .siith-fecha-control,
.siith-form-field .siith-fecha-control {
    position: relative;
    width: 100%;
}

.rp-permisos-field .siith-fecha-control > input.siith-fecha,
.rp-permisos-field .siith-fecha-control > input.rp-permisos-fecha,
.rp-permisos-field > input.siith-fecha,
.rp-permisos-field > input.rp-permisos-fecha,
.rm-cal-field .siith-fecha-control > input.siith-fecha,
.rm-cal-field .siith-fecha-control > input.rp-permisos-fecha,
.rm-cal-field > input.siith-fecha,
.rm-cal-field > input.rp-permisos-fecha,
.siith-form-field .siith-fecha-control > input.siith-fecha,
.siith-form-field .siith-fecha-control > input.rp-permisos-fecha,
.siith-form-field > input.siith-fecha,
.siith-form-field > input.rp-permisos-fecha {
    width: 100%;
    min-height: 40px;
    padding: 0 40px 0 12px !important;
    border: 1px solid var(--siith-border, #d5d0e8);
    border-radius: var(--siith-radius-sm, 8px);
    background: var(--siith-surface, #fff);
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong, #2c2548);
    box-sizing: border-box;
    text-transform: none !important;
}

input[type="date"].siith-fecha::-webkit-calendar-picker-indicator,
input[type="date"].rp-permisos-fecha::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 40px;
    height: 100%;
    cursor: pointer;
}

.rp-permisos-field__search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    color: var(--siith-text-muted);
}

.rp-permisos-field__search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    min-height: 38px;
    padding: 0;
}

.rp-permisos-filtros__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.rp-permisos-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
    align-items: stretch;
}

.rp-permisos-metrics > .rp-permisos-metric.siith-card,
.rp-permisos-metrics > .rp-permisos-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 96px;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.rp-permisos-metric__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ede9fe;
    color: var(--siith-primary);
    flex-shrink: 0;
}

.rp-permisos-metric__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.rp-permisos-metric__label {
    display: block;
    font-size: 12px;
    color: var(--siith-text-muted);
    margin-bottom: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-permisos-metric__value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--siith-primary-dark);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-permisos-tabla {
    padding: 0 !important;
    overflow: hidden;
}

.rp-permisos-tabla__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--siith-border-light);
}

.rp-permisos-tabla__head > div:first-child {
    min-width: 0;
}

.rp-permisos-tabla__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--siith-primary-dark);
}

.rp-permisos-tabla__meta-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.rp-permisos-tabla__meta {
    font-size: 12px;
    color: var(--siith-text-muted);
    white-space: nowrap;
}

.rp-permisos-table-wrap {
    overflow: auto;
}

.rp-permisos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.rp-permisos-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--siith-primary);
    border-bottom: 1px solid var(--siith-border-light);
    background: #faf9ff;
    white-space: nowrap;
}

.rp-permisos-table tbody td {
    padding: 12px 14px;
    color: var(--siith-text);
    border-bottom: 1px solid var(--siith-border-light);
    vertical-align: middle;
}

.rp-permisos-table tbody tr:nth-child(even) td {
    background: #f8f7fc;
}

.rp-permisos-table__loading,
.rp-permisos-table__empty {
    text-align: center;
    color: var(--siith-text-muted);
    padding: 28px 16px !important;
}

.rp-permisos-tipo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rp-permisos-tipo__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}

.rp-permisos-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--siith-border-light);
}

.rp-permisos-footer__info {
    font-size: 12px;
    color: var(--siith-text-muted);
}

.rp-permisos-footer__controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rp-permisos-footer__pagesize select {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    font: inherit;
    font-size: 12px;
}

.rp-permisos-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rp-permisos-pagination__btn,
.rp-permisos-pagination__page {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    color: var(--siith-text-strong);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.rp-permisos-pagination__page.is-active {
    background: var(--siith-primary);
    border-color: var(--siith-primary);
    color: #fff;
}

.rp-permisos-pagination__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.permisos-tab-panel-host:has(.rp-permisos-page) {
    display: flex !important;
    flex-direction: column !important;
}

.permisos-direct-panel.is-visible:has(.rp-permisos-page) {
    display: flex !important;
    flex-direction: column !important;
}

.permisos-tab-panel-host:has(.rp-permisos-page) .rp-permisos-page,
.permisos-direct-panel:has(.rp-permisos-page) .rp-permisos-page {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    margin: 0 !important;
}

/* El título ya está en la cabecera superior, igual que el resto de menús */
.permisos-modulo .rp-permisos-page > .rp-permisos-page__header,
.permisos-direct-panel .rp-permisos-page > .rp-permisos-page__header,
#cg-permisos-app > .siith-page-header,
#sv-saldos-app > .siith-page-header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.permisos-modulo [id^="visor_fn_"] .tabs-panels .panel-body:has(.rp-permisos-page) {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

@media print {
    .rp-permisos-page__actions,
    .rp-permisos-filtros,
    .rp-permisos-footer,
    .layout-panel-west,
    .tabs-header,
    .permisos-modulo .tabs-tool {
        display: none !important;
    }

    .rp-permisos-page,
    .rp-permisos-scroll {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

@media (max-width: 1100px) {
    .rp-permisos-filtros__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rp-permisos-field--buscar {
        grid-column: span 2;
    }

    .rp-permisos-metrics,
    .rp-permisos-resumen {
        grid-template-columns: 1fr;
    }

    .rp-permisos-page__header {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .rp-permisos-filtros__grid {
        grid-template-columns: 1fr;
    }

    .rp-permisos-field--buscar {
        grid-column: span 1;
    }

    .rp-permisos-scroll {
        padding: 12px 16px 20px;
    }
}

/* ============================================================
   Calendarios — jQuery UI datepicker, timepicker, EasyUI calendar
   ============================================================ */
.ui-datepicker,
.calendar {
    font-family: var(--siith-font) !important;
    font-size: 13px !important;
    color: var(--siith-text) !important;
    background: var(--siith-surface) !important;
    border: 1px solid var(--siith-border-light) !important;
    border-radius: var(--siith-radius-md) !important;
    box-shadow: var(--siith-shadow) !important;
    z-index: 999999 !important;
}

/* Estilos SIITH del popup de horas. NO forzar display:!important:
   eso pelea con show/hide del plugin y deja el popup invisible o trabado. */
#ui-timepicker-div,
.siith-timepicker#ui-timepicker-div,
#ui-timepicker-div.siith-timepicker--open,
.siith-timepicker#ui-timepicker-div.siith-timepicker--open {
    font-family: var(--siith-font) !important;
    font-size: 13px !important;
    color: var(--siith-text-strong) !important;
    background: #ffffff !important;
    border: 1px solid var(--siith-border) !important;
    border-radius: var(--siith-radius-md) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
    z-index: 999999 !important;
    width: max-content !important;
    min-width: 34em !important;
    max-width: none !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#ui-timepicker-div.siith-timepicker--open,
.siith-timepicker#ui-timepicker-div.siith-timepicker--open {
    position: fixed !important;
}

.ui-datepicker {
    width: 18.5em !important;
    padding: 0 !important;
    overflow: hidden;
}

.ui-datepicker .ui-datepicker-header,
.calendar-header {
    background: var(--siith-calendar, #40327e) !important;
    border: none !important;
    border-radius: var(--siith-radius-md) var(--siith-radius-md) 0 0 !important;
    color: #fff !important;
    padding: 8px 34px !important;
    margin: 0 !important;
    min-height: 38px;
}

.ui-datepicker .ui-datepicker-title,
.calendar-title {
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    line-height: 1.5 !important;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year,
.calendar-menu-month,
.calendar-menu-year {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: var(--siith-radius-sm) !important;
    color: var(--siith-calendar-dark, #322663) !important;
    font-family: var(--siith-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    margin: 0 2px !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.calendar-prev,
.calendar-next {
    top: 50% !important;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    height: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    cursor: pointer;
    transition: background var(--siith-transition), border-color var(--siith-transition);
}

.ui-datepicker .ui-datepicker-prev {
    left: 8px !important;
}

.ui-datepicker .ui-datepicker-next {
    right: 8px !important;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover,
.calendar-prev:hover,
.calendar-next:hover {
    top: 50% !important;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
    background: none !important;
    background-image: none !important;
    text-indent: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    overflow: visible !important;
}

.ui-datepicker .ui-datepicker-prev span::before {
    content: "‹";
}

.ui-datepicker .ui-datepicker-next span::before {
    content: "›";
}

.ui-datepicker table,
.calendar-body table {
    width: calc(100% - 16px) !important;
    margin: 8px auto 10px !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
}

.ui-datepicker th,
.calendar-day-header {
    padding: 6px 2px !important;
    color: var(--siith-text-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none !important;
    background: transparent !important;
}

.ui-datepicker td,
.calendar-day {
    border: none !important;
    padding: 1px !important;
    background: transparent !important;
}

.ui-datepicker td span,
.ui-datepicker td a,
.calendar-day,
.calendar-body td span,
.calendar-body td a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 2.15em !important;
    height: 2.15em !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--siith-text) !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: background var(--siith-transition), color var(--siith-transition), border-color var(--siith-transition);
}

.ui-datepicker td a:hover,
.ui-datepicker .ui-state-hover,
.calendar-day:hover,
.calendar-body td a:hover {
    background: var(--siith-calendar-soft, #f1eef9) !important;
    color: var(--siith-calendar, #40327e) !important;
    border-color: rgba(64, 50, 126, 0.16) !important;
}

.ui-datepicker .ui-state-active,
.ui-datepicker td .ui-state-active,
.calendar-selected,
.calendar-body td.calendar-selected span,
.calendar-body td.calendar-selected a {
    background: var(--siith-calendar, #40327e) !important;
    color: #fff !important;
    border-color: var(--siith-calendar, #40327e) !important;
    font-weight: 700 !important;
}

.ui-datepicker .ui-state-highlight,
.ui-datepicker td .ui-state-highlight,
.calendar-today,
.calendar-body td.calendar-today span,
.calendar-body td.calendar-today a {
    background: #fff !important;
    color: var(--siith-calendar, #40327e) !important;
    border-color: var(--siith-calendar, #40327e) !important;
    box-shadow: inset 0 0 0 1px rgba(64, 50, 126, 0.18);
    font-weight: 700 !important;
}

.ui-datepicker .ui-state-disabled,
.ui-datepicker .ui-state-disabled span,
.calendar-disabled,
.calendar-other-month {
    opacity: 0.38 !important;
}

.ui-datepicker .ui-datepicker-other-month .ui-state-default {
    color: var(--siith-text-muted) !important;
}

.ui-datepicker .ui-datepicker-buttonpane,
.ui-timepicker .ui-timepicker-buttonpane {
    border-top: 1px solid var(--siith-border-light) !important;
    background: var(--siith-surface-alt) !important;
    margin: 0 !important;
    padding: 8px 10px !important;
}

.ui-datepicker .ui-datepicker-buttonpane button,
.ui-timepicker .ui-timepicker-buttonpane button {
    background: var(--siith-surface) !important;
    border: 1px solid var(--siith-border) !important;
    border-radius: var(--siith-radius-sm) !important;
    color: var(--siith-calendar, #40327e) !important;
    font-family: var(--siith-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    margin: 0 4px !important;
    cursor: pointer;
    transition: background var(--siith-transition), border-color var(--siith-transition);
}

.ui-datepicker .ui-datepicker-buttonpane button:hover,
.ui-timepicker .ui-timepicker-buttonpane button:hover {
    background: var(--siith-calendar-soft, #f1eef9) !important;
    border-color: rgba(64, 50, 126, 0.28) !important;
}

.ui-datepicker-multi .ui-datepicker-group {
    border-right: 1px solid var(--siith-border-light);
}

.ui-datepicker-multi .ui-datepicker-group-last {
    border-right: none;
}

/* Timepicker — alineado al datepicker SIITH (solo cuando está abierto) */
#ui-timepicker-div.siith-timepicker--open.ui-helper-clearfix,
.siith-timepicker#ui-timepicker-div.siith-timepicker--open.ui-helper-clearfix {
    padding: 0 !important;
    border: none !important;
    background: #ffffff !important;
    width: max-content !important;
    min-width: 34em !important;
    overflow: visible !important;
    opacity: 1 !important;
}

.ui-timepicker-table {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    background: #ffffff !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
}

.ui-timepicker-table > tbody > tr > td {
    padding: 0 !important;
    vertical-align: top;
    border: none !important;
    width: auto !important;
}

.ui-timepicker-table > tbody > tr > td.ui-timepicker-hours,
.ui-timepicker-table > tbody > tr > td.ui-timepicker-minutes {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap;
}

.ui-timepicker-hours,
.ui-timepicker-minutes {
    padding: 0 !important;
    width: auto !important;
    white-space: nowrap;
    background: #ffffff !important;
}

.ui-timepicker-title,
.ui-timepicker .ui-timepicker-title.ui-widget-header {
    background: var(--siith-calendar, #40327e) !important;
    border: none !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 6px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

.ui-timepicker-hours .ui-timepicker-title {
    border-radius: var(--siith-radius-md) 0 0 0 !important;
}

.ui-timepicker-minutes .ui-timepicker-title {
    border-radius: 0 var(--siith-radius-md) 0 0 !important;
}

.ui-timepicker-hours:only-child .ui-timepicker-title,
.ui-timepicker-minutes:only-child .ui-timepicker-title {
    border-radius: var(--siith-radius-md) var(--siith-radius-md) 0 0 !important;
}

.ui-timepicker-table table.ui-timepicker {
    width: auto !important;
    margin: 8px 10px 10px !important;
    border-collapse: separate !important;
    border-spacing: 3px !important;
    font-size: 13px !important;
}

.ui-timepicker-table th.periods {
    padding: 4px 2px !important;
    width: auto !important;
    color: var(--siith-text-strong) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none !important;
    background: #ffffff !important;
}

.ui-timepicker-table table.ui-timepicker td {
    padding: 1px !important;
    width: 2.15em !important;
    border: none !important;
    background: #ffffff !important;
}

.ui-timepicker-table table.ui-timepicker td a,
.ui-timepicker-table table.ui-timepicker td span,
.ui-timepicker-table .ui-timepicker-hour-cell a,
.ui-timepicker-table .ui-timepicker-minute-cell a,
.ui-timepicker-table .ui-timepicker-hour-cell span,
.ui-timepicker-table .ui-timepicker-minute-cell span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 2.15em !important;
    height: 2.15em !important;
    min-width: 2.15em !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 1px solid var(--siith-border-light) !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    transition: background var(--siith-transition), color var(--siith-transition), border-color var(--siith-transition);
}

.ui-timepicker-table table.ui-timepicker td a:hover,
.ui-timepicker-table .ui-state-hover {
    background: var(--siith-calendar-soft, #f1eef9) !important;
    color: var(--siith-calendar, #40327e) !important;
    border-color: rgba(64, 50, 126, 0.16) !important;
}

.ui-timepicker-table table.ui-timepicker td .ui-state-active,
.ui-timepicker-table .ui-state-active,
.ui-timepicker-table td .ui-state-active {
    background: var(--siith-calendar, #40327e) !important;
    color: #fff !important;
    border-color: var(--siith-calendar, #40327e) !important;
    font-weight: 700 !important;
}

.ui-timepicker .ui-timepicker-buttonpane {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

.ui-timepicker .ui-timepicker-close,
.ui-timepicker .ui-timepicker-now,
.ui-timepicker .ui-timepicker-deselect {
    display: none !important;
}

.ui-timepicker .ui-timepicker-buttonpane button {
    float: none !important;
    display: inline-flex !important;
    background: var(--siith-surface) !important;
    border: 1px solid var(--siith-border) !important;
    border-radius: var(--siith-radius-sm) !important;
    color: var(--siith-calendar, #40327e) !important;
    font-family: var(--siith-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    margin: 0 4px 0 0 !important;
    cursor: pointer;
    transition: background var(--siith-transition), border-color var(--siith-transition);
}

.ui-timepicker .ui-timepicker-buttonpane button:hover {
    background: var(--siith-primary-soft) !important;
    border-color: rgba(50, 38, 107, 0.25) !important;
}

.ui-timepicker .ui-timepicker-close {
    float: right !important;
    margin-right: 0 !important;
}

/* EasyUI calendar popup (datebox) */
.datebox-calendar-inner .calendar {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.calendar-menu {
    border-radius: var(--siith-radius-md) !important;
    border: 1px solid var(--siith-border-light) !important;
    box-shadow: var(--siith-shadow) !important;
    overflow: hidden;
}

.calendar-sunday {
    color: #dc2626 !important;
}

/* Campos de fecha con icono */
.permisos-modulo input.hasDatepicker,
.login-page input.hasDatepicker,
.permisos-pagina-standalone input.hasDatepicker {
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2340327e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 18px 18px !important;
}

.permisos-modulo input.hasTimepicker,
.login-page input.hasTimepicker,
.permisos-pagina-standalone input.hasTimepicker {
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2340327e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 18px 18px !important;
}

.permisos-modulo input.hasDatepicker:focus,
.login-page input.hasDatepicker:focus,
.permisos-pagina-standalone input.hasDatepicker:focus,
.permisos-modulo input.hasTimepicker:focus,
.login-page input.hasTimepicker:focus,
.permisos-pagina-standalone input.hasTimepicker:focus {
    border-color: var(--siith-calendar, #40327e) !important;
    box-shadow: 0 0 0 3px var(--siith-calendar-focus, rgba(64, 50, 126, 0.16)) !important;
}

/* Altura completa dentro de la pestaña Permisos del SIITH */
#tabs_principal .tabs-panel .panel-body:has(.permisos-shell),
#tabs_principal .tabs-panel .panel-body:has(.permisos-modulo) {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#tabs_principal .tabs-panel:has(.permisos-shell) {
    overflow: hidden;
}

/* Backdrop menú móvil */
.permisos-shell-backdrop {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 115;
    background: rgba(15, 23, 42, 0.45);
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ===== Shell responsive: monitores y dispositivos ===== */
@media (max-width: 1400px) {
    :root {
        --siith-sidebar-width: clamp(260px, 22vw, 320px);
    }
}

@media (max-width: 1200px) {
    :root {
        --siith-sidebar-width: clamp(240px, 26vw, 300px);
    }

    .permisos-cabecera-usuario__acciones {
        max-width: min(52vw, 560px);
        gap: 10px;
    }

    .permisos-cabecera-usuario__rol-select {
        min-width: 150px;
    }

    .permisos-cabecera-usuario__usuario {
        max-width: 240px;
    }
}

@media (max-width: 960px) {
    :root {
        --siith-sidebar-width: min(86vw, 300px);
    }

    .permisos-topbar {
        left: 0 !important;
        right: 0;
        height: auto;
        min-height: max(52px, env(safe-area-inset-top, 0px) + 48px);
        max-height: min(30vh, 128px);
        z-index: 130;
    }

    .permisos-cabecera-usuario {
        flex-wrap: nowrap;
        height: auto;
        min-height: 52px;
        max-height: none;
        padding: 8px 12px;
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
        gap: 8px;
    }

    .permisos-cabecera-usuario__titulo {
        font-size: clamp(0.84rem, 2.4vw, 0.95rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .permisos-cabecera-usuario__subtitulo {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .permisos-cabecera-usuario__acciones {
        max-width: none;
        flex: 0 0 auto;
        gap: 8px;
    }

    .permisos-cabecera-usuario__unidad {
        display: none;
    }

    .permisos-cabecera-usuario__rol-select {
        min-width: 120px;
        max-width: 150px;
    }

    .permisos-cabecera-usuario__usuario {
        max-width: 140px;
    }

    .permisos-cabecera-usuario__salir {
        width: 34px;
        height: 34px;
        padding: 0;
    }

    .permisos-cabecera-usuario__nombre {
        font-size: 12px;
    }

    /* Menú móvil propio (reemplaza EasyUI/FancyTree en teléfono) */
    .permisos-mobile-drawer {
        display: none !important;
    }

    .permisos-shell.permisos-shell--mobile .permisos-mobile-drawer {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        /* Debajo de la topbar para que no tape el primer ítem (Solicitud de Permiso) */
        top: var(--siith-topbar-height, var(--permisos-topbar-offset, 56px));
        left: 0;
        width: min(86vw, 300px);
        height: calc(100% - var(--siith-topbar-height, var(--permisos-topbar-offset, 56px)));
        height: calc(100dvh - var(--siith-topbar-height, var(--permisos-topbar-offset, 56px)));
        z-index: 10050 !important;
        background: linear-gradient(180deg, var(--siith-primary-dark) 0%, #2a1f5c 45%, var(--siith-primary) 100%);
        box-shadow: 8px 0 28px rgba(15, 23, 42, 0.28);
        padding: 0 0 env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
        overflow: hidden;
        transition: left 0.2s ease, opacity 0.2s ease, top 0.2s ease, height 0.2s ease;
        opacity: 1;
        pointer-events: auto !important;
    }

    .permisos-shell.permisos-shell--mobile.permisos-shell--sidebar-collapsed .permisos-mobile-drawer {
        left: calc(-1 * min(86vw, 300px) - 24px);
        opacity: 0;
        pointer-events: none !important;
    }

    .permisos-mobile-drawer__brand {
        display: none !important;
    }

    .permisos-mobile-drawer__nav {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 8px 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .permisos-mobile-drawer .permisos-sidebar-copy {
        margin: 4px 8px 8px;
    }

    .permisos-mobile-drawer__link {
        display: flex !important;
        align-items: center;
        min-height: 48px;
        padding: 10px 14px !important;
        border-radius: 8px;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 600;
        line-height: 1.3;
        background: transparent;
        border-left: 3px solid transparent;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
        touch-action: manipulation;
        cursor: pointer;
    }

    .permisos-mobile-drawer__link:active,
    .permisos-mobile-drawer__link:hover {
        background: rgba(255, 255, 255, 0.12);
        border-left-color: #fff;
    }

    .permisos-shell:not(.permisos-shell--sidebar-collapsed) .permisos-shell-backdrop {
        display: block !important;
        position: fixed !important;
        top: var(--siith-topbar-height, var(--permisos-topbar-offset, 56px)) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 10040 !important;
        pointer-events: auto !important;
    }

    /* EasyUI west oculto en móvil */
    .permisos-shell.permisos-shell--mobile .permisos-perfil-panel.is-active .layout-panel-west {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        transform: none !important;
    }

    .permisos-shell.permisos-shell--mobile .permisos-perfil-panel.is-active .layout-panel-center {
        left: 0 !important;
        top: var(--siith-topbar-height, var(--permisos-topbar-offset, 56px)) !important;
        width: 100% !important;
        height: calc(100% - var(--siith-topbar-height, var(--permisos-topbar-offset, 56px))) !important;
        z-index: 100 !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    .permisos-topbar {
        z-index: 10060 !important;
    }

    .permisos-shell.permisos-shell--mobile .permisos-direct-panel.is-visible {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 100% !important;
        min-height: 240px !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        position: relative;
        z-index: 1;
    }

    .permisos-shell.permisos-shell--mobile .layout-panel-center > .panel,
    .permisos-shell.permisos-shell--mobile .layout-panel-center > .panel > .panel-body,
    .permisos-shell.permisos-shell--mobile .permisos-center-region {
        height: 100% !important;
        min-height: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        display: block !important;
        visibility: visible !important;
    }

    .permisos-sidebar-logo {
        height: var(--siith-topbar-height, 56px);
        min-height: var(--siith-topbar-height, 56px);
        max-height: var(--siith-topbar-height, 56px);
    }

    .permisos-sidebar-logo .siith-logo-institucional {
        max-height: min(40px, calc(var(--siith-topbar-height, 56px) - 12px));
        max-width: min(200px, 88%);
    }

    .permisos-modulo .layout-panel-center .panel-body {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .permisos-modulo .layout-panel-center iframe {
        width: 100% !important;
        min-height: 100%;
    }

    .permisos-modulo .datagrid-view,
    .permisos-modulo .consulta-vacaciones,
    .permisos-modulo table[id^="table_"],
    .permisos-modulo table[id^="tbl_"] {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .permisos-cabecera-usuario {
        padding: 8px 10px;
        padding-left: max(10px, env(safe-area-inset-left, 0px));
        padding-right: max(10px, env(safe-area-inset-right, 0px));
        gap: 6px;
    }

    .permisos-cabecera-usuario__titulo {
        font-size: 0.88rem;
        flex: 1 1 auto;
    }

    .permisos-cabecera-usuario__rol-select-label {
        display: none;
    }

    .permisos-cabecera-usuario__rol-select {
        min-width: 100px;
        max-width: 120px;
    }

    .permisos-cabecera-usuario__usuario-texto {
        display: none;
    }

    .permisos-cabecera-usuario__usuario {
        max-width: none;
    }

    .permisos-cabecera-usuario__avatar {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .permisos-cabecera-usuario__salir {
        width: 36px;
        height: 36px;
        padding: 0;
        min-width: 36px;
    }

    .siith-page {
        padding: 10px 12px;
    }

    .siith-card {
        padding: 12px;
        border-radius: 10px;
    }

    .permisos-modulo table,
    .permisos-modulo .datagrid-view,
    .permisos-modulo .panel-body {
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    .permisos-cabecera-usuario__rol-select {
        display: none;
    }

    .permisos-cabecera-usuario__titulo-base,
    .permisos-cabecera-usuario__titulo-sep {
        display: none;
    }

    .permisos-cabecera-usuario__subtitulo {
        display: none;
    }
}

@media (max-height: 560px) and (orientation: landscape) {
    .permisos-topbar {
        min-height: clamp(44px, 10vh, 52px);
        max-height: min(18vh, 64px);
    }

    .permisos-cabecera-usuario {
        min-height: clamp(44px, 10vh, 52px);
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .permisos-cabecera-usuario__subtitulo {
        display: none !important;
    }

    .permisos-sidebar-logo {
        height: var(--siith-topbar-height, 48px);
        min-height: var(--siith-topbar-height, 48px);
        max-height: var(--siith-topbar-height, 48px);
        margin-bottom: 8px;
    }
}

/* Pantallas anchas: más aire en contenido */
@media (min-width: 1400px) {
    .siith-page {
        padding: 24px 32px;
    }

    .permisos-cabecera-usuario__acciones {
        max-width: min(48vw, 780px);
    }
}

@media (min-width: 1800px) {
    :root {
        --siith-sidebar-width: clamp(300px, 18vw, 360px);
    }

    .siith-page {
        padding: 28px 40px;
    }
}

/* ── Registro jornada remota (teletrabajo) ── */
.perm-teletrabajo-page {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--siith-bg-page, #f3f4f6);
}

.perm-teletrabajo-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 16px 24px 24px;
    box-sizing: border-box;
}

.perm-teletrabajo-page__header {
    flex-shrink: 0;
    padding: 20px 24px 0;
    margin-bottom: 0;
}

.perm-teletrabajo-page__header .siith-page-header__titulo {
    color: var(--siith-primary-dark);
}

.permisos-modulo .perm-teletrabajo-page > .perm-teletrabajo-page__header,
.permisos-direct-panel .perm-teletrabajo-page > .perm-teletrabajo-page__header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.perm-teletrabajo-alert {
    margin-bottom: 16px;
}

.perm-teletrabajo-alert--warning {
    color: #9a3412;
    background: #fff7ed;
    border-color: #fed7aa;
}

.perm-teletrabajo-status {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) minmax(180px, 1fr) minmax(220px, 1.2fr);
    gap: 20px;
    align-items: center;
    padding: 18px 22px;
    margin-bottom: 16px;
}

.perm-teletrabajo-status__fecha {
    display: block;
    font-size: 13px;
    color: var(--siith-text-muted);
    margin-bottom: 4px;
}

.perm-teletrabajo-status__hora {
    display: block;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--siith-primary, #4c1d95);
    letter-spacing: 0.02em;
}

.perm-teletrabajo-status__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.perm-teletrabajo-status__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
}

.perm-teletrabajo-status__pill--success {
    color: #166534;
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.perm-teletrabajo-status__pill--neutral {
    color: #374151;
    background: #f3f4f6;
    border-color: #e5e7eb;
}

.perm-teletrabajo-status__pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.perm-teletrabajo-status__horario {
    font-size: 12px;
    color: var(--siith-text-muted);
}

.perm-teletrabajo-status__user {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--siith-text-strong);
}

.perm-teletrabajo-status__user-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.perm-teletrabajo-status__user-row svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--siith-primary, #4c1d95);
}

.perm-teletrabajo-stepper {
    padding: 20px 22px;
    margin-bottom: 16px;
}

.perm-teletrabajo-stepper__title,
.perm-teletrabajo-section__title {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.perm-teletrabajo-stepper__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    position: relative;
    margin-bottom: 16px;
}

.perm-teletrabajo-stepper__track::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: #e5e7eb;
    z-index: 0;
}

.perm-teletrabajo-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 10px 12px;
    border-radius: var(--siith-radius-md, 10px);
    border: 1px solid var(--siith-border-light, #e5e7eb);
    background: #fff;
    min-height: 148px;
}

.perm-teletrabajo-step--done {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.perm-teletrabajo-step.is-active,
.perm-teletrabajo-step--active {
    border-color: var(--siith-primary, #4c1d95);
    box-shadow: 0 0 0 1px rgba(76, 29, 149, 0.15);
}

.perm-teletrabajo-step__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    color: #16a34a;
}

.perm-teletrabajo-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    color: var(--siith-text-muted);
    font-size: 14px;
    font-weight: 700;
}

.perm-teletrabajo-step.is-active .perm-teletrabajo-step__num,
.perm-teletrabajo-step--active .perm-teletrabajo-step__num {
    background: var(--siith-primary, #4c1d95);
    color: #fff;
}

.perm-teletrabajo-step__titulo {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--siith-text-strong);
    line-height: 1.35;
}

.perm-teletrabajo-step__hora {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-text-strong);
}

.perm-teletrabajo-step__badge {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.perm-teletrabajo-step__badge--success {
    color: #166534;
    background: #dcfce7;
}

.perm-teletrabajo-step__badge--pending {
    color: #6b21a8;
    background: #f3e8ff;
}

.perm-teletrabajo-step__action {
    margin-top: auto;
    padding-top: 10px;
    width: 100%;
}

.perm-teletrabajo-step__btn {
    width: 100%;
    justify-content: center;
    font-size: 12px;
    padding: 8px 10px;
}

.perm-teletrabajo-step__hint {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--siith-text-muted);
}

.perm-teletrabajo-step--skipped {
    opacity: 0.72;
}

.perm-teletrabajo-stepper__info {
    margin: 0;
    color: #1e40af;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.perm-teletrabajo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.perm-teletrabajo-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.perm-teletrabajo-resumen,
.perm-teletrabajo-historial,
.perm-teletrabajo-esporadica,
.perm-teletrabajo-ayuda {
    padding: 18px 20px;
}

.perm-teletrabajo-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.perm-teletrabajo-metric {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--siith-radius-sm, 8px);
    background: #f9fafb;
    border: 1px solid var(--siith-border-light, #e5e7eb);
}

.perm-teletrabajo-metric__icon {
    flex-shrink: 0;
    color: var(--siith-primary, #4c1d95);
}

.perm-teletrabajo-metric__label {
    display: block;
    font-size: 11px;
    color: var(--siith-text-muted);
    margin-bottom: 2px;
}

.perm-teletrabajo-metric__value {
    display: block;
    font-size: 16px;
    color: var(--siith-text-strong);
}

.perm-teletrabajo-table-wrap {
    overflow-x: auto;
}

.perm-teletrabajo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.perm-teletrabajo-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--siith-text-muted);
    border-bottom: 1px solid var(--siith-border-light, #e5e7eb);
    background: #f9fafb;
}

.perm-teletrabajo-table td {
    padding: 12px;
    border-bottom: 1px solid var(--siith-border-light, #e5e7eb);
    color: var(--siith-text-strong);
}

.perm-teletrabajo-table__marcacion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.perm-teletrabajo-table__marcacion svg {
    color: var(--siith-primary, #4c1d95);
}

.perm-teletrabajo-table__badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.perm-teletrabajo-table__badge--success {
    color: #166534;
    background: #dcfce7;
}

.perm-teletrabajo-table__badge--pending {
    color: #6b21a8;
    background: #f3e8ff;
}

.perm-teletrabajo-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.perm-teletrabajo-esporadica__text,
.perm-teletrabajo-ayuda__text,
.perm-teletrabajo-esporadica__hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--siith-text-muted);
    line-height: 1.45;
}

.perm-teletrabajo-esporadica__btn {
    width: 100%;
    justify-content: center;
    gap: 8px;
}

.perm-teletrabajo-esporadica__hint {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 12px;
}

.perm-teletrabajo-ayuda {
    background: linear-gradient(180deg, #faf5ff 0%, #fff 100%);
    border-color: #e9d5ff;
}

.perm-teletrabajo-ayuda__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-primary, #4c1d95);
    text-decoration: none;
}

.perm-teletrabajo-ayuda__link:hover {
    text-decoration: underline;
}

.perm-teletrabajo-form-hidden {
    display: none !important;
}

@media (max-width: 1100px) {
    .perm-teletrabajo-status {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .perm-teletrabajo-status__center {
        align-items: flex-start;
        text-align: left;
    }

    .perm-teletrabajo-stepper__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .perm-teletrabajo-stepper__track::before {
        display: none;
    }

    .perm-teletrabajo-layout {
        grid-template-columns: 1fr;
    }

    .perm-teletrabajo-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .perm-teletrabajo-stepper__track {
        grid-template-columns: 1fr;
    }

    .perm-teletrabajo-status__hora {
        font-size: 28px;
    }
}

/* ===== Registro de actividades (popup teletrabajo) ===== */
.perm-actividades-popup {
    margin: 0;
    min-height: 100%;
    padding: 16px;
    box-sizing: border-box;
    font-family: var(--siith-font);
    font-size: 13px;
    color: var(--siith-text);
    background: linear-gradient(180deg, #f8f7fc 0%, #eef2f8 100%);
}

.perm-actividades-modal {
    max-width: 880px;
    margin: 0 auto;
    background: var(--siith-surface);
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-md);
    box-shadow: var(--siith-shadow);
    overflow: hidden;
}

.perm-actividades-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 18px;
    border-bottom: 1px solid var(--siith-border-light);
}

.perm-actividades-header__intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.perm-actividades-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--siith-primary);
    background: var(--siith-primary-soft);
    flex-shrink: 0;
}

.perm-actividades-header__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--siith-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.perm-actividades-header__subtitle {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--siith-text-muted);
    line-height: 1.45;
}

.perm-actividades-header__side {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
}

.perm-actividades-header__meta {
    text-align: right;
    font-size: 12px;
    color: var(--siith-text-muted);
    line-height: 1.5;
}

.perm-actividades-header__meta-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.perm-actividades-header__meta-row + .perm-actividades-header__meta-row {
    margin-top: 4px;
}

.perm-actividades-header__meta-row svg {
    color: var(--siith-primary-mid);
    flex-shrink: 0;
}

.perm-actividades-header__meta-row strong {
    color: var(--siith-text-strong);
    font-weight: 600;
}

.perm-actividades-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--siith-border-light);
    border-radius: 8px;
    background: var(--siith-surface);
    color: var(--siith-text-muted);
    cursor: pointer;
    transition: background var(--siith-transition), color var(--siith-transition), border-color var(--siith-transition);
}

.perm-actividades-close:hover {
    color: var(--siith-primary);
    border-color: #c4b5fd;
    background: var(--siith-primary-soft);
}

.perm-actividades-body {
    padding: 20px 24px 8px;
}

.perm-actividades-section + .perm-actividades-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--siith-border-light);
}

.perm-actividades-section__title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--siith-primary);
}

.perm-actividades-required {
    color: #dc2626;
}

.perm-actividades-field {
    margin-bottom: 14px;
}

.perm-actividades-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--siith-label);
}

.perm-actividades-field textarea,
.perm-actividades-field input,
.perm-actividades-field select {
    width: 100%;
    box-sizing: border-box;
}

.perm-actividades-inline {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 0.8fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}

.perm-actividades-inline__action .siith-btn {
    white-space: nowrap;
    min-height: 40px;
}

.perm-actividades-inline__action .siith-btn.is-loading {
    opacity: 0.75;
    cursor: wait;
}

.perm-actividades-info {
    margin-top: 0;
}

.perm-actividades-lista-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.perm-actividades-lista-header .perm-actividades-section__title {
    margin-bottom: 0;
}

.perm-actividades-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--siith-primary);
    background: var(--siith-primary-soft);
    border: 1px solid #ddd6fe;
    border-radius: 999px;
}

.perm-actividades-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-sm);
}

.perm-actividades-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.perm-actividades-table thead th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 700;
    color: var(--siith-primary);
    background: #f5f3ff;
    border-bottom: 1px solid var(--siith-border-light);
}

.perm-actividades-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--siith-border-light);
    vertical-align: middle;
    color: var(--siith-text);
}

.perm-actividades-table tbody tr:last-child td {
    border-bottom: none;
}

.perm-actividades-table__col-num,
.perm-actividades-table__num {
    width: 48px;
    text-align: center;
}

.perm-actividades-table__col-tipo,
.perm-actividades-table__tipo {
    width: 130px;
}

.perm-actividades-table__col-valor,
.perm-actividades-table__valor {
    width: 80px;
    text-align: center;
}

.perm-actividades-table__col-acciones,
.perm-actividades-table__acciones {
    width: 96px;
    text-align: center;
}

.perm-actividades-table__detalle {
    line-height: 1.45;
}

.perm-actividades-table__empty td {
    padding: 18px 12px;
    text-align: center;
    color: var(--siith-text-muted);
    font-style: italic;
}

.perm-actividades-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0 2px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: background var(--siith-transition), border-color var(--siith-transition), color var(--siith-transition);
}

.perm-actividades-icon-btn--edit {
    color: #2563eb;
}

.perm-actividades-icon-btn--edit:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.perm-actividades-icon-btn--delete {
    color: #dc2626;
}

.perm-actividades-icon-btn--delete:hover {
    background: #fef2f2;
    border-color: #fecaca;
}

.perm-actividades-add-more {
    margin-top: 14px;
}

.perm-actividades-warning {
    margin-top: 14px;
    color: var(--siith-warning);
    background: var(--siith-warning-soft);
    border-color: #fde68a;
}

.perm-actividades-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--siith-border-light);
    background: #fafbfd;
}

.perm-actividades-footer__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    color: var(--siith-text-muted);
    line-height: 1.45;
}

.perm-actividades-footer__note svg {
    color: var(--siith-primary-mid);
    flex-shrink: 0;
}

.perm-actividades-footer__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.perm-actividades-modal--edit {
    max-width: 640px;
}

.perm-actividades-footer--edit {
    border-top: 1px solid var(--siith-border-light);
    padding: 14px 20px;
}

.perm-actividades-inline--edit {
    grid-template-columns: minmax(180px, 1fr) minmax(140px, 0.9fr);
}

.perm-actividades-inline--edit .perm-actividades-field--valor {
    grid-column: auto;
}

#btn_actualizar_actividad.is-loading {
    opacity: 0.72;
    pointer-events: none;
}

.perm-actividades-modal--edit .perm-actividades-body {
    padding: 20px;
}

.perm-actividades-footer--consulta {
    justify-content: flex-end;
}

.perm-actividades-table--consulta .perm-actividades-table__detalle {
    min-width: 220px;
}

@media (max-width: 768px) {
    .perm-actividades-popup {
        padding: 8px;
    }

    .perm-actividades-header {
        flex-direction: column;
        padding: 16px;
    }

    .perm-actividades-header__side {
        width: 100%;
        justify-content: space-between;
    }

    .perm-actividades-header__meta {
        text-align: left;
    }

    .perm-actividades-header__meta-row {
        justify-content: flex-start;
    }

    .perm-actividades-body {
        padding: 16px;
    }

    .perm-actividades-inline {
        grid-template-columns: 1fr;
    }

    .perm-actividades-inline__action .siith-btn {
        width: 100%;
    }

    .perm-actividades-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .perm-actividades-footer__actions {
        flex-direction: column-reverse;
    }

    .perm-actividades-footer__actions .siith-btn {
        width: 100%;
    }
}

/* ============================================================
   Reporte Marcaciones y Calendarización (mockup)
   ============================================================ */
.rm-cal-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--siith-surface-alt);
    font-family: var(--siith-font);
}

.rm-cal-page__header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 0;
    margin-bottom: 0;
}

.rm-cal-page__header .siith-page-header__titulo {
    color: var(--siith-primary-dark);
}

.rm-cal-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.rm-cal-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.rm-cal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 24px 24px;
    box-sizing: border-box;
}

.rm-cal-empty {
    padding: 32px 24px;
    color: var(--siith-text-muted);
}

.rm-cal-resumen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 24px;
    padding: 16px 20px !important;
    margin-bottom: 16px;
    background: #f8f7fc !important;
}

.rm-cal-resumen__item label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--siith-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.rm-cal-resumen__item span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-text-strong);
    line-height: 1.4;
}

.rm-cal-filtros {
    margin-bottom: 16px;
}

.rm-cal-filtros__title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--siith-primary-dark);
}

.rm-cal-filtros__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
}

.rm-cal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rm-cal-field > span {
    font-size: 12px;
    font-weight: 600;
    color: var(--siith-label);
    text-transform: none;
    letter-spacing: normal;
}

.rm-cal-field input,
.rm-cal-field select {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
    background: var(--siith-surface);
}

.rm-cal-field > select {
    padding: 0 36px 0 12px !important;
}

.rm-cal-filtros__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.rm-cal-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
    align-items: stretch;
}

.rm-cal-metrics > .rm-cal-metric.siith-card,
.rm-cal-metrics > .rm-cal-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 96px;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--siith-border-light) !important;
    box-shadow: var(--siith-shadow-sm) !important;
}

.rm-cal-metric__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rm-cal-metric__icon--purple { color: var(--siith-primary); background: #ede9fe; }
.rm-cal-metric__icon--success { color: var(--siith-success); background: var(--siith-success-soft); }
.rm-cal-metric__icon--warning { color: var(--siith-warning); background: var(--siith-warning-soft); }
.rm-cal-metric__icon--neutral { color: var(--siith-text-muted); background: #f1f5f9; }

.rm-cal-metric__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.rm-cal-metric__label {
    display: block;
    font-size: 12px;
    color: var(--siith-text-muted);
    margin-bottom: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rm-cal-metric__value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--siith-primary-dark);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rm-cal-metric__value em {
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    color: var(--siith-text-muted);
    margin-left: 2px;
}

.rm-cal-tabla { padding: 0 !important; overflow: hidden; }
.rm-cal-tabla__head { padding: 16px 20px 0; }
.rm-cal-tabla__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--siith-primary-dark); }
.rm-cal-tabla__meta { display: block; margin-top: 4px; font-size: 12px; color: var(--siith-text-muted); }
.rm-cal-table-wrap { overflow-x: auto; margin-top: 12px; }

.rm-cal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.rm-cal-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    color: var(--siith-primary);
    background: #f5f3ff;
    border-bottom: 1px solid var(--siith-border-light);
    white-space: nowrap;
}

.rm-cal-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--siith-border-light);
    color: var(--siith-text);
    vertical-align: middle;
}

.rm-cal-table__atraso { color: #dc2626 !important; font-weight: 600; }
.rm-cal-table__empty,
.rm-cal-table__loading { padding: 24px 14px !important; text-align: center; color: var(--siith-text-muted); font-style: italic; }

.rm-cal-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.rm-cal-badge--yes { color: var(--siith-primary); background: var(--siith-primary-soft); border: 1px solid #ddd6fe; }
.rm-cal-badge--no { color: var(--siith-text-muted); background: #f1f5f9; border: 1px solid var(--siith-border-light); }

.rm-cal-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.rm-cal-status--success { color: var(--siith-success); background: var(--siith-success-soft); }
.rm-cal-status--warning { color: var(--siith-warning); background: var(--siith-warning-soft); }
.rm-cal-status--neutral { color: var(--siith-text-muted); background: #f1f5f9; }

.rm-cal-actividades-none {
    color: var(--siith-text-muted);
}

.rm-cal-actividades-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--siith-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.rm-cal-actividades-link:hover {
    color: var(--siith-primary-dark);
}

.rm-cal-tabla__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--siith-border-light);
}

.rm-cal-tabla__count { font-size: 12px; color: var(--siith-text-muted); }
.rm-cal-tabla__foot-actions { display: flex; align-items: center; gap: 12px; }

.rm-cal-pagesize select {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    font: inherit;
    font-size: 12px;
}

.rm-cal-pagination { display: flex; align-items: center; gap: 4px; }

.rm-cal-pagination__btn,
.rm-cal-pagination__page {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    color: var(--siith-text-strong);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.rm-cal-pagination__page.is-active { background: var(--siith-primary); border-color: var(--siith-primary); color: #fff; }
.rm-cal-pagination__btn:disabled { opacity: 0.45; cursor: not-allowed; }

.permisos-tab-panel-host:has(.rm-cal-page) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.permisos-direct-panel.is-visible:has(.rm-cal-page) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.permisos-tab-panel-host:has(.rm-cal-page) .rm-cal-page,
.permisos-direct-panel:has(.rm-cal-page) .rm-cal-page {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    margin: 0 !important;
}
.permisos-modulo .rm-cal-page > .rm-cal-page__header,
.permisos-direct-panel .rm-cal-page > .rm-cal-page__header {
    display: flex !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 12px 24px 0 !important;
    align-items: center;
    justify-content: flex-end;
}
.permisos-modulo .rm-cal-page > .rm-cal-page__header .rm-cal-page__header-main,
.permisos-direct-panel .rm-cal-page > .rm-cal-page__header .rm-cal-page__header-main {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.permisos-modulo .rm-cal-page > .rm-cal-page__header:not(:has(.rm-cal-page__actions)),
.permisos-direct-panel .rm-cal-page > .rm-cal-page__header:not(:has(.rm-cal-page__actions)),
.permisos-modulo #rab-app > .rm-cal-page__header,
.permisos-direct-panel #rab-app > .rm-cal-page__header,
.permisos-modulo #rme-app > .rm-cal-page__header,
.permisos-direct-panel #rme-app > .rm-cal-page__header,
.permisos-modulo #rcd-app > .rm-cal-page__header,
.permisos-direct-panel #rcd-app > .rm-cal-page__header,
.permisos-modulo #rag-app > .rm-cal-page__header,
.permisos-direct-panel #rag-app > .rm-cal-page__header,
.permisos-modulo #hme-app > .rm-cal-page__header,
.permisos-direct-panel #hme-app > .rm-cal-page__header,
.permisos-modulo #rap-app > .rm-cal-page__header,
.permisos-direct-panel #rap-app > .rm-cal-page__header,
.permisos-modulo #rca-app > .rm-cal-page__header,
.permisos-direct-panel #rca-app > .rm-cal-page__header,
.permisos-modulo #rhe-app > .rm-cal-page__header,
.permisos-direct-panel #rhe-app > .rm-cal-page__header,
.permisos-modulo #rju-app > .rm-cal-page__header,
.permisos-direct-panel #rju-app > .rm-cal-page__header {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.permisos-modulo .rm-cal-page > .rm-cal-page__header.siith-page-header--en-cabecera:has(.rm-cal-page__actions),
.permisos-direct-panel .rm-cal-page > .rm-cal-page__header.siith-page-header--en-cabecera:has(.rm-cal-page__actions) {
    display: flex !important;
    height: auto !important;
    overflow: visible !important;
    padding: 12px 24px 0 !important;
}
.permisos-modulo [id^="visor_fn_"] .tabs-panels .panel-body:has(.rm-cal-page) {
    height: 100% !important; min-height: 0 !important; overflow: hidden !important; padding: 0 !important;
}

@media (max-width: 1100px) {
    .rm-cal-resumen, .rm-cal-filtros__grid, .rm-cal-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .rm-cal-page__header { flex-direction: column; padding: 16px 16px 0; }
    .rm-cal-page__actions { width: 100%; }
    .rm-cal-scroll { padding: 12px 16px 16px; }
    .rm-cal-resumen, .rm-cal-filtros__grid, .rm-cal-metrics { grid-template-columns: 1fr; }
}

/* Reporte asistencias biométrico (servidor / jefe) — mismo patrón que Consulta de Vacaciones */
.rb-bio-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--siith-surface-alt);
    font-family: var(--siith-font);
}

.rb-bio-page__header {
    flex-shrink: 0;
    padding: 20px 24px 0;
    margin-bottom: 0;
}

.rb-bio-page__header .siith-page-header__titulo {
    color: var(--siith-primary-dark);
}

.rb-bio-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 24px 24px;
    box-sizing: border-box;
}

.permisos-modulo .rb-bio-page > .rb-bio-page__header,
.permisos-direct-panel .rb-bio-page > .rb-bio-page__header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.rb-bio-metric__value--warning,
.rb-bio-metric__value--success,
.rb-bio-metric__value--neutral {
    color: var(--siith-primary-dark);
}

.rb-bio-info {
    margin: 0 20px 12px;
    border-radius: var(--siith-radius-sm);
}

.rb-bio-table th,
.rb-bio-table td {
    white-space: nowrap;
    font-size: 11px;
}

.rb-bio-tipo {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.rb-bio-tipo--bio,
.rb-bio-tipo--presencial {
    color: #334155;
    background: #f1f5f9;
}

.rb-bio-tipo--remota {
    color: #1d4ed8;
    background: #eff6ff;
}

.rb-bio-tipo--teletrabajo {
    color: #0f766e;
    background: #ccfbf1;
}

.rb-bio-filtros__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rb-bio-filtros__grid--jefe {
    grid-template-columns: minmax(200px, 1.6fr) repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .rb-bio-filtros__grid,
    .rb-bio-filtros__grid--jefe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .rb-bio-filtros__grid { grid-template-columns: 1fr; }
}

/* —— Reporte de asistencia biométrica (institucional) —— */
.rab-filtros__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rab-page .rm-cal-tabla__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
}

.rm-cal-tabla__head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.rm-cal-tabla__exports {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rab-table th,
.rab-table td {
    white-space: nowrap;
}

.rab-metric__icon--danger {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

.rm-cal-status--danger {
    color: #b91c1c;
    background: #fef2f2;
}

.rab-servidor {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.rab-servidor strong {
    display: block;
    font-size: 13px;
    color: var(--siith-text-strong);
}

.rab-servidor em {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.rab-mod {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.rab-mod--pres {
    background: #f3f4f6;
    color: #4b5563;
}

.rab-mod--tt {
    background: #efeaff;
    color: #6d28d9;
}

.rab-table__atraso {
    color: #c2410c !important;
    font-weight: 700;
}

.rab-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 20px 0;
}

.rab-cols {
    position: relative;
}

.rab-cols__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 280px;
    max-height: 360px;
    overflow-y: auto;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rab-cols__menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.rab-cols__menu[hidden] {
    display: none !important;
}

.rab-col-hide {
    display: none !important;
}

.rab-page .rm-cal-table {
    width: max-content;
    min-width: 100%;
}

.rab-table__omision {
    color: #dc2626 !important;
    text-align: center;
    font-weight: 600;
}

.rab-table__tt {
    color: #1d4ed8;
}

.rap-page .rap-row-varios td,
.rca-page .rap-row-varios td,
.rca-page .rca-row-varios td {
    background: #ecfdf3 !important;
}

.permisos-tab-panel-host:has(.rb-bio-page),
.permisos-direct-panel.is-visible:has(.rb-bio-page) {
    display: flex !important;
    flex-direction: column !important;
}

.permisos-tab-panel-host:has(.rb-bio-page) .rb-bio-page,
.permisos-direct-panel:has(.rb-bio-page) .rb-bio-page {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    margin: 0 !important;
}

.permisos-modulo [id^="visor_fn_"] .tabs-panels .panel-body:has(.rb-bio-page) {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.permisos-tab-panel-host:has(.rab-page),
.permisos-direct-panel:has(.rab-page),
.permisos-tab-panel-host:has(.rap-page),
.permisos-direct-panel:has(.rap-page),
.permisos-tab-panel-host:has(.rca-page),
.permisos-direct-panel:has(.rca-page),
.permisos-tab-panel-host:has(.rhe-page),
.permisos-direct-panel:has(.rhe-page),
.permisos-tab-panel-host:has(.rju-page),
.permisos-direct-panel:has(.rju-page),
.permisos-tab-panel-host:has(.rmc-page),
.permisos-direct-panel:has(.rmc-page),
.permisos-tab-panel-host:has(.rme-page),
.permisos-direct-panel:has(.rme-page),
.permisos-tab-panel-host:has(.rcd-page),
.permisos-direct-panel:has(.rcd-page),
.permisos-tab-panel-host:has(.rag-page),
.permisos-direct-panel:has(.rag-page),
.permisos-tab-panel-host:has(.hme-page),
.permisos-direct-panel:has(.hme-page),
.permisos-tab-panel-host:has(.cmt-page),
.permisos-direct-panel:has(.cmt-page),
.permisos-tab-panel-host:has(.mjc-page),
.permisos-direct-panel:has(.mjc-page) {
    overflow: hidden;
}

.rcd-table th,
.rcd-table td.rcd-cell {
    text-align: center;
    white-space: nowrap;
}
.rcd-table .rcd-col-nombre {
    text-align: left;
    min-width: 220px;
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
}
.rcd-table thead .rcd-col-nombre {
    z-index: 2;
}
.rcd-badge {
    display: inline-block;
    min-width: 1.8rem;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
}
.rcd-badge--tt {
    background: #ecfdf3;
    color: #166534;
}
.rcd-badge--fn {
    background: #fef2f2;
    color: #b91c1c;
}
.rcd-badge--fl {
    background: #eff6ff;
    color: #1d4ed8;
}

.rmc-badge {
    display: inline-block;
    min-width: 2.4rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
}
.rmc-badge--si {
    background: #ecfdf3;
    color: #166534;
}
.rmc-badge--no {
    background: #f3f4f6;
    color: #4b5563;
}

.rag-page td[data-col="actividad"] {
    white-space: normal;
    min-width: 220px;
    max-width: 420px;
}

.rag-badge {
    display: inline-block;
    min-width: 4.4rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
}
.rag-badge--registrado {
    background: #eff6ff;
    color: #1d4ed8;
}
.rag-badge--aprobado {
    background: #ecfdf3;
    color: #166534;
}
.rag-badge--rechazado {
    background: #fef2f2;
    color: #b91c1c;
}

.rhe-page th[data-col="h_suplementarias"],
.rhe-page th[data-col="h_extraordinarias"] {
    background: #facc15;
    color: #1f2937;
}

.rhe-page td.rhe-table__extra {
    background: #fefce8;
}

@media (max-width: 1100px) {
    .rab-filtros__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .rab-filtros__grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Control general de permisos ===== */
.siith-badge--danger {
    color: #b42318;
    background: #fef3f2;
}

.cg-permisos-filtros__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
}

.cg-permisos-page .select2-container {
    width: 100% !important;
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}

.cg-permisos-page .select2-container .select2-choice {
    min-height: 40px;
    height: 40px;
    line-height: 38px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    background-image: none;
    filter: none;
    color: var(--siith-text-strong);
    font-size: 13px;
    box-sizing: border-box;
}

.cg-permisos-page .select2-container .select2-choice > .select2-chosen {
    margin-right: 12px;
    line-height: 38px;
}

.cg-permisos-page .select2-container .select2-choice .select2-arrow {
    width: 28px;
    border-left: 0;
    background: transparent;
    background-image: none;
    filter: none;
    border-radius: 0 var(--siith-radius-sm) var(--siith-radius-sm) 0;
}

.cg-permisos-page .select2-container .select2-choice .select2-arrow b {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2340327e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 16px 16px !important;
}

.permisos-modulo .select2-container .select2-choice {
    min-height: 40px;
    height: 40px;
    line-height: 38px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--siith-border, #d5d0e8);
    border-radius: var(--siith-radius-sm, 8px);
    background: var(--siith-surface, #fff);
    background-image: none;
    filter: none;
    color: var(--siith-text-strong, #2c2548);
    font-size: 13px;
    box-sizing: border-box;
}

.permisos-modulo .select2-container .select2-choice > .select2-chosen {
    margin-right: 12px;
    line-height: 38px;
}

.permisos-modulo .select2-container .select2-choice .select2-arrow {
    width: 28px;
    border-left: 0;
    background: transparent;
    background-image: none;
    filter: none;
}

.permisos-modulo .select2-container .select2-choice .select2-arrow b {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2340327e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 16px 16px !important;
}

.cg-permisos-page .select2-container .select2-choice abbr {
    top: 12px;
}

.cg-permisos-page .select2-drop {
    border-color: var(--siith-border);
    border-radius: 0 0 var(--siith-radius-sm) var(--siith-radius-sm);
}

.cg-permisos-page .select2-search {
    padding: 8px;
}

.cg-permisos-page .select2-search input {
    min-height: 34px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: var(--siith-surface);
    font-size: 13px;
}

.cg-permisos-page .select2-results .select2-highlighted {
    background: var(--siith-primary, #40327e);
}

.cg-permisos-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cg-permisos-metric__icon--success {
    background: #ecfdf3 !important;
    color: #027a48 !important;
}

.cg-permisos-metric__icon--warning {
    background: #fffaeb !important;
    color: #b54708 !important;
}

.cg-permisos-metric__icon--danger {
    background: #fef3f2 !important;
    color: #b42318 !important;
}

.cg-permisos-tabla__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cg-permisos-tabla__head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.cg-permisos-tabla__exports {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cg-permisos-columnas {
    position: relative;
}

.cg-permisos-columnas__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 180px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-sm);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cg-permisos-columnas__menu[hidden] {
    display: none !important;
}

.cg-permisos-columnas__menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--siith-text-strong);
    cursor: pointer;
}

.cg-permisos-table {
    min-width: 1100px;
}

.cg-permisos-table th,
.cg-permisos-table td {
    white-space: nowrap;
}

.cg-permisos-col-acciones {
    width: 140px;
    text-align: center;
}

.cg-permisos-acciones {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cg-permisos-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--siith-radius-sm);
    color: var(--siith-primary);
    background: var(--siith-primary-soft);
    text-decoration: none;
}

.cg-permisos-accion--adjunto {
    width: auto;
    padding: 0 8px;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
}

.cg-permisos-accion__label {
    line-height: 1;
}

.cg-permisos-accion:hover {
    background: #ddd6fe;
}

.cg-permisos-empty {
    padding: 24px;
    color: var(--siith-text-muted);
}

@media (max-width: 1200px) {
    .cg-permisos-filtros__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cg-permisos-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .cg-permisos-filtros__grid,
    .cg-permisos-metrics {
        grid-template-columns: 1fr;
    }
}

@media print {
    .layout-panel-west,
    .layout-panel-north,
    .layout-panel-south,
    .cg-permisos-page__actions,
    .cg-permisos-filtros,
    .cg-permisos-columnas,
    .rp-permisos-footer,
    .fancytree-container {
        display: none !important;
    }
    .cg-permisos-page,
    .cg-permisos-tabla,
    .cg-permisos-table-wrap {
        overflow: visible !important;
        max-height: none !important;
        box-shadow: none !important;
        border: none !important;
    }
    .cg-permisos-table {
        min-width: 0 !important;
    }
}

/* Saldo de vacaciones por servidor */
.sv-saldos-filtros__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sv-saldos-metric__icon--info {
    background: #dbeafe;
    color: #1d4ed8;
}

.sv-saldos-saldo {
    color: var(--siith-primary, #40327e);
    font-weight: 700;
}

.sv-saldos-saldo--bajo {
    color: #c2410c;
}

.sv-saldos-info {
    margin: 12px 16px 0;
}

@media (max-width: 1200px) {
    .sv-saldos-filtros__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media print {
    .sv-saldos-info {
        display: none !important;
    }
}

/* Anulación de permisos aprobados (TH) */
.ath-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    padding: 20px 0 0;
    margin-bottom: 16px;
}

.ath-page__header .siith-page-header__titulo {
    color: var(--siith-primary-dark);
}

/* Título ya vive en la barra superior, igual que Saldo de vacaciones por servidor */
.permisos-modulo .ath-page .ath-page__header,
.permisos-direct-panel .ath-page .ath-page__header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.ath-page.perm-anulacion-page .perm-anulacion-scroll {
    display: flex;
    flex-direction: column;
    padding: 16px 24px 24px;
}

.ath-layout {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

.ath-layout > .siith-card {
    margin-top: 0 !important;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.ath-lista {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 16px !important;
}

.ath-lista__title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--siith-text-strong);
    flex-shrink: 0;
}

.ath-filtros {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.ath-filtros__buscar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: var(--siith-radius-sm, 8px);
    background: #fff;
}

.ath-filtros__buscar input {
    flex: 1;
    border: 0;
    outline: 0;
    height: 40px;
    background: transparent;
    font: inherit;
}

.ath-filtros__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ath-filtros__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.ath-filtros__field select {
    height: 38px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: var(--siith-radius-sm, 8px);
    padding: 0 10px;
    font: inherit;
    background: #fff;
}

.ath-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.ath-group {
    margin-top: 6px;
    padding: 4px 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--siith-text-muted);
}

.ath-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 12px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: var(--siith-radius-sm, 8px);
    background: #fff;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.ath-card:hover {
    border-color: #c4b5fd;
    background: #faf8ff;
}

.ath-card.is-selected {
    border-color: var(--siith-primary, #40327e);
    background: var(--siith-primary-soft, #f3f0ff);
    box-shadow: inset 3px 0 0 var(--siith-primary, #40327e);
}

.ath-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ath-card__tipo {
    font-size: 13px;
    color: var(--siith-text-strong);
}

.ath-card__meta {
    font-size: 12px;
    color: var(--siith-text-muted);
}

.ath-cards__loading,
.ath-cards__empty,
.ath-detalle__empty,
.ath-detalle__loading {
    padding: 28px 16px;
    text-align: center;
    color: var(--siith-text-muted);
}

.ath-detalle > .ath-detalle__empty,
.ath-detalle > .ath-detalle__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ath-lista__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--siith-border, #e5e7eb);
}

.ath-lista__count {
    font-size: 12px;
    color: var(--siith-text-muted);
}

.ath-pagination {
    display: inline-flex;
    gap: 4px;
}

.ath-pagination__btn,
.ath-pagination__page {
    min-width: 30px;
    height: 30px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.ath-pagination__page.is-active {
    background: var(--siith-primary, #40327e);
    border-color: var(--siith-primary, #40327e);
    color: #fff;
}

.ath-detalle {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.ath-detalle__inner {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: auto;
}

.ath-detalle__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ath-detalle__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ath-detalle__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.ath-section {
    padding: 14px 16px !important;
}

.ath-section__title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
}

.ath-value {
    font-size: 14px;
    color: var(--siith-text-strong);
    font-weight: 600;
}

.ath-alert-saldo {
    margin-top: 12px;
}

.ath-anular {
    border: 1px solid #fecaca !important;
    background: #fff7f7 !important;
    padding: 16px !important;
}

.ath-anular__warn {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    color: #b91c1c;
}

.ath-anular__warn p {
    margin: 4px 0 0;
    color: var(--siith-text-muted);
    font-size: 13px;
    font-weight: 400;
}

.ath-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.ath-field em {
    color: #b91c1c;
    font-style: normal;
}

.ath-field textarea {
    width: 100%;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    resize: vertical;
    min-height: 96px;
    background: #fff;
}

.ath-field small {
    color: var(--siith-text-muted);
}

.ath-anular__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ath-btn-danger {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}

.ath-btn-danger:hover:not(:disabled) {
    background: #b91c1c !important;
}

.ath-btn-danger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ath-form-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ath-modal[hidden] {
    display: none !important;
}

.ath-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ath-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.ath-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    text-align: center;
}

.ath-modal__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fee2e2;
    color: #dc2626;
}

.ath-modal__title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
}

.ath-modal__body {
    margin: 0 0 16px;
    color: var(--siith-text-muted);
    font-size: 14px;
    line-height: 1.45;
}

.ath-modal__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
    text-align: left;
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px;
}

.ath-modal__meta span {
    display: block;
    font-size: 11px;
    color: var(--siith-text-muted);
}

.ath-modal__meta strong {
    font-size: 13px;
    color: var(--siith-text-strong);
}

.ath-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.permisos-tab-panel-host:has(.ath-page),
.permisos-direct-panel:has(.ath-page) {
    overflow: hidden;
}

.ath-detalle > .ath-detalle__empty,
.ath-detalle > .ath-detalle__loading,
.ath-detalle > .ath-detalle__inner {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 1100px) {
    .ath-layout {
        grid-template-columns: 1fr;
        align-items: start;
        grid-template-rows: none;
    }
    .ath-cards {
        max-height: 40vh;
        flex: 0 1 auto;
    }
}

/* —— Consulta individual de vacaciones (Saldo de vacaciones) —— */
.cis-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: 16px;
    padding: 20px 24px 24px;
    box-sizing: border-box;
    overflow: hidden;
}

.cis-page__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-bottom: 0;
}

.cis-page__header .siith-page-header__titulo {
    color: var(--siith-primary-dark);
}

.cis-page__header-main {
    min-width: 0;
    flex: 1;
}

.cis-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cis-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.cis-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.cis-lista {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    padding: 16px !important;
}

.cis-lista__title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--siith-text-strong);
    flex-shrink: 0;
}

.cis-filtros {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.cis-filtros__buscar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: var(--siith-radius-sm, 8px);
    background: #fff;
    color: var(--siith-text-muted);
}

.cis-filtros__buscar input {
    flex: 1;
    border: 0;
    outline: 0;
    height: 40px;
    background: transparent;
    font: inherit;
}

.cis-filtros__field select {
    width: 100%;
    height: 40px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: var(--siith-radius-sm, 8px);
    padding: 0 10px;
    font: inherit;
    background: #fff;
}

.cis-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.cis-servidores {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.cis-servidores__loading,
.cis-servidores__empty,
.cis-detalle__empty,
.cis-detalle__loading,
.cis-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--siith-text-muted);
    font-size: 14px;
}

.cis-servidor {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--siith-radius-sm, 8px);
    background: transparent;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.cis-servidor:hover {
    background: #f8f7fc;
}

.cis-servidor.is-selected {
    background: var(--siith-primary-soft, #f3f0ff);
    border-color: #ddd6fe;
    box-shadow: inset 3px 0 0 var(--siith-primary, #40327e);
}

.cis-servidor__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #7c6bb5;
}

.cis-servidor__avatar--violet { background: #7c6bb5; }
.cis-servidor__avatar--blue { background: #3b82f6; }
.cis-servidor__avatar--teal { background: #0d9488; }
.cis-servidor__avatar--amber { background: #d97706; }
.cis-servidor__avatar--rose { background: #e11d48; }
.cis-servidor__avatar--indigo { background: #4f46e5; }

.cis-servidor__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cis-servidor__meta strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cis-servidor__meta em {
    font-style: normal;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.cis-lista__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--siith-border, #e5e7eb);
    flex-shrink: 0;
}

.cis-lista__count {
    font-size: 12px;
    color: var(--siith-text-muted);
}

.cis-pagination {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cis-pagination__btn,
.cis-pagination__page {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong);
}

.cis-pagination__btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.cis-pagination__page.is-active {
    background: var(--siith-primary, #40327e);
    border-color: var(--siith-primary, #40327e);
    color: #fff;
}

.cis-detalle {
    padding: 18px !important;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cis-detalle__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cis-perfil__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.cis-perfil__nombre {
    margin: 0 8px 0 0;
    display: inline;
    font-size: 20px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.cis-corte {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.cis-corte__field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    color: var(--siith-text-strong);
}

.cis-corte__field input {
    border: 0;
    outline: 0;
    font: inherit;
    background: transparent;
}

.cis-perfil__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 18px;
}

.cis-perfil__grid label {
    display: block;
    font-size: 12px;
    color: var(--siith-text-muted);
    margin-bottom: 2px;
}

.cis-perfil__grid span {
    font-size: 13px;
    color: var(--siith-text-strong);
    font-weight: 500;
}

.cis-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.cis-metric {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
    min-height: 96px;
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-sm);
    box-shadow: var(--siith-shadow-sm);
    background: #fff;
}

.cis-metric__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cis-metric--a .cis-metric__icon { background: #efeaff; color: #6d28d9; }
.cis-metric--b1 .cis-metric__icon { background: #fff4e8; color: #c2410c; }
.cis-metric--b2 .cis-metric__icon { background: #e8f2ff; color: #1d4ed8; }
.cis-metric--saldo .cis-metric__icon { background: #e8f8ef; color: #15803d; }

.cis-metric__label {
    display: block;
    font-size: 12px;
    color: var(--siith-text-muted);
    margin-bottom: 4px;
}

.cis-metric__value strong {
    font-size: 22px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.cis-metric__value em {
    font-style: normal;
    font-size: 13px;
    color: var(--siith-text-muted);
}

.cis-totales {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #eef6ff;
    color: #1e3a5f;
    font-size: 13px;
}

.cis-totales strong {
    font-weight: 700;
}

.cis-movimientos__head h3 {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.cis-movimientos__head p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--siith-text-muted);
}

.cis-table-wrap {
    overflow: auto;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 10px;
}

.cis-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cis-table thead th {
    text-align: left;
    padding: 10px 12px;
    background: #f8fafc;
    color: var(--siith-text-muted);
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--siith-border, #e5e7eb);
}

.cis-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--siith-text-strong);
    vertical-align: middle;
}

.cis-table tbody tr:last-child td {
    border-bottom: 0;
}

.cis-table__num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.cis-table__empty {
    text-align: center;
    color: var(--siith-text-muted);
    padding: 24px 12px !important;
}

.cis-table__accion {
    text-align: center;
}

.cis-eye {
    display: inline-flex;
    color: var(--siith-primary, #40327e);
    padding: 4px;
    border-radius: 6px;
}

.cis-eye:hover {
    background: var(--siith-primary-soft, #f3f0ff);
}

.cis-movimientos__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.cis-mov-pager {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cis-mov-pager__size select {
    height: 30px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 6px;
    padding: 0 8px;
    font: inherit;
    background: #fff;
}

.cis-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #eef6ff;
    color: #1e3a5f;
    font-size: 13px;
}

.cis-info p {
    margin: 0;
}

/* Consulta individual, Permisos autorizados, Liquidación, Comisión, Licencia,
   Saldos iniciales, Subrogación, Encargo, Vacaciones anticipadas,
   Permisos extemporáneos y Habilitación marcación: paneles alineados */
.cis-consulta-page.cis-page,
.pas-page.cis-page,
.liq-page.cis-page,
.com-page.cis-page,
#msi-app.msi-page,
#rsb-app.rsb-page,
#edr-app.rsb-page,
#csb-app.csb-page,
#ced-app.csb-page,
#hva-app.hva-page,
#hpe-app.hpe-page,
#hse-app.hse-page {
    padding: 16px 24px 24px;
    gap: 0;
}

.permisos-modulo .cis-consulta-page > .cis-page__header,
.permisos-direct-panel .cis-consulta-page > .cis-page__header,
.permisos-modulo .pas-page > .cis-page__header,
.permisos-direct-panel .pas-page > .cis-page__header,
.permisos-modulo .liq-page > .cis-page__header,
.permisos-direct-panel .liq-page > .cis-page__header,
.permisos-modulo .com-page > .cis-page__header,
.permisos-direct-panel .com-page > .cis-page__header,
.permisos-modulo #msi-app > .cis-page__header,
.permisos-direct-panel #msi-app > .cis-page__header,
.permisos-modulo #rsb-app > .cis-page__header,
.permisos-direct-panel #rsb-app > .cis-page__header,
.permisos-modulo #edr-app > .cis-page__header,
.permisos-direct-panel #edr-app > .cis-page__header,
.permisos-modulo #csb-app > .cis-page__header,
.permisos-direct-panel #csb-app > .cis-page__header,
.permisos-modulo #ced-app > .cis-page__header,
.permisos-direct-panel #ced-app > .cis-page__header,
.permisos-modulo #hva-app > .cis-page__header,
.permisos-direct-panel #hva-app > .cis-page__header,
.permisos-modulo #hpe-app > .cis-page__header,
.permisos-direct-panel #hpe-app > .cis-page__header,
.permisos-modulo #hse-app > .cis-page__header,
.permisos-direct-panel #hse-app > .cis-page__header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.cis-consulta-page .cis-layout > .siith-card,
.pas-page .cis-layout > .siith-card,
.liq-page .cis-layout > .siith-card,
.com-page .cis-layout > .siith-card,
#msi-app .cis-layout > .siith-card,
#csb-app .cis-layout > .siith-card,
#ced-app .cis-layout > .siith-card,
#hva-app .cis-layout > .siith-card,
#hpe-app .cis-layout > .siith-card,
#hse-app .cis-layout > .siith-card {
    margin-top: 0 !important;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.cis-consulta-page .cis-lista,
.pas-page .cis-lista,
.liq-page .cis-lista,
.com-page .cis-lista,
#msi-app .cis-lista,
#csb-app .cis-lista,
#ced-app .cis-lista,
#hva-app .cis-lista,
#hpe-app .cis-lista,
#hse-app .cis-lista {
    overflow: hidden;
}

.cis-consulta-page .cis-detalle,
.pas-page .cis-detalle,
.liq-page .cis-detalle,
.com-page .cis-detalle,
#msi-app .cis-detalle,
#csb-app .cis-detalle,
#ced-app .cis-detalle,
#hva-app .cis-detalle,
#hpe-app .cis-detalle,
#hse-app .cis-detalle {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
}

.cis-consulta-page .cis-detalle__bar,
.pas-page .cis-detalle__bar,
.com-page .cis-detalle__bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--siith-border, #e5e7eb);
}

.cis-consulta-page .cis-detalle__body,
.pas-page .cis-detalle__body,
.liq-page .cis-detalle__body,
.com-page .cis-detalle__body,
#msi-app .cis-detalle__body,
#csb-app .cis-detalle__body,
#ced-app .cis-detalle__body,
#hva-app .cis-detalle__body,
#hpe-app .cis-detalle__body,
#hse-app .cis-detalle__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.cis-consulta-page .cis-detalle__body > .cis-detalle__empty,
.cis-consulta-page .cis-detalle__body > .cis-detalle__loading,
.pas-page .cis-detalle__body > .cis-detalle__empty,
.pas-page .cis-detalle__body > .cis-detalle__loading,
.liq-page .cis-detalle__body > .cis-detalle__empty,
.liq-page .cis-detalle__body > .cis-detalle__loading,
.com-page .cis-detalle__body > .cis-detalle__empty,
.com-page .cis-detalle__body > .cis-detalle__loading,
#msi-app .cis-detalle__body > .cis-detalle__empty,
#msi-app .cis-detalle__body > .cis-detalle__loading,
#csb-app .cis-detalle__body > .cis-detalle__empty,
#csb-app .cis-detalle__body > .cis-detalle__loading,
#ced-app .cis-detalle__body > .cis-detalle__empty,
#ced-app .cis-detalle__body > .cis-detalle__loading,
#hva-app .cis-detalle__body > .cis-detalle__empty,
#hva-app .cis-detalle__body > .cis-detalle__loading,
#hpe-app .cis-detalle__body > .cis-detalle__empty,
#hpe-app .cis-detalle__body > .cis-detalle__loading,
#hse-app .cis-detalle__body > .cis-detalle__empty,
#hse-app .cis-detalle__body > .cis-detalle__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    box-sizing: border-box;
}

.permisos-tab-panel-host:has(.cis-page) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.permisos-tab-panel-host:has(.cis-page) .cis-page,
.permisos-direct-panel:has(.cis-page) .cis-page {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.permisos-direct-panel:has(.cis-page) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.permisos-modulo [id^="visor_fn_"] .tabs-panels .panel-body:has(.cis-page) {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

@media (max-width: 1200px) {
    .cis-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cis-perfil__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .cis-layout {
        grid-template-columns: 1fr;
        align-items: start;
        overflow-y: auto;
        height: auto;
    }
    .cis-lista,
    .cis-detalle {
        height: auto;
        max-height: none;
    }
    .cis-servidores {
        max-height: 36vh;
    }
    .cis-detalle {
        max-height: 70vh;
    }
}

@media (max-width: 700px) {
    .cis-metrics,
    .cis-perfil__grid {
        grid-template-columns: 1fr;
    }
}

/* —— Permisos autorizados por servidor —— */
.pas-perfil__cedula {
    text-align: right;
}

.pas-perfil__cedula label {
    display: block;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.pas-perfil__cedula span {
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-text-strong);
}

.pas-filtros-hist h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.pas-filtros-hist {
    padding: 16px !important;
}

.pas-filtros-hist__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
}

.pas-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.pas-field input,
.pas-field select {
    height: 40px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: var(--siith-radius-sm, 8px);
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong);
    background: #fff;
}

.pas-filtros-hist__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.pas-metric__vac strong,
.pas-metric--vac .cis-metric__value strong {
    color: #15803d;
}

.pas-historial__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pas-cols {
    position: relative;
}

.pas-cols__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 220px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.pas-cols__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    font-size: 13px;
    color: var(--siith-text-strong);
    cursor: pointer;
    border-radius: 6px;
}

.pas-cols__item:hover {
    background: #f8f7fc;
}

.pas-doc {
    color: var(--siith-primary, #40327e);
}

.permisos-tab-panel-host:has(.pas-page),
.permisos-direct-panel:has(.pas-page) {
    overflow: hidden;
}

@media (max-width: 1200px) {
    .pas-filtros-hist__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .pas-filtros-hist__grid {
        grid-template-columns: 1fr;
    }
    .pas-perfil__cedula {
        text-align: left;
    }
}

@media print {
    .pas-print-hide,
    .cis-page__actions,
    .cis-consulta-page .cis-detalle__bar,
    .pas-page .cis-detalle__bar,
    .com-page .cis-detalle__bar,
    .pas-filtros-hist,
    .pas-cols,
    .layout-panel-west,
    .panel-header {
        display: none !important;
    }
    .cis-layout {
        grid-template-columns: 1fr !important;
    }
    .pas-page {
        padding: 0;
    }
}

/* —— Liquidación de vacaciones —— */
.liq-cedula {
    margin-top: 4px;
    font-size: 13px;
    color: var(--siith-text-muted);
}

.liq-info h3 {
    margin: 8px 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.liq-info__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
}

.liq-info__grid label {
    display: block;
    font-size: 12px;
    color: var(--siith-text-muted);
    margin-bottom: 2px;
}

.liq-info__grid span {
    font-size: 13px;
    font-weight: 500;
    color: var(--siith-text-strong);
}

.liq-valid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.liq-valid h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.liq-valid > p {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--siith-text-muted);
}

.liq-valid__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 10px;
    background: #fff;
}

.liq-valid__check {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.liq-valid__check.is-ok {
    background: #e8f8ef;
    color: #15803d;
}

.liq-valid__check.is-warn {
    background: #fff7ed;
    color: #c2410c;
}

.liq-valid__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.liq-valid__body strong {
    font-size: 13px;
    color: var(--siith-text-strong);
}

.liq-valid__body span {
    font-size: 12px;
    color: var(--siith-text-muted);
}

.liq-valid__list {
    margin: -2px 0 4px;
    padding: 0 2px 4px;
}

.liq-valid__list .cis-table-wrap {
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 10px;
    overflow: auto;
}

.liq-mov-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.liq-valid__list .cis-movimientos__foot {
    flex-wrap: wrap;
    gap: 8px;
}

.liq-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--siith-primary, #40327e);
    background: var(--siith-primary-soft, #f3f0ff);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.liq-doc-link:hover,
.liq-doc-link:focus {
    background: #ddd6fe;
    color: var(--siith-primary, #40327e);
    text-decoration: none;
}

.liq-doc-link svg {
    flex: 0 0 auto;
}

.liq-doc-empty {
    font-size: 12px;
    color: var(--siith-text-muted, #6b7280);
}

.liq-saldos-ini {
    margin-top: 8px;
}

.liq-emit {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px;
    border-radius: 12px;
}

.liq-emit.is-ok {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.liq-emit.is-warn {
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.liq-emit__text strong {
    display: block;
    font-size: 14px;
    color: #166534;
    margin-bottom: 4px;
}

.liq-emit.is-warn .liq-emit__text strong {
    color: #9a3412;
}

.liq-emit__text p {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--siith-text-strong);
}

.liq-emit__text em {
    font-style: normal;
    font-size: 12px;
    color: #15803d;
}

.liq-emit__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.permisos-tab-panel-host:has(.liq-page),
.permisos-direct-panel:has(.liq-page) {
    overflow: hidden;
}

@media (max-width: 700px) {
    .liq-info__grid {
        grid-template-columns: 1fr;
    }
}

/* —— Comisión de servicios —— */
.siith-badge--primary {
    color: var(--siith-primary-dark, #40327e);
    background: var(--siith-primary-soft, #f3f0fa);
}

.com-info__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.com-info__head h3 {
    margin: 0;
}

.com-corte span {
    font-size: 12px;
    color: var(--siith-text-muted);
}

.com-mov-filtros {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 160px 160px;
    gap: 12px;
    margin: 0 0 12px;
    align-items: end;
}

.com-calc {
    padding: 14px 16px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 12px;
    background: #fff;
}

.com-calc h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.com-calc p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--siith-text-muted);
}

.com-calc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.com-calc li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--siith-text-strong);
}

.com-calc__total {
    padding-top: 8px;
    border-top: 1px solid var(--siith-border, #e5e7eb);
    font-weight: 700;
}

.com-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.com-foot .cis-info {
    flex: 1 1 280px;
    background: var(--siith-primary-soft, #f3f0fa);
    color: var(--siith-primary-dark, #40327e);
}

.com-page .cis-totales,
.lsr-page .cis-totales {
    background: var(--siith-primary-soft, #f3f0fa);
    color: var(--siith-primary-dark, #40327e);
}

.com-foot__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.permisos-tab-panel-host:has(.com-page),
.permisos-direct-panel:has(.com-page),
.permisos-tab-panel-host:has(.lsr-page),
.permisos-direct-panel:has(.lsr-page) {
    overflow: hidden;
}

@media (max-width: 900px) {
    .com-mov-filtros {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .com-mov-filtros {
        grid-template-columns: 1fr;
    }
}

/* —— Saldos iniciales —— */
.msi-access {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--siith-primary-soft, #f3f0fa);
    color: var(--siith-primary-dark, #40327e);
    font-size: 12px;
    font-weight: 600;
}

.msi-page .cis-scroll {
    min-height: 0;
}

.msi-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding: 12px 4px 0;
}

.msi-foot__warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #b45309;
    font-size: 13px;
    line-height: 1.45;
    max-width: 720px;
}

.msi-foot__actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.msi-perfil {
    display: flex;
    align-items: center;
    gap: 14px;
}

.msi-perfil__avatar {
    width: 52px !important;
    height: 52px !important;
    font-size: 16px;
}

.msi-perfil__meta h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.msi-perfil__sub {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--siith-text-muted);
}

.msi-info h3,
.msi-form-wrap h3,
.msi-hist h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.msi-info__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 18px;
}

.msi-info__grid label {
    display: block;
    font-size: 12px;
    color: var(--siith-text-muted);
    margin-bottom: 2px;
}

.msi-info__grid span {
    font-size: 13px;
    font-weight: 500;
    color: var(--siith-text-strong);
}

.msi-status {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.msi-status__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 12px;
    background: #fff;
}

.msi-status__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #efeaff;
    color: #6d28d9;
}

.msi-status__icon--hist {
    background: #e8f2ff;
    color: #1d4ed8;
}

.msi-status__card label {
    display: block;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.msi-status__card strong {
    font-size: 16px;
    color: var(--siith-text-strong);
}

.msi-form-wrap .siith-form-field input[readonly] {
    background: #f8fafc;
    color: var(--siith-text-muted);
}

.msi-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 120px;
    padding: 18px 16px;
    border: 1.5px dashed #c4b5fd;
    border-radius: 12px;
    background: #faf8ff;
    color: var(--siith-primary-dark, #40327e);
    text-align: center;
    cursor: pointer;
}

.msi-drop strong {
    font-size: 13px;
}

.msi-drop span {
    font-size: 12px;
    color: var(--siith-text-muted);
    font-weight: 400;
}

.msi-drop.is-over,
.msi-drop:hover {
    border-color: var(--siith-primary, #40327e);
    background: #f3f0ff;
}

.msi-drop.is-file {
    cursor: default;
}

.msi-drop__remove {
    margin-top: 4px;
    border: 0;
    background: transparent;
    color: var(--siith-primary, #40327e);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.msi-comp {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #eef6ff;
    color: #1e3a5f;
    font-size: 13px;
}

.msi-comp em {
    font-style: normal;
    font-weight: 700;
}

.msi-comp em.is-plus { color: #15803d; }
.msi-comp em.is-minus { color: #b91c1c; }

.msi-hist-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--siith-text-muted);
}

.msi-hist-empty svg {
    display: block;
    margin: 0 auto 8px;
    opacity: 0.55;
}

.msi-hist-empty p {
    margin: 0;
    font-size: 14px;
}

.msi-table td {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msi-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

.msi-link:hover {
    text-decoration: underline;
}

.msi-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.45);
}

.msi-modal[hidden] {
    display: none !important;
}

.msi-modal__dialog {
    width: min(480px, 100%);
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px 20px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    text-align: center;
}

.msi-modal__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    color: #ea580c;
}

.msi-modal__dialog h2 {
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--siith-text-strong);
}

.msi-modal__text {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--siith-text-muted);
    line-height: 1.5;
}

.msi-modal__dl {
    margin: 0 0 20px;
    text-align: left;
    display: grid;
    gap: 8px;
}

.msi-modal__dl div {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px;
    font-size: 13px;
}

.msi-modal__dl dt {
    color: var(--siith-text-muted);
    font-weight: 500;
}

.msi-modal__dl dd {
    margin: 0;
    color: var(--siith-text-strong);
    font-weight: 600;
}

.msi-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.msi-toolbar {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.msi-masiva[hidden],
#msi-individual[hidden],
#msi-foot[hidden],
#msi-masiva-resumen[hidden],
#msi-masiva-cedulas[hidden] {
    display: none !important;
}

.msi-masiva {
    overflow: auto;
    gap: 16px;
    padding-bottom: 8px;
}

.msi-masiva h2 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.msi-masiva__form > p,
.msi-masiva__hint {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--siith-text-muted);
}

.msi-masiva__hint {
    display: block;
    margin-top: 8px;
}

.msi-masiva__actions,
.msi-masiva__hist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.msi-masiva__actions {
    margin-top: 16px;
}

.msi-masiva__hist-head span {
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-primary-dark, #40327e);
}

.msi-resumen__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.msi-resumen__card {
    padding: 14px 16px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid var(--siith-border, #e5e7eb);
}

.msi-resumen__card strong {
    display: block;
    font-size: 22px;
    line-height: 1.1;
    color: var(--siith-text-strong);
}

.msi-resumen__card span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.msi-resumen__card--ok {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.msi-resumen__card--ok strong {
    color: #15803d;
}

.msi-resumen__card--warn {
    background: #fff7ed;
    border-color: #fed7aa;
}

.msi-resumen__card--warn strong {
    color: #c2410c;
}

.msi-cedulas {
    max-height: 220px;
    overflow: auto;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px 12px;
}

.msi-cedulas li {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--siith-text-strong);
}

.msi-masiva__veces {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--siith-text-muted);
}

@media (max-width: 900px) {
    .msi-resumen__cards {
        grid-template-columns: 1fr 1fr;
    }
}

.permisos-tab-panel-host:has(.msi-page),
.permisos-direct-panel:has(.msi-page) {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .msi-info__grid,
    .msi-status {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .msi-info__grid,
    .msi-status {
        grid-template-columns: 1fr;
    }
}

/* —— Registrar subrogación —— */
.rsb-page .cis-scroll,
.rsb-scroll {
    min-height: 0;
    overflow: auto;
    gap: 16px;
}

.rsb-pair,
.rsb-grid {
    display: grid;
    gap: 16px;
    align-items: stretch;
}

.rsb-pair {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.rsb-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.rsb-pair .siith-card + .siith-card,
.rsb-grid .siith-card + .siith-card {
    margin-top: 0;
}

.rsb-pair .rsb-card,
.rsb-grid .rsb-card {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.rsb-card h2 {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.rsb-search {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 16px;
}

.rsb-search .cis-filtros__buscar {
    flex: 1 1 auto;
    min-width: 0;
}

.rsb-search .siith-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.rsb-arrow {
    align-self: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--siith-primary-soft, #f3f0fa);
    color: var(--siith-primary-dark, #40327e);
}

.rsb-persona--empty {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-radius: 12px;
    background: #f8f7fc;
    color: var(--siith-text-muted);
    text-align: center;
}

.rsb-persona--empty p {
    margin: 0;
    font-size: 13px;
}

.rsb-persona__card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.rsb-persona__avatar {
    width: 56px !important;
    height: 56px !important;
    font-size: 16px;
}

.rsb-persona__meta {
    min-width: 0;
    flex: 1;
}

.rsb-persona__meta strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.rsb-persona__sub {
    margin: 6px 0 10px;
}

.rsb-persona__meta dl {
    margin: 0;
    display: grid;
    gap: 6px;
}

.rsb-persona__meta dl div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 8px;
    font-size: 13px;
}

.rsb-persona__meta dt {
    color: var(--siith-text-muted);
    font-weight: 500;
}

.rsb-persona__meta dd {
    margin: 0;
    color: var(--siith-text-strong);
}

.rsb-pick {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
}

.rsb-pick__item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    padding: 10px 12px;
    cursor: pointer;
    font: inherit;
}

.rsb-pick__item:hover {
    border-color: #ddd6fe;
    background: #faf8ff;
}

.rsb-pick__item strong {
    font-size: 13px;
    color: var(--siith-text-strong);
}

.rsb-pick__item span {
    font-size: 12px;
    color: var(--siith-text-muted);
}

.rsb-duracion {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--siith-primary-soft, #f3f0fa);
    color: var(--siith-primary-dark, #40327e);
    font-weight: 700;
}

.rsb-card textarea {
    min-height: 160px;
}

.rsb-alerta {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
}

.rsb-alerta--info {
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.rsb-alerta--success {
    color: #166534;
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
}

.rsb-alerta--error {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.rsb-audit {
    margin-top: 0;
}

.rsb-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding-top: 12px;
    border-top: 1px solid var(--siith-border-light, #eee);
}

.rsb-resumen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    color: var(--siith-text-muted);
}

.rsb-resumen strong {
    color: var(--siith-text-strong);
    font-weight: 600;
}

.rsb-resumen em {
    font-style: normal;
    color: var(--siith-text-muted);
}

.rsb-resumen__arrow {
    color: var(--siith-primary-dark, #40327e);
    font-weight: 700;
}

.rsb-mini {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px;
}

.rsb-modal__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f0fa;
    color: var(--siith-primary-dark, #40327e);
}

.permisos-tab-panel-host:has(.rsb-page),
.permisos-direct-panel:has(.rsb-page) {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .rsb-pair,
    .rsb-grid {
        grid-template-columns: 1fr;
    }

    .rsb-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }
}

/* —— Consulta de subrogaciones —— */
.csb-filtros-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.csb-item {
    align-items: flex-start;
}

.csb-item .siith-badge {
    margin-left: auto;
    flex-shrink: 0;
}

.csb-item .cis-servidor__meta {
    flex: 1;
    min-width: 0;
}

.csb-detalle {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.csb-detalle__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.csb-detalle__head h2 {
    margin: 0 0 6px;
    font-size: 20px;
    color: var(--siith-text-strong);
}

.csb-detalle__sub {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--siith-text-muted);
}

.csb-detalle__actions,
.csb-detalle__foot {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.csb-detalle__foot {
    justify-content: flex-end;
    padding-top: 4px;
}

.csb-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.csb-card {
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
}

.csb-card h3 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--siith-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.csb-persona {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.csb-persona__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.csb-persona__meta strong {
    font-size: 14px;
    color: var(--siith-text-strong);
}

.csb-persona__meta span,
.csb-persona__meta em {
    font-size: 12px;
    font-style: normal;
    color: var(--siith-text-muted);
}

.csb-info h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.csb-info__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
}

.csb-info__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.csb-info__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--siith-primary-soft, #f3f0fa);
    color: var(--siith-primary-dark, #40327e);
    flex-shrink: 0;
}

.csb-info__item label {
    display: block;
    font-size: 12px;
    color: var(--siith-text-muted);
    margin-bottom: 2px;
}

.csb-info__item strong {
    font-size: 13px;
    color: var(--siith-text-strong);
    font-weight: 600;
}

.csb-obs {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--siith-text-muted);
}

.csb-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    position: relative;
}

.csb-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    position: relative;
}

.csb-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 11px;
    left: calc(50% + 16px);
    width: calc(100% - 32px);
    height: 3px;
    background: #ddd6fe;
}

.csb-step.is-done:not(:last-child)::after {
    background: var(--siith-primary, #40327e);
}

.csb-step__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: #ede9fe;
    color: var(--siith-primary-dark, #40327e);
    z-index: 1;
}

.csb-step.is-done .csb-step__dot {
    background: var(--siith-primary, #40327e);
    color: #fff;
}

.csb-step strong {
    font-size: 12px;
    color: var(--siith-text-strong);
}

.csb-step em {
    font-size: 11px;
    font-style: normal;
    color: var(--siith-text-muted);
}

.csb-modal__dialog {
    width: min(560px, 100%);
    text-align: left;
}

.csb-hist-body {
    display: grid;
    gap: 8px;
    max-height: 320px;
    overflow: auto;
    margin-bottom: 16px;
}

.csb-hist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    padding: 10px 12px;
    cursor: pointer;
    font: inherit;
}

.csb-hist-item:hover {
    background: #faf8ff;
}

.csb-hist-item strong,
.csb-hist-item em {
    display: block;
}

.csb-hist-item em {
    font-style: normal;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.csb-hist-empty {
    margin: 0;
    color: var(--siith-text-muted);
    font-size: 13px;
}

.permisos-tab-panel-host:has(.csb-page),
.permisos-direct-panel:has(.csb-page) {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .csb-pair,
    .csb-info__grid,
    .csb-steps {
        grid-template-columns: 1fr;
    }

    .csb-pair .rsb-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }

    .csb-step:not(:last-child)::after {
        display: none;
    }
}

/* —— Habilitar vacaciones anticipadas —— */
.hva-page .cis-scroll {
    min-height: 0;
}

.hva-info__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hva-info__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.hva-info__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #efeaff;
    color: #6d28d9;
    flex-shrink: 0;
}

.hva-status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hva-form__head h3 {
    margin: 0 0 14px;
}

.hva-switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    margin-bottom: 14px;
}

.hva-switch-row__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #efeaff;
    color: #6d28d9;
}

.hva-switch-row__text {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--siith-text-strong);
}

.hva-switch {
    position: relative;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

.hva-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.hva-switch__ui {
    display: block;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #d1d5db;
    position: relative;
    transition: background 0.15s ease;
}

.hva-switch__ui::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform 0.15s ease;
}

.hva-switch input:checked + .hva-switch__ui {
    background: var(--siith-primary, #40327e);
}

.hva-switch input:checked + .hva-switch__ui::after {
    transform: translateX(20px);
}

.hva-form__body.is-disabled {
    opacity: 0.55;
}

.hva-warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 13px;
    line-height: 1.45;
}

.hva-warn[hidden],
.vte-alerta[hidden] {
    display: none !important;
}

.hva-audit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-top: 16px;
    border-radius: 12px;
    background: var(--siith-primary-soft, #f3f0fa);
    color: var(--siith-primary-dark, #40327e);
    font-size: 13px;
    line-height: 1.45;
}

.hva-form .siith-form-field textarea {
    min-height: 86px;
    resize: vertical;
}

.hva-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.hva-modal__icon {
    background: #efeaff;
    color: #6d28d9;
}

.hva-modal__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--siith-text-muted);
}

.hva-dd-ok {
    color: #15803d !important;
    font-weight: 700;
}

.hva-page .cis-pagination__page.is-active {
    min-width: auto;
    padding: 0 10px;
}

.permisos-tab-panel-host:has(.hva-page),
.permisos-direct-panel:has(.hva-page) {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .hva-info__grid,
    .hva-status {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .hva-info__grid,
    .hva-status {
        grid-template-columns: 1fr;
    }
}

/* —— Habilitar permisos extemporáneos —— */
.hpe-req {
    color: #dc2626;
}

.msi-status__icon--off {
    background: #f3f4f6;
    color: #6b7280;
}

.hpe-ok {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-top: 16px;
    border-radius: 12px;
    background: #ecfdf5;
    color: #047857;
    font-size: 13px;
    line-height: 1.45;
}

#hpe-banner-rango .hva-warn {
    margin-top: 16px;
    margin-bottom: 0;
}

.permisos-tab-panel-host:has(.hpe-page),
.permisos-direct-panel:has(.hpe-page) {
    overflow: hidden;
}

/* —— Actualizar responsable de unidad desconcentrada —— */
.rud-page .cis-scroll {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
}

.rud-page .rud-card {
    flex-shrink: 0;
}

.rud-card h2 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--siith-primary-dark, #40327e);
}

.rud-unidad-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.rud-unidad-field {
    flex: 1 1 280px;
    min-width: 0;
}

.rud-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    margin-bottom: 18px;
}

.rud-box {
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
    min-width: 0;
}

.rud-box h3 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--siith-text-muted);
}

.rud-box .rsb-persona__sub {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 6px 0 0;
}

.siith-form-grid.rud-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rud-form-grid textarea {
    min-height: 86px;
    resize: vertical;
}

.rud-audit {
    margin-top: 16px;
}

.rud-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.rud-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.rud-toolbar .cis-filtros__buscar {
    flex: 1 1 220px;
    min-width: 180px;
}

.rud-toolbar select {
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    background: #fff;
}

.rud-exportar {
    margin-left: auto;
}

.rud-table tbody tr {
    cursor: pointer;
}

.rud-table tbody tr:hover td {
    background: #faf8ff;
}

.rud-table tbody tr.is-selected td {
    background: var(--siith-primary-soft, #f3f0fa);
}

.rud-ver {
    border: 0;
    background: transparent;
    color: var(--siith-primary-dark, #40327e);
    padding: 4px;
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
}

.rud-ver:hover {
    background: #efeaff;
}

.rud-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.rud-table-foot__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rud-pagesize select {
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    background: #fff;
}

.permisos-tab-panel-host:has(.rud-page),
.permisos-direct-panel:has(.rud-page) {
    overflow: hidden;
}

@media (max-width: 900px) {
    .rud-pair {
        grid-template-columns: 1fr;
    }

    .rud-pair .rsb-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }

    .siith-form-grid.rud-form-grid {
        grid-template-columns: 1fr;
    }

    .rud-exportar {
        margin-left: 0;
    }
}

/* —— Habilitar marcación esporádica —— */
.hme-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hme-metric-fecha {
    font-size: 16px !important;
    font-weight: 700;
}

.hme-estado--warning {
    color: #c2410c !important;
}

.hme-estado--success {
    color: #166534 !important;
}

.hme-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: stretch;
}

.hme-layout > .siith-card {
    margin-top: 0 !important;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.hme-form,
.hme-resumen {
    padding: 20px !important;
    overflow: visible;
}

.hme-picker-wrap[hidden] {
    display: none !important;
}

.hme-form__title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--siith-text-strong);
}

.hme-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
}

.hme-form__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hme-page .hva-switch-row {
    margin-bottom: 0;
}

.hme-page .hva-switch-row__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hme-page .hva-switch-row__text em {
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    color: var(--siith-text-muted);
}

.hme-alcance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--siith-border, #e5e7eb);
    border-radius: 12px;
    background: #f8fafc;
}

.hme-alcance__btn {
    border: 0;
    background: transparent;
    border-radius: 9px;
    min-height: 34px;
    padding: 6px 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--siith-text-muted);
    cursor: pointer;
}

.hme-alcance__btn.is-active {
    background: var(--siith-primary, #40327e);
    color: #fff;
    box-shadow: 0 1px 2px rgba(64, 50, 126, 0.25);
}

.hme-picker {
    position: relative;
}

.hme-picker__search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: #fff;
}

.hme-picker__search input {
    border: 0;
    outline: none;
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 13px;
    background: transparent;
}

.hme-picker__list {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 42px;
    max-height: 220px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--siith-border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.hme-picker__item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: #fff;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.hme-picker__item:hover {
    background: #f5f3ff;
}

.hme-picker__empty {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.hme-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.hme-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 8px 5px 10px;
    border-radius: 999px;
    background: #efeaff;
    color: #4c1d95;
    font-size: 12px;
    font-weight: 600;
}

.hme-chip button {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}

.hme-picker__hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.hme-hora__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hme-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
}

.hme-checks label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--siith-text-strong);
}

.hme-page textarea {
    min-height: 96px;
    padding: 10px 12px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    font: inherit;
    font-size: 13px;
    resize: vertical;
}

.hme-counter {
    display: block;
    margin-top: 4px;
    text-align: right;
    font-size: 11px;
    font-style: normal;
    color: var(--siith-text-muted);
}

.hme-resumen__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.hme-resumen__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.hme-resumen__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #efeaff;
    color: #6d28d9;
    flex-shrink: 0;
}

.hme-resumen__list em {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.hme-resumen__list strong {
    font-size: 13px;
    color: var(--siith-text-strong);
}

.hme-foot {
    margin-top: 16px;
    padding-top: 0;
}

.hme-page .hva-audit {
    margin: 0;
    background: #eef6ff;
    color: #1d4ed8;
}

#hme-modal .hva-modal__note {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
}

.permisos-tab-panel-host:has(.hme-page),
.permisos-direct-panel:has(.hme-page) {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .hme-layout,
    .hme-form__grid,
    .hme-metrics,
    .hme-alcance,
    .hme-hora__grid,
    .hme-checks {
        grid-template-columns: 1fr;
    }
}

/* —— Vacaciones del equipo —— */
.vte-unidad {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px !important;
    margin-bottom: 16px;
}

.vte-unidad__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f2ff;
    color: #1d4ed8;
    flex-shrink: 0;
}

.vte-unidad__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    width: 100%;
}

.vte-unidad__grid label {
    display: block;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.vte-unidad__grid strong {
    font-size: 14px;
    color: var(--siith-text-strong);
}

.vte-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vte-metric .rm-cal-metric__value em,
#vte-metric-promedio em {
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    color: var(--siith-text-muted);
    margin-left: 2px;
}

.vte-tabla-head {
    align-items: flex-start;
}

.vte-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.vte-buscar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    min-width: 220px;
    padding: 0 10px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: #fff;
}

.vte-buscar input {
    border: 0;
    outline: none;
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 13px;
}

.vte-filtros select {
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    font: inherit;
    font-size: 13px;
    background: #fff;
}

.vte-contador {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-text-muted);
}

.vte-alerta {
    margin: 0 0 12px;
}

.vte-table td:first-child {
    white-space: normal;
}

.vte-table .vte-servidor {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.vte-table .vte-servidor strong,
.vte-table .vte-servidor em {
    display: block;
}

.vte-table .vte-servidor em {
    font-style: normal;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.vte-table .cis-servidor__avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
    flex-shrink: 0;
}

.vte-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.vte-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.vte-pill--alto {
    background: #fff7ed;
    color: #c2410c;
}

.vte-pill--ok {
    background: #ecfdf3;
    color: #166534;
}

.vte-sin {
    color: var(--siith-text-muted);
}

.vte-ver {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--siith-border);
    border-radius: 8px;
    background: #fff;
    color: var(--siith-primary-dark, #40327e);
    cursor: pointer;
}

.vte-ver:hover {
    background: #f5f3ff;
}

.vte-detalle-bar {
    flex-shrink: 0;
    padding: 12px 24px 0;
}

#vte-vista-lista,
#vte-vista-detalle {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

#vte-vista-lista[hidden],
#vte-vista-detalle[hidden] {
    display: none !important;
}

#vte-detalle-host {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.vte-page .rm-cal-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.vte-table {
    min-width: 980px;
}

.permisos-tab-panel-host:has(.vte-page),
.permisos-direct-panel:has(.vte-page) {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .vte-metrics,
    .vte-unidad__grid {
        grid-template-columns: 1fr 1fr;
    }

    .vte-contador {
        margin-left: 0;
    }
}

/* —— Permisos aprobados del equipo —— */
.pae-page .rm-cal-scroll {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pae-page .pae-top {
    flex-shrink: 0;
    padding: 0;
}

.pae-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pae-metric-icon-time {
    color: #1d4ed8;
    background: #e8f2ff;
}

#pae-metric-tiempo em {
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    color: var(--siith-text-muted);
    margin-left: 2px;
}

.pae-layout {
    flex: 1 1 auto;
    min-height: 420px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    padding: 0;
    align-items: stretch;
}

.pae-layout > .siith-card + .siith-card {
    margin-top: 0;
}

.pae-lista,
.pae-detalle {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0 !important;
}

.pae-detalle > .pae-detalle__inner,
.pae-detalle > .pae-detalle__empty {
    flex: 1 1 auto;
    min-height: 0;
}

.pae-lista__head {
    flex-shrink: 0;
    padding: 16px 16px 12px;
}

.pae-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.pae-buscar {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    min-width: 180px;
    padding: 0 10px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: #fff;
    color: var(--siith-text-muted);
}

.pae-buscar input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong);
    min-width: 0;
}

.pae-periodo {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: #fff;
    overflow: hidden;
}

.pae-periodo .pae-filtros__select {
    border: 0;
    border-radius: 0;
    min-height: 36px;
}

.pae-periodo .pae-filtros__select + .pae-filtros__select {
    border-left: 1px solid var(--siith-border);
}

.pae-filtros__select {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: var(--siith-text-strong);
}

.pae-limpiar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pae-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pae-table {
    min-width: 720px;
}

.pae-table tbody tr.pae-row {
    cursor: pointer;
}

.pae-table tbody tr.pae-row:hover {
    background: #f8f7fc;
}

.pae-table tbody tr.pae-row.is-selected {
    background: var(--siith-primary-soft, #f3f0ff);
    box-shadow: inset 3px 0 0 var(--siith-primary, #40327e);
}

.pae-servidor {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.pae-servidor__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pae-servidor__meta strong {
    font-size: 13px;
    color: var(--siith-text-strong);
}

.pae-servidor__meta em {
    font-style: normal;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.pae-detalle__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--siith-text-muted);
    font-size: 13px;
}

.pae-detalle__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.pae-detalle__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--siith-border-light);
}

.pae-detalle__avatar {
    width: 44px;
    height: 44px;
    font-size: 14px;
}

.pae-detalle__who {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pae-detalle__who strong {
    font-size: 15px;
    color: var(--siith-text-strong);
}

.pae-detalle__who em {
    font-style: normal;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.pae-detalle__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px 8px;
}

.pae-detalle__dl {
    margin: 0;
    display: grid;
    gap: 10px 0;
}

.pae-detalle__dl > div {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--siith-border-light);
}

.pae-detalle__dl dt {
    font-size: 12px;
    color: var(--siith-text-muted);
    font-weight: 500;
}

.pae-detalle__dl dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-text-strong);
}

.pae-stepper {
    margin: 16px 0 8px;
}

.pae-stepper__time {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--siith-text-muted);
}

.pae-detalle__info {
    margin: 12px 0 4px;
}

.pae-detalle__actions {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--siith-border-light);
}

.pae-detalle__actions .siith-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pae-detalle__actions a[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.45;
}

.pae-actualizado {
    flex-shrink: 0;
    margin: 0;
    padding: 0 0 8px;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.permisos-tab-panel-host:has(.pae-page),
.permisos-direct-panel:has(.pae-page) {
    overflow: hidden;
}

.permisos-tab-panel-host:has(.pae-page) .pae-page,
.permisos-direct-panel:has(.pae-page) .pae-page {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .pae-metrics {
        grid-template-columns: 1fr;
    }

    .pae-layout {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        min-height: 0;
        overflow: visible;
    }

    .pae-lista,
    .pae-detalle {
        min-height: 360px;
        overflow: visible;
    }

    .pae-table-wrap,
    .pae-detalle__scroll {
        overflow: visible;
    }
}

/* —— Solicitudes pendientes de aprobación —— */
.spa-page .rm-cal-scroll {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.spa-page .spa-top {
    flex-shrink: 0;
    padding: 0;
}

.spa-page .spa-layout.pae-layout {
    flex: 1 1 auto;
    min-height: 480px;
}

.spa-page .spa-detalle.pae-detalle,
.spa-page .spa-lista.pae-lista {
    overflow: hidden;
}

.spa-page .spa-detalle__inner,
.spa-page .pae-detalle__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.spa-page .pae-detalle__scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.spa-form-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.spa-detalle__header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--siith-border-light);
}

.spa-detalle__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.spa-detalle__who strong {
    font-size: 15px;
    color: var(--siith-text-strong);
}

.spa-detalle__who em,
.spa-detalle__who span {
    font-style: normal;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.spa-detalle__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin-bottom: 8px;
}

.spa-detalle__grid label {
    display: block;
    font-size: 11px;
    color: var(--siith-text-muted);
    margin-bottom: 2px;
}

.spa-detalle__grid span {
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-text-strong);
}

.spa-detalle__reemplazo {
    grid-column: 1 / -1;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--siith-primary-soft, #f3f0ff);
}

.spa-detalle__reemplazo span {
    color: var(--siith-primary, #40327e);
}

.spa-detalle__motivo {
    grid-column: 1 / -1;
}

.spa-detalle__motivo span {
    white-space: pre-wrap;
    word-break: break-word;
}

.spa-detalle__sec {
    margin: 16px 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--siith-primary-dark);
}

.spa-impacto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.spa-impacto__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-sm);
    background: #f8f7fc;
    color: var(--siith-primary);
}

.spa-impacto__card strong {
    font-size: 12px;
    color: var(--siith-text-strong);
    line-height: 1.3;
}

.spa-impacto__card.is-ok {
    background: #ecfdf3;
    color: #166534;
}

.spa-impacto__card.is-warn {
    background: #fff7ed;
    color: #c2410c;
}

.spa-doc {
    margin: 8px 0;
}

.spa-doc-btn,
a.spa-doc-btn,
.spa-detalle__actions a.siith-btn,
.spa-detalle__inner a.siith-btn--secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    opacity: 1 !important;
    color: var(--siith-primary) !important;
    background: #fff !important;
    border: 1px solid var(--siith-border) !important;
    text-decoration: none !important;
    filter: none !important;
}

.spa-detalle__actions a.siith-btn {
    margin: 0;
}

.spa-doc-btn:hover,
.spa-doc-btn:focus,
.spa-doc-btn:active,
a.spa-doc-btn:hover,
a.spa-doc-btn:focus,
a.spa-doc-btn:active,
.spa-detalle__actions a.siith-btn:hover,
.spa-detalle__actions a.siith-btn:focus,
.spa-detalle__actions a.siith-btn:active,
.spa-detalle__inner a.siith-btn--secondary:hover,
.spa-detalle__inner a.siith-btn--secondary:focus,
.spa-detalle__inner a.siith-btn--secondary:active {
    opacity: 1 !important;
    color: var(--siith-primary-dark, #211847) !important;
    background: #ede9fe !important;
    border-color: #a78bfa !important;
    text-decoration: none !important;
    filter: none !important;
    transform: none;
}

.spa-doc-btn svg,
.spa-detalle__actions a.siith-btn svg,
.spa-detalle__inner a.siith-btn--secondary svg {
    opacity: 1 !important;
    flex-shrink: 0;
}

.spa-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--siith-text-muted);
}

.spa-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 4px;
    font-size: 13px;
    color: var(--siith-text);
    cursor: pointer;
}

.spa-check input {
    margin-top: 3px;
}

.spa-detalle__actions {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--siith-border-light);
    background: #fff;
    position: sticky;
    bottom: 0;
    z-index: 3;
}

.spa-detalle__actions .siith-btn {
    min-height: 36px;
}

.spa-lock {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--siith-text-muted);
}

.spa-cal {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.spa-cal[hidden] {
    display: none !important;
}

.spa-cal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
}

.spa-cal__panel {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 16px !important;
}

.spa-cal__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.spa-cal__head strong {
    flex: 1;
    text-align: center;
    color: var(--siith-primary-dark);
}

.spa-cal__weekdays,
.spa-cal__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.spa-cal__weekdays span {
    font-size: 11px;
    font-weight: 700;
    color: var(--siith-text-muted);
    text-align: center;
    padding: 4px 0;
}

.spa-cal__day {
    min-height: 72px;
    border: 1px solid var(--siith-border-light);
    border-radius: 8px;
    padding: 6px;
    background: #fff;
}

.spa-cal__day.is-empty {
    background: transparent;
    border-color: transparent;
}

.spa-cal__day.has-items {
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.spa-cal__day strong {
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
}

.spa-cal__day em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    margin: 0 2px 2px 0;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--siith-primary);
    color: #fff;
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
}

.spa-cal__hint {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.permisos-tab-panel-host:has(.spa-page),
.permisos-direct-panel:has(.spa-page) {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .spa-impacto,
    .spa-detalle__grid {
        grid-template-columns: 1fr;
    }
}

/* —— Calendarización Marcaciones Teletrabajo —— */
.cmt-page .rab-filtros__grid {
    grid-template-columns: 180px 140px minmax(180px, 1fr) auto;
}

.cmt-filtros-accion {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.cmt-filtros-accion .siith-btn {
    white-space: nowrap;
}

.cmt-leyenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.cmt-page .rm-cal-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.cmt-table {
    min-width: 720px;
}

.cmt-table thead .rcd-col-nombre {
    background: #f5f3ff;
}

.cmt-table .cmt-cell {
    min-width: 46px;
}

.cmt-table .cmt-chk {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--siith-primary);
    cursor: pointer;
}

.cmt-table .cmt-chk:disabled,
.cmt-table .cmt-chk.is-locked {
    cursor: not-allowed;
    opacity: .45;
}

.cmt-col-accion {
    white-space: nowrap;
    text-align: center;
    min-width: 96px;
}

.cmt-col-accion .siith-btn {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
}

.cmt-th-feriado {
    color: #b91c1c;
}

.permisos-tab-panel-host:has(.cmt-page),
.permisos-direct-panel:has(.cmt-page) {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .cmt-page .rab-filtros__grid {
        grid-template-columns: 1fr 1fr;
    }

    .cmt-filtros-accion {
        grid-column: 1 / -1;
    }

    .cmt-leyenda {
        justify-content: flex-start;
    }
}

/* —— Marcaciones y calendarización (jefe) —— */
.siith-page-header__crumb {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.siith-page-header__crumb span {
    margin: 0 6px;
    color: #cbd5e1;
}

.mjc-filtros__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.mjc-filtros__top .rm-cal-filtros__title {
    margin: 0;
}

.mjc-vista {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: #eef2ff;
}

.mjc-vista__btn {
    border: 0;
    background: transparent;
    color: var(--siith-primary-dark);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
}

.mjc-vista__btn.is-active {
    background: var(--siith-primary);
    color: #fff;
}

.mjc-filtros__grid {
    grid-template-columns: 180px 180px minmax(240px, 1fr);
}

.rm-cal-metric__icon--danger {
    color: #b42318;
    background: #fef3f2;
}

.mjc-tabla__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mjc-persona {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.mjc-persona__meta strong {
    display: block;
    font-size: 14px;
    color: var(--siith-text-strong);
}

.mjc-persona__meta em {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.mjc-table {
    min-width: 980px;
}

.mjc-cell--alerta {
    background: #fff7ed;
    color: #c2410c;
    font-weight: 600;
}

.mjc-min {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ffedd5;
    color: #c2410c;
    font-size: 11px;
    font-weight: 700;
}

.mjc-col-acciones {
    width: 44px;
    text-align: center;
}

.mjc-ver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--siith-primary);
    border-radius: 8px;
    cursor: pointer;
}

.mjc-ver:hover {
    background: var(--siith-primary-soft);
}

.mjc-page .msi-modal__dialog {
    width: min(520px, 100%);
    text-align: left;
}

.mjc-page .msi-modal__dialog h2 {
    margin: 0 0 16px;
    font-size: 18px;
    color: var(--siith-primary-dark);
}

.permisos-tab-panel-host:has(.mjc-page),
.permisos-direct-panel:has(.mjc-page) {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .mjc-filtros__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .mjc-filtros__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* —— Actividades de teletrabajo pendientes —— */
.aat-page .rm-cal-scroll {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.aat-page .aat-top {
    flex-shrink: 0;
    padding: 0;
}

.aat-layout {
    flex: 1 1 auto;
    min-height: 480px;
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    padding: 0;
    align-items: stretch;
}

.aat-lista,
.aat-detalle {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0 !important;
}

.aat-detalle > .aat-detalle__inner,
.aat-detalle > .aat-detalle__empty {
    flex: 1 1 0;
    min-height: 0;
}

.aat-lista__head {
    flex-shrink: 0;
    padding: 16px 16px 12px;
}

.aat-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.aat-filtros select,
.aat-filtros .pae-filtros__select {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    font: inherit;
    font-size: 13px;
    background: #fff;
}

.aat-cards {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0 12px 12px;
}

.aat-card {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    border: 1px solid var(--siith-border-light);
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    font: inherit;
}

.aat-card.is-selected {
    border-color: #ddd6fe;
    box-shadow: inset 4px 0 0 var(--siith-primary, #40327e);
    background: #faf8ff;
}

.aat-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.aat-card__body strong {
    display: block;
    font-size: 13px;
    color: var(--siith-text-strong);
}

.aat-card__body em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 11px;
    color: var(--siith-text-muted);
}

.aat-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.aat-card__meta b {
    font-size: 13px;
    color: var(--siith-text-strong);
}

.aat-lista__sec {
    margin: 16px 4px 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--siith-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.aat-lista__empty,
.aat-detalle__empty {
    padding: 24px 16px;
    color: var(--siith-text-muted);
    font-size: 13px;
    text-align: center;
}

.aat-lista__foot {
    flex-shrink: 0;
    padding: 10px 16px 14px;
    font-size: 12px;
    color: var(--siith-text-muted);
    border-top: 1px solid var(--siith-border-light);
}

.aat-detalle__inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.aat-detalle__head {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--siith-border-light);
}

.aat-detalle__scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px 20px;
}

.aat-detalle__acciones {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--siith-border-light);
    background: #fff;
    position: sticky;
    bottom: 0;
    z-index: 3;
}

.aat-detalle__head h2 {
    margin: 0;
    font-size: 16px;
    color: var(--siith-primary-dark);
}

.aat-persona {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.aat-persona__avatar {
    width: 48px;
    height: 48px;
    font-size: 14px;
}

.aat-persona strong {
    display: block;
    font-size: 15px;
}

.aat-persona em,
.aat-persona span {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.aat-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.aat-meta__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--siith-primary, #40327e);
}

.aat-meta__item svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.aat-meta label {
    display: block;
    font-size: 11px;
    color: var(--siith-text-muted);
    margin-bottom: 2px;
}

.aat-meta span {
    font-size: 13px;
    font-weight: 600;
    color: var(--siith-text-strong);
}

.aat-sec {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--siith-primary-dark);
}

.aat-table {
    min-width: 720px;
}

.aat-td-detalle {
    min-width: 180px;
    white-space: normal;
}

.aat-td-cumple {
    white-space: nowrap;
}

.aat-bar {
    display: inline-block;
    width: 72px;
    height: 6px;
    margin-right: 8px;
    border-radius: 999px;
    background: #e5e7eb;
    vertical-align: middle;
    overflow: hidden;
}

.aat-bar i {
    display: block;
    height: 100%;
    background: #16a34a;
}

.aat-evidencia.is-empty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.aat-resumen-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 12px 0 8px;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.aat-resumen-acts span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.aat-resumen-acts strong {
    color: var(--siith-text-strong);
}

.aat-rechazos {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef2f2;
}

.aat-rechazos h3 {
    margin: 0 0 8px;
    font-size: 12px;
    color: #b91c1c;
}

.aat-rechazos ul {
    margin: 0;
    padding-left: 16px;
    font-size: 12px;
}

.aat-detalle .rab-info {
    margin: 12px 0 0;
}

.aat-resolucion {
    margin-top: 16px;
}

.aat-resolucion h3 {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--siith-primary-dark);
}

.aat-resolucion textarea {
    width: 100%;
    min-height: 84px;
    resize: vertical;
    padding: 8px 10px;
    border: 1px solid var(--siith-border);
    border-radius: var(--siith-radius-sm);
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
}

.aat-hint {
    margin: 6px 0 12px;
    font-size: 12px;
    color: var(--siith-text-muted);
}

.aat-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
}

.aat-check input {
    margin-top: 3px;
}

.aat-audit {
    margin: 12px 0;
}

.aat-resolucion__acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.permisos-tab-panel-host:has(.aat-page),
.permisos-direct-panel:has(.aat-page) {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .aat-layout,
    .aat-meta {
        grid-template-columns: 1fr;
    }

    .aat-lista,
    .aat-detalle {
        min-height: 320px;
    }
}

/* —— Habilitación Marcación interna y externa —— */
.hse-page .cis-scroll {
    min-height: 0;
    overflow: hidden;
}

.hse-page .cis-layout {
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
}

.hse-derecha {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.hse-page .cis-detalle {
    min-height: 0;
}

.hse-hist {
    margin-top: 8px;
}

.hse-hist-table td {
    white-space: normal;
    max-width: none;
}

.hse-switch-row .hva-switch-row__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hse-switch-row .hva-switch-row__text em {
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
}

.hse-redes {
    flex: 0 0 auto;
    padding: 20px 22px 22px;
}

.hse-derecha > .siith-card + .siith-card {
    margin-top: 0;
}

.hse-redes__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.hse-redes__head h2 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--siith-primary-dark, #40327e);
}

.hse-redes__head p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    max-width: 52rem;
}

.hse-ip-badge {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #374151;
    font-size: 13px;
}

.hse-ip-badge.is-ok {
    background: #ecfdf5;
    color: #047857;
}

.hse-ip-badge.is-out {
    background: #fef3c7;
    color: #92400e;
}

.hse-red-form {
    margin-bottom: 16px;
}

.hse-red-form__estado {
    display: flex;
    align-items: flex-end;
}

.hse-red-form__estado .hva-switch-row {
    width: 100%;
    margin: 0;
}

.hse-red-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.hse-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.hse-table th,
.hse-table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #eee8ff;
    vertical-align: top;
}

.hse-table th {
    color: #6b7280;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hse-table code {
    font-size: 12px;
    background: #f5f3ff;
    color: #5b21b6;
    padding: 2px 6px;
    border-radius: 6px;
}

.hse-table__acc {
    white-space: nowrap;
}

.hse-table__acc .siith-btn {
    margin-left: 6px;
}

.hse-btn-del {
    color: #b91c1c !important;
}

.permisos-tab-panel-host:has(.hse-page),
.permisos-direct-panel:has(.hse-page) {
    overflow: hidden;
}

.rin-page .cis-scroll {
    min-height: 0;
    overflow: auto;
}

.permisos-tab-panel-host:has(.rin-page),
.permisos-direct-panel:has(.rin-page) {
    overflow: auto;
}

@media (max-width: 1100px) {
    .hse-page .cis-scroll {
        overflow: auto;
    }

    .hse-page .cis-layout {
        height: auto;
        min-height: 0;
        overflow-y: visible;
    }

    .hse-derecha {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .hse-page .cis-detalle {
        max-height: none;
    }
}

@media (max-width: 900px) {
    .hse-redes__head {
        flex-direction: column;
    }
}

/*
 * Pie de página: solo franja tricolor.
 * El logo del loading se muestra durante la carga; al terminar no debe quedar en el pie.
 */
#body.loaded header.ip-header .ip-logo,
#body.loaded header.ip-header #logo,
#body.loaded header.ip-header #logo img,
body.layout-switch header.ip-header .ip-logo,
body.layout-switch header.ip-header #logo,
body.layout-switch header.ip-header #logo img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
    animation: none !important;
    -webkit-animation: none !important;
}

/* Tras la animación de salida, ocultar por completo el overlay del loading */
body.layout-switch > header.ip-header,
#body.layout-switch > header.ip-header {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
}

/* Franja tricolor del layout principal */
body.easyui-layout > .layout-panel-south,
#body > .layout-panel-south {
    display: block !important;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
    z-index: 5 !important;
}

/* Panel Principal (inicio post-login) — un solo pantallazo, sin scroll */
.panel-principal-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--siith-surface-alt, #f4f6fb);
    box-sizing: border-box;
}

.panel-principal-page > .panel-principal-page__header {
    display: none;
}

.panel-principal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}

.panel-principal-hero {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    padding: 14px 16px 12px;
    margin: 0;
}

.panel-principal-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--siith-radius-md) var(--siith-radius-md) 0 0;
    background: linear-gradient(90deg, var(--siith-accent, #e87722) 0%, var(--siith-primary, #32266b) 100%);
    pointer-events: none;
}

.panel-principal-hero__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.panel-principal-hero__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.panel-principal-hero__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--siith-primary-mid) 0%, var(--siith-primary) 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    flex-shrink: 0;
}

.panel-principal-hero__intro {
    min-width: 0;
}

.panel-principal-hero__saludo {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--siith-text-muted);
    margin-bottom: 2px;
}

.panel-principal-hero__nombre {
    margin: 0;
    font-size: clamp(0.98rem, 1.5vw, 1.2rem);
    line-height: 1.2;
    color: var(--siith-primary);
    font-weight: 700;
    word-break: break-word;
}

.panel-principal-hero__fecha {
    margin: 3px 0 0;
    color: var(--siith-text-muted);
    font-size: 12px;
}

.panel-principal-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--siith-primary-soft);
    color: var(--siith-primary);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.panel-principal-hero__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.panel-principal-hero__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--siith-border-light);
    border-radius: 8px;
    background: #faf9fd;
    box-sizing: border-box;
}

.panel-principal-hero__item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.panel-principal-hero__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--siith-primary-soft);
    color: var(--siith-primary);
    flex-shrink: 0;
}

.panel-principal-hero__item-icon svg {
    width: 15px;
    height: 15px;
}

.panel-principal-hero__item-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--siith-text-muted);
}

.panel-principal-hero__item-value {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.3;
    color: var(--siith-text-strong);
    word-break: break-word;
}

.panel-principal-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--siith-border-light);
    font-size: 12px;
    color: var(--siith-text-muted);
}

.panel-principal-hero__meta strong {
    color: var(--siith-text-strong);
    font-weight: 600;
}

.panel-principal-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    flex: 0 0 auto;
}

.panel-principal-metrics > .panel-principal-metric.siith-card,
.panel-principal-metrics > .panel-principal-metric {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--siith-border-light) !important;
    box-shadow: var(--siith-shadow-sm) !important;
    border-radius: var(--siith-radius-md);
}

.panel-principal-page .siith-card + .siith-card {
    margin-top: 0 !important;
}

.panel-principal-metric--highlight {
    border: 1px solid var(--siith-primary) !important;
    box-shadow: 0 0 0 1px rgba(50, 38, 107, 0.1), var(--siith-shadow-sm) !important;
}

.panel-principal-metric__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ede9fe;
    color: var(--siith-primary);
    flex-shrink: 0;
}

.panel-principal-metric__icon svg {
    width: 18px;
    height: 18px;
}

.panel-principal-metric__icon--solid {
    background: var(--siith-primary);
    color: #fff;
}

.panel-principal-metric--warning .panel-principal-metric__icon {
    background: #ffedd5;
    color: #c2410c;
}

.panel-principal-metric--success .panel-principal-metric__icon {
    background: #dcfce7;
    color: #047857;
}

.panel-principal-metric--accent .panel-principal-metric__icon {
    background: #fef3c7;
    color: #b45309;
}

.panel-principal-metric__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.panel-principal-metric__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--siith-text-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-principal-metric__value {
    font-size: 11px;
    color: var(--siith-text-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-principal-metric__value strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--siith-primary-dark);
    letter-spacing: -0.02em;
}

.panel-principal-metric__value em {
    font-style: normal;
    font-size: 11px;
    color: var(--siith-text-muted);
    margin-left: 2px;
}

.panel-principal-metric__value--negative strong {
    color: #b91c1c;
}

.panel-principal-metric--warning.panel-principal-metric--highlight {
    border-color: #fdba74 !important;
    box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.12), var(--siith-shadow-sm) !important;
}

.panel-principal-quick {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 !important;
    padding: 12px 14px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-principal-quick__header {
    margin-bottom: 8px;
    flex: 0 0 auto;
}

.panel-principal-quick__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 2px;
    font-size: 0.95rem;
    color: var(--siith-text-strong);
}

.panel-principal-quick__title svg {
    width: 16px;
    height: 16px;
    color: var(--siith-accent, #e87722);
}

.panel-principal-quick__sub {
    margin: 0;
    color: var(--siith-text-muted);
    font-size: 12px;
}

.panel-principal-quick__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

.panel-principal-quick__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-height: 64px;
    max-height: 84px;
    padding: 10px 12px;
    border: 1px solid var(--siith-border-light);
    border-radius: var(--siith-radius-md);
    background: #fff;
    box-shadow: var(--siith-shadow-sm);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.panel-principal-quick__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--siith-primary-soft);
    color: var(--siith-primary);
    flex-shrink: 0;
}

.panel-principal-quick__icon svg {
    width: 16px;
    height: 16px;
}

.panel-principal-quick__item--accent .panel-principal-quick__icon {
    background: #ffedd5;
    color: #c2410c;
}

.panel-principal-quick__item--warning .panel-principal-quick__icon {
    background: #fee2e2;
    color: #b91c1c;
}

.panel-principal-quick__item--success .panel-principal-quick__icon {
    background: #dcfce7;
    color: #047857;
}

.panel-principal-quick__item-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.panel-principal-quick__item:hover,
.panel-principal-quick__item:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--siith-shadow);
    border-color: var(--siith-primary);
    outline: none;
}

.panel-principal-quick__item-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--siith-primary);
    line-height: 1.25;
}

.panel-principal-quick__item-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.3;
    color: var(--siith-text-muted);
}

.panel-principal-quick__item-arrow {
    display: inline-flex;
    align-items: center;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--siith-text-muted);
    flex-shrink: 0;
}

.panel-principal-quick__item--accent .panel-principal-quick__item-title { color: #b45309; }
.panel-principal-quick__item--warning .panel-principal-quick__item-title { color: #c2410c; }
.panel-principal-quick__item--success .panel-principal-quick__item-title { color: #047857; }
.panel-principal-quick__item--primary .panel-principal-quick__item-title { color: var(--siith-primary); }

.permisos-direct-panel.is-visible:has(.panel-principal-page) {
    overflow: hidden !important;
}

.permisos-direct-panel:has(.panel-principal-page) .panel-principal-page {
    height: 100%;
}

@media (max-width: 1100px) {
    .panel-principal-hero__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .panel-principal-metrics,
    .panel-principal-quick__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .panel-principal-scroll {
        overflow: auto;
    }
}

@media (max-width: 720px) {
    .panel-principal-hero__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .panel-principal-hero__grid,
    .panel-principal-metrics,
    .panel-principal-quick__grid {
        grid-template-columns: 1fr;
    }

    .panel-principal-scroll {
        overflow: auto;
    }
}

@media (max-height: 700px) {
    .panel-principal-scroll {
        gap: 8px;
        padding: 8px 10px 10px;
    }

    .panel-principal-hero {
        padding: 10px 12px 8px;
    }

    .panel-principal-hero__top {
        margin-bottom: 8px;
    }

    .panel-principal-hero__meta {
        display: none;
    }

    .panel-principal-metrics > .panel-principal-metric {
        padding: 8px 12px !important;
    }

    .panel-principal-metric__value strong {
        font-size: 16px;
    }

    .panel-principal-quick {
        padding: 10px 12px !important;
    }

    .panel-principal-quick__item {
        min-height: 56px;
        max-height: 72px;
        padding: 8px 10px;
    }
}