/* Sistema de diseño de PersonalPro — componentes reutilizables.
   Depende de tokens.css. Ver docs/diseño.md. */

/* ── Reset ────────────────────────────────────────────────────────── */
/* D-178 (Pass 15 bloque H, idea emergente 14.7 #1): el `[hidden]` del UA
   stylesheet lo pisa cualquier `display` de autor (`.pill`, `.boton`,
   `.estado-vacio`, `.buscador-autocomplete …` — cuatro parches puntuales
   antes de esto, D-131/D-169 entre ellos). Un solo reset con `!important`
   corta la clase entera de bug: un elemento que el JS oculta con
   `el.hidden = true` queda oculto, tenga la clase que tenga. Alternar
   siempre por `el.hidden`, nunca por `style.display`. */
[hidden] { display: none !important; }

/* ── Encabezado de aplicación ─────────────────────────────────────── */
.encabezado-app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-5);
  background: var(--color-primario);
  color: var(--texto-sobre-primario);
  flex-wrap: wrap;
}
.encabezado-app .marca {
  font-weight: var(--peso-fuerte);
  font-size: var(--texto-lg);
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--texto-sobre-primario);
  white-space: nowrap;
}
.encabezado-app .contexto {
  /* Pass 5 bloque A: el título de la pantalla vive acá, no en el
     <main> — varias pantallas habían quedado con las dos cosas a la
     vez (Pass 4 B.3 agregó un H1 a panel_provincial.html que duplicaba
     este mismo texto). Prominente: peso 700, 26px, blanco pleno. */
  font-size: 26px;
  font-weight: var(--peso-fuerte);
  color: var(--texto-sobre-primario);
  text-align: center;
  flex: 1;
  min-width: 120px;
}
.encabezado-app .usuario {
  position: relative;
}
.encabezado-app .usuario-boton {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--texto-sobre-primario);
  border-radius: var(--radio-md);
  padding: var(--espacio-2) var(--espacio-3);
  font-size: var(--texto-sm);
  cursor: pointer;
}
.encabezado-app .usuario-boton:hover {
  background: rgba(255, 255, 255, 0.18);
}
.encabezado-app .usuario-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--espacio-2));
  background: var(--superficie-tarjeta);
  color: var(--texto-normal);
  border: var(--borde-ancho) solid var(--superficie-borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-media);
  min-width: 200px;
  overflow: hidden;
  z-index: 20;
}
.encabezado-app .usuario-menu[hidden] { display: none; }
.encabezado-app .usuario-menu a,
.encabezado-app .usuario-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--espacio-3);
  font-size: var(--texto-sm);
  color: var(--texto-normal);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.encabezado-app .usuario-menu a:hover,
.encabezado-app .usuario-menu button:hover {
  background: var(--superficie-hundida);
}
/* D-189 (Pass 16): dropdown "Admin" de la barra superior — reusa el
   panel de `.usuario-menu`; solo agrega el encabezado de sección. */
.encabezado-app .usuario-menu .menu-seccion {
  padding: var(--espacio-2) var(--espacio-3) 2px;
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-meta);
  border-top: var(--borde-ancho) solid var(--superficie-borde);
}
.encabezado-app .usuario-menu .menu-seccion:first-child { border-top: none; }

/* ── Contenedor principal ─────────────────────────────────────────── */
.contenedor-app {
  max-width: var(--ancho-contenedor);
  margin: 0 auto;
  padding: var(--espacio-5);
}
.contenedor-angosto {
  max-width: var(--ancho-angosto);
  margin: 0 auto;
  padding: var(--espacio-5);
}

/* ── Tarjeta ───────────────────────────────────────────────────────── */
.card {
  background: var(--superficie-tarjeta);
  border: var(--borde-ancho) solid var(--superficie-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sutil);
  padding: var(--espacio-5);
}
.card > h2, .card > h3 {
  margin-top: 0;
}

/* ── Métrica ───────────────────────────────────────────────────────── */
.metrica-card {
  background: var(--superficie-tarjeta);
  border: var(--borde-ancho) solid var(--superficie-borde);
  border-radius: var(--radio-md);
  padding: var(--espacio-4);
  text-align: center;
}
.metrica-card .metrica-valor {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-fuerte);
  color: var(--color-primario);
  line-height: 1.15;
}
.metrica-card .metrica-etiqueta {
  font-size: var(--texto-xs);
  color: var(--texto-tenue);
  margin-top: var(--espacio-1);
}
.metrica-card.metrica-alerta .metrica-valor {
  color: var(--error-texto);
}

/* ── Tabla ─────────────────────────────────────────────────────────── */
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}
.tabla th, .tabla td {
  text-align: left;
  padding: var(--espacio-2) var(--espacio-3);
  border-bottom: var(--borde-ancho) solid var(--superficie-borde);
}
.tabla th {
  /* Pass 4 bloque B.2: azul primario, no --texto-meta — mismo criterio
     que las etiquetas de .tarjeta-datos y .label-form: un encabezado de
     columna es una etiqueta indicadora, no texto de lectura. */
  color: var(--color-primario);
  font-weight: var(--peso-semi);
  /* D-196 (Pass 16.4 B): un peldaño más (13 → 14px). Global: todas las
     tablas usan `.tabla`; consistencia entre pantallas parte del pedido. */
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tabla tbody tr:hover {
  background: var(--superficie-hundida);
}
.tabla th.ordenable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.tabla th.ordenable:hover {
  background: var(--superficie-hundida);
}

/* Ícono de ayuda al lado de una cabecera de columna cuyo cálculo no es
   obvio (Pass 9 bloque D, D-117). Ícono "?" (iconos/ayuda.svg) con el
   detalle en `title` (tooltip nativo) + `aria-label` para lector de
   pantalla; `tabindex="0"` para que se pueda enfocar con teclado. El
   detalle largo también vive en la ayuda contextual de la pantalla. */
.ayuda-columna {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--color-primario);
  cursor: help;
}
.ayuda-columna svg { width: 15px; height: 15px; }
.ayuda-columna:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 1px;
  border-radius: 50%;
}

/* ── Pill / badge ──────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  padding: 2px var(--espacio-2);
  border-radius: 999px;
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill-exito { background: var(--exito-fondo); color: var(--exito-texto); border-color: var(--exito-borde); }
.pill-advertencia { background: var(--advertencia-fondo); color: var(--advertencia-texto); border-color: var(--advertencia-borde); }
.pill-error { background: var(--error-fondo); color: var(--error-texto); border-color: var(--error-borde); }
.pill-info { background: var(--info-fondo); color: var(--info-texto); border-color: var(--info-borde); }
.pill-neutro { background: var(--superficie-hundida); color: var(--texto-tenue); border-color: var(--superficie-borde); }
/* D-178: el `.pill[hidden]` puntual de D-169 lo cubre ahora el reset
   global `[hidden] { display: none !important }` del inicio del archivo. */

/* ── Botón ─────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  height: 40px;
  padding: 0 var(--espacio-4);
  border-radius: var(--radio-md);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.boton:disabled { opacity: 0.6; cursor: not-allowed; }
/* `display: inline-flex` de arriba le gana en especificidad al atributo
   `[hidden]` nativo -- sin esta regla, un `.boton` que el JS oculta con
   `el.hidden = true` sigue visible (aprendizaje operativo de layout
   thrashing, casos 1 y 5; D-131 lo volvió a encontrar con el botón
   "Enrolar biometría"). */
.boton[hidden] { display: none; }
.boton-primario { background: var(--color-primario); color: var(--texto-sobre-primario); }
.boton-primario:hover:not(:disabled) { background: var(--color-primario-oscuro); }
.boton-secundario { background: var(--superficie-tarjeta); color: var(--texto-normal); border-color: var(--superficie-borde); }
.boton-secundario:hover:not(:disabled) { background: var(--superficie-hundida); }
.boton-peligro { background: var(--error-texto); color: #fff; }
.boton-peligro:hover:not(:disabled) { background: #8f0000; }
.boton-exito { background: var(--exito-texto); color: #fff; }
.boton-exito:hover:not(:disabled) { background: #145c29; }
.boton-chico { height: 32px; padding: 0 var(--espacio-3); font-size: var(--texto-xs); }
.boton-ancho { width: 100%; }

/* ── Banner ────────────────────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-md);
  border: 1px solid transparent;
  font-size: var(--texto-sm);
}
.banner-exito { background: var(--exito-fondo); color: var(--exito-texto); border-color: var(--exito-borde); }
.banner-advertencia { background: var(--advertencia-fondo); color: var(--advertencia-texto); border-color: var(--advertencia-borde); }
.banner-error { background: var(--error-fondo); color: var(--error-texto); border-color: var(--error-borde); }
.banner-info { background: var(--info-fondo); color: var(--info-texto); border-color: var(--info-borde); }

/* D-179: banner de error de formulario con lista de errores por campo. */
.banner-lista { margin: var(--espacio-1) 0 0; padding-left: var(--espacio-4); }
.banner-lista li { margin-top: 2px; }

/* D-179: marca visual del campo que no pasó validación en un formulario
   de ABM. El `!important` es deliberado — cada template define su propio
   `form.<clase> input/select/textarea` y `label` con más especificidad
   (mismo criterio que el reset `[hidden]`, D-178). */
.input-error,
.input-error:focus {
  border-color: var(--error-texto) !important;
  outline-color: var(--error-texto);
}
.label-error { color: var(--error-texto) !important; }

/* ── Estado vacío ──────────────────────────────────────────────────── */
.estado-vacio {
  text-align: center;
  padding: var(--espacio-6) var(--espacio-4);
  color: var(--texto-tenue);
  font-size: var(--texto-sm);
}
.estado-vacio svg {
  color: var(--exito-texto);
  margin-bottom: var(--espacio-2);
}
.estado-vacio.estado-vacio-linea {
  padding: var(--espacio-3);
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
/* Bloque C2 (Pass 6): mismo bug de especificidad que ya se había
   arreglado para .boton-limpiar-busqueda (Pass 5 bloque C) — el
   `display: flex` de arriba le gana al `[hidden]` nativo, así que un
   estado vacío con esta clase quedaba visible aunque JS le pusiera el
   atributo `hidden`. Afecta a los 4 usos existentes de
   estado-vacio-linea en el código (panel_provincial.html,
   panel.html ×3, persona.html) — un solo fix acá los cubre a todos. */
.estado-vacio.estado-vacio-linea[hidden] {
  display: none;
}

/* ── Buscador con autocompletado ──────────────────────────────────── */
.buscador-autocomplete {
  position: relative;
}
/* Ícono de lupa a la izquierda (Pass 2 bloque B) — .campo-buscar es la
   clase compartida con cualquier input de filtro/búsqueda que no tenga
   lista de resultados propia (ver .filtro-parametros más abajo, y
   app/administracion/parametros/templates/lista.html). */
.buscador-autocomplete, .campo-buscar {
  position: relative;
}
.buscador-autocomplete .icono-buscar, .campo-buscar .icono-buscar {
  position: absolute;
  left: var(--espacio-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-tenue);
  pointer-events: none;
  display: flex;
}
.buscador-autocomplete input, .campo-buscar input {
  width: 100%;
  height: 40px;
  font-size: var(--texto-base);
  /* Pass 5 bloque C: padding derecho también reservado — el botón
     limpiar vive ahí (mismo cálculo que el ícono de lupa a la
     izquierda), y NUNCA vacío incluso si el navegador todavía no le
     agregó texto, para que el layout no salte cuando aparece. */
  padding: 0 calc(var(--espacio-3) * 2 + 20px) 0 calc(var(--espacio-3) * 2 + 20px);
  border: var(--borde-ancho) solid var(--superficie-borde);
  border-radius: var(--radio-md);
  font-family: var(--fuente-base);
}
.buscador-autocomplete input::placeholder, .campo-buscar input::placeholder {
  color: #666666;
  opacity: 1;
}
/* Botón limpiar (Pass 5 bloque C): dentro del input, a la derecha —
   mismo patrón que la lupa a la izquierda. Oculto por default vía el
   atributo `hidden`; cada pantalla lo muestra/oculta según
   input.value en JS. Se suprime el "cancel button" nativo de
   input[type=search] en Chrome/Edge para no duplicar el ícono. */
.buscador-autocomplete .boton-limpiar-busqueda, .campo-buscar .boton-limpiar-busqueda {
  position: absolute;
  right: var(--espacio-2);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radio-sm);
  background: none;
  color: var(--texto-tenue);
  cursor: pointer;
}
.buscador-autocomplete .boton-limpiar-busqueda:hover, .campo-buscar .boton-limpiar-busqueda:hover {
  background: var(--superficie-hundida);
  color: var(--texto-fuerte);
}
/* [hidden] con un selector de clase pierde contra el `display: flex` de
   arriba por especificidad — sin esto, el atributo `hidden` no ocultaba
   nada (bug encontrado en vivo con Playwright, Pass 5 bloque C). */
.buscador-autocomplete .boton-limpiar-busqueda[hidden], .campo-buscar .boton-limpiar-busqueda[hidden] {
  display: none;
}
.buscador-autocomplete input[type="search"]::-webkit-search-cancel-button,
.campo-buscar input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
.buscador-autocomplete input:focus, .campo-buscar input:focus {
  /* Pass 4 bloque B.4: mismo grosor, color más intenso — --color-primario
     (no la variante --claro) para que el foco resalte con fuerza. */
  outline: 2px solid var(--color-primario);
  outline-offset: -1px;
  border-color: var(--color-primario);
}
.buscador-autocomplete .resultados {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--superficie-tarjeta);
  border: var(--borde-ancho) solid var(--superficie-borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-media);
  z-index: 15;
  max-height: 320px;
  overflow-y: auto;
}
.buscador-autocomplete .resultados[hidden] { display: none; }
.buscador-autocomplete .item {
  padding: var(--espacio-2) var(--espacio-3);
  cursor: pointer;
  border-bottom: var(--borde-ancho) solid var(--superficie-borde);
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}
.buscador-autocomplete .item:last-child { border-bottom: none; }
.buscador-autocomplete .item:hover,
.buscador-autocomplete .item.activo {
  background: var(--superficie-hundida);
}
.buscador-autocomplete .item .nombre { font-weight: var(--peso-semi); }
.buscador-autocomplete .item .detalle { font-size: var(--texto-xs); color: var(--texto-tenue); }

/* ── Selector múltiple (dropdown + checkboxes) ─────────────────────────
   D-120 (Pass 10 bloque A): estilo genérico del dropdown de selección
   múltiple, para que el panel director (filtro "Dependencias") se lea
   como el panel provincial (filtro "Organismos"). El de provincial
   sigue con su implementación propia de D-107 (demo-crítico, no se
   toca) pero comparte este lenguaje visual; una pasada futura lo migra
   a este componente + un módulo JS único. Trigger de 36px (alto de los
   otros controles del filtro), panel `position: absolute` con
   `max-height` fijo (nunca alto dinámico — layout thrashing). */
.selector-multiple { position: relative; max-width: 100%; }
.selector-multiple-trigger {
  width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-2);
  padding: 0 var(--espacio-2); border: var(--borde-ancho) solid var(--superficie-borde); border-radius: var(--radio-sm);
  background: var(--superficie-tarjeta); color: var(--texto-normal);
  font-family: var(--fuente-base); font-size: var(--texto-sm); text-align: left; cursor: pointer;
}
.selector-multiple-trigger:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.selector-multiple-trigger svg { flex-shrink: 0; color: var(--texto-tenue); }
.selector-multiple-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 100%;
  background: var(--superficie-tarjeta); border: var(--borde-ancho) solid var(--superficie-borde); border-radius: var(--radio-md);
  box-shadow: var(--sombra-media); padding: var(--espacio-3);
  max-height: 320px; overflow-y: auto; white-space: nowrap;
}
.selector-multiple-panel[hidden] { display: none; }
/* D-130 (Pass 11 bloque D): buscador interno del dropdown, cuando lo lleva
   (mismo componente .campo-buscar que el resto del sistema). */
.selector-multiple-panel .campo-buscar { margin-bottom: var(--espacio-2); }
.selector-multiple-panel .campo-buscar input { height: 36px; font-size: var(--texto-sm); }
.selector-multiple-panel .todos-multiple {
  font-size: var(--texto-sm); display: flex; align-items: center; gap: 4px; margin: 0 0 var(--espacio-2);
  padding-bottom: var(--espacio-2); font-weight: var(--peso-medio); color: var(--texto-normal);
  border-bottom: var(--borde-ancho) solid var(--superficie-borde);
}
.selector-multiple-panel .lista-multiple { display: flex; flex-direction: column; }
.selector-multiple-panel .opcion-multiple {
  display: flex; align-items: center; gap: var(--espacio-2); padding: var(--espacio-2) var(--espacio-1);
  font-size: var(--texto-sm); cursor: pointer; border-radius: var(--radio-sm);
}
.selector-multiple-panel .opcion-multiple:hover { background: var(--superficie-hundida); }
.selector-multiple-panel .opcion-multiple.deshabilitada { cursor: default; color: var(--texto-tenue); }
@media (max-width: 720px) {
  .selector-multiple { width: 100%; }
  .selector-multiple-panel { left: 0; right: 0; }
}

/* ── Skeleton (carga) ─────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--superficie-hundida) 25%, #e4e9ef 37%, var(--superficie-hundida) 63%);
  background-size: 400% 100%;
  animation: skeleton-brillo 1.4s ease infinite;
  border-radius: var(--radio-sm);
  display: block;
}
@keyframes skeleton-brillo {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ── Utilidades ────────────────────────────────────────────────────── */
.texto-tenue { color: var(--texto-tenue); }
.texto-xs { font-size: var(--texto-xs); }
.texto-sm { font-size: var(--texto-sm); }
/* Texto "meta" (Pass 2 bloque B): sesión de usuario, fechas al pie,
   notas legales — más oscuro que .texto-tenue a propósito, para que
   sea legible sin competir con el texto principal. */
.texto-meta { font-size: var(--texto-sm); color: var(--texto-meta); }

/* Label de formulario (Pass 2 bloque B) — todo <label> de un input,
   select o textarea usa esta clase, nunca .texto-tenue/.texto-meta.
   Pass 4 bloque B.2: azul primario en vez de #222 — mismo tratamiento
   que las etiquetas indicadoras (CUIL, LEGAJO, etc.), da protagonismo
   visual sin agrandar. Peso 600 se mantiene: un label es una
   instrucción, tiene que pesar más que el valor que etiqueta. */
.label-form {
  display: block;
  font-size: var(--texto-sm);
  color: var(--color-primario);
  font-weight: var(--peso-semi);
}

/* Divisor entre subsecciones dentro de una misma card (Pass 2 bloque B)
   — para bloques que hoy solo se separan por espaciado, sin ninguna
   marca visual entre ellos. */
.divisor-seccion {
  border: none;
  border-top: 1px solid var(--superficie-divisor);
  margin: var(--espacio-5) 0;
}

/* ── Tarjeta de datos (Pass 3 bloque E) ────────────────────────────── */
/* Para info contextual tipo label+valor (CUIL, cargo, organismo, fecha
   de ingreso) que antes eran líneas de texto sueltas y se perdían.
   .grilla-datos agrupa varias en 2-3 columnas para bloques densos
   (datos personales del legajo, vista persona, panel agente). */
.grilla-datos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--espacio-4);
}
.tarjeta-datos .etiqueta {
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* Pass 4 bloque B.2: azul primario — CUIL, LEGAJO, ORGANISMO, etc. */
  color: var(--color-primario);
  display: block;
}
.tarjeta-datos .valor {
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  color: #111111;
  margin-top: 2px;
  display: block;
}
/* Pass 7 bloque F: campos sin espacios (email, URLs) no tienen dónde
   partirse dentro de la columna angosta de .grilla-datos
   (auto-fill, minmax(180px, 1fr)) — un email largo se salía de su
   celda y tapaba a la de al lado (el caso real: teléfono seguido de
   un email largo, D-91 en espíritu). Se corta con ellipsis y muestra
   el valor completo en el `title` (tooltip nativo) — la pantalla que
   lo usa (legajo.html) además cambió el ORDEN para que el teléfono (ancho
   fijo, nunca desborda) vaya primero. legajo_pdf.html reusa esta misma
   clase pero la pisa a "envolver" en vez de truncar (ver su <style>
   propio) — en un documento impreso, truncar sin tooltip pierde el dato. */
.valor-truncado {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── Ayuda contextual (Pass 2 bloque I) ────────────────────────────── */
/* Panel deslizante desde la derecha — mismo patrón que el panel de
   edición de /admin/parametros (bloque 3), generalizado para que
   cualquier pantalla lo use con su propio contenido. */
.ayuda-overlay {
  position: fixed; inset: 0; background: rgba(17, 17, 17, 0.35);
  display: flex; justify-content: flex-end; z-index: 40;
}
.ayuda-overlay[hidden] { display: none; }
.panel-ayuda {
  width: 100%; max-width: 420px; background: var(--superficie-tarjeta);
  height: 100%; overflow-y: auto; padding: var(--espacio-5);
  box-shadow: var(--sombra-alta);
}
.panel-ayuda .cerrar-ayuda {
  float: right; background: none; border: none; cursor: pointer; color: var(--texto-tenue);
}
.panel-ayuda h2 { font-size: var(--texto-lg); margin-top: 0; }
.panel-ayuda h3 {
  font-size: var(--texto-sm); text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--texto-meta); margin-top: var(--espacio-5);
}
.panel-ayuda p, .panel-ayuda li { font-size: var(--texto-sm); color: var(--texto-normal); }
.panel-ayuda ul { padding-left: var(--espacio-4); margin: var(--espacio-2) 0; }
.panel-ayuda li { margin-bottom: var(--espacio-2); }
.panel-ayuda li strong { color: var(--texto-fuerte); }
/* D-195 (Pass 16.4 A): variante "fantasma" — mismo alto/padding que
   `.usuario-boton` (para que la línea del encabezado no se rompa) pero
   sin fondo ni borde y el texto en blanco atenuado. "Ayuda" es una
   acción contextual del panel, no una entrada de la capa administrativa
   como el dropdown "Admin", que sí lleva el pill sólido. El ícono "?"
   (iconos/ayuda.svg) refuerza la intención. En hover se solidifica un
   poco para dar feedback de que es clickeable. */
.boton-ayuda {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.75); border-radius: var(--radio-md);
  padding: 0 var(--espacio-3); height: 36px; font-size: var(--texto-sm); cursor: pointer;
}
.boton-ayuda:hover { background: rgba(255, 255, 255, 0.12); color: var(--texto-sobre-primario); }

/* ── Impresión ─────────────────────────────────────────────────────── */
@media print {
  .encabezado-app, .no-imprimir, .boton, .buscador-autocomplete, .ayuda-overlay {
    display: none !important;
  }
  body {
    background: #fff;
  }
  .card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
  .contenedor-app, .contenedor-angosto {
    max-width: 100%;
    padding: 0;
  }
}