/* 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); }
.intro__fechas { margin: 1.25rem 0 .4rem; font-size: .95rem; }

.fechas {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 3px solid var(--verde);
}

.fechas li { padding: .2rem 0 .2rem .75rem; }

.aviso-cupos {
  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__tarea { font-weight: 600; color: var(--acento); }
.resumen__turno { font-size: .95rem; }
.resumen__horario { 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;
}

.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);
}

/* Turnos y puestos */

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

.turno__horario { font-size: .9rem; color: var(--tenue); margin: .1rem 0 .5rem; }
.turno h3 { color: var(--acento); }
.turno__fecha { margin: 0; }

.puesto {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  padding: .5rem 0;
  border-top: 1px solid var(--borde);
  font-weight: 400;
}

.puesto input { margin: 0; width: 1.15rem; height: 1.15rem; flex: none; }
.puesto__cupo { margin-left: auto; font-size: .85rem; color: var(--verde-texto); }

/* 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); }
.flojo { background: var(--naranja-suave); }
.celda--lleno { color: var(--error); font-weight: 600; }

/* Tabla de colaboradores. El mail va debajo del nombre y no en su propia
   columna: en el celular la tabla ya scrollea y una columna más la empuja. */
.celda__dato { display: block; font-size: .82em; color: var(--tenue); }

/* Cada día en su propio renglón: puestos en varias fechas separados por comas
   se leen como una sola frase larga. */
.celda__dia { display: block; white-space: nowrap; }

/* Instrucciones para el día del evento */

.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; }