/* Hoja propia y no un import de `turnos.css`.
 *
 * Comparte la paleta y casi todo el layout, pero las clases de dominio son
 * otras (`.entrega`/`.torta` en vez de `.turno`/`.puesto`) y la app de tortas
 * tiene que poder cambiar de aspecto sin tocar la de la cantina, que está en
 * producción y con gente anotada. Para un proyecto de vida corta, duplicar
 * doscientas líneas de CSS sale más barato que refactorizar la app que anda.
 *
 * Pensado para el celular primero: la mayoría se anota desde el teléfono. */

/* Paleta tomada del logo de la A.P.A.
   Ojo con el contraste sobre blanco: el azul da 8.3 y sirve para texto, pero
   el verde (3.9) y el naranja (2.4) no llegan al mínimo de 4.5. Por eso esos
   dos se usan sólo en bordes y fondos, y para texto va `--verde-texto`. */
:root {
  --texto: #1c1917;
  --tenue: #57534e;
  --borde: #dcd8d0;
  --fondo: #faf9f6;

  --acento: #394b89;        /* azul del logo: títulos, botones, links */
  --acento-suave: #eef1f8;
  --verde: #5c8e51;         /* verde del logo: decorativo */
  --verde-texto: #4a7340;   /* verde oscurecido, legible */
  --naranja: #e2973c;       /* naranja del logo: decorativo */
  --naranja-suave: #fdf4e7;

  --ok: #4a7340;
  --error: #b91c1c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}

header, main, footer { max-width: 42rem; margin: 0 auto; }

/* Logo arriba y título abajo, los dos centrados. */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1.5rem 0 1rem;
  text-align: center;
}

header h1 { font-size: 1.35rem; margin: 0; }
header h1 a { color: var(--acento); text-decoration: none; }

/* La imagen mide 494px de ancho: a este tamaño se muestra a poco más de la
   mitad, así que se ve nítida también en pantallas retina. */
.logo {
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 4px;
}

@media (max-width: 26rem) {
  header h1 { font-size: 1.1rem; }
  .logo { max-width: 220px; }
}

h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .25rem; }

footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
  font-size: .9rem;
  color: var(--tenue);
}

.creditos {
  margin: 1.5rem 0 0;
  font-size: .8rem;
  line-height: 1.4;
  text-align: center;
}

.creditos--autor {
  margin-top: .35rem;
  color: var(--acento);
  letter-spacing: .02em;
}

/* El hosting va más apagado que la autoría: es un crédito, no una firma. */
.creditos--hosting {
  margin-top: .2rem;
  letter-spacing: .02em;
}

/* Los links de los créditos toman el color de su línea en vez del azul del
   navegador, que al lado del azul del logo se lee como un error. El subrayado
   queda para que se note que son links. */
.creditos a {
  color: inherit;
  text-decoration: underline;
}

/* Presentación del formulario público */

.intro { margin-bottom: 2rem; }

.intro__titulo { margin: 0 0 .5rem; font-size: 1.25rem; color: var(--acento); }

/* El equivalente del `.aviso-cupos` de turnos, pero al revés: allá avisa que
   los lugares se agotan, acá que no hay techo. */
.aviso-sin-cupo {
  margin: 1.25rem 0 0;
  padding: .7rem .9rem;
  font-size: .92rem;
  background: var(--naranja-suave);
  border: 1px solid var(--naranja);
  border-radius: 6px;
}

/* Resumen de la pantalla de confirmación */

.resumen { margin: 1rem 0; padding: 0; list-style: none; }

.resumen__item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .6rem;
  padding: .7rem .9rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--verde);
  border-radius: 6px;
}

.resumen__torta { font-weight: 600; color: var(--acento); }
.resumen__entrega { font-size: .95rem; }
.resumen__fecha { font-size: .88rem; color: var(--tenue); }

.link-personal {
  margin: 1.5rem 0;
  padding: .9rem 1rem;
  background: var(--acento-suave);
  border: 1px solid var(--acento);
  border-radius: 6px;
  word-break: break-all;
}

.link-personal p { margin: .25rem 0; }
.link-personal__nota { font-size: .87rem; color: var(--tenue); word-break: normal; }

label { display: block; margin-bottom: .25rem; font-weight: 600; }

input[type="text"], input[type="email"], textarea {
  width: 100%;
  padding: .6rem;
  font: inherit;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #fff;
}

/* Los dos `<select>` (nivel y división) tienen que verse como el resto de los
   campos. Sin esto quedan con el aspecto nativo del sistema —más bajos, 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. El padding derecho le hace
   lugar para que el texto largo no se le meta encima. */
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;
}

/* La división arranca deshabilitada hasta que se elige el nivel. Tiene que
   verse deshabilitada, si no parece que la página se colgó.

   `opacity: 1` es contra Safari en iOS, que a los campos deshabilitados les
   baja la opacidad por su cuenta y deja el texto casi ilegible. */
select:disabled {
  color: var(--tenue);
  background-color: #f4f2ee;
  border-style: dashed;
  cursor: not-allowed;
  opacity: 1;
}

/* 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 { margin-bottom: 1rem; }

/* Marca de campo obligatorio. Va pegada a la etiqueta, que está arriba del
   campo, y no a la derecha del input: en el celular la columna es angosta y
   cualquier cosa al lado del campo se cae de renglón o lo achica. */
.obligatorio {
  margin-left: .15rem;
  color: var(--error);
  font-weight: 700;
}

/* La aclaración de qué significa el asterisco. Una sola vez, arriba de todo. */
.nota-obligatorios {
  margin: 0 0 1.25rem;
  font-size: .87rem;
  color: var(--tenue);
}

button {
  width: 100%;
  padding: .85rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--acento);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.baja { margin-top: .5rem; }

.baja summary {
  display: inline-block;
  padding: .35rem .7rem;
  font-size: .85rem;
  color: var(--error);
  border: 1px solid var(--borde);
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
}

.baja summary::-webkit-details-marker { display: none; }
.baja[open] summary { margin-bottom: .6rem; }
.baja label { font-size: .85rem; font-weight: 400; color: var(--tenue); }
.baja textarea { width: 100%; margin-bottom: .5rem; }

button.secundario {
  width: auto;
  padding: .4rem .75rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--error);
  background: transparent;
  border: 1px solid var(--borde);
}

/* Las dos cajas del formulario (`.seleccion`) y las tarjetas del panel y del
   link personal (`.entrega`) son la misma caja blanca. */

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

.entrega h3 { color: var(--acento); }
.entrega__fecha { margin: 0; }
.entrega__nombre { font-size: .9rem; color: var(--tenue); margin: .1rem 0 .5rem; }

.seleccion__titulo { margin: 0; color: var(--acento); }
.seleccion__ayuda { font-size: .9rem; color: var(--tenue); margin: .1rem 0 .5rem; }

/* Un renglón por opción, sea checkbox (tortas) o radio (fecha). El área
   clickeable es todo el `<label>`, que en el celular es lo que evita tener que
   apuntarle al cuadradito. */
.opcion {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  padding: .55rem 0;
  border-top: 1px solid var(--borde);
  font-weight: 400;
  cursor: pointer;
}

.opcion input { margin: 0; width: 1.15rem; height: 1.15rem; flex: none; }

/* Avisos y errores */

.aviso {
  padding: .75rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--borde);
  background: #fff;
}

.aviso--success { border-color: var(--ok); color: var(--ok); }
.aviso--error { border-color: var(--error); color: var(--error); }

.errores { margin: 0 0 1rem; padding: .75rem 1rem; color: var(--error);
           background: #fef2f2; border: 1px solid var(--error); border-radius: 6px; }
.errores ul { margin: 0; padding-left: 1.1rem; }
.errores__titulo { margin: 0 0 .4rem; font-weight: 600; }

/* El nombre del campo es un link que salta hasta él. Hereda el rojo del
   recuadro: un link azul acá se lee como si fuera otra cosa. */
.errores a { color: inherit; font-weight: 600; }

/* Panel */

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .45rem .5rem; text-align: left; border-bottom: 1px solid var(--borde); }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); }

/* Sin cupo no hay celda "llena": lo que se marca es la que está en cero, que
   es donde la comisión tiene que salir a buscar gente. */
.celda--vacia { color: var(--tenue); opacity: .5; }

/* Instrucciones para el día de la entrega */

.instrucciones {
  margin-top: 2rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--verde);
  border-radius: 6px;
}

.instrucciones h3 {
  margin: 1.4rem 0 .4rem;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--acento);
}

.instrucciones h3:first-child { margin-top: 0; }
.instrucciones p { margin: 0 0 .6rem; }

/* Buscador de colaboradores */

.buscador { margin: 1.25rem 0; }
.buscador label { font-size: .85rem; }
.buscador__campos { display: flex; gap: .5rem; }
.buscador__campos input { flex: 1; }
.buscador__campos button { width: auto; padding: .6rem 1.1rem; }

.ficha {
  margin: 1rem 0;
  padding: .9rem 1rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: 6px;
}

.ficha h3 { margin: 0 0 .2rem; color: var(--acento); }
.ficha__contacto { margin: 0 0 .7rem; font-size: .87rem; color: var(--tenue); }

/* Resumen de arriba del panel */

.totales {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1rem 0 1.25rem;
}

.total {
  flex: 1 1 7rem;
  padding: .7rem .8rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: 6px;
}

.total__numero { display: block; font-size: 1.6rem; font-weight: 700; color: var(--acento); }
.total__etiqueta { font-size: .8rem; color: var(--tenue); }
.tabla-scroll { overflow-x: auto; }