/* ============================================================================
   ui-kit — design system minimalista, reusable y drop-in.
   Estructura inspirada en humand.co (píldoras, tarjetas redondeadas, títulos a
   dos tonos, mucho aire) sobre LA paleta de la plataforma unificada
   usuarios+analytics (auth-kit). Sin dependencias ni fuentes externas (CSP-friendly).

   Cómo se usa:
     <link rel="stylesheet" href="/dist/ui.css">
     <body class="u-base"> ... </body>
   Todo lo demás son clases con prefijo `u-` — no pisan estilos existentes del
   sitio; podés adoptarlo por partes.

   REGLA DE ORO (aprendida a los golpes): el contrato responsive vive UNA sola
   vez, al final de este archivo. Cualquier pantalla construida con estos
   primitivos funciona en celular sola. No se parchea por página. Ver §7.
   ========================================================================== */

/* ── §1. Tokens ──────────────────────────────────────────────────────────── */
/* Paleta = LA MISMA de la plataforma unificada usuarios+analytics (auth-kit/auth.css,
   decisión del dueño 2026-08-11: "esa mezcla es perfecta, seguir con esa lógica").
   Blanco limpio #FAFAFB + tarjetas blancas + azul #2563EB + tipografía sobria.
   ui-kit extiende ese lenguaje a sitios/productos con los primitivos tipo humand
   (píldoras, tarjetas, aire) — misma familia visual en todo el ecosistema. */
:root{
  /* color (idéntico a auth-kit) */
  --u-ink:#0A0A0A; --u-ink-2:#1F2328; --u-muted:#6B7280; --u-muted-2:#9CA3AF;
  --u-accent:#2563EB; --u-accent-ink:#1D4ED8; --u-accent-soft:#EFF4FF;
  --u-bg:#FAFAFB; --u-surface:#FFFFFF; --u-border:#ECECEF; --u-border-2:#E1E1E6;
  --u-ok:#15803D; --u-ok-soft:#E7F6EC; --u-err:#DC2626; --u-err-soft:#FEECEC;
  /* forma (radios de la plataforma: 12 base, 16 tarjetas grandes) */
  --u-r-sm:8px; --u-r:12px; --u-r-lg:16px; --u-r-pill:999px;
  --u-shadow-sm:0 1px 2px rgba(10,10,10,.05);
  --u-shadow:0 10px 40px rgba(10,10,10,.06);
  --u-shadow-lg:0 20px 60px rgba(10,10,10,.10);
  /* medidas */
  --u-container:1120px; --u-gap:1rem;
  --u-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ── §2. Base (opt-in con .u-base en el <body>) ──────────────────────────── */
.u-base{margin:0;font-family:var(--u-font);background:var(--u-bg);color:var(--u-ink);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.u-base *{box-sizing:border-box}
.u-base a{color:var(--u-accent-ink);text-decoration:none}
.u-base a:hover{text-decoration:underline}
/* Scroll suave a anclas (CSS moderno :has() — se apaga con reduced-motion, ver §8) */
html:has(.u-base){scroll-behavior:smooth}
/* Foco visible SÓLO al navegar con teclado (:focus-visible): elegante y accesible.
   El azul del anillo es de los pocos usos legítimos del acento (regla del azul racionado). */
.u-base :focus-visible{outline:2px solid var(--u-accent);outline-offset:2px;border-radius:4px}
.u-container{max-width:var(--u-container);margin:0 auto;padding:0 1.25rem;width:100%}
.u-section{padding:4.5rem 0}
.u-center{text-align:center}
.u-muted{color:var(--u-muted)} .u-small{font-size:.82rem}

/* Títulos a dos tonos: <h2 class="u-title">Normal <strong>acento</strong></h2>
   text-wrap:balance = líneas balanceadas automáticas (detalle premium moderno). */
.u-title{font-size:clamp(1.8rem,4vw,3rem);line-height:1.08;font-weight:500;letter-spacing:-.02em;margin:0 0 .6rem;text-wrap:balance}
.u-title strong{font-weight:800}
.u-title .u-grad{background:linear-gradient(90deg,var(--u-accent),color-mix(in oklab,var(--u-accent),#fff 40%));-webkit-background-clip:text;background-clip:text;color:transparent}
.u-lead{font-size:clamp(1rem,1.6vw,1.2rem);color:var(--u-muted);max-width:46ch;margin:0 auto;text-wrap:pretty}

/* Eyebrow: pill mayúsculas tintada */
.u-eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--u-accent-ink);background:var(--u-accent-soft);
  border:1px solid color-mix(in srgb,var(--u-accent) 18%,#fff);border-radius:var(--u-r-pill);padding:.4rem .9rem;margin-bottom:1rem}

/* ── §3. Nav flotante tipo píldora ───────────────────────────────────────── */
.u-topbar{display:flex;justify-content:flex-end;gap:1.25rem;align-items:center;
  font-size:.82rem;color:var(--u-muted);padding:.5rem 1.25rem}
.u-topbar a{color:var(--u-muted)}
.u-nav{position:sticky;top:.75rem;z-index:20;display:flex;align-items:center;gap:1rem;
  max-width:var(--u-container);margin:0 auto;padding:.55rem .7rem .55rem 1.25rem;
  background:var(--u-surface);border:1px solid var(--u-border);border-radius:var(--u-r-pill);
  box-shadow:var(--u-shadow-sm)}
.u-nav__brand{font-weight:800;font-size:1.05rem;letter-spacing:-.02em;color:var(--u-ink);white-space:nowrap}
.u-nav__links{display:flex;gap:.35rem;align-items:center;margin:0 auto}
/* Lógica del dashboard (decisión del dueño): los links del menú son GRISES y quietos;
   el azul se reserva para el elemento ACTIVO (pastilla suave) y estados de foco.
   El selector compuesto le gana a la regla genérica `.u-base a` (azul). */
.u-nav .u-nav__link{padding:.5rem .8rem;border-radius:var(--u-r-pill);font-size:.9rem;font-weight:500;color:var(--u-muted)}
.u-nav .u-nav__link:hover{background:var(--u-bg);color:var(--u-ink);text-decoration:none}
.u-nav .u-nav__link.is-active{background:var(--u-accent-soft);color:var(--u-accent-ink);font-weight:600}
.u-nav__link[data-caret]::after{content:'⌄';margin-left:.3rem;color:var(--u-muted-2);font-size:.8em;vertical-align:1px}

/* ── §4. Botones (píldora) ───────────────────────────────────────────────── */
.u-btn{display:inline-flex;align-items:center;gap:.4rem;font-family:inherit;font-size:.9rem;
  font-weight:600;padding:.6rem 1.15rem;border-radius:var(--u-r-pill);border:1px solid transparent;
  cursor:pointer;transition:transform .06s ease,background .15s ease,box-shadow .15s ease;white-space:nowrap}
.u-btn:hover{text-decoration:none} .u-btn:active{transform:translateY(1px)}
/* El botón primario es NEGRO como en el dashboard (el azul no domina la pantalla);
   .u-btn--accent (azul) queda para casos puntuales donde se quiera destacar de más.
   Los selectores dobles (.u-base .u-btn--*) hacen que el color del botón le gane a la
   regla genérica de links `.u-base a` cuando el botón es un <a>. */
.u-btn--primary,.u-base .u-btn--primary{background:var(--u-ink);color:#fff}
.u-btn--primary:hover{background:#000;box-shadow:0 6px 18px color-mix(in srgb,var(--u-ink) 22%,transparent)}
.u-btn--accent,.u-base .u-btn--accent{background:var(--u-accent);color:#fff}
.u-btn--accent:hover{background:var(--u-accent-ink);box-shadow:0 6px 18px color-mix(in srgb,var(--u-accent) 30%,transparent)}
.u-btn--dark,.u-base .u-btn--dark{background:var(--u-ink);color:#fff}
.u-btn--dark:hover{background:#000}
.u-btn--ghost,.u-base .u-btn--ghost{background:transparent;color:var(--u-ink-2);border-color:var(--u-border-2)}
.u-btn--ghost:hover{background:var(--u-bg)}

/* ── §5. Tarjetas ────────────────────────────────────────────────────────── */
.u-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--u-gap)}
.u-card{background:var(--u-surface);border:1px solid var(--u-border);border-radius:var(--u-r-lg);
  padding:1.5rem;box-shadow:var(--u-shadow-sm);transition:box-shadow .15s ease,border-color .15s ease;
  display:flex;flex-direction:column}
.u-card:hover{box-shadow:var(--u-shadow);border-color:var(--u-border-2)}
.u-card h3{margin:.2rem 0 .4rem;font-size:1.05rem;font-weight:700}
.u-card p{margin:0 0 1rem;color:var(--u-muted);flex:1}
.u-card__icon{width:44px;height:44px;border-radius:var(--u-r);display:grid;place-items:center;
  background:var(--u-accent-soft);color:var(--u-accent-ink);font-size:1.2rem;margin-bottom:.9rem}

/* Layout de columnas genérico (apila en celular, ver §7) */
.u-cols{display:flex;gap:1.5rem;align-items:flex-start}
.u-cols>.u-grow{flex:1;min-width:0}

/* ── §6. Tabla y formulario ──────────────────────────────────────────────── */
.u-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--u-border);border-radius:var(--u-r-lg);background:var(--u-surface)}
.u-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem}
.u-table th,.u-table td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--u-border);white-space:nowrap}
.u-table tbody tr:last-child td{border-bottom:none}
.u-table th{color:var(--u-muted);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;background:color-mix(in srgb,var(--u-bg) 50%,#fff)}
.u-table tbody tr:hover td{background:color-mix(in srgb,var(--u-bg) 50%,#fff)}

.u-field{display:block;margin-bottom:1rem}
.u-label{display:block;font-size:.8rem;font-weight:600;color:var(--u-ink-2);margin-bottom:.35rem}
.u-input,.u-textarea,.u-select{width:100%;font-family:inherit;font-size:.95rem;padding:.65rem .8rem;
  background:#fff;border:1px solid var(--u-border-2);border-radius:var(--u-r);color:var(--u-ink)}
.u-input:focus,.u-textarea:focus,.u-select:focus{outline:none;border-color:var(--u-accent);box-shadow:0 0 0 3px var(--u-accent-soft)}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.u-footer{border-top:1px solid var(--u-border);padding:2.5rem 0;color:var(--u-muted);font-size:.88rem}
.u-footer nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.u-footer nav a{color:var(--u-muted)}
.u-footer nav a:hover{color:var(--u-ink);text-decoration:none}

/* ============================================================================
   §7. CONTRATO RESPONSIVE  (una sola vez, aplica a TODO lo de arriba)
   Principios:
     1. Layouts multi-columna (.u-cols) colapsan a UNA columna apilada.
     2. La barra de nav pasa marca+CTA arriba y links full-width con scroll.
     3. Tablas anchas scrollean dentro de .u-table-wrap (nunca aplastan).
     4. Controles y tipografía fluidos (clamp / max-width:100%).
   ========================================================================== */
@media (max-width:720px){
  .u-section{padding:3rem 0}
  .u-nav{flex-wrap:wrap;border-radius:var(--u-r-lg);padding:.6rem .9rem}
  .u-nav__links{order:3;flex:1 0 100%;width:100%;overflow-x:auto;flex-wrap:nowrap;
    justify-content:flex-start;margin:.35rem 0 0;padding-bottom:.1rem;-webkit-overflow-scrolling:touch}
  .u-nav__link{flex:0 0 auto}
  .u-cols{flex-direction:column;align-items:stretch}
  .u-cols>.u-grow{width:100%}
  .u-topbar{justify-content:center}
}

/* Container queries (CSS moderno): además del viewport, los layouts responden al ESPACIO
   REAL que tienen. Una .u-cols metida en una columna angosta de escritorio se apila igual
   que en un celular. Es mejora progresiva: sin soporte, el @media de arriba ya cubre. */
.u-container{container-type:inline-size}
@container (max-width:720px){
  .u-cols{flex-direction:column;align-items:stretch;gap:1rem}
  .u-cols>.u-grow{width:100%}
}

/* ── §8. Respeto por el usuario (accesibilidad moderna) ─────────────────── */
/* Si la persona configuró "reducir movimiento", se apagan transiciones y scroll suave. */
@media (prefers-reduced-motion:reduce){
  html:has(.u-base){scroll-behavior:auto}
  .u-base *,.u-base{transition:none !important;animation:none !important}
}
/* ============================================================================
   auth-kit — CAPA de la plataforma sobre ui-kit.

   ⚠ Este archivo NO es el CSS completo: `install.sh` sirve  ui.css + esta capa
   concatenados en `/assets/auth.css` del proyecto destino. Por eso las páginas
   del módulo no cambiaron ni una línea de HTML.

   Qué hace cada parte:
     · ui-kit (assets/ui.css, vendorizado del tag) aporta TOKENS, forma y el
       contrato responsive/moderno (container queries, :focus-visible,
       prefers-reduced-motion, color-mix).
     · esta capa mapea las clases históricas `.auth-*` a ese lenguaje visual.
   Regla: los colores/medidas salen SIEMPRE de var(--u-*). Si falta un token,
   se agrega en ui-kit, no acá.
   ========================================================================== */

/* ── Base (las páginas usan body.auth-admin / body.auth-page, no .u-base) ── */
body{margin:0;font-family:var(--u-font);background:var(--u-bg);color:var(--u-ink);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--u-accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--u-accent);outline-offset:2px;border-radius:4px}
.muted{color:var(--u-muted)} .small{font-size:.8rem} code{word-break:break-all}

/* ── Login / setup / reset ───────────────────────────────────────────────── */
.auth-page{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:1rem}
/* viewport-fit=cover (iPhone en horizontal): el contenido no queda bajo la muesca ni los bordes redondeados */
.auth-page{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
/* Marco del sitio (auth_init 'frame', body_class 'auth-framed'): la tarjeta se apila bajo la cabecera del sitio en vez de ocupar toda la pantalla. La identidad la pone el sitio pisando los tokens --u-*. */
body.auth-framed{display:block;min-height:0;padding:0}
.auth-framed .auth-card{margin:clamp(2rem,6vw,4rem) auto}
.auth-card{background:var(--u-surface);border:1px solid var(--u-border);border-radius:var(--u-r-lg);
  padding:2rem;width:100%;max-width:380px;box-shadow:var(--u-shadow)}
.auth-card h1{margin:0 0 1.25rem;font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.auth-form label{display:block;margin-bottom:.9rem;font-size:.8rem;font-weight:600;color:var(--u-ink-2)}
.auth-form input{display:block;width:100%;margin-top:.35rem;padding:.65rem .8rem;background:#fff;
  border:1px solid var(--u-border-2);border-radius:var(--u-r);color:var(--u-ink);font-size:.95rem;font-family:inherit}
.auth-form input:focus{outline:none;border-color:var(--u-accent);box-shadow:0 0 0 3px var(--u-accent-soft)}
/* botones: píldora y primario NEGRO (azul racionado — regla de ui-kit) */
.auth-form button,.auth-actions button,.auth-create button{background:var(--u-ink);color:#fff;border:0;
  border-radius:var(--u-r-pill);padding:.6rem 1.15rem;font-size:.9rem;font-weight:600;cursor:pointer;
  font-family:inherit;transition:background .15s ease,box-shadow .15s ease}
.auth-form button:hover,.auth-actions button:hover,.auth-create button:hover{background:#000}
.auth-form button{width:100%;margin-top:.5rem}
.auth-error{background:var(--u-err-soft);color:var(--u-err);border:1px solid color-mix(in srgb,var(--u-err) 25%,#fff);
  border-radius:var(--u-r);padding:.6rem .8rem;font-size:.85rem;margin:0 0 1rem}
.auth-ok{background:var(--u-ok-soft);color:var(--u-ok);border:1px solid color-mix(in srgb,var(--u-ok) 25%,#fff);
  border-radius:var(--u-r);padding:.6rem .8rem;font-size:.85rem;font-weight:500}

/* ── Shell del admin: barra flotante tipo píldora (lenguaje ui-kit) ──────── */
.auth-admin{padding:0}
.auth-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  position:sticky;top:.6rem;z-index:20;max-width:1100px;margin:.6rem auto 0;
  padding:.5rem .6rem .5rem 1.15rem;background:var(--u-surface);border:1px solid var(--u-border);
  border-radius:var(--u-r-pill);box-shadow:var(--u-shadow-sm)}
.auth-bar h1{font-size:.95rem;font-weight:800;margin:0;letter-spacing:-.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.auth-bar-logo{width:24px;height:24px;object-fit:contain;vertical-align:-6px;margin-right:.35rem;border-radius:6px}
.auth-bar a{color:var(--u-muted);font-size:.85rem;font-weight:500}
.auth-bar a:hover{color:var(--u-ink);text-decoration:none}
.auth-tag{display:inline-block;font-size:10px;font-weight:600;color:var(--u-muted-2);background:var(--u-bg);
  border:1px solid var(--u-border);padding:2px 7px;border-radius:var(--u-r-pill);text-transform:uppercase;
  letter-spacing:.05em;vertical-align:middle;margin-left:.5rem}
/* menú: links GRISES, azul sólo en el activo (azul racionado) */
.auth-nav{display:flex;gap:.25rem;align-items:center;flex:1;min-width:0}
.auth-nav a{padding:.45rem .75rem;border-radius:var(--u-r-pill);font-size:.85rem;font-weight:500;color:var(--u-muted)}
.auth-nav a:hover{background:var(--u-bg);color:var(--u-ink);text-decoration:none}
.auth-nav a.on{background:var(--u-accent-soft);color:var(--u-accent-ink);font-weight:600}
/* Separador entre el menú del kit y las pantallas propias del sitio. El kit trae su menú
   de sistema; los procesos de cada proyecto viven al lado, no mezclados. Sólo aparece si
   el sitio declaró pantallas propias en modules.php: sin eso, la barra es la de siempre. */
.auth-nav-sep{width:1px;height:1.1rem;background:var(--u-border-2);margin:0 .4rem;flex:0 0 auto}
@media(max-width:640px){.auth-nav-sep{display:none}}
.auth-navlogout{font-size:.8rem;font-weight:600;border:1px solid var(--u-border-2);border-radius:var(--u-r-pill);
  padding:.35rem .8rem;color:var(--u-ink-2)}
.auth-navlogout:hover{background:var(--u-bg);color:var(--u-ink);text-decoration:none}
.auth-admin main{padding:1.5rem 1.25rem 3rem;max-width:560px;margin:0 auto;container-type:inline-size}
.auth-admin main.auth-wide{max-width:1100px}

/* ── Bloques y tarjetas ──────────────────────────────────────────────────── */
.auth-block{background:var(--u-surface);border:1px solid var(--u-border);border-radius:var(--u-r-lg);
  padding:1.35rem 1.5rem;margin-bottom:1.25rem;box-shadow:var(--u-shadow-sm)}
.auth-block h2{font-size:.95rem;font-weight:700;margin:0 0 .75rem}
.auth-block h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--u-muted);margin:1rem 0 .4rem}
.auth-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.auth-cards .auth-block{margin:0;display:flex;flex-direction:column;transition:box-shadow .15s ease,border-color .15s ease}
.auth-cards .auth-block:hover{border-color:var(--u-border-2);box-shadow:var(--u-shadow)}
.auth-cards .auth-block p{flex:1;margin:.25rem 0 1rem}
.auth-cardlink{font-size:.85rem;font-weight:600;color:var(--u-accent-ink)}
.auth-cardlink:hover{text-decoration:none;color:var(--u-accent)}
.auth-cols{display:flex;gap:1.25rem;align-items:flex-start;flex-wrap:wrap}
.auth-grow{flex:1;min-width:320px}

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.auth-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.85rem;margin-bottom:2rem;
  background:var(--u-surface);border:1px solid var(--u-border);border-radius:var(--u-r-lg);overflow:hidden}
.auth-table th,.auth-table td{text-align:left;padding:.65rem .85rem;border-bottom:1px solid var(--u-border);vertical-align:middle}
.auth-table tr:last-child td{border-bottom:none}
.auth-table th{color:var(--u-muted);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  background:color-mix(in srgb,var(--u-bg) 50%,#fff)}
.auth-table tbody tr:hover td{background:color-mix(in srgb,var(--u-bg) 50%,#fff)}
.nowrap{white-space:nowrap}
/* En tablas los identificadores NO se parten a la mitad (el break-all global los volvía ilegibles:
   "user.2fa_e nroll"). Si no entran, la tabla scrollea; el dato siempre se lee entero. */
.auth-table code{word-break:normal;white-space:nowrap}
.auth-table td:has(code){white-space:nowrap}

/* ── Controles ───────────────────────────────────────────────────────────── */
/* Botones sueltos (submits sin clase, ej. "del" en roles o "Save permissions"): mismo lenguaje
   visual sin tocar el HTML. Especificidad baja a propósito (main button = 0,0,2) para que las
   reglas con clase de abajo (.auth-form/.auth-actions/.auth-create button) sigan ganando. */
main button{border-radius:var(--u-r-pill);border:1px solid var(--u-border-2);background:#fff;
  color:var(--u-ink-2);padding:.35rem .85rem;font-size:.78rem;font-weight:600;font-family:inherit;cursor:pointer}
main button:hover{background:var(--u-bg);color:var(--u-ink)}
/* ACCIÓN PRINCIPAL de un bloque (ej. "Save permissions" en Roles): es el submit que cuelga
   directo del formulario del bloque → píldora negra, jerarquía de primario. Los botones de fila
   (Deactivate, Reset 2FA…) viven dentro de .auth-actions y quedan secundarios: no se tocan. */
main .auth-block > form > button[type=submit]{background:var(--u-ink);color:#fff;border:0;
  padding:.6rem 1.2rem;font-size:.85rem;font-weight:600;margin-top:.75rem}
main .auth-block > form > button[type=submit]:hover{background:#000;color:#fff;
  box-shadow:0 6px 18px color-mix(in srgb,var(--u-ink) 22%,transparent)}
.auth-actions{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.auth-actions button{padding:.32rem .7rem;font-size:.75rem;background:#fff;color:var(--u-ink-2);
  border:1px solid var(--u-border-2);font-weight:500}
.auth-actions button:hover{background:var(--u-bg);color:var(--u-ink)}
.auth-actions .auth-inline{display:flex;gap:.25rem}
.auth-actions input[type=password]{padding:.35rem .55rem;background:#fff;border:1px solid var(--u-border-2);
  border-radius:var(--u-r-sm);color:var(--u-ink);width:120px;max-width:100%}
.auth-create{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.auth-create input,.auth-create select{padding:.5rem .7rem;background:#fff;border:1px solid var(--u-border-2);
  border-radius:var(--u-r);color:var(--u-ink);font-family:inherit;min-width:0}
.auth-secondary{background:#fff !important;color:var(--u-ink-2) !important;
  border:1px solid var(--u-border-2) !important;margin-top:.5rem;font-weight:600}
.auth-secondary:hover{background:var(--u-bg) !important;color:var(--u-ink) !important}
.auth-btn{display:inline-block;background:var(--u-ink);color:#fff;border-radius:var(--u-r-pill);
  padding:.55rem 1.15rem;text-decoration:none;font-size:.9rem;font-weight:600}
.auth-btn:hover{background:#000;text-decoration:none}

/* ── Roles y permisos ────────────────────────────────────────────────────── */
.auth-rolelist{list-style:none;padding:0;margin:0 0 1rem}
.auth-rolelist li{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;border-bottom:1px solid var(--u-border)}
.auth-rolelist li.on{font-weight:600}
.auth-rolelist a{color:var(--u-ink);text-decoration:none}
.auth-check{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;font-size:.9rem;color:var(--u-ink)}
.auth-check code{color:var(--u-muted)} .auth-check>span{line-height:1.8}
.auth-permdesc{display:block;margin-left:1.5rem;line-height:1.4}
.auth-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.auth-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;background:var(--u-bg);
  border:1px solid var(--u-border);border-radius:var(--u-r-pill);padding:.2rem .6rem;color:var(--u-ink);
  max-width:100%;overflow-wrap:anywhere}
.auth-roleassign{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.auth-rolescell{min-width:200px}

/* ── 2FA, recuperación, setup ────────────────────────────────────────────── */
.auth-secret{background:var(--u-accent-soft);border:1px solid color-mix(in srgb,var(--u-accent) 30%,#fff);
  border-radius:var(--u-r);padding:1rem;margin-bottom:1.5rem}
.auth-secret code{font-size:1.1rem;letter-spacing:2px;color:var(--u-accent-ink)}
.auth-key{display:inline-block;background:var(--u-accent-soft);border:1px solid color-mix(in srgb,var(--u-accent) 30%,#fff);
  border-radius:var(--u-r-sm);padding:.15rem .5rem;letter-spacing:2px;color:var(--u-accent-ink)}
.auth-steps{margin:0 0 1rem;padding-left:1.2rem;color:var(--u-muted);font-size:.9rem;line-height:1.6}
.auth-steps code{color:var(--u-ink)}
.auth-recovery{border-color:var(--u-accent)}
.auth-codes{list-style:none;padding:0;margin:.75rem 0;display:grid;grid-template-columns:repeat(2,max-content);gap:.4rem 1.5rem}
.auth-codes code{font-size:1.05rem;letter-spacing:1px;color:var(--u-accent-ink)}
#auth-totp-qr{margin:.75rem 0;display:inline-block;background:#fff;padding:8px;border:1px solid var(--u-border-2);border-radius:var(--u-r)}
.auth-danger-box{background:var(--u-err-soft);border:1px solid var(--u-err);border-radius:var(--u-r);padding:1rem;margin:1rem 0}
.auth-danger-btn{background:var(--u-err) !important;color:#fff;border:0;border-radius:var(--u-r-pill);
  padding:.55rem 1.15rem;font-size:.9rem;cursor:pointer;margin-top:.5rem}
.auth-danger-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ── Responsive: el contrato vive en ui-kit; acá sólo lo propio del admin ── */
@media (max-width:720px){
  .auth-bar{height:auto;min-height:52px;flex-wrap:wrap;border-radius:var(--u-r-lg);padding:.5rem .9rem;
    gap:.35rem .6rem;margin:.5rem .6rem 0}
  .auth-bar h1{flex:0 0 auto;max-width:60%}
  .auth-bar .auth-actions{margin-left:auto;flex:0 0 auto}
  .auth-nav{order:3;flex:1 0 100%;width:100%;overflow-x:auto;flex-wrap:nowrap;gap:.15rem;
    padding-bottom:.1rem;-webkit-overflow-scrolling:touch}
  .auth-nav a{flex:0 0 auto;white-space:nowrap}
  .auth-actions .muted.small{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .auth-table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .auth-cols{flex-direction:column;align-items:stretch;gap:1rem}
  .auth-cols>*{width:100%;min-width:0}
  .auth-grow{min-width:0}
  .auth-codes{grid-template-columns:1fr}
  .auth-rolescell{min-width:0}
  .auth-admin main{padding:1rem .9rem 2.5rem}
}
/* Container query: si el bloque tiene poco ANCHO REAL (no pantalla), apila igual */
@container (max-width:640px){
  .auth-cols{flex-direction:column;align-items:stretch}
  .auth-cols>*{width:100%;min-width:0}
}

/* ── Inicio: nombre, logo a color y «Kit de seguridad» ─────────────────── */
.auth-hero{text-align:center;padding:2.2rem 1rem 1.8rem}
.auth-hero-logo{width:96px;height:96px;object-fit:contain}
.auth-hero h2{margin:.8rem 0 .2rem;font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.auth-hero-tag{margin:0;color:var(--u-muted);font-size:.95rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase}

/* Aplicaciones (single sign-on, ADR-0024): el secreto que se muestra una sola vez y «Mis aplicaciones» en Inicio */
.auth-secretbox{border:2px solid var(--auth-warn,#b45309)}
.auth-secretbox code{display:block;overflow-wrap:anywhere;font-size:1rem;padding:.4rem .6rem;margin:.25rem 0}
.auth-apps-title{margin:1.5rem 0 .5rem}

/* Menú con ocho pantallas o más (se suma «Aplicaciones»): la barra puede ocupar más ancho y, si aun así no entra, pasa a dos líneas; nunca se superponen el menú y el correo */
.auth-bar{max-width:min(1400px,calc(100vw - 1.2rem));flex-wrap:wrap}
.auth-nav{min-width:0;flex:1 1 auto;flex-wrap:wrap}
.auth-nav a{white-space:nowrap}
.auth-actions .muted{display:inline-block;max-width:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* campos de formulario que no son <input>: mismo ancho y aspecto */
.auth-form select,.auth-form textarea{display:block;width:100%;margin-top:.35rem;padding:.65rem .8rem;background:#fff;border:1px solid var(--u-border-2);border-radius:var(--u-r);color:var(--u-ink);font-size:.95rem;font-family:inherit}
.auth-form select:focus,.auth-form textarea:focus{outline:none;border-color:var(--u-accent);box-shadow:0 0 0 3px var(--u-accent-soft)}
.auth-form textarea{resize:vertical;min-height:4.5rem}
/* «Aplicaciones»: acciones plegadas y filas compactas */
.auth-block details{margin:.6rem 0}
.auth-block summary{cursor:pointer;font-weight:600;padding:.35rem 0;color:var(--u-ink-2)}
.auth-block details[open]>summary{margin-bottom:.5rem}
.auth-table td details{margin:0}
.auth-table td details .auth-form{min-width:14rem;margin-top:.4rem}
.auth-block .auth-actions{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin-top:.8rem}
.auth-block .auth-actions .auth-form{flex:1 1 16rem}
/* auth-kit — Mapa de datos (ADR-0014): clases .dm-*. Se concatena a auth.css en install.sh
   (ui.css + auth.css + datamap.css), así llega al navegador sin pedir un archivo más.
   Usa las variables --u-* del ui-kit con valores de respaldo. Sin estilos en línea en las páginas. */
.dm-scroll{overflow-x:auto}
.dm-filtros{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;margin:.5rem 0 1rem}
.dm-enlaces{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.dm-num{text-align:right;white-space:nowrap}
.dm-campo{min-width:12rem;white-space:nowrap}
.dm-campo code{font-size:1rem;font-weight:600}
.dm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.6rem 1.2rem;margin:.6rem 0}
.dm-dato dt{font-size:.8rem;color:var(--u-muted,#6b6b6b)}
.dm-dato dd{margin:0;font-weight:600}
/* Dibujo SVG: solo clases */
.dm-svg{width:100%;height:auto;display:block;margin:.5rem 0;min-width:760px}
.dm-svg--general{min-width:1500px;cursor:grab;touch-action:none}
.dm-svg--general a{cursor:pointer}
.dm-caja{fill:var(--u-surface,#fff);stroke:var(--u-border-2,#c9c9c9);stroke-width:1}
.dm-caja--centro{fill:var(--u-accent-soft,#eef2ff);stroke:var(--u-accent,#3b5bdb);stroke-width:2}
.dm-caja--hit{stroke:var(--u-accent,#3b5bdb);stroke-width:2.6}
.dm-caja--tenue{opacity:.35}
.dm-texto{font-size:12px;font-weight:600;fill:var(--u-ink,#13233f)}
.dm-sub,.dm-col{font-size:10px;fill:var(--u-muted,#6b6b6b)}
.dm-linea{fill:none;stroke:var(--u-accent,#3b5bdb);stroke-width:1.4;opacity:.8}
.dm-svg a:hover .dm-caja{stroke:var(--u-accent,#3b5bdb);stroke-width:2}
.dm-panel{fill:rgba(255,255,255,.55);stroke:var(--u-border,#d9d9d9);stroke-width:1}
.dm-titulo{font-size:13px;font-weight:700;fill:var(--u-ink,#13233f)}
.dm-arista{fill:none;stroke:var(--u-ink-2,#4a5875);stroke-width:1;opacity:.28}
.dm-arista--foco{stroke:var(--u-accent,#3b5bdb);stroke-width:2.4;opacity:.95}
.dm-arista--tenue{opacity:.08}
/* Relleno por área: ocho tonos que rotan según el orden de las áreas; «otros» queda blanco */
.dm-p0{fill:#e6edf7}.dm-p1{fill:#e7f3e5}.dm-p2{fill:#f7ecd6}.dm-p3{fill:#e2f0f3}
.dm-p4{fill:#f0e6f4}.dm-p5{fill:#ececec}.dm-p6{fill:#fbe7e4}.dm-p7{fill:#eef3d9}.dm-otros{fill:#fff}
/* Interacción (assets/datamap.js) */
.dm-controles{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.4rem 0}
.dm-controles button{padding:.35rem .8rem;font-size:.95rem}
.dm-buscar{min-width:14rem;padding:.4rem .6rem}
.dm-hovering .dm-arista:not(.dm-arista--foco){opacity:.05}
.dm-hovering a:not(.dm-sel):not(.dm-vecina) .dm-caja{opacity:.28}
.dm-sel .dm-caja{stroke:var(--u-accent,#3b5bdb);stroke-width:3}
.dm-vecina .dm-caja{stroke:var(--u-accent,#3b5bdb);stroke-width:2}
/* Zoom por pasos del lado del servidor (funciona sin JavaScript) */
.dm-zoom-50 .dm-svg--general{min-width:750px;width:750px}
.dm-zoom-75 .dm-svg--general{min-width:1125px;width:1125px}
.dm-zoom-100 .dm-svg--general{min-width:1500px;width:1500px}
.dm-zoom-125 .dm-svg--general{min-width:1875px;width:1875px}
.dm-zoom-150 .dm-svg--general{min-width:2250px;width:2250px}
.dm-zoom-200 .dm-svg--general{min-width:3000px;width:3000px}
.dm-zoom-300 .dm-svg--general{min-width:4500px;width:4500px}
.dm-zoomsrv{display:flex;gap:.6rem;align-items:center;margin:.2rem 0 .6rem}
.dm-zoomsrv[hidden]{display:none}
/* auth-kit — pantalla «Parámetros» (ADR-0016): clases .st-*. Se concatena a auth.css en install.sh (ui.css + auth.css + datamap.css + settings.css).
   Cada parámetro es una FILA (explicación a la izquierda, campo a la derecha) y en pantallas angostas se apila. Sin tablas: la tabla del kit obliga
   a que las celdas con <code> no corten línea y desbordaba la tarjeta. */
.st-intro{margin:.2rem 0 1rem}
.st-block{overflow:hidden}
.st-block > h2{margin-bottom:.25rem}
.st-sub{margin:0 0 .5rem}
.st-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:.4rem 2rem;padding:.95rem 0;border-top:1px solid var(--u-border)}
.st-row:first-of-type{border-top:0}
.st-info{min-width:0}
.st-info label{display:block;margin:0;font-size:.9rem;font-weight:700;color:var(--u-ink)}
.st-key{display:inline-block;margin-top:.1rem;font-size:.72rem;color:var(--u-muted);word-break:normal}
.st-help{margin:.3rem 0 0;font-size:.8rem;line-height:1.45;color:var(--u-muted)}
.st-field{min-width:0}
.st-field input[type=text],.st-field input[type=email],.st-field input[type=number],.st-field input[type=password],.st-field select{display:block;width:100%;box-sizing:border-box;margin:0;padding:.6rem .8rem;font:inherit;font-size:.9rem;background:#fff;color:var(--u-ink);border:1px solid var(--u-border-2);border-radius:var(--u-r,10px)}
.st-field input:focus,.st-field select:focus{outline:none;border-color:var(--u-accent);box-shadow:0 0 0 3px var(--u-accent-soft)}
.st-field .st-check{display:inline-flex;align-items:center;gap:.4rem;margin:0 1rem .3rem 0;font-size:.85rem;font-weight:500;color:var(--u-ink)}
.st-field .st-check input{display:inline-block;width:auto;margin:0}
.st-src{display:block;margin-top:.35rem;font-size:.75rem;color:var(--u-muted)}
.st-src label{display:inline-flex;align-items:center;gap:.35rem;margin:.25rem 0 0;font-size:.75rem;font-weight:500}
.st-src input{display:inline-block;width:auto;margin:0}
.st-err{display:block;margin-top:.35rem;font-size:.8rem;color:var(--u-danger,#b42318)}
.st-ro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:.2rem 2rem;padding:.6rem 0;border-top:1px solid var(--u-border)}
.st-ro:first-of-type{border-top:0}
.st-ro code{word-break:break-all;white-space:normal}
.st-confirm{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem 1.5rem;align-items:end}
.st-confirm label{margin:0}
.st-confirm button{margin:0;width:auto;min-width:12rem}
@media (max-width:760px){
  .st-row,.st-ro{grid-template-columns:minmax(0,1fr);gap:.4rem}
  .st-confirm button{width:100%}
}