/* ============================================
   COEM — Portal de Vacaciones
   Mobile-First Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;900&display=swap');

/* --- VARIABLES DE MARCA --- */
:root {
    --lausant-dark:     #061d40;
    --lausant-blue:     #0a4796;
    --lausant-accent:   #4da6ff;
    --lausant-gradient: linear-gradient(135deg, #061d40 0%, #0a4796 100%);
    --bg-color:         #f0f4f9;
    --text-main:        #1a2a3a;
    --text-muted:       #667788;
    --card-bg:          #ffffff;
    --card-shadow:      0 2px 12px rgba(10, 71, 150, 0.08);
    --hover-shadow:     0 6px 24px rgba(10, 71, 150, 0.15);
    --border-color:     #e2eaf4;
    --radius-sm:        8px;
    --radius-md:        14px;
    --radius-lg:        20px;
    --sidebar-width:    260px;
    --topbar-height:    64px;
    --mobile-nav-h:     68px;
}

/* --- 🌙 MODO OSCURO --- */
[data-theme="dark"] {
    --bg-color:      #0f1923;
    --text-main:     #e2eaf4;
    --text-muted:    #8899aa;
    --card-bg:       #1a2535;
    --card-shadow:   0 2px 12px rgba(0, 0, 0, 0.3);
    --hover-shadow:  0 6px 24px rgba(0, 0, 0, 0.4);
    --border-color:  #253347;
}

/* Transición suave al cambiar tema */
*, *::before, *::after {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.1s ease;
}

/* ============================================
   BASE
   ============================================ */
*, *::before, *::after {
    margin: 0; padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-color);
    color: var(--text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   PANTALLA DE CARGA
   ============================================ */
#pantalla-carga {
    position: fixed; inset: 0;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
#pantalla-carga p {
    color: var(--lausant-blue);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
}
.spinner {
    width: 48px; height: 48px;
    border: 5px solid rgba(10, 71, 150, 0.1);
    border-top-color: var(--lausant-blue);
    border-radius: 50%;
    animation: spin 0.9s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   ANIMACIONES
   ============================================ */
.animar-entrada {
    animation: fadeSlideUp 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(16px);
}
@keyframes fadeSlideUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   LOGIN — MOBILE FIRST
   ============================================ */
.login-body {
    background: var(--lausant-gradient);
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* Patrón de fondo */
.login-body::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* Círculos decorativos */
.login-body::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: rgba(77, 166, 255, 0.08);
    bottom: -100px; right: -100px;
    pointer-events: none;
}

.login-card {
    background: rgba(255,255,255,0.99);
    padding: 32px 24px;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    width: 100%;
    max-width: 420px;
    text-align: center;
    position: relative;
    z-index: 10;
}

.login-logo-container {
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
}
.login-logo-container img { max-width: 180px; height: auto; }

/* Logo del login según tema */
.logo-login-claro  { display: block; }
.logo-login-oscuro { display: none;  }
[data-theme="dark"] .logo-login-claro  { display: none  !important; }
[data-theme="dark"] .logo-login-oscuro { display: block !important; }

.login-card > p {
    margin-bottom: 28px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

.input-group { margin-bottom: 18px; text-align: left; }
.input-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.input-group input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    outline: none;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    color: var(--text-main);
    transition: border-color 0.25s, box-shadow 0.25s;
    background: #fafcff;
}
.input-group input:focus {
    border-color: var(--lausant-blue);
    box-shadow: 0 0 0 4px rgba(10, 71, 150, 0.1);
    background: #fff;
}

/* ============================================
   BOTONES
   ============================================ */
.btn {
    padding: 14px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    line-height: 1;
    touch-action: manipulation;
}
.btn:active { transform: scale(0.97) !important; }

.btn-login {
    width: 100%;
    background: var(--lausant-gradient);
    color: white;
    box-shadow: 0 4px 16px rgba(10,71,150,0.28);
}
.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(10,71,150,0.35);
    filter: brightness(1.08);
}

/* ============================================
   DASHBOARD LAYOUT
   ============================================ */
.dashboard-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    padding: 16px 14px 20px;
    background: var(--bg-color);
    overflow-x: hidden;
}

/* ============================================
   MENÚ LATERAL MÓVIL (hamburger overlay)
   ============================================ */

/* Backdrop oscuro */
#mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    z-index: 598;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
#mobile-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Sidebar como overlay lateral en móvil */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 82%;
    max-width: 300px;
    height: 100%;
    background: var(--lausant-gradient);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 600;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(-110%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: 20px;
    box-shadow: none;
}
.sidebar.menu-abierto {
    transform: translateX(0);
    box-shadow: 6px 0 40px rgba(0, 0, 0, 0.5);
}

/* Logo container: visible en overlay */
.sidebar-logo-container {
    display: block;
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.18);
    flex-shrink: 0;
}
.sidebar-logo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sidebar-logo-row img { max-width: 130px; height: auto; }

/* Botón X cerrar menú */
.sidebar-close-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
    font-size: 20px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.sidebar-close-btn:hover { background: rgba(255,255,255,0.18); color: white; }

/* Nav items en overlay: fila horizontal */
.sidebar a.nav-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 13px 20px;
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-left: 4px solid transparent;
    border-top: none;
    letter-spacing: 0;
    line-height: 1.3;
    transition: color 0.2s, border-color 0.2s, background 0.2s, padding-left 0.18s;
    -webkit-tap-highlight-color: transparent;
}
.sidebar a.nav-item i {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}
.sidebar a.nav-item:hover {
    color: white;
    background: rgba(255,255,255,0.06);
    padding-left: 26px;
}
.sidebar a.nav-item.activo {
    color: white;
    background: rgba(255,255,255,0.14);
    border-left-color: var(--lausant-accent);
}

/* Botón hamburger en topbar */
.mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 7px;
    color: var(--lausant-dark);
    font-size: 26px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn:hover { background: rgba(10,71,150,0.09); }
[data-theme="dark"] .mobile-menu-btn { color: var(--text-main); }
.topbar-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--lausant-dark);
}
[data-theme="dark"] .topbar-title { color: var(--text-main); }

/* Cerrar sesión al fondo */
.sidebar a.nav-salir {
    margin-top: auto;
    color: rgba(255, 120, 120, 0.8);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 14px;
    margin-top: 12px;
}
.sidebar a.nav-salir:hover { color: #ff8888; }

/* Nav section labels */
.nav-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.35);
    padding: 16px 16px 4px 16px;
    margin-top: 4px;
}

/* ============================================
   NAV GROUPS COLAPSABLES
   ============================================ */
.nav-group { display: flex; flex-direction: column; }

.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s, background 0.2s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    border-left: 4px solid transparent;
}
.nav-group-toggle:hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.04);
}
.nav-group-toggle.abierto {
    color: white;
    background: rgba(255,255,255,0.06);
}
.nav-group-toggle i.grupo-icon { font-size: 18px; }
.nav-group-toggle .chevron {
    margin-left: auto;
    font-size: 14px;
    transition: transform 0.25s;
}
.nav-group-toggle.abierto .chevron { transform: rotate(180deg); }

.nav-group-items {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}
.nav-group-items.abierto { max-height: 500px; }

.nav-group-items .nav-item {
    padding-left: 36px !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.65) !important;
    border-left: 4px solid transparent !important;
}
.nav-group-items .nav-item:hover {
    padding-left: 42px !important;
    color: white !important;
}
.nav-group-items .nav-item.activo {
    background: rgba(255,255,255,0.13) !important;
    border-left-color: var(--lausant-accent) !important;
    color: white !important;
}

/* Sub-grupo (Vacaciones dentro de Capital Humano) */
.nav-subgroup { margin: 0; }
.nav-subgroup-toggle {
    padding: 9px 14px 9px 28px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: rgba(255,255,255,0.5) !important;
    border-left: none !important;
}
.nav-subgroup-toggle:hover { color: rgba(255,255,255,0.8) !important; }
.nav-subgroup-toggle.abierto { color: rgba(255,255,255,0.85) !important; }
.nav-subgroup-toggle i.grupo-icon { font-size: 14px !important; }
.nav-subitem {
    padding-left: 52px !important;
    font-size: 12px !important;
}

/* ============================================
   TOPBAR MÓVIL
   ============================================ */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    gap: 12px;
    position: relative;  /* crea contexto de apilamiento */
    z-index: 100;         /* sobre el contenido de la página */
}

.topbar > div:first-child {
    font-size: 16px;
    font-weight: 700;
    color: var(--lausant-dark);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--lausant-dark);
    font-size: 13px;
    min-width: 0;
}

.user-profile span {
    display: none; /* Ocultar nombre en móvil para ahorrar espacio */
}

.avatar {
    width: 40px; height: 40px;
    background: var(--lausant-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(10, 71, 150, 0.25);
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 18px 16px;
    box-shadow: var(--card-shadow);
    margin-bottom: 14px;
    border: 1px solid var(--border-color);
}
.card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--lausant-dark);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================
   PANEL INFORMATIVO (tarjetas de días)
   ============================================ */
.panel-informativo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.card-info {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 16px 10px;
    box-shadow: var(--card-shadow);
    text-align: center;
    border: 1px solid var(--border-color);
    border-bottom: 4px solid var(--lausant-blue);
    transition: transform 0.2s, box-shadow 0.2s;
}
.card-info:hover { transform: translateY(-2px); box-shadow: var(--hover-shadow); }

.card-info h3 {
    color: var(--text-muted);
    font-size: 10px;
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
}
.card-info p {
    font-size: 28px;
    font-weight: 800;
    color: var(--lausant-dark);
    line-height: 1;
}

/* ============================================
   FORMULARIO DE SOLICITUD
   ============================================ */
#form-solicitud .form-control label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    display: block;
    margin-bottom: 8px;
}

#selector-fechas {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-color);
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    background: #fafcff;
    cursor: pointer;
    color: var(--text-main);
    transition: border-color 0.25s, box-shadow 0.25s;
}
#selector-fechas:focus {
    border-color: var(--lausant-blue);
    box-shadow: 0 0 0 4px rgba(10, 71, 150, 0.1);
    outline: none;
}

.btn-submit {
    margin-top: 16px;
    font-size: 15px;
    padding: 15px;
}

/* ============================================
   TABLAS — VERSIÓN MÓVIL COMO CARDS
   ============================================ */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
    margin-top: 12px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    font-size: 14px;
}
th {
    background: var(--lausant-dark);
    color: white;
    padding: 13px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
td {
    padding: 13px 12px;
    border-bottom: 1px solid #f0f4f9;
    color: #3a4a5a;
    vertical-align: middle;
    font-size: 13px;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f7faff; }

/* ============================================
   BADGES
   ============================================ */
.badge {
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    display: inline-block;
}
.badge.pendiente { background: #fff3cd; color: #8a6500; border: 1px solid #ffe08a; }
.badge.aprobada  { background: #d4edda; color: #155724; border: 1px solid #b8dfc4; }
.badge.rechazada { background: #f8d7da; color: #721c24; border: 1px solid #f1b5bb; }

/* ============================================
   FECHAS EN MODAL
   ============================================ */
.grid-fechas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px 2px;
    margin-top: 10px;
}
.fecha-badge {
    background: #e8f4f8;
    border: 1px solid #b8dff0;
    color: var(--lausant-dark);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
}
.fecha-badge::before { content: "📅 "; }

/* ============================================
   ESTADÍSTICAS ADMIN
   ============================================ */
.stats-admin {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.stat-card {
    background: white;
    padding: 16px 10px;
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
    text-align: center;
    border: 1px solid var(--border-color);
}
.stat-card h3 {
    margin: 0 0 8px;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
}
.stat-card p {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

/* ============================================
   FILTROS ADMIN
   ============================================ */
.filtros-container {
    background: #f8fafd;
    padding: 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    border: 1px solid var(--border-color);
}
.filtros-container h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--lausant-dark);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.filtros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.filtros-grid input,
.filtros-grid select {
    padding: 10px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    background: white;
    color: var(--text-main);
    width: 100%;
    transition: border-color 0.2s;
}
.filtros-grid input:focus,
.filtros-grid select:focus {
    border-color: var(--lausant-blue);
    outline: none;
}

/* ============================================
   MODALES
   ============================================ */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(6, 29, 64, 0.65);
    backdrop-filter: blur(4px);
    display: none;
    align-items: flex-end; /* En móvil, modal sube desde abajo */
    justify-content: center;
    z-index: 1000;
    padding: 0;
}
.modal-backdrop.activo { display: flex; }

.modal-contenido {
    background: white;
    padding: 24px 20px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.25);
    animation: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    -webkit-overflow-scrolling: touch;
}
@keyframes slideUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.modal-contenido h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--lausant-dark);
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Indicador de "pull" visual en modales móvil */
.modal-contenido::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: #dde5f0;
    border-radius: 2px;
    margin: -8px auto 18px;
}

/* Formularios dentro de modales */
.modal-contenido .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.modal-contenido label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 5px;
    display: block;
}
.modal-contenido input[type="text"],
.modal-contenido input[type="password"],
.modal-contenido input[type="number"],
.modal-contenido input[type="date"],
.modal-contenido input[type="datetime-local"],
.modal-contenido input[type="email"],
.modal-contenido input[type="tel"],
.modal-contenido select,
.modal-contenido textarea {
    width: 100%;
    padding: 13px 14px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    color: var(--text-main);
    background: var(--card-bg, #fafcff);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.modal-contenido textarea {
    resize: vertical;
    min-height: 80px;
}
/* Modo claro: borde azul profundo */
.modal-contenido input:focus,
.modal-contenido select:focus,
.modal-contenido textarea:focus {
    border-color: #0a4796 !important;
    border-width: 2px !important;
    box-shadow: none !important;
    outline: none !important;
}
/* Modo oscuro: borde azul brillante que resalta sobre el fondo oscuro */
[data-theme="dark"] .modal-contenido input:focus,
[data-theme="dark"] .modal-contenido select:focus,
[data-theme="dark"] .modal-contenido textarea:focus,
body.modo-oscuro .modal-contenido input:focus,
body.modo-oscuro .modal-contenido select:focus,
body.modo-oscuro .modal-contenido textarea:focus {
    border-color: #4da6ff !important;
    border-width: 2px !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Grid de 2 columnas para formularios de modal (1 columna en móvil) */
.modal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-width: 0;
}
.modal-form-grid > * { min-width: 0; overflow: hidden; }
.modal-contenido input[type="datetime-local"],
.modal-contenido input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
@media (max-width: 600px) {
    .modal-form-grid { grid-template-columns: 1fr; }
    .modal-form-grid [style*="grid-column:1/-1"],
    .modal-form-grid [style*="grid-column: 1/-1"] { grid-column: 1 !important; }
}

/* Botones de acción en modal */
.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid var(--border-color);
}
.modal-actions .btn {
    flex: 1;
    padding: 13px;
    font-size: 14px;
}

/* Botón de aprobar/rechazar */
.btn-aprobar { background: #27ae60; color: white; border: none; }
.btn-aprobar:hover { background: #219a54; }
.btn-rechazar { background: #e74c3c; color: white; border: none; }
.btn-rechazar:hover { background: #d63c2c; }
.btn-cerrar { background: #f0f4f9; color: #556; border: 1px solid var(--border-color); }
.btn-peligro { background: #e74c3c; color: white; border: none; padding: 13px 16px; }

/* Detalle del empleado en modal revisión */
.detalle-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #f4f8ff;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
}
.detalle-avatar {
    width: 48px; height: 48px;
    background: var(--lausant-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}
.detalle-body { margin-bottom: 16px; }

/* ============================================
   GESTIÓN DE EMPLEADOS
   ============================================ */
.empleados-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
}
.empleados-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--lausant-dark);
    margin: 0;
}
.empleados-header p {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}
.btn-nuevo-emp {
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Credenciales en tabla empleados */
.credenciales-cell {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.6;
    background: #f4f8ff;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #dde8f8;
}

/* ============================================
   BOTÓN GENERAR PDF
   ============================================ */
.btn-pdf {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    background: var(--lausant-gradient);
    color: white;
    border: none;
    margin: 4px 0 16px;
}

/* Input de contraseña autogenerada */
.pass-input-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.pass-input-group input {
    flex: 1;
    background: #e9ecef;
    font-family: 'Courier New', monospace;
    font-size: 15px;
}
.btn-copiar {
    padding: 0 14px;
    background: var(--lausant-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: filter 0.2s, transform 0.15s;
}
.btn-copiar:hover { filter: brightness(1.1); }
.btn-copiar:active { transform: scale(0.95); }

/* ============================================
   TAB CONTENT
   ============================================ */
.tab-content { display: none; }

/* Encabezado bienvenida admin */
.admin-bienvenida {
    margin-bottom: 18px;
}
.admin-bienvenida h2 {
    font-size: 18px;
    font-weight: 800;
    color: var(--lausant-dark);
    margin-bottom: 4px;
}
.admin-bienvenida p {
    font-size: 13px;
    color: var(--text-muted);
}

/* ============================================
   FLATPICKR AJUSTES MÓVIL
   ============================================ */
.flatpickr-calendar {
    font-family: 'Poppins', sans-serif !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18) !important;
    border-radius: 12px !important;
    border: none !important;
}

/* ============================================
   SCROLLBAR PERSONALIZADO
   ============================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c5d5e8; border-radius: 3px; }

/* ============================================
   TABLET (600px+)
   ============================================ */
@media (min-width: 600px) {

    .main-content {
        padding: 20px 20px 20px;
    }

    .panel-informativo {
        gap: 14px;
    }
    .card-info h3 { font-size: 11px; }
    .card-info p  { font-size: 32px; }

    .stats-admin { gap: 14px; }
    .stat-card h3 { font-size: 12px; }
    .stat-card p  { font-size: 30px; }

    .user-profile span { display: block; }

    .filtros-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Modal centrado desde tablet */
    .modal-backdrop {
        align-items: center;
        padding: 20px;
    }
    .modal-contenido {
        border-radius: var(--radius-lg);
        max-width: 480px;
        animation: fadeSlideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }
    .modal-contenido::before { display: none; }

    .modal-contenido .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   DESKTOP (960px+) — Sidebar lateral fijo
   ============================================ */
@media (min-width: 960px) {

    .dashboard-layout {
        flex-direction: row;
        height: 100vh;
        overflow: hidden;
    }

    /* Sidebar en flujo (no overlay) */
    .sidebar {
        position: relative;
        width: var(--sidebar-width);
        min-width: var(--sidebar-width);
        height: 100vh;
        transform: none !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.12);
        padding-bottom: 0;
        overflow-y: auto;
    }

    .sidebar-logo-container {
        padding: 24px 20px;
        text-align: center;
        background: rgba(0,0,0,0.15);
    }
    .sidebar-logo-container img { max-width: 170px; }
    .sidebar-logo-row { justify-content: center; }
    .sidebar-close-btn { display: none; }

    .sidebar a.nav-item {
        padding: 16px 24px;
        font-size: 14px;
    }
    .sidebar a.nav-item:hover {
        padding-left: 30px;
        background: rgba(255,255,255,0.05);
    }
    .sidebar a.nav-item.activo {
        background: rgba(255,255,255,0.15);
    }

    .sidebar a.nav-salir {
        border-top: 1px solid rgba(255,255,255,0.08);
        margin-top: auto;
        padding-top: 14px;
    }

    /* Ocultar hamburger y backdrop en desktop */
    .mobile-menu-btn { display: none !important; }
    #mobile-backdrop { display: none !important; }

    /* Contenido principal */
    .main-content {
        flex: 1;
        padding: 28px 32px;
        overflow-y: auto;
        height: 100vh;
    }

    /* Topbar */
    .topbar {
        margin-bottom: 28px;
        padding: 14px 24px;
    }
    .topbar-title { font-size: 20px; }
    .user-profile { gap: 14px; font-size: 15px; }
    .user-profile span { display: block; }
    .avatar { width: 44px; height: 44px; font-size: 20px; }

    /* Cards */
    .card { padding: 24px; margin-bottom: 22px; }
    .card h3 { font-size: 16px; }
    .card:hover { transform: translateY(-2px); box-shadow: var(--hover-shadow); }

    /* Panel días */
    .panel-informativo {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 24px;
    }
    .card-info { padding: 24px 20px; }
    .card-info h3 { font-size: 13px; }
    .card-info p  { font-size: 38px; }

    /* Stats admin */
    .stats-admin { gap: 20px; margin-bottom: 24px; }
    .stat-card { padding: 20px; }
    .stat-card h3 { font-size: 13px; }
    .stat-card p  { font-size: 32px; }

    /* Tabla */
    th { font-size: 13px; padding: 15px 16px; }
    td { font-size: 14px; padding: 14px 16px; }

    /* Filtros */
    .filtros-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    /* Modal desktop */
    .modal-backdrop { padding: 24px; }
    .modal-contenido { max-width: 520px; }
    .modal-contenido.modal-wide { max-width: 640px; }

    /* Btn PDF */
    .btn-pdf {
        width: auto;
        padding: 13px 28px;
        display: inline-flex;
    }

    .admin-bienvenida h2 { font-size: 22px; }

    .empleados-header { margin-bottom: 16px; }
}

/* ============================================
   LARGE DESKTOP (1280px+)
   ============================================ */
@media (min-width: 1280px) {
    .main-content { padding: 32px 40px; }
    .panel-informativo { gap: 24px; }
}

/* ==========================================
   🔔 NOTIFICACIONES
   ========================================== */

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--card-border);
    cursor: pointer;
    transition: background 0.15s;
}
.notif-item:hover { background: rgba(10,71,150,0.05); }
.notif-item.leida { opacity: 0.5; }
.notif-item:last-child { border-bottom: none; }

/* ==========================================
   🗓️ CALENDARIO
   ========================================== */

#calendario-container {
    width: 100%;
    overflow-x: auto;
}

.activo-toggle {
    background: var(--lausant-blue) !important;
    color: white !important;
    border-color: var(--lausant-blue) !important;
}

/* Campana responsive */
@media (max-width: 960px) {
    #panel-notificaciones {
        right: -60px !important;
        width: 300px !important;
    }
}
/* ==========================================
   🌙 MODO OSCURO — overrides específicos
   ========================================== */

[data-theme="dark"] body {
    background: var(--bg-color);
    color: var(--text-main);
}

/* Topbar */
[data-theme="dark"] .topbar {
    background: var(--card-bg);
    border-color: var(--border-color);
}
[data-theme="dark"] .topbar > div:first-child {
    color: var(--text-main);
}

/* Iconos y nombre de usuario en header */
[data-theme="dark"] #btn-tema,
[data-theme="dark"] #btn-campana {
    color: var(--text-main) !important;
}
[data-theme="dark"] .user-profile {
    color: var(--text-main);
}
[data-theme="dark"] .user-profile span {
    color: var(--text-main);
}

/* Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .card-info,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .modal-contenido,
[data-theme="dark"] #panel-notificaciones {
    background: var(--card-bg) !important;
    border-color: var(--border-color);
    color: var(--text-main);
}
[data-theme="dark"] .card h3,
[data-theme="dark"] .card-info h3 {
    color: var(--lausant-accent);
}
[data-theme="dark"] .stat-card h3 {
    color: var(--text-muted);
}

/* Bienvenida admin y subtítulo */
[data-theme="dark"] .admin-bienvenida {
    background: transparent;
}
[data-theme="dark"] .admin-bienvenida h2 {
    color: var(--text-main);
}
[data-theme="dark"] .admin-bienvenida p {
    color: var(--text-muted);
}

/* Filtros de búsqueda */
[data-theme="dark"] .filtros-container {
    background: #18293d;
    border-color: var(--border-color);
}
[data-theme="dark"] .filtros-container h4 {
    color: var(--lausant-accent);
}

/* Inputs y selects */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #253347 !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] input::placeholder {
    color: var(--text-muted);
}
[data-theme="dark"] select option {
    background: #253347;
    color: var(--text-main);
}

/* Tablas — hover corregido */
[data-theme="dark"] table thead tr {
    background: #1e3a5f !important;
}
[data-theme="dark"] table tbody tr {
    background: var(--card-bg);
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] tr:hover td {
    background: #253347 !important;
}
[data-theme="dark"] td {
    color: var(--text-main);
    border-color: var(--border-color);
}

/* Notificaciones */
[data-theme="dark"] .notif-item {
    border-color: var(--border-color);
}
[data-theme="dark"] .notif-item:hover {
    background: #253347;
}
[data-theme="dark"] #lista-notificaciones {
    background: var(--card-bg);
}
[data-theme="dark"] #panel-notificaciones > div:first-child {
    border-color: var(--border-color);
    background: var(--card-bg);
}
[data-theme="dark"] #panel-notificaciones > div:first-child span {
    color: var(--text-main) !important;
}
[data-theme="dark"] #btn-campana {
    color: var(--text-main) !important;
}

/* Login */
[data-theme="dark"] .login-card {
    background: var(--card-bg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Pantalla de carga */
[data-theme="dark"] .pantalla-carga,
[data-theme="dark"] #pantalla-carga {
    background: #0f1923;
}
/* ============================================
   LOGIN — ENHANCED GRADIENT & DECORATIVOS
   ============================================ */

/* More vibrant multi-stop gradient */
.login-body {
    background: linear-gradient(135deg, #03112e 0%, #071e4a 30%, #0a4796 70%, #1565c0 100%);
}

/* Sin raya superior en el card */
.login-card::before { display: none !important; }

/* Decorative blobs — más dramáticos */
.login-deco-1 {
    position: absolute;
    width: 650px; height: 650px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(77,166,255,0.18) 0%, rgba(10,71,150,0.08) 50%, transparent 70%);
    bottom: -220px; right: -180px;
    pointer-events: none;
    filter: blur(2px);
}
.login-deco-2 {
    position: absolute;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100,180,255,0.14) 0%, rgba(10,71,150,0.06) 50%, transparent 70%);
    top: -150px; left: -130px;
    pointer-events: none;
    filter: blur(2px);
}
.login-deco-3 {
    position: absolute;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(77,166,255,0.1) 0%, transparent 70%);
    border: 1px solid rgba(255,255,255,0.07);
    top: 30%; left: 6%;
    pointer-events: none;
}

/* ============================================
   🌙 MODO OSCURO — LOGIN
   ============================================ */
[data-theme="dark"] .login-body {
    background: linear-gradient(135deg, #010810 0%, #020e22 40%, #03152e 80%, #041a38 100%);
}

[data-theme="dark"] .login-card {
    background: #1a2535;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(77,166,255,0.12);
}

[data-theme="dark"] .login-card p {
    color: var(--text-muted) !important;
}

[data-theme="dark"] #pantalla-carga {
    background: #0f1923;
}

/* ============================================
   🌙 MODO OSCURO — FIXES GENERALES
   ============================================ */

/* Modal titles fix (dark blue → invisible in dark mode) */
[data-theme="dark"] .modal-contenido h2 {
    color: var(--text-main);
}

/* Employees header fix */
[data-theme="dark"] .empleados-header h3 {
    color: var(--text-main);
}

/* Card-info numbers fix (vacation day counters) */
[data-theme="dark"] .card-info p {
    color: var(--lausant-accent);
}

/* Detail header background fix */
[data-theme="dark"] .detalle-header {
    background: #18293d;
    border-color: var(--border-color);
}

/* Credentials cell fix */
[data-theme="dark"] .credenciales-cell {
    background: #18293d;
    border-color: var(--border-color);
    color: var(--lausant-accent);
}

/* Date badges fix */
[data-theme="dark"] .fecha-badge {
    background: #18293d;
    border-color: var(--border-color);
    color: var(--lausant-accent);
}

/* Close button fix */
[data-theme="dark"] .btn-cerrar {
    background: #253347;
    color: var(--text-muted);
    border-color: var(--border-color);
}

/* Table base background fix */
[data-theme="dark"] table {
    background: var(--card-bg);
}

/* Notification item text */
[data-theme="dark"] .notif-item span,
[data-theme="dark"] .notif-item p,
[data-theme="dark"] .notif-item div {
    color: var(--text-main);
}

/* ============================================
   🌙 MODO OSCURO — SWEETALERT2
   ============================================ */
[data-theme="dark"] .swal2-popup {
    background: #1a2535 !important;
    color: #e2eaf4 !important;
    border: 1px solid #253347 !important;
}
[data-theme="dark"] .swal2-title {
    color: #e2eaf4 !important;
}
[data-theme="dark"] .swal2-html-container {
    color: var(--text-main) !important;
}
[data-theme="dark"] .swal2-html-container label {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .swal2-html-container input:not(.swal2-input),
[data-theme="dark"] .swal2-html-container select,
[data-theme="dark"] .swal2-html-container textarea {
    background: #253347 !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .swal2-html-container input:not(.swal2-input)::placeholder,
[data-theme="dark"] .swal2-html-container textarea::placeholder {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .swal2-html-container div,
[data-theme="dark"] .swal2-html-container span,
[data-theme="dark"] .swal2-html-container p,
[data-theme="dark"] .swal2-html-container strong,
[data-theme="dark"] .swal2-html-container td,
[data-theme="dark"] .swal2-html-container th {
    color: var(--text-main);
}
/* Forzar que var(--lausant-dark) no enmascare texto en modo oscuro dentro de Swal */
[data-theme="dark"] .swal2-html-container [style*="lausant-dark"] {
    color: var(--text-main) !important;
}
/* Botones de método de pago en Swal — fondo y texto correctos en oscuro */
[data-theme="dark"] .swal2-html-container button:not(.swal2-confirm):not(.swal2-cancel):not(.swal2-deny) {
    background: #253347 !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}
/* Secciones de fondo bg-color dentro de Swal en oscuro */
[data-theme="dark"] .swal2-html-container [style*="var(--bg-color)"] {
    background: #131f2e !important;
}
/* Tablas dentro de Swal en oscuro */
[data-theme="dark"] .swal2-html-container table thead tr {
    background: #0a3166 !important;
}
[data-theme="dark"] .swal2-html-container table tbody tr {
    background: transparent !important;
}
[data-theme="dark"] .swal2-html-container table td,
[data-theme="dark"] .swal2-html-container table th {
    border-color: #253347 !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] .swal2-deny {
    background: #b37000 !important;
}
[data-theme="dark"] .swal2-close {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .swal2-confirm {
    background: var(--lausant-blue) !important;
}
[data-theme="dark"] .swal2-cancel {
    background: #253347 !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}
[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-select,
[data-theme="dark"] .swal2-textarea {
    background: #253347 !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}
[data-theme="dark"] .swal2-input::placeholder,
[data-theme="dark"] .swal2-textarea::placeholder {
    color: var(--text-muted) !important;
}
/* Toast notifications */
[data-theme="dark"] .swal2-toast {
    background: #1a2535 !important;
    color: #e2eaf4 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .swal2-toast .swal2-title {
    color: #e2eaf4 !important;
}

/* ============================================
   DASHBOARD INICIO — INFORME GENERAL COEM
   ============================================ */
.inicio-dashboard {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow-y: auto;
    max-height: calc(100vh - 80px);
    scrollbar-width: thin;
    scrollbar-color: var(--lausant-blue) transparent;
}
.inicio-dashboard::-webkit-scrollbar { width: 5px; }
.inicio-dashboard::-webkit-scrollbar-thumb { background: var(--lausant-blue); border-radius: 4px; }

.inicio-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(135deg, var(--lausant-dark) 0%, #0a4796 100%);
    color: white;
    padding: 22px 24px;
    border-radius: 14px;
    margin-bottom: 20px;
}
.inicio-banner-info h2 {
    font-size: 20px;
    font-weight: 800;
    color: white !important;
    margin: 0 0 4px 0;
}
.inicio-fecha {
    font-size: 13px;
    color: rgba(255,255,255,0.7) !important;
    margin: 0;
    text-transform: capitalize;
}

.inicio-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--card-border);
}
.inicio-section-title + .inicio-kpi-grid { margin-bottom: 22px; }

.inicio-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
.inicio-kpi-grid--3 { grid-template-columns: repeat(3, 1fr); }

.inicio-kpi-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-top: 3px solid var(--kpi-color, var(--lausant-blue));
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.inicio-kpi-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.09); transform: translateY(-1px); }

.inicio-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.inicio-kpi-body { flex: 1; min-width: 0; }
.inicio-kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inicio-kpi-valor {
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 3px;
}
.inicio-kpi-valor--md { font-size: 18px; font-weight: 800; }
.inicio-kpi-sub { font-size: 11px; color: var(--text-muted); }

/* Dark mode */
[data-theme="dark"] .inicio-kpi-card {
    background: #192338;
    border-color: #253350;
}
[data-theme="dark"] .inicio-banner {
    background: linear-gradient(135deg, #010c1e 0%, #0a2d6b 100%);
}
[data-theme="dark"] .inicio-section-title {
    border-bottom-color: #253350;
}

/* Responsive */
@media (max-width: 900px) {
    .inicio-kpi-grid      { grid-template-columns: repeat(2, 1fr); }
    .inicio-kpi-grid--3   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .inicio-kpi-grid,
    .inicio-kpi-grid--3   { grid-template-columns: 1fr; }
    .inicio-kpi-valor     { font-size: 24px; }
    .inicio-banner        { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   MÓDULO: REGISTRO DE ASISTENCIA
   ============================================ */

/* --- Botón Escanear QR --- */
.btn-escanear-qr {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--lausant-blue);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-escanear-qr:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-escanear-qr i { font-size: 18px; }

/* --- Panel superior admin --- */
.asistencia-panel-top { margin-bottom: 14px; }
.asistencia-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* --- Layout principal: QR + lista --- */
.asistencia-layout-principal {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 14px;
    margin-bottom: 14px;
    align-items: start;
}

/* --- Panel QR --- */
.asistencia-qr-panel {
    text-align: center;
    padding: 22px 18px;
}
.asistencia-tipo-badge {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.asistencia-qr-contenedor {
    background: white;
    border-radius: 16px;
    padding: 16px;
    display: inline-block;
    box-shadow: 0 4px 24px rgba(10,71,150,0.12);
    margin-bottom: 16px;
}
.asistencia-countdown-wrap {
    margin-top: 4px;
}
.asistencia-countdown-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.asistencia-countdown-numero {
    font-size: 40px;
    font-weight: 900;
    color: var(--lausant-blue);
    line-height: 1;
}
.asistencia-countdown-seg {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    margin-bottom: 10px;
}
.asistencia-progress-bar {
    background: var(--bg-color);
    border-radius: 20px;
    height: 6px;
    overflow: hidden;
    margin: 0 auto;
    max-width: 200px;
}
.asistencia-progress-fill {
    height: 100%;
    background: var(--lausant-blue);
    border-radius: 20px;
    transition: width 1s linear, background 0.5s;
}

/* --- Sin sesión placeholder --- */
.asistencia-sin-sesion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* --- Lista en vivo --- */
.asistencia-lista-vivo { overflow: hidden; }
.asis-live-badge {
    background: #27ae60;
    color: white;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* --- Tarjeta estado hoy (empleado) --- */
.asistencia-hoy-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--card-border, #dde4f0);
    margin-bottom: 0;
}
.asistencia-hoy-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}
.asistencia-estado-ico {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    background: var(--bg-color);
    color: var(--text-muted);
}
.asistencia-estado-texto {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}
.asistencia-horas-texto {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* --- Scanner QR modal --- */
.qr-scanner-video-wrap {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 1;
}
.qr-scanner-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.qr-scanner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.qr-scanner-frame {
    width: 220px;
    height: 220px;
    border: 3px solid white;
    border-radius: 18px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
    animation: qrPulse 1.5s ease-in-out infinite;
}
@keyframes qrPulse {
    0%, 100% { border-color: rgba(255,255,255,0.8); box-shadow: 0 0 0 9999px rgba(0,0,0,0.45); }
    50%       { border-color: #4da6ff; box-shadow: 0 0 0 9999px rgba(0,0,0,0.5), 0 0 24px rgba(77,166,255,0.5); }
}
.qr-scan-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4da6ff, transparent);
    animation: scanLine 2s ease-in-out infinite;
    top: 50%;
    margin: 0 18px;
}
@keyframes scanLine {
    0%   { transform: translateY(-100px); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(100px); opacity: 0; }
}

/* --- Estados de asistencia badges --- */
.asis-badge-presente  { background:#d4edda; color:#155724; border:1px solid #28a745; border-radius:12px; padding:2px 10px; font-size:10px; font-weight:700; white-space:nowrap; display:inline-block; }
.asis-badge-entrada   { background:#cce5ff; color:#004085; border:1px solid #4da6ff; border-radius:12px; padding:2px 10px; font-size:10px; font-weight:700; white-space:nowrap; display:inline-block; }
.asis-badge-falta     { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; border-radius:12px; padding:2px 10px; font-size:10px; font-weight:700; white-space:nowrap; display:inline-block; }

/* --- Modo oscuro --- */
[data-theme="dark"] .asistencia-qr-contenedor { background: #fff; }
[data-theme="dark"] .asistencia-progress-bar { background: #253347; }
[data-theme="dark"] .asistencia-hoy-card { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .asistencia-estado-ico { background: #253347; }
[data-theme="dark"] .asis-badge-entrada { background:#0a3166; color:#7ec8ff; border-color:#1e5fa8; }
[data-theme="dark"] .asis-badge-presente { background:#0d3b1e; color:#6edfa0; border-color:#1a7a3d; }
[data-theme="dark"] .asis-badge-falta { background:#3b0d12; color:#f1909a; border-color:#7a1a22; }

/* --- Responsive --- */
@media (max-width: 900px) {
    .asistencia-layout-principal { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .asistencia-hoy-card { flex-direction: column; align-items: flex-start; }
    .asistencia-panel-header { flex-direction: column; align-items: flex-start; }
}


/* ==============================================
   MÓDULO: AVISOS
   ============================================== */

/* ============================================
   MÓDULO AVISOS — Diseño Premium
   ============================================ */

@keyframes aviso-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes aviso-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.45); }
    60%       { box-shadow: 0 0 0 7px rgba(231,76,60,0); }
}
@keyframes editor-slide-in {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes req-panel-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.avisos-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 880px;
    margin: 0 auto;
    width: 100%;
}

/* ── Hero header ───────────────────────────────────── */
.avisos-hero-header {
    position: relative;
    background: linear-gradient(135deg, #0a3d8f 0%, #0a4796 45%, #1565c0 100%);
    border-radius: 20px;
    overflow: hidden;
    color: white;
    box-shadow: 0 10px 40px rgba(10,71,150,0.40);
}

/* Círculos decorativos */
.avisos-hero-decor1 {
    position: absolute; pointer-events: none;
    width: 240px; height: 240px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    top: -80px; right: -60px;
}
.avisos-hero-decor2 {
    position: absolute; pointer-events: none;
    width: 140px; height: 140px; border-radius: 50%;
    background: rgba(255,255,255,0.04);
    bottom: 30px; right: 140px;
}
.avisos-hero-decor3 {
    position: absolute; pointer-events: none;
    width: 70px; height: 70px; border-radius: 50%;
    background: rgba(255,255,255,0.07);
    top: 18px; left: 50%;
}

/* Fila superior: identidad + botón */
.avisos-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px 20px;
    position: relative;
}
.avisos-hero-identity {
    display: flex;
    align-items: center;
    gap: 16px;
}
.avisos-hero-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: rgba(255,255,255,0.16);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: white; flex-shrink: 0;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.28);
    backdrop-filter: blur(8px);
}
.avisos-hero-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: white;
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.avisos-hero-sub {
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 5px;
}
.avisos-hero-sub i { font-size: 13px; }

/* Botón Nuevo Aviso */
.avisos-btn-nuevo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: white;
    color: #0a4796;
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: 'Poppins', sans-serif;
}
.avisos-btn-nuevo:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 22px rgba(0,0,0,0.28);
}
.avisos-btn-nuevo i { font-size: 16px; }

/* Tira de filtros (tabs) en la parte baja del hero */
.avisos-hero-bottom {
    border-top: 1px solid rgba(255,255,255,0.13);
    padding: 0 28px;
}
.avisos-filtros-strip {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.avisos-filtros-strip::-webkit-scrollbar { display: none; }

.aviso-filtro-btn {
    border: none;
    border-bottom: 2.5px solid transparent;
    background: transparent;
    color: rgba(255,255,255,0.58);
    font-size: 13px;
    font-weight: 600;
    padding: 13px 18px;
    cursor: pointer;
    transition: color 0.18s, border-color 0.18s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Poppins', sans-serif;
}
.aviso-filtro-btn i { font-size: 15px; }
.aviso-filtro-btn:hover { color: rgba(255,255,255,0.88); }
.aviso-filtro-btn.activo {
    color: white;
    border-bottom-color: white;
    font-weight: 700;
}

/* Editor panel */
#panel-editor-aviso {
    border-radius: 16px;
    border: 1px solid var(--card-border);
    box-shadow: 0 6px 28px rgba(0,0,0,0.12);
    overflow: hidden;
    animation: editor-slide-in 0.3s cubic-bezier(0.34,1.3,0.64,1) both;
}

/* Lista */
.avisos-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.avisos-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 80px 20px; gap: 12px;
}

.avisos-cargando {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    text-align: center;
}

/* Ítem de aviso — tarjeta premium */
.aviso-sie-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s;
    animation: aviso-in 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
.aviso-sie-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
}

/* Franja de color izquierda por prioridad */
.aviso-sie-urgente     { border-left: 4px solid #e74c3c; }
.aviso-sie-normal      { border-left: 4px solid var(--lausant-blue); }
.aviso-sie-informativo { border-left: 4px solid #16a34a; }

/* Badge de prioridad */
.aviso-prio-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.7px;
    padding: 4px 10px; border-radius: 20px;
    text-transform: uppercase; flex-shrink: 0;
}
.aviso-prio-urgente {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    box-shadow: 0 2px 8px rgba(231,76,60,0.4);
    animation: aviso-pulse 2.2s ease-in-out infinite;
}
.aviso-prio-normal {
    background: rgba(10,71,150,0.1);
    color: var(--lausant-blue);
    border: 1px solid rgba(10,71,150,0.2);
}
.aviso-prio-informativo {
    background: rgba(22,163,74,0.1);
    color: #16a34a;
    border: 1px solid rgba(22,163,74,0.2);
}

.aviso-sie-nuevo {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 1px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(22,163,74,0.38);
}

.aviso-sie-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--card-border);
    flex-wrap: wrap;
}

.aviso-sie-cat {
    font-size: 14px;
    font-weight: 700;
    flex: 1;
    min-width: 0;
    letter-spacing: -0.1px;
}

.aviso-sie-fecha {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    display: flex; align-items: center; gap: 4px;
}

.aviso-sie-del {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: 5px 6px; border-radius: 7px;
    font-size: 16px; transition: color 0.18s, background 0.18s;
    display: flex; align-items: center;
}
.aviso-sie-del:hover { background: rgba(231,76,60,0.1); color: #e74c3c; }
[data-theme="dark"] .aviso-sie-del:hover,
body.modo-oscuro .aviso-sie-del:hover { background: rgba(248,113,113,0.15); color: #f87171; }

.aviso-sie-body {
    padding: 20px 22px 16px;
}

.aviso-sie-img-wrap {
    text-align: center;
    margin-bottom: 18px;
    border-radius: 10px;
    overflow: hidden;
}
.aviso-sie-img {
    max-width: 100%;
    max-height: 420px;
    border-radius: 10px;
    border: 1px solid var(--card-border);
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.25s, box-shadow 0.25s, opacity 0.25s;
    display: block;
    margin: 0 auto;
}
.aviso-sie-img:hover {
    transform: scale(1.018);
    box-shadow: 0 10px 32px rgba(0,0,0,0.2);
    opacity: 0.96;
}

.aviso-sie-mensaje {
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.72;
    margin: 0 0 14px;
    white-space: pre-wrap;
}

.aviso-sie-footer {
    border-top: 1px solid var(--card-border);
    padding-top: 10px;
    margin-top: 8px;
    display: flex; align-items: center; gap: 6px;
}

/* ---- Lightbox ---- */
#aviso-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.88);
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: aviso-in 0.2s ease;
}
#aviso-lightbox img {
    max-width: 90vw;
    max-height: 86vh;
    border-radius: 12px;
    box-shadow: 0 24px 72px rgba(0,0,0,0.65);
    cursor: default;
    object-fit: contain;
    animation: aviso-in 0.22s cubic-bezier(0.34,1.3,0.64,1);
}
#aviso-lightbox-close {
    position: fixed; top: 18px; right: 22px;
    background: rgba(255,255,255,0.14);
    border: none; color: white; border-radius: 50%;
    width: 40px; height: 40px; font-size: 20px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.18s, transform 0.18s;
    backdrop-filter: blur(4px);
}
#aviso-lightbox-close:hover { background: rgba(255,255,255,0.28); transform: scale(1.1); }
#aviso-lightbox-caption {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.55); color: white;
    padding: 8px 20px; border-radius: 20px; font-size: 13px;
    backdrop-filter: blur(4px); white-space: nowrap; max-width: 80vw;
    overflow: hidden; text-overflow: ellipsis;
}

/* ---- Editor de aviso ---- */
.aviso-editor-wrap { display: flex; flex-direction: column; gap: 18px; padding: 26px; }

.aviso-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--card-border);
}

.aviso-editor-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid var(--card-border); background: var(--card-bg);
    color: var(--text-main); font-size: 13px; font-weight: 600;
    padding: 9px 16px; border-radius: 9px; cursor: pointer;
    transition: all 0.18s; -webkit-tap-highlight-color: transparent;
}
.aviso-editor-btn:hover { border-color: var(--lausant-blue); color: var(--lausant-blue); background: rgba(10,71,150,0.07); }
.aviso-editor-btn-cancel:hover { border-color: #e74c3c; color: #e74c3c; background: rgba(231,76,60,0.08); }
.aviso-editor-btn-publish {
    background: linear-gradient(135deg, var(--lausant-blue), #1a5fbd);
    color: white !important; border-color: transparent;
    box-shadow: 0 3px 12px rgba(10,71,150,0.38);
}
.aviso-editor-btn-publish:hover { opacity: 0.9; color: white !important; transform: translateY(-1px); box-shadow: 0 5px 18px rgba(10,71,150,0.44); }
.aviso-editor-btn-publish:disabled { opacity: 0.7 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }
/* Dark mode — botones editor */
[data-theme="dark"] .aviso-editor-btn,
body.modo-oscuro .aviso-editor-btn { background: var(--card-bg); color: var(--text-main); border-color: var(--border-color); }
[data-theme="dark"] .aviso-editor-btn:hover,
body.modo-oscuro .aviso-editor-btn:hover { border-color: var(--lausant-accent); color: var(--lausant-accent); background: rgba(77,166,255,0.08); }
[data-theme="dark"] .aviso-editor-btn-cancel:hover,
body.modo-oscuro .aviso-editor-btn-cancel:hover { border-color: #f87171; color: #f87171; background: rgba(248,113,113,0.12); }

.aviso-editor-row {
    display: flex; gap: 14px; flex-wrap: wrap;
}
.aviso-editor-field { display: flex; flex-direction: column; gap: 7px; }
.aviso-editor-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--text-muted);
}
.aviso-editor-input {
    width: 100%; border: 1.5px solid var(--card-border);
    border-radius: 9px; padding: 10px 13px; font-size: 14px;
    background: var(--card-bg); color: var(--text-main);
    box-sizing: border-box; transition: border-color 0.18s, box-shadow 0.18s;
    font-family: inherit;
}
.aviso-editor-input:focus { border-color: var(--lausant-blue); outline: none; box-shadow: 0 0 0 3px rgba(10,71,150,0.1); }

/* Botones de prioridad */
.ae-prio-btn {
    border: 2px solid var(--card-border); background: var(--card-bg);
    color: var(--text-muted); font-size: 13px; font-weight: 600;
    padding: 9px 15px; border-radius: 9px; cursor: pointer;
    transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px;
}
.ae-prio-btn:not(.ae-prio-sel):hover { border-color: var(--lausant-blue); color: var(--lausant-blue); background: rgba(10,71,150,0.04); }
.ae-prio-btn[data-p="urgente"].ae-prio-sel    { border-color: #e74c3c;           background: rgba(231,76,60,0.08);  color: #e74c3c;           box-shadow: 0 2px 8px rgba(231,76,60,0.22); }
.ae-prio-btn[data-p="normal"].ae-prio-sel     { border-color: var(--lausant-blue); background: rgba(10,71,150,0.08);  color: var(--lausant-blue); box-shadow: 0 2px 8px rgba(10,71,150,0.2); }
.ae-prio-btn[data-p="informativo"].ae-prio-sel { border-color: #16a34a;           background: rgba(22,163,74,0.08); color: #16a34a;           box-shadow: 0 2px 8px rgba(22,163,74,0.2); }

/* Dropzone */
.aviso-dropzone {
    border: 2px dashed var(--card-border);
    border-radius: 12px;
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.aviso-dropzone:hover {
    border-color: var(--lausant-blue);
    background: rgba(10,71,150,0.04);
    transform: scale(1.01);
}
.aviso-dropzone.drag-over {
    border-color: var(--lausant-blue);
    background: rgba(10,71,150,0.07);
    transform: scale(1.02);
}

/* Nav badge */
#nav-avisos { position: relative; }

/* Modo oscuro */
[data-theme="dark"] .aviso-sie-item { background: var(--card-bg); }
[data-theme="dark"] .aviso-sie-header { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .aviso-sie-img { border-color: var(--card-border); }
[data-theme="dark"] .aviso-prio-normal { background: rgba(10,71,150,0.22); }
[data-theme="dark"] .aviso-prio-informativo { background: rgba(22,163,74,0.2); }
[data-theme="dark"] #aviso-lightbox-close { background: rgba(255,255,255,0.1); }

/* Responsive móvil */
@media (max-width: 600px) {
    .avisos-page { gap: 14px; }
    .avisos-hero-top { padding: 18px 18px 14px; gap: 12px; flex-wrap: wrap; }
    .avisos-hero-bottom { padding: 0 18px; }
    .avisos-hero-title { font-size: 17px; }
    .avisos-btn-nuevo { padding: 9px 14px; font-size: 12px; }
    .aviso-filtro-btn { padding: 11px 14px; font-size: 12px; }
    .aviso-sie-header { padding: 10px 14px; }
    .aviso-sie-body { padding: 14px 14px 10px; }
    .aviso-editor-wrap { padding: 16px; }
    .aviso-editor-row { flex-direction: column; }
    .aviso-editor-toolbar { flex-direction: column; align-items: flex-start; }
    .aviso-editor-toolbar > div { width: 100%; display: flex; gap: 6px; flex-wrap: wrap; }
    #aviso-lightbox img { max-width: 98vw; max-height: 80vh; }
    #aviso-lightbox-caption { font-size: 11px; padding: 6px 14px; }
}

/* ============================================
   REACCIONES & COMENTARIOS DE AVISOS
   ============================================ */

/* Wrapper que contiene picker + bar */
.av-interact-wrap {
    position: relative;
    border-top: 1px solid var(--card-border);
    margin: 4px -20px 0;
    padding: 0 20px;
}

/* Línea separadora entre summary y botones */
.av-react-summary-row {
    padding: 6px 0 2px;
    min-height: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Barra de botones reaccionar / comentar */
.av-interact-bar {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--card-border);
    padding: 2px 0;
}
.av-divider {
    width: 1px;
    height: 22px;
    background: var(--card-border);
    flex-shrink: 0;
}
.av-react-btn, .av-comment-btn {
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.av-react-btn:hover, .av-comment-btn:hover {
    background: var(--bg-main);
    color: var(--text-main);
}
.av-react-btn.av-react-active { font-weight: 700; }

@keyframes av-pop {
    0%  { transform: scale(1); }
    35% { transform: scale(1.28); }
    65% { transform: scale(0.88); }
    100%{ transform: scale(1); }
}
.av-react-btn.av-pop { animation: av-pop 0.36s cubic-bezier(0.34,1.56,0.64,1); }

/* Resumen de reacciones */
.av-react-sum { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.av-react-count {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 13px; cursor: pointer;
    padding: 3px 9px; border-radius: 20px;
    background: var(--bg-main); border: 1px solid var(--card-border);
    transition: background 0.15s, transform 0.12s;
    color: var(--text-main); font-weight: 500;
}
.av-react-count:hover { background: var(--bg-sidebar); transform: scale(1.06); }

/* Picker de reacciones (hold-press bubble) */
.av-react-picker {
    display: none;
    position: absolute;
    bottom: calc(100% + 12px);
    left: 20px;
    background: #ffffff;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 40px;
    padding: 10px 14px;
    gap: 4px;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.22),
        0 4px 12px rgba(0,0,0,0.14),
        0 0 0 1px rgba(255,255,255,0.9) inset;
    z-index: 1200;
    align-items: center;
    opacity: 0;
    transform: scale(0.72) translateY(16px);
    transform-origin: bottom left;
    transition: opacity 0.22s cubic-bezier(0.34,1.56,0.64,1), transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
}
.av-react-picker.av-picker-show {
    opacity: 1; transform: scale(1) translateY(0); pointer-events: all;
}
.av-react-opt {
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer; padding: 6px 6px 4px; border-radius: 14px;
    position: relative; transition: transform 0.15s, background 0.15s;
}
.av-react-opt:hover, .av-react-opt.av-opt-hov {
    background: rgba(0,0,0,0.05);
}
.av-react-emoji {
    font-size: 30px; line-height: 1; display: block;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}
.av-react-tip {
    font-size: 10px; font-weight: 700; letter-spacing: 0.2px;
    color: #ffffff;
    background: rgba(10,10,20,0.82);
    border-radius: 8px; padding: 3px 9px; white-space: nowrap;
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%); opacity: 0; pointer-events: none;
    transition: opacity 0.14s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.av-react-opt.av-opt-hov .av-react-emoji { transform: scale(1.55) translateY(-5px); }
.av-react-opt.av-opt-hov .av-react-tip   { opacity: 1; }

/* Sección de comentarios */
.av-csec {
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.28s ease, transform 0.28s ease, padding 0.28s ease;
}
.av-csec.av-csec-open {
    opacity: 1; transform: translateY(0); padding: 14px 20px 12px;
}

.av-com-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-height: 420px; overflow-y: auto; padding-right: 2px; }
.av-com-empty {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    color: var(--text-muted); font-size: 13px; padding: 18px 0;
}
.av-com-empty i { font-size: 20px; }

@keyframes av-com-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.av-com-item {
    display: flex; gap: 10px; align-items: flex-start;
    animation: av-com-in 0.22s ease forwards;
}
.av-com-av {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--lausant-blue); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
    text-transform: uppercase;
}
.av-com-av-me { background: linear-gradient(135deg, var(--lausant-blue) 0%, #4da6ff 100%); }
.av-com-bubble {
    flex: 1; background: var(--bg-main);
    border-radius: 14px; padding: 8px 12px;
    border: 1px solid var(--card-border);
}
.av-com-meta {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 3px; flex-wrap: wrap;
}
.av-com-meta strong { font-size: 12px; color: var(--text-main); }
.av-com-meta span   { font-size: 11px; color: var(--text-muted); }
.av-com-del {
    margin-left: auto; background: none; border: none;
    color: var(--text-muted); cursor: pointer; padding: 2px 4px;
    border-radius: 5px; font-size: 13px; transition: color 0.14s;
}
.av-com-del:hover { color: #e74c3c; }
.av-com-txt { font-size: 13px; color: var(--text-main); line-height: 1.5; word-break: break-word; }

/* Input row */
.av-com-input-row { display: flex; gap: 10px; align-items: flex-end; }
.av-com-field {
    flex: 1; display: flex; align-items: flex-end; gap: 6px;
    background: var(--bg-main); border: 1.5px solid var(--card-border);
    border-radius: 22px; padding: 6px 6px 6px 14px;
    transition: border-color 0.2s;
}
.av-com-field:focus-within { border-color: var(--lausant-blue); }
.av-com-ta {
    flex: 1; border: none; background: transparent; resize: none;
    outline: none; font-size: 13px; color: var(--text-main);
    font-family: inherit; min-height: 22px; max-height: 120px;
    overflow-y: auto; line-height: 1.5; padding: 2px 0;
}
.av-com-ta::placeholder { color: var(--text-muted); }
.av-com-send {
    background: var(--lausant-blue); color: #fff; border: none;
    border-radius: 50%; width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 16px;
    transition: background 0.15s, transform 0.15s;
}
.av-com-send:hover { background: #0a3a8a; transform: scale(1.08); }
.av-com-send:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Dark mode overrides */
[data-theme="dark"] .av-react-picker {
    background: #1e2d47;
    border-color: rgba(255,255,255,0.1);
    box-shadow:
        0 12px 40px rgba(0,0,0,0.55),
        0 4px 12px rgba(0,0,0,0.35),
        0 0 0 1px rgba(255,255,255,0.06) inset;
}
[data-theme="dark"] .av-react-opt:hover,
[data-theme="dark"] .av-react-opt.av-opt-hov {
    background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .av-react-tip {
    background: rgba(230,235,245,0.92);
    color: #0d1b2e;
}
[data-theme="dark"] .av-react-count   { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .av-com-bubble    { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .av-com-field     { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .av-com-ta        { color: var(--text-main); }

/* Responsive */
@media (max-width: 600px) {
    .av-interact-wrap { margin: 4px -14px 0; padding: 0 14px; }
    .av-react-picker  {
        left: 4px;
        padding: 8px 10px;
        gap: 2px;
        bottom: calc(100% + 10px);
        border-radius: 32px;
    }
    .av-react-btn, .av-comment-btn { font-size: 12px; padding: 8px 6px; gap: 5px; }
    .av-react-emoji   { font-size: 28px; }
    .av-react-tip     { font-size: 9px; padding: 2px 7px; bottom: calc(100% + 5px); }
}

/* ============================================
   CUSTOM EMPLOYEE SELECT (omisiones)
   ============================================ */
.emp-sel-wrap {
    position: relative;
    user-select: none;
}
.emp-sel-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--card-border, #dde4f0);
    border-radius: 8px;
    padding: 6px 10px;
    background: var(--card-bg, white);
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s;
    min-height: 36px;
}
.emp-sel-trigger:hover { border-color: var(--lausant-blue); }
.emp-sel-trigger.open  { border-color: var(--lausant-blue); box-shadow: 0 0 0 3px rgba(10,71,150,0.1); }
.emp-sel-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(10,71,150,0.12);
    color: var(--lausant-blue);
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
.emp-sel-name {
    flex: 1; font-size: 12px; color: var(--text-main);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.emp-sel-name.placeholder { color: var(--text-muted); }
.emp-sel-caret {
    font-size: 14px; color: var(--text-muted);
    transition: transform 0.18s; flex-shrink: 0;
}
.emp-sel-trigger.open .emp-sel-caret { transform: rotate(180deg); }
.emp-sel-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--card-bg, white);
    border: 1.5px solid var(--lausant-blue);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.15);
    z-index: 9999;
    overflow: hidden;
    animation: aviso-in 0.15s ease;
}
.emp-sel-search-wrap {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--card-border, #dde4f0);
}
.emp-sel-search-wrap i { color: var(--text-muted); font-size: 15px; flex-shrink: 0; }
.emp-sel-search {
    flex: 1; border: none; background: transparent;
    color: var(--text-main); font-size: 13px; outline: none; padding: 0;
}
.emp-sel-search::placeholder { color: var(--text-muted); }
.emp-sel-list { max-height: 210px; overflow-y: auto; }
.emp-sel-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 12px; cursor: pointer;
    transition: background 0.14s;
}
.emp-sel-item:hover   { background: rgba(10,71,150,0.07); }
.emp-sel-item.selected { background: rgba(10,71,150,0.1); }
.emp-sel-item-name   { font-size: 13px; font-weight: 600; color: var(--text-main); }
.emp-sel-item-puesto { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.emp-sel-empty {
    padding: 18px; text-align: center;
    color: var(--text-muted); font-size: 13px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
[data-theme="dark"] .emp-sel-trigger   { background: #253347; border-color: var(--border-color); }
[data-theme="dark"] .emp-sel-dropdown  { background: #1e3148; border-color: var(--lausant-blue); box-shadow: 0 8px 28px rgba(0,0,0,0.45); }
[data-theme="dark"] .emp-sel-search-wrap { border-color: var(--border-color); }
[data-theme="dark"] .emp-sel-item:hover    { background: rgba(10,71,150,0.22); }
[data-theme="dark"] .emp-sel-item.selected { background: rgba(10,71,150,0.28); }

/* ==============================================
   MÓDULO: FORMULARIO EMPLEADO (secciones)
   ============================================== */

/* Sección */
.emp-sec {
    border-bottom: 1px solid var(--card-border);
}
.emp-sec:last-of-type {
    border-bottom: none;
}
.emp-sec-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--lausant-blue);
    background: rgba(10,71,150,0.04);
    border-bottom: 1px solid var(--card-border);
}
.emp-sec-body {
    padding: 16px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Grids */
.emp-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.emp-grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

/* Campo individual */
.emp-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.emp-field label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-muted);
}
.emp-field input,
.emp-field select,
.emp-field textarea {
    border: 1.5px solid var(--card-border);
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 13px;
    background: var(--card-bg);
    color: var(--text-main);
    font-family: inherit;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.emp-field input:focus,
.emp-field select:focus,
.emp-field textarea:focus {
    outline: none;
    border-color: var(--lausant-blue);
}

/* Campo readonly/bloqueado */
.emp-readonly {
    background: var(--input-bg, #f0f4fa) !important;
    color: var(--text-muted) !important;
    cursor: default !important;
    pointer-events: none;
}

/* Info box */
.emp-info-box {
    background: rgba(10,71,150,0.05);
    border: 1px solid rgba(10,71,150,0.15);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 6px;
    align-items: flex-start;
    line-height: 1.5;
}

/* Radio personalizado */
.emp-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
}

/* Responsive */
@media (max-width: 600px) {
    .emp-grid2,
    .emp-grid3 {
        grid-template-columns: 1fr;
    }
    .emp-sec-body {
        padding: 14px 16px 18px;
    }
    .emp-sec-hdr {
        padding: 10px 16px;
    }
}

/* Modo oscuro */
[data-theme="dark"] .emp-sec-hdr {
    background: rgba(77,166,255,0.06);
    color: var(--lausant-blue);
}
[data-theme="dark"] .emp-info-box {
    background: rgba(77,166,255,0.07);
    border-color: rgba(77,166,255,0.2);
}
[data-theme="dark"] .emp-readonly {
    background: rgba(255,255,255,0.04) !important;
}

/* ============================================
   QR ASISTENCIA — RESPONSIVE (más grande en móvil)
   ============================================ */
@media (max-width: 959px) {
    .asistencia-qr-contenedor {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px;
        border-radius: 18px;
    }
    .asistencia-qr-contenedor canvas,
    .asistencia-qr-contenedor table,
    .asistencia-qr-contenedor img {
        max-width: 100% !important;
        height: auto !important;
        width: 100% !important;
    }
    .asistencia-qr-panel {
        padding: 14px;
    }
}

/* ============================================
   SELFIE VERIFICACIÓN BIOMÉTRICA
   ============================================ */
.selfie-vid-container {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 10px;
    background: #111;
    border: 3px solid rgba(77,166,255,0.6);
    box-shadow: 0 0 0 6px rgba(77,166,255,0.1), 0 0 28px rgba(77,166,255,0.18);
    flex-shrink: 0;
}
.selfie-vid-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}
.selfie-overlay-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    animation: selfie-ring 2s ease-in-out infinite;
}
@keyframes selfie-ring {
    0%, 100% { box-shadow: inset 0 0 0 2px rgba(77,166,255,0.3); }
    50%       { box-shadow: inset 0 0 0 4px rgba(77,166,255,0.65), 0 0 20px rgba(77,166,255,0.2); }
}
.selfie-scan-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 5%, rgba(77,166,255,0.85) 50%, transparent 95%);
    animation: selfie-scan 2.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes selfie-scan {
    0%   { top: 10%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 90%; opacity: 0; }
}
.selfie-flash {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: white;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
}
.btn-selfie-capture {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lausant-gradient);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 4px 16px rgba(10,71,150,0.32);
    transition: filter 0.2s, transform 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.btn-selfie-capture:hover  { filter: brightness(1.1); transform: translateY(-1px); }
.btn-selfie-capture:active { transform: scale(0.97); }
.btn-selfie-capture:disabled { opacity: 0.55; pointer-events: none; }

/* Contenedor análisis */
.analisis-face-ring {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 6px;
}
.analisis-face-inner {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: rgba(10,71,150,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: analisis-pulse 1.3s ease-in-out infinite;
}
@keyframes analisis-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.06); }
}
.analisis-ring-spin {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--lausant-accent);
    border-right-color: rgba(77,166,255,0.35);
    animation: spin 1s linear infinite;
}
.analisis-barra-bg {
    background: var(--bg-color);
    border-radius: 20px;
    height: 5px;
    overflow: hidden;
    margin: 0 auto 14px;
    max-width: 210px;
}
.analisis-barra-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--lausant-blue), var(--lausant-accent));
    border-radius: 20px;
    transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
}
.analisis-steps {
    text-align: left;
    max-width: 210px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.analisis-step {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    transition: color 0.3s;
}
.analisis-step.activo   { color: var(--lausant-blue); font-weight: 700; }
.analisis-step.completo { color: #27ae60; font-weight: 700; }
.analisis-step i { font-size: 14px; flex-shrink: 0; }
.analisis-spin  { animation: spin 0.9s linear infinite; display: inline-block; }

/* Dark mode tweaks */
[data-theme="dark"] .analisis-face-inner { background: rgba(77,166,255,0.08); }

/* ---- Botón Registrar Rostro ---- */
.btn-registrar-rostro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--lausant-blue);
    background: transparent;
    color: var(--lausant-blue);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.btn-registrar-rostro:hover {
    background: var(--lausant-blue);
    color: #fff;
}
[data-theme="dark"] .btn-registrar-rostro {
    border-color: var(--lausant-blue);
    color: var(--lausant-blue);
}
[data-theme="dark"] .btn-registrar-rostro:hover {
    background: var(--lausant-blue);
    color: #fff;
}

/* ---- Estado de detección facial en tiempo real ---- */
.face-detect-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(0,0,0,0.06);
    transition: background 0.3s, color 0.3s;
    margin-top: 8px;
}
.face-detect-status.buscando {
    color: var(--text-muted);
    background: rgba(0,0,0,0.05);
}
.face-detect-status.detectado {
    color: #27ae60;
    background: rgba(39,174,96,0.1);
}
.face-detect-status.error-deteccion {
    color: #e74c3c;
    background: rgba(231,76,60,0.08);
}
[data-theme="dark"] .face-detect-status.buscando  { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .face-detect-status.detectado { background: rgba(39,174,96,0.15); }
[data-theme="dark"] .face-detect-status.error-deteccion { background: rgba(231,76,60,0.12); }

/* ---- Badge: biometría registrada ---- */
.rostro-registrado-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: rgba(39,174,96,0.12);
    color: #27ae60;
    border: 1px solid rgba(39,174,96,0.3);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    animation: rostro-badge-in 0.3s ease both;
}
.rostro-registrado-badge i { font-size: 14px; }
@keyframes rostro-badge-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
[data-theme="dark"] .rostro-registrado-badge {
    background: rgba(39,174,96,0.18);
    border-color: rgba(39,174,96,0.4);
}

/* ============================================================
   FOTO DE PERFIL — FORMULARIO DE EMPLEADO
   ------------------------------------------------------------
   APARCADO, no muerto. La subida de fotos se retiró al perderse
   el acceso al Firebase donde vivían, y ahora en todas partes se
   pinta la inicial del nombre. Estos estilos se dejan a
   propósito: cuando se reponga el almacenamiento, volver a tener
   fotos es devolver el HTML del formulario y la lectura en el
   avatar — el aspecto ya está resuelto aquí.

   Ningún elemento lleva hoy estas clases, salvo .emp-tabla-inicial,
   que SÍ se usa y es la inicial de la lista de personal.
   ============================================================ */
.emp-foto-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 0 14px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}
.emp-foto-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--bg-color);
    border: 2.5px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    flex-shrink: 0;
    position: relative;
}
.emp-foto-preview:hover {
    border-color: var(--lausant-blue);
    box-shadow: 0 0 0 4px rgba(77,166,255,0.14);
    transform: scale(1.03);
}
.emp-foto-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.emp-foto-preview i {
    font-size: 32px;
    color: var(--text-muted);
    pointer-events: none;
}
.emp-foto-preview.tiene-foto {
    border-style: solid;
    border-color: var(--lausant-blue);
}
.emp-foto-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.btn-foto-subir {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--lausant-blue);
    background: transparent;
    color: var(--lausant-blue);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-foto-subir:hover { background: var(--lausant-blue); color: white; }
.btn-foto-quitar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: 8px;
    border: 1.5px solid #e74c3c;
    background: transparent;
    color: #e74c3c;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-foto-quitar:hover { background: #e74c3c; color: white; }
.emp-foto-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    text-align: center;
    opacity: 0.75;
}

/* Avatar en tabla de empleados */
.emp-tabla-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
    display: block;
}
.emp-tabla-inicial {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lausant-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

/* ============================================================
   VISTA DIARIA — CALENDARIO CLÍNICO
   ============================================================ */
.clin-dia-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.clin-dia-overlay.visible { opacity: 1; }

.clin-dia-panel {
    background: var(--card-bg);
    border-radius: 20px;
    width: 100%;
    max-width: 840px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 100px rgba(0,0,0,0.45);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transform: translateY(22px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.34,1.4,0.64,1);
}
.clin-dia-overlay.visible .clin-dia-panel { transform: translateY(0) scale(1); }

.clin-dia-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 12px;
}
.clin-dia-titulo-tipo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--lausant-blue);
    margin-bottom: 3px;
}
.clin-dia-titulo {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
    line-height: 1.2;
}
.clin-dia-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.15s;
    flex-shrink: 0;
}
.clin-dia-close:hover {
    background: var(--bg-color);
    color: var(--text-main);
    border-color: var(--text-muted);
    transform: scale(1.05);
}

.clin-dia-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 24px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    flex-wrap: wrap;
    min-height: 40px;
}
.clin-dia-stat {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.clin-dia-stat strong { color: var(--text-main); font-weight: 700; }

.clin-dia-scroll {
    overflow-y: auto;
    overflow-x: auto;
    flex: 1;
    overscroll-behavior: contain;
    /* width explícito: el timeline (hijo) tiene width fijo en JS, el scroll lo contiene */
}
.clin-dia-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.clin-dia-scroll::-webkit-scrollbar-track { background: transparent; }
.clin-dia-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.clin-dia-scroll::-webkit-scrollbar-corner { background: transparent; }

.clin-dia-timeline {
    display: flex;
    min-height: 100%;
    /* width y min-width se fijan via inline style desde JS según los clusters */
}

.clin-dia-time-col {
    width: 58px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    background: var(--card-bg);
    position: sticky;
    left: 0;
    z-index: 2;
}
.clin-dia-time-label {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 4px 8px 0 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.65;
    box-sizing: border-box;
    user-select: none;
}

.clin-dia-events-area {
    position: relative;
    flex-shrink: 0;
    /* width y height se fijan via inline style desde JS */
}
/* Garantizar que position:absolute en eventos funcione dentro del área */
.clin-dia-evento { position: absolute; }
.clin-dia-hour-line {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: var(--border-color);
    opacity: 0.45;
    pointer-events: none;
}
.clin-dia-hour-line.half {
    opacity: 0.18;
    background: none;
    border-top: 1px dashed var(--border-color);
}

.clin-dia-evento {
    position: absolute;
    border-radius: 9px;
    padding: 7px 10px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.12s, box-shadow 0.12s, filter 0.12s, z-index 0s;
    border-left: 3px solid;
    box-sizing: border-box;
    z-index: 3;
}
.clin-dia-evento:hover {
    transform: scale(1.025);
    box-shadow: 0 6px 22px rgba(0,0,0,0.22);
    filter: brightness(1.06);
    z-index: 10;
}
.clin-dia-ev-hora {
    font-size: 10px;
    font-weight: 800;
    opacity: 0.9;
    margin-bottom: 3px;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.clin-dia-ev-nombre {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.clin-dia-ev-sub {
    font-size: 10px;
    opacity: 0.72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
}

.clin-dia-now-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #e74c3c;
    z-index: 5;
    pointer-events: none;
}
.clin-dia-now-dot {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231,76,60,0.25);
}

.clin-dia-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 70px 20px;
    color: var(--text-muted);
    text-align: center;
    gap: 14px;
}
.clin-dia-empty i { font-size: 52px; opacity: 0.18; }
.clin-dia-empty-titulo { font-size: 17px; font-weight: 700; color: var(--text-main); }
.clin-dia-empty-sub { font-size: 13px; }

/* Dark mode adjustments */
[data-theme="dark"] .clin-dia-panel { box-shadow: 0 32px 100px rgba(0,0,0,0.7); }
[data-theme="dark"] .clin-dia-evento { filter: brightness(0.95); }
[data-theme="dark"] .clin-dia-evento:hover { filter: brightness(1.1); }

/* SweetAlert2 siempre encima de cualquier overlay personalizado */
.swal2-container { z-index: 10000 !important; }

/* ============================================================
   LOGIN FOOTER
   ============================================================ */
.login-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 20;
    padding: 12px 24px 14px;
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 100%);
    pointer-events: none;
}
.login-footer-aviso {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.72);
    line-height: 1.55;
    margin-bottom: 5px;
    letter-spacing: 0.1px;
}
.login-footer-aviso i {
    font-size: 12px;
    vertical-align: -1px;
    margin-right: 3px;
    opacity: 0.85;
}
.login-footer-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.login-footer-copy {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}
.login-footer-sep {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    flex-shrink: 0;
}
.login-footer-version {
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
@media (max-width: 400px) {
    .login-footer-aviso { font-size: 10.5px; }
    .login-footer { padding: 10px 16px 12px; }
}

/* Responsive */
@media (max-width: 620px) {
    .clin-dia-overlay { padding: 0; align-items: flex-end; }
    .clin-dia-panel {
        max-height: 94vh;
        border-radius: 20px 20px 0 0;
        max-width: 100%;
    }
    .clin-dia-titulo { font-size: 17px; }
}

/* ---- Borde verde/rojo en el video cuando se detecta/no ---- */
.selfie-vid-container.face-ok   { border-color: #27ae60 !important; box-shadow: 0 0 0 4px rgba(39,174,96,0.25) !important; }
.selfie-vid-container.face-fail { border-color: #e74c3c !important; box-shadow: 0 0 0 4px rgba(231,76,60,0.2) !important; }
[data-theme="dark"] .analisis-barra-bg   { background: #253347; }

/* ============================================================
   MÓDULO: ANÁLISIS DE ASISTENCIA
   ============================================================ */

/* Header */
.analis-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.analis-titulo {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}
.analis-titulo i { color: var(--lausant-blue); font-size: 24px; }
.analis-subtitulo { margin: 0; font-size: 13px; color: var(--text-muted); }
.analis-btn-export {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: linear-gradient(135deg, #061d40, #0a4796);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    white-space: nowrap;
}
.analis-btn-export:hover { opacity: 0.88; transform: translateY(-1px); }

/* Filtros */
.analis-filtros {
    padding: 18px 20px !important;
    margin-bottom: 20px;
}
.analis-filtros-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.analis-periodo-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.analis-pill {
    padding: 7px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.analis-pill:hover { border-color: var(--lausant-blue); color: var(--lausant-blue); }
.analis-pill.activo {
    background: var(--lausant-blue);
    border-color: var(--lausant-blue);
    color: #fff;
    box-shadow: 0 3px 12px rgba(10,71,150,0.3);
}
.analis-fecha-selects, .analis-fecha-rango {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.analis-select {
    padding: 7px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 13px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}
.analis-select:focus { border-color: var(--lausant-blue); }
.analis-rango-sep { color: var(--text-muted); font-weight: 700; }
.analis-btn-aplicar {
    padding: 7px 16px;
    background: var(--lausant-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.analis-btn-aplicar:hover { opacity: 0.85; }
.analis-search-row { margin-top: 12px; }
.analis-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-color);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 14px;
    max-width: 320px;
    transition: border-color 0.2s;
}
.analis-search:focus-within { border-color: var(--lausant-blue); }
.analis-search i { color: var(--text-muted); font-size: 16px; }
.analis-search input {
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 13px;
    outline: none;
    width: 100%;
}
.analis-search input::placeholder { color: var(--text-muted); }

/* Summary cards */
.analis-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 900px) { .analis-summary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .analis-summary-grid { grid-template-columns: 1fr; } }

.analis-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: analis-fade-in 0.4s ease both;
}
.analis-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.1); }
.analis-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.analis-card-icon i { font-size: 22px; color: #fff; }
.analis-card-val {
    font-size: 26px;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1.1;
}
.analis-card-lbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Periodo label */
.analis-periodo-label {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--lausant-blue);
    letter-spacing: 0.3px;
    margin-bottom: 16px;
    min-height: 20px;
}

/* Loading */
.analis-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px;
    color: var(--text-muted);
    font-size: 14px;
}
.analis-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-color);
    border-top-color: var(--lausant-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Table */
.analis-table-wrap {
    margin-bottom: 20px;
    overflow: hidden;
    padding: 0 !important;
}
.analis-table-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-color);
}
.analis-table-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 7px;
}
.analis-table-title i { color: var(--lausant-blue); }
.analis-table-scroll { overflow-x: auto; }
.analis-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 700px;
}
.analis-table thead tr {
    background: var(--bg-color);
}
.analis-table th {
    padding: 11px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.analis-table td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    vertical-align: middle;
}
.analis-table tbody tr:last-child td { border-bottom: none; }
.analis-table tbody tr { transition: background 0.15s; }
.analis-table tbody tr:hover { background: rgba(77,166,255,0.05); }

/* Employee cell */
.analis-emp-cell { display: flex; align-items: center; gap: 10px; }
.analis-emp-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4da6ff, #0a4796);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
}
.analis-emp-nombre { font-weight: 600; font-size: 13px; }
.analis-emp-puesto { font-size: 11px; color: var(--text-muted); }

/* Area tag */
.analis-area-tag {
    display: inline-block;
    padding: 3px 9px;
    background: rgba(77,166,255,0.1);
    color: var(--lausant-blue);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Hora chips */
.analis-hora-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.analis-hora-chip.entrada { background: rgba(39,174,96,0.1); color: #27ae60; }
.analis-hora-chip.salida  { background: rgba(231,76,60,0.09); color: #e74c3c; }

/* Hours badge */
.analis-horas-badge {
    display: inline-block;
    padding: 5px 12px;
    background: linear-gradient(135deg, rgba(10,71,150,0.12), rgba(77,166,255,0.12));
    color: var(--lausant-blue);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid rgba(77,166,255,0.2);
}
.analis-horas-nd { color: var(--text-muted); font-size: 13px; }
.analis-nocturno { margin-left: 4px; font-size: 13px; cursor: default; }

/* Estado badges */
.analis-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.analis-est-pres  { background: rgba(39,174,96,0.12);  color: #27ae60; }
.analis-est-solo  { background: rgba(243,156,18,0.12); color: #f39c12; }
.analis-est-pend  { background: rgba(127,140,141,0.12);color: #7f8c8d; }

/* Empty state */
.analis-empty {
    text-align: center;
    padding: 40px 20px !important;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.8;
}
.analis-empty i { font-size: 32px; display: block; margin-bottom: 8px; opacity: 0.5; }

/* Totales por empleado */
.analis-totales { padding: 20px !important; }
.analis-totales-title {
    margin: 0 0 16px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 7px;
}
.analis-totales-title i { color: var(--lausant-blue); }
.analis-totales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.analis-total-card {
    background: var(--bg-color);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-color);
    transition: transform 0.15s, box-shadow 0.15s;
    animation: analis-fade-in 0.35s ease both;
}
.analis-total-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.analis-total-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #061d40, #0a4796);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800;
    flex-shrink: 0;
}
.analis-total-info { flex: 1; min-width: 0; }
.analis-total-nombre { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analis-total-puesto { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analis-total-horas { text-align: right; flex-shrink: 0; }
.analis-total-h-val {
    font-size: 18px;
    font-weight: 900;
    color: var(--lausant-blue);
    line-height: 1.1;
}
.analis-total-h-dias { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* Animation */
@keyframes analis-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dark mode */
[data-theme="dark"] .analis-card { box-shadow: 0 2px 16px rgba(0,0,0,0.25); }
[data-theme="dark"] .analis-total-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
[data-theme="dark"] .analis-table tbody tr:hover { background: rgba(77,166,255,0.07); }
[data-theme="dark"] .analis-area-tag { background: rgba(77,166,255,0.15); }
[data-theme="dark"] .analis-horas-badge { background: rgba(77,166,255,0.15); border-color: rgba(77,166,255,0.3); }
[data-theme="dark"] .analis-hora-chip.entrada { background: rgba(39,174,96,0.15); }
[data-theme="dark"] .analis-hora-chip.salida  { background: rgba(231,76,60,0.13); }
[data-theme="dark"] .analis-search { background: var(--card-bg); }
[data-theme="dark"] .analis-btn-export { background: linear-gradient(135deg, #0a2d5e, #1a5fa8); }

/* Responsive */
@media (max-width: 959px) {
    .analis-header { flex-direction: column; align-items: stretch; }
    .analis-btn-export { width: 100%; justify-content: center; }
    .analis-filtros-row { flex-direction: column; align-items: stretch; }
    .analis-search { max-width: 100%; }
    .analis-card-val { font-size: 22px; }
}

/* ============================================================
   CROPPER DE FOTO DE PERFIL
   ============================================================ */
.crop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.crop-overlay.visible { opacity: 1; }

.crop-panel {
    background: var(--card-bg);
    border-radius: 22px;
    width: 100%;
    max-width: 340px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.55);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transform: scale(0.93) translateY(12px);
    transition: transform 0.28s cubic-bezier(0.34,1.5,0.64,1);
}
.crop-overlay.visible .crop-panel { transform: scale(1) translateY(0); }

.crop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border-color);
}
.crop-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}
.crop-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--bg-color);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.crop-close:hover { background: var(--border-color); color: var(--text-main); }

.crop-preview-area {
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--bg-color);
}
.crop-circle-mask {
    width: 252px;
    height: 252px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    border: 3px solid var(--lausant-blue);
    box-shadow: 0 0 0 6px rgba(41,128,185,0.15), 0 8px 32px rgba(0,0,0,0.18);
    flex-shrink: 0;
}
.crop-circle-mask:active { cursor: grabbing; }
.crop-circle-mask img {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    display: block;
}
.crop-guide {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    opacity: 0.75;
    line-height: 1.5;
}

.crop-zoom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-color);
}
.crop-zoom-row i { font-size: 17px; color: var(--text-muted); flex-shrink: 0; }
.crop-zoom-row input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
    outline: none;
    cursor: pointer;
}
.crop-zoom-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--lausant-blue);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    transition: transform 0.1s;
}
.crop-zoom-row input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }

.crop-actions {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
}

/* ============================================================
   AVATAR TOPBAR — FOTO DE PERFIL + POPUP
   ============================================================ */
.topbar-avatar-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s;
    outline: none;
}
.topbar-avatar-btn:hover { transform: scale(1.07); }
.topbar-avatar-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(41,128,185,0.4);
}
.topbar-avatar-btn .avatar { pointer-events: none; }

/* Photo shown in the topbar avatar */
.avatar-img-topbar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2.5px solid var(--lausant-blue);
    pointer-events: none;
}

/* Profile popup card */
.profile-popup {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 230px;
    z-index: 10000;   /* siempre por encima de cualquier contenido de la página */
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.22);
    z-index: 3000;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.34,1.4,0.64,1);
}
.profile-popup.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.profile-popup-top {
    padding: 20px 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}
.profile-popup-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    border: 3px solid var(--lausant-blue);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.profile-popup-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.profile-popup-nombre {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    text-align: center;
    line-height: 1.3;
}
.profile-popup-puesto {
    font-size: 11px;
    color: white;
    background: var(--lausant-blue);
    padding: 3px 11px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: center;
}
.profile-popup-info {
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profile-popup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.profile-popup-row i { font-size: 14px; color: var(--lausant-blue); flex-shrink: 0; }
.profile-popup-row span { color: var(--text-main); font-weight: 600; }

/* Dark mode */
[data-theme="dark"] .profile-popup { box-shadow: 0 16px 50px rgba(0,0,0,0.5); }
[data-theme="dark"] .crop-panel { box-shadow: 0 32px 80px rgba(0,0,0,0.8); }

/* Responsive */
@media (max-width: 600px) {
    .crop-overlay { padding: 16px; }
    .crop-circle-mask { width: 220px; height: 220px; }
    .profile-popup { right: -10px; min-width: 210px; }
}

/* ============================================
   PERMISOS — SOLO LECTURA POR ROL
   Oculta botones de acción para roles de lectura
   ============================================ */

/* Personal: solo lectura */
body.solo-leer-personal button[onclick="abrirModalNuevoEmpleado()"],
body.solo-leer-personal button[onclick*="abrirModalEmpleado("] {
    display: none !important;
}

/* Financiera: solo lectura */
body.solo-leer-financiera button[onclick="abrirModalNuevoAcreedor()"],
body.solo-leer-financiera button[onclick="abrirModalNuevoDeudor()"],
body.solo-leer-financiera #btn-eliminar-acreedor,
body.solo-leer-financiera #btn-editar-acreedor,
body.solo-leer-financiera #btn-registrar-pago,
body.solo-leer-financiera #btn-ajustar-cantidades,
body.solo-leer-financiera #btn-nuevo-abono-acr,
body.solo-leer-financiera #btn-nuevo-abono,
body.solo-leer-financiera button[onclick="eliminarDeudor()"],
body.solo-leer-financiera button[onclick*="abrirModalImportar("],
body.solo-leer-financiera button[onclick*="abrirEditarDeudor("] {
    display: none !important;
}

/* Clínica: solo lectura */
body.solo-leer-clinica button[onclick="abrirModalNuevaCirugia()"],
body.solo-leer-clinica button[onclick="abrirModalNuevaConsulta()"],
body.solo-leer-clinica button[onclick="abrirModalNuevaInfusion()"],
body.solo-leer-clinica button[onclick*="eliminarCirugia("],
body.solo-leer-clinica button[onclick*="eliminarConsulta("],
body.solo-leer-clinica button[onclick*="eliminarInfusion("] {
    display: none !important;
}

/* Compras: solo lectura */
body.solo-leer-compras button[onclick="abrirModalNuevaRequisicion()"] {
    display: none !important;
}

/* ============================================
   ACCESOS A LA PLATAFORMA — Formulario (a2-*)
   Diseño limpio: tarjeta de vacaciones + grid
   de secciones con pills de nivel de acceso
   ============================================ */

/* Contenedor raíz */
.a2-wrap {
    padding: 4px 0 0;
}

/* ── Tarjeta de vacaciones (fila superior) ── */
.a2-vac {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, var(--lausant-blue, #0a4796) 0%, #1565c0 100%);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.a2-vac-ico {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.a2-vac-ico i { font-size: 22px; color: #fff; }
.a2-vac-txt {
    flex: 1;
    min-width: 0;
}
.a2-vac-txt strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}
.a2-vac-txt span {
    font-size: 12.5px;
    color: rgba(255,255,255,0.8);
}
.a2-vac-txt b { color: #fff; }
.a2-vac-btns {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ── Grid de secciones ── */
.a2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
}

/* ── Sección individual ── */
.a2-sec {
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #fff);
    transition: box-shadow 0.2s;
}
.a2-sec:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

.a2-sec-hdr {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    background: var(--c, #1e40af);
}
.a2-sec-hdr > i { font-size: 18px; color: rgba(255,255,255,0.9); flex-shrink: 0; }
.a2-sec-hdr > span { font-size: 13px; font-weight: 700; color: #fff; flex: 1; }
.a2-sec-body {
    padding: 4px 0;
}

/* Badges en el header de sección */
.a2-bdg-sin, .a2-bdg-par, .a2-bdg-tot {
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.a2-bdg-sin { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }
.a2-bdg-par { background: #fef08a; color: #713f12; }
.a2-bdg-tot { background: #bbf7d0; color: #14532d; }

/* ── Fila de permiso ── */
.a2-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    flex-wrap: wrap;
}
.a2-row:not(:last-child) {
    border-bottom: 1px solid var(--border-color, #f1f5f9);
}
.a2-row-lbl {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
.a2-row-lbl i { font-size: 15px; color: var(--text-muted, #94a3b8); }
.a2-row-lbl span { font-size: 12.5px; font-weight: 600; color: var(--text-primary, #1e293b); }
.a2-row-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Pill / botón de nivel de acceso ── */
.a2-pill {
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.a2-pill:hover {
    border-color: #94a3b8;
    color: var(--text-primary, #1e293b);
    background: var(--hover-bg, #f8fafc);
}
.a2-pill i { font-size: 12px; }

/* Estados activos */
.a2-pill.a2-sin {
    background: #fff1f2;
    border-color: #fda4af;
    color: #be123c;
}
.a2-pill.a2-ver {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.a2-pill.a2-propio {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}
.a2-pill.a2-total {
    background: #f0fdf4;
    border-color: #86efac;
    color: #15803d;
}

/* Dark mode */
[data-theme="dark"] .a2-sec {
    border-color: #2d3748;
    background: #1a202c;
}
[data-theme="dark"] .a2-row { border-bottom-color: #2d3748; }
[data-theme="dark"] .a2-pill {
    border-color: #4a5568;
    color: #718096;
    background: transparent;
}
[data-theme="dark"] .a2-pill:hover {
    border-color: #718096;
    color: #e2e8f0;
    background: #2d3748;
}
[data-theme="dark"] .a2-pill.a2-sin    { background: #450a0a; border-color: #f43f5e; color: #fda4af; }
[data-theme="dark"] .a2-pill.a2-ver    { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; }
[data-theme="dark"] .a2-pill.a2-propio { background: #431407; border-color: #f97316; color: #fdba74; }
[data-theme="dark"] .a2-pill.a2-total  { background: #052e16; border-color: #22c55e; color: #86efac; }
[data-theme="dark"] .a2-bdg-par { background: #422006; color: #fcd34d; }
[data-theme="dark"] .a2-bdg-tot { background: #052e16; color: #86efac; }

/* Responsive */
@media (max-width: 640px) {
    .a2-grid { grid-template-columns: 1fr; }
    .a2-vac  { flex-direction: column; align-items: flex-start; }
    .a2-vac-btns { margin-left: 0; }
    .a2-row  { flex-direction: column; align-items: flex-start; }
    .a2-row-pills { justify-content: flex-start; }
}

/* Mantener compatibilidad con CSS anterior (no borrar hasta confirmar) */

/* Sección contenedora */
.emp-sec-accesos {
    margin-top: 8px;
}
.emp-sec-hdr-accesos {
    background: linear-gradient(135deg, #0a4796 0%, #1565c0 100%);
    color: #fff;
    border-radius: 12px 12px 0 0;
}
.emp-sec-hdr-accesos i {
    color: rgba(255,255,255,0.85);
}

/* Raíz del form de accesos */
.acc-form-root {
    padding: 18px 20px 20px;
    background: var(--card-bg, #fff);
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-top: none;
}

/* Fila de vacaciones */
.acc-vac-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border: 1.5px solid #bee3f8;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
[data-theme="dark"] .acc-vac-row {
    background: linear-gradient(135deg, #1a2a3a 0%, #1e3248 100%);
    border-color: #2d4a6e;
}
.acc-vac-icon {
    width: 38px;
    height: 38px;
    background: #0a4796;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.acc-vac-icon i {
    color: #fff;
    font-size: 18px;
}
.acc-vac-info {
    flex: 1;
    min-width: 0;
}
.acc-vac-info strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary, #1a202c);
    margin-bottom: 3px;
}
.acc-vac-info span {
    font-size: 12px;
    color: var(--text-muted, #718096);
}
.acc-vac-info .acc-jefe-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #0a4796;
    color: #fff;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11.5px;
    font-weight: 600;
    margin-left: 6px;
}
.acc-vac-info .acc-jefe-chip i { font-size: 13px; }
/* Toggle switch */
.acc-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.acc-toggle-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    white-space: nowrap;
}
.acc-toggle {
    position: relative;
    width: 46px;
    height: 24px;
    flex-shrink: 0;
}
.acc-toggle input { opacity: 0; width: 0; height: 0; }
.acc-toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e0;
    border-radius: 24px;
    transition: background 0.25s;
    cursor: pointer;
}
.acc-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.acc-toggle input:checked + .acc-toggle-slider { background: #0a4796; }
.acc-toggle input:checked + .acc-toggle-slider::before { transform: translateX(22px); }

/* Lista de módulos */
.acc-modulos-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Módulo individual */
.acc-modulo {
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.acc-modulo:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }

/* Header del módulo */
.acc-mod-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
    user-select: none;
    background: var(--card-bg, #fff);
    transition: background 0.15s;
}
.acc-mod-hdr:hover { background: var(--hover-bg, #f7fafc); }
.acc-mod-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.acc-mod-icon i { font-size: 17px; color: #fff; }
.acc-mod-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary, #1a202c);
    flex: 1;
}
.acc-mod-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    background: #e2e8f0;
    color: #718096;
    white-space: nowrap;
    transition: all 0.2s;
}
.acc-mod-badge.badge-parcial {
    background: #fef3c7;
    color: #92400e;
}
.acc-mod-badge.badge-completo {
    background: #d1fae5;
    color: #065f46;
}
.acc-mod-badge.badge-sin {
    background: #fee2e2;
    color: #991b1b;
}
[data-theme="dark"] .acc-mod-badge { background: #2d3748; color: #a0aec0; }
[data-theme="dark"] .acc-mod-badge.badge-parcial { background: #3d2e00; color: #fcd34d; }
[data-theme="dark"] .acc-mod-badge.badge-completo { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .acc-mod-badge.badge-sin { background: #450a0a; color: #fca5a5; }
.acc-mod-chevron {
    font-size: 16px;
    color: var(--text-muted, #a0aec0);
    transition: transform 0.25s;
    flex-shrink: 0;
}
.acc-mod-body.abierto + .acc-mod-hdr .acc-mod-chevron,
.acc-mod-hdr[aria-expanded="true"] .acc-mod-chevron { transform: rotate(180deg); }

/* Cuerpo del módulo */
.acc-mod-body {
    display: none;
    flex-direction: column;
    gap: 0;
    border-top: 1.5px solid var(--border-color, #e2e8f0);
    background: var(--sidebar-bg, #f8fafc);
    padding: 6px 0;
}
.acc-mod-body.abierto { display: flex; }

/* Item de permiso */
.acc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    transition: background 0.15s;
}
.acc-item:not(:last-child) { border-bottom: 1px solid var(--border-color, #e2e8f0); }
.acc-item:hover { background: var(--hover-bg, #f0f4f8); }
.acc-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(0,0,0,0.05);
}
.acc-item-icon i { font-size: 14px; }
.acc-item-info {
    flex: 1;
    min-width: 0;
}
.acc-item-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1a202c);
    display: block;
}
.acc-item-desc {
    font-size: 11.5px;
    color: var(--text-muted, #718096);
    display: block;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}
.acc-opts-row {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.acc-opt {
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: var(--card-bg, #fff);
    color: var(--text-muted, #718096);
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
    line-height: 1;
}
.acc-opt:hover {
    border-color: #0a4796;
    color: #0a4796;
    background: #eff6ff;
}
.acc-opt.activo {
    background: #0a4796;
    color: #fff;
    border-color: #0a4796;
    box-shadow: 0 2px 8px rgba(10,71,150,0.3);
}
.acc-opt.activo-ver {
    background: #0284c7;
    color: #fff;
    border-color: #0284c7;
    box-shadow: 0 2px 8px rgba(2,132,199,0.3);
}
.acc-opt.activo-si {
    background: #059669;
    color: #fff;
    border-color: #059669;
    box-shadow: 0 2px 8px rgba(5,150,105,0.3);
}
.acc-opt.activo-sin {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
    box-shadow: 0 2px 8px rgba(220,38,38,0.2);
}
[data-theme="dark"] .acc-opt {
    background: #2d3748;
    border-color: #4a5568;
    color: #a0aec0;
}
[data-theme="dark"] .acc-opt:hover {
    border-color: #63b3ed;
    color: #63b3ed;
    background: #1a3a5c;
}
[data-theme="dark"] .acc-mod-body { background: #1a202c; }

/* Responsive */
@media (max-width: 640px) {
    .acc-vac-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .acc-toggle-wrap { margin-left: 0; }
    .acc-item { flex-wrap: wrap; }
    .acc-opts-row { justify-content: flex-start; }
    .acc-item-desc { max-width: 100%; white-space: normal; }
}

/* ============================================
   EQUIPO VACACIONES (jefe directo)
   ============================================ */
.equipo-vac-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 2px dashed var(--border-color);
}
.equipo-vac-hdr {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.equipo-vac-hdr > i {
    font-size: 24px;
    color: var(--lausant-blue);
    flex-shrink: 0;
}
.equipo-vac-badge {
    background: #f59e0b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: auto;
}
.eq-btn-aprobar, .eq-btn-rechazar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}
.eq-btn-aprobar {
    background: #16a34a;
    color: #fff;
}
.eq-btn-rechazar {
    background: #dc2626;
    color: #fff;
}
.eq-btn-aprobar:hover, .eq-btn-rechazar:hover { opacity: .85; }

[data-theme="dark"] .equipo-vac-section {
    border-top-color: #374151;
}

/* --- Paginación --- */
.pag-wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:12px 4px 4px; }
.pag-info { font-size:12px; color:var(--text-muted); }
.pag-btns { display:flex; gap:4px; flex-wrap:wrap; }
.pag-btn { min-width:32px; height:32px; border:1px solid var(--border-color); border-radius:6px; background:var(--bg-main); color:var(--text-main); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; padding:0 8px; }
.pag-btn:hover { background:var(--lausant-blue); color:#fff; border-color:var(--lausant-blue); }
.pag-btn.pag-act { background:var(--lausant-blue); color:#fff; border-color:var(--lausant-blue); font-weight:700; }
[data-theme="dark"] .pag-btn { background:var(--bg-sidebar); }

/* ============================================================
   RESPONSIVE MÓVIL — COEM
   Breakpoints: 768px (tablet), 480px (móvil pequeño)
   ============================================================ */

/* ── Topbar en móvil ─────────────────────────────────────── */
@media (max-width: 768px) {
    #topbar {
        padding: 0 12px;
        height: 52px;
    }
    #topbar .topbar-left {
        gap: 8px;
    }
    #topbar .topbar-logo {
        font-size: 15px;
    }
    #topbar .topbar-right {
        gap: 6px;
    }
    .topbar-user-name {
        display: none;
    }
    .notif-badge {
        right: -4px;
        top: -4px;
        font-size: 9px;
        min-width: 16px;
        height: 16px;
    }
}

/* ── Sidebar en móvil (overlay tipo drawer) ──────────────── */
@media (max-width: 768px) {
    #layout {
        flex-direction: column;
    }
    #sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 260px !important;
        height: 100dvh;
        z-index: 1100;
        transition: left 0.28s cubic-bezier(.4,0,.2,1);
        box-shadow: 4px 0 24px rgba(0,0,0,.18);
        overflow-y: auto;
    }
    #sidebar.mob-open {
        left: 0;
    }
    /* Overlay oscuro detrás del sidebar */
    #sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1099;
    }
    #sidebar-overlay.mob-open {
        display: block;
    }
    #main-content {
        margin-left: 0 !important;
        width: 100% !important;
        min-height: calc(100dvh - 52px);
        padding: 10px 8px 20px !important;
    }
    /* Botón hamburguesa — mostrar en móvil */
    #mob-menu-btn {
        display: flex !important;
    }
}

/* ── Cards y contenido general ───────────────────────────── */
@media (max-width: 768px) {
    .card {
        padding: 14px 12px;
        border-radius: 10px;
    }
    .empleados-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .empleados-header h3 {
        font-size: 16px;
    }
    .empleados-header button,
    .empleados-header .btn {
        width: 100%;
        justify-content: center;
    }
    .stat-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }
    .stat-card {
        padding: 12px 10px;
    }
    .stat-card .stat-value {
        font-size: 22px;
    }
}

/* ── Tablas responsivas (scroll horizontal) ──────────────── */
@media (max-width: 768px) {
    .tabla-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }
    table {
        min-width: 520px;
        font-size: 12px;
    }
    th, td {
        padding: 8px 10px;
        white-space: nowrap;
    }
    /* Columnas de acción siempre visibles */
    th:last-child, td:last-child {
        position: sticky;
        right: 0;
        background: var(--bg-card);
        box-shadow: -2px 0 6px rgba(0,0,0,.06);
        z-index: 1;
    }
    [data-theme="dark"] th:last-child,
    [data-theme="dark"] td:last-child {
        background: var(--bg-card);
    }
    .pag-wrap {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .pag-btns {
        justify-content: center;
    }
}

/* ── Filtros en móvil ────────────────────────────────────── */
@media (max-width: 768px) {
    .filtros-container {
        padding: 10px;
    }
    .filtros-grid {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }
    .filtros-grid input,
    .filtros-grid select {
        width: 100%;
        font-size: 13px;
    }
    .filtros-acciones {
        flex-direction: column;
        gap: 8px;
    }
    .filtros-acciones button {
        width: 100%;
        justify-content: center;
    }
}

/* ── Formularios y grids de empleado ─────────────────────── */
@media (max-width: 768px) {
    .emp-grid2,
    .emp-grid3,
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    .emp-sec-hdr {
        font-size: 13px;
        padding: 10px 12px;
    }
    .emp-sec-body {
        padding: 12px 10px;
    }
    /* Accesos form en móvil */
    .a2-grid {
        grid-template-columns: 1fr !important;
    }
    .a2-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .a2-row-pills {
        width: 100%;
        flex-wrap: wrap;
    }
    .a2-pill {
        flex: 1;
        min-width: 70px;
        justify-content: center;
        font-size: 11px;
        padding: 5px 6px;
    }
}

/* ── Modales en móvil ────────────────────────────────────── */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .modal-box {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92dvh;
        border-radius: 18px 18px 0 0;
        overflow-y: auto;
        padding: 20px 14px 28px;
        margin: 0;
    }
    .modal-box h3,
    .modal-box h2 {
        font-size: 17px;
    }
    .modal-btns {
        flex-direction: column;
        gap: 8px;
    }
    .modal-btns button,
    .modal-btns .btn {
        width: 100%;
        justify-content: center;
    }
    /* SweetAlert2 en móvil */
    .swal2-popup {
        width: 95vw !important;
        font-size: 14px !important;
    }
}

/* ── Módulo de vacaciones del empleado ───────────────────── */
@media (max-width: 768px) {
    #emp-tab-solicitudes .resumen-vac {
        grid-template-columns: 1fr 1fr;
    }
    .vac-dias-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Módulo de asistencia ────────────────────────────────── */
@media (max-width: 768px) {
    .asistencia-grid {
        grid-template-columns: 1fr !important;
    }
    .qr-container {
        padding: 16px;
    }
    .qr-container img,
    .qr-container canvas {
        max-width: 200px;
    }
}

/* ── Resumen financiero ──────────────────────────────────── */
@media (max-width: 768px) {
    .res-fin-grid,
    .resumen-grid {
        grid-template-columns: 1fr !important;
    }
    .res-fin-chart {
        height: 200px;
    }
}

/* ── Botones de acción compactos en móvil ────────────────── */
@media (max-width: 768px) {
    .btn-login {
        font-size: 13px;
        padding: 9px 14px;
    }
    .btn-nuevo-emp {
        padding: 9px 16px;
        font-size: 13px;
    }
    /* Botones de filtro rápido (Pendiente, Pagado, etc.) */
    .filtro-rapido-btns {
        flex-wrap: wrap;
        gap: 6px;
    }
    .filtro-rapido-btns button {
        flex: 1;
        min-width: 80px;
        font-size: 11px;
        padding: 6px 8px;
    }
}

/* ── Perfil de empleado (modal de edición) ───────────────── */
@media (max-width: 480px) {
    .emp-grid2,
    .emp-grid3 {
        grid-template-columns: 1fr !important;
    }
    .emp-sec {
        border-radius: 8px;
    }
    .modal-box {
        padding: 16px 10px 24px;
    }
    .stat-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Avisos en móvil ─────────────────────────────────────── */
@media (max-width: 768px) {
    .aviso-card {
        padding: 12px 10px;
    }
    .aviso-header {
        flex-direction: column;
        gap: 6px;
    }
    .aviso-actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ── Calendarios clínicos en móvil ──────────────────────── */
@media (max-width: 768px) {
    .calendar-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 8px;
    }
    .fc .fc-toolbar-title {
        font-size: 15px;
    }
}

/* ── Omisiones personales en móvil ──────────────────────── */
@media (max-width: 768px) {
    #emp-tab-mis-omisiones .card {
        padding: 12px 10px;
    }
}

/* ============================================================
   RESPONSIVE ADICIONAL — selectores correctos COEM
   ============================================================ */

/* Tablas con scroll horizontal en móvil */
@media (max-width: 959px) {
    .tabla-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 540px; font-size: 12px; }
    th, td { padding: 8px 10px; white-space: nowrap; }
    th:last-child, td:last-child {
        position: sticky; right: 0;
        background: var(--bg-card);
        box-shadow: -3px 0 8px rgba(0,0,0,.07);
        z-index: 1;
    }
    [data-theme="dark"] th:last-child,
    [data-theme="dark"] td:last-child { background: var(--bg-card); }
}

/* empleados-header en móvil */
@media (max-width: 600px) {
    .empleados-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .empleados-header > div:last-child { width: 100%; }
    .empleados-header button,
    .empleados-header .btn-nuevo-emp { width: 100%; justify-content: center; }
}

/* Filtros — columna única en móvil */
@media (max-width: 600px) {
    .filtros-container { padding: 10px 12px; }
    .filtros-grid { grid-template-columns: 1fr !important; gap: 8px; }
    .filtros-grid input, .filtros-grid select { width: 100%; font-size: 13px; }
}

/* Grids de formulario de empleado — columna única en móvil */
@media (max-width: 600px) {
    .emp-grid2, .emp-grid3 { grid-template-columns: 1fr !important; }
    .emp-sec-body { padding: 12px 10px; }
}

/* Paginación en móvil */
@media (max-width: 600px) {
    .pag-wrap { flex-direction: column; align-items: center; gap: 8px; }
    .pag-btns { justify-content: center; flex-wrap: wrap; }
    .pag-btn { min-width: 30px; height: 30px; font-size: 12px; }
}

/* Modales — bottom sheet en móvil (usando clase real: .modal-backdrop + .modal-contenido) */
@media (max-width: 600px) {
    .modal-backdrop { align-items: flex-end; padding: 0; }
    .modal-contenido {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
        max-height: 92dvh;
        overflow-y: auto;
        animation: slideUpMobile .28s cubic-bezier(.4,0,.2,1) forwards !important;
    }
    @keyframes slideUpMobile {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* Modal de empleado (modal-overlay + modal-box son de SweetAlert inline — ajustar .swal2) */
@media (max-width: 600px) {
    .swal2-popup { width: 96vw !important; font-size: 14px !important; }
    .swal2-html-container { padding: 0 4px !important; }
    /* Modal grande de empleado */
    #modalNuevoEmpleado .modal-contenido,
    #modalEditarEmpleado .modal-contenido {
        max-height: 96dvh;
        padding: 14px 10px 24px;
    }
}

/* Stats cards — 2 columnas en móvil pequeño */
@media (max-width: 600px) {
    .stats-admin { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .stat-card h3 { font-size: 10px; }
    .stat-card p  { font-size: 22px; }
    .panel-informativo { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .card-info p  { font-size: 22px; }
}

/* Accesos form — responsive en móvil */
@media (max-width: 640px) {
    .a2-grid { grid-template-columns: 1fr !important; }
    .a2-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .a2-row-pills { width: 100%; flex-wrap: wrap; }
    .a2-pill { flex: 1; min-width: 60px; justify-content: center; font-size: 11px; padding: 5px 4px; }
}

/* Botones de filtro rápido (Pendiente / Pagado / etc.) */
@media (max-width: 600px) {
    [id*="omi-btn"], [id*="acr-btn"], [id*="deu-btn"] {
        flex: 1; font-size: 11px; padding: 6px 8px; min-width: 0;
    }
}

/* Topbar en móvil */
@media (max-width: 959px) {
    .topbar { padding: 10px 14px; }
    .topbar-title { font-size: 15px; }
}

/* Asistencia — QR y panel en móvil */
@media (max-width: 600px) {
    .qr-seccion { flex-direction: column; align-items: center; }
    .registro-asistencia-wrap { flex-direction: column; }
}

/* Calendario FullCalendar en móvil */
@media (max-width: 600px) {
    .fc .fc-toolbar { flex-direction: column; gap: 6px; }
    .fc .fc-toolbar-title { font-size: 14px; }
    .fc .fc-button { padding: 4px 8px; font-size: 12px; }
}

/* ============================================
   MODO MONITOR QR (rol asistencia)
   ============================================ */

/* Sidebar limpio: solo logo + botón asistencia */
body.modo-monitor-qr .sidebar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Botón asistencia destacado en modo monitor */
body.modo-monitor-qr a.nav-asistencia-monitor {
    margin: 16px 12px 0;
    padding: 16px 20px !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: 10px;
    border-left: 4px solid white !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: white !important;
    pointer-events: none; /* Siempre activo, no necesita click */
}

body.modo-monitor-qr a.nav-asistencia-monitor i {
    font-size: 20px !important;
    color: white !important;
}

/* Ocultar hamburger en móvil — el monitor no necesita abrir el menú */
body.modo-monitor-qr .mobile-menu-btn {
    display: none !important;
}

/* Centrar el contenido QR en la pantalla */
body.modo-monitor-qr .main-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

body.modo-monitor-qr #adm-tab-asistencia {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
}

/* En móvil el sidebar NO muestra nada (hamburger oculto), 
   el contenido QR ocupa toda la pantalla */
@media (max-width: 959px) {
    body.modo-monitor-qr .dashboard-layout {
        padding-bottom: 0 !important;
    }
    body.modo-monitor-qr .main-content {
        padding: 16px;
    }
    body.modo-monitor-qr #adm-tab-asistencia {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MÓDULO: GESTIÓN DE ACTIVIDADES — TAREAS A REALIZAR
═══════════════════════════════════════════════════════════════ */

/* ── Página contenedora ─────────────────────────────────────── */
.tareas-page { display: flex; flex-direction: column; gap: 16px; }

/* ── Header ─────────────────────────────────────────────────── */
.tareas-header {
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap; padding: 18px 22px;
}
.tareas-hdr-left  { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 200px; }
.tareas-hdr-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tareas-hdr-ico {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, var(--lausant-blue), #1a6fc4);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 22px; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(42,100,176,.25);
}

/* ── Toggle vista tabla/kanban ──────────────────────────────── */
.tarea-view-toggle {
    display: flex; background: var(--bg-main); border-radius: 10px;
    padding: 3px; border: 1px solid var(--card-border); gap: 2px;
}
.tarea-vbtn {
    background: transparent; border: none; cursor: pointer;
    padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 600;
    color: var(--text-muted); display: flex; align-items: center; gap: 5px;
    transition: all .2s ease;
}
.tarea-vbtn:hover { color: var(--text-main); background: var(--hover-bg); }
.tarea-vbtn.activo { background: var(--lausant-blue); color: white; box-shadow: 0 2px 6px rgba(42,100,176,.35); }

/* ── Filtros ────────────────────────────────────────────────── */
.tarea-filtros-grid {
    display: grid; gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.tarea-filtro-input, .tarea-filtro-sel {
    padding: 8px 12px; border-radius: 8px; font-size: 13px;
    border: 1.5px solid var(--card-border); background: var(--bg-main);
    color: var(--text-main); width: 100%; transition: border-color .2s;
}
.tarea-filtro-input:focus, .tarea-filtro-sel:focus { border-color: var(--lausant-blue); outline: none; }

/* ── Tabla de tareas ────────────────────────────────────────── */
@keyframes tarea-row-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tarea-row-in { animation: tarea-row-in .3s ease both; }
.tarea-row { transition: background .15s; }
.tarea-row:hover { background: var(--hover-bg); }

.tarea-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700;
}
.tarea-badge-warn {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px; border-radius: 20px; font-size: 10px; font-weight: 700;
}
.tarea-warn-venc { background: rgba(220,38,38,.1)  !important; color: #dc2626 !important; }
.tarea-warn-hoy  { background: rgba(245,158,11,.1) !important; color: #d97706 !important; }

.tarea-estado-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.tarea-estado-sel {
    border: 1.5px solid var(--card-border); border-radius: 8px;
    padding: 5px 8px; font-size: 12px; font-weight: 600;
    background: var(--bg-main); cursor: pointer;
    transition: border-color .2s, color .2s;
}
.tarea-estado-sel:focus { outline: none; border-color: var(--lausant-blue); }
.tarea-est-pendiente  { color: #9ca3af !important; border-color: rgba(156,163,175,.45) !important; }
.tarea-est-en_proceso { color: #d97706 !important; border-color: rgba(245,158,11,.45) !important; }
.tarea-est-completado { color: #16a34a !important; border-color: rgba(22,163,74,.45)  !important; }

/* Fila título — barra prioridad + layout */
.tarea-empty-state {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 56px 20px; color: var(--text-muted); font-size: 13px;
}
.tarea-empty-state i { font-size: 48px; opacity: .35; display: block; }
.tarea-td-titulo { position: relative; padding-left: 20px !important; }
.tarea-pri-bar   { position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-radius: 2px 0 0 2px; }
.tarea-titulo-wrap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tarea-titulo-txt  { font-weight: 700; font-size: 13px; color: var(--text-main); line-height: 1.3; }
.tarea-desc-preview { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.tarea-sin-asig  { font-size: 11px; color: var(--text-muted); font-style: italic; }
.tarea-acciones  { display: flex; gap: 5px; }

/* Fecha chips / pills */
.tarea-fecha-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.tarea-chip-venc   { background: rgba(220,38,38,.12);  color: #dc2626; }
.tarea-chip-hoy    { background: rgba(245,158,11,.12); color: #d97706; }
.tarea-chip-normal { background: rgba(42,100,176,.1);  color: var(--lausant-blue); }
.tarea-chip-sin    { background: var(--bg-main); color: var(--text-muted); border: 1px solid var(--card-border); }

/* Avatares asignados */
.tarea-avs-row { display: flex; align-items: center; }
.tarea-av {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--lausant-blue); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; border: 2px solid var(--card-bg);
    margin-right: -6px; transition: transform .15s; overflow: hidden; flex-shrink: 0;
}
.tarea-av:hover { transform: scale(1.15); z-index: 1; }
.tarea-av-sm { width: 24px; height: 24px; font-size: 10px; }
.tarea-av-more { background: var(--text-muted); font-size: 10px; }

/* Botones acción tabla */
.tarea-btn-acc {
    width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    transition: all .18s ease;
}
.tarea-btn-edit { background: rgba(42,100,176,.1); color: var(--lausant-blue); }
.tarea-btn-edit:hover { background: var(--lausant-blue); color: white; transform: scale(1.08); }
.tarea-btn-del  { background: rgba(220,38,38,.1); color: #dc2626; }
.tarea-btn-del:hover  { background: #dc2626; color: white; transform: scale(1.08); }

/* ── Vista Kanban ───────────────────────────────────────────── */
.tarea-kanban {
    display: flex; gap: 16px; align-items: flex-start;
    overflow-x: auto; padding-bottom: 8px;
}
.kanban-col {
    flex: 1; min-width: 260px; max-width: 380px;
    background: var(--bg-main); border: 1.5px solid var(--card-border);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.kanban-col-hdr {
    display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px;
    font-weight: 700; font-size: 13px; color: var(--text-main);
    border-bottom: 1.5px solid var(--card-border);
    background: var(--card-bg);
}
.kanban-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kanban-count {
    margin-left: auto; background: var(--card-border);
    color: var(--text-muted); border-radius: 20px;
    padding: 1px 8px; font-size: 11px; font-weight: 700;
}
.kanban-cards { padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 80px; }
.kanban-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 28px 16px; color: var(--text-muted); font-size: 12px;
}
.kanban-empty i { font-size: 28px; opacity: .4; }

@keyframes kanban-card-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.kanban-card {
    background: var(--card-bg); border: 1.5px solid var(--card-border);
    border-radius: 11px; cursor: pointer; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    animation: kanban-card-in .28s ease both;
    display: flex; flex-direction: row;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.kanban-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.kanban-card-in { animation: kanban-card-in .3s ease both; }
.kanban-card-pri-bar { width: 4px; flex-shrink: 0; }
.kanban-card-body { padding: 12px 14px; flex: 1; }
.kanban-card-titulo { font-weight: 700; font-size: 13px; color: var(--text-main); margin-bottom: 4px; line-height: 1.4; }
.kanban-card-desc   { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; }
.kanban-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }

/* Kanban fecha chip */
.tarea-kanban-fecha {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 12px;
    color: var(--text-muted); white-space: nowrap;
}
.tarea-kanban-fecha.tarea-chip-venc { color: #dc2626; background: rgba(220,38,38,.1); }
.tarea-kanban-fecha.tarea-chip-hoy  { color: #d97706; background: rgba(245,158,11,.1); }

/* Skeleton kanban loading */
@keyframes ks-pulse { 0%,100% { opacity: .4; } 50% { opacity: .9; } }
.kanban-skeleton { padding: 12px; }
.ks-l {
    height: 12px; border-radius: 6px; background: var(--card-border);
    margin-bottom: 8px; animation: ks-pulse 1.4s ease infinite;
}
.ks-s { width: 60%; } .ks-m { width: 80%; }

/* ── Modal tarea ────────────────────────────────────────────── */
.tarea-modal-popup { border-radius: 18px !important; }
.tarea-modal-html  { text-align: left !important; padding: 0 4px !important; }
.tarea-form { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.tarea-form-field { display: flex; flex-direction: column; gap: 5px; }
.tarea-form-field label { font-size: 12px; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.tarea-form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tarea-input, .tarea-textarea, .tarea-select {
    padding: 9px 12px; border-radius: 9px; font-size: 13px;
    border: 1.5px solid var(--card-border); background: var(--bg-main);
    color: var(--text-main); width: 100%; transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
}
.tarea-input:focus, .tarea-textarea:focus, .tarea-select:focus {
    border-color: var(--lausant-blue); outline: none;
    box-shadow: 0 0 0 3px rgba(42,100,176,.12);
}
.tarea-textarea { resize: vertical; min-height: 68px; }

/* Multi-select asignados */
.tarea-asig-wrap {
    border: 1.5px solid var(--card-border); border-radius: 10px;
    background: var(--bg-main); position: relative; transition: border-color .2s;
}
.tarea-asig-wrap:focus-within { border-color: var(--lausant-blue); }
.tarea-asig-tags {
    display: flex; flex-wrap: wrap; gap: 5px;
    padding: 6px 10px 0; min-height: 0;
}
.tarea-asig-tags:empty { padding: 0; }
.tarea-tag {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(42,100,176,.12); color: var(--lausant-blue);
    border-radius: 20px; padding: 3px 8px 3px 4px;
    font-size: 12px; font-weight: 600;
    animation: tarea-row-in .2s ease;
}
.tarea-tag-ini {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--lausant-blue); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; overflow: hidden; flex-shrink: 0;
}
.tarea-tag-x {
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--lausant-blue); opacity: .7; display: flex; align-items: center;
    font-size: 10px; transition: opacity .15s;
}
.tarea-tag-x:hover { opacity: 1; }
.tarea-asig-input-row {
    position: relative; display: flex; align-items: center;
    padding: 4px 10px; border-top: 1px solid transparent;
}
.tarea-asig-tags:not(:empty) ~ .tarea-asig-input-row { border-top-color: var(--card-border); }
.tarea-asig-ico { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; font-size: 15px; }
.tarea-asig-search {
    flex: 1; border: none; background: transparent;
    padding: 7px 8px 7px 26px; font-size: 13px; color: var(--text-main);
    outline: none;
}
.tarea-asig-dropdown {
    border-top: 1.5px solid var(--card-border); max-height: 200px; overflow-y: auto;
    border-radius: 0 0 9px 9px;
}
.tarea-asig-list { padding: 4px; }
.tarea-asig-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 8px; cursor: pointer;
    transition: background .15s; position: relative;
}
.tarea-asig-item:hover { background: var(--hover-bg); }
.tarea-asig-item.sel { background: rgba(42,100,176,.08); }
.tarea-emp-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.tarea-emp-av-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tarea-emp-ini {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--lausant-blue); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.tarea-emp-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tarea-emp-nom  { font-size: 13px; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarea-emp-put  { font-size: 11px; color: var(--text-muted); }
.tarea-emp-chk  { font-size: 15px; color: var(--lausant-blue); opacity: 0; transition: opacity .15s; margin-left: auto; flex-shrink: 0; }
.tarea-asig-item.sel .tarea-emp-chk { opacity: 1; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .tarea-filtros-grid { grid-template-columns: 1fr 1fr; }
    .tarea-kanban { flex-direction: column; }
    .kanban-col   { max-width: 100%; min-width: unset; }
    .tarea-form-grid2 { grid-template-columns: 1fr; }
    .tareas-hdr-right { width: 100%; justify-content: flex-end; }
}
@media (max-width: 640px) {
    /* Tabla → vista de tarjetas en móvil */
    #tarea-vista-tabla { overflow-x: visible !important; }
    #tabla-tareas thead { display: none; }
    #tabla-tareas, #tabla-tareas tbody { display: block; }
    #tabla-tareas tbody tr.tarea-row {
        display: block; position: relative;
        background: var(--card-bg); border: 1.5px solid var(--card-border);
        border-radius: 14px; margin-bottom: 10px;
        overflow: hidden; padding: 0;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }
    #tabla-tareas tbody td { display: block; border: none; padding: 4px 14px; }
    .tarea-td-titulo { padding: 12px 14px 6px 14px !important; }
    .tarea-td-avs    { padding: 4px 14px !important; }
    .tarea-td-fecha  { padding: 2px 14px 6px !important; }
    .tarea-td-pri    { display: none !important; }
    .tarea-td-est    { padding: 4px 14px !important; }
    .tarea-td-acc    { padding: 4px 14px 12px !important; }
    /* Barra de prioridad horizontal en la parte superior */
    .tarea-pri-bar { height: 4px; width: 100%; top: 0; left: 0; border-radius: 12px 12px 0 0; }
}
@media (max-width: 560px) {
    .tarea-filtros-grid { grid-template-columns: 1fr; }
    .tareas-header { gap: 12px; }
    .tarea-view-toggle .tarea-vbtn { padding: 5px 9px; font-size: 11px; }
}

/* ── Dark mode overrides ────────────────────────────────────── */
body.modo-oscuro .kanban-col      { background: var(--card-bg); }
body.modo-oscuro .tarea-asig-wrap { background: var(--card-bg); }
body.modo-oscuro .tarea-input,
body.modo-oscuro .tarea-textarea,
body.modo-oscuro .tarea-select    { background: var(--card-bg); }
body.modo-oscuro .tarea-asig-search { color: var(--text-main); }
body.modo-oscuro .tarea-filtro-input,
body.modo-oscuro .tarea-filtro-sel   { background: var(--card-bg); }
body.modo-oscuro .tarea-chip-sin  { background: var(--bg-main); border-color: var(--card-border); }

/* Selector de empleado en filtros de tareas */
#tarea-filtros-sec { position: relative; z-index: 20; }
.tarea-filtros-grid { overflow: visible; }
.tarea-f-emp-wrap .emp-sel-trigger  { background: var(--bg-main); min-height: 38px; }
.tarea-f-emp-wrap .emp-sel-dropdown { z-index: 9999; }
body.modo-oscuro .tarea-f-emp-wrap .emp-sel-trigger  { background: var(--card-bg); }
body.modo-oscuro .tarea-f-emp-wrap .emp-sel-dropdown { background: var(--card-bg); }
body.modo-oscuro .tarea-estado-sel { background: var(--card-bg); color: inherit; }
body.modo-oscuro .tarea-est-pendiente  { color: #9ca3af !important; }
body.modo-oscuro .tarea-est-en_proceso { color: #f59e0b !important; }
body.modo-oscuro .tarea-est-completado { color: #4ade80 !important; }

/* ════════════════════════════════════════════════
   MÓDULO QUIRÓFANOS — el diseño vive ahora en la sección 46 de
   dashboard-premium.css. Aquí quedaba el anterior, que peleaba
   con él por especificidad y por !important.
   ════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   COEM DESIGN SYSTEM v2 — Visual Enhancement Layer
   Mejoras de diseño, animaciones y UX profesional
   ══════════════════════════════════════════════════════════════════ */

/* ─── 1. Enhanced Design Tokens ────────────────────────────────── */
:root {
    --sh-1: 0 1px 3px rgba(10,40,80,.06), 0 1px 2px rgba(10,40,80,.04);
    --sh-2: 0 2px 8px rgba(10,40,80,.09), 0 1px 3px rgba(10,40,80,.05);
    --sh-3: 0 4px 16px rgba(10,40,80,.11), 0 2px 6px rgba(10,40,80,.07);
    --sh-4: 0 8px 30px rgba(10,40,80,.14), 0 3px 10px rgba(10,40,80,.09);
    --sh-5: 0 18px 52px rgba(10,40,80,.18), 0 6px 18px rgba(10,40,80,.11);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-pop:    cubic-bezier(0.175, 0.885, 0.32, 1.2);
    --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
    --dur-fast:   130ms;
    --dur-normal: 220ms;
    --dur-slow:   360ms;
    --sidebar-gradient: linear-gradient(175deg, #020d1e 0%, #061d40 35%, #0a3070 70%, #0d3d8a 100%);
}
[data-theme="dark"], body.modo-oscuro {
    --sh-1: 0 1px 3px rgba(0,0,0,.3);
    --sh-2: 0 2px 8px rgba(0,0,0,.35);
    --sh-3: 0 4px 16px rgba(0,0,0,.4);
    --sh-4: 0 8px 30px rgba(0,0,0,.5);
    --sh-5: 0 18px 52px rgba(0,0,0,.6);
}

/* ─── 2. Global Refinements ─────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

::selection { background: rgba(10,71,150,.2); color: var(--text-main); }

/* Scrollbar premium */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: rgba(10,71,150,.22); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(10,71,150,.38); }
[data-theme="dark"] ::-webkit-scrollbar-thumb,
body.modo-oscuro ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

/* Transición global más pulida (no afecta transform para no interferir con animaciones) */
*, *::before, *::after {
    transition-property: background-color, border-color, color, box-shadow, opacity;
    transition-duration: var(--dur-normal);
    transition-timing-function: var(--ease-smooth);
}
/* Los elementos que se mueven no deben heredar la transición de fondo */
.btn, button, a, .nav-item, .card, .qx-card, .kanban-card, .tarea-asig-item {
    transition: background-color var(--dur-normal) var(--ease-smooth),
                border-color    var(--dur-normal) var(--ease-smooth),
                color           var(--dur-normal) var(--ease-smooth),
                box-shadow      var(--dur-normal) var(--ease-smooth),
                opacity         var(--dur-normal) var(--ease-smooth),
                transform       var(--dur-fast)   var(--ease-out),
                filter          var(--dur-fast)   var(--ease-out);
}

/* ─── 3. Keyframes ────────────────────────────────────────────────── */
@keyframes v2-fadeUp   { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes v2-fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes v2-scaleIn  { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:none; } }
@keyframes v2-slideRight { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:none; } }
@keyframes v2-shimmer  {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
@keyframes v2-pulse-ring {
    0%   { box-shadow: 0 0 0 0   rgba(10,71,150,.3); }
    70%  { box-shadow: 0 0 0 8px rgba(10,71,150,0); }
    100% { box-shadow: 0 0 0 0   rgba(10,71,150,0); }
}
@keyframes v2-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}

/* Utilidades de animación */
.v2-fade-up    { animation: v2-fadeUp   .4s var(--ease-smooth) both; }
.v2-fade-in    { animation: v2-fadeIn   .3s var(--ease-smooth) both; }
.v2-scale-in   { animation: v2-scaleIn  .3s var(--ease-pop)    both; }
.v2-stagger > * { opacity:0; animation: v2-fadeUp .35s var(--ease-smooth) both; }
.v2-stagger > *:nth-child(1)  { animation-delay: .05s; }
.v2-stagger > *:nth-child(2)  { animation-delay: .10s; }
.v2-stagger > *:nth-child(3)  { animation-delay: .15s; }
.v2-stagger > *:nth-child(4)  { animation-delay: .20s; }
.v2-stagger > *:nth-child(5)  { animation-delay: .25s; }
.v2-stagger > *:nth-child(n+6){ animation-delay: .30s; }

/* ─── 4. Sidebar v2 ───────────────────────────────────────────────── */
.sidebar {
    background: var(--sidebar-gradient) !important;
    border-right: 1px solid rgba(255,255,255,.04);
}
@media (min-width: 960px) {
    .sidebar { box-shadow: 4px 0 32px rgba(0,0,0,.18) !important; }
}

/* Nav items con forma de pill */
.sidebar a.nav-item {
    margin: 1px 8px;
    border-radius: 10px;
    border-left: none !important;
    padding: 11px 16px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.65) !important;
    position: relative;
    overflow: hidden;
}
.sidebar a.nav-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: rgba(255,255,255,0);
    transition: background var(--dur-normal) var(--ease-smooth);
}
.sidebar a.nav-item:hover {
    color: rgba(255,255,255,.92) !important;
    padding-left: 20px !important;
    background: rgba(255,255,255,.07) !important;
}
.sidebar a.nav-item.activo {
    background: rgba(255,255,255,.15) !important;
    color: white !important;
    border-left: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.sidebar a.nav-item.activo::after {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: var(--lausant-accent);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 10px rgba(77,166,255,.6);
}
.sidebar a.nav-item i { font-size: 18px !important; opacity: .8; transition: opacity var(--dur-fast), transform var(--dur-fast); }
.sidebar a.nav-item:hover i   { opacity: 1; transform: scale(1.08); }
.sidebar a.nav-item.activo i  { opacity: 1; }

/* Sub-items indent */
.nav-group-items .nav-item { margin: 1px 8px 1px 22px !important; }
.nav-subitem { margin-left: 30px !important; }

/* Nav group toggles */
.nav-group-toggle {
    margin: 1px 8px;
    border-radius: 8px;
    padding: 10px 14px !important;
    font-size: 10.5px !important;
    letter-spacing: 1px !important;
    color: rgba(255,255,255,.42) !important;
}
.nav-group-toggle:hover { background: rgba(255,255,255,.04) !important; color: rgba(255,255,255,.72) !important; }
.nav-group-toggle.abierto { color: rgba(255,255,255,.78) !important; background: rgba(255,255,255,.06) !important; }

/* Section labels */
.nav-section-label {
    font-size: 9.5px !important;
    letter-spacing: 1.2px !important;
    padding: 18px 18px 5px 18px !important;
    color: rgba(255,255,255,.3) !important;
}

/* Logo container */
.sidebar-logo-container {
    background: rgba(0,0,0,.22) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

/* ─── 5. Topbar v2 ───────────────────────────────────────────────── */
.topbar {
    border-radius: 16px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--sh-2) !important;
    padding: 10px 20px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme="dark"] .topbar,
body.modo-oscuro .topbar {
    background: rgba(26,37,53,.85) !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.35) !important;
}

/* Avatar mejorado */
.avatar {
    background: linear-gradient(135deg, var(--lausant-blue), #1565c0) !important;
    box-shadow: 0 3px 12px rgba(10,71,150,.35) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border: 2px solid rgba(255,255,255,.2);
    transition: transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast);
}
.avatar:hover { transform: scale(1.06); box-shadow: 0 4px 18px rgba(10,71,150,.45) !important; }

/* ─── 6. Cards v2 ────────────────────────────────────────────────── */
.card {
    box-shadow: var(--sh-2) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    transition: box-shadow var(--dur-normal) var(--ease-smooth),
                transform   var(--dur-fast)   var(--ease-out) !important;
}
@media (min-width: 960px) {
    .card:hover {
        box-shadow: var(--sh-4) !important;
        transform: translateY(-2px) !important;
    }
}
[data-theme="dark"] .card,
body.modo-oscuro .card {
    background: var(--card-bg) !important;
    border-color: rgba(255,255,255,.06) !important;
}
.card h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -.2px;
}

/* Stat cards mejoradas */
.stat-card, .card-info {
    border-radius: 14px !important;
    box-shadow: var(--sh-2) !important;
    border: 1px solid var(--border-color) !important;
    transition: box-shadow var(--dur-normal), transform var(--dur-fast) var(--ease-out) !important;
}
.stat-card:hover, .card-info:hover {
    box-shadow: var(--sh-4) !important;
    transform: translateY(-3px) !important;
}
.stat-card p { font-variant-numeric: tabular-nums; }

/* ─── 7. Tables v2 ───────────────────────────────────────────────── */
.table-wrapper {
    border-radius: 14px !important;
    box-shadow: var(--sh-2) !important;
    border: 1px solid var(--border-color);
    overflow: hidden;
}
table {
    border-collapse: collapse !important;
    font-size: 13.5px;
    box-shadow: none !important;
    border-radius: 0 !important;
}
thead tr { position: relative; }
th {
    background: #0a3570 !important;
    padding: 13px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .7px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.9) !important;
    white-space: nowrap;
    border: none !important;
}
th:first-child { border-radius: 0 !important; }
th:last-child  { border-radius: 0 !important; }
[data-theme="dark"] th,
body.modo-oscuro th {
    background: rgba(10,55,120,.7) !important;
    color: rgba(255,255,255,.85) !important;
}

/* Zebra stripe sutil */
tbody tr:nth-child(even) td { background: rgba(10,40,80,.022); }
[data-theme="dark"] tbody tr:nth-child(even) td,
body.modo-oscuro tbody tr:nth-child(even) td { background: rgba(255,255,255,.025); }

td {
    padding: 12px 14px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-main);
    vertical-align: middle;
}
tr:last-child td { border-bottom: none !important; }

/* Hover en filas — efecto deslizamiento sutil */
tbody tr { transition: background var(--dur-fast) var(--ease-smooth); }
tbody tr:hover td {
    background: rgba(10,71,150,.055) !important;
    color: var(--text-main);
}
[data-theme="dark"] tbody tr:hover td,
body.modo-oscuro tbody tr:hover td { background: rgba(77,166,255,.07) !important; }

/* ─── 8. Buttons v2 ──────────────────────────────────────────────── */
.btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 10px 18px !important;
    position: relative;
    overflow: hidden;
    letter-spacing: .1px;
}
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,0);
    transition: background var(--dur-fast);
}
.btn:hover::after  { background: rgba(255,255,255,.1); }
.btn:active        { transform: scale(.96) !important; }
.btn:active::after { background: rgba(0,0,0,.08); }

.btn-login {
    background: linear-gradient(135deg, #061d40 0%, #0a4796 50%, #1565c0 100%) !important;
    box-shadow: 0 4px 18px rgba(10,71,150,.3) !important;
    font-size: 15px !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    letter-spacing: .3px;
}
.btn-login:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(10,71,150,.4) !important;
    filter: brightness(1.07) !important;
}

/* Variantes */
.btn-aprobar  { background: linear-gradient(135deg,#16a34a,#15803d) !important; box-shadow: 0 3px 12px rgba(22,163,74,.25) !important; }
.btn-rechazar { background: linear-gradient(135deg,#ef4444,#dc2626) !important; box-shadow: 0 3px 12px rgba(239,68,68,.25) !important; }
.btn-cerrar   { background: var(--card-bg) !important; color: var(--text-muted) !important; border: 1px solid var(--border-color) !important; }
.btn-cerrar:hover { background: var(--border-color) !important; color: var(--text-main) !important; }
.btn-peligro  { background: linear-gradient(135deg,#ef4444,#dc2626) !important; box-shadow: 0 3px 12px rgba(239,68,68,.25) !important; }

/* ─── 9. Form Elements v2 ────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
    border-radius: 10px !important;
    border: 1.5px solid var(--border-color) !important;
    font-size: 13.5px !important;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-normal) !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--lausant-blue) !important;
    box-shadow: 0 0 0 3.5px rgba(10,71,150,.13) !important;
    outline: none !important;
}
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
body.modo-oscuro input:not([type="checkbox"]):not([type="radio"]),
body.modo-oscuro select,
body.modo-oscuro textarea {
    background: rgba(15,25,40,.8) !important;
    border-color: rgba(255,255,255,.1) !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
body.modo-oscuro input:focus,
body.modo-oscuro select:focus {
    border-color: var(--lausant-accent) !important;
    box-shadow: 0 0 0 3.5px rgba(77,166,255,.15) !important;
}

/* Inputs de modales clínicos — override final para ambos modos */
.modal-contenido input:focus,
.modal-contenido select:focus,
.modal-contenido textarea:focus {
    border-color: #0a4796 !important;
    border-width: 2px !important;
    box-shadow: none !important;
    outline: none !important;
}
[data-theme="dark"] .modal-contenido input:focus,
[data-theme="dark"] .modal-contenido select:focus,
[data-theme="dark"] .modal-contenido textarea:focus,
body.modo-oscuro .modal-contenido input:focus,
body.modo-oscuro .modal-contenido select:focus,
body.modo-oscuro .modal-contenido textarea:focus {
    border-color: #4da6ff !important;
    border-width: 2px !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Filtros */
.filtros-container {
    border-radius: 14px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--card-bg) !important;
    padding: 16px !important;
    box-shadow: var(--sh-1) !important;
}
[data-theme="dark"] .filtros-container,
body.modo-oscuro .filtros-container { background: var(--card-bg) !important; }

/* ─── 10. Badges v2 ──────────────────────────────────────────────── */
.badge {
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .4px !important;
    border: none !important;
}
.badge.pendiente { background: rgba(234,179,8,.15);  color: #854d0e; }
.badge.aprobada  { background: rgba(34,197,94,.15);  color: #15803d; }
.badge.rechazada { background: rgba(239,68,68,.15);  color: #b91c1c; }
[data-theme="dark"] .badge.pendiente,
body.modo-oscuro  .badge.pendiente { background: rgba(234,179,8,.1);  color: #fbbf24; }
[data-theme="dark"] .badge.aprobada,
body.modo-oscuro  .badge.aprobada  { background: rgba(34,197,94,.1);  color: #4ade80; }
[data-theme="dark"] .badge.rechazada,
body.modo-oscuro  .badge.rechazada { background: rgba(239,68,68,.1);  color: #f87171; }

/* ─── 11. Notifications panel v2 ─────────────────────────────────── */
#panel-notificaciones {
    border-radius: 16px !important;
    box-shadow: var(--sh-5) !important;
    border: 1px solid var(--border-color) !important;
    overflow: hidden;
}
.notif-item { transition: background var(--dur-fast) !important; }
.notif-item:hover { background: rgba(10,71,150,.055) !important; }
[data-theme="dark"] .notif-item:hover,
body.modo-oscuro .notif-item:hover { background: rgba(77,166,255,.07) !important; }

/* ─── 12. Login page — escritorio premium ────────────────────────── */

/* ── Shake animation (credenciales incorrectas) ── */
@keyframes login-shake {
    0%,100% { transform: translateX(0); }
    15%     { transform: translateX(-8px); }
    30%     { transform: translateX(7px); }
    45%     { transform: translateX(-5px); }
    60%     { transform: translateX(5px); }
    75%     { transform: translateX(-3px); }
    90%     { transform: translateX(3px); }
}
.login-shake { animation: login-shake 0.45s cubic-bezier(.36,.07,.19,.97) both; }

/* ── Spinner dentro del botón de login ── */
.login-spinner {
    width: 16px; height: 16px;
    border: 2.5px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* ── Mensaje de error ── */
.login-error-msg {
    color: #e74c3c;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    min-height: 18px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Caps Lock warning ── */
.caps-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #d97706;
    background: rgba(217,119,6,0.1);
    border: 1px solid rgba(217,119,6,0.25);
    border-radius: 7px;
    padding: 6px 10px;
}
.caps-warning i { font-size: 14px; flex-shrink: 0; }

/* ── Olvidé mi contraseña ── */
.login-forgot {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-muted);
}
.login-forgot i { font-size: 13px; flex-shrink: 0; }
.login-forgot-btn {
    background: none;
    border: none;
    color: var(--lausant-blue);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}
.login-forgot-btn:hover { color: var(--lausant-accent); }
.login-forgot-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 10px 12px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.35s ease, padding 0.3s ease;
    pointer-events: none;
}
.login-forgot-info.visible {
    opacity: 1;
    max-height: 60px;
    pointer-events: auto;
}
.login-forgot-info i { font-size: 15px; color: var(--lausant-blue); flex-shrink: 0; margin-top: 1px; }

/* ── Transición de salida al hacer login exitoso ── */
@keyframes login-exit-card {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(16px) scale(0.98); }
}
@keyframes login-exit-wrapper {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.97); }
}
.login-exit         { animation: login-exit-card    0.45s ease forwards; }
.login-exit-wrapper { animation: login-exit-wrapper 0.45s ease forwards; }

/* Elementos solo-móvil: ocultos en escritorio */
.login-mobile-hero     { display: none; }
.login-card-pull       { display: none; }
.login-card-welcome    { display: none; }
.login-card-footer-mob { display: none; }
.login-card-subtitle   { display: block; margin-bottom: 32px; color: var(--text-muted); font-weight: 500; font-size: 13.5px; letter-spacing: 0.2px; }

/* ─────────────────────────────────────────────────────────────────
   12. LOGIN ESCRITORIO — panel dividido premium
   ───────────────────────────────────────────────────────────────── */

/* Fondo general */
.login-body {
    background: linear-gradient(145deg, #010b1f 0%, #051530 25%, #082050 55%, #0d3580 80%, #1050a0 100%);
}
.login-body::before {
    background-image:
        radial-gradient(ellipse 900px 700px at 50% 50%, rgba(77,166,255,0.07), transparent 65%),
        radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 100% 100%, 30px 30px;
}

/* Blobs animados */
.login-deco-1, .login-deco-2, .login-deco-3 {
    animation: v2-float 7s ease-in-out infinite;
}
.login-deco-2 { animation-delay: -2.5s; animation-duration: 9s; }
.login-deco-3 { animation-delay: -4.5s; animation-duration: 11s; }

/* Elementos solo-móvil: ocultos en escritorio */
.login-mobile-hero     { display: none; }
.login-card-pull       { display: none; }
.login-card-welcome    { display: none; }
.login-card-footer-mob { display: none; }
.login-card-subtitle   { display: none; }

/* Footer global: oculto en escritorio (el disclaimer ya está en el panel izquierdo) */
.login-footer          { display: none; }

/* ── Wrapper split ── */
.login-split-wrapper {
    display: flex;
    width: min(940px, 96vw);
    min-height: min(600px, 92vh);
    border-radius: 28px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 30px 70px rgba(0,0,0,0.55),
        0 60px 130px rgba(0,0,0,0.35),
        0 0 150px rgba(10,50,150,0.4);
    position: relative;
    z-index: 10;
}

/* ── Panel izquierdo: bienvenida ── */
.login-panel-left {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, #051228 0%, #0a3070 45%, #1255b8 80%, #1a6bd4 100%);
    padding: 52px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Blobs internos del panel izquierdo */
.lpl-blob-1 {
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(77,166,255,0.22) 0%, transparent 65%);
    bottom: -160px; right: -120px;
    pointer-events: none;
}
.lpl-blob-2 {
    position: absolute;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100,180,255,0.16) 0%, transparent 65%);
    top: -90px; left: -70px;
    pointer-events: none;
}
.lpl-blob-3 {
    position: absolute;
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.07);
    top: 38%; right: 10%;
    pointer-events: none;
}

/* Contenido del panel izquierdo */
.lpl-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    text-align: center;
}
.lpl-logo {
    width: 150px;
    height: auto;
    margin-bottom: 32px;
    opacity: 0.95;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.lpl-heading {
    margin-bottom: 16px;
}
.lpl-pre {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 6px;
}
.lpl-titulo {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.5px;
}
.lpl-accent {
    color: #7dc8ff;
}
.lpl-sub {
    font-size: 13.5px;
    color: rgba(255,255,255,0.65);
    line-height: 1.65;
    margin: 0 0 24px;
    max-width: 320px;
}
.lpl-sub strong { color: rgba(255,255,255,0.85); font-weight: 600; }
.lpl-sep {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, #7dc8ff, rgba(255,255,255,0.2));
    border-radius: 2px;
    margin-bottom: 24px;
}
.lpl-features {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    width: 100%;
}
.lpl-features li {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 13.5px;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
}
.lpl-feat-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #7dc8ff;
    flex-shrink: 0;
}
.lpl-disclaimer {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.lpl-disclaimer i { font-size: 12px; }

/* ── Dark mode — panel izquierdo se oscurece más ── */
[data-theme="dark"] .login-panel-left {
    background: linear-gradient(155deg, #020810 0%, #061528 45%, #0a2a60 80%, #0d3878 100%);
}

/* ── Panel derecho: formulario ── */
.login-card {
    width: 400px;
    flex-shrink: 0;
    background: #ffffff !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 52px 44px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden !important;
}
[data-theme="dark"] .login-card {
    background: #0c1525 !important;
}

/* Logo en panel derecho */
.login-logo-container {
    display: none !important;
}

/* Encabezado del formulario */
.login-form-header {
    display: block;
    margin-bottom: 28px;
}
.login-form-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--lausant-dark);
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}
[data-theme="dark"] .login-form-title { color: #e8f0ff; }
.login-form-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    font-weight: 400;
}

/* Labels */
.login-card .input-group label {
    font-size: 11px !important;
    letter-spacing: 0.9px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    margin-bottom: 8px !important;
}

/* Inputs */
.login-card .input-group input {
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    background: #f6f9ff !important;
    border: 1.5px solid rgba(10,71,150,0.12) !important;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
}
.login-card .input-group input:focus {
    border-color: #0a4796 !important;
    box-shadow: 0 0 0 4px rgba(10,71,150,0.09) !important;
    background: #fff !important;
}
[data-theme="dark"] .login-card .input-group input {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(77,166,255,0.15) !important;
    color: #e8f0ff !important;
}
[data-theme="dark"] .login-card .input-group input:focus {
    border-color: #4da6ff !important;
    box-shadow: 0 0 0 4px rgba(77,166,255,0.1) !important;
    background: rgba(255,255,255,0.07) !important;
}

/* Botón */
.btn-login {
    background: linear-gradient(135deg, #0d4fad 0%, #0a4796 50%, #0c3d80 100%) !important;
    box-shadow: 0 6px 20px rgba(10,71,150,0.40), 0 2px 6px rgba(0,0,0,0.15) !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    padding: 15px 24px !important;
    margin-top: 6px !important;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s !important;
}
.btn-login:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(10,71,150,0.52), 0 4px 12px rgba(0,0,0,0.2) !important;
    filter: brightness(1.07) !important;
}

/* ─── 12b. Login — rediseño móvil (bottom-sheet) ─────────────────── */
@media (max-width: 600px) {

    /* El wrapper se comporta como contenedor transparente en móvil */
    .login-split-wrapper {
        width: 100% !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
        display: block !important;
    }

    /* El panel izquierdo se oculta completamente en móvil */
    .login-panel-left { display: none !important; }

    /* El encabezado del form también se oculta en móvil */
    .login-form-header { display: none !important; }

    /* Layout: columna, card al fondo */
    .login-body {
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
        padding: 0 !important;
        min-height: 100dvh !important;
    }

    /* Ocultar decorativos que interfieren en móvil */
    .login-deco-1, .login-deco-2, .login-deco-3 { display: none !important; }

    /* ── Hero superior con logo — unificado PWA ── */
    .login-mobile-hero {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
        min-height: 0;
        padding: 40px 24px 28px;
        gap: 14px;
        position: relative;
        z-index: 5;
    }
    /* Ola separadora entre hero y card */
    .login-mobile-hero::after {
        content: '';
        position: absolute;
        bottom: -1px; left: 0; right: 0;
        height: 36px;
        background: var(--card-bg);
        border-radius: 28px 28px 0 0;
        z-index: 1;
    }
    .login-mobile-logo {
        width: 140px;
        height: auto;
        filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4));
        animation: v2-fadeUp 0.55s ease both;
    }
    .login-mobile-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: rgba(255,255,255,0.13);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 20px;
        padding: 6px 14px;
        color: rgba(255,255,255,0.9);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.2px;
        backdrop-filter: blur(8px);
        animation: v2-fadeUp 0.6s 0.08s ease both;
        position: relative;
        z-index: 2;
    }
    .login-mobile-hero-badge i { font-size: 13px; }

    /* ── Card como bottom-sheet ── */
    .login-card {
        border-radius: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 24px 24px 32px !important;
        box-shadow: none !important;
        animation: slideUp 0.42s cubic-bezier(0.22,1,0.36,1) both !important;
        position: relative;
        z-index: 10;
    }
    .login-card::before { display: none !important; }

    /* Pull indicator */
    .login-card-pull {
        display: block !important;
        width: 36px; height: 4px;
        background: var(--border-color);
        border-radius: 2px;
        margin: 0 auto 18px;
    }

    /* Logo dentro de la card: oculto en móvil (está en el hero) */
    .login-logo-container { display: none !important; }
    .login-form-header    { display: none !important; }

    /* Subtítulo de escritorio: oculto en móvil */
    .login-card-subtitle { display: none !important; }

    /* Saludo de bienvenida */
    .login-card-welcome {
        display: flex !important;
        align-items: center;
        gap: 9px;
        margin-bottom: 20px;
        color: var(--lausant-blue);
        font-size: 17px;
        font-weight: 700;
    }
    .login-card-welcome i { font-size: 20px; }
    [data-theme="dark"] .login-card-welcome { color: var(--lausant-accent); }

    /* Capslock y forgot: ajuste tamaño táctil */
    .login-forgot { font-size: 13px; margin-top: 16px; }
    .login-forgot-btn { font-size: 13px; }

    /* font-size >= 16px evita el auto-zoom de iOS Safari al enfocar */
    .login-card .input-group input {
        padding: 15px 16px !important;
        font-size: 16px !important;
    }

    /* Botón de login */
    .login-card .btn-login {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-size: 15px !important;
        padding: 16px !important;
    }

    /* Footer dentro de la card en móvil */
    .login-card-footer-mob {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 20px;
        color: var(--text-muted);
        font-size: 11px;
        text-align: center;
    }
    .login-card-footer-mob i { font-size: 13px; }

    /* Footer externo: oculto en móvil */
    .login-footer { display: none !important; }
}

/* ─── 12b. Resumen Clínico premium ───────────────────────────────── */

/* Header */
.res-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}
.res-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.res-header-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(10,71,150,0.12), rgba(10,71,150,0.04));
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    color: var(--lausant-blue);
    flex-shrink: 0;
    border: 1px solid rgba(10,71,150,0.12);
}
.res-header-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-main);
}
.res-header-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}
.res-refresh-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--bg-color);
    border: 1.5px solid var(--border-color);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.res-refresh-btn:hover {
    border-color: var(--lausant-blue);
    color: var(--lausant-blue);
    transform: rotate(180deg);
}

/* Filtros */
.res-filtros {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.res-quick-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.res-qf {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
}
.res-qf i { font-size: 13px; }
.res-qf:hover { border-color: var(--lausant-blue); color: var(--lausant-blue); }
.res-qf.activo {
    background: var(--lausant-blue);
    color: white;
    border-color: var(--lausant-blue);
    box-shadow: 0 3px 10px rgba(10,71,150,0.3);
}
.res-search-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}
.res-filter-field {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 6px 12px;
    transition: border-color 0.2s;
}
.res-filter-field:focus-within { border-color: var(--lausant-blue); }
.res-filter-field i { color: var(--text-muted); font-size: 14px; flex-shrink: 0; }
.res-filter-field input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 12px !important;
    color: var(--text-main) !important;
    font-family: 'Poppins', sans-serif;
    padding: 0 !important;
    width: 100px;
    min-width: 0;
}
.res-filter-field-wide input { width: 150px; }
.res-filter-field input::placeholder { color: var(--text-muted); }

/* KPI Cards */
.res-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.res-kpi {
    position: relative;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    transition: transform 0.22s, box-shadow 0.22s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.res-kpi:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.1); }

.res-kpi-cx   { border-top: 3.5px solid #8e44ad; }
.res-kpi-cons { border-top: 3.5px solid #3498db; }
.res-kpi-inf  { border-top: 3.5px solid #e74c3c; }

.res-kpi-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.res-kpi-cx   .res-kpi-icon-wrap { background: rgba(142,68,173,0.10); color: #8e44ad; }
.res-kpi-cons .res-kpi-icon-wrap { background: rgba(52,152,219,0.10); color: #3498db; }
.res-kpi-inf  .res-kpi-icon-wrap { background: rgba(231,76,60,0.10);  color: #e74c3c; }

.res-kpi-body { flex: 1; min-width: 0; }
.res-kpi-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.res-kpi-num {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px;
    transition: color 0.2s;
}
.res-kpi-cx   .res-kpi-num { color: #8e44ad; }
.res-kpi-cons .res-kpi-num { color: #3498db; }
.res-kpi-inf  .res-kpi-num { color: #e74c3c; }
.res-kpi-num.res-kpi-loading { color: var(--text-muted) !important; opacity: 0.4; }

.res-kpi-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Círculo decorativo en esquina */
.res-kpi-deco {
    position: absolute;
    width: 90px; height: 90px;
    border-radius: 50%;
    right: -20px; bottom: -20px;
    pointer-events: none;
    opacity: 0.07;
}
.res-kpi-cx   .res-kpi-deco { background: #8e44ad; }
.res-kpi-cons .res-kpi-deco { background: #3498db; }
.res-kpi-inf  .res-kpi-deco { background: #e74c3c; }

@keyframes res-pop {
    0%   { transform: scale(0.7); opacity: 0.4; }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1);   opacity: 1;   }
}

/* Paneles de desglose */
.res-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.res-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.res-panel-hdr {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color);
}
.res-panel-hdr i { font-size: 15px; color: var(--lausant-blue); }
.res-panel-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }

/* Barras horizontales */
.res-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    animation: v2-fadeUp 0.3s ease both;
}
.res-bar-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
    width: 100px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.res-bar-track {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: var(--border-color);
    overflow: hidden;
    min-width: 0;
}
.res-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.7s cubic-bezier(0.22,1,0.36,1);
    opacity: 0.85;
}
.res-bar-count {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-main);
    width: 22px;
    text-align: right;
    flex-shrink: 0;
}
.res-empty-panel {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    padding: 20px 0;
    font-size: 12px;
    color: var(--text-muted);
}
.res-empty-panel i { font-size: 18px; }

/* Responsive móvil */
@media (max-width: 768px) {
    .res-kpi-grid  { grid-template-columns: 1fr; gap: 10px; }
    .res-panels    { grid-template-columns: 1fr; gap: 10px; }
    .res-filtros   { flex-direction: column; align-items: stretch; }
    .res-search-filters { justify-content: stretch; }
    .res-filter-field { flex: 1; }
    .res-filter-field input { width: 100%; }
    .res-filter-field-wide input { width: 100%; }
    .res-kpi       { padding: 16px; }
    .res-kpi-num   { font-size: 28px; }
    .res-bar-label { width: 80px; }
    .res-header-title { font-size: 16px; }
}
@media (max-width: 480px) {
    .res-quick-filters { width: 100%; }
    .res-qf { flex: 1; justify-content: center; padding: 7px 8px; font-size: 11px; }
}

/* Dark mode */
[data-theme="dark"] .res-header-icon,
body.modo-oscuro .res-header-icon {
    background: rgba(77,166,255,0.1);
    border-color: rgba(77,166,255,0.15);
    color: var(--lausant-accent);
}
[data-theme="dark"] .res-refresh-btn,
body.modo-oscuro .res-refresh-btn { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .res-kpi,
body.modo-oscuro .res-kpi { box-shadow: 0 2px 16px rgba(0,0,0,0.25); }

/* ─── 12c. Tema switch premium ───────────────────────────────────── */
.tema-switch {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.tema-switch-track {
    position: relative;
    width: 56px;
    height: 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1a2744, #243560);
    border: 1.5px solid rgba(77,166,255,0.25);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
    /* Fuerza GPU compositing en iOS Safari para que overflow:hidden + border-radius funcione */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: background;
}

/* Track en modo claro */
.tema-switch.tema-dark .tema-switch-track {
    background: linear-gradient(135deg, #f6c94e, #f0a830);
    border-color: rgba(240,168,48,0.5);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.15), 0 0 16px rgba(246,201,78,0.25);
}

/* Ícono sol */
.tema-switch-sun {
    position: absolute;
    left: 7px;
    top: 50%;
    font-size: 16px;
    color: #f6c94e;
    opacity: 0;
    transform: translateY(-50%) scale(0.3) rotate(-120deg);
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
    line-height: 1;
    display: flex;
    align-items: center;
}
.tema-switch.tema-dark .tema-switch-sun {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0deg);
}

/* Ícono luna */
.tema-switch-moon {
    position: absolute;
    right: 7px;
    top: 50%;
    font-size: 16px;
    color: #a8c4f0;
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0deg);
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
    line-height: 1;
    display: flex;
    align-items: center;
}
.tema-switch.tema-dark .tema-switch-moon {
    opacity: 0;
    transform: translateY(-50%) scale(0.3) rotate(120deg);
}

/* Thumb (bolita deslizante) */
.tema-switch-thumb {
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%) translateZ(0);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e8f0fe, #c5d8ff);
    box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.8);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
                background 0.4s ease,
                box-shadow 0.4s ease;
    z-index: 2;
}
.tema-switch.tema-dark .tema-switch-thumb {
    transform: translateY(-50%) translateX(28px) translateZ(0);
    background: linear-gradient(145deg, #fff8e1, #ffe082);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 12px rgba(255,200,50,0.6), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Hover glow */
.tema-switch:hover .tema-switch-track {
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.3), 0 0 0 3px rgba(77,166,255,0.15);
}
.tema-switch.tema-dark:hover .tema-switch-track {
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.1), 0 0 0 3px rgba(246,201,78,0.2);
}

/* ─── Botón tema mobile (ícono simple) ───────────────────────────── */
/* Desktop: oculto */
#btn-tema-movil { display: none; }

/* Mobile: visible, switch desktop oculto */
@media (max-width: 768px) {
    #btn-tema { display: none !important; }

    #btn-tema-movil {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 6px;
        cursor: pointer;
        font-size: 22px;
        color: var(--lausant-dark);
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.2s ease, color 0.2s ease;
    }
    #btn-tema-movil:active { transform: scale(0.82) rotate(15deg); }
    [data-theme="dark"] #btn-tema-movil { color: var(--text-main); }

    /* Modo claro: mostrar luna, ocultar sol */
    #btn-tema-movil .tema-mob-luna { display: inline; }
    #btn-tema-movil .tema-mob-sol  { display: none; }

    /* Modo oscuro: mostrar sol amarillo, ocultar luna */
    [data-theme="dark"] #btn-tema-movil .tema-mob-luna { display: none; }
    [data-theme="dark"] #btn-tema-movil .tema-mob-sol  { display: inline; color: #f6c94e; }
}

/* ─── 13. Tab content transitions ────────────────────────────────── */
.tab-content.activo-anim {
    animation: v2-fadeUp .35s var(--ease-smooth) both;
}

/* ─── 14. Profile popup v2 ───────────────────────────────────────── */
#perfil-popup {
    border-radius: 18px !important;
    box-shadow: var(--sh-5) !important;
    border: 1px solid var(--border-color) !important;
    overflow: hidden;
}
[data-theme="dark"] #perfil-popup,
body.modo-oscuro #perfil-popup {
    background: #161f2e !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* ─── 15. Paginación v2 ──────────────────────────────────────────── */
.pag-btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    min-width: 32px;
    height: 32px;
    transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-pop) !important;
}
.pag-btn:hover  { transform: scale(1.08) !important; }
.pag-btn:active { transform: scale(.95)  !important; }

/* ─── 16. SweetAlert2 theming ────────────────────────────────────── */
.swal2-popup {
    border-radius: 18px !important;
    padding: 28px !important;
    font-family: 'Poppins', sans-serif !important;
    box-shadow: var(--sh-5) !important;
}
.swal2-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -.2px !important;
}
.swal2-confirm, .swal2-cancel, .swal2-deny {
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    padding: 11px 22px !important;
    letter-spacing: .2px !important;
    transition: filter .15s, transform .12s var(--ease-pop) !important;
}
.swal2-confirm:hover, .swal2-cancel:hover, .swal2-deny:hover {
    filter: brightness(1.09) !important;
    transform: translateY(-1px) !important;
}
.swal2-confirm:active, .swal2-cancel:active, .swal2-deny:active {
    transform: scale(.96) !important;
}
/* Dark mode SweetAlert */
[data-theme="dark"] .swal2-popup,
body.modo-oscuro .swal2-popup {
    background: #161f2e !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .swal2-title,
body.modo-oscuro .swal2-title { color: #e2eaf4 !important; }
[data-theme="dark"] .swal2-html-container,
body.modo-oscuro .swal2-html-container { color: #8899aa !important; }
[data-theme="dark"] .swal2-input,
body.modo-oscuro .swal2-input {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #e2eaf4 !important;
    border-radius: 10px !important;
}
[data-theme="dark"] .swal2-input:focus,
body.modo-oscuro .swal2-input:focus {
    border-color: var(--lausant-accent) !important;
    box-shadow: 0 0 0 3px rgba(77,166,255,.2) !important;
}

/* ─── 17. Loading skeleton v2 ────────────────────────────────────── */
.v2-skeleton {
    background: linear-gradient(90deg,
        var(--border-color) 0%,
        rgba(200,215,235,.6) 40%,
        var(--border-color) 80%);
    background-size: 400px 100%;
    animation: v2-shimmer 1.4s ease infinite;
    border-radius: 8px;
    display: block;
}
[data-theme="dark"] .v2-skeleton,
body.modo-oscuro .v2-skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,.05) 0%,
        rgba(255,255,255,.10) 40%,
        rgba(255,255,255,.05) 80%);
    background-size: 400px 100%;
    animation: v2-shimmer 1.4s ease infinite;
}

/* ─── 18. Topbar action buttons (campana, tema, perfil) ───────────── */
#btn-campana, #btn-tema {
    border-radius: 10px !important;
    padding: 7px 9px !important;
    transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-pop) !important;
}
#btn-campana:hover, #btn-tema:hover {
    background: rgba(10,71,150,.08) !important;
    transform: scale(1.08) !important;
}
[data-theme="dark"] #btn-campana:hover,
[data-theme="dark"] #btn-tema:hover,
body.modo-oscuro #btn-campana:hover,
body.modo-oscuro #btn-tema:hover { background: rgba(255,255,255,.08) !important; }

/* ─── 19. Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 600px) {
    .card { border-radius: 14px !important; padding: 16px !important; }
    .topbar { border-radius: 12px !important; }
    th { font-size: 10px !important; padding: 10px 10px !important; }
    td { font-size: 12px !important; padding: 10px !important; }
}
@media (min-width: 1440px) {
    .main-content { padding: 36px 48px !important; }
    .card { padding: 28px !important; }
}

/* ─── 20. Animación de entrada de tabs (hook en JS) ──────────────── */
.tab-content[style*="display: block"],
.tab-content[style*="display:block"] {
    animation: v2-fadeUp .32s var(--ease-smooth) both;
}

/* ─── 21. Credenciales mejoradas ─────────────────────────────────── */
.credenciales-cell {
    border-radius: 8px !important;
    background: rgba(10,71,150,.05) !important;
    border: 1px solid rgba(10,71,150,.12) !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] .credenciales-cell,
body.modo-oscuro .credenciales-cell {
    background: rgba(77,166,255,.06) !important;
    border-color: rgba(77,166,255,.15) !important;
}

/* ─── 22. Mobile nav bottom bar (si existe) ─────────────────────── */
.mobile-nav-bottom .nav-item {
    border-radius: 10px !important;
    transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-pop) !important;
}
.mobile-nav-bottom .nav-item:hover { transform: translateY(-2px) !important; }

/* ─── 23. Dark mode bg & card surfaces ───────────────────────────── */
[data-theme="dark"] body,
body.modo-oscuro {
    background: #0d1421 !important;
}
[data-theme="dark"] .bg-color,
body.modo-oscuro .bg-color { background: #0d1421 !important; }
[data-theme="dark"] #pantalla-carga,
body.modo-oscuro  #pantalla-carga {
    background: #0d1421 !important;
}
[data-theme="dark"] .filtros-container,
body.modo-oscuro  .filtros-container {
    background: #161f2e !important;
}
[data-theme="dark"] table,
body.modo-oscuro  table { background: #161f2e !important; }

/* ─── 24. Hover interactivo global ──────────────────────────────── */
[onclick]:not(.btn):not(button):not(a):not(input):not(select):not(label) {
    cursor: pointer;
}
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

/* ─── 25. Focus-visible accesible ────────────────────────────────── */
:focus-visible {
    outline: 2.5px solid var(--lausant-accent) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
button:focus-visible, a:focus-visible {
    outline: 2.5px solid var(--lausant-accent) !important;
    outline-offset: 3px !important;
}

/* ══ Fin Design System v2 ══════════════════════════════════════════ */

/* ─── Quirófanos: elementos clickeables (editar horario) ────────── */
.qx-cx-clickable {
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    border-radius: 10px;
}
.qx-cx-clickable:hover {
    background: rgba(10, 71, 150, 0.06) !important;
    box-shadow: inset 0 0 0 1.5px rgba(10, 71, 150, 0.18);
}
body.modo-oscuro .qx-cx-clickable:hover,
[data-theme="dark"] .qx-cx-clickable:hover {
    background: rgba(77, 166, 255, 0.08) !important;
    box-shadow: inset 0 0 0 1.5px rgba(77, 166, 255, 0.22);
}
.qx-edit-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(10, 71, 150, 0.1);
    color: var(--lausant-blue);
    font-size: 12px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.qx-cx-clickable:hover .qx-edit-hint { opacity: 1; }
.qx-card-footer.qx-cx-clickable {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── Quirófanos: aviso cirugía bloqueada por atraso ────────────── */
.qx-bloqueada-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
    border: 1.5px solid #f59e0b;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 14px 8px;
    animation: v2-fadeUp 0.3s var(--ease-smooth) both;
}
body.modo-oscuro .qx-bloqueada-warning,
[data-theme="dark"] .qx-bloqueada-warning {
    background: linear-gradient(135deg, #2d1f00 0%, #3d2800 100%);
    border-color: #d97706;
}
.qx-bloqueada-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: #f59e0b;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 16px;
    margin-top: 2px;
}
.qx-bloqueada-content { flex: 1; min-width: 0; }
.qx-bloqueada-title {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
body.modo-oscuro .qx-bloqueada-title,
[data-theme="dark"] .qx-bloqueada-title { color: #fbbf24; }
.qx-bloqueada-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #78350f;
    margin-bottom: 3px;
}
body.modo-oscuro .qx-bloqueada-item,
[data-theme="dark"] .qx-bloqueada-item { color: #fde68a; }
.qx-bloqueada-item i { font-size: 13px; flex-shrink: 0; }
.qx-bloqueada-hora {
    margin-left: auto;
    font-weight: 600;
    font-size: 12px;
    background: #f59e0b22;
    padding: 1px 6px;
    border-radius: 4px;
}
.qx-bloqueada-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #b45309;
    margin-top: 5px;
    font-style: italic;
}
body.modo-oscuro .qx-bloqueada-hint,
[data-theme="dark"] .qx-bloqueada-hint { color: #fcd34d; }

/* ─── Pantalla de bienvenida ────────────────────────────────────── */
#bienvenida-overlay {
    display: none;
    opacity: 0;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(145deg, #051228 0%, #0a3070 50%, #1255b8 100%);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    transition: opacity 0.5s ease;
}
.bienvenida-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: bienvenida-up 0.6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bienvenida-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bienvenida-logo {
    width: 130px;
    height: auto;
    opacity: 0.92;
    margin-bottom: 8px;
}
.bienvenida-saludo {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    letter-spacing: -0.5px;
}
.bienvenida-puesto {
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.bienvenida-hint {
    margin-top: 32px;
    font-size: 12px;
    color: rgba(255,255,255,0.25);
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: bienvenida-pulse 1.8s ease-in-out infinite;
}
@keyframes bienvenida-pulse {
    0%, 100% { opacity: 0.25; }
    50%       { opacity: 0.6; }
}

/* ── Animación de salida ── */
#bienvenida-overlay.saliendo {
    animation: bvd-overlay-out 0.8s cubic-bezier(.4,0,.6,1) forwards;
    transition: none;
    pointer-events: none;
}
#bienvenida-overlay.saliendo .bienvenida-inner {
    will-change: opacity, transform;
    animation: bvd-inner-out 0.6s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes bvd-overlay-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes bvd-inner-out {
    0%   { opacity: 1; transform: translateY(0)    scale(1);    }
    100% { opacity: 0; transform: translateY(-26px) scale(1.06); }
}

/* ─── Botones admin en el popup de perfil ─── */
.pp-admin-btn {
    width: 100%;
    background: none;
    border: 1.5px solid var(--card-border);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .15s;
}
.pp-admin-btn:hover { background: var(--hover-bg); }

/* ─── Panel Registro de Actividad ─────────────────────────────────── */
#actividad-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 9000;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#actividad-panel {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    max-width: 100vw;
    height: 100vh;
    background: var(--card-bg);
    border-left: 1px solid var(--card-border);
    z-index: 9001;
    flex-direction: column;
    box-shadow: -8px 0 40px rgba(0,0,0,0.14);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
}
#actividad-panel.abierto { transform: translateX(0); }

.actividad-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
}
.actividad-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 20px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background .15s, color .15s;
    display: flex;
    align-items: center;
}
.actividad-close-btn:hover { background: var(--hover-bg); color: var(--text-main); }

.actividad-filtros {
    padding: 12px 20px;
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
}
.actividad-filtros select {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--card-border);
    border-radius: 8px;
    background: var(--input-bg, var(--card-bg));
    color: var(--text-main);
    font-size: 13px;
    cursor: pointer;
    outline: none;
    transition: border-color .2s;
}
.actividad-filtros select:focus { border-color: var(--lausant-blue); }

#actividad-lista {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
#actividad-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--card-border);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}
#actividad-mas-btn {
    background: none;
    border: 1.5px solid var(--card-border);
    border-radius: 8px;
    padding: 8px 20px;
    cursor: pointer;
    color: var(--lausant-blue);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .15s;
}
#actividad-mas-btn:hover { background: var(--hover-bg); }

/* Ítem de log */
.actividad-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--card-border);
    transition: background .15s;
}
.actividad-item:hover { background: var(--hover-bg); }
.actividad-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}
.actividad-icono {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--hover-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--lausant-blue);
    flex-shrink: 0;
}
.actividad-contenido { flex: 1; min-width: 0; }
.actividad-desc {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.4;
    margin-bottom: 4px;
}
.actividad-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    align-items: center;
}
.actividad-modulo-tag {
    background: rgba(10,71,150,0.1);
    color: var(--lausant-blue);
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.actividad-cargando, .actividad-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/* Dark mode */
[data-theme="dark"] .actividad-modulo-tag {
    background: rgba(77,166,255,0.15);
    color: #4da6ff;
}

/* ─── PWA standalone (Agregar a Inicio iOS/Android) ────────────────
   Con status-bar-style=default el viewport empieza debajo de la barra
   del sistema. Solo necesitamos cubrir el indicador Home inferior.    */
@media (display-mode: standalone) {
    /* Espacio para el indicador Home de iPhone (safe-area-inset-bottom) */
    .sidebar {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .main-content {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
}

/* ================================================================
   GESTIÓN CLÍNICA — OPTIMIZACIÓN MÓVIL
   Estilos base para desktop + media query para móvil.
   No modifica nada ajeno a gestión clínica.
   ================================================================ */

/* ── Base (desktop) — Panel header ─────────────────────────── */
.clin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.clin-panel-acciones {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Animación de entrada para tarjetas móvil ───────────────── */
@keyframes clin-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@media (max-width: 768px) {

/* ── 1. FIXES GLOBALES ─────────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100vw; }
* { box-sizing: border-box; }

/* ── 2. FORMULARIOS CLÍNICOS — columna única ───────────────── */
.clin-form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}
.clin-form-row > div,
.clin-form-row > div[style*="grid-column"] {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: unset !important;
}
/* Tipo infusión: radio buttons apilados, tamaño natural */
.clin-inf-tipo-row {
    flex-direction: column !important;
    gap: 8px !important;
}
.clin-inf-tipo-row > label {
    width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 52px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
/* Tipo consulta: radio buttons compactos */
.clin-radio-group {
    flex-direction: column !important;
    gap: 8px !important;
}
.clin-radio-group > label {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
/* Botones ± táctiles */
.clin-step-row button {
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 18px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
}

/* ── 3. SWEETALERT2 CLÍNICO — bottom-sheet (solo .clin-swal-mobile) ── */
/* El popup usa flex column: título + contenido scrollable + botones fijos */
.swal2-popup.clin-swal-mobile {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 90vh !important;
    overflow: hidden !important;          /* el popup NO scrollea */
    display: flex !important;
    flex-direction: column !important;
    border-radius: 20px 20px 10px 10px !important;
    margin: 0 !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) 0 !important;
}
.swal2-container:has(.swal2-popup.clin-swal-mobile) {
    align-items: flex-end !important;
    padding: 0 !important;
}
/* Título compacto */
.clin-swal-mobile .swal2-title {
    padding: 18px 16px 10px !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}
/* Área de contenido: crece y scrollea */
.clin-swal-mobile .swal2-html-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 14px 8px !important;
    margin: 0 !important;
}
/* Todos los inputs/selects/textareas — 16px para evitar zoom iOS */
.clin-swal-mobile input,
.clin-swal-mobile select,
.clin-swal-mobile textarea {
    font-size: 16px !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.clin-swal-mobile textarea { min-height: 88px !important; }
/* EXCLUIR radio y checkbox del min-height grande */
.clin-swal-mobile input[type="radio"],
.clin-swal-mobile input[type="checkbox"] {
    min-height: unset !important;
    height: 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
/* Botones: siempre visibles al fondo, no scrollean */
.clin-swal-mobile .swal2-actions {
    flex-shrink: 0 !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 8px 14px 12px !important;
    box-sizing: border-box !important;
    border-top: 1px solid var(--border-color) !important;
    background: var(--card-bg) !important;
}
.clin-swal-mobile .swal2-actions .swal2-confirm,
.clin-swal-mobile .swal2-actions .swal2-cancel,
.clin-swal-mobile .swal2-actions .swal2-deny {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    margin: 0 !important;
}

/* ── 4. PANEL HEADER — columna en móvil ─────────────────────── */
.clin-panel-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
}
.clin-panel-acciones {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
}
.clin-panel-acciones .btn-login {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 15px !important;
    justify-content: center !important;
}
.clin-panel-acciones .btn:not(.btn-login) {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
}

/* ── 5. FILTROS — columna ────────────────────────────────────── */
.filtros-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.filtros-container input,
.filtros-container select {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}

/* ── 6. TABLAS → TARJETAS ANIMADAS ──────────────────────────── */
/* Wrappers: no scroll horizontal, ancho 100% */
#clin-tw-cirugias,
#clin-tw-consultas,
#clin-tw-infusiones {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Tabla como bloque contenido */
#tabla-cirugias,
#tabla-consultas,
#tabla-infusiones {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Panel de cada agenda: sin overflow horizontal */
#adm-tab-cirugias-agenda,
#adm-tab-consultas-agenda,
#adm-tab-banco-agenda {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

#tabla-cirugias thead,
#tabla-consultas thead,
#tabla-infusiones thead { display: none !important; }

#tabla-cirugias tbody,
#tabla-consultas tbody,
#tabla-infusiones tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Cada fila = tarjeta contenida al 100% */
#tabla-cirugias tbody tr,
#tabla-consultas tbody tr,
#tabla-infusiones tbody tr {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: var(--card-bg) !important;
    border-radius: 14px !important;
    border: 1px solid var(--border-color) !important;
    padding: 14px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
    animation: clin-card-in 0.22s ease both;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    cursor: pointer;
}
#tabla-cirugias tbody tr:active,
#tabla-consultas tbody tr:active,
#tabla-infusiones tbody tr:active {
    transform: scale(0.985) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}

/* Todas las celdas ocultas por defecto; se muestran por clase */
#tabla-cirugias tbody td,
#tabla-consultas tbody td,
#tabla-infusiones tbody td {
    display: none !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* — Nombre del paciente: título de tarjeta — */
#tabla-cirugias tbody td.clin-td-name,
#tabla-consultas tbody td.clin-td-name,
#tabla-infusiones tbody td.clin-td-name {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    padding: 0 0 8px 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* — Tipo — */
#tabla-cirugias tbody td.clin-td-type,
#tabla-consultas tbody td.clin-td-type,
#tabla-infusiones tbody td.clin-td-type {
    display: inline !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--lausant-blue) !important;
}

/* — Doctor (con separador) — */
#tabla-cirugias tbody td.clin-td-doc,
#tabla-consultas tbody td.clin-td-doc,
#tabla-infusiones tbody td.clin-td-doc {
    display: inline !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
}
#tabla-cirugias tbody td.clin-td-doc::before,
#tabla-consultas tbody td.clin-td-doc::before,
#tabla-infusiones tbody td.clin-td-doc::before {
    content: " · ";
}

/* — Fecha — */
#tabla-cirugias tbody td.clin-td-date,
#tabla-consultas tbody td.clin-td-date,
#tabla-infusiones tbody td.clin-td-date {
    display: block !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin-top: 5px !important;
    padding: 0 !important;
}

/* — Badge: bajo la fecha, en flujo normal (sin absolute) — */
#tabla-cirugias tbody td.clin-td-badge,
#tabla-consultas tbody td.clin-td-badge,
#tabla-infusiones tbody td.clin-td-badge {
    display: block !important;
    position: static !important;
    padding: 4px 0 0 !important;
    line-height: 1 !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
}

/* — Acciones: barra inferior — */
#tabla-cirugias tbody td.clin-td-actions,
#tabla-consultas tbody td.clin-td-actions,
#tabla-infusiones tbody td.clin-td-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: normal !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid var(--border-color) !important;
    margin-top: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#tabla-cirugias tbody td.clin-td-actions button,
#tabla-consultas tbody td.clin-td-actions button,
#tabla-infusiones tbody td.clin-td-actions button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

/* ── 7. CALENDARIO — navegación táctil ──────────────────────── */
[onclick*="navCal_"] {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px 14px !important;
    font-size: 20px !important;
    touch-action: manipulation;
}

/* ── 8. CALENDARIO MENSUAL — celdas compactas ───────────────── */
.clin-cal-mens-day {
    min-height: 46px !important;
    padding: 4px 3px !important;
}
.clin-cal-mens-evts { display: none !important; }

/* ── 9. CALENDARIO SEMANAL — deslizar por día ───────────────── */
.clin-cal-sem-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 10px !important;
    padding-bottom: 10px !important;
    scroll-behavior: smooth;
}
.clin-cal-sem-col {
    flex: 0 0 82vw !important;
    min-width: 82vw !important;
    max-width: 82vw !important;
    scroll-snap-align: center !important;
    min-height: 200px;
}
.clin-cal-sem-hoy {
    box-shadow: 0 4px 20px rgba(10,71,150,0.25) !important;
}
.clin-cal-sem-col [style*="font-size:11px"] { font-size: 13px !important; }
.clin-cal-sem-col [style*="font-size:9px"]  { font-size: 11px !important; }

/* ── 10. RESUMEN CLÍNICO — grid a columna ───────────────────── */
[id="adm-tab-clinica-resumen"] [style*="grid-template-columns:repeat(3"],
[id="adm-tab-cirugias-agenda"] [style*="grid-template-columns:repeat(3"],
[id="adm-tab-banco-agenda"] [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
}

/* ── 11. VISTA DIARIA — sin desbordamiento horizontal ───────── */
.clin-dia-scroll {
    overflow-x: hidden !important;
    max-width: 100% !important;
}
.clin-dia-timeline {
    width: 100% !important;
    min-width: unset !important;
    overflow-x: hidden !important;
}

/* ── 12. TABLE WRAPPER ───────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }
#clin-tw-cirugias,
#clin-tw-consultas,
#clin-tw-infusiones {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

} /* fin @media (max-width: 768px) */

@media (max-width: 768px) {
    .clin-cal-sem-grid:not([data-scrolled]) .clin-cal-sem-hoy { outline: none; }
}