/* ------------------------------------------------------- Barra fija superior */
/* Encabezado + pestañas quedan siempre a la vista: con listas de 25 personas,
   perder la navegación al scrollear obliga a subir hasta arriba para cambiar de
   pestaña. El buscador viaja en el mismo bloque, que es lo que hace falta
   cuando la persona está parada en el mostrador. */
.barra-fija {
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 2px 8px rgba(15, 36, 64, .25);
}
/* En pantallas muy bajas —un celular acostado— la barra se comería media
   pantalla. Ahí se suelta y scrollea como cualquier cosa. */
@media (max-height: 480px) {
  .barra-fija { position: static; }
}

/* ---------------------------------------------------------------- Encabezado */
.encabezado {
  background: var(--navy);
  color: #fff;
}
.encabezado h1 { color: #fff; margin: 0; font-size: 1.05rem; letter-spacing: .01em; }
.encabezado .sub { font-size: .74rem; color: #b8cce4; letter-spacing: .04em; text-transform: uppercase; }
.barra-sup { display: flex; align-items: center; gap: 10px; padding: 10px 0 8px; }
.marca { flex: 1 1 auto; min-width: 0; }
.escudo {
  width: 38px; height: 38px; flex: none; border-radius: 8px;
  background: var(--blue); display: grid; place-items: center;
  font-weight: 800; font-size: .82rem; color: #fff; letter-spacing: -.02em;
}

/* Buscador global */
.buscador { position: relative; padding: 0 0 10px; }
.buscador input {
  width: 100%; min-height: var(--toque);
  padding: 10px 12px 10px 38px;
  border: 2px solid transparent; border-radius: var(--r);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f75b5' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>") no-repeat 10px 50%;
  background-size: 20px 20px;
  font-size: 1rem; color: var(--tinta);
}
.buscador input::placeholder { color: #7b8794; }
.buscador input:focus { border-color: #ffb300; outline: none; }
.resultados-busqueda {
  position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 60;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
  box-shadow: var(--sombra); max-height: 60vh; overflow: auto;
}
.resultados-busqueda button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--linea); padding: 10px 12px; min-height: var(--toque);
  font: inherit; color: var(--tinta); cursor: pointer;
}
.resultados-busqueda button:last-child { border-bottom: 0; }
.resultados-busqueda button:hover, .resultados-busqueda button:focus-visible { background: var(--blue-050); }
.resultados-busqueda .rb-nombre { font-weight: 600; }
.resultados-busqueda .rb-datos { font-size: .82rem; color: var(--tinta-2); }
.resultados-busqueda .vacio { padding: 12px; color: var(--tinta-2); font-size: .9rem; }

/* --------------------------------------------------------------------- Tabs */
.pestanias { background: var(--navy-900); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pestanias .contenedor { display: flex; gap: 2px; padding: 0 8px; }
.pestania {
  flex: 1 0 auto; min-height: var(--toque); padding: 10px 14px;
  background: none; border: 0; border-bottom: 3px solid transparent;
  color: #c7d7e8; font: inherit; font-weight: 600; font-size: .92rem;
  cursor: pointer; white-space: nowrap;
}
.pestania[aria-selected="true"] { color: #fff; border-bottom-color: #ffb300; background: rgba(255, 255, 255, .06); }
.pestania .pill {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px;
  background: rgba(255, 255, 255, .16); font-size: .78rem; font-weight: 700;
}
.pestania[aria-selected="true"] .pill { background: #ffb300; color: var(--navy-900); }

/* Aire entre la barra fija y lo primero de la pantalla. Pegado al borde de las
   pestañas, el bloque de la pregunta se leía como parte de la barra. */
main { padding: 20px 0 28px; }
.vista[hidden] { display: none; }
/* La barra fija tapa lo que quede debajo cuando el navegador scrollea solo —al
   enfocar la vista, al saltar a un ancla—. Sin este margen, entrar a una
   pantalla dejaba la pregunta escondida atrás del encabezado. */
.vista { scroll-margin-top: 120px; }