/* ============ Consola SCE · Trámites — mobile-first ============ */
:root{
  --navy:#252c4f; --navy2:#2e3763; --navy3:#1d2340; --accent:#2f5aa8; --ink:#1f2547; --grey:#6b7180;
  --line:#e2e4ea; --bg:#eef0f4; --card:#ffffff;
  --ok:#2f6b34; --okb:#e3f0e3; --amb:#8a5a12; --ambb:#fbeed6; --red:#c0392b; --redb:#fbeded;
  --radius:12px; --shadow:0 10px 34px rgba(31,37,71,.10);
  --sidebar-w:240px; --sidebar-rail-w:68px; --topbar-h:56px;
  /* paleta determinística de avatares (iniciales blancas: contraste ≥3:1) */
  --av0:#2f5aa8; --av1:#2f6b34; --av2:#8a5a12; --av3:#a83a5f;
  --av4:#5b3ba2; --av5:#1d7a8a; --av6:#b04a17; --av7:#252c4f;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
.oculto{display:none!important}

/* ============ botones ============ */
.btn{border:none;background:var(--navy);color:#fff;border-radius:9px;padding:10px 16px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px;justify-content:center;transition:.15s}
.btn:hover{filter:brightness(1.08)} .btn:disabled{opacity:.5;cursor:default}
.btn .ti{font-size:16px}
.btn-primario{background:var(--navy)}
.btn-secundario{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:#f2f4f8;filter:none}
.btn-block{width:100%}
.btn-mini{padding:5px 10px;font-size:12px;border-radius:7px}

/* botón-ícono (acciones de tabla, hamburguesa, salir) */
.btn-icono{width:32px;height:32px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--grey);display:inline-grid;place-items:center;font-size:16.5px;cursor:pointer;transition:.15s}
.btn-icono:hover{background:#eef1f7;color:var(--accent);border-color:var(--line)}
.btn-icono.peligro:hover{background:var(--redb);color:var(--red);border-color:#f0cac5}
.btn-icono.claro{color:#dfe4f2;font-size:20px}
.btn-icono.claro:hover{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}

/* ============ sidebar (off-canvas en mobile; colapsable a "rail" en desktop) ============ */
.sidebar{position:fixed;z-index:40;inset:0 auto 0 0;width:var(--sidebar-w);background:var(--navy);color:#dfe4f2;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .22s ease,width .18s ease}
.sidebar.abierta{transform:translateX(0);box-shadow:8px 0 40px rgba(0,0,0,.35)}
body:not(.logueado) .sidebar{display:none}

.sidebar-brand{display:flex;align-items:center;gap:11px;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand-texto{flex:1;min-width:0}
.sidebar-brand strong{display:block;color:#fff;font-size:14.5px;line-height:1.2}
.brand-logo{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;font-size:19px;flex:none}
.brand-logo.grande{width:46px;height:46px;font-size:24px;background:var(--navy);margin:0 auto}
.badge{font-size:9.5px;font-weight:700;letter-spacing:.5px;background:rgba(255,255,255,.16);color:#fff;padding:2px 7px;border-radius:20px}
/* botón de colapsar: solo tiene sentido con el sidebar fijo (desktop); en el
   drawer off-canvas de mobile no se muestra — ese comportamiento no cambia. */
.btn-colapsar{display:none;flex:none}

.sidebar-nav{flex:1;padding:10px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav-grupo{display:flex;flex-direction:column}
.nav-grupo-titulo{width:100%;border:none;background:transparent;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;color:#8b92ad;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:14px 12px 4px;text-align:left}
.nav-grupo:first-child .nav-grupo-titulo{padding-top:4px}
.nav-grupo-titulo:hover{color:#c8cede}
.nav-grupo-chevron{margin-left:auto;font-size:14px!important;transition:transform .15s ease}
.nav-grupo.colapsado .nav-grupo-chevron{transform:rotate(-90deg)}
.nav-grupo-modulos{display:flex;flex-direction:column;gap:2px}
.nav-grupo.colapsado .nav-grupo-modulos{display:none}
.nav-item{position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:#c8cede;text-decoration:none;font-size:13.5px;font-weight:600;transition:.15s}
.nav-item .ti{font-size:19px;flex:none}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.activo{background:rgba(255,255,255,.12);color:#fff}
.nav-item.activo::before{content:'';position:absolute;left:-8px;top:8px;bottom:8px;width:3.5px;border-radius:4px;background:#7ea4e0}
.nav-item.deshabilitado{opacity:.45;pointer-events:none}
.nav-item small{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:rgba(255,255,255,.13);padding:2px 7px;border-radius:20px}

.sidebar-footer{display:flex;align-items:center;gap:10px;padding:14px 14px;border-top:1px solid rgba(255,255,255,.08)}
.avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;font-size:16px;flex:none}
.quien{flex:1;font-size:13px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* backdrop del drawer */
.backdrop{position:fixed;inset:0;z-index:30;background:rgba(20,24,45,.55);opacity:0;pointer-events:none;transition:opacity .22s ease}
.backdrop.visible{opacity:1;pointer-events:auto}

/* ============ contenido + topbar mobile ============ */
.contenido{min-height:100vh;display:flex;flex-direction:column;transition:margin-left .18s ease}
.topbar-mobile{position:sticky;top:0;z-index:20;height:var(--topbar-h);background:var(--navy);color:#fff;display:flex;align-items:center;gap:12px;padding:0 14px}
.brand-mini{font-size:15px;font-weight:700}
body:not(.logueado) .topbar-mobile{display:none}

/* ============ login ============ */
.centro{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);width:100%;max-width:420px;padding:30px 26px}
.card-brand{text-align:center;margin-bottom:14px}
.card h1{font-size:22px;font-weight:700;text-align:center}
.ayuda{color:var(--grey);font-size:13px;margin:4px 0 22px;text-align:center}
.divisor{display:flex;align-items:center;gap:12px;color:var(--grey);font-size:12px;margin:18px 0}
.divisor::before,.divisor::after{content:"";flex:1;height:1px;background:var(--line)}

/* ============ formularios ============ */
label{display:block;font-size:12.5px;color:var(--grey);font-weight:600}
input,select{width:100%;border:1px solid #d7d9e0;border-radius:9px;padding:10px 12px;font-size:13.5px;color:var(--ink);font-family:inherit;margin-top:5px;background:#fff}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,90,168,.12)}
input[readonly],input:disabled{background:var(--bg);color:var(--grey)}
.error{color:var(--red);font-size:12.5px;margin-top:10px}
.campo{margin-bottom:14px}
input.invalido,select.invalido{border-color:var(--red);background:#fffbfb}
input.invalido:focus,select.invalido:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.campo-error{display:none;color:var(--red);font-size:12px;font-weight:600;margin-top:6px}
.campo-error.visible{display:block;animation:aparecer .18s ease}
.campo-ayuda{display:block;color:var(--grey);font-size:11.5px;margin-top:6px}

/* banner de error (login y pantalla de usuario) */
.alerta{display:flex;gap:10px;align-items:flex-start;background:var(--redb);border:1px solid #f0cac5;color:#8c2b21;border-radius:10px;padding:12px 14px;margin-top:18px;font-size:13px;line-height:1.45;animation:aparecer .18s ease}
.alerta strong{display:block;font-size:13px;margin-bottom:2px;color:#7a2118}
.alerta-icono{flex:none;font-size:18px;margin-top:1px;color:var(--red)}
.alerta-acciones{margin-top:10px}
.alerta-acciones:empty{display:none}
@keyframes aparecer{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============ panel ============ */
/* 1480px: aprovecha pantallas anchas (antes 1120px dejaba gutters grises
   enormes en monitores anchos). La pantalla de alta/edición de usuario usa
   el mismo ancho que el resto — lo angosto es solo el grid de 2 columnas
   de "Datos personales" (.form-grilla, más abajo), no la pantalla entera:
   así la tarjeta blanca y el resto de los tabs (Roles/Áreas) aprovechan el
   ancho igual que las demás pantallas, sin estirar cada input a lo ancho. */
.panel{width:100%;max-width:1480px;margin:0 auto;padding:20px 16px 60px}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.panel-header h1{font-size:21px;font-weight:700}

.filtros{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.buscador{position:relative;flex:1;min-width:200px}
.buscador .ti{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--grey);font-size:16px;pointer-events:none}
.buscador input{margin-top:0;padding-left:34px}
.filtros select{width:auto;min-width:170px;margin-top:0}

/* ============ chips con punto de color ============ */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:capitalize}
.chip::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.chip-activo{background:var(--okb);color:var(--ok)}
.chip-suspendido{background:var(--ambb);color:var(--amb)}
.chip-baja{background:#eceef2;color:var(--grey)}

/* ============ lista: cards en mobile, tabla en desktop ============ */
/* Llena el ancho del .panel (sin tope propio): .panel es transparente (usa
   el fondo gris de body), asi que un max-width mas angosto aca no reduce
   nada visible — solo desplaza el mismo gris de "afuera del panel" a
   "adentro del panel, alrededor de la tabla". Las columnas angostas (Orden,
   Estado) se resuelven con anchos de columna, no achicando la tabla entera. */
.tabla{width:100%;border-collapse:separate;border-spacing:0}
.tabla thead{display:none}
.tabla,.tabla tbody{display:block}
.tabla tr{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;box-shadow:0 2px 10px rgba(31,37,71,.05);transition:box-shadow .15s ease}
.tabla tr:hover{box-shadow:0 5px 16px rgba(31,37,71,.10)}
.tabla td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0;font-size:13.5px;border:none}
.tabla td::before{content:attr(data-label);color:var(--grey);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.tabla td.c-acciones{justify-content:flex-end;padding-top:10px;margin-top:6px;border-top:1px dashed var(--line)}
.tabla td.c-acciones::before{content:none}
.tabla td.c-vacio{justify-content:center;color:var(--grey);padding:20px 0}
.tabla td.c-vacio::before{content:none}
.acciones{display:flex;gap:6px}

.paginacion{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;color:var(--grey);font-size:13px;flex-wrap:wrap}
.paginacion .ti{font-size:14px}

/* ============ pantalla de usuario (alta/edición) ============ */
.btn-volver{margin-bottom:16px}
.usuario-header{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.avatar-iniciales{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:700;color:#fff;letter-spacing:.5px;flex:none;background:var(--av0)}
.avatar-c0{background:var(--av0)}.avatar-c1{background:var(--av1)}.avatar-c2{background:var(--av2)}.avatar-c3{background:var(--av3)}
.avatar-c4{background:var(--av4)}.avatar-c5{background:var(--av5)}.avatar-c6{background:var(--av6)}.avatar-c7{background:var(--av7)}
/* con foto: la iniciales queda oculta detrás de la imagen (background-image via objectURL) */
.avatar-iniciales.avatar-con-foto{background-image:var(--foto);background-size:cover;background-position:center;color:transparent}
.usuario-header-info{flex:1;min-width:160px}
.usuario-header-info h1{font-size:20px;font-weight:700;line-height:1.2}
.usuario-header-info h1:focus{outline:none}
.usuario-sub{color:var(--grey);font-size:12.5px;margin-top:3px}

/* foto de perfil: preview grande + dropzone */
.foto-perfil{display:flex;gap:18px;align-items:flex-start;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line);flex-wrap:wrap;max-width:640px}
.avatar-grande{width:88px;height:88px;font-size:30px;flex:none}
.foto-perfil-info{flex:1;min-width:240px}
.tab-titulo-sinmargen{margin-bottom:2px}
.foto-perfil #avatar-error{margin-top:8px}

/* Dropzone.js reestilizado con los tokens del proyecto (sin su look default) */
.dropzone.dz-clickable{border:2px dashed #c7cbd6;border-radius:10px;background:var(--bg);min-height:76px;padding:14px;margin-top:10px;cursor:pointer;transition:.15s;position:relative}
.dropzone.dz-clickable:hover,.dropzone.dz-drag-hover{border-color:var(--accent);background:#eef2fa}
.dropzone .dz-message{margin:0;font-size:13px;color:var(--grey);text-align:left;display:flex;align-items:center;gap:8px}
.dropzone .dz-message .ti{font-size:20px;color:var(--accent);flex:none}
.dropzone .dz-preview{display:none} /* el preview propio es #avatar-preview / #usr-avatar */
.dropzone .dz-progress-inline{position:absolute;inset:auto 14px 10px 14px;height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.dropzone .dz-progress-inline .dz-progress-fill{height:100%;background:var(--accent);transition:width .15s}
.dropzone.dz-started .dz-message{opacity:.5}

/* estado de carga con layout estable */
.cargando-bloque{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;color:var(--grey);font-size:13.5px}
.spinner{width:18px;height:18px;border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:girar .8s linear infinite;flex:none}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* tabs (en mobile scrollean horizontal) */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:none;background:transparent;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--grey);padding:12px 14px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border-bottom:2.5px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
.tab .ti{font-size:17px}
.tab:hover:not(:disabled){color:var(--ink)}
.tab.activo{color:var(--accent);border-bottom-color:var(--accent)}
.tab:disabled{opacity:.45;cursor:not-allowed}
.tab:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(47,90,168,.25);border-radius:9px 9px 0 0}

/* paneles de tab */
.tab-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px}
.tab-titulo{font-size:14.5px;font-weight:700;margin-bottom:10px}
.ayuda-seccion{color:var(--grey);font-size:12.5px;margin:-4px 0 12px}
.panel-acciones{display:flex;justify-content:flex-end;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}

/* formulario de datos: 2 columnas en desktop, 1 en mobile. Ancho propio
   (no ocupa el .tab-panel entero): son pares label+input, no tablas — a
   todo el ancho de un .panel de 1480px cada input quedaria gigante. */
.form-grilla{display:grid;grid-template-columns:1fr;gap:0 18px;max-width:640px}
.campo-check{position:relative;margin-top:5px}
.campo-check input{margin-top:0;padding-right:38px}
.campo-check .ti{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:17px}
.check-ok{color:var(--ok)}

/* roles: chips con quitar + selector para agregar */
.chips-roles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip-rol{display:inline-flex;align-items:center;gap:4px;background:rgba(47,90,168,.10);color:var(--accent);border:1px solid rgba(47,90,168,.25);border-radius:20px;padding:4px 5px 4px 12px;font-size:12.5px;font-weight:600}
.chip-rol button{border:none;background:transparent;color:inherit;cursor:pointer;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:14px}
.chip-rol button:hover{background:rgba(47,90,168,.18)}
.lista-vacia{color:var(--grey);font-size:13px}
.agregar-rol{display:flex;gap:10px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.agregar-rol select{flex:1;min-width:180px;max-width:340px;margin-top:0}

/* permisos efectivos (solo lectura, por módulo) */
.permisos{display:grid;gap:10px}
.permiso-grupo{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.permiso-grupo h3{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--grey);margin-bottom:7px}
.permiso-item{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0}
.permiso-item .ti{color:var(--ok);font-size:15px;flex:none}
.permiso-item code{margin-left:auto;color:var(--grey);font-size:11px;font-family:ui-monospace,Consolas,monospace}

/* áreas: combo buscable (árbol por unidad ejecutora) + tabla de asignadas */
.combo-buscador{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;flex-wrap:wrap}
.combo-campo{position:relative;flex:1;min-width:220px}
.combo-campo .ti{position:absolute;left:11px;top:14px;color:var(--grey);font-size:16px;pointer-events:none}
.combo-campo input[type="text"]{padding-left:34px;margin-top:0}
.combo-opciones{position:absolute;z-index:5;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);list-style:none;padding:6px}
.combo-opciones li[role="option"]{padding:8px 10px;border-radius:7px;font-size:13.5px;cursor:pointer}
.combo-opciones li[role="option"]:hover,.combo-opciones li[role="option"]:focus{background:var(--bg)}
.combo-opciones li[role="option"] strong{font-weight:700}
.combo-grupo{padding:8px 10px 3px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--grey)}
.combo-vacio{padding:10px;font-size:13px;color:var(--grey)}

.tabla-simple{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:8px}
.tabla-simple thead{display:none}
.tabla-simple td{padding:10px 14px;border-top:1px solid #eef0f4;font-size:13.5px;vertical-align:middle}
.tabla-simple tr:first-child td{border-top:none}
.tabla-simple .col-estrella,.tabla-simple .col-quitar{width:44px;text-align:center;padding:6px 8px}
.tabla-simple .c-vacio{text-align:center;color:var(--grey);padding:22px}
.fila-sub{display:block;color:var(--grey);font-size:11.5px;margin-top:1px;font-weight:400}
.btn-estrella{width:38px;height:38px;font-size:18px;flex:none;border-radius:50%}
/* @tabler/icons-webfont vendorizado solo trae outline (sin variante -filled):
   el estado activo se distingue por color + fondo circular persistente (no solo hover),
   no por cambiar de ícono a uno "relleno" que no existe en la webfont. */
.btn-estrella.estrella-activa{color:var(--amb);background:var(--ambb);border-color:#f3dcae}
.btn-estrella.estrella-activa:hover{color:var(--amb);background:#f6e4bc}
.btn-estrella:disabled{opacity:.35;cursor:default}
.btn-estrella:disabled:hover{background:transparent;border-color:transparent;color:var(--grey)}

/* SweetAlert alineado a la marca (solo panel: toasts y confirmaciones) */
.swal2-styled.swal2-confirm{background:var(--navy)!important}
.swal2-styled.swal2-cancel{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)!important}
.swal2-popup{border-radius:16px!important;font-family:'Helvetica Neue',Arial,sans-serif!important}

/* ============ tablet/desktop ============ */
@media (min-width:640px){
  .form-grilla{grid-template-columns:1fr 1fr}
}

/* ============ desktop ≥769px ============ */
@media (min-width:769px){
  .topbar-mobile{display:none}
  body:not(.logueado) .contenido{margin-left:0}
  .sidebar{transform:none;box-shadow:none}
  .backdrop{display:none}
  body.logueado .contenido{margin-left:var(--sidebar-w)}
  .panel{padding:28px 28px 60px}
  .panel-header h1{font-size:24px}
  .panel-header .btn span{display:inline}
  .btn-colapsar{display:inline-grid}

  /* rail: el menú se reduce a solo íconos para liberar ancho al módulo activo.
     Estado persistido en localStorage (sce_sidebar_colapsado); no aplica a
     mobile (ahí el sidebar es off-canvas y esta clase no tiene efecto). */
  .sidebar.colapsado{width:var(--sidebar-rail-w)}
  /* .logueado en el selector (no solo .sidebar-colapsado): más específico que
     "body:not(.logueado) .contenido{margin-left:0}" a propósito — la preferencia
     de colapsado puede venir de localStorage y aplicarse antes del login. */
  body.logueado.sidebar-colapsado .contenido{margin-left:var(--sidebar-rail-w)}
  .sidebar.colapsado .sidebar-brand{justify-content:center;padding:18px 8px}
  .sidebar.colapsado .sidebar-brand-texto,
  .sidebar.colapsado .nav-grupo-titulo span,
  .sidebar.colapsado .nav-grupo-chevron,
  .sidebar.colapsado .nav-item span,
  .sidebar.colapsado .nav-item small,
  .sidebar.colapsado .quien{display:none}
  .sidebar.colapsado .nav-grupo-titulo{justify-content:center;padding:14px 4px 4px}
  /* sin chevron ni texto visibles no hay accordeón que mostrar: en rail
     siempre se ven todos los íconos de módulo, sin importar el estado
     expandido/colapsado que el usuario haya guardado para el grupo. */
  .sidebar.colapsado .nav-grupo-modulos{display:flex!important}
  .sidebar.colapsado .nav-item{justify-content:center;padding:11px}
  .sidebar.colapsado .sidebar-footer{justify-content:center;gap:14px;padding:14px 6px}
  .sidebar.colapsado .btn-colapsar{margin:0}

  /* la lista vuelve a ser tabla */
  .tabla{display:table;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .tabla thead{display:table-header-group}
  .tabla tbody{display:table-row-group}
  .tabla tr{display:table-row;background:transparent;border:none;border-radius:0;padding:0;margin:0;box-shadow:none}
  .tabla th{background:#f5f7fb;text-align:left;padding:11px 14px;font-size:11.5px;color:#3a4256;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
  .tabla th.th-acciones{text-align:right}
  .tabla td{display:table-cell;padding:10px 14px;border-top:1px solid #eef0f4;font-size:13.5px}
  .tabla td::before{content:none}
  .tabla tbody tr:hover td{background:#f8fafd}
  .tabla td.c-acciones{border-top:1px solid #eef0f4;margin:0;padding-top:10px}
  .acciones{justify-content:flex-end}
  .tabla td.c-vacio{display:table-cell;text-align:center;padding:26px}

  /* pantalla de usuario */
  .usuario-header-info h1{font-size:23px}
  .tab-panel{padding:24px 22px}
}

/* tarjetas mobile: CUIL destacado */
@media (max-width:768px){
  .tabla td[data-label="CUIL"]{font-weight:700;font-size:15px;letter-spacing:.2px}
}

/* mobile fino */
@media (max-width:480px){
  .panel-header .btn span{display:none}
  .panel-header .btn{padding:10px 12px}
}

/* ============ chip inactivo (baja lógica en los ABMs de Configuración) ============ */
.chip-inactivo{background:#eceef2;color:var(--grey)}

/* ============ modal genérico de los ABMs (dialog nativo centrado) ============ */
dialog{margin:auto;inset:0;border:none;border-radius:16px;padding:22px 22px 20px;width:calc(100% - 32px);max-width:480px;box-shadow:var(--shadow);max-height:calc(100vh - 32px);overflow-y:auto}
dialog::backdrop{background:rgba(20,24,45,.5);backdrop-filter:blur(3px)}
dialog[open]{animation:modalIn .18s ease}
dialog.cerrando{animation:modalOut .18s ease forwards}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes modalOut{to{opacity:0;transform:translateY(10px) scale(.97)}}
@media (prefers-reduced-motion:reduce){dialog[open],dialog.cerrando{animation:none}}
.modal-titulo{font-size:17px;font-weight:700;margin-bottom:16px}
.modal-acciones{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.campo-checkbox{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.campo-checkbox input{width:18px;height:18px;margin-top:0;flex:none}
.campo-checkbox label{margin:0;font-size:13px;color:var(--ink);font-weight:500}

/* ============ Roles y accesos ============ */
.roles-layout{display:flex;flex-direction:column;gap:18px}
.roles-lista-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px}
.lista-roles{list-style:none;display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto}
.lista-roles li{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lista-roles button{flex:1;text-align:left;background:transparent;border:none;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);padding:10px 12px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:8px;justify-content:space-between}
.lista-roles button:hover{background:#f2f4f8}
.lista-roles button.activo{background:rgba(47,90,168,.10);color:var(--accent)}
.lista-roles .chip{flex:none}

.roles-detalle{min-height:200px}
.rol-detalle-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.rol-detalle-header h2{font-size:19px;font-weight:700;display:inline;margin-right:8px}
.rol-seccion{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;margin-bottom:18px}

.matriz-modulos{display:grid;gap:14px}
.matriz-grupo h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--grey);margin-bottom:8px}
.matriz-grupo-items{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.matriz-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;background:var(--bg)}
.matriz-item input{width:17px;height:17px;margin-top:0;flex:none}
.matriz-item label{margin:0;font-size:13px;color:var(--ink);font-weight:500;display:flex;align-items:center;gap:6px;flex:1;cursor:pointer}
.matriz-item .ti{font-size:15px;color:var(--grey)}

/* auto-fill: en panchas anchas entran varias tarjetas de módulo por fila en
   vez de una sola columna larga y angosta — mismo criterio que .matriz-grupo-items. */
.matriz-permisos{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));align-items:start}
.matriz-permisos .permiso-grupo{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.matriz-permisos .permiso-item-check{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px}
.matriz-permisos .permiso-item-check input{width:16px;height:16px;margin-top:0;flex:none}
.matriz-permisos .permiso-item-check label{margin:0;font-weight:500;color:var(--ink);cursor:pointer;flex:1}
.matriz-permisos .permiso-item-check code{color:var(--grey);font-size:11px;font-family:ui-monospace,Consolas,monospace}

/* preview del menú: mismo componente visual del sidebar real, sin navegar */
.preview-menu{background:var(--navy);border-radius:var(--radius);padding:10px 8px;max-width:260px}
.preview-menu .nav-item{cursor:default}
.preview-menu .nav-item:hover{background:transparent;color:#c8cede}
.preview-menu-vacio{color:#c8cede;font-size:12.5px;padding:10px 12px}

@media (min-width:900px){
  .roles-layout{flex-direction:row;align-items:flex-start}
  .roles-lista-panel{width:260px;flex:none}
  .lista-roles{max-height:calc(100vh - 220px)}
  .roles-detalle{flex:1;min-width:0}
}