/* 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);
  }

  [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:20px;
    color:var(--text-main);
    transition:background .3s ease, color .3s ease;
  }
  .page{
    max-width:none;
    width:100%;
    margin:0;
    padding:0 12px;
  }
  .card{
    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;
  }
  [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;
  }
  .tag-info{
    display:inline-flex;
    align-items:center;
    padding:6px 12px;
    margin-top:8px;
    border-radius:999px;
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    background:rgba(168,85,247,.12);
    border:1px solid rgba(168,85,247,.5);
    color:#e9d5ff;
    font-weight:600;
    box-shadow:0 4px 12px rgba(168,85,247,.2);
  }
  [data-theme="light"] .tag-info{
    background:rgba(168,85,247,.08);
    color:#7c3aed;
  }
  .card-header-actions{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
  }
  .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);
  }
  .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);
  }
  .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;
  }
  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;
  }


/* Ajuste: hacer más angosta la columna "Fecha solicitud" (5ta columna) */
#tabla th:nth-child(5),
#tabla td:nth-child(5){
  width: 120px;
  max-width: 120px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px;
}

  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);
  }
  .empty{
    text-align:center;
    padding:40px 20px;
    font-size:14px;
    color:var(--text-soft);
    font-style:italic;
  }
  
  /* Pills de estado */
  .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;
  }
  .pill-ok{
    background:rgba(34,197,94,.15);
    color:#86efac;
    border:1px solid rgba(34,197,94,.4);
  }
  [data-theme="light"] .pill-ok{
    color:#16a34a;
  }
  
  .header-buttons{
    position:absolute;
    right:85px;
    top:24px;
    display:flex;
    gap:8px;
    align-items:center;
    z-index:60;
  }
  .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;
  }
  .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);
  }
  
  @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;}
    .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;}
  }

[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);
}

/* === 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;
}

.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: #e0e0e0 !important;
  color: #1f1f1f !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.dropdown > .dropdown-toggle.active,
details > summary.active {
  background: #e0e0e0 !important;
  color: #1f1f1f !important;
  border-radius: 12px !important;
  
  border: 1px solid rgba(0,0,0,.18) !important;
}

/* 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;
}


/* === Acciones inline (íconos) === */
#tabla .c-acciones{ white-space:nowrap; text-align:center; }
.icon-btn{
  border:1px solid var(--border-subtle);
  background:rgba(148,163,184,.10);
  color:var(--text-main);
  border-radius:10px;
  padding:6px 8px;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  margin:0 3px;
}
.icon-btn:hover{ background:rgba(148,163,184,.18); border-color:rgba(148,163,184,.55); }
.icon-btn.danger{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); }
.icon-btn.danger:hover{ background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.55); }
.icon-btn.ok{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); }
.icon-btn.ok:hover{ background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.55); }
.edit-input{
  width:100%;
  min-width:120px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid var(--border-subtle);
  background:rgba(15,23,42,.35);
  color:var(--text-main);
}