/* ==========================================================================
   Busport RRHH — hoja de estilos unica
   Sistema de diseno Busport (fuente de verdad: /ondemand/web/src/index.css)
   Sin dependencias externas. Compatible con CSP estricta (sin inline).
   Referencia de marcado: docs/design/design-reference.html (no publica)

   Indice
   01. Fuentes locales
   02. Tokens
   03. Base / reset
   04. Accesibilidad (focus, sr-only, skip-link)
   05. Layout app autenticada (topbar, subnav, page)
   06. Tarjetas y grillas
   07. Landing de modulos
   08. Botones
   09. Formularios
   10. Alertas
   11. Estados vacios
   12. Insignias (badges) y niveles
   13. Barras de progreso + utilidades .w-0 ... .w-100
   14. Login
   15. Encuesta publica (movil gama baja)
   16. Dashboard de resultados
   17. Pagina QR + afiche de impresion
   18. Configuraciones (matriz de permisos, buscador, auditoria)
   19. Utilidades
   19b. Densidad de escritorio (mouse vs tactil)
   20. Movimiento reducido
   21. Impresion
   22. Piezas comunes con Busport Operaciones (datos, choice, matriz, código, progreso con <span>)
   ========================================================================== */

/* 01. Fuentes locales ---------------------------------------------------- */
@font-face {
  font-family: "Harabara Mais";
  src: url("../fonts/harabara-mais-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Harabara Mais";
  src: url("../fonts/harabara-mais-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-300.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-700.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* 02. Tokens -------------------------------------------------------------- */
:root {
  /* Marca (Brand Book Busport 2026) */
  --bp-blue: #05206D;
  --bp-blue-light: #1e3a8f;
  --bp-blue-50: #eef1fa;
  --bp-blue-100: #dde3f4;
  --bp-green: #55B02E;          /* solo CTA / acento */
  --bp-green-light: #6fc94a;
  --bp-green-dark: #2f7a14;     /* verde para TEXTO sobre fondo claro (contraste AA) */
  --bp-green-50: #eaf6e4;
  --bp-gray: #6b7280;
  --bp-gray-light: #f2f4f7;     /* fondo de pagina */

  /* Neutros */
  --bp-white: #ffffff;
  --bp-text: #1a1a1a;
  --bp-text-muted: #5b6475;
  --bp-border: #e3e7ee;
  --bp-border-strong: #c9d0dc;

  /* Estados */
  --bp-danger: #b42318;
  --bp-danger-bg: #fdecea;
  --bp-danger-border: #f5c2bd;
  --bp-warning: #92400e;
  --bp-warning-bg: #fef3c7;
  --bp-warning-border: #f6d98a;
  --bp-info: var(--bp-blue-light);
  --bp-info-bg: var(--bp-blue-50);
  --bp-info-border: var(--bp-blue-100);
  --bp-success: var(--bp-green-dark);
  --bp-success-bg: var(--bp-green-50);
  --bp-success-border: #bfe3ad;

  /* Niveles de la escala de resultados (0-39 / 40-59 / 60-79 / 80-100) */
  --lvl-atencion: #d64545;
  --lvl-atencion-text: #b42318;
  --lvl-atencion-bg: #fdecea;
  --lvl-regular: #e0a526;
  --lvl-regular-text: #92400e;
  --lvl-regular-bg: #fef3c7;
  --lvl-bueno: #1e3a8f;
  --lvl-bueno-text: #05206D;
  --lvl-bueno-bg: #e3e8f7;
  --lvl-excelente: #55B02E;
  --lvl-excelente-text: #2f7a14;
  --lvl-excelente-bg: #e6f4de;

  /* Tipografia */
  --font-display: "Harabara Mais", "Open Sans", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;

  /* Espaciado (escala 4px) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* Radios y sombras */
  --radius-sm: 0.5rem;
  --radius: 0.75rem;     /* rounded-xl */
  --radius-lg: 1rem;     /* rounded-2xl */
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(5, 32, 109, 0.06), 0 1px 3px rgba(5, 32, 109, 0.08);
  --shadow-md: 0 4px 12px rgba(5, 32, 109, 0.10);
  --shadow-lg: 0 12px 32px rgba(5, 32, 109, 0.16);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(30, 58, 143, 0.35);
  --focus-color: var(--bp-blue-light);

  --topbar-h: 4rem;
  --page-max: 1680px;
  --transition: 150ms ease;

  /* Altura de controles interactivos (botones, inputs, enlaces de navegacion).
     Por defecto: area tactil de 44px (movil/tablet). En escritorio con mouse
     (ver bloque "Densidad de escritorio" al final del archivo) se reduce a 36px:
     el mouse no necesita 44px, y en monitores normales esa altura se siente
     inflada. Nunca reducir en pantallas tactiles: ahi 44px evita toques fallidos. */
  --control-h: 2.75rem;
}

/* 03. Base / reset -------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--bp-text);
  background-color: var(--bp-gray-light);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.font-display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--bp-blue);
  line-height: 1.2;
  margin: 0 0 var(--sp-2);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

p { margin: 0 0 var(--sp-3); }
strong, b { font-weight: 700; }
small { font-size: var(--fs-sm); }

a { color: var(--bp-blue-light); text-underline-offset: 2px; }
a:hover { color: var(--bp-blue); }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--bp-border);
  margin: var(--sp-6) 0;
}

[hidden] { display: none !important; }

/* Iconos SVG (estilo lucide: trazo fino, sin relleno) */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.75rem; height: 1.75rem; }
.icon--xl { width: 2.5rem; height: 2.5rem; stroke-width: 1.5; }

/* 04. Accesibilidad ------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--bp-white);
  color: var(--bp-blue);
  font-weight: 700;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.skip-link:focus { top: var(--sp-2); }

/* 05. Layout app autenticada --------------------------------------------- */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bp-blue);
  color: var(--bp-white);
  box-shadow: 0 2px 8px rgba(5, 32, 109, 0.25);
}
.topbar :focus-visible { outline-color: var(--bp-green-light); }

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--topbar-h);
  padding: var(--sp-2) var(--sp-4);
  max-width: var(--page-max);
  margin: 0 auto;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--bp-white);
  text-decoration: none;
  min-width: 0;
}
.topbar__brand:hover { color: var(--bp-white); }
.topbar__logo { height: 1.375rem; width: auto; }
.topbar__app {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-left: var(--sp-3);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.topbar__avatar {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--bp-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  align-items: center;
  justify-content: center;
  flex: none;
}
.topbar__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: right;
  line-height: 1.25;
}
.topbar__name {
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11rem;
}
.topbar__role {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11rem;
}
.topbar__logout { margin: 0; flex: none; }

/* Barra principal: solo Inicio y las areas (dentro de la topbar azul) */
.areas {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--sp-4) var(--sp-3);
}
.areas__lista {
  display: flex;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.areas__lista::-webkit-scrollbar { display: none; }
.areas__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
}
.areas__link:hover { color: var(--bp-white); background: rgba(255, 255, 255, 0.1); }
.areas__link.is-actual,
.areas__link[aria-current] { background: var(--bp-white); color: var(--bp-blue); }
.areas__icono { opacity: 0.85; }
.areas__corto { display: none; }
.areas__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--control-h);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  background: transparent;
  color: var(--bp-white);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.areas__toggle-actual { margin-left: auto; font-weight: 400; color: rgba(255, 255, 255, 0.8); }
.areas__toggle[aria-expanded="true"] .areas__chevron { transform: rotate(180deg); }
/* Celular con JS: el boton "Menu" abre la lista vertical de areas. Sin JS la lista se desplaza en horizontal. */
.areas.is-movil .areas__lista { display: none; flex-direction: column; margin-top: var(--sp-2); overflow: visible; }
.areas.is-movil.is-abierto .areas__lista { display: flex; }
.areas.is-movil .areas__link { width: 100%; border-radius: var(--radius); }

/* Barra secundaria: secciones del area actual (fondo claro, pestanas subrayadas) */
.areabar {
  background: var(--bp-white);
  border-bottom: 1px solid var(--bp-border-strong);
  box-shadow: var(--shadow-sm);
}
.areabar__inner {
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.areabar__inner::-webkit-scrollbar { display: none; }
.areabar__nombre {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--bp-blue);
  white-space: nowrap;
}
.areabar__sep { margin-left: var(--sp-1); color: var(--bp-text-muted); font-weight: 400; }
.areabar__tabs { display: flex; gap: var(--sp-1); }
.areabar__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 3px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--bp-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.areabar__link:hover { color: var(--bp-blue); border-bottom-color: var(--bp-blue-100); }
.areabar__link[aria-current="page"] { color: var(--bp-blue); border-bottom-color: var(--bp-green); }

/* Inicio: una tarjeta por area con sus accesos */
.area-card__titulo { color: inherit; text-decoration: none; }
.area-card__titulo:hover { color: var(--bp-blue-light); }
.area-card__enlaces { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--bp-border); padding-top: var(--sp-2); }
.area-card__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--bp-blue-light);
  text-decoration: none;
}
.area-card__link .icon:last-child { margin-left: auto; opacity: 0.6; }
.area-card__link:hover { background: var(--bp-blue-50); color: var(--bp-blue); }
.area-card__link--kpi { color: var(--bp-green-dark); }

/* Contenido */
.page {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-12);
}

.page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.page__eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bp-green-dark);
  margin-bottom: var(--sp-1);
}
.page__title { font-size: var(--fs-2xl); margin: 0; }
.page__subtitle { color: var(--bp-text-muted); margin: var(--sp-1) 0 0; max-width: 60ch; }
.page__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--bp-text-muted);
}
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--bp-border-strong); }
.breadcrumb a { color: var(--bp-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--bp-blue); text-decoration: underline; }

/* Botón "Volver" sobre el breadcrumb (layout.js): imprescindible en la PWA instalada (modo
   standalone no trae la flecha atrás del navegador). */
.icon--flip { transform: rotate(180deg); }
.breadcrumb__volver {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
  color: var(--bp-blue);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.breadcrumb__volver:hover { text-decoration: underline; }

.app-footer {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--bp-text-muted);
}

/* 06. Tarjetas y grillas -------------------------------------------------- */
.card {
  background: var(--bp-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(5, 32, 109, 0.04);
}
.card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--bp-border);
}
.card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  margin: 0;
}
.card__title .icon { color: var(--bp-blue-light); }
.card__subtitle { font-size: var(--fs-sm); color: var(--bp-text-muted); margin: 0; }
.card__body { padding: var(--sp-5); }
.card__body--flush { padding: 0; }
.card__footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--bp-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

/* Contenido principal + sidebar (patron Busport de escritorio) */
.layout-sidebar { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: start; }
.layout-sidebar > * { min-width: 0; }

.stack > * + * { margin-top: var(--sp-4); }
.stack--lg > * + * { margin-top: var(--sp-6); }

/* 07. Landing de modulos -------------------------------------------------- */
.welcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--bp-blue);
  background-image: linear-gradient(120deg, var(--bp-blue) 0%, var(--bp-blue-light) 100%);
  color: var(--bp-white);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.welcome__title { color: var(--bp-white); font-size: var(--fs-2xl); margin: 0; }
.welcome__text { color: rgba(255, 255, 255, 0.8); margin: var(--sp-1) 0 0; }
.welcome__mark {
  width: 5rem;
  opacity: 0.95;
  flex: none;
}

.module-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

.module-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--bp-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(5, 32, 109, 0.04);
  color: var(--bp-text);
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.module-card::after {
  content: "";
  position: absolute;
  left: var(--sp-6);
  right: var(--sp-6);
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--bp-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
a.module-card:hover {
  color: var(--bp-text);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--bp-blue-100);
}
a.module-card:hover::after,
a.module-card:focus-visible::after { transform: scaleX(1); }
a.module-card:focus-visible { outline-offset: 3px; border-radius: var(--radius-lg); }

.module-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  background: var(--bp-blue-50);
  color: var(--bp-blue);
}
.module-card__icon .icon { width: 1.5rem; height: 1.5rem; }
.module-card__title { font-size: var(--fs-lg); margin: 0; }
.module-card__desc { color: var(--bp-text-muted); font-size: var(--fs-sm); margin: 0; flex: 1; }
.module-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--bp-blue-light);
}
a.module-card:hover .module-card__cta { color: var(--bp-green-dark); }
.module-card__badge { position: absolute; top: var(--sp-4); right: var(--sp-4); }

.module-card--disabled {
  background: #fafbfc;
  box-shadow: none;
  border: 1px dashed var(--bp-border-strong);
  cursor: not-allowed;
}
.module-card--disabled .module-card__icon { background: var(--bp-gray-light); color: var(--bp-gray); }
.module-card--disabled .module-card__title { color: var(--bp-gray); }

/* 08. Botones ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--control-h);      /* 44px area tactil en movil/tablet, 36px con mouse */
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.btn:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; border-radius: var(--radius); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Primario = CTA verde (una por pantalla idealmente) */
.btn--primary { background: var(--bp-green); color: var(--bp-white); box-shadow: 0 1px 2px rgba(47, 122, 20, 0.3); }
.btn--primary:hover:not(:disabled) { background: #4a9e27; color: var(--bp-white); }
.btn--primary:active:not(:disabled) { background: var(--bp-green-dark); }

/* Azul solido = accion principal no-CTA (Filtrar, Guardar en tablas) */
.btn--blue { background: var(--bp-blue); color: var(--bp-white); }
.btn--blue:hover:not(:disabled) { background: var(--bp-blue-light); color: var(--bp-white); }

/* Secundario = contorno azul */
.btn--secondary { background: var(--bp-white); color: var(--bp-blue); border-color: var(--bp-border-strong); }
.btn--secondary:hover:not(:disabled) { border-color: var(--bp-blue-light); background: var(--bp-blue-50); color: var(--bp-blue); }

/* Peligro */
.btn--danger { background: var(--bp-white); color: var(--bp-danger); border-color: var(--bp-danger-border); }
.btn--danger:hover:not(:disabled) { background: var(--bp-danger); color: var(--bp-white); border-color: var(--bp-danger); }
.btn--danger-solid { background: var(--bp-danger); color: var(--bp-white); }
.btn--danger-solid:hover:not(:disabled) { background: #8f1c13; color: var(--bp-white); }

/* Fantasma (enlaces-boton) */
.btn--ghost { background: transparent; color: var(--bp-blue-light); }
.btn--ghost:hover:not(:disabled) { background: var(--bp-blue-50); color: var(--bp-blue); }

/* Sobre fondo azul (topbar: Cerrar sesion) */
.btn--on-dark { background: rgba(255, 255, 255, 0.1); color: var(--bp-white); border-color: rgba(255, 255, 255, 0.2); }
.btn--on-dark:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); color: var(--bp-white); }
.btn--on-dark:focus-visible { outline-color: var(--bp-green-light); }

.btn--sm { min-height: 2.25rem; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); border-radius: var(--radius-sm); }
.btn--lg { min-height: 3.25rem; padding: var(--sp-3) var(--sp-8); font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: var(--control-h); }
.btn--icon.btn--sm { width: 2.25rem; }

.btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* 09. Formularios --------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--sp-4); }

.field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.field__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--bp-blue);
}
.field__label .req { color: var(--bp-danger); margin-left: 2px; }
.field__hint { font-size: var(--fs-xs); color: var(--bp-text-muted); margin: 0; }
.field__error {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--bp-danger);
  margin: 0;
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bp-white);
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);          /* 16px evita zoom en iOS */
  line-height: 1.4;
  color: var(--bp-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: #8a93a5; }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--bp-gray); }
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--bp-blue-light);
  box-shadow: var(--focus-ring);
}
.input[readonly] { background: var(--bp-gray-light); }
.input:disabled,
.select:disabled,
.textarea:disabled { background: var(--bp-gray-light); color: var(--bp-gray); cursor: not-allowed; }
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"],
.is-invalid { border-color: var(--bp-danger); }
.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.25); }

.select {
  padding-right: 2.5rem;
  background-image: url("../img/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

.textarea { min-height: 7.5rem; resize: vertical; }

input[type="date"].input,
input[type="time"].input { min-width: 0; }

.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.checkbox input,
.radio input,
.check {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--bp-blue);
  cursor: pointer;
  flex: none;
}

/* Input con icono (buscador) */
.input-icon { position: relative; }
.input-icon .icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bp-gray);
  pointer-events: none;
}
.input-icon .input { padding-left: 2.5rem; }

/* Campo de texto + boton pegado (copiar link) */
.input-group { display: flex; align-items: stretch; }
.input-group .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  min-width: 0;
}
.input-group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  flex: none;
}

/* 10. Alertas ------------------------------------------------------------- */
.alert {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid;
  border-left-width: 4px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.alert .icon { margin-top: 1px; }
.alert__body { flex: 1; min-width: 0; }
.alert__title { display: block; font-weight: 700; margin-bottom: 2px; }
.alert__text { margin: 0; }
.alert--error { background: var(--bp-danger-bg); border-color: var(--bp-danger-border); border-left-color: var(--bp-danger); color: #7a1a12; }
.alert--error .icon { color: var(--bp-danger); }
.alert--success { background: var(--bp-success-bg); border-color: var(--bp-success-border); border-left-color: var(--bp-green); color: #24560f; }
.alert--success .icon { color: var(--bp-green-dark); }
.alert--info { background: var(--bp-info-bg); border-color: var(--bp-info-border); border-left-color: var(--bp-blue-light); color: var(--bp-blue); }
.alert--info .icon { color: var(--bp-blue-light); }
.alert--warning { background: var(--bp-warning-bg); border-color: var(--bp-warning-border); border-left-color: var(--lvl-regular); color: var(--bp-warning); }
.alert--warning .icon { color: var(--bp-warning); }

/* 11. Estados vacios ------------------------------------------------------ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-10) var(--sp-6);
  color: var(--bp-text-muted);
}
.empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: var(--bp-blue-50);
  color: var(--bp-blue-light);
}
.empty__icon .icon { width: 1.75rem; height: 1.75rem; }
.empty__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--bp-blue); margin: 0; }
.empty__text { font-size: var(--fs-sm); max-width: 40ch; margin: 0 0 var(--sp-2); }
.empty--compact { padding: var(--sp-6) var(--sp-4); }

/* 12. Insignias y niveles ------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  background: var(--bp-gray-light);
  color: var(--bp-text-muted);
}
.badge--dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}
/* Niveles de resultado */
.badge--atencion  { background: var(--lvl-atencion-bg);  color: var(--lvl-atencion-text); }
.badge--regular   { background: var(--lvl-regular-bg);   color: var(--lvl-regular-text); }
.badge--bueno     { background: var(--lvl-bueno-bg);     color: var(--lvl-bueno-text); }
.badge--excelente { background: var(--lvl-excelente-bg); color: var(--lvl-excelente-text); }
/* Generales */
.badge--neutral { background: var(--bp-gray-light); color: var(--bp-text-muted); }
.badge--info    { background: var(--bp-blue-50); color: var(--bp-blue); }
.badge--success { background: var(--bp-green-50); color: var(--bp-green-dark); }
.badge--danger  { background: var(--bp-danger-bg); color: var(--bp-danger); }
.badge--on-dark { background: rgba(255, 255, 255, 0.15); color: var(--bp-white); }

/* Leyenda de la escala */
.scale-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--bp-text-muted);
}
.scale-legend li { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* 13. Barras de progreso -------------------------------------------------- */
/*
   Marcado:
   <div class="progress" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" aria-label="Liderazgo 73%">
     <div class="progress__bar progress__bar--bueno w-73"></div>
   </div>
   - Ancho: clase .w-{0..100} (entero redondeado). Sin style inline.
   - Color:  .progress__bar--atencion | --regular | --bueno | --excelente
*/
.progress {
  position: relative;
  width: 100%;
  height: 0.625rem;
  background: #e8ecf2;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress--lg { height: 0.875rem; }
.progress--sm { height: 0.375rem; }
.progress__bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--bp-blue-light);
  transition: width 400ms ease;
}
.progress__bar--atencion  { background: var(--lvl-atencion); }
.progress__bar--regular   { background: var(--lvl-regular); }
.progress__bar--bueno     { background: var(--lvl-bueno); }
.progress__bar--excelente { background: var(--lvl-excelente); }

/* Utilidades de ancho porcentual (0-100, paso 1) */
.w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}
.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}
.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}
.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}
.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}
.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}
.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}
.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}
.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}
.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}
.w-100{width:100%}

/* 14. Login --------------------------------------------------------------- */
.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-4);
  background-color: var(--bp-gray-light);
  background-image:
    linear-gradient(180deg, var(--bp-blue) 0, var(--bp-blue) 42vh, transparent 42vh);
}
.auth__card {
  width: 100%;
  max-width: 26rem;
  background: var(--bp-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-8) var(--sp-6);
}
.auth__logo { height: 2.25rem; width: auto; margin: 0 auto var(--sp-6); }
.auth__title { text-align: center; font-size: var(--fs-xl); margin: 0; }
.auth__subtitle { text-align: center; color: var(--bp-text-muted); font-size: var(--fs-sm); margin: var(--sp-1) 0 var(--sp-6); }
.auth__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bp-border);
  font-size: var(--fs-xs);
  color: var(--bp-text-muted);
  text-align: center;
}
.auth__footer { font-size: var(--fs-xs); color: var(--bp-text-muted); text-align: center; }

/* 15. Encuesta publica (movil gama baja) ---------------------------------- */
/* Liviana: sin sombras grandes, sin blur, sin animaciones pesadas. */
.survey-page { background: var(--bp-gray-light); }

.survey-hero {
  background: var(--bp-blue);
  color: var(--bp-white);
  padding: var(--sp-5) var(--sp-4) var(--sp-10);
}
.survey-hero__inner { max-width: 44rem; margin: 0 auto; }
.survey-hero__logo { height: 1.5rem; width: auto; margin-bottom: var(--sp-5); }
.survey-hero__title { color: var(--bp-white); font-size: var(--fs-2xl); margin: 0 0 var(--sp-2); }
.survey-hero__text { color: rgba(255, 255, 255, 0.85); font-size: var(--fs-sm); margin: 0; }
.survey-hero__anon {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  background: rgba(85, 176, 46, 0.18);
  color: #c9efb7;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.survey {
  max-width: 44rem;
  margin: calc(var(--sp-8) * -1) auto 0;
  padding: 0 var(--sp-3) var(--sp-10);
}
.survey__form { display: flex; flex-direction: column; gap: var(--sp-4); }

.survey-section {
  margin: 0;
  padding: var(--sp-5) var(--sp-4);
  background: var(--bp-white);
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.survey-section__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.survey-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--bp-blue);
  color: var(--bp-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.survey-section__title { font-size: var(--fs-lg); margin: 0; }
.survey-section__desc { font-size: var(--fs-sm); color: var(--bp-text-muted); margin: 0; }

.question {
  margin: 0;
  padding: var(--sp-4) 0;
  border: 0;
  border-top: 1px solid var(--bp-border);
  min-width: 0;
}
.question:first-of-type { border-top: 0; padding-top: 0; }
.question__text {
  display: block;
  padding: 0;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.45;
  color: var(--bp-text);
}
.question__text .req { color: var(--bp-danger); }
.question.is-invalid .question__text { color: var(--bp-danger); }
.question.is-invalid .scale { box-shadow: 0 0 0 2px var(--bp-danger); }

/* Pregunta de respuesta libre: es un <div>, así que :first-of-type no la alcanza. */
.survey-section__head + .question { border-top: 0; padding-top: 0; }
.question--text ~ .question:first-of-type { border-top: 1px solid var(--bp-border); padding-top: var(--sp-4); }
.question--text .question__text { margin-bottom: var(--sp-1); }
.question__opt { font-weight: 400; font-size: var(--fs-sm); color: var(--bp-text-muted); }
.question--text .char-counter { margin-top: var(--sp-1); }
.question--text.is-invalid .textarea { border-color: var(--bp-danger); }

/* Escala 1-5 segmentada */
.scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bp-white);
}
.scale__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.scale__option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;              /* 52px: tactil comodo */
  border-left: 1px solid var(--bp-border-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--bp-blue);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.scale__input:first-child + .scale__option { border-left: 0; }
.scale__option:hover { background: var(--bp-blue-50); }
.scale__input:checked + .scale__option {
  background: var(--bp-blue);
  color: var(--bp-white);
}
.scale__input:focus-visible + .scale__option {
  outline: 3px solid var(--bp-green);
  outline-offset: -3px;
}
.scale__ends {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--bp-text-muted);
}
.scale__ends span:last-child { text-align: right; }

/* Opciones (casillas o botones de opcion): apiladas en el celular, en linea desde 640px.
   Cada opcion entera es el area tactil (min. 48px de alto). */
.question--options .question__text { margin-bottom: var(--sp-1); }
.question--options .field__hint { margin-bottom: var(--sp-3); }
.choices { display: grid; gap: var(--sp-2); }
.choice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 3rem;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--bp-border-strong);
  border-radius: var(--radius);
  background: var(--bp-white);
  font-weight: 600;
  line-height: 1.3;
  color: var(--bp-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.choice:hover { background: var(--bp-blue-50); }
.choice__input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: none;
  accent-color: var(--bp-blue);
  cursor: pointer;
}
.choice__label { min-width: 0; overflow-wrap: anywhere; }
.choice:has(.choice__input:checked) { border-color: var(--bp-blue); background: var(--bp-blue-50); color: var(--bp-blue); }
.choice:has(.choice__input:focus-visible) { outline: 3px solid var(--bp-green); outline-offset: 1px; }
.question.is-invalid .choice { border-color: var(--bp-danger); }

/* Contador de caracteres */
.char-counter {
  display: block;
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--bp-text-muted);
  font-variant-numeric: tabular-nums;
}
.char-counter.is-near { color: var(--bp-warning); font-weight: 700; }
.char-counter.is-over { color: var(--bp-danger); font-weight: 700; }

.survey__submit {
  padding: var(--sp-4);
  background: var(--bp-white);
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-lg);
}
.survey__privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--bp-text-muted);
}

/* Pantalla de agradecimiento */
.thanks {
  max-width: 32rem;
  margin: calc(var(--sp-8) * -1) auto 0;
  padding: var(--sp-10) var(--sp-6);
  background: var(--bp-white);
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.thanks__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  background: var(--bp-green-50);
  color: var(--bp-green-dark);
}
.thanks__icon .icon { width: 2.25rem; height: 2.25rem; stroke-width: 2; }
.thanks__title { font-size: var(--fs-2xl); margin: 0 0 var(--sp-2); }
.thanks__text { color: var(--bp-text-muted); margin: 0 0 var(--sp-6); }
.thanks__title--solo { margin-bottom: var(--sp-6); }
.thanks-wrap { padding: 0 var(--sp-3) var(--sp-10); }

/* 16. Dashboard de resultados --------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  background: var(--bp-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.filters .field { flex: 1 1 10rem; }
.filters__actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; }
.filters__presets { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex-basis: 100%; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--bp-border-strong);
  background: var(--bp-white);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--bp-text-muted);
  text-decoration: none;
  cursor: pointer;
}
.chip:hover { border-color: var(--bp-blue-light); color: var(--bp-blue); }
.chip.is-active,
.chip[aria-current="true"] { background: var(--bp-blue); border-color: var(--bp-blue); color: var(--bp-white); }

.kpi-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--sp-6);
}
.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--bp-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
}
.kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--bp-blue-100);
}
.kpi--atencion::before  { background: var(--lvl-atencion); }
.kpi--regular::before   { background: var(--lvl-regular); }
.kpi--bueno::before     { background: var(--lvl-bueno); }
.kpi--excelente::before { background: var(--lvl-excelente); }
.kpi--primary {
  background: var(--bp-blue);
  background-image: linear-gradient(135deg, var(--bp-blue) 0%, var(--bp-blue-light) 100%);
  color: var(--bp-white);
}
.kpi--primary::before { background: var(--bp-green); }
.kpi--primary .kpi__label,
.kpi--primary .kpi__meta { color: rgba(255, 255, 255, 0.8); }
.kpi--primary .kpi__value { color: var(--bp-white); }
.kpi--primary .progress { background: rgba(255, 255, 255, 0.18); }

.kpi__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bp-text-muted);
}
.kpi__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--bp-blue);
  font-variant-numeric: tabular-nums;
}
.kpi__unit { font-size: 0.55em; margin-left: 2px; opacity: 0.75; }
.kpi__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--bp-text-muted);
}

/* Lista de categorias con barra */
.category-list { list-style: none; margin: 0; padding: 0; }
.category {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--bp-border);
}
.category:first-child { border-top: 0; }
.category__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}
.category__name { font-weight: 700; color: var(--bp-text); margin: 0; font-size: var(--fs-sm); }
.category__score { display: inline-flex; align-items: center; gap: var(--sp-2); }
.category__pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--bp-blue);
  font-variant-numeric: tabular-nums;
  min-width: 3.5ch;
  text-align: right;
}
.category__meta { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--bp-text-muted); }

/* Comentarios */
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--bp-border);
}
.comment:first-child { border-top: 0; }
.comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--bp-text-muted);
}
.comment__text {
  margin: 0;
  padding-left: var(--sp-3);
  border-left: 3px solid var(--bp-blue-100);
  font-size: var(--fs-sm);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Respuestas libres (resultados) */
.free-note { margin: 0; padding: var(--sp-3) var(--sp-5) 0; }
.free-group { padding-bottom: var(--sp-2); }
.free-group + .free-group { border-top: 1px solid var(--bp-border); }
.free-cat {
  margin: 0;
  padding: var(--sp-4) var(--sp-5) 0;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  color: var(--bp-blue);
}
.free-q + .free-q { margin-top: var(--sp-2); border-top: 1px dashed var(--bp-border); }
.free-q__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-5) 0;
}
.free-q__title { margin: 0; font-size: var(--fs-sm); font-weight: 700; line-height: 1.45; color: var(--bp-text); min-width: 0; overflow-wrap: anywhere; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--bp-border);
  font-size: var(--fs-xs);
  color: var(--bp-text-muted);
}

/* 17. Pagina QR ----------------------------------------------------------- */
.qr-layout { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: start; }
.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
}
.qr-card__frame {
  padding: var(--sp-4);
  background: var(--bp-white);
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.qr-card__image {
  width: min(20rem, 70vw);
  height: auto;
  aspect-ratio: 1 / 1;
  image-rendering: pixelated;
}
.qr-card__caption { font-size: var(--fs-sm); color: var(--bp-text-muted); margin: 0; }

.copy-field { width: 100%; max-width: 36rem; }
.copy-field .input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-sm); }
.copy-field__status {
  display: block;
  min-height: 1.25rem;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--bp-green-dark);
}
.copy-field.is-copied .btn { background: var(--bp-green); border-color: var(--bp-green); color: var(--bp-white); }

.qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--sp-4) 2.75rem;
  font-size: var(--fs-sm);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--bp-blue-50);
  color: var(--bp-blue);
  font-family: var(--font-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Afiche imprimible: oculto en pantalla. Debe ser hijo DIRECTO de <body>. */
.print-poster { display: none; }

/* 18. Configuraciones ----------------------------------------------------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--bp-border);
}
.toolbar__search { flex: 1 1 16rem; max-width: 26rem; }
.toolbar__meta { font-size: var(--fs-xs); color: var(--bp-text-muted); }

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table { font-size: var(--fs-sm); }
.table th,
.table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--bp-border);
}
.table thead th {
  background: #f7f8fb;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bp-text-muted);
  white-space: nowrap;
}
.table tbody tr:hover { background: #fafbfd; }
.table tbody tr:last-child td,
.table tbody tr:last-child th { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .nowrap { white-space: nowrap; }
.table .muted { color: var(--bp-text-muted); }
.table--compact th,
.table--compact td { padding: var(--sp-2) var(--sp-3); }

/* Matriz cargos x modulos */
.table--matrix th,
.table--matrix td { text-align: center; }
.table--matrix thead th { position: sticky; top: 0; z-index: 2; }
.table--matrix .matrix__row-head {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background: var(--bp-white);
  font-weight: 700;
  color: var(--bp-text);
  min-width: 14rem;
  box-shadow: 1px 0 0 var(--bp-border);
}
.table--matrix thead .matrix__row-head { z-index: 3; background: #f7f8fb; }
.table--matrix tbody tr:hover .matrix__row-head { background: #fafbfd; }
.matrix__row-sub { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--bp-text-muted); }
.matrix__col-head { min-width: 7rem; }
/* Dos filas de encabezado: areas arriba (altura fija) y permisos debajo, ambas fijas al desplazar. */
.table--matrix thead .matrix__areas th { height: var(--control-h); }
.table--matrix thead tr:not(.matrix__areas) th { top: var(--control-h); }
.matrix__area { background: var(--bp-blue-50) !important; color: var(--bp-blue); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; border-left: 2px solid var(--bp-white); }
.matrix__area .icon { margin-right: var(--sp-1); vertical-align: -2px; }
.matrix__col--inicio { border-left: 2px solid var(--bp-blue-100); }
.matrix__cell { width: 1%; }
.matrix__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.matrix__check:hover { background: var(--bp-blue-50); }
.matrix__check input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--bp-blue);
  cursor: pointer;
}
tr.is-changed .matrix__row-head { box-shadow: inset 3px 0 0 var(--bp-green), 1px 0 0 var(--bp-border); }

.savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bp-white);
  border-top: 1px solid var(--bp-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size: var(--fs-sm);
  color: var(--bp-text-muted);
}

/* Auditoria */
.table--audit td { vertical-align: top; }
.table--audit td:first-child { width: 1%; }
.audit__action { font-weight: 700; color: var(--bp-text); }
.audit__detail { color: var(--bp-text-muted); font-size: var(--fs-xs); }
.diff-add { color: var(--bp-green-dark); font-weight: 700; }
.diff-del { color: var(--bp-danger); font-weight: 700; text-decoration: line-through; }

/* 19. Utilidades ---------------------------------------------------------- */
.text-muted { color: var(--bp-text-muted); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-blue { color: var(--bp-blue); }
.text-green { color: var(--bp-green-dark); }
.text-danger { color: var(--bp-danger); }
.fw-bold { font-weight: 700; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.flex-wrap { flex-wrap: wrap; }
.only-print { display: none; }

/* Responsive ------------------------------------------------------------- */
@media (min-width: 480px) {
  .topbar__avatar { display: inline-flex; }
}

@media (min-width: 640px) {
  .page { padding: var(--sp-8) var(--sp-6) var(--sp-12); }
  .topbar__inner { padding: var(--sp-2) var(--sp-6); }
  .areas { padding: 0 var(--sp-6) var(--sp-3); }
  .areabar__inner { padding: 0 var(--sp-6); }
  .grid--2, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .survey { padding: 0 var(--sp-4) var(--sp-12); }
  .survey-section { padding: var(--sp-6); }
  .survey__submit { padding: var(--sp-5) var(--sp-6); }
  .survey-hero { padding: var(--sp-6) var(--sp-6) var(--sp-12); }
  .survey-hero__title { font-size: var(--fs-3xl); }
  .choices { display: flex; flex-wrap: wrap; }
  .choice { flex: 1 1 auto; }
  .auth__card { padding: var(--sp-10) var(--sp-8); }
  .topbar__name, .topbar__role { max-width: 18rem; }
}

@media (min-width: 1024px) {
  .page__title { font-size: var(--fs-3xl); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi__value { font-size: var(--fs-4xl); }
  .layout-sidebar { grid-template-columns: minmax(0, 1fr) 420px; }
  .qr-layout { grid-template-columns: minmax(0, 1fr) 420px; }
  .welcome { padding: var(--sp-8) var(--sp-10); }
  .welcome__mark { width: 6.5rem; }
  .page { padding: var(--sp-8) var(--sp-8) var(--sp-12); }
  .topbar__inner { padding: var(--sp-2) var(--sp-8); }
  .areas { padding: 0 var(--sp-8) var(--sp-3); }
  .areabar__inner { padding: 0 var(--sp-8); }
}

@media (min-width: 1440px) {
  .module-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Barra de areas: rrhh.js mide si entra y aplica, por pasos, nombres cortos (.areas--corto), sin
   iconos (.areas--sin-iconos) y mas junta (.areas--denso). Depende de cuantas areas ve cada cargo.
   Sin JS, la lista se desplaza en horizontal. */
.areas--corto .areas__largo { display: none; }
.areas--corto .areas__corto { display: inline; }
.areas--sin-iconos .areas__icono { display: none; }
.areas--denso .areas__lista { gap: 2px; }
.areas--denso .areas__link { padding-left: var(--sp-2); padding-right: var(--sp-2); font-size: 0.8125rem; }

/* Barra de secciones del area que no entra (rrhh.js, barraDesplazable): primero se compacta sin el
   nombre del area; si aun asi no entra, se desplaza con un degradado que indica que hay mas. */
.areabar.is-compacto .areabar__nombre { display: none; }
.areabar.is-compacto .areabar__link { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.areabar__inner.is-desborda { scrollbar-width: thin; }
.areabar__inner.is-desborda::-webkit-scrollbar { display: block; height: 6px; }
.areabar__inner.is-desborda::-webkit-scrollbar-thumb { background: var(--bp-border-strong); border-radius: 999px; }
.areabar__inner.is-desborda.is-mas-der {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
.areabar__inner.is-desborda.is-mas-izq {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
}
.areabar__inner.is-desborda.is-mas-izq.is-mas-der {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

@media (max-width: 479px) {
  .topbar__app { display: none; }
  .btn--collapse .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .btn--collapse { padding: 0; width: 2.75rem; }
  .filters__actions { flex-basis: 100%; }
  .filters__actions .btn { flex: 1; }
}

/* 19b. Densidad de escritorio ---------------------------------------------
   La app se usa en escritorio (mouse), tablet y movil (dedo). El area
   tactil de 44px (--control-h) y los espaciados generosos (--sp-6/--sp-8)
   son correctos para dedo, pero en un monitor normal con mouse se ven
   inflados. No se reduce solo por ancho (una tablet puede ser tan ancha
   como un laptop): se exige ademas "pointer: fine" (mouse/trackpad), asi
   una tablet tactil sigue con la escala tactil completa. Solo en pantalla:
   las hojas imprimibles (F005, planilla, agenda, fichas) no cambian.
   -------------------------------------------------------------------- */
@media screen and (min-width: 768px) and (pointer: fine) {
  :root {
    --control-h: 2.25rem;   /* 36px: boton/input/enlace de nav, antes 44px */
    --sp-6: 1.125rem;       /* 18px, antes 24px: gap entre tarjetas/secciones */
    --sp-8: 1.5rem;         /* 24px, antes 32px: relleno de pagina y bloques grandes */
  }

  .btn--sm { min-height: 1.875rem; }
  .btn--lg { min-height: 2.75rem; padding: var(--sp-2) var(--sp-6); }
  .btn--icon.btn--sm { width: 1.875rem; }

  .card__header,
  .card__footer { padding: var(--sp-3) var(--sp-4); }
  .card__body { padding: var(--sp-4); }

  .kpi { padding: var(--sp-4); }

  .table th,
  .table td { padding: var(--sp-2) var(--sp-3); }

  .module-card { padding: var(--sp-5); }

  /* Cabecera azul más baja en escritorio. */
  :root { --topbar-h: 3rem; }
  .topbar__inner { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
  .topbar__avatar { width: 2rem; height: 2rem; }
  .topbar__logout .btn { min-height: 1.875rem; }
  .areas { padding-bottom: var(--sp-2); }
  .areas__link { min-height: 2rem; padding: var(--sp-1) var(--sp-3); }
}

/* 20. Movimiento reducido ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  a.module-card:hover { transform: none; }
}

/* 21. Impresion ----------------------------------------------------------- */
@media print {
  @page { size: A4 portrait; margin: 12mm; }

  html, body { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .topbar, .areabar, .app-footer, .no-print, .btn, .filters, .savebar, .skip-link { display: none !important; }
  .only-print { display: block; }
  .card, .kpi { box-shadow: none; border: 1px solid var(--bp-border); break-inside: avoid; }
  .page { padding: 0; max-width: none; }

  /* Pagina QR: <body class="has-print-poster"> imprime SOLO el afiche */
  body.has-print-poster > *:not(.print-poster) { display: none !important; }
  body.has-print-poster .print-poster {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 270mm;
    padding: 10mm 8mm 6mm;
    text-align: center;
    color: var(--bp-blue);
    border: 2px solid var(--bp-blue);
    border-radius: 6mm;
    break-inside: avoid;
  }
  .print-poster__logo { height: 16mm; width: auto; margin: 0 auto; }
  .print-poster__band {
    width: 40mm;
    height: 2mm;
    margin: 6mm auto 0;
    border-radius: 1mm;
    background: var(--bp-green);
  }
  .print-poster__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30pt;
    line-height: 1.1;
    color: var(--bp-blue);
    margin: 8mm 0 3mm;
  }
  .print-poster__text {
    font-family: var(--font-body);
    font-size: 14pt;
    color: #333;
    margin: 0 auto;
    max-width: 150mm;
  }
  .print-poster__qr {
    width: 115mm;
    height: 115mm;
    margin: 8mm auto;
    padding: 4mm;
    border: 1px solid #d0d6e2;
    border-radius: 4mm;
    image-rendering: pixelated;
  }
  .print-poster__url {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12pt;
    color: var(--bp-blue);
    word-break: break-all;
    margin: 0;
  }
  .print-poster__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3mm;
    font-family: var(--font-body);
    font-size: 10pt;
    color: #555;
    margin-top: 6mm;
  }
  .print-poster__mark { width: 8mm; height: auto; }
}

/* Matriz de permisos: el scroll vertical ocurre dentro del contenedor para que
   el encabezado (áreas + permisos) y la columna de cargo queden fijos. */
.table-wrap--matrix { max-height: calc(100vh - 11rem); overflow: auto; }
.table--matrix thead .matrix__areas th { white-space: nowrap; }
@media (max-width: 767px) { .table-wrap--matrix { max-height: calc(100vh - 8rem); } }
@media print { .table-wrap--matrix { max-height: none; overflow: visible; } }

/* Menú del usuario y botón del tour guiado (topbar) ------------------------ */
.usermenu { position: relative; flex: none; min-width: 0; }
.usermenu__toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  color: var(--bp-white);
  cursor: pointer;
  list-style: none;
}
.usermenu__toggle::-webkit-details-marker { display: none; }
.usermenu__toggle:hover,
.usermenu[open] .usermenu__toggle { background: rgba(255, 255, 255, 0.1); }
.usermenu__chevron { opacity: 0.8; transition: transform var(--transition); }
.usermenu[open] .usermenu__chevron { transform: rotate(180deg); }
.usermenu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-2));
  z-index: 60;
  width: 17rem;
  max-width: calc(100vw - 1.5rem);
  padding: var(--sp-2);
  background: var(--bp-white);
  color: var(--bp-text);
  border: 1px solid var(--bp-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.usermenu__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--bp-border);
  font-size: var(--fs-sm);
  line-height: 1.3;
}
.usermenu__head strong { color: var(--bp-blue); overflow-wrap: anywhere; }
.usermenu__head span { font-size: var(--fs-xs); color: var(--bp-text-muted); }
.usermenu__form { margin: 0; }
.usermenu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--bp-blue);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.usermenu__item:hover { background: var(--bp-blue-50); color: var(--bp-blue); }
.usermenu__item .icon { color: var(--bp-blue-light); }
.usermenu__item:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
.topbar__ayuda[hidden] { display: none; }

/* Con el botón del tour la barra necesita más espacio: se compacta antes que el resto. */
@media (max-width: 767px) {
  .topbar__ayuda .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .topbar__ayuda.btn--collapse { padding: 0; width: 2.5rem; }
  .usermenu__chevron { display: none; }
}
@media (max-width: 639px) {
  .topbar__user { gap: var(--sp-2); }
  .usermenu .topbar__who { display: none; }
  .usermenu .topbar__avatar { display: inline-flex; }
  .usermenu__toggle { padding: var(--sp-1); }
  .topbar__logout .btn--collapse .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .topbar__logout .btn--collapse { padding: 0; width: 2.75rem; }
}
@media print {
  .usermenu__panel { display: none !important; }
}

/* 22. Piezas comunes con Busport Operaciones ------------------------------ */
/* Copiadas de operaciones-app (public/assets/css/operaciones.css, secciones 01 y 05) el 2-oct-2026
   para que el marcado de las dos apps sea intercambiable. Mismos tokens que el resto de esta hoja. */

/* Lista de datos de una ficha: <dl class="datos"><div><dt>Etiqueta</dt><dd>Valor</dd></div>...</dl>.
   Una columna en el celular, dos desde tablet. */
.datos { display: grid; gap: var(--sp-3) var(--sp-6); margin: 0; grid-template-columns: 1fr; }
.datos dt { font-size: var(--fs-xs); font-weight: 700; color: var(--bp-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.datos dd { margin: var(--sp-1) 0 0; }
@media (min-width: 768px) {
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Texto secundario bajo la etiqueta de una opción (.choice). */
.choice__desc {
  display: block;
  margin-top: var(--sp-1);
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--bp-text-muted);
}

/* Segunda línea de un encabezado de columna de la matriz de permisos (p. ej. "Próximamente"). */
.matrix__col-sub {
  display: block;
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--bp-text-muted);
  text-transform: none;
}

/* Campo para escribir un código corto (activación, verificación): monoespaciado, grande y centrado. */
.input--codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-xl);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

/* Barras de progreso armadas con <span> (dentro de <li>, <p>...): sin display:block el ancho .w-N de
   la sección 13 no aplica y solo se ve el riel gris. progressBar() de layout.js usa <div> y no cambia. */
span.progress, span.progress__bar { display: block; }