*{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: #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-bg:#0f172a;
    --table-hover:rgba(59,130,246,.25);
    --thead-bg:linear-gradient(135deg,#1e3a8a,#1e293b);
  }
  
  /* Tema claro */
  [data-theme="light"]{
    --bg-grad: linear-gradient(135deg,#e0e7ff 0%,#c7d2fe 100%);
    --card-bg:#ffffff;
    --card-inner:#f8fafc;
    --accent:#2563eb;
    --accent-soft:rgba(37,99,235,.08);
    --danger-soft:rgba(220,38,38,.08);
    --success-soft:rgba(34,197,94,.08);
    --border-subtle:rgba(100,116,139,.25);
    --text-main:#0f172a;
    --text-soft:#475569;
    --table-bg:#f8fafc;
    --table-hover:rgba(37,99,235,.15);
    --thead-bg:linear-gradient(135deg,#3b82f6,#2563eb);
  }
  
  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-bg);
    border-radius:18px;
    box-shadow:0 20px 50px rgba(15,23,42,.35);
    padding:24px;
    border:1px solid var(--border-subtle);
    transition:background .3s ease, border .3s ease;
  }
  [data-theme="light"] .card{
    box-shadow:0 20px 50px rgba(100,116,139,.2);
  }
  .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;
    background:linear-gradient(135deg,#e0e7ff,#c7d2fe);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  [data-theme="light"] .title-block h1{
    background:linear-gradient(135deg,#1e3a8a,#3b82f6);
    -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;
  }
  .tag-admin{
    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(56,189,248,.12);
    border:1px solid rgba(56,189,248,.5);
    color:#e0f2fe;
    font-weight:600;
    box-shadow:0 4px 12px rgba(56,189,248,.2);
  }
  [data-theme="light"] .tag-admin{
    background:rgba(14,165,233,.12);
    border-color:rgba(14,165,233,.5);
    color:#0369a1;
  }
  .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:var(--accent-soft);
    border-color:var(--accent);
  }
  
  /* 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);
  }
  
  .alert{
    border-radius:12px;
    padding:12px 16px;
    margin-bottom:16px;
    font-size:13px;
    border:1px solid rgba(248,113,113,.45);
    background:var(--danger-soft);
    color:#fca5a5;
    font-weight:500;
  }
  [data-theme="light"] .alert{
    color:#dc2626;
    border-color:rgba(220,38,38,.4);
  }
  .filters{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,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, border .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(--table-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 var(--accent-soft);
  }
  .table-wrapper{
    border-radius:14px;
    border:1px solid var(--border-subtle);
    overflow:hidden;
    background:var(--table-bg);
    box-shadow:0 10px 30px rgba(0,0,0,.2);
    transition:background .3s ease, border .3s ease;
  }
  [data-theme="light"] .table-wrapper{
    box-shadow:0 10px 30px rgba(100,116,139,.15);
  }
  table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
  }
  thead{
    background:var(--thead-bg);
    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);
  }
  [data-theme="light"] th{
    color:#ffffff;
    border-bottom:2px solid rgba(255,255,255,.3);
  }
  th:last-child{
    border-right:none;
  }
  td{
    padding:12px 16px;
    text-align:left;
    border-bottom:1px solid var(--border-subtle);
    border-right:1px solid var(--border-subtle);
    white-space:nowrap;
  }
  td:last-child{
    border-right:none;
  }
  tbody tr{
    transition:.15s all ease;
  }
  tbody tr:nth-child(even){
    background:rgba(15,23,42,.3);
  }
  [data-theme="light"] tbody tr:nth-child(even){
    background:rgba(241,245,249,.5);
  }
  tbody tr:nth-child(odd){
    background:rgba(30,41,59,.2);
  }
  [data-theme="light"] tbody tr:nth-child(odd){
    background:rgba(248,250,252,.3);
  }
  tbody tr:hover{
    background:var(--table-hover);
    transform:scale(1.002);
    box-shadow:0 4px 12px rgba(59,130,246,.2);
  }
  td.detalle{
    max-width:380px;
    white-space:normal;
    line-height:1.5;
  }
  .empty{
    text-align:center;
    padding:40px 20px;
    font-size:14px;
    color:var(--text-soft);
    font-style:italic;
  }
  
  /* Badges para acciones */
  .badge-action{
    display:inline-block;
    padding:4px 10px;
    border-radius:6px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.03em;
  }
  .badge-crear{
    background:rgba(34,197,94,.15);
    color:#86efac;
    border:1px solid rgba(34,197,94,.3);
  }
  [data-theme="light"] .badge-crear{
    background:rgba(34,197,94,.12);
    color:#15803d;
    border-color:rgba(34,197,94,.4);
  }
  .badge-editar{
    background:rgba(59,130,246,.15);
    color:#93c5fd;
    border:1px solid rgba(59,130,246,.3);
  }
  [data-theme="light"] .badge-editar{
    background:rgba(59,130,246,.12);
    color:#1e40af;
    border-color:rgba(59,130,246,.4);
  }
  .badge-eliminar{
    background:rgba(220,38,38,.15);
    color:#fca5a5;
    border:1px solid rgba(220,38,38,.3);
  }
  [data-theme="light"] .badge-eliminar{
    background:rgba(220,38,38,.12);
    color:#b91c1c;
    border-color:rgba(220,38,38,.4);
  }
  .badge-default{
    background:rgba(148,163,184,.15);
    color:#cbd5e1;
    border:1px solid rgba(148,163,184,.3);
  }
  [data-theme="light"] .badge-default{
    background:rgba(100,116,139,.12);
    color:#475569;
    border-color:rgba(100,116,139,.4);
  }
  
  @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;}
  }

  /* Estilos adicionales adaptados del original para componentes específicos de usuarios.html */
  .container, .content {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    width: 100%;
  }
  .header {
    background: none;
    color: var(--text-main);
    padding: 0;
    position: relative;
  }
  .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
    margin: 12px 0 22px;
  }
  .search-box, .filter-select {
    padding: 9px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 13px;
    min-width: 190px;
    background: var(--table-bg);
    color: var(--text-main);
  }
  .search-box:focus, .filter-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    color: #f9fafb;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s all ease;
    font-size: 14px;
  }
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(37,99,235,.75);
  }
  .btn-primary {
    background: linear-gradient(135deg,#3b82f6,#2563eb);
  }
  .btn-success {
    background: linear-gradient(135deg,#22c55e,#15803d);
  }
  .btn-info {
    background: linear-gradient(135deg,#06b6d4,#0e7490);
  }
  .btn-warning {
    background: linear-gradient(135deg,#f59e0b,#d97706);
  }
  .btn-danger {
    background: linear-gradient(135deg,#ef4444,#b91c1c);
  }
  .btn-pill {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
  }
  .actions {
    display: flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
  }
  .pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 4px 4px;
    font-size: 13px;
    flex-wrap: wrap;
  }
  .pagination-info {
    color: var(--text-soft);
  }
  .pagination-controls {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .pagination-controls .btn {
    min-width: auto;
    padding-inline: 10px;
  }
  .badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
  }
  .b-admin {
    background: #e74c3c;
  }
  .b-user {
    background: #2aa0c3;
  }
  .b-readonly {
    background: #95a5a6;
  }
  .b-ok {
    background: #28a745;
  }
  .b-muted {
    background: #cfd8e3;
    color: #263146;
  }
  .notification {
    position: fixed;
    top: 18px;
    right: 18px;
    padding: 12px 18px;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    z-index: 2147483000;
    animation: slideIn .18s ease-out;
    max-width: 360px;
  }
  .notification.success {
    background: #28a745;
  }
  .notification.error {
    background: #d23b2d;
  }
  .notification.info {
    background: #2aa0c3;
  }
  @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-bg);
    margin: auto;
    max-width: 560px;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,.18);
    border: 1px solid var(--border-subtle);
  }
  .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: 600;
    color: var(--text-main);
  }
  .close {
    font-size: 26px;
    cursor: pointer;
    color: var(--text-soft);
  }
  .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: 600;
    color: var(--text-main);
    font-size: 13px;
  }
  .form-group input, .form-group select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 13px;
    background: var(--table-bg);
    color: var(--text-main);
  }
  .form-group input:focus, .form-group select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .form-group input[readonly] {
    background: var(--card-inner);
    color: var(--text-soft);
  }
  @media (max-width: 768px) {
    .form-row {
      grid-template-columns: 1fr;
    }
  }
  .permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
  }
  .permission-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--card-inner);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
  }
  .permission-item input[type="checkbox"] {
    width: auto;
    margin: 0;
  }
  .permission-item label {
    margin: 0;
    font-weight: 500;
    cursor: pointer;
  }
  .table-container td {
    vertical-align: middle;
  }
  .actions {
    white-space: nowrap;
  }
  .table-container .btn:hover {
    transform: none !important;
  }
  .header-buttons {
    position: fixed;
    right: 14px;
    top: 10px;
    z-index: 9999;
    display: flex;
    gap: 8px;
  }
  .header-btn {
    padding: 8px 10px;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
    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;
  }
  .header-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 15px 30px rgba(0,0,0,.3);
  }
  #tabla-usuarios th + th, #tabla-usuarios td + td {
    border-left: 1px solid var(--border-subtle) !important;
  }
  .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;
  }
  [data-theme="light"] .user-name-btn {
    background: var(--card-inner);
    color: var(--text-main);
    border-color: var(--border-subtle);
  }
  .user-name-btn.role-admin {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
  }
  .user-name-btn.role-superadmin {
    background: linear-gradient(135deg,#7c3aed,#6d28d9);
    border-color: var(--accent);
    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 rgba(0,0,0,.35);
    display: none;
    z-index: 100000;
  }
  [data-theme="light"] .user-dropdown {
    background: var(--card-bg);
    border-color: var(--border-subtle);
  }
  .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: var(--accent-soft);
  }

  .header-buttons .user-menu { display: none !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;
}