/* Usuarios (R-02): CSS movido desde el <style> inline del componente a un modulo global
   (patron de tareas.css/pqrs.css). Enlazado en App.razor. Reglas identicas; @@->@ desescapado. */
    /* Tabs simples Activos/Pendientes/Inactivos (reemplazan las tarjetas KPI que hacian de tabs). */
    .usr-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--propia-border-card); }
    .usr-tab { padding: 9px 16px; border: 0; background: transparent; color: var(--propia-text-muted); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; }
    .usr-tab:hover { color: var(--propia-brand, var(--propia-brand)); }
    .usr-tab.active { color: var(--propia-brand, var(--propia-brand)); border-bottom-color: var(--propia-brand, var(--propia-brand)); }
    /* Sin max-width ni centrado: la vista llena TODO el ancho (fiel al ancho de pantalla, como Mascotas).
       Antes max-width:1900 + margin:0 auto la dejaba centrada con espacio a los lados en pantallas anchas. */
    .usr-wrap { width:100%; padding:6px 0 60px; box-sizing:border-box; }
    .usr-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
    .usr-title { font-size:27px; font-weight:800; letter-spacing:-.6px; color:var(--propia-text-h1); margin:0; }
    .usr-sub { font-size:14px; color:var(--propia-text-muted); margin-top:4px; margin-bottom:0; }

    .usr-btn-primary { display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:10px; background:var(--propia-brand); color: var(--propia-text-inverse); font-size:13px; font-weight:700; border:none; box-shadow:0 6px 16px rgba(109,79,227,.3); cursor:pointer; }
    .usr-btn-primary:hover { background:var(--propia-brand-hover); }
    .usr-btn-primary:disabled { opacity:.55; cursor:default; box-shadow:none; }
    .usr-btn-ghost { display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border-radius:10px; border:1px solid var(--propia-border-card); background:var(--propia-bg-card); font-size:13px; font-weight:600; color:var(--propia-text-secondary); cursor:pointer; }
    .usr-btn-ghost:hover { border-color:var(--propia-text-faint); color:var(--propia-text-body); }

    .usr-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
    .usr-stat { background:var(--propia-bg-card); border:1px solid var(--propia-border-card); border-radius:14px; padding:18px; box-shadow:0 1px 2px rgba(45,62,80,.05); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
    .usr-stat:hover { border-color:var(--propia-text-faint); }
    .usr-stat.active { border-color:var(--propia-brand); box-shadow:0 0 0 1px var(--propia-brand); }
    .usr-stat-label { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--propia-text-muted); }
    .usr-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
    .usr-stat-num { font-size:30px; font-weight:800; color:var(--propia-text-h1); letter-spacing:-1px; margin-top:5px; }

    .usr-tabs { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--propia-border-card); }
    .usr-tab { padding:11px 4px; margin-right:18px; font-size:14px; font-weight:700; color:var(--propia-text-faint); border:none; background:none; border-bottom:2.5px solid transparent; cursor:pointer; }
    .usr-tab.active { color:var(--propia-brand); border-bottom-color:var(--propia-brand); }

    .usr-search { width:100%; max-width:380px; border:1px solid var(--propia-border-card); border-radius:9px; padding:9px 12px; font-size:13.5px; color:var(--propia-text-body); outline:none; background:var(--propia-bg-card); margin:14px 0; }
    .usr-search:focus { border-color:var(--propia-brand); }
    /* Toolbar de filtros + vista (2.5.C) */
    .usr-toolbar2 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0; }
    .usr-toolbar2 .usr-search { margin:0; flex:1 1 320px; }
    .usr-fsel { border:1px solid var(--propia-border-card); border-radius:9px; padding:9px 12px; font-size:13px; color:var(--propia-text-body); background:var(--propia-bg-card); outline:none; cursor:pointer; }
    .usr-fsel:focus { border-color:var(--propia-brand); }
    /* Toggle de vista: mismo lenguaje que el del Directorio (texto + icono). */
    /* Toggle segmentado tipo pildora (milimetrico a Zonas/Equipos/Unidades). */
    .usr-viewtoggle { display:inline-flex; gap:3px; background:var(--propia-bg-app); border:1px solid var(--propia-border-card); border-radius:11px; padding:4px; margin-left:auto; }
    .usr-vbtn { display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; color:var(--propia-text-secondary); font-size:13px; font-weight:600; padding:8px 15px; border-radius:8px; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .14s, color .14s, box-shadow .14s; }
    .usr-vbtn:hover { color:var(--propia-text-body); background:var(--propia-bg-hover); }
    .usr-vbtn.on { background:var(--propia-bg-card); color:var(--propia-brand); box-shadow:0 1px 3px rgba(27,42,58,.12); }

    /* Zona derecha del toolbar: menu Columnas + toggle de vista. */
    .usr-bar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
    /* Menu "Columnas" (orden/visibilidad; SIN "+"/engranaje/borrar: Usuarios no tiene campos propios). */
    .usr-menu-wrap { position:relative; }
    .usr-fbtn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--propia-border-card); border-radius:9px; padding:8px 12px; font-size:13px; font-weight:600; color:var(--propia-text-secondary); background:var(--propia-bg-card); cursor:pointer; font-family:inherit; }
    .usr-fbtn:hover { border-color:var(--propia-brand); }
    .usr-fbtn.on { border-color:var(--propia-brand); color:var(--propia-brand); background:var(--propia-brand-soft); font-weight:700; }
    .usr-menu-bd { position:fixed; inset:0; z-index:40; }
    .usr-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:41; min-width:190px; background:var(--propia-bg-card); border:1px solid var(--propia-border-card); border-radius:12px; box-shadow:0 12px 30px rgba(30,40,60,.18); padding:6px; }
    .usr-colmenu { min-width:252px; }
    .usr-col-search { display:flex; align-items:center; gap:7px; border:1px solid var(--propia-border-card); border-radius:8px; padding:0 9px; background:var(--propia-bg-card); margin-bottom:6px; }
    .usr-col-search svg { color:var(--propia-text-faint); flex-shrink:0; }
    .usr-col-search input { border:0; outline:none; background:transparent; padding:7px 0; font-size:12.5px; color:var(--propia-text-body); font-family:inherit; width:100%; }
    .usr-col-list { display:flex; flex-direction:column; max-height:320px; overflow:auto; }
    .usr-col-it { display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:7px; }
    .usr-col-it:hover { background:var(--propia-brand-soft-2); }
    .usr-col-mv { width:22px; height:22px; border:1px solid var(--propia-border-card); background:var(--propia-bg-card); border-radius:6px; cursor:pointer; color:var(--propia-text-muted); font-size:10px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
    .usr-col-mv:hover:not(:disabled) { color:var(--propia-brand); border-color:var(--propia-brand); }
    .usr-col-mv:disabled { opacity:.35; cursor:default; }
    .usr-col-name { flex:1; font-size:13px; color:var(--propia-text-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .usr-col-fija { font-size:10.5px; color:var(--propia-text-faint); background:var(--propia-bg-app); border:1px solid var(--propia-border-card); border-radius:6px; padding:2px 7px; }
    .usr-col-eye { width:26px; height:24px; border:1px solid var(--propia-border-card); background:var(--propia-bg-card); border-radius:6px; cursor:pointer; color:var(--propia-text-faint); display:inline-flex; align-items:center; justify-content:center; }
    .usr-col-eye.on { color:var(--propia-brand); border-color:var(--propia-brand-border); }
    /* Badge de campo personalizado (din) y borrar campo (trash), espejo de .dst-col-dyn / .dst-col-del. */
    .usr-col-dyn { font-size:9px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:var(--propia-brand); background:var(--propia-brand-soft); border-radius:5px; padding:1px 5px; margin-left:4px; }
    .usr-col-del { width:26px; height:24px; border:1px solid var(--propia-border-card); background:var(--propia-bg-card); border-radius:6px; cursor:pointer; color:var(--propia-text-faint); display:inline-flex; align-items:center; justify-content:center; }
    .usr-col-del:hover { color:var(--propia-danger); border-color:var(--propia-danger); }
    .usr-col-massacts { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px solid var(--propia-border-divider); }
    .usr-col-mass { flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 8px; border:1px solid var(--propia-border-card); background:var(--propia-bg-card); border-radius:8px; cursor:pointer; font-size:11.5px; font-weight:700; color:var(--propia-text-secondary); font-family:inherit; white-space:nowrap; }
    .usr-col-mass:hover { border-color:var(--propia-brand); color:var(--propia-brand); }
    .usr-col-reset { flex:1 1 100%; padding:8px; border:1px dashed var(--propia-border-card-2); background:transparent; border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--propia-text-secondary); font-family:inherit; }
    .usr-col-reset:hover { color:var(--propia-brand); border-color:var(--propia-brand); }

    /* Barra de seleccion multiple + dialogo de confirmacion (revocar masivo). */
    .usr-selbar { display:flex; align-items:center; gap:12px; padding:8px 14px; background:var(--propia-brand-soft); border:1px solid var(--propia-brand-border); border-radius:10px; margin-bottom:10px; }
    .usr-selbar-n { font-size:12.5px; font-weight:800; color:var(--propia-brand); }
    .usr-selbar-del { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--propia-danger-soft); background:var(--propia-bg-card); color:var(--propia-danger); font-size:12px; font-weight:700; cursor:pointer; border-radius:8px; padding:5px 11px; font-family:inherit; margin-left:auto; }
    .usr-selbar-del:hover:not(:disabled) { background:var(--propia-danger-soft); }
    .usr-selbar-del:disabled { opacity:.6; cursor:default; }
    .usr-selbar-x { border:0; background:transparent; color:var(--propia-brand); font-size:12px; font-weight:700; cursor:pointer; text-decoration:underline; }
    .usr-cfg-back { position:fixed; inset:0; background:rgba(20,26,38,.45); display:flex; align-items:center; justify-content:center; z-index:3000; padding:20px; }
    .usr-confirm { background:var(--propia-bg-card); border-radius:14px; width:440px; max-width:calc(100vw - 32px); box-shadow:0 20px 60px rgba(20,30,50,.3); padding:18px 20px 16px; }
    .usr-confirm-t { font-size:15px; font-weight:800; color:var(--propia-text-h1); }
    .usr-confirm-s { font-size:12.5px; color:var(--propia-text-muted); margin:6px 0 14px; }
    .usr-confirm-acts { display:flex; justify-content:flex-end; gap:10px; }
    /* Avatares con foto */
    .usr-av-img { object-fit:cover; border-radius:11px; }
    .usr-av-edit { position:relative; width:64px; height:64px; flex-shrink:0; }
    .usr-av-cam { position:absolute; right:-4px; bottom:-4px; width:24px; height:24px; border-radius:50%; background:var(--propia-brand); color: var(--propia-text-inverse); display:flex; align-items:center; justify-content:center; cursor:pointer; border:2px solid var(--propia-bg-card); box-shadow:0 1px 3px rgba(45,62,80,.25); }

    /* ---- Vista Tabla (utb-*): la usa UsuariosTablaVista. Vive aqui, en la pagina, y no
       en el componente: los estilos declarados dentro de un componente solo estan en el
       DOM mientras ese componente se renderiza. ---- */
    /* Contenedor de scroll de la tabla (vertical + horizontal): el header queda sticky arriba y el
       scroll vertical dispara dstInfinite (FAB). overflow-anchor:none evita saltos al crecer la lista. */
    .utb-scroll { overflow:auto; max-height:calc(100vh - 330px); overflow-anchor:none; }
    /* Ajustado para que la fila entera (incluido el "+" de confirmar) quepa sin scroll
       horizontal en una pantalla normal; con menos ancho, .utb-scroll se encarga. */
    /* grid-template-columns lo fija cada fila con estilo inline (GridStyle del padre), porque las
       columnas son configurables (orden/visibilidad/ancho). Aqui solo el resto del grid. */
    /* padding-left:0: la 1a columna (checkbox) arranca pegada al borde como Unidades. */
    .utb-grid { display:grid; align-items:center; gap:12px; padding:10px 18px 10px 0; min-width:1040px; }
    /* Header 1:1 con Unidades (F2 Ola B): 11.5/text-secondary/border-card + STICKY (le faltaba) +
       padding vertical 0 (va a las celdas, para separador full-height). */
    /* Header alineado al canon .tbl (tabla-base.css / maqueta): peso 600 + color text-h1 (antes 700 +
       text-secondary), separador border-right + sombra inset. Igual que Pendientes y Unidades. */
    .utb-head { background:var(--propia-bg-table-head); font-size:11.5px; font-weight:600; color:var(--propia-text-h1); letter-spacing:.4px; text-transform:uppercase; border-bottom:1px solid var(--propia-border-card); position:sticky; top:0; z-index:6; padding:0 18px 0 0; }
    /* Separadores full-height entre columnas de datos. Layout Usuarios: [sel][data..][dyn..][addcol][empty]
       (sin columna expander) -> se exceptuan sel (1a), addcol (penultima) y empty (ultima). */
    .utb-head.utb-grid > div { align-self:stretch; display:flex; align-items:center; padding-top:10px; padding-bottom:10px; border-right:1px solid var(--propia-border-card); box-shadow:inset -1px 0 0 var(--propia-border-card); }
    .utb-head.utb-grid > div:first-child, .utb-head.utb-grid > div:nth-last-child(2), .utb-head.utb-grid > div:last-child { border-right:0; box-shadow:none; }
    /* Cabecera ordenable + reordenable + redimensionable (clic ordena; flecha ▲/▼; handle a la
       derecha para el ancho). Patron Zonas/Equipos. */
    .utb-th-sortable { display:flex; align-items:center; gap:4px; min-width:0; position:relative; cursor:pointer; user-select:none; }
    .utb-th-sortable:hover .utb-th-lbl { color:var(--propia-brand); }
    .utb-th-lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .utb-th-arrow { flex:0 0 auto; font-size:8px; color:var(--propia-brand); line-height:1; }
    .utb-col-rz { position:absolute; top:0; right:-4px; width:8px; height:100%; cursor:col-resize; z-index:3; }
    .utb-col-rz::after { content:""; position:absolute; top:4px; bottom:4px; left:3px; width:2px; border-radius:2px; background:transparent; transition:background .12s; }
    .utb-col-rz:hover::after { background:var(--propia-brand); }
    /* Seleccion multiple (revocar masivo). */
    .utb-sel-cell { display:flex; align-items:center; justify-content:center; padding:0 4px; }
    .utb-chk { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
    .utb-chk input { width:16px; height:16px; accent-color:var(--propia-brand); cursor:pointer; margin:0; }
    .utb-row-sel { background:var(--propia-brand-soft) !important; }
    .utb-row { border-bottom:1px solid var(--propia-border-divider); font-size:13px; color:var(--propia-text-body); }
    .utb-row:hover { background:var(--propia-bg-card-soft); }
    /* Cabecera de grupo con totales por columna: mismo grid que las filas (UtbGridStyleU inline); franja al
       nivel del contenedor (cubre toda la fila); totales alineados a la derecha de su columna. */
    .utb-grouprow { padding:8px 18px 8px 0; border-bottom:1px solid var(--propia-border-divider); }
    .utb-grouprow.utb-gl0 { background:var(--propia-brand-soft-2, var(--propia-brand-soft)); }
    .utb-grouprow.utb-gl1 { background:var(--propia-bg-card-soft); }
    .utb-grouprow.utb-gl2 { background:var(--propia-bg-card); }
    .utb-grouplead { display:flex; align-items:center; gap:8px; }
    .utb-groupagg { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; font-size:12px; font-weight:700; color:var(--propia-text-h1); }
    .utb-groupagg .utb-aggtag { margin-left:5px; font-size:9px; font-weight:800; letter-spacing:.4px; color:var(--propia-text-faint); }
    .utb-c { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .utb-link { border:0; background:transparent; text-align:left; padding:0; font-size:13px; font-weight:600; color:var(--propia-brand); cursor:pointer; font-family:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .utb-link:hover { text-decoration:underline; }
    .utb-badge { font-size:11px; font-weight:600; color:var(--propia-text-secondary); background:var(--propia-border-divider); padding:2px 8px; border-radius:6px; }
    .utb-badge--ok { color:var(--propia-success-hover); background:var(--propia-ok-soft); }
    /* 2.5 v2.0: KPIs encima de la tabla. */
    .usr-kpis { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
    .usr-kpi { flex:0 1 auto; min-width:150px; padding:12px 16px; border:1px solid var(--propia-border-card); border-radius:12px; background:var(--propia-bg-card); }
    .usr-kpi-n { font-size:22px; font-weight:800; color:var(--propia-text-h1); line-height:1.1; }
    .usr-kpi-l { font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--propia-text-faint); margin-top:3px; }
    /* Rol como chips (varios) en la celda; tono brand suave. */
    .utb-c-chips { display:flex; flex-wrap:wrap; gap:4px; align-items:center; overflow:hidden; }
    .usr-rolchip { display:inline-block; padding:3px 9px; border-radius:7px; font-size:11px; font-weight:700; background:var(--propia-brand-soft); color:var(--propia-brand-text-2); white-space:nowrap; }
    .usr-cargochip { display:inline-block; padding:3px 9px; border-radius:7px; font-size:11px; font-weight:700; background:var(--propia-border-divider); color:var(--propia-text-body); white-space:nowrap; }
    /* Estado: badge con 4 valores (ok/warn/info/danger). */
    .usr-est { display:inline-block; padding:3px 10px; border-radius:7px; font-size:11.5px; font-weight:700; white-space:nowrap; }
    .usr-est--ok { background:var(--propia-ok-soft); color:var(--propia-success-hover); }
    .usr-est--warn { background:var(--propia-warning-bg); color:var(--propia-warning); }
    .usr-est--info { background:var(--propia-info-bg); color:var(--propia-info); }
    .usr-est--danger { background:var(--propia-danger-soft); color:var(--propia-error-strong, var(--propia-danger)); }
    .utb-act { display:flex; justify-content:flex-end; }
    .utb-icon { width:26px; height:26px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:7px; background:transparent; color:#94A9BF; cursor:pointer; }
    .utb-icon:hover { background:var(--propia-brand-soft); color:var(--propia-brand); }
    /* Fila de alta al canon Unidades (.newrow--edit): fila tenida de violeta-soft-2 mientras se captura. */
    .utb-newrow { background:var(--propia-brand-soft-2); }
    /* Ola C: fila CTA colapsada (como la .newrow con row-add--sm de Unidades). */
    /* Fila CTA de alta como fila-grid: el boton arranca bajo la 1a columna de datos (canon Unidades). */
    .utb-cta-row { padding:8px 18px; border-top:1px solid var(--propia-border-divider); }
    .utb-cta-btncell { grid-column:3 / -1; display:flex; align-items:center; }
    /* E1b: boton "+" para crear un rol basico inline junto al select de Rol. */
    .utb-rol-add { flex:0 0 auto; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--propia-brand-border); background:var(--propia-brand-soft); color:var(--propia-brand); border-radius:7px; font-size:16px; line-height:1; cursor:pointer; font-family:inherit; }
    .utb-rol-add:hover { background:var(--propia-brand-soft); filter:brightness(.98); }
    .utb-nf-nombre { display:grid; grid-template-columns:1fr 1fr; gap:6px; min-width:0; }
    .utb-nf-mut { color:var(--propia-text-faint); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    /* Input de alta al canon .nf-in: sin borde en reposo (transparente); el foco dibuja marco brand 1.5px
       + glow radio 8 (mismo look de Unidades Privadas), sin doble borde. */
    .utb-inp { width:100%; min-width:0; box-sizing:border-box; border:1px solid transparent; border-radius:8px; padding:10px 12px; font-size:13px; color:var(--propia-text-body); outline:none; background:transparent; font-family:inherit; box-shadow:none; transition:border-color .12s, box-shadow .12s; }
    .utb-inp:focus, .utb-inp:focus-visible { border:1.5px solid var(--propia-brand); box-shadow:0 0 0 3px rgba(109,79,227,.14); }
    .utb-inp::placeholder { color:var(--propia-text-faint); }
    .utb-inp-tipo { width:62px; flex-shrink:0; }
    .utb-nf-first { display:flex; align-items:center; gap:6px; min-width:0; }
    /* Boton de alta canonico "+ Agregar" (espejo de .dtab-add / zc-row-add): violeta suave, SIEMPRE
       habilitado; la validacion se hace al clic con toast (no se deshabilita por borrador invalido). */
    .utb-add { display:inline-flex; align-items:center; gap:4px; padding:6px 10px; border-radius:7px; border:1px solid var(--propia-brand-border); background:var(--propia-brand-soft); color:var(--propia-brand); font-size:11.5px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
    .utb-add:hover:not(:disabled) { background:var(--propia-brand-soft); filter:brightness(.98); }
    .utb-add:disabled { opacity:.5; cursor:default; }
    /* Acciones de la fila de alta al canon Unidades: check-icono violeta lleno (guardar) + cancelar. */
    .utb-act-nf { display:flex; gap:4px; align-items:center; justify-content:flex-end; }
    .utb-nf-ok, .utb-nf-cancel { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:7px; cursor:pointer; }
    .utb-nf-ok { border:0; background:var(--propia-brand); color:var(--propia-text-inverse); }
    .utb-nf-ok:hover:not(:disabled) { filter:brightness(.96); }
    .utb-nf-cancel { border:1px solid var(--propia-border-card); background:var(--propia-bg-card); color:var(--propia-text-muted); }
    .utb-nf-cancel:hover:not(:disabled) { color:var(--propia-danger); border-color:var(--propia-danger-soft); background:var(--propia-danger-soft); }
    .utb-nf-ok:disabled, .utb-nf-cancel:disabled { opacity:.6; cursor:default; }

    .usr-table { position:relative; background:var(--propia-bg-card); border:1px solid var(--propia-border-card); border-radius:12px; overflow:hidden; }
    /* FAB flotante por encima del footer (canon Unidades/Roles). */
    .usr-table .tbl-fab { bottom:54px; }
    .usr-th { display:flex; align-items:center; gap:14px; padding:11px 18px; border-bottom:1px solid var(--propia-border-divider); background:var(--propia-bg-table-head); font-size:11px; letter-spacing:.4px; font-weight:700; color:var(--propia-text-faint); }
    .usr-row { display:flex; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid var(--propia-border-divider); }
    .usr-row:last-child { border-bottom:none; }
    .usr-av { width:42px; height:42px; border-radius:11px; background:linear-gradient(135deg,var(--propia-brand),var(--propia-brand-hover)); color: var(--propia-text-inverse); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }
    .usr-name { font-size:14px; font-weight:700; color:var(--propia-text-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .usr-email { font-size:12px; color:var(--propia-text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .usr-rol { font-size:12px; font-weight:700; color:var(--propia-brand); background:var(--propia-brand-soft); border:1px solid var(--propia-brand-border); padding:4px 11px; border-radius:7px; }

    /* Modal de usuario: 2 columnas (izq = quien es y su rol; der = donde participa).
       El ancho se declara junto a .usr-modal (mas abajo) porque esa regla lo pisaria. */
    .usr-mgrid { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
    .usr-mcol { min-width:0; }
    @media (max-width: 820px) { .usr-mgrid { grid-template-columns:1fr; gap:0; } }
    /* === Movil: modales (invitar/editar usuario) a pantalla completa === */
    @media (max-width: 640px) {
        .usr-modal-bg { padding: 0; }
        .usr-modal, .usr-modal-wide, .usr-modal-user { width: 100%; max-width: 100%; min-height: 100dvh; max-height: 100dvh; border-radius: 0; }
    }

    /* Etiquetas de usuario (2.5) - se administran dentro del modal del usuario */
    .usr-etq-disp-t { font-size:11px; font-weight:700; color:var(--propia-text-faint); letter-spacing:.3px; margin-bottom:6px; }
    .usr-etq-off { display:inline-flex; align-items:center; border:1px dashed var(--propia-brand-border); border-radius:20px; background:var(--propia-bg-card); overflow:hidden; }
    .usr-etq-pick2 { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; font-size:11.5px; font-weight:700; color:var(--propia-text-secondary); padding:3px 8px 3px 9px; cursor:pointer; font-family:inherit; }
    .usr-etq-pick2:hover:not(:disabled) { background:var(--propia-brand-soft-2); color:var(--propia-brand); }
    .usr-etq-del { border:0; background:transparent; color:#C8D4DF; cursor:pointer; font-size:14px; line-height:1; padding:0 7px 0 3px; }
    .usr-etq-del:hover:not(:disabled) { color:var(--propia-error); }
    .usr-etq-list { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
    .usr-etq-empty { font-size:12px; color:var(--propia-text-faint); }
    .usr-etq-chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:7px; border:1px solid; }
    .usr-etq-chip-sm { font-size:10.5px; padding:2px 8px; }
    .usr-etq-x { border:0; background:transparent; color:inherit; opacity:.6; cursor:pointer; font-size:14px; line-height:1; padding:0; }
    .usr-etq-x:hover { opacity:1; }
    .usr-etq-form { display:flex; align-items:center; gap:8px; }
    .usr-etq-in { flex:1; max-width:260px; border:1px solid var(--propia-border-card); border-radius:9px; padding:8px 11px; font-size:13px; color:var(--propia-text-body); outline:none; }
    .usr-etq-in:focus { border-color:var(--propia-brand); }
    .usr-etq-color { width:38px; height:36px; border:1px solid var(--propia-border-card); border-radius:9px; background:var(--propia-bg-card); cursor:pointer; padding:2px; }
    .usr-etq-add { padding:8px 16px; }
    .usr-etq-row { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:5px; }
    .usr-etq-addwrap { position:relative; display:inline-flex; }
    .usr-etq-plus { width:20px; height:20px; border-radius:50%; border:1px dashed var(--propia-text-faint); background:var(--propia-bg-card); color:var(--propia-text-muted); font-size:13px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
    .usr-etq-plus:hover { border-color:var(--propia-brand); color:var(--propia-brand); }
    .usr-etq-picker { position:absolute; top:24px; left:0; z-index:20; background:var(--propia-bg-card); border:1px solid var(--propia-border-card); border-radius:10px; box-shadow:0 8px 24px rgba(45,62,80,.15); padding:5px; min-width:150px; max-height:220px; overflow-y:auto; }
    .usr-etq-pick { display:flex; align-items:center; gap:7px; width:100%; text-align:left; border:0; background:transparent; padding:6px 8px; border-radius:7px; font-size:12px; color:var(--propia-text-body); cursor:pointer; }
    .usr-etq-pick:hover { background:var(--propia-brand-soft-2); }
    .usr-etq-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
    /* Tags de gobierno (2.5.1) en la lista */
    .usr-gob-tag { display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; color:var(--propia-warning); background:var(--propia-warn-soft); border:1px solid #FCE7A3; }
    /* Seccion Gobierno dentro del modal Editar (2.5.1) */
    .usr-gob-sec { margin:6px 0 18px; }
    .usr-gob-sec-t { font-size:11px; font-weight:800; letter-spacing:.5px; color:#7A8DA0; margin-bottom:2px; }
    .usr-gob-sec-hint { font-size:12px; color:var(--propia-text-faint); line-height:1.4; margin-bottom:10px; }
    .usr-gob-card { border:1.5px solid var(--propia-border-divider); border-radius:12px; padding:11px 13px; margin-bottom:9px; transition:border-color .15s, background .15s; }
    .usr-gob-card.on { border-color:#B9E0C9; background:#F4FBF7; }
    .usr-gob-card-h { display:flex; align-items:center; gap:8px; }
    .usr-gob-card-name { font-size:13.5px; font-weight:700; color:var(--propia-text-body); }
    .usr-gob-badge { font-size:10px; font-weight:800; padding:1px 8px; border-radius:20px; color:var(--propia-success-hover); background:#DBF3E5; }
    .usr-gob-tagrow { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px; }
    .usr-gob-tag2 { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; color:#0F6E43; background:#E4F6EC; border:1px solid #BEE7CE; }
    .usr-gob-x2 { border:none; background:transparent; color:var(--propia-success-hover); font-size:15px; line-height:1; cursor:pointer; padding:0 0 0 2px; }
    .usr-gob-x2:disabled { opacity:.4; cursor:default; }
    .usr-gob-quitar { margin-left:auto; border:1px solid var(--propia-border-divider); background:var(--propia-bg-card); color:#C0392B; font-size:11.5px; font-weight:700; padding:3px 12px; border-radius:8px; cursor:pointer; }
    .usr-gob-quitar:disabled { opacity:.5; cursor:default; }
    .usr-gob-form { display:flex; gap:8px; margin-top:9px; }
    .usr-gob-in { flex:1 1 auto; min-width:0; border:1px solid var(--propia-border-divider); border-radius:8px; padding:7px 10px; font-size:13px; color:var(--propia-text-body); background:var(--propia-bg-card); }
    .usr-gob-add { flex:0 0 auto; border:none; background:#1E88E5; color: var(--propia-text-inverse); font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:8px; cursor:pointer; }
    .usr-gob-add:disabled { opacity:.5; cursor:default; }
    .usr-gob-note { font-size:12px; color:var(--propia-text-faint); margin-top:8px; font-style:italic; }
    /* Chips de tablero (2.5.D) */
    .usr-tab-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 8px 3px 10px; border-radius:20px; color:var(--propia-text-body); background:var(--propia-border-divider); border:1px solid var(--propia-border-divider); }
    .usr-tab-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
    .usr-tab-link { color:var(--propia-text-body); text-decoration:none; }
    .usr-tab-link:hover { text-decoration:underline; }
    .usr-tab-n { font-size:10px; font-weight:800; color:#7A8DA0; background:var(--propia-border-divider); border-radius:10px; padding:0 6px; }
    /* Directorio (2.5.E) */
    .usr-nodir { display:inline-flex; align-items:center; font-size:10px; font-weight:800; padding:2px 8px; border-radius:20px; color:var(--propia-warning); background:var(--propia-bg-card)4E0; border:1px solid #FBD9A0; }
    .usr-dir-box { display:flex; align-items:center; gap:12px; border:1.5px solid var(--propia-border-divider); border-radius:12px; padding:12px 14px; margin:6px 0 16px; }
    .usr-dir-box.on { border-color:#B9E0C9; background:#F4FBF7; }
    .usr-dir-ico { width:38px; height:38px; border-radius:10px; background:var(--propia-border-divider); color:var(--propia-text-secondary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .usr-dir-box.on .usr-dir-ico { background:#DBF3E5; color:var(--propia-success-hover); }
    .usr-badge-pend { font-size:11px; font-weight:700; color:var(--propia-warning); background:var(--propia-warn-soft); padding:4px 10px; border-radius:7px; }
    .usr-badge-inact { font-size:11px; font-weight:700; color:var(--propia-text-faint); background:var(--propia-border-divider); padding:4px 10px; border-radius:7px; }
    .usr-rowbtn { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px; color:var(--propia-brand); border:1px solid var(--propia-brand-border); background:var(--propia-bg-card); font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
    .usr-rowbtn:hover { background:var(--propia-brand-soft); }
    .usr-rowbtn-danger { color:var(--propia-error-strong); border-color:#F3C9CB; }
    .usr-rowbtn-danger:hover { background:#FBEBEC; }
    .usr-empty { background:var(--propia-bg-card); border:1px solid var(--propia-border-card); border-radius:14px; padding:34px; text-align:center; color:var(--propia-text-muted); font-size:13.5px; }
    .min-w-0 { min-width:0; }

    /* Modales */
    .usr-modal-bg { position:fixed; inset:0; z-index:1080; background:rgba(27,42,58,.55); display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; }
    .usr-modal { width:560px; max-width:100%; background:var(--propia-bg-card); border-radius:18px; box-shadow:0 30px 70px rgba(27,42,58,.4); margin:auto; overflow:hidden; display:flex; flex-direction:column; max-height:88vh; }
    .usr-modal-wide { width:880px; }
    /* Ficha de rol como modal (objetivo visual Maqueta1 roles.html): ancho 1056, matriz dentro con scroll. */
    .usr-modal-roles { width:1056px; max-width:96vw; max-height:86vh; }
    .rol-ficha-chips { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
    .rol-chip-info { font-size:12px; font-weight:600; color:var(--propia-brand); background:var(--propia-brand-soft); border-radius:20px; padding:4px 11px; }
    .rol-chip-mut { font-size:12px; color:var(--propia-text-muted); }
    /* Mismo ancho/alto que las fichas (Residentes/Terceros: is-fixedh 1056 x 86vh) y que la ficha de rol. */
    .usr-modal-user { width:1056px; max-width:96vw; max-height:86vh; }

    /* ===== Editar/Crear usuario: distribucion canon Residentes =====
       Columna izquierda estrecha con imagen grande dedicada + ROL/CARGO debajo (seccion con divisor);
       columna derecha ancha con los datos. Proporciones 4fr/8fr como .fr-body de la ficha de Residentes. */
    .usr-ficha-cols { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:22px; align-items:start; }
    @media (max-width: 820px) { .usr-ficha-cols { grid-template-columns:1fr; gap:4px; } }
    .usr-ficha-left { display:flex; flex-direction:column; align-items:center; gap:8px; }
    .usr-ficha-foto-lbl { align-self:stretch; font-size:11px; letter-spacing:.5px; color:var(--propia-text-faint); font-weight:700; }
    .usr-av-edit--big { width:150px; height:150px; margin-top:4px; }
    .usr-av--big { width:150px; height:150px; border-radius:50%; font-size:44px; font-weight:800; box-shadow:0 2px 10px rgba(27,42,58,.14), 0 0 0 1px var(--propia-border-card); }
    img.usr-av-img.usr-av--big { border-radius:50%; object-fit:cover; }
    .usr-ficha-change { display:flex; align-items:center; justify-content:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--propia-brand); cursor:pointer; }
    .usr-ficha-name { font-size:15px; font-weight:800; color:var(--propia-text-h1); text-align:center; max-width:100%; }
    .usr-ficha-email { font-size:12px; color:var(--propia-text-faint); text-align:center; max-width:100%; }
    .usr-ficha-access { align-self:stretch; width:100%; text-align:left; margin-top:8px; padding-top:14px; border-top:1px solid var(--propia-border-divider); }
    .usr-ficha-access .usr-gob-sec { margin:0 0 16px; }
    .usr-ficha-access .usr-gob-sec:last-child { margin-bottom:0; }

    /* Pestanas del modal Editar usuario (Perfil / Documentos / Historial), canon fichas. */
    .usr-tabs { display:flex; gap:4px; padding:0 24px; border-bottom:1px solid var(--propia-border-divider); flex-shrink:0; }
    .usr-tab { appearance:none; background:transparent; border:0; border-bottom:2px solid transparent; padding:12px 14px; font-size:13px; font-weight:700; color:var(--propia-text-muted); cursor:pointer; margin-bottom:-1px; font-family:inherit; }
    .usr-tab:hover { color:var(--propia-text-body); }
    .usr-tab--on { color:var(--propia-brand); border-bottom-color:var(--propia-brand); }

    /* Navegacion anterior/siguiente entre registros en el header del modal (canon ficha Residentes). */
    .usr-nav { display:flex; align-items:center; gap:4px; margin-right:6px; flex-shrink:0; }
    .usr-nav-btn { width:30px; height:30px; border-radius:8px; border:1px solid var(--propia-border-card); background:var(--propia-bg-card); color:var(--propia-text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; }
    .usr-nav-btn:hover:not(:disabled) { border-color:var(--propia-brand); color:var(--propia-brand); }
    .usr-nav-btn:disabled { opacity:.4; cursor:default; }
    .usr-nav-count { font-size:12px; font-weight:700; color:var(--propia-text-muted); min-width:48px; text-align:center; white-space:nowrap; }
    .usr-modal-head { display:flex; align-items:flex-start; gap:13px; padding:20px 24px; border-bottom:1px solid var(--propia-border-divider); flex-shrink:0; }
    .usr-modal-ico { width:38px; height:38px; border-radius:10px; background:var(--propia-brand-soft); color:var(--propia-brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .usr-modal-title { font-size:16px; font-weight:800; letter-spacing:-.3px; color:var(--propia-text-h1); }
    .usr-modal-subtitle { font-size:12.5px; color:var(--propia-text-muted); }
    .usr-modal-x { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:var(--propia-text-muted); border:1px solid var(--propia-border-card); background:var(--propia-bg-card); cursor:pointer; flex-shrink:0; }
    .usr-modal-x:hover { background:var(--propia-bg-app); color:var(--propia-text-body); }
    /* scrollbar-gutter stable both-edges: reserva el ancho de la barra de scroll en AMBOS lados, para que
       el margen izquierdo y el derecho queden simetricos cuando el contenido scrollea (antes: izq 24 / der 24+scroll). */
    .usr-modal-body { overflow-y:auto; scrollbar-gutter:stable both-edges; padding:22px 24px; }
    .usr-modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:16px 24px; border-top:1px solid var(--propia-border-divider); flex-shrink:0; }
    .usr-label { font-size:11px; color:var(--propia-text-muted); font-weight:700; display:block; margin-bottom:5px; }
    .usr-input, .usr-select { width:100%; border:1px solid var(--propia-border-card); border-radius:9px; padding:10px 12px; font-size:13.5px; color:var(--propia-text-body); outline:none; background:var(--propia-bg-card); }
    .usr-input:focus, .usr-select:focus { border-color:var(--propia-brand); }
    /* Datos del sistema (modal Editar usuario): fila label/valor con divisor, calca de la maqueta. */
    .usr-sysrow { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--propia-border-divider); font-size:12.5px; }
    .usr-sysrow span { color:var(--propia-text-muted); }
    .usr-sysrow b { color:var(--propia-text-body); font-weight:600; }
    .usr-input:disabled { background:var(--propia-bg-app); color:var(--propia-text-muted); }

    .usr-results { border:1px solid var(--propia-border-card); border-radius:11px; margin-top:10px; overflow:hidden; max-height:220px; overflow-y:auto; }
    .usr-result { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 13px; border:none; border-bottom:1px solid var(--propia-border-divider); background:var(--propia-bg-card); cursor:pointer; }
    .usr-result:last-child { border-bottom:none; }
    .usr-result:hover { background:var(--propia-bg-app); }
    .usr-hint { font-size:12.5px; color:var(--propia-text-faint); line-height:1.55; margin-top:14px; padding:12px 14px; background:var(--propia-bg-app); border-radius:10px; border:1px dashed var(--propia-border-input); }
    .usr-rolcfg { border:1px solid var(--propia-border-card); border-radius:12px; padding:14px 16px; margin-bottom:16px; background:#FCFDFE; display:flex; flex-direction:column; gap:12px; }
    .usr-rolcfg-row { display:flex; gap:12px; align-items:flex-end; }
    .usr-rolcfg-seed { border-top:1px solid var(--propia-border-divider); padding-top:12px; display:flex; flex-direction:column; gap:8px; }
    .usr-facetas { display:flex; flex-wrap:wrap; gap:7px; }
    .usr-faceta { border:1px solid var(--propia-brand-border); background:var(--propia-bg-card); color:var(--propia-brand); border-radius:20px; padding:6px 14px; font-size:12.5px; font-weight:700; cursor:pointer; }
    .usr-faceta.on { background:var(--propia-brand); border-color:var(--propia-brand); color: var(--propia-text-inverse); }
    .usr-seedchk { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--propia-text-secondary); font-weight:600; cursor:pointer; margin-top:2px; }
    .usr-seedchk input { width:16px; height:16px; accent-color:var(--propia-brand); }
    .usr-seedchk em { color:var(--propia-text-faint); font-style:normal; }
    .usr-pick { border:1px solid var(--propia-brand-border); background:var(--propia-brand-soft-2); border-radius:12px; padding:14px 16px; margin-top:14px; }
    .usr-note { font-size:11.5px; color:var(--propia-brand-hover); margin-top:11px; display:flex; align-items:center; gap:6px; }
    .usr-link-ok { background:var(--propia-ok-soft); border:1px solid var(--propia-success-border); border-radius:11px; padding:13px 15px; margin-top:16px; font-size:12.5px; }

    .usr-security { margin-top:18px; border-top:1px solid var(--propia-border-divider); padding-top:16px; }
    .usr-sec-label { font-size:11px; letter-spacing:.5px; color:var(--propia-text-faint); font-weight:700; margin-bottom:10px; }
    .usr-sec-box { border:1px solid var(--propia-border-card); border-radius:11px; padding:13px 15px; }
    .usr-sec-ico { width:36px; height:36px; border-radius:9px; background:#FBEBEC; color:var(--propia-error-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

    /* Roles */
    .usr-rolecard { display:flex; align-items:center; gap:12px; border:1px solid var(--propia-border-card); border-radius:11px; padding:12px 15px; }
    .usr-rolecard-off { opacity:.6; }
    .usr-ext-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
    .usr-count { font-size:11px; font-weight:600; color:var(--propia-text-muted); background:var(--propia-bg-app); border:1px solid var(--propia-border-card); padding:3px 9px; border-radius:6px; white-space:nowrap; }
    .usr-link-btn { font-size:12px; font-weight:700; color:var(--propia-brand); background:var(--propia-brand-soft); border:1px solid var(--propia-brand-border); padding:6px 11px; border-radius:8px; cursor:pointer; white-space:nowrap; }
    .usr-link-btn:hover { background:var(--propia-brand-border); }
    .usr-newrole-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:1px dashed var(--propia-brand-border); border-radius:11px; padding:13px; font-size:13px; font-weight:700; color:var(--propia-brand); background:var(--propia-brand-soft-2); cursor:pointer; }
    .usr-newrole-btn:hover { background:var(--propia-brand-soft-2); }
    .usr-newrole { border:1px solid var(--propia-brand-border); border-radius:12px; padding:16px; background:var(--propia-brand-soft-2); }

    .usr-matrix { border:1px solid var(--propia-border-card); border-radius:12px; overflow:hidden; }
    .usr-matrix-head { display:flex; align-items:center; padding:10px 14px; background:var(--propia-bg-table-head); border-bottom:1px solid var(--propia-border-divider); }
    .usr-matrix-row { display:flex; align-items:center; padding:9px 14px; border-bottom:1px solid var(--propia-border-divider); }
    .usr-matrix-row:last-child { border-bottom:none; }
    .usr-matrix-mod { flex:1; font-size:13px; font-weight:600; color:var(--propia-text-body); }
    .usr-matrix-col { width:62px; flex-shrink:0; text-align:center; font-size:10.5px; letter-spacing:.3px; font-weight:700; color:var(--propia-text-faint); }
    .usr-cell { width:62px; flex-shrink:0; display:flex; justify-content:center; }
    .usr-chk { width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--propia-border-card); background:var(--propia-bg-card); color:transparent; cursor:pointer; padding:0; }
    .usr-chk.on { border-color:var(--propia-brand); background:var(--propia-brand); color: var(--propia-text-inverse); }
    /* MP-04/MP-06: accion que no aplica al modulo. Punto gris en lugar del checkbox (calca maqueta). */
    .usr-cell-na { color:var(--propia-border-card-2, var(--propia-border-card)); font-size:15px; line-height:1; user-select:none; }