/**
 * css/buscador.css
 * =====================================================================
 * El campo de búsqueda de la app — una sola pinta para los tres que
 * existen (Estudiantes, Corregir y el panel admin). Va en un archivo
 * propio, y no en components.css, porque admin.php es una página aparte
 * que NO carga components.css: así los dos shells pueden linkear lo
 * mismo sin arrastrar el resto de los estilos del aula.
 *
 * El componente es UNA fila flex: lupa · campo · contador · X. Los tres
 * tamaños salen de las variables de abajo — nadie redefine `display`,
 * `background` ni el botón; sólo el alto, el radio y la tipografía.
 * Ver js/components/buscador.js para el porqué de la X propia (spoiler:
 * la nativa de type="search" no existe en iOS).
 * =====================================================================
 */
.buscador{
  --bus-h:  38px;   /* alto de la caja */
  --bus-fs: .82rem; /* tipografía del campo */
  --bus-r:  11px;   /* radio */
  --bus-pad: 11px;  /* padding izquierdo (antes de la lupa) */
  --bus-gap:  8px;
  --bus-lupa: 14px;

  /* `flex:1 1 auto` — un campo de búsqueda ocupa el ancho que le dejen.
     Va ACÁ, en el componente, y no en la hoja de cada vista: cuando lo
     estiraba una regla de estudiantes.css, bastaba con que ESA hoja
     llegara vieja o no llegara (deploy parcial, caché del servidor, un
     archivo que no terminó de sincronizar) para que el campo se plantara
     en su ancho intrínseco —unos 200px— y se viera "más chico", con todo
     lo demás perfecto. Un componente no puede depender de que otro
     archivo lo estire; el ancho es asunto suyo. Quien necesite otra cosa
     lo pisa desde afuera (el panel admin fija una base mínima). */
  display:flex; align-items:center; gap:var(--bus-gap); flex:1 1 auto; min-width:0;
  height:var(--bus-h); padding:0 5px 0 var(--bus-pad);
  background:var(--card); border:1px solid var(--line); border-radius:var(--bus-r);
  transition:border-color .15s, background-color .15s;
}
/* Una fila propia (Estudiantes): el tamaño "cómodo", pensado para el dedo. */
.buscador--alto{ --bus-h:44px; --bus-fs:.88rem; --bus-r:12px; --bus-pad:13px; --bus-gap:9px; --bus-lupa:16px; }
/* Dentro del header de una tabla (Corregir): entra en el alto que la
   fila de encabezado ya ocupaba, sin empujar nada. */
.buscador--mini{ --bus-h:25px; --bus-fs:.7rem;  --bus-r:8px;  --bus-pad:6px;  --bus-gap:5px; --bus-lupa:12px; }

.buscador:hover{ border-color:var(--accent); }
.buscador:focus-within{ border-color:var(--accent); background:var(--accent-bg); }

.buscador .bus-lupa{
  flex:0 0 auto; width:var(--bus-lupa); height:var(--bus-lupa); color:var(--faint);
  transition:color .15s;
}
.buscador:focus-within .bus-lupa,
.buscador.filtrando .bus-lupa{ color:var(--accent-2); }

.buscador .bus-input{
  flex:1 1 auto; min-width:0; width:100%;
  background:none; border:none; outline:none; padding:0;
  /* Sin font-weight propio: hereda el 400 del cuerpo, que es lo que
     tenían los campos de búsqueda antes de unificarlos. Un 500 acá
     engorda apenas el texto y el campo se lee distinto al resto de los
     inputs de la app. */
  font-family:var(--font-b); font-size:var(--bus-fs); color:var(--text);
  /* Si algún día alguien vuelve a poner type="search", que igual no
     aparezca la cruz del navegador al lado de la nuestra. */
  -webkit-appearance:none; appearance:none;
}
.buscador .bus-input::-webkit-search-cancel-button,
.buscador .bus-input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }
.buscador .bus-input::placeholder{ color:var(--faint); }

/* Contador "3/28" — sólo mientras hay filtro puesto (lo vacía el JS):
   en reposo el campo se ve exactamente como cualquier otro. */
.buscador .bus-conteo{
  flex:0 0 auto; font-family:var(--font-m); font-size:calc(var(--bus-fs) - .08rem);
  color:var(--accent-2); font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* La X. `hidden` la maneja el JS (aparece recién cuando hay texto).
   El área táctil es más grande que el dibujo: en una tablet, un blanco
   de 15px es un blanco que se falla. */
.buscador .bus-limpiar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:calc(var(--bus-h) - 10px); height:calc(var(--bus-h) - 10px); min-width:22px; min-height:22px;
  border-radius:50%; border:none; background:none; color:var(--faint);
  font-size:calc(var(--bus-fs) - .04rem); line-height:1; cursor:pointer;
  transition:color .12s, background-color .12s;
  touch-action:manipulation; /* sin el retardo de ~300ms del doble tap en iOS */
}
.buscador .bus-limpiar[hidden]{ display:none; } /* [hidden] pierde contra el display:flex de arriba */
.buscador .bus-limpiar:hover{ color:var(--text); background:var(--line-soft); }
.buscador .bus-limpiar:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.buscador--mini .bus-limpiar{ font-size:.6rem; }