/* Componentes comunes (templates/_ui.html). Sólo tokens de style.css (:root);
   prefijo ui- para no chocar con los estilos de cada módulo. */

.ui-encabezado { margin: 0 0 var(--e5); }
.ui-migas { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); font-size: .85rem;
  color: var(--tinta-3); margin-bottom: var(--e2); }
.ui-migas a { color: var(--tinta-2); }
.ui-encabezado-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3);
  justify-content: space-between; }
.ui-encabezado h1 { margin: 0; }
.ui-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.ui-acciones .boton { margin: 0; }
.ui-ayuda { margin: var(--e2) 0 0; color: var(--tinta-2); max-width: 70ch; }

.ui-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--e3); margin: 0 0 var(--e5); }
.ui-kpi { background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: var(--e3) var(--e4); box-shadow: var(--sombra); }
.ui-kpi strong { display: block; font-size: 1.6rem; line-height: 1.2; color: var(--tinta); }
.ui-kpi span { font-size: .85rem; color: var(--tinta-2); }
.ui-kpi.ui-ok { border-left: 4px solid var(--ok); }
.ui-kpi.ui-aviso { border-left: 4px solid var(--aviso); }
.ui-kpi.ui-alerta { border-left: 4px solid var(--alerta); }
.ui-kpi.ui-alerta strong { color: var(--alerta); }

.ui-vacio { text-align: center; padding: var(--e5) var(--e4); color: var(--tinta-2); }
.ui-vacio p { margin: 0 0 var(--e3); }

.ui-pildora { display: inline-block; padding: .1rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap; }
.ui-pildora.ui-ok { background: var(--ok-fondo); color: var(--ok); }
.ui-pildora.ui-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.ui-pildora.ui-alerta { background: var(--alerta-fondo); color: var(--alerta); }
.ui-pildora.ui-neutro { background: var(--marca-tenue); color: var(--marca-oscuro); }

/* Inicio por perfil: tarjetas en rejilla que bajan a una columna en el teléfono. */
.ui-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--e4); align-items: start; }
.ui-lista { list-style: none; margin: 0; padding: 0; }
.ui-lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e2) 0; border-bottom: 1px solid var(--borde); min-height: 44px; }
.ui-lista li:last-child { border-bottom: 0; }
.ui-lista small { color: var(--tinta-3); display: block; }

/* Buscador de la barra. */
.ui-buscador { display: flex; align-items: center; margin: 0 var(--e2); }
.ui-buscador input { width: 11rem; padding: .3rem .6rem; border-radius: var(--radio-chico);
  border: 1px solid transparent; background: rgba(255, 255, 255, .14); color: #fff; font-size: .9rem; }
.ui-buscador input::placeholder { color: rgba(255, 255, 255, .75); }
.ui-buscador input:focus { background: #fff; color: var(--tinta); outline: 2px solid var(--acento-claro); }
@media (max-width: 760px) {
  .ui-buscador { margin: var(--e2) 0; width: 100%; }
  .ui-buscador input { width: 100%; }
  .ui-encabezado-fila { align-items: flex-start; }
}

/* Barra por módulos (integral/navegacion.py): once grupos, el buscador y la cuenta
   tienen que caber en 1366 px. 🩸 La hoja de contacto del 13-nov midió la barra
   anterior en 1.679 px sobre 1.303 disponibles: scroll horizontal en todas las
   pantallas. Acotado a .ui-nav: la barra de los colegios (sólo motor) no cambia. */
.topbar nav.ui-nav > a, .topbar nav.ui-nav details.menu > summary {
  padding: 0.3rem 0.42rem; font-size: 0.88rem; gap: 0.22rem; }
.topbar nav.ui-nav details.menu > summary::after { width: 0.34em; height: 0.34em; }
/* El buscador es una lupa que se abre al enfocarla (con el teclado también). */
.topbar nav.ui-nav .ui-buscador input { width: 2.4rem; padding-left: 1.9rem; cursor: pointer;
  transition: width .15s ease;
  background: rgba(255, 255, 255, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") no-repeat .55rem center / 1rem; }
.topbar nav.ui-nav .ui-buscador input::placeholder { color: transparent; }
.topbar nav.ui-nav .ui-buscador input:focus { width: 15rem; cursor: text;
  background-color: #fff; }
.topbar nav.ui-nav .ui-buscador input:focus::placeholder { color: var(--tinta-3); }
.topbar nav.ui-nav details.menu.cuenta > summary { max-width: 6.5rem; }
@media (max-width: 820px) {
  .topbar nav.ui-nav .ui-buscador input, .topbar nav.ui-nav .ui-buscador input:focus { width: 100%; }
}
/* Teléfono: un <select> con opciones largas no puede ensanchar la página. */
@media (max-width: 760px) { main select { max-width: 100%; } }