/* ============================================================
   MAPANET BPO — PORTAL DE EMPLEADOS CSS v2.0
   ============================================================ */

/* ─── Variables ─── */
:root {
    --p-dark:       #04111F;
    --p-navy:       #071C3A;
    --p-blue:       #1F5B9D;
    --p-green:      #3FA86C;
    --p-green-l:    #8FEA78;
    --p-cyan:       #6ED9F0;
    --p-cyan-d:     #3bb8d8;
    --p-yellow:     #F5C518;
    --p-red:        #E74C3C;
    --p-orange:     #F39C12;
    --p-white:      #FFFFFF;
    --p-gray-50:    #f8fafc;
    --p-gray-100:   #f1f5f9;
    --p-gray-200:   #e2e8f0;
    --p-gray-400:   #94a3b8;
    --p-gray-600:   #475569;
    --p-gray-800:   #1e293b;

    --p-nav-h:      68px;
    --p-radius-sm:  8px;
    --p-radius:     14px;
    --p-radius-lg:  20px;

    --p-shadow-sm:  0 2px 8px rgba(7,28,58,0.10);
    --p-shadow:     0 4px 20px rgba(7,28,58,0.14);
    --p-shadow-lg:  0 8px 40px rgba(7,28,58,0.20);
    --p-shadow-xl:  0 16px 60px rgba(7,28,58,0.28);

    --p-grad-brand: linear-gradient(135deg, #1F5B9D 0%, #3FA86C 100%);
    --p-grad-dark:  linear-gradient(135deg, #04111F 0%, #071C3A 60%, #0A2810 100%);
    --p-grad-green: linear-gradient(135deg, #3FA86C 0%, #8FEA78 100%);
    --p-grad-cyan:  linear-gradient(135deg, #1F5B9D 0%, #6ED9F0 100%);
    --p-grad-gold:  linear-gradient(135deg, #F39C12 0%, #F5C518 100%);
    --p-grad-red:   linear-gradient(135deg, #c0392b 0%, #E74C3C 100%);

    --p-trans: 0.2s ease;
}

/* ─── Reset / Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: 'Poppins', sans-serif;
    background: var(--p-dark);
    color: var(--p-gray-800);
    overflow-x: hidden;
    font-size: 14px;
}

/* ============================================================
   SCREENS
   ============================================================ */
.screen {
    display: none;
    min-height: 100vh;
}
.screen.active {
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.35s ease;
}

@keyframes fadeInUp {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes shake {
    0%,100%{ transform:translateX(0) }
    20%    { transform:translateX(-6px) }
    40%    { transform:translateX(6px) }
    60%    { transform:translateX(-4px) }
    80%    { transform:translateX(4px) }
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(63,168,108,0.35); }
    70%  { box-shadow: 0 0 0 16px rgba(63,168,108,0); }
    100% { box-shadow: 0 0 0 0 rgba(63,168,108,0); }
}
@keyframes float-orb {
    0%,100% { transform: translateY(0) scale(1); }
    50%     { transform: translateY(-30px) scale(1.05); }
}
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
#screen-login {
    justify-content: center;
    align-items: center;
    background: var(--p-grad-dark);
    position: relative;
    overflow: hidden;
}

.login-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.18;
    animation: float-orb 8s ease-in-out infinite;
}
.orb1 { width:480px; height:480px; background:#1F5B9D; top:-120px; left:-100px; animation-delay:0s; }
.orb2 { width:360px; height:360px; background:#3FA86C; bottom:-80px; right:-80px; animation-delay:3s; }
.orb3 { width:260px; height:260px; background:#6ED9F0; top:50%; left:55%; animation-delay:1.5s; }

.login-card {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--p-radius-lg);
    padding: 40px 36px 32px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: var(--p-shadow-xl), 0 0 0 1px rgba(110,217,240,0.08);
}

.login-logo img {
    height: 52px;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 12px rgba(110,217,240,0.3));
}

.login-card h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--p-white);
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}
.login-sub {
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    margin-bottom: 28px;
}

/* ── Login con credenciales ── */
.login-card--creds { max-width: 440px; text-align: left; }

.login-form--creds {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 4px;
}

.cred-group { display: flex; flex-direction: column; gap: 7px; }

.cred-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    gap: 7px;
}
.cred-label i { color: var(--p-cyan); font-size: 0.8rem; }

.cred-input-wrap { position: relative; }

.cred-input {
    width: 100%;
    padding: 12px 44px 12px 16px;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    color: var(--p-white);
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
}
.cred-input::placeholder { color: rgba(255,255,255,0.3); }
.cred-input:focus {
    border-color: var(--p-cyan);
    background: rgba(110,217,240,0.06);
    box-shadow: 0 0 0 3px rgba(110,217,240,0.12);
}
.cred-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px #071C3A inset;
    -webkit-text-fill-color: #fff;
}

/* Ojo de contraseña */
.cred-eye {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.18s;
}
.cred-eye:hover { color: var(--p-cyan); }
/* Versión dentro del modal de empleado */
.cred-eye--form {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
}
.cred-eye--form:hover { color: #1F5B9D; }

/* Botón de ingresar */
.login-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #3FA86C, #2d9a5c);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 4px;
    letter-spacing: 0.3px;
}
.login-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #48c47e, #3FA86C);
    box-shadow: 0 6px 24px rgba(63,168,108,0.4);
    transform: translateY(-1px);
}
.login-btn:active { transform: translateY(0); }
.login-btn:disabled { opacity: 0.65; cursor: not-allowed; }

.login-error {
    min-height: 18px;
    color: #ff6b6b;
    font-size: 0.8rem;
    animation: none;
    font-weight: 500;
    margin: 0;
}
.login-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
    text-align: center;
}
.login-version {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.2);
}
.login-hint-small {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.18);
    margin-top: 6px;
}

/* ── Sección label en modales ── */
.form-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1F5B9D;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e8edf5;
}

/* ── ID del empleado en tarjetas ── */
.emp-id-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: #f0f6ff;
    border: 1px dashed #c7d9f0;
    border-radius: 8px;
    margin: 8px 0;
    cursor: pointer;
    transition: background 0.18s;
    overflow: hidden;
}
.emp-id-badge:hover { background: #dceeff; }
.emp-id-badge i:first-child { color: #1F5B9D; font-size: 0.8rem; flex-shrink: 0; }
.emp-id-badge code {
    font-size: 0.65rem;
    color: #334155;
    font-family: 'Courier New', monospace;
    word-break: break-all;
    flex: 1;
}
.emp-id-code {
    background: #f0f4fa;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.7rem;
    color: #334155;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    border: 1px solid #dde6f0;
}
.emp-id-code:hover { background: #dceeff; border-color: #93c5fd; }

/* ── Ícono de género en tarjeta ── */
.emp-genero-ico {
    font-size: 0.7rem;
    margin-left: 5px;
    opacity: 0.7;
}
.emp-card-usuario {
    font-size: 0.68rem;
    color: #94a3b8;
    margin-top: 2px;
    word-break: break-all;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.portal-nav {
    height: var(--p-nav-h);
    background: var(--p-navy);
    border-bottom: 1px solid rgba(110,217,240,0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    flex-shrink: 0;
    overflow: hidden;
    min-width: 0;
}
.portal-nav--admin { background: var(--p-dark); border-bottom-color: rgba(63,168,108,0.18); }
/* Admin: hide subtitle and user info text to save space */
.portal-nav--admin .pnav-wordmark-sub { display: none; }
.portal-nav--admin .pnav-info { display: none; }
.portal-nav--admin .pnav-avatar { width: 32px; height: 32px; font-size: 0.8rem; }

.pnav-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.pnav-logo { height: 38px; width: auto; }
.pnav-brand { display: flex; flex-direction: column; }
.pnav-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.92rem; color: var(--p-white); }
.pnav-sub { font-size: 0.68rem; color: rgba(255,255,255,0.4); font-weight: 400; }
.admin-label { color: var(--p-green-l); font-size: 0.7rem; }

/* ── Wordmark (reemplaza logo) ── */
.pnav-wordmark {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}
.pnav-wordmark-main {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: var(--p-white);
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.pnav-wordmark-sub {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.pnav-wordmark-sub i { margin-right: 3px; }

.pnav-center {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

/* Admin tabs in nav */
.admin-tabs {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--p-radius);
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-family: 'Poppins', sans-serif;
    font-size: 0.73rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--p-trans);
    white-space: nowrap;
    flex-shrink: 0;
}
.admin-tab i { font-size: 0.78rem; }
.admin-tab:hover { color: var(--p-white); background: rgba(255,255,255,0.07); }
.admin-tab.active {
    background: var(--p-grad-brand);
    color: var(--p-white);
    box-shadow: 0 2px 10px rgba(31,91,157,0.30);
}

.pnav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.pnav-user { display: flex; align-items: center; gap: 10px; }
.pnav-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--p-grad-brand);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; color: var(--p-white);
    flex-shrink: 0;
    border: 2px solid rgba(110,217,240,0.3);
}
.pnav-avatar--admin { background: var(--p-grad-green); font-size: 0.9rem; }
.pnav-info { display: flex; flex-direction: column; }
.pnav-name { font-size: 0.82rem; font-weight: 600; color: var(--p-white); }
.pnav-cargo { font-size: 0.68rem; color: rgba(255,255,255,0.4); }
.pnav-id    { font-size: 0.65rem; color: rgba(255,255,255,0.55); font-family: 'Courier New', monospace; letter-spacing: 1px; }

.pnav-logout {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(231,76,60,0.12);
    border: 1px solid rgba(231,76,60,0.25);
    color: #ff8a80;
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--p-radius-sm);
    cursor: pointer;
    transition: all var(--p-trans);
    flex-shrink: 0;
}
.pnav-logout:hover {
    background: rgba(231,76,60,0.25);
    border-color: rgba(231,76,60,0.5);
    color: #fff;
}

/* Botón de Permisos en la navbar del empleado */
.pnav-permisos-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(63,168,108,0.12);
    border: 1px solid rgba(63,168,108,0.30);
    color: #5dde8e;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: var(--p-radius-sm);
    cursor: pointer;
    transition: all var(--p-trans);
    margin-right: 6px;
}
.pnav-permisos-btn:hover {
    background: rgba(63,168,108,0.25);
    border-color: rgba(63,168,108,0.55);
    color: #fff;
}
.pnav-permisos-btn--back {
    background: rgba(110,217,240,0.12);
    border-color: rgba(110,217,240,0.28);
    color: #6ED9F0;
}
.pnav-permisos-btn--back:hover {
    background: rgba(110,217,240,0.22);
    border-color: rgba(110,217,240,0.5);
    color: #fff;
}

/* ============================================================
   PORTAL BODY
   ============================================================ */
.portal-body {
    flex: 1;
    padding: 28px 32px;
    background: var(--p-gray-50);
    overflow-y: auto;
}

/* Portal empleado — pantalla bienvenida */
#screen-empleado > .portal-body {
    padding: 0;
    background: var(--p-dark);
}

/* === Bloque RELOJ HERO, ts-badge, timers, obs-input, fichar-btn
       ELIMINADOS — módulo asistencia migrado a CRM === */

/* ============================================================
   PANEL CARDS (shared)
   ============================================================ */
.panel-card, .admin-card {
    background: var(--p-white);
    border: 1px solid var(--p-gray-200);
    border-radius: var(--p-radius);
    overflow: hidden;
    box-shadow: var(--p-shadow-sm);
}
.panel-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--p-gray-200);
    background: var(--p-gray-50);
}
.panel-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--p-navy);
}
.panel-card-title i { color: var(--p-blue); font-size: 0.95rem; }

/* hc-body, hc-event, ev-* — ELIMINADOS (asistencia migrado a CRM) */

/* ─── Botones pequeños ─── */
.btn-sm-outline {
    display: flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid var(--p-gray-200);
    border-radius: var(--p-radius-sm);
    color: var(--p-blue);
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    transition: all var(--p-trans);
}
.btn-sm-outline:hover { background: var(--p-blue); color: var(--p-white); border-color: var(--p-blue); }

/* ─── Tabla portal ─── */
.semana-table-wrap { overflow-x: auto; }
.portal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.portal-table th {
    background: var(--p-gray-50);
    border-bottom: 2px solid var(--p-gray-200);
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--p-gray-600);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.portal-table th i { margin-right: 4px; opacity: 0.6; }
.portal-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--p-gray-100);
    color: var(--p-gray-800);
    vertical-align: middle;
}
.portal-table tr:last-child td { border-bottom: none; }
.portal-table tbody tr:hover td { background: var(--p-gray-50); }
.table-empty { text-align: center; color: var(--p-gray-400); padding: 40px 20px !important; font-size: 0.82rem; }

/* ─── Estado badges ─── */
.estado-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
.estado-completo, .estado-activo, .estado-trabajo     { background: rgba(63,168,108,0.12); color: #22863a; }
.estado-incompleto, .estado-inactivo                   { background: rgba(231,76,60,0.10);  color: var(--p-red); }
.estado-ausente                                        { background: rgba(245,197,24,0.12); color: #b45309; }
.estado-pendiente, .estado-sin-fichar                  { background: rgba(148,163,184,0.15);color: var(--p-gray-600); }
.estado-descanso                                       { background: rgba(245,197,24,0.12); color: #b45309; }
.estado-extra                                          { background: rgba(110,217,240,0.15);color: var(--p-cyan-d); }

/* ============================================================
   ADMIN — KPIs
   ============================================================ */
.admin-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.kpi-card {
    background: var(--p-white);
    border-radius: var(--p-radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--p-gray-200);
    box-shadow: var(--p-shadow-sm);
    position: relative;
    overflow: hidden;
    transition: all var(--p-trans);
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--p-shadow); }
.kpi-decoration {
    position: absolute;
    top: -20px; right: -20px;
    width: 80px; height: 80px;
    border-radius: 50%;
    opacity: 0.07;
}
.kpi-blue  .kpi-decoration  { background: var(--p-blue); }
.kpi-green .kpi-decoration  { background: var(--p-green); }
.kpi-yellow .kpi-decoration { background: var(--p-yellow); }
.kpi-cyan  .kpi-decoration  { background: var(--p-cyan); }
.kpi-red   .kpi-decoration  { background: var(--p-red); }

.kpi-icon-wrap {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.kpi-blue  .kpi-icon-wrap  { background: rgba(31,91,157,0.1);   color: var(--p-blue); }
.kpi-green .kpi-icon-wrap  { background: rgba(63,168,108,0.1);  color: var(--p-green); }
.kpi-yellow .kpi-icon-wrap { background: rgba(245,197,24,0.1);  color: var(--p-orange); }
.kpi-cyan  .kpi-icon-wrap  { background: rgba(110,217,240,0.1); color: var(--p-cyan-d); }
.kpi-red   .kpi-icon-wrap  { background: rgba(231,76,60,0.08);  color: var(--p-red); }

.kpi-data { display: flex; flex-direction: column; }
.kpi-val  { font-family: 'Montserrat', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--p-navy); line-height: 1; }
.kpi-label { font-size: 0.72rem; color: var(--p-gray-400); font-weight: 500; margin-top: 4px; }

/* ─── Mini KPIs (planilla) ─── */
.admin-kpis-mini {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

/* ─── Barra de acciones admin ─── */
.admin-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.admin-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-section-title i { color: var(--p-blue); font-size: 1.1rem; }
.admin-section-title h3 { font-size: 1rem; font-weight: 700; color: var(--p-navy); }
.admin-section-title span { color: var(--p-blue); }

.admin-actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.filter-group-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-sep { font-size: 0.78rem; color: var(--p-gray-400); }
.filter-input-sm {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--p-gray-200);
    border-radius: var(--p-radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    color: var(--p-gray-800);
    background: var(--p-white);
    outline: none;
    transition: border-color var(--p-trans);
    min-width: 120px;
}
.filter-input-sm:focus { border-color: var(--p-blue); }

.btn-filtrar-sm, .btn-refresh, .btn-export-sm, .btn-primary-sm {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--p-radius-sm);
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: all var(--p-trans);
    white-space: nowrap;
}
.btn-filtrar-sm { background: var(--p-blue); color: var(--p-white); }
.btn-filtrar-sm:hover { background: #184d8a; }
.btn-refresh { background: var(--p-gray-100); color: var(--p-gray-600); border: 1px solid var(--p-gray-200); }
.btn-refresh:hover { background: var(--p-gray-200); }
.btn-export-sm { background: rgba(63,168,108,0.1); color: var(--p-green); border: 1px solid rgba(63,168,108,0.25); }
.btn-export-sm:hover { background: var(--p-green); color: var(--p-white); }
.btn-primary-sm { background: var(--p-grad-brand); color: var(--p-white); box-shadow: 0 4px 14px rgba(31,91,157,0.3); }
.btn-primary-sm:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(31,91,157,0.4); }

.admin-panel { display: none; }
.admin-panel.active { display: block; animation: fadeInUp 0.3s ease; }

/* ─── Búsqueda empleados ─── */
.emp-search-wrap {
    display: flex; align-items: center; gap: 8px;
    background: var(--p-white);
    border: 1px solid var(--p-gray-200);
    border-radius: var(--p-radius-sm);
    padding: 0 12px;
    height: 36px;
}
.emp-search-wrap i { color: var(--p-gray-400); font-size: 0.8rem; }
.emp-search-input { border: none; outline: none; font-family: 'Poppins', sans-serif; font-size: 0.78rem; color: var(--p-gray-800); width: 180px; }

/* ─── Cards de empleados ─── */
.emp-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}
.emp-card {
    background: var(--p-white);
    border: 1px solid var(--p-gray-200);
    border-radius: var(--p-radius);
    padding: 20px;
    box-shadow: var(--p-shadow-sm);
    transition: all var(--p-trans);
    position: relative;
    overflow: hidden;
}
.emp-card:hover { transform: translateY(-3px); box-shadow: var(--p-shadow); border-color: rgba(31,91,157,0.2); }
.emp-card--inactive { opacity: 0.6; }
.emp-card-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.emp-card-avatar {
    width: 50px; height: 50px;
    border-radius: 14px;
    background: var(--p-grad-brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 700; color: var(--p-white);
    flex-shrink: 0;
}
.emp-card-avatar--admin { background: var(--p-grad-green); }
.emp-card-info { flex: 1; min-width: 0; }
.emp-card-name { font-size: 0.9rem; font-weight: 700; color: var(--p-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-card-cargo { font-size: 0.72rem; color: var(--p-gray-400); }
.emp-card-pin {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    background: var(--p-gray-100);
    border: 1px solid var(--p-gray-200);
    border-radius: 6px;
    padding: 4px 10px;
    color: var(--p-blue);
    font-weight: 700;
    letter-spacing: 2px;
    flex-shrink: 0;
}
.emp-card-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.emp-card-detail {
    display: flex; flex-direction: column;
    font-size: 0.72rem;
}
.emp-card-detail-label { color: var(--p-gray-400); font-weight: 500; margin-bottom: 2px; }
.emp-card-detail-val   { color: var(--p-gray-800); font-weight: 600; }
.emp-card-actions {
    display: flex; gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--p-gray-100);
}
.action-btn {
    flex: 1;
    height: 32px;
    border-radius: var(--p-radius-sm);
    border: 1px solid var(--p-gray-200);
    background: var(--p-gray-50);
    color: var(--p-gray-600);
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    transition: all var(--p-trans);
}
.action-btn:hover { background: var(--p-blue); color: var(--p-white); border-color: var(--p-blue); }
.action-btn.danger:hover { background: var(--p-red); border-color: var(--p-red); }
.action-btn.view-btn:hover { background: var(--p-green); border-color: var(--p-green); }

/* ============================================================
   MODALES
   ============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4,17,31,0.75);
    backdrop-filter: blur(6px);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInUp 0.2s ease;
}
.modal-overlay.open { display: flex; }

.modal-card {
    background: var(--p-white);
    border-radius: var(--p-radius-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--p-shadow-xl);
    animation: fadeInUp 0.25s ease;
}
.modal-card--wide { max-width: 860px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--p-gray-200);
    background: var(--p-gray-50);
}
.modal-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--p-navy);
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-header h3 i { color: var(--p-blue); }
.modal-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--p-gray-200);
    background: transparent;
    color: var(--p-gray-400);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--p-trans);
}
.modal-close:hover { background: var(--p-red); color: var(--p-white); border-color: var(--p-red); }
.modal-body { padding: 24px; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--p-gray-200); }

/* ─── Formulario modal ─── */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--p-gray-600);
    display: flex; align-items: center; gap: 6px;
}
.form-group label i { color: var(--p-blue); font-size: 0.75rem; }
.form-group input,
.form-group select {
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--p-gray-200);
    border-radius: var(--p-radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    color: var(--p-gray-800);
    outline: none;
    transition: border-color var(--p-trans);
    background: var(--p-white);
}
.form-group input:focus, .form-group select:focus { border-color: var(--p-blue); box-shadow: 0 0 0 3px rgba(31,91,157,0.08); }
.form-hint { font-size: 0.68rem; color: var(--p-gray-400); margin-top: 2px; }

.form-group--toggles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}
.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--p-gray-700);
    font-weight: 500;
}
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--p-gray-200);
    border-radius: 22px;
    transition: all var(--p-trans);
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    left: 3px; top: 3px;
    background: var(--p-white);
    border-radius: 50%;
    transition: all var(--p-trans);
    box-shadow: var(--p-shadow-sm);
}
.toggle-switch input:checked + .toggle-slider { background: var(--p-green); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

.btn-cancel {
    height: 40px;
    padding: 0 20px;
    border: 1.5px solid var(--p-gray-200);
    border-radius: var(--p-radius-sm);
    background: var(--p-white);
    color: var(--p-gray-600);
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: all var(--p-trans);
}
.btn-cancel:hover { background: var(--p-gray-100); }
.btn-save {
    height: 40px;
    padding: 0 24px;
    border: none;
    border-radius: var(--p-radius-sm);
    background: var(--p-grad-brand);
    color: var(--p-white);
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: all var(--p-trans);
    box-shadow: 0 4px 14px rgba(31,91,157,0.3);
}
.btn-save:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(31,91,157,0.4); }

/* ============================================================
   TOAST
   ============================================================ */
.p-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: var(--p-navy);
    color: var(--p-white);
    padding: 14px 22px;
    border-radius: var(--p-radius);
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: var(--p-shadow-lg);
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 380px;
}
.p-toast.show { transform: translateY(0); opacity: 1; }
.p-toast.success { background: #1a3c2a; border-color: rgba(63,168,108,0.4); }
.p-toast.success .p-toast-icon { color: var(--p-green); }
.p-toast.error   { background: #3c1a1a; border-color: rgba(231,76,60,0.4); }
.p-toast.error   .p-toast-icon { color: var(--p-red); }
.p-toast.warning { background: #3c2e1a; border-color: rgba(245,197,24,0.4); }
.p-toast.warning .p-toast-icon { color: var(--p-yellow); }
.p-toast-icon    { font-size: 1.1rem; flex-shrink: 0; }
.p-toast-msg     { flex: 1; }

/* ─── Modal ver empleado ─── */
.emp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.emp-detail-section h4 {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--p-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--p-gray-200);
}
.emp-detail-row { display: flex; flex-direction: column; margin-bottom: 10px; }
.emp-detail-label { font-size: 0.7rem; color: var(--p-gray-400); margin-bottom: 2px; }
.emp-detail-val   { font-size: 0.88rem; font-weight: 600; color: var(--p-navy); }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--p-gray-200); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--p-gray-400); }

/* ============================================================
   DASHBOARD INICIO — ADMIN
   ============================================================ */

/* ── Barra de bienvenida ── */
.ai-welcome-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, #04111F 0%, #0d2340 60%, #1F5B9D 100%);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    color: #fff;
}
.ai-welcome-left { display: flex; align-items: center; gap: 16px; }
.ai-welcome-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: #6ED9F0;
    border: 2px solid rgba(110,217,240,0.3);
    flex-shrink: 0;
}
.ai-welcome-text { display: flex; flex-direction: column; gap: 2px; }
.ai-welcome-greeting { font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.ai-welcome-name { font-size: 1.3rem; font-weight: 800; font-family: 'Montserrat', sans-serif; color: #fff; line-height: 1.1; }
.ai-welcome-role { font-size: 0.72rem; color: #6ED9F0; margin-top: 2px; }
.ai-welcome-date {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    text-align: right;
    text-transform: capitalize;
    white-space: nowrap;
}

/* ── KPIs del inicio ── */
.ai-kpis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.ai-kpi-card {
    background: var(--p-white);
    border-radius: 14px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--p-gray-200);
    box-shadow: var(--p-shadow-sm);
    transition: all var(--p-trans);
    cursor: default;
}
.ai-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--p-shadow); }
.ai-kpi-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.ai-kpi-blue   .ai-kpi-icon { background: rgba(31,91,157,0.1);   color: #1F5B9D; }
.ai-kpi-yellow .ai-kpi-icon { background: rgba(245,197,24,0.12); color: #b8860b; }
.ai-kpi-green  .ai-kpi-icon { background: rgba(63,168,108,0.1);  color: #276743; }
.ai-kpi-red    .ai-kpi-icon { background: rgba(231,76,60,0.08);  color: #DC2626; }
.ai-kpi-cyan   .ai-kpi-icon { background: rgba(14,165,233,0.1);  color: #0369a1; }
.ai-kpi-purple .ai-kpi-icon { background: rgba(124,58,237,0.08); color: #6D28D9; }
.ai-kpi-data { display: flex; flex-direction: column; min-width: 0; }
.ai-kpi-val   { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--p-navy); line-height: 1; }
.ai-kpi-label { font-size: 0.68rem; color: var(--p-gray-400); font-weight: 500; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Cuerpo del dashboard ── */
.ai-body { display: flex; flex-direction: column; gap: 20px; }

/* ── Sección genérica ── */
.ai-section { }
.ai-section--card {
    background: var(--p-white);
    border: 1px solid var(--p-gray-200);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--p-shadow-sm);
}
.ai-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1E3B63;
    margin: 0 0 16px;
}
.ai-section-title i { color: #1F5B9D; }
.ai-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; height: 20px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0 6px;
    margin-left: 4px;
}
.ai-badge-yellow { background: rgba(245,197,24,0.15); color: #b8860b; border: 1px solid rgba(245,197,24,0.3); }
.ai-badge-red    { background: rgba(231,76,60,0.1);   color: #DC2626; border: 1px solid rgba(231,76,60,0.25); }

/* ── Accesos rápidos ── */
.ai-shortcuts {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.ai-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 10px;
    background: var(--p-white);
    border: 1px solid var(--p-gray-200);
    border-radius: 14px;
    cursor: pointer;
    transition: all var(--p-trans);
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    box-shadow: var(--p-shadow-sm);
}
.ai-shortcut:hover {
    transform: translateY(-3px);
    box-shadow: var(--p-shadow);
    border-color: #BFDBFE;
    background: #F8FAFC;
    color: #1F5B9D;
}
.ai-shortcut-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.ai-sc-blue   { background: rgba(31,91,157,0.1);   color: #1F5B9D; }
.ai-sc-yellow { background: rgba(245,197,24,0.12); color: #b8860b; }
.ai-sc-green  { background: rgba(63,168,108,0.1);  color: #276743; }
.ai-sc-cyan   { background: rgba(14,165,233,0.1);  color: #0369a1; }
.ai-sc-purple { background: rgba(124,58,237,0.08); color: #6D28D9; }
.ai-sc-red    { background: rgba(231,76,60,0.08);  color: #DC2626; }

/* ── Columnas de alertas ── */
.ai-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ── Lista de alertas ── */
.ai-alert-list { display: flex; flex-direction: column; gap: 8px; }
.ai-alert-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: #94a3b8;
    padding: 16px 12px;
    background: #F8FAFC;
    border-radius: 10px;
}
.ai-alert-empty i { color: #3FA86C; font-size: 1rem; }
.ai-alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #F8FAFC;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    border: 1px solid transparent;
}
.ai-alert-item:hover {
    background: #EFF6FF;
    border-color: #DBEAFE;
    transform: translateX(2px);
}
.ai-alert-item-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.ai-alert-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ai-alert-item-body strong { font-size: 0.82rem; color: #1E3B63; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-alert-item-body span  { font-size: 0.72rem; color: #64748B; }
.ai-alert-item-arrow { color: #CBD5E1; font-size: 0.7rem; flex-shrink: 0; }
.ai-alert-more {
    font-size: 0.75rem;
    color: #64748B;
    text-align: center;
    padding: 6px 0 2px;
}
.ai-alert-more button {
    background: none;
    border: none;
    color: #1F5B9D;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.75rem;
    text-decoration: underline;
}

/* ── Responsive dashboard inicio ── */
@media (max-width: 1300px) {
    .ai-kpis { grid-template-columns: repeat(3, 1fr); }
    .ai-shortcuts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .ai-kpis { grid-template-columns: repeat(2, 1fr); }
    .ai-shortcuts { grid-template-columns: repeat(2, 1fr); }
    .ai-columns { grid-template-columns: 1fr; }
    .ai-welcome-bar { flex-direction: column; align-items: flex-start; }
    .ai-welcome-date { text-align: left; }
}
@media (max-width: 540px) {
    .ai-kpis { grid-template-columns: 1fr 1fr; }
    .ai-shortcuts { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .admin-kpis { grid-template-columns: repeat(3, 1fr); }
    .admin-kpis .kpi-card:nth-child(4),
    .admin-kpis .kpi-card:nth-child(5) { }
}
@media (max-width: 1024px) {
    .emp-layout { grid-template-columns: 1fr; }
    .admin-kpis { grid-template-columns: repeat(2, 1fr); }
    .pnav-center { display: none; }
}

/* ============================================================
   MÓDULO DE HORARIOS — ADMIN
   ============================================================ */

/* Modal ancho especial */
.modal-card--horario {
    max-width: 900px;
    width: 96vw;
}

/* ── Selector de semana en modal horario ── */
.hor-semana-picker-wrap {
    background: linear-gradient(135deg, #EFF6FF, #F8FAFC);
    border: 1.5px solid #BFDBFE;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.hor-semana-picker-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1E3B63;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.hor-semana-picker-label i { color: #1F5B9D; }

/* Las 3 opciones de semana */
.hor-semana-picker-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hor-semana-opt {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 14px;
    background: #fff;
    border: 2px solid #DDE6F0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.18s;
    text-align: left;
}
.hor-semana-opt:hover {
    border-color: #1F5B9D;
    background: #EFF6FF;
    box-shadow: 0 2px 8px rgba(31,91,157,0.12);
}
.hor-semana-opt--active {
    border-color: #1F5B9D;
    background: linear-gradient(135deg, #1E3B63, #1F5B9D);
    box-shadow: 0 4px 14px rgba(31,91,157,0.25);
}
.hor-semana-opt--active:hover {
    background: linear-gradient(135deg, #1E3B63, #1F5B9D);
}

.hor-semana-opt-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1E3B63;
}
.hor-semana-opt--active .hor-semana-opt-label { color: #fff; }

.hor-semana-opt-rango {
    font-size: 0.73rem;
    font-weight: 500;
    color: #64748B;
    font-family: 'Montserrat', sans-serif;
}
.hor-semana-opt--active .hor-semana-opt-rango { color: rgba(255,255,255,0.75); }

/* Hint de fechas exactas */
.hor-semana-picker-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(31,91,157,0.06);
    border-radius: 8px;
    font-size: 0.76rem;
    color: #1E3B63;
    line-height: 1.4;
}
.hor-semana-picker-hint i { color: #1F5B9D; flex-shrink: 0; }
.hor-semana-picker-hint strong { color: #1F5B9D; font-weight: 700; }

/* ── Pie del modal: botón copiar + Observaciones ── */
.hor-modal-pie {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin: 14px 0 4px;
}

.hor-obs-inline {
    flex: 1;
    min-width: 220px;
    margin: 0;
}
.hor-obs-inline label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}
.hor-obs-inline input {
    width: 100%;
    padding: 7px 11px;
    border: 1.5px solid #DDE6F0;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #334155;
    font-family: 'Poppins', sans-serif;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}
.hor-obs-inline input:focus { border-color: #1F5B9D; box-shadow: 0 0 0 2px rgba(31,91,157,0.1); }
.hor-obs-inline input::placeholder { color: #94a3b8; }

/* Responsive del picker */
@media (max-width: 650px) {
    .hor-semana-picker-options { flex-direction: column; }
    .hor-semana-opt { min-width: 0; }
    .hor-modal-pie { flex-direction: column; align-items: stretch; }
}

/* Grid de días */
.hor-dias-grid {
    border: 1.5px solid #DDE6F0;
    border-radius: 12px;
    overflow: hidden;
    font-size: 0.82rem;
}

.hor-dias-header,
.hor-dia-row {
    display: grid;
    grid-template-columns: 90px 60px repeat(6, 1fr);
    align-items: center;
    gap: 0;
}

.hor-dias-header {
    background: linear-gradient(135deg,#1F5B9D,#1E3B63);
    color: #fff;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hor-dias-header span,
.hor-dia-row span { padding: 8px 6px; }

.hor-col-dia   { text-align: left; padding-left: 14px !important; }
.hor-col-activo{ text-align: center; }
.hor-col-hora  { text-align: center; }

.hor-dia-row {
    border-top: 1px solid #EEF2F7;
    transition: background 0.15s;
}
.hor-dia-row:hover { background: #F8FAFC; }

.hor-dia-row.hor-dia--inactive { opacity: 0.45; }

.hor-dia-label {
    font-weight: 700;
    color: #1E3B63;
    font-size: 0.8rem;
}

.hor-time {
    width: 92%;
    padding: 4px 5px;
    border: 1.5px solid #DDE6F0;
    border-radius: 6px;
    font-size: 0.78rem;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    background: #fff;
    color: #1E3B63;
    font-weight: 600;
    outline: none;
    transition: border-color 0.15s, opacity 0.2s;
}
.hor-time:focus { border-color: #1F5B9D; box-shadow: 0 0 0 2px rgba(31,91,157,0.15); }
.hor-time:disabled { background: #F1F5F9; color: #94a3b8; cursor: not-allowed; }

.hor-activo-chk {
    width: 16px; height: 16px;
    cursor: pointer;
    accent-color: #3FA86C;
}

/* Tabla admin — pills de días */
.hor-dia-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}
.hor-dia-pill--on  { background: #D1FAE5; color: #065F46; }
.hor-dia-pill--off { background: #F1F5F9; color: #94a3b8; }

/* Fila separadora de grupo (empleado) en tabla admin de horarios */
.hor-grupo-row td {
    padding: 6px 12px !important;
    background: #EFF6FF !important;
    color: #1F5B9D;
    font-weight: 700;
    font-size: 0.8rem;
    border-top: 2px solid #DBEAFE !important;
    border-bottom: 1px solid #DBEAFE !important;
}
/* En modo filtrado por empleado, las filas de grupo no se muestran */

/* Badge turno */
.turno-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: capitalize;
    background: linear-gradient(135deg,#1F5B9D22,#1F5B9D11);
    color: #1F5B9D;
    border: 1px solid #1F5B9D44;
}

/* ── Copiar lunes botón ── */
.btn-primary-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg,#1F5B9D,#3FA86C);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: opacity 0.15s;
}
.btn-primary-sm:hover { opacity: 0.88; }

/* ============================================================
   MÓDULO DE HORARIOS — VISTA EMPLEADO
   ============================================================ */

.hor-turno-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: capitalize;
    background: linear-gradient(135deg,#1F5B9D,#3FA86C);
    color: #fff;
}

/* Grid semanal del empleado */
.mi-horario-tabla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 12px 0 8px;
}

.mi-hor-dia {
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid #EEF2F7;
    background: #fff;
    transition: box-shadow 0.15s;
}
.mi-hor-dia:hover { box-shadow: 0 4px 14px rgba(31,91,157,0.10); }

.mi-hor-dia--libre {
    opacity: 0.5;
    background: #F8FAFC;
}
.mi-hor-dia--hoy {
    border-color: #1F5B9D;
    box-shadow: 0 0 0 2px rgba(31,91,157,0.18);
}

.mi-hor-dia-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: linear-gradient(135deg,#EEF2F7,#F8FAFC);
    border-bottom: 1px solid #EEF2F7;
    flex-wrap: wrap;
    gap: 2px;
}
.mi-hor-dia--hoy .mi-hor-dia-header {
    background: linear-gradient(135deg,#1F5B9D,#234A76);
}

.mi-hor-dia-label {
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #1E3B63;
}
.mi-hor-dia--hoy .mi-hor-dia-label { color: #fff; }

.mi-hor-hoy-badge {
    font-size: 0.6rem;
    font-weight: 700;
    background: #3FA86C;
    color: #fff;
    padding: 1px 6px;
    border-radius: 8px;
}
.mi-hor-libre-badge {
    font-size: 0.6rem;
    color: #94a3b8;
    font-weight: 600;
}

.mi-hor-dia-body {
    padding: 6px 7px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mi-hor-row {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 0.72rem;
}
.mi-hor-row i {
    margin-top: 2px;
    font-size: 0.65rem;
    width: 13px;
    flex-shrink: 0;
}
.mi-hor-row--entrada i   { color: #3FA86C; }
.mi-hor-row--descanso i  { color: #F59E0B; }
.mi-hor-row--almuerzo i  { color: #EF4444; }
.mi-hor-row--salida i    { color: #1F5B9D; }

.mi-hor-row div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.mi-hor-tipo {
    font-size: 0.58rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.mi-hor-row strong {
    color: #1E3B63;
    font-weight: 700;
    font-size: 0.73rem;
}

.mi-hor-obs {
    margin: 10px 0 4px;
    padding: 8px 12px;
    background: #EFF6FF;
    border-left: 3px solid #1F5B9D;
    border-radius: 0 8px 8px 0;
    font-size: 0.78rem;
    color: #1E3B63;
}
.mi-hor-obs i { margin-right: 5px; }

.mi-hor-vigencia {
    padding: 6px 0 2px;
    font-size: 0.73rem;
    color: #94a3b8;
    text-align: right;
}
.mi-hor-vigencia strong { color: #475569; }

/* Responsive horario empleado */
@media (max-width: 900px) {
    .mi-horario-tabla { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
    .mi-horario-tabla { grid-template-columns: repeat(2, 1fr); }
    .hor-dias-grid,
    .hor-dias-header,
    .hor-dia-row { font-size: 0.7rem; }
    .hor-dias-header,
    .hor-dia-row { grid-template-columns: 70px 46px repeat(6, 1fr); }
    .modal-card--horario { max-width: 100vw; }
}
@media (max-width: 768px) {
    .portal-body { padding: 16px; }
    .admin-kpis  { grid-template-columns: 1fr 1fr; }
    .portal-nav  { padding: 0 16px; }
    .form-row-2, .form-row-3 { grid-template-columns: 1fr; }
    .emp-cards-grid { grid-template-columns: 1fr; }
    .admin-actions-bar { flex-direction: column; align-items: flex-start; }
    .admin-actions-right { width: 100%; flex-wrap: wrap; }
    .filter-group-inline { flex-direction: column; align-items: flex-start; width: 100%; }
    .filter-input-sm { min-width: unset; width: 100%; }
}
@media (max-width: 480px) {
    .login-card { padding: 28px 20px; }
    .admin-kpis { grid-template-columns: 1fr; }
    .fichar-grid { grid-template-columns: 1fr 1fr; }
    .ts-timers-row { grid-template-columns: 1fr 1fr; }
    .pnav-right .pnav-user { display: none; }
    .perm-layout { flex-direction: column; }
    .perm-left, .perm-right { min-width: 0; }
    .perm-tabs { flex-direction: column; }
    .pform-row { flex-direction: column; }
}

/* ============================================================
   MÓDULO PERMISOS E INCAPACIDADES
   ============================================================ */

/* Layout de la pantalla de permisos */
.perm-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 28px 32px;
    background: var(--p-gray-50);
    flex: 1;
    overflow-y: auto;
    min-height: calc(100vh - var(--p-nav-h));
}
.perm-left {
    flex: 1.2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.perm-right {
    flex: 0 0 340px;
    min-width: 280px;
}

/* Tabs internos de permisos */
.perm-tabs {
    display: flex;
    gap: 10px;
    background: #fff;
    border-radius: var(--p-radius);
    padding: 6px;
    box-shadow: var(--p-shadow-sm);
}
.perm-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--p-gray-600);
    font-family: 'Poppins', sans-serif;
    font-size: 0.83rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--p-trans);
}
.perm-tab:hover {
    background: var(--p-gray-100);
    color: var(--p-navy);
}
.perm-tab.active {
    background: var(--p-grad-brand);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(63,168,108,0.35);
}
.perm-tab[data-ptab="incapacidad"].active {
    background: linear-gradient(135deg, #1F5B9D 0%, #6ED9F0 100%);
    box-shadow: 0 3px 12px rgba(110,217,240,0.35);
}

/* Paneles de formulario */
.perm-panel { display: none; }
.perm-panel.active { display: block; }

/* Tarjeta del formulario */
.perm-form-card {
    background: #fff;
    border-radius: var(--p-radius-lg);
    box-shadow: var(--p-shadow);
    overflow: hidden;
}
.perm-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 26px;
    background: linear-gradient(135deg, #f8fafc 0%, #e9f5ef 100%);
    border-bottom: 1px solid var(--p-gray-200);
}
.perm-form-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--p-navy);
    margin-bottom: 3px;
}
.perm-form-header p {
    font-size: 0.78rem;
    color: var(--p-gray-600);
    margin: 0;
}
.perm-form-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    flex-shrink: 0;
}
.perm-icon--permiso {
    background: var(--p-grad-brand);
    box-shadow: 0 4px 14px rgba(63,168,108,0.4);
}
.perm-icon--incapacidad {
    background: var(--p-grad-cyan);
    box-shadow: 0 4px 14px rgba(110,217,240,0.4);
}

/* Formulario interno */
.perm-form {
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pform-row {
    display: flex;
    gap: 14px;
}
.pform-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.pform-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--p-gray-600);
    display: flex;
    align-items: center;
    gap: 5px;
}
.pform-group label i { color: var(--p-blue); font-size: 0.75rem; }
.pform-group input[type="date"],
.pform-group input[type="text"],
.pform-group textarea {
    padding: 9px 13px;
    border: 1.5px solid var(--p-gray-200);
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.87rem;
    color: var(--p-gray-800);
    background: var(--p-gray-50);
    transition: all var(--p-trans);
    outline: none;
}
.pform-group input:focus,
.pform-group textarea:focus {
    border-color: var(--p-green);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(63,168,108,0.12);
}
.pform-group textarea { resize: vertical; min-height: 90px; }
.pform-hint {
    font-size: 0.73rem;
    color: var(--p-gray-400);
}

/* Display de días */
.dias-display {
    padding: 10px 14px;
    background: linear-gradient(135deg, #e9f5ef, #d0f0e0);
    border: 1.5px solid rgba(63,168,108,0.3);
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--p-green);
    text-align: center;
}
.dias-display--incap {
    background: linear-gradient(135deg, #e0f4fb, #c8ebf7);
    border-color: rgba(110,217,240,0.4);
    color: var(--p-cyan-d);
}

/* Aviso informativo */
.perm-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(63,168,108,0.08);
    border: 1px solid rgba(63,168,108,0.2);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.78rem;
    color: #2d7a50;
}
.perm-notice i { color: var(--p-green); flex-shrink: 0; margin-top: 2px; }
.perm-notice--incap {
    background: rgba(31,91,157,0.07);
    border-color: rgba(31,91,157,0.2);
    color: #1a4d7a;
}
.perm-notice--incap i { color: var(--p-blue); }

/* Botón submit */
.perm-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    background: var(--p-grad-brand);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--p-trans);
    box-shadow: 0 4px 16px rgba(63,168,108,0.35);
}
.perm-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(63,168,108,0.5);
}
.perm-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.perm-submit-btn--incap {
    background: var(--p-grad-cyan);
    box-shadow: 0 4px 16px rgba(31,91,157,0.35);
}
.perm-submit-btn--incap:hover {
    box-shadow: 0 6px 22px rgba(31,91,157,0.5);
}

/* Área de carga de archivo */
.file-upload-area {
    border: 2px dashed var(--p-gray-200);
    border-radius: 12px;
    background: var(--p-gray-50);
    cursor: pointer;
    transition: all var(--p-trans);
    overflow: hidden;
}
.file-upload-area:hover {
    border-color: var(--p-blue);
    background: rgba(31,91,157,0.04);
}
.file-upload-inner {
    padding: 28px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.file-upload-inner i {
    font-size: 2rem;
    color: var(--p-blue);
}
.file-upload-inner p {
    font-size: 0.83rem;
    color: var(--p-gray-600);
    margin: 0;
}
.file-upload-inner strong { color: var(--p-blue); }
.file-upload-inner small { font-size: 0.72rem; color: var(--p-gray-400); }

.file-selected {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #e0f4fb, #c8ebf7);
    border-top: 1px solid rgba(110,217,240,0.3);
}
.file-selected i { color: var(--p-blue); font-size: 1.1rem; }
.file-selected span { flex: 1; font-size: 0.82rem; font-weight: 500; color: var(--p-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-remove {
    background: rgba(231,76,60,0.12);
    border: none;
    color: var(--p-red);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all var(--p-trans);
    flex-shrink: 0;
}
.file-remove:hover { background: var(--p-red); color: #fff; }

/* ── Lista de solicitudes (empleado) ── */
.perm-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}
.perm-list-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--p-gray-400);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.perm-list-empty i { font-size: 2rem; }
.perm-list-empty p { font-size: 0.85rem; }

/* Tarjeta de solicitud (empleado) */
.perm-card {
    background: var(--p-gray-50);
    border: 1.5px solid var(--p-gray-200);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all var(--p-trans);
}
.perm-card:hover { border-color: var(--p-blue); background: #fff; }
.perm-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.perm-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #fff;
    flex-shrink: 0;
}
.perm-card-icon--permiso { background: var(--p-grad-brand); }
.perm-card-icon--incap { background: var(--p-grad-cyan); }
.perm-card-meta { flex: 1; }
.perm-card-tipo {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--p-navy);
}
.perm-card-fecha {
    font-size: 0.72rem;
    color: var(--p-gray-400);
}
.perm-status-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}
.perm-status-badge--pendiente  { background: rgba(245,197,24,0.15);  color: #b8860b; border: 1px solid rgba(245,197,24,0.3); }
.perm-status-badge--aprobado   { background: rgba(63,168,108,0.13);  color: #276743; border: 1px solid rgba(63,168,108,0.3); }
.perm-status-badge--rechazado  { background: rgba(231,76,60,0.12);   color: #a93226; border: 1px solid rgba(231,76,60,0.25); }
/* Solo visible para admin/RRHH — el empleado nunca ve este badge */
.perm-status-badge--archivado  { background: rgba(100,116,139,0.12); color: #475569; border: 1px solid rgba(100,116,139,0.25); }

.perm-card-dias {
    font-size: 0.78rem;
    color: var(--p-gray-600);
}
.perm-card-dias strong { color: var(--p-navy); }
.perm-card-obs {
    font-size: 0.76rem;
    color: var(--p-gray-600);
    background: var(--p-gray-100);
    border-radius: 8px;
    padding: 6px 10px;
    font-style: italic;
}

/* ── Botón "Más info" en tarjetas de solicitudes ── */
.perm-mas-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 4px 11px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #0284C7;
    background: #EFF6FF;
    border: 1px solid #BAE6FD;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.perm-mas-info-btn:hover {
    background: #DBEAFE;
    color: #0369A1;
}
.perm-mas-info-text {
    margin-top: 7px;
    font-size: 0.78rem;
    color: #475569;
    background: #F8FAFF;
    border: 1px solid #DDE6F0;
    border-radius: 8px;
    padding: 8px 12px;
    line-height: 1.5;
    word-break: break-word;
}

/* ── Lista admin de permisos ── */
.admin-perm-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.admin-perm-card {
    background: #fff;
    border-radius: var(--p-radius);
    box-shadow: var(--p-shadow-sm);
    border: 1.5px solid var(--p-gray-200);
    padding: 18px 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: all var(--p-trans);
}
.admin-perm-card:hover {
    border-color: var(--p-blue);
    box-shadow: var(--p-shadow);
}
.admin-perm-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}
.admin-perm-card-body { flex: 1; min-width: 0; }
.admin-perm-card-row1 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.admin-perm-emp-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--p-navy);
}
.admin-perm-tipo {
    font-size: 0.75rem;
    color: var(--p-gray-600);
    background: var(--p-gray-100);
    padding: 2px 8px;
    border-radius: 20px;
}
.admin-perm-card-dates {
    font-size: 0.8rem;
    color: var(--p-gray-600);
    margin-bottom: 5px;
}
.admin-perm-card-dates strong { color: var(--p-navy); }
.admin-perm-card-motivo {
    font-size: 0.78rem;
    color: var(--p-gray-600);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.admin-perm-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    flex-shrink: 0;
}
.btn-revisar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    background: var(--p-grad-brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.77rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--p-trans);
    white-space: nowrap;
}
.btn-revisar:hover { opacity: 0.85; transform: translateY(-1px); }

/* Botón archivar permiso */
.btn-archivar-perm {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(245, 158, 11, 0.1);
    color: #B45309;
    border: 1.5px solid rgba(245, 158, 11, 0.35);
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--p-trans);
    white-space: nowrap;
}
.btn-archivar-perm:hover {
    background: rgba(245, 158, 11, 0.2);
    transform: translateY(-1px);
}

/* Botón eliminar permiso */
.btn-eliminar-perm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(231, 76, 60, 0.08);
    color: var(--p-red);
    border: 1.5px solid rgba(231, 76, 60, 0.25);
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--p-trans);
    align-self: flex-end;
}
.btn-eliminar-perm:hover {
    background: rgba(231, 76, 60, 0.18);
    border-color: var(--p-red);
    transform: translateY(-1px);
}

/* Badge archivado */
.perm-status-badge--archivado {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.25);
}

/* Tab badge de notificación */
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--p-red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    margin-left: 4px;
    animation: pulse-badge 1.5s infinite;
}
@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.2); }
}

/* Modal detalle permiso */
#permDetailView { display: flex; flex-direction: column; gap: 12px; }
.perm-detail-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.perm-detail-item {
    flex: 1;
    min-width: 140px;
    background: var(--p-gray-50);
    border-radius: 10px;
    padding: 10px 14px;
}
.perm-detail-item label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--p-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 3px;
}
.perm-detail-item span {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--p-navy);
}
/* Sección Motivo/Diagnóstico en modal */
.perm-motivo-section {
    margin-top: 4px;
}
.perm-motivo-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--p-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.perm-motivo-box {
    background: var(--p-gray-50);
    border-left: 3px solid var(--p-blue);
    border-radius: 0 10px 10px 0;
    padding: 14px 16px;
    font-size: 0.87rem;
    color: var(--p-gray-800);
    line-height: 1.7;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-height: 180px;
    overflow-y: auto;
}

/* Botón rechazar en modal */
.btn-rechazar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: rgba(231,76,60,0.1);
    border: 1.5px solid rgba(231,76,60,0.3);
    color: var(--p-red);
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--p-trans);
}
.btn-rechazar:hover {
    background: var(--p-red);
    border-color: var(--p-red);
    color: #fff;
}

/* ============================================================
   MÓDULO: POSTULACIONES (Admin) — Kanban
   ============================================================ */
.tab-badge--green { background: var(--p-green) !important; }

/* ── Resumen por cargo ── */
.postul-cargo-resumen { margin-bottom: 20px; }

.postul-cargo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 2px 0 6px;
}

.cargo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 12px 18px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.18s;
    min-width: 110px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cargo-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--cargo-color, #6366F1);
    opacity: 0;
    transition: opacity 0.18s;
}
.cargo-card:hover,
.cargo-card.active {
    border-color: var(--cargo-color, #6366F1);
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.cargo-card:hover::before,
.cargo-card.active::before { opacity: 1; }
.cargo-card.active { background: #f8faff; }

.cargo-card--total { --cargo-color: #334155; }
.cargo-card--total .cargo-card-num { color: #334155; }

.cargo-card-num {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--cargo-color, #334155);
}
.cargo-card-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.3;
    max-width: 120px;
}
.cargo-card-nuevas {
    font-size: 0.66rem;
    color: #94a3b8;
    margin-top: 1px;
}
.cargo-badge-new {
    color: #D97706 !important;
    font-weight: 700;
}

/* ── Loading / Empty ── */
.postul-loading, .postul-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 60px 20px;
    color: #94a3b8; gap: 14px; text-align: center;
}
.postul-empty i  { font-size: 2.5rem; opacity: 0.4; }
.postul-empty p  { font-size: 0.9rem; margin: 0; }

/* ── Kanban board ── */
.postul-kanban {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 24px;
    align-items: flex-start;
    min-height: 300px;
}
.postul-kanban::-webkit-scrollbar { height: 6px; }
.postul-kanban::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── Columna Kanban ── */
.kanban-col {
    flex: 0 0 280px;
    min-width: 260px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e8edf5;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 280px);
}
.kanban-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 10px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid #e8edf5;
    position: sticky; top: 0; z-index: 1;
}
.kanban-col-icon { font-size: 0.9rem; flex-shrink: 0; }
.kanban-col-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    flex: 1;
}
.kanban-col-count {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    flex-shrink: 0;
}
.kanban-col-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kanban-col-body::-webkit-scrollbar { width: 4px; }
.kanban-col-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.kanban-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 28px 10px; color: #cbd5e1; font-size: 0.8rem;
}
.kanban-empty i { font-size: 1.5rem; }

/* ── Lista filtrada ── */
.postul-list-filtered {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 4px 0 24px;
}

/* ── Card ── */
.postul-card {
    background: #fff;
    border: 1.5px solid #e8edf5;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
    display: flex; flex-direction: column;
}
.postul-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

/* Borde izquierdo por estado */
.postul-estado-nueva             { border-left: 3px solid #6366F1; }
.postul-estado-en_revision       { border-left: 3px solid #F59E0B; }
.postul-estado-proceso_seleccion { border-left: 3px solid #3B82F6; }
.postul-estado-seleccionada      { border-left: 3px solid #10B981; }
.postul-estado-descartada        { border-left: 3px solid #EF4444; opacity: 0.72; }

.postul-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 13px 10px;
    border-bottom: 1px solid #f0f4f8;
}
.postul-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--p-blue), var(--p-green));
    color: #fff; font-size: 1rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.postul-info { flex: 1; min-width: 0; }
.postul-nombre {
    font-size: 0.88rem; font-weight: 700; color: var(--p-navy);
    margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.postul-cargo-tag {
    font-size: 0.68rem;
    color: var(--p-blue);
    background: rgba(31,91,157,0.09);
    border: 1px solid rgba(31,91,157,0.2);
    border-radius: 20px;
    padding: 2px 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.postul-estado-badge {
    font-size: 0.66rem; font-weight: 700; padding: 3px 8px;
    border-radius: 20px; display: flex; align-items: center;
    gap: 4px; white-space: nowrap; flex-shrink: 0;
}

.postul-card-body {
    padding: 11px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.postul-detail {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.78rem; color: #475569;
}
.postul-detail i { width: 13px; color: var(--p-blue); flex-shrink: 0; }
.postul-detail a { color: var(--p-blue); text-decoration: none; }
.postul-detail a:hover { text-decoration: underline; }
/* .postul-mensaje legacy — reemplazado por "Más info" desplegable */
.postul-mensaje { display: none; }

/* Ajuste específico del texto desplegable dentro de ficha de postulación */
.postul-mas-info-text {
    font-style: italic;
    border-left: 3px solid #BAE6FD;
    background: #F0F9FF;
}
.postul-cv-row { margin-top: 4px; }
.postul-cv-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.74rem; color: var(--p-blue);
    background: rgba(31,91,157,0.07); border: 1px solid rgba(31,91,157,0.2);
    border-radius: 7px; padding: 4px 10px; cursor: pointer; font-family: inherit;
    transition: all 0.2s; max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.postul-cv-btn:hover { background: var(--p-blue); color: #fff; }
.postul-no-cv { font-size: 0.74rem; color: #94a3b8; }

/* ── Acciones ── */
.postul-card-actions {
    display: flex; gap: 5px; padding: 9px 13px 12px;
    border-top: 1px solid #f0f4f8; flex-wrap: wrap;
}
/* Base */
.postul-action-btn {
    flex: 1; min-width: 60px; padding: 5px 7px;
    border: 1.5px solid transparent; border-radius: 8px;
    font-size: 0.68rem; font-weight: 700; cursor: pointer;
    font-family: inherit; display: flex; align-items: center;
    justify-content: center; gap: 4px; transition: all 0.18s;
    white-space: normal; word-break: break-word;
    text-align: center; line-height: 1.25; letter-spacing: 0;
}

/* ── En Revisión — Ámbar Mapanet ── */
.postul-btn-revision {
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.55);
    color: #B45309;
}
.postul-btn-revision:hover {
    background: #F59E0B; border-color: #F59E0B; color: #fff;
    box-shadow: 0 2px 8px rgba(245,158,11,0.35);
    transform: translateY(-1px);
}

/* ── Proceso de Selección / Volver a Proceso — Azul Mapanet ── */
.postul-btn-proceso {
    background: rgba(31,91,157,0.1);
    border-color: rgba(31,91,157,0.45);
    color: #1F5B9D;
}
.postul-btn-proceso:hover {
    background: #1F5B9D; border-color: #1F5B9D; color: #fff;
    box-shadow: 0 2px 8px rgba(31,91,157,0.35);
    transform: translateY(-1px);
}

/* ── Seleccionar — Verde Mapanet ── */
.postul-btn-seleccionar {
    background: rgba(63,168,108,0.1);
    border-color: rgba(63,168,108,0.5);
    color: #2D7A54;
}
.postul-btn-seleccionar:hover {
    background: #3FA86C; border-color: #3FA86C; color: #fff;
    box-shadow: 0 2px 8px rgba(63,168,108,0.35);
    transform: translateY(-1px);
}

/* ── Restaurar (volver) — Azul Navy Mapanet ── */
.postul-btn-restaurar {
    background: rgba(7,28,58,0.07);
    border-color: rgba(7,28,58,0.3);
    color: #071C3A;
}
.postul-btn-restaurar:hover {
    background: #071C3A; border-color: #071C3A; color: #fff;
    transform: translateY(-1px);
}

/* ── Descartar — Rojo suave ── */
.postul-btn-descartar {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.4);
    color: #DC2626;
}
.postul-btn-descartar:hover {
    background: #EF4444; border-color: #EF4444; color: #fff;
    box-shadow: 0 2px 8px rgba(239,68,68,0.3);
    transform: translateY(-1px);
}

/* ── Eliminar — solo icono, discreto ── */
.postul-btn-eliminar {
    flex: 0 0 34px !important;
    min-width: 34px !important;
    max-width: 34px;
    padding: 6px !important;
    white-space: nowrap;
    word-break: normal;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #94a3b8;
}
.postul-btn-eliminar:hover {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.45);
    color: #DC2626;
    transform: translateY(-1px);
}
/* Botón exportar Excel */
.btn-export-excel {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #166534;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: all 0.18s;
    white-space: nowrap;
}
.btn-export-excel:hover {
    background: #15803d;
    box-shadow: 0 3px 10px rgba(22,101,52,0.3);
    transform: translateY(-1px);
}
.btn-export-excel i { font-size: 0.85rem; }

@media (max-width: 700px) {
    .postul-kanban { flex-direction: column; }
    .kanban-col    { flex: none; min-width: 100%; max-height: none; }
    .postul-list-filtered { grid-template-columns: 1fr; }
}

/* ============================================================
   PANTALLA DE BIENVENIDA — EMPLEADO
   ============================================================ */
.welcome-screen {
    position: relative;
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #04111F 0%, #071C3A 50%, #0d2850 100%);
}
.welcome-bg-orbs { position: absolute; inset: 0; pointer-events: none; }
.w-orb {
    position: absolute;
    border-radius: 50%;
    opacity: 0.12;
    animation: drift 10s ease-in-out infinite alternate;
}
.w-orb1 {
    width: 380px; height: 380px;
    top: -100px; left: -120px;
    background: radial-gradient(circle, #3FA86C, transparent);
}
.w-orb2 {
    width: 320px; height: 320px;
    bottom: -80px; right: -80px;
    background: radial-gradient(circle, #1F5B9D, transparent);
    animation-delay: -5s;
}
@keyframes drift {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(20px,20px) scale(1.05); }
}
.welcome-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: fadeUp 0.6s ease;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.welcome-avatar {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1F5B9D, #3FA86C);
    color: #fff;
    font-size: 2.4rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(63,168,108,0.35);
    margin-bottom: 8px;
}
.welcome-greeting {
    color: #76B8D6;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}
.welcome-name {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
}
.welcome-cargo {
    color: #94a3b8;
    font-size: 0.95rem;
    margin: 0;
}
.welcome-date {
    color: #3FA86C;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 4px;
    padding: 6px 16px;
    background: rgba(63,168,108,0.1);
    border: 1px solid rgba(63,168,108,0.25);
    border-radius: 999px;
}
/* Tarjetas de acceso rápido */
.welcome-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 480px;
    margin-top: 28px;
}
.welcome-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.22s ease;
    text-decoration: none;
    position: relative;
}
.welcome-card:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    transform: translateX(4px);
}
.welcome-card-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.wc-blue   { background: rgba(31,91,157,0.3);  color: #76B8D6; }
.wc-yellow { background: rgba(245,158,11,0.2);  color: #F59E0B; }
.wc-green  { background: rgba(63,168,108,0.25); color: #3FA86C; }

.welcome-card-info { flex: 1; text-align: left; }
.welcome-card-info strong { display: block; color: #fff; font-size: 0.92rem; }
.welcome-card-info span   { color: #94a3b8; font-size: 0.78rem; }
.welcome-card-arrow { color: #64748b; font-size: 0.75rem; }
.welcome-card-badge {
    background: #3FA86C;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ── Tabs empleado en navbar ── */
.emp-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
}
.emp-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,0.65);
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s;
    position: relative;
    white-space: nowrap;
}
.emp-tab:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.emp-tab.active {
    background: linear-gradient(135deg,#1F5B9D,#234A76);
    color: #fff;
    box-shadow: 0 3px 10px rgba(31,91,157,0.35);
}
.emp-tab-badge {
    position: absolute;
    top: 3px; right: 3px;
    min-width: 14px; height: 14px;
    background: #EF4444;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}
/* Panels del empleado */
.emp-panel { display: none; }
.emp-panel.active { display: block; }

/* ── Navbar empleado (portal-nav--emp) ── */
.portal-nav--emp .pnav-center { flex: 1; display: flex; justify-content: center; overflow: visible; }
.portal-nav--emp { overflow: visible; }

/* ── Módulo asistencia: panel-cards en tono oscuro ── */
#etab-asistencia .panel-card,
#etab-asistencia .admin-card {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
#etab-asistencia .panel-card-header {
    background: rgba(255,255,255,0.04);
    border-bottom-color: rgba(255,255,255,0.08);
}
#etab-asistencia .panel-card-title {
    color: var(--p-white);
}
#etab-asistencia .panel-card-title i { color: var(--p-cyan); }
#etab-asistencia .hc-fecha,
#etab-asistencia .btn-sm-outline { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.15); }
#etab-asistencia .btn-sm-outline:hover { background: rgba(255,255,255,0.08); color: #fff; }
#etab-asistencia .hc-event { background: rgba(255,255,255,0.04); }
#etab-asistencia .hc-event:hover { background: rgba(255,255,255,0.08); }
#etab-asistencia .hc-event-tipo { color: rgba(255,255,255,0.85); }
#etab-asistencia .hc-event-hora { color: rgba(255,255,255,0.4); }
#etab-asistencia .hc-event-time { color: rgba(255,255,255,0.7); }
#etab-asistencia .hc-empty { color: rgba(255,255,255,0.35); }
/* Tabla semana */
#etab-asistencia .portal-table thead tr { background: rgba(255,255,255,0.05); }
#etab-asistencia .portal-table th { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.08); }
#etab-asistencia .portal-table td { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.06); }
#etab-asistencia .portal-table tbody tr:hover { background: rgba(255,255,255,0.05); }
#etab-asistencia .table-empty { color: rgba(255,255,255,0.35); }

/* ============================================================
   MÓDULO HORARIOS — VISTA EMPLEADO
   ============================================================ */

/* Contenedor principal — fondo claro (coherente con Permisos y Nómina) */
#etab-horarios {
    background: var(--p-gray-50, #F8FAFC);
    min-height: calc(100vh - var(--p-nav-h));
}

.hor-emp-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 32px 48px;
}

/* ── Encabezado del módulo ── */
.hor-emp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #1E3B63 0%, #0EA5E9 100%);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(14,165,233,0.18);
}

.hor-emp-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hor-emp-header-icon {
    width: 52px; height: 52px;
    background: rgba(255,255,255,0.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    flex-shrink: 0;
}

.hor-emp-header-title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
}

.hor-emp-header-sub {
    color: rgba(255,255,255,0.65);
    font-size: 0.8rem;
    margin: 2px 0 0;
}

.hor-emp-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Badge de turno en encabezado */
.hor-emp-turno-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.3px;
    backdrop-filter: blur(4px);
}

/* Botón Actualizar en fondo claro */
#etab-horarios .btn-sm-outline {
    background: #fff;
    color: #1E3B63;
    border-color: #DDE6F0;
}
#etab-horarios .btn-sm-outline:hover {
    background: #1F5B9D;
    color: #fff;
    border-color: #1F5B9D;
}

/* ── Secciones internas ── */
.hor-emp-section {
    animation: fadeIn 0.25s ease;
}

/* ── Barra de navegación de semana ── */
.hor-semana-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid #EEF2F7;
}

.hor-semana-nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hor-semana-nav-left > i {
    color: #1F5B9D;
    font-size: 1rem;
}

.hor-semana-nav-title {
    color: #1E3B63;
    font-size: 1rem;
    font-weight: 700;
}

/* Badge de rango de fechas (ej: "Del 20 abril al 26 de abril") */
.hor-semana-rango-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #FFF7ED;
    border: 1.5px solid #FED7AA;
    border-radius: 8px;
    color: #9A3412;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Controles derecha: flechas + label */
.hor-semana-nav-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hor-semana-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    min-width: 110px;
    text-align: center;
}

.hor-semana-btn {
    width: 32px; height: 32px;
    border: 1.5px solid #DDE6F0;
    border-radius: 8px;
    background: #fff;
    color: #1E3B63;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    transition: all 0.15s;
}
.hor-semana-btn:hover:not(:disabled) {
    background: #1F5B9D;
    border-color: #1F5B9D;
    color: #fff;
    box-shadow: 0 2px 8px rgba(31,91,157,0.25);
}
.hor-semana-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Badge de horario programado (semana siguiente) */
.mi-hor-programado-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: #EFF6FF;
    border: 1.5px solid #BFDBFE;
    border-radius: 10px;
    color: #1D4ED8;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 14px;
}
.mi-hor-programado-badge i { color: #3B82F6; }

/* ── Tarjetas de días ── */
#etab-horarios .mi-hor-dia {
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(30,59,99,0.06);
    transition: box-shadow 0.15s;
}

#etab-horarios .mi-hor-dia:hover {
    box-shadow: 0 4px 16px rgba(30,59,99,0.12);
}

#etab-horarios .mi-hor-dia--libre {
    background: #F8FAFC;
    border-color: #EEF2F7;
    opacity: 0.65;
}

#etab-horarios .mi-hor-dia--hoy {
    border-color: #1F5B9D;
    box-shadow: 0 0 0 2.5px rgba(31,91,157,0.2);
}

#etab-horarios .mi-hor-dia-header {
    background: linear-gradient(135deg, #EEF2F7, #F8FAFC);
    border-bottom: 1px solid #EEF2F7;
    padding: 7px 9px 5px;
}

#etab-horarios .mi-hor-dia--hoy .mi-hor-dia-header {
    background: linear-gradient(135deg,#1F5B9D,#234A76);
}

/* Número de fecha en la tarjeta */
.mi-hor-dia-header-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.mi-hor-dia-numfecha {
    font-size: 0.6rem;
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
}

#etab-horarios .mi-hor-dia--hoy .mi-hor-dia-numfecha { color: rgba(255,255,255,0.6); }

.mi-hor-dia-header-badges {
    display: flex;
    gap: 4px;
    margin-top: 3px;
}

#etab-horarios .mi-hor-dia-label { color: #1E3B63; font-size: 0.72rem; }
#etab-horarios .mi-hor-dia--hoy .mi-hor-dia-label { color: #fff; }

/* ── Cuerpo de cada día: filas de jornada ── */
#etab-horarios .mi-hor-dia-body {
    padding: 8px 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#etab-horarios .mi-hor-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Icono circular por tipo de jornada */
.mi-hor-icono {
    width: 24px; height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.65rem;
}
.mi-hor-icono--entrada  { background: #DCFCE7; color: #16a34a; }
.mi-hor-icono--descanso { background: #FEF3C7; color: #D97706; }
.mi-hor-icono--almuerzo { background: #FEE2E2; color: #DC2626; }
.mi-hor-icono--salida   { background: #DBEAFE; color: #1D4ED8; }

.mi-hor-data {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* Etiqueta de tipo (ENTRADA, DESCANSO…) */
.mi-hor-tipo {
    font-size: 0.56rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* Hora con tipografía destacada */
.mi-hor-hora {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1E3B63;
    font-family: 'Montserrat', sans-serif;
}

#etab-horarios .mi-hor-obs {
    background: #EFF6FF;
    border-left: 3px solid #1F5B9D;
    border-radius: 0 8px 8px 0;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: #1E3B63;
    margin: 10px 0 4px;
}
#etab-horarios .mi-hor-obs i { margin-right: 5px; color: #1F5B9D; }

#etab-horarios .mi-hor-vigencia {
    padding: 6px 0 2px;
    font-size: 0.73rem;
    color: #94a3b8;
    text-align: right;
}
#etab-horarios .mi-hor-vigencia strong { color: #475569; }

#etab-horarios .hc-empty { color: #94a3b8; }

#etab-horarios .mi-hor-dia-label { color: #1E3B63; }
#etab-horarios .mi-hor-dia--hoy .mi-hor-dia-label { color: #fff; }
#etab-horarios .mi-hor-tipo { color: #94a3b8; }
#etab-horarios .mi-hor-row strong { color: #1E3B63; }

#etab-horarios .mi-hor-obs {
    background: #EFF6FF;
    border-left-color: #1F5B9D;
    color: #1E3B63;
}

#etab-horarios .mi-hor-vigencia { color: #94a3b8; }
#etab-horarios .mi-hor-vigencia strong { color: #475569; }

#etab-horarios .hc-empty { color: #94a3b8; }

/* ── Tabla equipo del día ── */
.hor-equipo-filtros {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.hor-equipo-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1.5px solid #E2E8F0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(30,59,99,0.07);
}

.hor-equipo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    background: #fff;
}

.hor-equipo-table thead tr {
    background: linear-gradient(135deg, #1E3B63, #1F5B9D);
}

.hor-equipo-table th {
    color: rgba(255,255,255,0.82);
    font-weight: 600;
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 10px 12px;
    text-align: left;
    border: none;
    white-space: nowrap;
}

.hor-equipo-table td {
    padding: 9px 12px;
    border-bottom: 1px solid #F1F5F9;
    color: #334155;
    vertical-align: middle;
}

.hor-equipo-table tbody tr:hover {
    background: #F8FAFC;
}

/* Ocultar thead original — los sub-headers van dentro de cada fila de grupo */
.hor-equipo-thead-hidden { display: none; }

/* Fila separadora de grupo por cargo */
.hor-equipo-grupo-row td {
    background: #EFF6FF;
    color: #1F5B9D !important;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px !important;
    border-top: 2px solid #BFDBFE !important;
    border-bottom: 1px solid #DBEAFE !important;
}

.hor-equipo-grupo-row td:first-child i { margin-right: 6px; }

/* Sub-headers de columna en fila de grupo */
.hor-equipo-col-hdr {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748B !important;
    background: #EFF6FF !important;
    text-align: left !important;
    white-space: nowrap;
}
.hor-equipo-col-hdr--entrada  { color: #16a34a !important; }
.hor-equipo-col-hdr--salida   { color: #1D4ED8 !important; }
.hor-equipo-col-hdr--descanso { color: #D97706 !important; }
.hor-equipo-col-hdr--almuerzo { color: #DC2626 !important; }

/* Avatar + nombre */
.hor-equipo-nombre {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hor-equipo-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1F5B9D, #0EA5E9);
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Columna cargo */
.hor-equipo-cargo-cell {
    color: #64748B !important;
    font-size: 0.78rem;
}

/* Horas con monospace y colores semánticos (adaptados a fondo claro) */
.hor-equipo-hora {
    font-family: 'Montserrat', monospace;
    font-weight: 700;
    font-size: 0.8rem;
}
.hor-equipo-hora--entrada  { color: #16a34a !important; }
.hor-equipo-hora--salida   { color: #1D4ED8 !important; }
.hor-equipo-hora--descanso { color: #D97706 !important; }
.hor-equipo-hora--almuerzo { color: #DC2626 !important; }

/* Badges de turno con color semántico (fondo claro) */
.hor-turno-badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #DDE6F0;
    white-space: nowrap;
}
.hor-turno--manana   { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.hor-turno--tarde    { background: #FFEDD5; color: #9A3412; border-color: #FED7AA; }
.hor-turno--noche    { background: #EDE9FE; color: #5B21B6; border-color: #DDD6FE; }
.hor-turno--flexible { background: #E0F2FE; color: #075985; border-color: #BAE6FD; }

/* Nota de solo lectura */
.hor-equipo-nota {
    margin-top: 12px;
    color: #94a3b8;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.hor-equipo-nota i { color: #CBD5E1; }

/* Select filtros en fondo claro */
#etab-horarios .filter-input-sm {
    background: #fff;
    color: #334155;
    border-color: #DDE6F0;
}
#etab-horarios .filter-input-sm:focus {
    border-color: #1F5B9D;
    outline: none;
    box-shadow: 0 0 0 2px rgba(31,91,157,0.1);
}
#etab-horarios .filter-input-sm option {
    background: #fff;
    color: #334155;
}

/* Empty state de tabla */
#etab-horarios .table-empty {
    color: #94a3b8;
    padding: 40px;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.8;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .hor-emp-wrap { padding: 16px 14px 40px; }
    .hor-emp-header { flex-direction: column; align-items: flex-start; }
    .hor-emp-header-right { width: 100%; justify-content: flex-start; }
    .hor-semana-nav { flex-direction: column; align-items: flex-start; }
    .hor-semana-nav-right { align-self: flex-end; }
    .mi-horario-tabla { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
    .hor-equipo-table th:nth-child(2),
    .hor-equipo-table td:nth-child(2) { display: none; }
    .hor-emp-header-title { font-size: 1.05rem; }
    .hor-semana-rango-badge { font-size: 0.68rem; padding: 3px 9px; }
    .mi-horario-tabla { grid-template-columns: repeat(2, 1fr); }
    .hor-semana-nav-right { width: 100%; justify-content: flex-end; }
}

/* ── Animación suave al cargar ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MÓDULO VOLANTES DE NÓMINA — EMPLEADO
   ============================================================ */
/* El panel de nómina del empleado mantiene fondo claro original */
#etab-nomina-emp {
    background: var(--p-gray-50);
    min-height: calc(100vh - var(--p-nav-h));
}
.nomina-emp-wrap {
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.nomina-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}
.nomina-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark, #04111F);
}
.nomina-header-title i {
    font-size: 1.3rem;
    color: #3FA86C;
}
.nomina-header-title h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}
.nomina-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.nomina-table-wrap { overflow-x: auto; }
.nomina-table { min-width: 680px; }

/* Badges estado */
.nomina-estado-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.nomina-estado-publicado { background: #dcfce7; color: #166534; }
.nomina-estado-borrador   { background: #fef3c7; color: #92400e; }
.nomina-estado-pendiente  { background: #e0e7ff; color: #3730a3; }

/* Badge "Nuevo" en fila */
.nomina-new-badge {
    background: #3FA86C;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    animation: pulse-badge 1.5s infinite;
}
.nomina-row-new { background: rgba(63,168,108,0.04); }

/* Ícono de candado */
.nomina-lock-ico { color: #F59E0B; font-size: 0.8rem; }

/* Botones de acción en tabla empleado */
.btn-nomina-accion {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1.5px solid;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    transition: all 0.18s;
    white-space: nowrap;
}
.btn-nomina-preview {
    border-color: #1F5B9D;
    color: #1F5B9D;
}
.btn-nomina-preview:hover {
    background: #1F5B9D;
    color: #fff;
}
.btn-nomina-download {
    border-color: #3FA86C;
    color: #3FA86C;
}
.btn-nomina-download:hover {
    background: #3FA86C;
    color: #fff;
}

/* PDF info en formulario admin */
.nomina-pdf-info {
    margin-top: 8px;
    padding: 8px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #166534;
    font-size: 0.82rem;
    font-weight: 500;
}

/* ============================================================
   MÓDULO VOLANTES DE NÓMINA — ADMIN
   ============================================================ */

/* Sub-tabs del panel admin nómina */
.nomina-admin-subtabs {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    padding: 16px 20px 0;
    background: #fff;
    border-radius: 14px 14px 0 0;
    border: 1px solid #e8edf5;
    border-bottom: none;
}
.nomina-admin-subtab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #64748b;
    font-family: 'Poppins', sans-serif;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    border-radius: 0;
}
.nomina-admin-subtab:hover { color: #1F5B9D; }
.nomina-admin-subtab.active {
    color: #1F5B9D;
    border-bottom-color: #1F5B9D;
}
.nomina-admin-subpanel { display: none; }
.nomina-admin-subpanel.active { display: block; }

/* Botones de acción pequeños en tabla admin */
.btn-xs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: all 0.16s;
    white-space: nowrap;
}
.btn-xs-blue    { background: #dbeafe; color: #1e40af; }
.btn-xs-blue:hover    { background: #bfdbfe; }
.btn-xs-green   { background: #dcfce7; color: #166534; }
.btn-xs-green:hover   { background: #bbf7d0; }
.btn-xs-red     { background: #fee2e2; color: #991b1b; }
.btn-xs-red:hover     { background: #fecaca; }
.btn-xs-gray    { background: #f1f5f9; color: #475569; }
.btn-xs-gray:hover    { background: #e2e8f0; }
.btn-xs-publish { background: linear-gradient(135deg,#3FA86C,#2d9a5c); color: #fff; }
.btn-xs-publish:hover { filter: brightness(1.1); }

/* ============================================================
   RESPONSIVE — PORTAL MÓVIL
   ============================================================ */
@media (max-width: 768px) {
    /* Navbar del empleado */
    .portal-nav--emp { padding: 0 12px; flex-wrap: nowrap; gap: 0; }
    .pnav-left .pnav-logo { height: 28px; }
    .pnav-wordmark-main { font-size: 0.82rem; }
    .pnav-wordmark-sub { display: none; }
    .emp-tab span { display: none; }
    .emp-tab { padding: 7px 12px; }
    .pnav-right .pnav-info { display: none; }
    /* Asistencia en móvil */
    .emp-layout { padding: 16px; gap: 16px; }

    /* Bienvenida */
    .welcome-name { font-size: 1.6rem; }
    .welcome-cards { max-width: 100%; }

    /* Nómina empleado */
    .nomina-header { flex-direction: column; align-items: flex-start; }
    .nomina-filters { width: 100%; }
    .nomina-filters select { flex: 1; }

    /* Admin nómina subtabs */
    .nomina-admin-subtabs { flex-wrap: wrap; gap: 2px; }

    /* Botones xs */
    .btn-xs span { display: none; }
}

@media (max-width: 480px) {
    .welcome-avatar { width: 70px; height: 70px; font-size: 1.8rem; }
    .welcome-name { font-size: 1.3rem; }
    .welcome-content { padding: 28px 16px; }
    .welcome-card { padding: 12px 14px; }
    .emp-tab i { font-size: 1rem; }
}

/* ============================================================
   MÓDULO: VACACIONES
   ============================================================ */

/* ── Nota informativa GTH (formulario empleado) ── */
.vac-nota-gth {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
    border: 1.5px solid #BAE6FD;
    border-left: 4px solid #0EA5E9;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 18px 0;
    font-size: 0.87rem;
    color: #1E3B63;
    line-height: 1.6;
}
.vac-nota-gth-icon {
    width: 36px; height: 36px; min-width: 36px;
    background: linear-gradient(135deg,#0EA5E9,#0284C7);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem;
}
.vac-nota-gth-text { flex: 1; }

/* ── Estación de trabajo RRHH (modal admin) ── */
.vac-rrhh-resumen {
    background: #F8FAFF;
    border: 1.5px solid #DDE6F0;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.vac-rrhh-emp-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #EEF2F7;
}
.vac-rrhh-avatar {
    width: 44px; height: 44px; min-width: 44px;
    background: linear-gradient(135deg,#0EA5E9,#0284C7);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.2rem; font-weight: 700;
}
.vac-rrhh-datos-emp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}
.vac-rrhh-dato {
    font-size: 0.85rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 7px;
}
.vac-rrhh-seccion {
    border: 1.5px solid #DDE6F0;
    border-radius: 12px;
    padding: 18px;
    background: #fff;
    margin-top: 4px;
}
.vac-rrhh-seccion-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1E3B63;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}
.vac-rrhh-saldo-info {
    display: flex; align-items: flex-start; gap: 10px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 9px;
    padding: 12px 14px;
    font-size: 0.84rem;
    color: #1E40AF;
    margin-bottom: 18px;
    line-height: 1.5;
}

/* ── Saldo widget (empleado) ── */
.vac-saldo-card {
    background: linear-gradient(135deg,#0EA5E9 0%,#0284C7 100%);
    border-radius: 16px;
    padding: 22px 24px;
    color: #fff;
    box-shadow: 0 6px 20px rgba(14,165,233,.28);
}
.vac-saldo-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.vac-saldo-title { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.vac-saldo-anio  { font-size: 0.78rem; background: rgba(255,255,255,.18); padding: 3px 10px; border-radius: 20px; }
.vac-saldo-bars  { display: flex; flex-direction: column; gap: 12px; }
.vac-bar-item    { display: flex; align-items: center; gap: 10px; }
.vac-bar-label   { font-size: 0.78rem; width: 110px; opacity: .85; }
.vac-bar-track   { flex: 1; height: 8px; background: rgba(255,255,255,.25); border-radius: 4px; overflow: hidden; }
.vac-bar-fill    { height: 100%; border-radius: 4px; transition: width .6s ease; }
.vac-bar--causados   { background: rgba(255,255,255,.55); }
.vac-bar--disfrutados{ background: #FCD34D; }
.vac-bar--disponible { background: #34D399; }
.vac-bar-val     { font-size: 0.9rem; font-weight: 700; min-width: 28px; text-align: right; }
.vac-bar-val--highlight { color: #34D399; font-size: 1.05rem; }
.vac-saldo-legal { margin-top: 16px; font-size: 0.72rem; opacity: .7; display: flex; align-items: center; gap: 6px; }

/* ── Formulario vacaciones ── */
.vac-compensar-wrap  { padding: 10px 14px; background: #F0F9FF; border-radius: 10px; border: 1.5px solid #BAE6FD; }
.vac-check-label     { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.vac-check-label input[type=checkbox] { width: 16px; height: 16px; accent-color: #0EA5E9; }
.vac-tooltip         { cursor: help; font-size: 1rem; }

/* ── Sub-tabs admin permisos ── */
.admin-subtabs {
    display: flex; gap: 4px; margin-bottom: 22px;
    border-bottom: 2px solid #EEF2F7; padding-bottom: 0;
}
.admin-subtab {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 20px; border: none; background: transparent;
    font-size: 0.87rem; font-weight: 600; color: #64748b;
    cursor: pointer; border-radius: 8px 8px 0 0; position: relative;
    transition: background .15s, color .15s;
}
.admin-subtab:hover { background: #F1F5F9; color: #1E3B63; }
.admin-subtab.active {
    background: #fff; color: #0EA5E9;
    border: 2px solid #EEF2F7; border-bottom: 2px solid #fff;
    margin-bottom: -2px;
}
.admin-subtab-panel { display: none; }
.admin-subtab-panel.active { display: block; }
.badge-subtab {
    background: #EF4444; color: #fff; border-radius: 10px;
    font-size: 0.68rem; font-weight: 700; padding: 1px 6px; line-height: 1.4;
}

/* ── Alertas CST acumulación ── */
.vac-alerta-cst {
    display: flex; align-items: flex-start; gap: 12px;
    background: #FFF7ED; border: 1.5px solid #FCD34D;
    border-left: 4px solid #F59E0B; border-radius: 10px;
    padding: 14px 16px; margin-bottom: 10px; font-size: 0.87rem;
}
.vac-alerta-cst i { color: #F59E0B; font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }

/* ── Cards admin vacaciones ── */
.vac-admin-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    padding: 18px 20px; margin-bottom: 14px;
    transition: box-shadow .2s;
}
.vac-admin-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.vac-admin-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vac-admin-emp { display: flex; align-items: center; gap: 8px; }
.vac-codigo    { font-size: 0.78rem; background: #E2E8F0; color: #475569; padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.vac-estado-badge { font-size: 0.75rem; font-weight: 700; padding: 3px 12px; border-radius: 12px; }
.vac-admin-dates { font-size: 0.88rem; color: #475569; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vac-card-obs  { font-size: 0.82rem; color: #64748b; margin-top: 6px; display: flex; align-items: flex-start; gap: 6px; }
.vac-admin-card-body { border-top: 1px solid #F1F5F9; padding-top: 10px; }
.vac-admin-card-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }
.badge-comp { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; background: #FEF3C7; color: #92400E; padding: 2px 8px; border-radius: 6px; font-weight: 600; margin-top: 6px; }

/* ── Botones acción vacaciones ── */
.btn-vac-resolver  { padding: 7px 16px; background: #0EA5E9; color: #fff; border: none; border-radius: 8px; font-weight: 600; font-size: 0.82rem; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-vac-resolver:hover { background: #0284C7; }
.btn-vac-disfrutar { padding: 7px 14px; background: #3FA86C; color: #fff; border: none; border-radius: 8px; font-weight: 600; font-size: 0.82rem; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.btn-vac-terminar  { padding: 7px 14px; background: #6366F1; color: #fff; border: none; border-radius: 8px; font-weight: 600; font-size: 0.82rem; cursor: pointer; display: flex; align-items: center; gap: 5px; }


/* ── Cards vacaciones (lista solicitudes empleado) ── */
.vac-perm-card { border-left: 4px solid #0EA5E9 !important; }
.vac-perm-card .perm-card-icon { background: linear-gradient(135deg,#0EA5E9,#38BDF8) !important; }

@media (max-width: 768px) {
    .vac-saldo-bars { gap: 10px; }
    .vac-bar-label  { width: 90px; font-size: 0.73rem; }
    .admin-subtabs  { flex-wrap: wrap; }
    .vac-admin-dates  { font-size: 0.8rem; }
}

/* ══════════════════════════════════════════════════════════════
   PANEL SUPERVISOR
   ══════════════════════════════════════════════════════════════ */

/* Navbar del supervisor */
/* ── Panel RRHH (verde esmeralda) ── */
.portal-nav--rrhh {
    background: linear-gradient(135deg, #065F46, #059669);
}
.portal-nav--rrhh .pnav-wordmark-sub { display: none; }
.portal-nav--rrhh .pnav-avatar { width: 32px; height: 32px; font-size: 0.8rem; }
.pnav-avatar--rrhh {
    background: linear-gradient(135deg, #10B981, #34D399);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rrhh-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;
}
.rrhh-tabs::-webkit-scrollbar { display: none; }
.rrhh-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 9px;
    color: rgba(255,255,255,0.80);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, color .18s;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    flex-shrink: 0;
}
.rrhh-tab:hover { background: rgba(255,255,255,0.22); color: #fff; }
.rrhh-tab.active {
    background: rgba(255,255,255,0.95);
    color: #065F46;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.rrhh-panel { display: none; }
.rrhh-panel.active { display: block; }

/* Badge RRHH en tarjetas de empleado */
.estado-rrhh {
    background: rgba(16,185,129,0.12);
    color: #065F46;
    border: 1px solid rgba(16,185,129,0.3);
}
.emp-card-avatar--rrhh {
    background: linear-gradient(135deg, #10B981, #34D399);
    color: #fff;
}

.portal-nav--supervisor {
    background: linear-gradient(135deg, #312E81, #4F46E5);
}
.portal-nav--supervisor .pnav-wordmark-sub { display: none; }
.portal-nav--supervisor .pnav-avatar { width: 32px; height: 32px; font-size: 0.8rem; }

/* Avatar morado para supervisor */
.pnav-avatar--supervisor {
    background: linear-gradient(135deg, #6366F1, #818CF8);
    color: #fff;
}

/* Tabs del supervisor */
.sup-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;
}
.sup-tabs::-webkit-scrollbar { display: none; }
.sup-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 9px;
    color: rgba(255,255,255,0.75);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, color .18s;
    white-space: nowrap;
    flex-shrink: 0;
}
.sup-tab:hover { background: rgba(255,255,255,0.22); color: #fff; }
.sup-tab.active {
    background: rgba(255,255,255,0.95);
    color: #312E81;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

/* Panels del supervisor */
.sup-panel { display: none; }
.sup-panel.active { display: block; }

/* Badge de supervisor en tarjetas de empleado */
.estado-supervisor {
    background: rgba(99,102,241,0.12);
    color: #4338CA;
    border: 1px solid rgba(99,102,241,0.3);
}

/* Avatar de supervisor en cards */
.emp-card-avatar--supervisor {
    background: linear-gradient(135deg, #6366F1, #818CF8);
    color: #fff;
    font-size: 0.9rem;
}

/* Estado pill de horario activo en tabla supervisor */
.hor-dia-pill.hor-dia--activo {
    display: inline-block;
    background: #DCFCE7;
    color: #16A34A;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 5px;
}

/* ══ MÓDULO SEGURIDAD DE RED — ELIMINADO (migrado a CRM) ══
   ip-block-*, seg-header, seg-grid, seg-card, seg-ip-*,
   seg-toggle-*, seg-switch, seg-btn-*, seg-audit, seg-status-*,
   seg-info-box — todos eliminados */