/* Lo propio del desfile. Va **arriba de `turnos.css`**, que trae el header, los
 * campos, los avisos, las tablas y las tarjetas de totales.
 *
 * Es el criterio de `caja.css` y no el de `tortas.css`, que es una copia entera
 * de la hoja de turnos: con cuatro apps, una cuarta copia de 350 líneas casi
 * iguales se desincroniza sola. Acá sólo está lo que esta app tiene y las otras
 * no: la planilla de talles, las filas de hermanos y los selects.
 *
 * TODO(negocio): si el desfile termina teniendo su propia identidad visual
 * (otro logo, otros colores), este es el archivo donde va. Las variables de
 * color se redefinen en `:root` y el resto se acomoda solo. */

/* --- Campos que `turnos.css` no tiene ------------------------------------
   Allá no hay un solo `<select>` ni un teléfono: el formulario de turnos es
   todo checkboxes. Sin esto, el select queda con el aspecto nativo del sistema
   —más bajo, con otra tipografía y sin el borde redondeado— justo al lado de
   inputs estilados, que es donde se nota la diferencia.

   `appearance: none` saca la flecha del sistema, así que hay que poner una. Va
   como SVG en un `data:` URI y no como archivo aparte: es un pedido HTTP menos
   y no hay nada que se pueda perder en un deploy. Es la misma de `tortas.css`. */
input[type="tel"] {
  width: 100%;
  padding: .6rem;
  font: inherit;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #fff;
}

select {
  width: 100%;
  padding: .6rem 2.2rem .6rem .6rem;
  font: inherit;
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 6px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2357534e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: .7rem;
  appearance: none;
  cursor: pointer;
}

/* Con `appearance: none` varios navegadores dejan de marcar el foco. Sin esto
   no se ve dónde estás parado si navegás con el teclado. */
select:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.campo__ayuda { margin: .2rem 0 0; font-size: .8rem; color: var(--tenue); }

/* --- La planilla de talles -----------------------------------------------
   La tabla es el entregable del pedido, así que los números se leen antes que
   el texto: cifras de ancho fijo y centradas, para poder barrer la columna de
   arriba abajo sin que los dígitos se muevan de lugar. */
.planilla td:not(:first-child),
.planilla th:not(:first-child) {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.planilla td:first-child { font-weight: 600; }

/* Un talle completo se muestra —es lo que pidieron— pero tiene que verse que
   ahí no hay nada que hacer. Fondo tenue y no rojo: no es un error, es un cupo
   cubierto, que es justamente la meta. */
.fila--completo { background: var(--acento-suave); }

.celda--sin-definir { color: var(--tenue); font-style: italic; }

/* --- Las filas de hermanos ----------------------------------------------- */
.chicos { margin-bottom: 1rem; }

.chicos__ayuda { margin: 0 0 .75rem; font-size: .9rem; color: var(--tenue); }

.chico {
  margin-bottom: .75rem;
  padding: .75rem 1rem .25rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--verde);
  border-radius: 8px;
}

.chico__numero {
  margin: 0 0 .5rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--tenue);
}

/* El botón de agregar no compite con el de mandar: es chico, al costado, y
   `turnos.css` ya le dio el aspecto secundario. Lo único que falta es el aire
   para que no quede pegado a la última fila. */
[data-agregar] { margin-bottom: 1.5rem; }

/* --- El link personal ---------------------------------------------------- */
.resumen__chico { font-weight: 600; color: var(--acento); }
.resumen__talle { font-size: .95rem; }

.chico-anotado {
  margin-bottom: 1.25rem;
  padding: .75rem 1rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
}

.chico-anotado h3 { margin: 0; color: var(--acento); }
.chico-anotado__talle { margin: .1rem 0 .5rem; font-size: .9rem; color: var(--tenue); }

.nota-privacidad {
  margin-top: 1.5rem;
  font-size: .85rem;
  color: var(--tenue);
}

/* Un aviso que no es un error ni una confirmación: falta un dato que todavía no
   nos pasaron. Va en el naranja de los avisos de cupo de turnos. */
.aviso--pendiente { border-color: var(--naranja); background: var(--naranja-suave); }

/* --- El panel ------------------------------------------------------------ */
.talle {
  margin: 1rem 0 1.5rem;
  padding: .9rem 1rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
}

.talle h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .7rem;
  color: var(--acento);
}

.talle__cuenta { font-size: .9rem; font-weight: 400; color: var(--tenue); font-variant-numeric: tabular-nums; }
.talle__vacio { margin: 0; font-size: .9rem; color: var(--tenue); }

/* --- La galería de locales ------------------------------------------------
   Informativa: la familia no elige local, así que acá no hay nada clickeable
   ni ningún input. Va al final de la pantalla (ver `_locales.html`).

   Grilla que se acomoda sola: `auto-fill` con un mínimo de 10rem da dos
   columnas en un celular angosto y cuatro o cinco en una pantalla grande, sin
   un solo media query. Subió de 8rem a 10rem el 21/10/2026, cuando pidieron
   las imágenes más grandes: con 8rem entraban tres por fila en el celular y
   cada logo quedaba chico. */
.locales { margin-top: 2.5rem; }

.locales__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: .75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.local {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .75rem .5rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  text-align: center;
}

/* `contain` y no `cover`: las imágenes las sube la organización y van a venir
   de todos los tamaños y proporciones. Con `cover` un logo apaisado queda
   recortado por los costados y se come las letras; con `contain` entra entero y
   el fondo rellena lo que sobra. La altura fija es la que mantiene la grilla
   prolija cuando una imagen es cuadrada y la otra panorámica. */
.local__imagen {
  width: 100%;
  height: 7.5rem;
  object-fit: contain;
  background: var(--fondo);
  border-radius: 4px;
}

/* El hueco de un local al que todavía no le subieron la imagen. No dice nada:
   el nombre está abajo y un cartel de "falta la imagen" sería para la
   organización, que se entera por el panel, no para la familia. */
.local__imagen--sin {
  display: block;
  border: 1px dashed var(--borde);
  background: repeating-linear-gradient(
    45deg,
    var(--fondo),
    var(--fondo) 6px,
    #fff 6px,
    #fff 12px
  );
}

.local__nombre { font-size: .85rem; font-weight: 600; line-height: 1.25; }

/* El encabezado de cada categoría en la planilla (Nene, Nena, Bebé…). La línea
   a la izquierda separa los grupos de tres columnas: sin eso, con tres
   categorías son nueve números seguidos y no se ve dónde termina uno. */
.planilla .grupo {
  border-left: 2px solid var(--borde);
  color: var(--acento);
  text-transform: none;
  font-size: .85rem;
}

/* La tabla crece con cada categoría: con tres ya no entra en un celular, y el
   scroll horizontal lo da `.tabla-scroll`. Los números apretados se leen mejor
   con un poco menos de aire a los costados. */
.planilla td, .planilla th { padding-left: .4rem; padding-right: .4rem; }

/* --- Un bloque por local -------------------------------------------------
   La forma del formulario desde el 21/10/2026: cada local con los talles que
   necesita y adentro los hijos que la familia anota ahí. El borde grueso de la
   izquierda es lo que separa un local del siguiente cuando hay varios seguidos
   y la pantalla se vuelve larga. */
.bloque {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: 8px;
}

.bloque__cabecera {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: .9rem;
}

/* Cuadrada y de 6rem —eran 4rem y pidieron más grandes—: es para reconocer el
   local de un vistazo, y a 4rem un logo con texto no se leía. De lucirlo en
   grande se ocupa la galería del final. `contain` porque las imágenes
   las sube la organización y vienen de cualquier proporción. */
.bloque__imagen {
  width: 6rem;
  height: 6rem;
  object-fit: contain;
  background: var(--fondo);
  border-radius: 6px;
  flex: none;
}

.bloque__nombre { margin: 0; color: var(--acento); font-size: 1.05rem; }

/* Adentro del bloque las filas no necesitan su propia caja blanca: ya están
   adentro de una. Sin esto se ve una tarjeta dentro de otra. */
.bloque .chico {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--borde);
  border-radius: 0;
  padding: .75rem 0 0;
  margin-bottom: .5rem;
}