/* 17 oct · asistencias · actualización y lupa (las dos apariencias; el teléfono, al final del archivo).
   1 · Recepción › Asistencias: «Actualizar» pequeño en la línea del horario (y en la hoja «Filtros» del teléfono).
   2 · La lupa de la asistencia (modo clase y ficha de la clase): un ícono pequeño, sin borde, que se nota al pasar.
   3 · La búsqueda: el diálogo común (.velo > .dialogo), con campo, lista desplazable y pie. En el teléfono es la hoja desde
       abajo de tel-base.css § 3. */

/* ── 1 · Actualizar ── */
.ra-actualizar {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 10px;
  border: 1px solid var(--linea); border-radius: var(--r-pildora); background: var(--sup);
  font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); cursor: pointer; white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ra-actualizar .ic { width: 14px; height: 14px; }
.ra-actualizar:hover, .ra-actualizar:focus-visible { color: var(--acento-texto); border-color: var(--acento-anillo); background: var(--acento-suave); }
.ra-actualizar.cargando { pointer-events: none; color: var(--tinta-4); }
.ra-actualizar.cargando .ic { animation: ra-gira 1s linear infinite; }
.ra-actualizar.con-error { color: var(--peligro-texto); border-color: var(--peligro-fondo); }
@keyframes ra-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ra-actualizar.cargando .ic { animation: none; } }

/* ── 2 · la lupa ── */
.lupa-asistencia {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--tinta-4); cursor: pointer;
  opacity: .7; transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lupa-asistencia .ic { width: 16px; height: 16px; }
.lupa-asistencia:hover, .lupa-asistencia:focus-visible { opacity: 1; color: var(--acento-texto); background: var(--acento-suave); }
/* modo clase: a la derecha de la cifra, en la misma línea del título */
.paso-titulo:has(> .lupa-modo) { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; }
.paso-titulo > .lupa-modo { align-self: center; margin-left: auto; }
/* ficha de la clase: al final de «Asistencia · 3 de 4 presentes» */
.asis-titulo:has(> .lupa-ficha) { display: flex; align-items: center; gap: 4px; }
.asis-titulo > .lupa-ficha { width: 24px; height: 24px; }
.asis-titulo > .lupa-ficha .ic { width: 14px; height: 14px; }

/* ── 3 · la búsqueda ── */
.velo-lupa { place-items: start center; padding-top: max(24px, 12vh); }
.dialogo-lupa { width: min(520px, 100%); gap: 12px; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: min(640px, 100%); }
.dialogo-lupa .dialogo-cab { align-items: center; }
.dialogo-lupa .dialogo-cab > div { flex: 1; min-width: 0; }
.dialogo-lupa .lp-cerrar { flex: none; }
.lp-campo {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
  border: 1px solid var(--linea-2); border-radius: var(--r-l); background: var(--sup); color: var(--tinta-3);
}
.lp-campo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-anillo); }
.lp-campo .ic { width: 16px; height: 16px; flex: none; }
.lp-entrada { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); }
html:root .dialogo-lupa .lp-campo .lp-entrada, html:root .dialogo-lupa .lp-campo .lp-entrada:focus, html:root .dialogo-lupa .lp-campo .lp-entrada:focus-visible {
  height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent;
}
.lp-entrada::placeholder { color: var(--tinta-4); }
.lp-entrada::-webkit-search-cancel-button { cursor: pointer; }
.lp-lista { display: grid; align-content: start; gap: 2px; min-height: 0; max-height: 360px; overflow: auto; margin: 0 -8px; padding: 0 8px; overscroll-behavior: contain; }
.lp-lista:empty { display: none; }
.lp-fila {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 10px;
  border: 0; border-radius: var(--r-m); background: transparent; text-align: left; cursor: pointer; color: var(--tinta);
}
.lp-fila:hover, .lp-fila:focus-visible { background: var(--sup-3); }
.lp-fila .avatar { flex: none; }
.lp-texto { display: grid; flex: 1; min-width: 0; }
.lp-texto b { font: 600 var(--t-m)/var(--lh-m) var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-texto small { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-ir { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: var(--acento-texto); opacity: 0; transition: opacity var(--dur) var(--ease); }
.lp-ir .ic { width: 16px; height: 16px; }
.lp-fila:hover .lp-ir, .lp-fila:focus-visible .lp-ir { opacity: 1; background: var(--acento-suave); }
.lp-fila.en-lista { cursor: default; color: var(--tinta-3); }
.lp-fila.en-lista:hover { background: transparent; }
.lp-fila.en-lista .avatar { opacity: .55; }
.lp-ya { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.lp-ya .ic { width: 14px; height: 14px; color: var(--ok); }
.lp-vacio { display: flex; align-items: center; gap: 8px; padding: 12px 10px; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); }
.lp-vacio .ic { width: 16px; height: 16px; }
.lp-pie { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.lp-pie:empty { display: none; }

/* ── teléfono (≤ 760 px): hoja desde abajo (tel-base.css § 3), campo y filas de 48 px, lupa de 44 px ── */
@media (max-width: 760px) {
  .lupa-asistencia, .asis-titulo > .lupa-ficha { width: 44px; height: 44px; opacity: .8; }
  .lupa-asistencia .ic, .asis-titulo > .lupa-ficha .ic { width: 18px; height: 18px; }
  .ra-actualizar { height: 44px; padding: 0 14px; font-size: 14px; }
  html:root[data-diseno] .velo.velo-lupa { padding-top: calc(12px + var(--seg-arriba, 0px)); }
  html:root[data-diseno] .velo > .dialogo.dialogo-lupa { max-height: calc(100% - 24px); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .dialogo-lupa .lp-campo { height: 48px; }
  .dialogo-lupa .lp-entrada { font-size: 16px; } /* 16 px: Safari no acerca la página al enfocar */
  .dialogo-lupa .lp-lista { max-height: none; }
  .dialogo-lupa .lp-texto small, .dialogo-lupa .lp-ya, .dialogo-lupa .lp-pie { font-size: 13px; }
  .dialogo-lupa .lp-cerrar { width: 44px; height: 44px; }
}