:root{ --fixed-header-space: 0px; }
/* Ocultar caret global salvo en campos editables */
  body *{
    caret-color: transparent !important;
  }
  input,textarea,select{
    caret-color: auto !important;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  
  :root{
    --bg-grad: linear-gradient(135deg,#f0f4ff 0%,#e0e7ff 100%);
    --card-bg:#ffffff;
    --card-inner:#f8fafc;
    --accent:#3b82f6;
    --accent-soft:rgba(59,130,246,.12);
    --danger-soft:rgba(220,38,38,.15);
    --success-soft:rgba(34,197,94,.15);
    --border-subtle:rgba(148,163,184,.35);
    --text-main:#0f172a;
    --text-soft:#475569;
    --table-even:#f8fafc;
    --table-odd:#ffffff;
    --table-hover:rgba(59,130,246,.1);
    --card-gradient:radial-gradient(circle at top,#ffffff 0, #f1f5f9 55%);
    --header-grad:linear-gradient(135deg,#3b82f6,#2563eb);
    --shadow-main:rgba(15,23,42,.1);
    --shadow-hover:rgba(59,130,246,.2);
    --primary:#2b7de9;
    --success:#28a745;
    --info:#2aa0c3;
    --warning:#f39c12;
    --danger:#d23b2d;
    --warning-dark:#e67e22;
    --danger-dark:#b52a20;
    --absent:#e74c3c;
    --vacaciones:#8e44ad;
  }

  [data-theme="dark"]{
    --bg-grad: #020617;
    --card-bg:#020617;
    --card-inner:#0b1220;
    --accent:#3b82f6;
    --accent-soft:rgba(59,130,246,.12);
    --danger-soft:rgba(220,38,38,.15);
    --success-soft:rgba(34,197,94,.15);
    --border-subtle:rgba(148,163,184,.35);
    --text-main:#e5e7eb;
    --text-soft:#9ca3af;
    --table-even:rgba(15,23,42,.6);
    --table-odd:rgba(30,41,59,.4);
    --table-hover:linear-gradient(90deg,rgba(59,130,246,.25),rgba(37,99,235,.15));
    --card-gradient:radial-gradient(circle at top,#1f2937 0, #020617 55%);
    --header-grad:linear-gradient(135deg,#1e3a8a,#1e293b);
    --shadow-main:rgba(0,0,0,.4);
    --shadow-hover:rgba(59,130,246,.3);
  }

  body{
    font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial;
    background:var(--bg-grad);
    min-height:100vh;
    /* Menos "marco" lateral: acercar contenido a los bordes */
    padding:12px 6px;
    color:var(--text-main);
    transition:background .3s ease, color .3s ease;
  }
  
  .container{
    max-width:none;
    width:100%;
    margin:0;
    background:transparent;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
  }
  
  .header{
    background:var(--card-gradient);
    border-radius:18px;
    box-shadow:0 20px 50px var(--shadow-main);
    padding:26px;
    border:1px solid var(--border-subtle);
    margin-bottom:20px;
    transition:background .3s ease, box-shadow .3s ease;
  
  overflow:visible;
}
  
  
   position:relative;
}
.notif-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .notif-badge{
    min-width:18px;
    height:18px;
    border-radius:999px;
    background:var(--danger-soft);
    color:#b91c1c;
    font-size:11px;
    display:none;
    align-items:center;
    justify-content:center;
    padding:0 4px;
  }
  .notif-panel{
    margin-top:8px;
    border-radius:12px;
    border:1px solid var(--border-subtle);
    background:var(--card-inner);
    padding:10px 12px;
    max-width:420px;
  }
  .notif-panel ul{
    list-style:none;
    margin:8px 0 0;
    padding:0;
  }
  .notif-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:6px 2px;
    border-bottom:1px solid rgba(148,163,184,.25);
    font-size:13px;
    color:var(--text-main);
  }
  .notif-item:last-child{
    border-bottom:none;
  }
  .notif-label{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .notif-label span.dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:var(--danger-soft);
  }
  .notif-link{
    border:0;
    background:none;
    color:var(--accent);
    cursor:pointer;
    font-size:12px;
    text-decoration:underline;
  }
.header h1{
    font-size:28px;
    font-weight:800;
    letter-spacing:.02em;
    color:var(--text-main);
    display:flex;
    align-items:center;
    gap:12px;
  }
  
  [data-theme="dark"] .header h1{
    background:linear-gradient(135deg,#e0e7ff,#c7d2fe);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  
  .header p{
    opacity:.9;
    margin-top:4px;
    color:var(--text-soft);
    font-size:14px;
  }
  
  .tabs{
    display:flex;
    background:var(--card-inner);
    border-bottom:1px solid var(--border-subtle);
    overflow-x:auto;
    border-radius:12px 12px 0 0;
    border:1px solid var(--border-subtle);
    border-bottom:none;
    gap:0;
  }
  
  .tab{
    flex:1;
    padding:14px 12px;
    text-align:center;
    background:transparent;
    border:0;
    color:var(--text-soft);
    font-weight:700;
    cursor:pointer;
    transition:.15s;
    min-width:120px;
    white-space:nowrap;
    outline:none;
    box-shadow:none;
    margin:0;
  }
  
  .tab:hover{
    background:rgba(148,163,184,.15);
    color:var(--text-main);
  }
  
  .tab.active{
    background:var(--accent);
    color:#ffffff;
    box-shadow:0 4px 12px var(--shadow-hover);
  }

  /* === Ajuste solicitado: tab Justificaciones (Dashboard) ===
     Hacer la tipografía más chica para mejorar densidad de información.
     Se limita al contenedor de la pestaña para no afectar el resto del sistema.
  */
  #justificaciones,
  #tab-justificaciones,
  .tab-content[data-tab="justificaciones"],
  .tab-content#justificaciones{
    font-size:13px;
    line-height:1.25;
  }

  #justificaciones table,
  #justificaciones th,
  #justificaciones td{
    font-size:12px;
  }

  #justificaciones .btn,
  #justificaciones button,
  #justificaciones input,
  #justificaciones select,
  #justificaciones textarea{
    font-size:12px;
  }

  #justificaciones h2{ font-size:18px; }
  #justificaciones h3{ font-size:16px; }
  
  .tab-content{
    display:none;
    /* Reducir padding para que las tablas queden más pegadas al borde */
    padding:16px 10px;
    background:var(--card-gradient);
    border-radius:0 0 18px 18px;
    border:1px solid var(--border-subtle);
    border-top:none;
    box-shadow:0 20px 50px var(--shadow-main);
  }

  /* Quitar exceso de marco lateral en pantallas grandes */
  @media (min-width: 992px){
    .header{
      border-left:0;
      border-right:0;
      border-radius:16px;
    }
    .tab-content{
      border-left:0;
      border-right:0;
    }
  }

  /* Gestión de Empleados: acciones más compactas */
  #tabla-empleados .actions{
    gap:6px;
  }
  #tabla-empleados .btn.btn-pill{
    padding:4px 10px;
    font-size:12px;
  }
  #tabla-empleados .btn-icon{
    font-size:12px;
    line-height:1;
  }
  
  .tab-content.active{
    display:block;
  }
  
  .tab-content h2{
    color:var(--text-main);
    margin-bottom:20px;
    font-size:24px;
    font-weight:800;
  }
  
  .controls{
    display:flex;
    flex-wrap:wrap;
    gap:10px 12px;
    align-items:center;
    margin:12px 0 22px;
    padding:20px;
    background:var(--card-inner);
    border-radius:12px;
    border:1px solid var(--border-subtle);
  }
  
  .search-box,.filter-select{
    padding:10px 12px;
    border:2px solid var(--border-subtle);
    border-radius:10px;
    font-size:14px;
    min-width:190px;
    background:var(--card-bg);
    color:var(--text-main);
    outline:none;
    transition:.2s all ease;
  }
  
  .search-box:focus,.filter-select:focus{
    outline:0;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
  }
  
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    color:#fff;
    padding:10px 18px;
    border-radius:12px;
    font-weight:800;
    cursor:pointer;
    transition:transform .12s, box-shadow .12s;
    text-decoration:none;
    font-size:14px;
    outline:none;
  }
  
  .btn:hover{
    box-shadow:0 8px 18px var(--shadow-hover);
  }
  
  .btn-primary{
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    box-shadow:0 12px 30px rgba(37,99,235,.45);
  }
  
  .btn-primary:hover{
    box-shadow:0 18px 40px rgba(37,99,235,.65);
  }
  
  .btn-success{
    background:linear-gradient(135deg,#10b981,#059669);
    box-shadow:0 12px 30px rgba(16,185,129,.45);
  }
  
  .btn-success:hover{
    box-shadow:0 18px 40px rgba(16,185,129,.65);
  }
  
  .btn-info{
    background:linear-gradient(135deg,#0ea5e9,#0284c7);
    box-shadow:0 12px 30px rgba(14,165,233,.45);
  }
  
  .btn-info:hover{
    box-shadow:0 18px 40px rgba(14,165,233,.65);
  }
  
  .btn-warning{
    background:linear-gradient(135deg,#f59e0b,#d97706);
    box-shadow:0 12px 30px rgba(245,158,11,.45);
  }
  
  .btn-warning:hover{
    background:linear-gradient(135deg,#d97706,#b45309);
    box-shadow:0 18px 40px rgba(217,119,6,.65);
  }
  
  .btn-danger{
    background:linear-gradient(135deg,#ef4444,#dc2626);
    box-shadow:0 12px 30px rgba(239,68,68,.45);
  }
  
  .btn-danger:hover{
    background:linear-gradient(135deg,#dc2626,#b91c1c);
    box-shadow:0 18px 40px rgba(220,38,38,.65);
  }
  
  .btn-absent{
    background:linear-gradient(135deg,#e74c3c,#c0392b);
  }
  
  .btn-vacaciones{
    background:linear-gradient(135deg,#8e44ad,#6c3483);
  }
  
  .btn-pill{
    padding:6px 14px;
    border-radius:999px;
    font-size:13px;
  }
  
  .actions{
    display:flex;
    gap:10px;
    align-items:center;
    white-space:nowrap;
  }

  /*
    Si una celda de tabla usa la clase .actions, no debe convertirse en flex,
    porque rompe el layout (bordes/alturas) y las líneas de fila no coinciden.
    Mantener display:table-cell para que los separadores queden alineados.
  */
  td.actions,
  th.actions{
    display:table-cell !important;
  }
  
  .stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:16px;
    margin:8px 0 20px;
  }
  
  .stat-card{
    background:var(--card-gradient);
    color:var(--text-main);
    padding:22px;
    border-radius:16px;
    text-align:center;
    box-shadow:0 10px 30px var(--shadow-main);
    border:1px solid var(--border-subtle);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .stat-card.clickable{ cursor:pointer; }
  .stat-card.clickable:active{ transform:scale(0.99); }

  
  .stat-card:hover{
    transform:translateY(-2px);
    box-shadow:0 15px 40px var(--shadow-hover);
  }
  
  .stat-card h3{
    font-size:34px;
    line-height:1;
    margin-bottom:8px;
    color:var(--text-main);
  }
  
  .stat-card div{
    color:var(--text-soft);
    font-size:14px;
    font-weight:600;
  }
  
  /* KPI color variants */
  .stat-card.kpi-total{
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    color:#fff;
  }
  .stat-card.kpi-total div,
  .stat-card.kpi-total h3{color:#fff}
  
  .stat-card.kpi-activos{
    background:linear-gradient(135deg,#10b981,#059669);
    color:#fff;
  }
  .stat-card.kpi-activos div,
  .stat-card.kpi-activos h3{color:#fff}
  
  .stat-card.kpi-someco{
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    color:#fff;
  }
  .stat-card.kpi-someco div,
  .stat-card.kpi-someco h3{color:#fff}
  
  .stat-card.kpi-musicco{
    background:linear-gradient(135deg,#a855f7,#7c3aed);
    color:#fff;
  }
  .stat-card.kpi-musicco div,
  .stat-card.kpi-musicco h3{color:#fff}
  
  .stat-card.kpi-sectores{
    background:linear-gradient(135deg,#14b8a6,#0ea5e9);
    color:#fff;
  }
  .stat-card.kpi-sectores div,
  .stat-card.kpi-sectores h3{color:#fff}
  
  .stat-card.kpi-fichadas{
    background:linear-gradient(135deg,#60a5fa,#3b82f6);
    color:#fff;
  }
  .stat-card.kpi-fichadas div,
  .stat-card.kpi-fichadas h3{color:#fff}
  
  .stat-card.kpi-tarde{
    background:linear-gradient(135deg,#f59e0b,#d97706);
    color:#fff;
  }
  .stat-card.kpi-tarde div,
  .stat-card.kpi-tarde h3{color:#fff}
  
  .stat-card.kpi-ausentes{
    background:linear-gradient(135deg,#ef4444,#b91c1c);
    color:#fff;
  }
  .stat-card.kpi-ausentes div,
  .stat-card.kpi-ausentes h3{color:#fff}
  
  .badge{
    display:inline-block;
    padding:4px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    color:#fff;
  }
  
  .b-ok{
    background:#28a745;
  }
  
  .b-info{
    background:#2aa0c3;
  }
  
  .b-warn{
    background:#ffb020;
    color:#1b2838;
  }
  
  .b-muted{
    background:#cfd8e3;
    color:#263146;
  }
  
  .b-miss{
    background:#e67e22;
    color:#1b1b1b;
  }
  
  .b-absent{
    background:#e74c3c;
  }
  
  .b-vacaciones{
    background:#8e44ad;
  }
  
  .table-container{
    margin-top:10px;
    border-radius:14px;
    box-shadow:0 10px 30px var(--shadow-main);
    background:var(--card-bg);
    border:1px solid var(--border-subtle);
    overflow:hidden;
    transition:background .3s ease, box-shadow .3s ease;
  }
  
  table{
    width:100%;
    border-collapse:collapse;
    background:var(--card-bg);
    min-width:1200px;
  }
  
  th{
    position:sticky;
    top:0;
    background:var(--header-grad);
    color:#e0e7ff;
    text-align:left;
    padding:12px;
    font-size:13.5px;
    letter-spacing:.2px;
    font-weight:700;
    z-index:3;
  }
  
  td{
    padding:11px 12px;
    border-bottom:1px solid var(--border-subtle);
    font-size:14px;
    color:var(--text-main);
    vertical-align:middle;
  }
  
  tr:nth-child(even){
    background:var(--table-even);
  }
  
  tr:nth-child(odd){
    background:var(--table-odd);
  }
  
  tbody tr:hover td{
    background:var(--table-hover);
  }
  
  tr.fichada-intermedia td{
    background:rgba(148,163,184,.08);
    color:var(--text-soft);
  }
  
  tr.fichada-intermedia:hover td{
    background:rgba(148,163,184,.15);
  }
  
  tr.fichada-salida td{
    background:rgba(100,116,139,.05);
    color:var(--text-main);
  }
  
  tr.fichada-salida:hover td{
    background:rgba(100,116,139,.1);
  }
  
  tr.fichada-salida.fichada-intermedia td{
    background:rgba(71,85,105,.08);
    color:var(--text-soft);
  }
  
  tr.fichada-salida.fichada-intermedia:hover td{
    background:rgba(71,85,105,.15);
  }
  
  .legajo-row{
    cursor:pointer;
    transition:all .15s;
  }
  
  .legajo-row:hover td{
    background:rgba(59,130,246,.15) !important;
    color:var(--accent) !important;
  }
  
  /* Separadores verticales */
  :root{--col-divider:#e5e7eb;}
  /* === Corrección fina de líneas en Gestión de Empleados y Registro de Fichadas === */
  #tabla-empleados,
  #tabla-fichadas{
    border-collapse:separate !important;
    border-spacing:0;
  }

  #tabla-empleados th,
  #tabla-empleados td,
  #tabla-fichadas th,
  #tabla-fichadas td{
    border-bottom:none;
  }

  #tabla-empleados thead tr,
  #tabla-fichadas thead tr{
    border-bottom:2px solid var(--border-subtle);
  }

  #tabla-empleados tbody tr,
  #tabla-fichadas tbody tr{
    border-bottom:1px solid var(--border-subtle);
  }

  /* Separadores verticales usando box-shadow para evitar desajustes visuales */
  #tabla-empleados th+th,
  #tabla-empleados td+td,
  #tabla-fichadas th+th,
  #tabla-fichadas td+td{
    border-left:none !important;
    box-shadow:inset 1px 0 0 var(--col-divider);
  }

  [data-theme="dark"]{--col-divider:#334155;}
  
  #tabla-empleados, #tabla-fichadas, #tabla-fichadas-hoy, #tabla-feriados,
  #tabla-ausentes, #tabla-legajos, #tabla-justificaciones, #tabla-vacaciones,
  #tabla-est-sectores, #tabla-est-empleados, #tabla-reportes{
    border-collapse:collapse !important;
  }
  
  #tabla-empleados th+th, #tabla-empleados td+td,
  #tabla-fichadas th+th, #tabla-fichadas td+td,
  #tabla-fichadas-hoy th+th, #tabla-fichadas-hoy td+td,
  #tabla-feriados th+th, #tabla-feriados td+td,
  #tabla-ausentes th+th, #tabla-ausentes td+td,
  #tabla-legajos th+th, #tabla-legajos td+td,
  #tabla-justificaciones th+th, #tabla-justificaciones td+td,
  #tabla-vacaciones th+th, #tabla-vacaciones td+td,
  #tabla-est-sectores th+th, #tabla-est-sectores td+td,
  #tabla-est-empleados th+th, #tabla-est-empleados td+td,
  #tabla-reportes th+th, #tabla-reportes td+td{
    border-left:1px solid var(--col-divider) !important;
  }

  /* Justificaciones: ocultar columna "Revisión" (se mantiene en el HTML/JS para compatibilidad) */
  #tabla-justificaciones th:nth-child(12),
  #tabla-justificaciones td:nth-child(12){
    display:none;
  }
  
  /* Center numeric columns in 'Por empleado' table */
  #tabla-est-empleados th:nth-child(1),
  #tabla-est-empleados th:nth-child(5),
  #tabla-est-empleados th:nth-child(6),
  #tabla-est-empleados th:nth-child(7),
  #tabla-est-empleados th:nth-child(8),
  #tabla-est-empleados th:nth-child(9),
  #tabla-est-empleados th:nth-child(10),
  #tabla-est-empleados th:nth-child(11),
  #tabla-est-empleados th:nth-child(12),
  #tabla-est-empleados th:nth-child(13),
  #tabla-est-empleados th:nth-child(14),
  #tabla-est-empleados td:nth-child(1),
  #tabla-est-empleados td:nth-child(5),
  #tabla-est-empleados td:nth-child(6),
  #tabla-est-empleados td:nth-child(7),
  #tabla-est-empleados td:nth-child(8),
  #tabla-est-empleados td:nth-child(9),
  #tabla-est-empleados td:nth-child(10),
  #tabla-est-empleados td:nth-child(11),
  #tabla-est-empleados td:nth-child(12),
  #tabla-est-empleados td:nth-child(13),
  #tabla-est-empleados td:nth-child(14){
    text-align:center;
  }
  
  .notification{
    position:fixed;
    top:18px;
    right:18px;
    padding:12px 18px;
    border-radius:12px;
    color:#fff;
    font-weight:800;
    z-index:2147483000;
    animation:slideIn .18s ease-out;
    max-width:360px;
    box-shadow:0 10px 30px var(--shadow-main);
  }
  
  .notification.success{
    background:linear-gradient(135deg,#10b981,#059669);
  }
  
  .notification.error{
    background:linear-gradient(135deg,#ef4444,#dc2626);
  }
  
  .notification.info{
    background:linear-gradient(135deg,#0ea5e9,#0284c7);
  }
  
  @keyframes slideIn{
    from{transform:translateX(100%);opacity:0}
    to{transform:translateX(0);opacity:1}
  }
  
  .modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(0,0,0,.5);
    padding:6vh 14px;
    overflow:auto;
  }
  
  .modal.show{
    display:flex !important;
  }
  
  .modal-content{
    background:var(--card-gradient);
    margin:auto;
    max-width:560px;
    border-radius:16px;
    padding:24px;
    box-shadow:0 20px 40px var(--shadow-main);
    border:1px solid var(--border-subtle);
  }
  

  /* Modal de detalle KPIs: más grande para reducir scroll */
  #modalDetalleKPI .modal-content{
    max-width:1200px;
    width:min(1200px, 96vw);
    max-height:88vh;
    display:flex;
    flex-direction:column;
  }
  #modalDetalleKPI .modal-body{
    flex:1;
    overflow:auto; /* si hay muchísimos registros, scrollea el modal completo */
  }
  #modalDetalleKPI .kpi-detalle-table{
    overflow:visible;
    max-height:none;
  }

  .modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:12px;
    margin-bottom:14px;
    border-bottom:2px solid var(--border-subtle);
  }
  
  .modal-title{
    font-size:18px;
    font-weight:800;
    color:var(--text-main);
  }
  
  .close{
    font-size:26px;
    cursor:pointer;
    color:var(--text-soft);
    transition:.2s;
  }
  
  .close:hover{
    color:var(--text-main);
  }
  
  body.modal-open{
    overflow:hidden;
  }
  
  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  
  .form-group{
    margin-bottom:12px;
  }
  
  .form-group label{
    display:block;
    margin-bottom:6px;
    font-weight:700;
    color:var(--text-main);
    font-size:13px;
  }
  
  .form-group input,
  .form-group select{
    width:100%;
    padding:10px 12px;
    border:2px solid var(--border-subtle);
    border-radius:10px;
    font-size:14px;
    background:var(--card-bg);
    color:var(--text-main);
    outline:none;
    transition:.2s all ease;
  }
  
  .form-group input:focus,
  .form-group select:focus{
    outline:0;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
  }
  
  .form-group input[readonly]{
    background:var(--card-inner);
    color:var(--text-soft);
  }
  
  @media (max-width:768px){
    .form-row{grid-template-columns:1fr}
  }
  
  .upload-area{
    border:2px dashed var(--border-subtle);
    border-radius:14px;
    padding:28px;
    text-align:center;
    color:var(--text-main);
    background:var(--card-inner);
    cursor:pointer;
    transition:.15s;
  }
  
  .upload-area:hover{
    background:rgba(148,163,184,.15);
    border-color:var(--accent);
  }
  
  .upload-icon{
    font-size:36px;
    margin-bottom:10px;
  }
  
  .upload-area input{
    display:none;
  }
  
  .format-section{
    background:var(--card-inner);
    border:1px solid var(--border-subtle);
    border-radius:12px;
    padding:20px;
    margin-top:16px;
  }
  
  .format-section h4{
    color:var(--text-main);
    margin-bottom:12px;
    font-size:16px;
  }
  
  .format-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    font-size:13px;
    color:var(--text-soft);
  }
  
  .format-list .required{
    color:#dc3545;
    font-weight:600;
  }
  
  .format-list .optional{
    color:var(--text-soft);
  }
  
  @media (max-width:768px){
    .format-list{grid-template-columns:1fr}
  }
  
  .ausentes-container{
    background:var(--card-inner);
    border:1px solid var(--border-subtle);
    border-radius:12px;
    padding:20px;
    margin:16px 0;
  }
  
  .ausentes-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
  }
  
  .ausentes-header h3{
    color:var(--text-main);
  }
  
  .ausentes-stats{
    background:linear-gradient(135deg,#ef4444,#dc2626);
    color:white;
    padding:8px 16px;
    border-radius:20px;
    font-weight:700;
    box-shadow:0 4px 12px rgba(239,68,68,.3);
  }
  
  .vacaciones-container{
    background:var(--card-inner);
    border:1px solid var(--border-subtle);
    border-radius:12px;
    padding:20px;
    margin:16px 0;
  }
  
  .vacaciones-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
  }
  
  .vacaciones-header h3{
    color:var(--text-main);
  }
  
  .vacaciones-stats{
    background:linear-gradient(135deg,#8e44ad,#7c3aed);
    color:white;
    padding:8px 16px;
    border-radius:20px;
    font-weight:700;
    box-shadow:0 4px 12px rgba(142,68,173,.3);
  }
  
  .report-controls{
    display:flex;
    flex-wrap:wrap;
    gap:10px 12px;
    align-items:center;
    margin:12px 0 22px;
  }
  
  .report-type,
  .report-date-range,
  .report-filter,
  .report-actions{
    display:flex;
    gap:10px;
    align-items:center;
  }
  
  .legajo-modal .modal-content{
    max-width:900px;
  }
  
  .legajo-info{
    background:var(--card-inner);
    padding:16px;
    border-radius:10px;
    margin-bottom:20px;
    border:1px solid var(--border-subtle);
  }
  
  .legajo-section{
    margin-bottom:24px;
  }
  
  .legajo-section h4{
    color:var(--text-main);
    margin-bottom:16px;
    font-size:16px;
    border-bottom:2px solid var(--border-subtle);
    padding-bottom:8px;
  }
  
  .info-highlight{
    background:rgba(59,130,246,.12);
    padding:8px 12px;
    border-radius:6px;
    font-size:13px;
    color:var(--accent);
    border:1px solid rgba(59,130,246,.3);
  }
  
  .header-buttons{
    position:absolute;
    top:25px;
    right:25px;
    display:flex;
    gap:8px;
    align-items:center;
    z-index:20;
    background:rgba(2,6,23,.60);
    border:1px solid rgba(148,163,184,.25);
    border-radius:999px;
    padding:8px 10px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .header-btn{
    padding:8px 10px;
    border:0;
    border-radius:999px;
    box-shadow:0 10px 25px var(--shadow-main);
    cursor:pointer;
    background:var(--card-bg);
    color:var(--text-main);
    font-size:14px;
    transition:all 0.2s ease;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border-subtle);
  }
  
  .header-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 15px 30px var(--shadow-hover);
    background:rgba(148,163,184,.15);
  }
  
  /* Theme Toggle Switch */
  .theme-toggle{
    position:relative;
    width:60px;
    height:30px;
    background:rgba(71,85,105,.3);
    border-radius:999px;
    cursor:pointer;
    border:2px solid var(--border-subtle);
    transition:.3s all ease;
  }
  
  .theme-toggle:hover{
    border-color:var(--accent);
  }
  
  .theme-toggle-slider{
    position:absolute;
    top:2px;
    left:2px;
    width:22px;
    height:22px;
    background:linear-gradient(135deg,#f59e0b,#f97316);
    border-radius:50%;
    transition:.3s all ease;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.3);
  }
  
  [data-theme="light"] .theme-toggle{
    background:rgba(147,197,253,.3);
  }
  
  [data-theme="light"] .theme-toggle-slider{
    transform:translateX(30px);
    background:linear-gradient(135deg,#3b82f6,#2563eb);
  }
  
  /* User menu */
  .user-menu{
    position:relative;
  }
  
  .user-name-btn{
    padding:8px 12px;
    border:1px solid var(--border-subtle);
    border-radius:999px;
    background:var(--card-bg);
    color:var(--text-main);
    cursor:pointer;
    max-width:260px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    transition:.2s all ease;
  }
  
  .user-name-btn:hover{
    background:rgba(148,163,184,.15);
  }
  
  .user-name-btn.role-admin{
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    border-color:#1d4ed8;
    color:#ffffff;
  }
  
  .user-name-btn.role-superadmin{
    background:linear-gradient(135deg,#7c3aed,#6d28d9);
    border-color:#6d28d9;
    color:#ffffff;
  }
  
  [data-theme="dark"] .user-name-btn{
    background:#0ea5e9;
    border-color:#0284c7;
    color:#0b1220;
  }
  
  [data-theme="dark"] .user-name-btn.role-admin{
    background:#1d4ed8;
    border-color:#1e40af;
    color:#ffffff;
  }
  
  [data-theme="dark"] .user-name-btn.role-superadmin{
    background:#6d28d9;
    border-color:#5b21b6;
    color:#ffffff;
  }
  
  .user-dropdown{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    min-width:220px;
    background:var(--card-bg);
    border:1px solid var(--border-subtle);
    border-radius:12px;
    box-shadow:0 10px 24px var(--shadow-main);
    display:none;
    z-index:100000;
    overflow:hidden;
  }
  
  .user-dropdown.open{
    display:block;
  }
  
  .user-dropdown .dropdown-item{
    display:block;
    padding:10px 12px;
    text-decoration:none;
    color:var(--text-main);
    font-weight:600;
    transition:.2s;
  }
  
  .user-dropdown .dropdown-item:hover{
    background:rgba(148,163,184,.15);
  }
  
  /* Dropdowns generales */
  .tabs{
    overflow:visible;
    position:relative;
  }
  
  .tabs details.dropdown{
    display:inline-block;
    vertical-align:middle;
    margin:0 4px;
  }
  
  .tabs details.dropdown > summary.tab{
    display:inline-flex;
    align-items:center;
    height:42px;
    padding:0 12px;
    line-height:1;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
  }
  
  .tabs details.dropdown > summary.tab,
  .tabs details.dropdown[open] > summary.tab{
    background:var(--accent);
    color:#ffffff;
    border:none;
  }
  
  .tabs details.dropdown > summary.tab:hover{
    filter:brightness(0.95);
  }
  
  .tabs details.dropdown .menu{
    position:fixed;
    margin-top:4px;
    display:flex;
    flex-direction:column;
    gap:6px;
    z-index:3000;
    padding:8px;
    border-radius:10px;
    border:1px solid var(--border-subtle);
    background:var(--card-bg);
    box-shadow:0 10px 25px var(--shadow-main);
  }
  
  .tabs details.dropdown .menu button{
    display:block;
    width:100%;
    text-align:left;
    padding:10px 12px;
    border-radius:8px;
    border:0;
    background:var(--accent);
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
  }
  
  .tabs details.dropdown .menu button:hover{
    filter:brightness(0.93);
  }
  
  /* Dropdown de vacaciones */
  #vacaciones .vac-acciones{
    position:relative;
    display:inline-block;
    margin-right:8px;
  }
  
  #vacaciones .vac-acciones .dropdown-menu{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    display:none;
    min-width:260px;
    padding:8px;
    background:var(--card-bg);
    border:1px solid var(--border-subtle);
    border-radius:12px;
    box-shadow:0 10px 24px var(--shadow-main);
    z-index:1000;
  }
  
  #vacaciones .vac-acciones .dropdown-menu.open{
    display:block;
  }
  
  #vacaciones .vac-acciones .dropdown-menu .btn{
    width:100%;
    text-align:left;
    margin:4px 0;
  }
  
  #modal-override-vac .modal-content,
  #modalGestorVac .modal-content{
    width:95vw;
    max-width:1200px;
  }
  
  #modalGestorVac input[type="date"]{
    min-width:140px;
  }
  
  #modalGestorVac input[type="number"]{
    width:90px;
  }
  
  /* Active tabs styles */
  .navbar a.active, .navbar button.active,
  .topbar a.active, .topbar button.active,
  .menu a.active, .menu button.active,
  nav a.active, nav button.active,
  .dropdown-menu a.active, .dropdown-menu button.active,
  .tabs .tab.active, summary.active{
    background:var(--accent) !important;
    color:#ffffff !important;
    border-radius:12px !important;
    border:1px solid var(--accent) !important;
    text-decoration:none !important;
    box-shadow:0 4px 12px var(--shadow-hover) !important;
  }
  
  .dropdown > .dropdown-toggle.active,
  details > summary.active{
    background:var(--accent) !important;
    color:#ffffff !important;
    border-radius:12px !important;
    border:1px solid var(--accent) !important;
  }
  
  /* Responsive */
  @media (max-width:1200px){
    .stats{
      grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    }
  }
  
  @media (max-width:768px){
    body{
      padding:10px;
    }
    
    .header{
      padding:16px;
    }
    
    .header h1{
      font-size:22px;
    }
    
    .tab-content{
      padding:16px;
    }
    
    .controls{
      padding:12px;
    }
    
    .stats{
      grid-template-columns:1fr;
    }
    
    .card{
      padding:16px;
    }
    
    .header-buttons{
    position:absolute;
    top:18px;
    right:18px;
    display:flex;
    gap:8px;
    align-items:center;
    z-index:20;
    background:rgba(2,6,23,.60);
    border:1px solid rgba(148,163,184,.25);
    border-radius:999px;
    padding:8px 10px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  }

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator,
.dark input[type="month"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.2);
}

/* Hover tipo Dashboard - botones (Gestión de Empleados) */
#empleados .controls .btn-anim-refresh:hover,
#empleados .controls .btn-anim-search:hover,
#empleados .controls .btn-anim-new:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.25) !important;
}

/* === Fix: evitar que los dropdowns (Personal/Estadísticas) se desplacen al perder hover === */
.tabs details.dropdown > summary.tab,
.tabs details.dropdown > summary.tab:hover{
  transform: none !important;
  box-shadow: none !important;
}
#empleados .controls .btn-anim-refresh:hover .icon-refresh{
  transform: translateY(-1px) rotate(180deg) !important;
}

/* Hover tipo Dashboard (global en páginas index*) */
button:not(:disabled):not(.no-hover),
.btn:not(:disabled):not(.no-hover),
a.btn:not(.no-hover),
.navbar a:not(.no-hover),
.navbar button:not(:disabled):not(.no-hover),
.menu a:not(.no-hover),
.menu button:not(:disabled):not(.no-hover),
.topbar a:not(.no-hover),
.topbar button:not(:disabled):not(.no-hover),
nav a:not(.no-hover),
nav button:not(:disabled):not(.no-hover),
.tabs a:not(.no-hover),
.tabs button:not(:disabled):not(.no-hover),
.tab:not(.no-hover),
.nav-item:not(.no-hover),
.nav-link:not(.no-hover){
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
}

button:not(:disabled):not(.no-hover):hover,
.btn:not(:disabled):not(.no-hover):hover,
a.btn:not(.no-hover):hover,
.navbar a:not(.no-hover):hover,
.navbar button:not(:disabled):not(.no-hover):hover,
.menu a:not(.no-hover):hover,
.menu button:not(:disabled):not(.no-hover):hover,
.topbar a:not(.no-hover):hover,
.topbar button:not(:disabled):not(.no-hover):hover,
nav a:not(.no-hover):hover,
nav button:not(:disabled):not(.no-hover):hover,
.tabs a:not(.no-hover):hover,
.tabs button:not(:disabled):not(.no-hover):hover,
.tab:not(.no-hover):hover,
.nav-item:not(.no-hover):hover,
.nav-link:not(.no-hover):hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.25) !important;
}

/* === Patch UI: ocultar "ovalo" del contenedor superior (header-buttons) === */
.header-buttons{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* === Patch UI: centrar notificaciones (toast) arriba === */
.notification{
  left: 50% !important;
  right: auto !important;
  top: 18px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  text-align: center;
}
@keyframes toastDown{
  from{ transform: translate(-50%, -10px); opacity: 0; }
  to  { transform: translate(-50%, 0px);  opacity: 1; }
}
.notification{
  animation: toastDown .18s ease-out !important;
}

/* === Patch UI: quitar resaltado celeste de tabs/menú (estado .active) === */
.navbar a.active, .navbar button.active,
.topbar a.active, .topbar button.active,
.menu a.active, .menu button.active,
nav a.active, nav button.active,
.dropdown-menu a.active, .dropdown-menu button.active,
.tabs .tab.active, summary.active,
.tabs details.dropdown > summary.tab,
.tabs details.dropdown[open] > summary.tab,
.dropdown > .dropdown-toggle.active,
details > summary.active{
  background: transparent !important;
  border-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
  text-decoration: none !important;
}
.navbar a.active, .navbar button.active,
.topbar a.active, .topbar button.active,
.menu a.active, .menu button.active,
nav a.active, nav button.active,
.tabs .tab.active, summary.active{
  font-weight: 700 !important;
}

/* === Patch UI: quitar "azul" de opciones dentro de dropdown (Personal / Estadísticas) === */
details.dropdown .menu button,
details.dropdown .menu a,
.dropdown .menu button,
.dropdown .menu a{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
}
/* Mantener un hover sutil */
details.dropdown .menu button:hover,
details.dropdown .menu a:hover,
.dropdown .menu button:hover,
.dropdown .menu a:hover{
  background: rgba(148,163,184,.12) !important;
}
/* Opcional: que ocupen todo el ancho sin parecer "botón" */
details.dropdown .menu button,
.dropdown .menu button{
  width: 100% !important;
  text-align: left !important;
  border-radius: 10px !important;
}
/* === Justificaciones: selector Justificó/No justificó === */
.justifico-select{
  width: 130px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: #e8eefc;
  font-weight: 800;
  outline: none;
}
body:not(.dark) .justifico-select{
  background: rgba(255,255,255,.70);
  color: #101828;
  border: 1px solid rgba(16,24,40,.20);
}
.justifico-select option{ color: #101828; }
body.dark .justifico-select option{ color:#101828; }

/* Exportar seleccionados: mejor contraste cuando hay elementos marcados */
#btn-exp-sel.enabled{
  background: rgba(0, 150, 255, .35) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(0, 170, 255, .35), 0 6px 18px rgba(0,0,0,.25);
}


/* Mantener emojis a color cuando se usa texto con gradiente en modo oscuro */
[data-theme="dark"] .emoji{
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: initial !important;
  color: initial !important;
  font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",system-ui,sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   Headers fijos (sticky) en tablas de pestañas del index
   ------------------------------------------------------
   .table-container usa overflow:hidden por defecto. Eso rompe
   position:sticky cuando el scroll es el de la página.
   Para estas pestañas, dejamos overflow visible.
   ───────────────────────────────────────────────────────────── */

#empleados .table-container,
#justificaciones .table-container,
#vacaciones .table-container,
#feriados .table-container,
#legajos .table-container,
#fichadas .table-container,
#ausentes .table-container{
  overflow: visible;
}

#empleados thead th,
#justificaciones thead th,
#vacaciones thead th,
#feriados thead th,
#legajos thead th,
#fichadas thead th,
#ausentes thead th{
  position: sticky;
  top: 0;
  z-index: 30;
}


/* JUSTIFICACIONES_COMPACT_V1_START */
/* Compactar tabla de Justificaciones (similar a Gestión de Empleados) */
#tabla-justificaciones,
#tabla-justificaciones table {
  font-size: 12px;
}

#tabla-justificaciones thead th {
  font-size: 12px;
  padding: 8px 10px;
}

#tabla-justificaciones tbody td {
  padding: 8px 10px;
  line-height: 1.25;
  vertical-align: top;
}

/* Inputs/controles dentro de la tabla */
#tabla-justificaciones select,
#tabla-justificaciones input,
#tabla-justificaciones textarea {
  font-size: 12px;
  padding: 6px 10px;
  height: auto;
}

/* Botones dentro de la tabla */
#tabla-justificaciones button,
#tabla-justificaciones .btn,
#tabla-justificaciones .btn-prim,
#tabla-justificaciones .btn-primary,
#tabla-justificaciones .btn-secondary {
  font-size: 12px;
  padding: 6px 10px;
}

/* Pills/etiquetas */
#tabla-justificaciones .pill,
#tabla-justificaciones .tag,
#tabla-justificaciones .badge {
  font-size: 11px;
  padding: 4px 8px;
}
/* JUSTIFICACIONES_COMPACT_V1_END */



/* Banner fijo de tardanzas */
.alerta-tardanzas-banner{
  position: sticky;
  top: 0;
  z-index: 1100;
  margin: 12px 0 16px;
  border: 1px solid rgba(185, 28, 28, 0.35);
  background: linear-gradient(135deg, #b91c1c, #dc2626);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(127, 29, 29, 0.22);
}

.alerta-tardanzas-contenido{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.alerta-tardanzas-texto{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.alerta-tardanzas-acciones{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-banner-cerrar{
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

.btn-banner-cerrar:hover{
  background: rgba(255,255,255,.24);
}


.btn-banner-ver{
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  padding: 8px 12px;
}
.btn-banner-ver:hover{
  background: rgba(255,255,255,.28);
}
.modal-tardanzas-content{
  max-width: 860px;
}
.modal-tardanzas-info{
  margin-bottom: 12px;
  opacity: .92;
  font-weight: 600;
}
.modal-tardanzas-table{
  max-height: 55vh;
  overflow: auto;
}
#tablaTardanzasBanner th:last-child,
#tablaTardanzasBanner td:last-child{
  text-align: center;
}

/* Bandeja de entrada para aprobaciones pendientes */
.inbox-card{
  margin:18px 0 20px;
  padding:18px;
  border:1px solid var(--border-subtle);
  border-radius:18px;
  background:var(--card-gradient);
  box-shadow:0 16px 40px var(--shadow-main);
}
.inbox-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.inbox-head h3{
  margin:0 0 4px;
  font-size:20px;
  color:var(--text-main);
}
.inbox-head p{
  margin:0;
  color:var(--text-muted);
  font-size:13px;
}
.inbox-list{
  display:grid;
  gap:10px;
}
.inbox-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--border-subtle);
  background:var(--card-inner);
  color:var(--text-main);
  cursor:pointer;
  text-align:left;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.inbox-item:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px var(--shadow-main);
  border-color:var(--accent);
}
.inbox-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-soft);
  flex:0 0 auto;
}
.inbox-content{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1 1 auto;
}
.inbox-content strong{
  font-size:15px;
}
.inbox-content span{
  color:var(--text-muted);
  font-size:13px;
}
.inbox-count{
  min-width:30px;
  height:30px;
  padding:0 9px;
  border-radius:999px;
  background:var(--danger-soft);
  color:#b91c1c;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}
@media (max-width: 700px){
  .inbox-head{align-items:flex-start; flex-direction:column;}
  .inbox-head .btn{width:100%;}
}