*{box-sizing:border-box;margin:0;padding:0}

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

: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;
  padding:0;
  margin:0;
  color:var(--text-main);
  transition:background .3s ease, color .3s ease;
}

.page{
  max-width:100%;
  width:100%;
  margin:0;
  padding:20px;
}

.card{
  max-width:100%;
  margin:0;
  background:var(--card-gradient);
  border-radius:18px;
  box-shadow:0 20px 50px var(--shadow-main);
  padding:50px;
  border:1px solid var(--border-subtle);
  transition:background .3s ease, box-shadow .3s ease;
}

.card-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:2px solid var(--border-subtle);
}

.title-block h1{
  font-size:28px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--text-main);
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 6px 0;
}

[data-theme="dark"] .title-block h1{
  background:linear-gradient(135deg,#e0e7ff,#c7d2fe);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.title-block p{
  margin-top:6px;
  color:var(--text-soft);
  font-size:14px;
  line-height:1.5;
}

.sub{
  color:var(--text-soft);
  margin:0 0 14px 0;
}

.card-header-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.filters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-bottom:20px;
  padding:20px;
  background:var(--card-inner);
  border-radius:12px;
  border:1px solid var(--border-subtle);
  transition:background .3s ease;
}

.filter label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-soft);
  margin-bottom:6px;
  font-weight:600;
}

.filter input,
.filter select{
  width:100%;
  border-radius:8px;
  border:1px solid var(--border-subtle);
  background:var(--card-bg);
  color:var(--text-main);
  padding:9px 12px;
  font-size:13px;
  outline:none;
  transition:.2s all ease;
}

.filter input:focus,
.filter select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(59,130,246,.2);
}

input::placeholder{
  color: color-mix(in srgb, var(--text-soft) 80%, transparent);
}

.btn-prim{
  border:none;
  outline:0;
  border-radius:999px;
  padding:10px 22px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#f9fafb;
  box-shadow:0 12px 30px rgba(37,99,235,.55);
  transition:.2s all ease;
}

.btn-prim:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(37,99,235,.75);
}

.btn-prim:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(15,23,42,.9);
}

.btn-ghost{
  border-radius:999px;
  padding:9px 16px;
  font-size:13px;
  font-weight:600;
  border:1px solid var(--border-subtle);
  background:var(--card-inner);
  color:var(--text-main);
  cursor:pointer;
  transition:.2s all ease;
}

.btn-ghost:hover{
  background:rgba(148,163,184,.15);
  border-color:rgba(148,163,184,.65);
}

.stats-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 16px;
  background:rgba(59,130,246,.15);
  border:1px solid rgba(59,130,246,.4);
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  color:#93c5fd;
}

[data-theme="light"] .stats-badge{
  color:#2563eb;
}

.table-wrapper{
  border-radius:14px;
  border:1px solid var(--border-subtle);
  overflow:hidden;
  background:var(--card-bg);
  box-shadow:0 10px 30px var(--shadow-main);
  transition:background .3s ease, box-shadow .3s ease;
  max-height:70vh;
  overflow:auto;
}

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

thead{
  background:var(--header-grad);
  position:sticky;
  top:0;
  z-index:10;
}

th{
  padding:14px 16px;
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#e0e7ff;
  font-weight:700;
  border-bottom:2px solid rgba(59,130,246,.4);
  border-right:1px solid rgba(148,163,184,.15);
}

th:last-child{
  border-right:none;
}

td{
  padding:12px 16px;
  text-align:left;
  border-bottom:1px solid var(--border-subtle);
  border-right:1px solid rgba(148,163,184,.1);
  white-space:nowrap;
}

td:last-child{
  border-right:none;
}

tbody tr{
  transition:.15s all ease;
}

tbody tr:nth-child(even){
  background:var(--table-even);
}

tbody tr:nth-child(odd){
  background:var(--table-odd);
}

tbody tr:hover{
  background:var(--table-hover);
  transform:scale(1.002);
  box-shadow:0 4px 12px var(--shadow-hover);
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 12px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.ok{
  background:rgba(34,197,94,.15);
  color:#86efac;
  border:1px solid rgba(34,197,94,.4);
}

[data-theme="light"] .ok{
  color:#166534;
}

.bad{
  background:rgba(220,38,38,.15);
  color:#fca5a5;
  border:1px solid rgba(220,38,38,.4);
}

[data-theme="light"] .bad{
  color:#991b1b;
}

.warn{
  background:rgba(245,158,11,.18);
  color:#fcd34d;
  border:1px solid rgba(245,158,11,.4);
}

[data-theme="light"] .warn{
  color:#92400e;
}

.muted{
  color:var(--text-soft);
}

.header-buttons{
  position:fixed;
  right:24px;
  top:24px;
  display:flex;
  gap:8px;
  align-items:center;
  z-index:99999;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

.header-btn{
  padding:8px 12px;
  border:1px solid var(--border-subtle);
  border-radius:999px;
  background:var(--card-inner);
  color:var(--text-main);
  cursor:pointer;
  text-decoration:none;
  transition:.2s all ease;
  font-size:13px;
  font-weight:600;
}

.header-btn:hover{
  background:rgba(148,163,184,.15);
  border-color:rgba(148,163,184,.65);
}

/* 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-inner);
  color:var(--text-main);
  cursor:pointer;
  max-width:260px;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
}

.user-name-btn.role-admin{
  background:#2563eb;
  border-color:#1d4ed8;
  color:#ffffff;
}

.user-name-btn.role-superadmin{
  background:#7c3aed;
  border-color:#6d28d9;
  color:#ffffff;
}

.user-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:220px;
  background:var(--card-inner);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  box-shadow:0 10px 24px var(--shadow-main);
  display:none;
  z-index:100000;
}

.user-dropdown.open{display:block;}

.user-dropdown .dropdown-item{
  display:block;
  padding:10px 12px;
  text-decoration:none;
  color:var(--text-main);
  font-weight:600;
}

.user-dropdown .dropdown-item:hover{
  background:rgba(148,163,184,.15);
}

/* Hover effects */
button:not(:disabled):not(.no-hover),
.btn:not(:disabled):not(.no-hover),
a.btn: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{
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.25) !important;
}

@media (max-width:1200px){
  .filters{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (max-width:768px){
  .filters{grid-template-columns:repeat(2,minmax(0,1fr));}
  .card{padding:16px;}
  .page{padding:10px;}
  .card-header{flex-direction:column;align-items:stretch;}
  .card-header-actions{flex-direction:row;align-items:center;justify-content:flex-start;}
  .table-wrapper{overflow-x:auto;}
}

/* v2 base: sin scrolls internos */
.table-wrapper{ max-height: none !important; height: auto !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; }
.table-container{ max-height: none !important; height: auto !important; overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; }
.card{ overflow: visible !important; height: auto !important; }
body{ overflow: auto !important; }

/* v8: botones como auditoria/index (NO fixed). Scrollean con la página y no se superponen. */
.header-buttons{
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}
/* si existiera algún wrapper fijo previo */
.rrhh-fixed-actions, .header-oval-fixed, #rrhh-fixed-topbar{ display:none !important; }

/* v11: bajar un poco el bloque de acciones dentro del header */
.card-header-actions{ top: 10px !important; }
.header-buttons{ top: 18px !important; }

/* v11: iconos/logo visibles en modo oscuro (evitar que queden "blancos" por filtros) */
[data-theme="dark"] img.icon, 
[data-theme="dark"] .icon img,
[data-theme="dark"] .title-icon img,
[data-theme="dark"] .logo img,
[data-theme="dark"] img[alt*="logo" i],
[data-theme="dark"] img[alt*="icon" i]{
  filter: none !important;
}
/* SVG inline: intentar heredar color del texto */
[data-theme="dark"] svg.logo,
[data-theme="dark"] .logo svg,
[data-theme="dark"] .title-icon svg{
  fill: currentColor !important;
}

/* v12: bajar un poco más el bloque de acciones dentro del header */
.card-header-actions{ top: 18px !important; }
.header-buttons{ top: 26px !important; }

/* v12: emojis a color aunque el h1 use background-clip/text-fill transparent */
.title-block h1 .emoji,
h1 .emoji{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",emoji !important;
}
/* Si el h1 tiene text-fill transparent en dark, aseguramos que el emoji NO herede eso */
[data-theme="dark"] .title-block h1 .emoji,
[data-theme="dark"] h1 .emoji{
  -webkit-text-fill-color: initial !important;
}

/* v17: alinear ambas filas a la derecha y apilarlas prolijas */
.card-header{ position: relative !important; }

.header-buttons{
  position: absolute !important;
  top: 30px !important;
  right: 70px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.card-header-actions{
  position: absolute !important;
  top: 20px !important;
  right: 0px !important;
  display: flex !important;
  justify-content: flex-end !important;
}