/* Monitor web: los colores de la app y de la landing (lib/tema.dart).
   Pensado primero para la pantalla de un telefono, que es donde va a estar
   la persona el dia que la app no abre. */

@font-face {
  font-family: 'Nunito';
  src: url('/assets/fonts/Nunito.woff2') format('woff2'),
       url('/assets/fonts/Nunito.ttf') format('truetype');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --crema: #fdf6ec;
  --terracota: #b5643c;
  --bellota: #6b4226;
  --blanco: #ffffff;
  --texto: #3a2c22;
  --texto-suave: #7a6a5c;
  --borde: #ead9c4;
  --aviso: #f6e6db;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font-family: 'Nunito', -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

[hidden] { display: none !important; }

.barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-weight: 800;
  color: var(--bellota);
  border-bottom: 1px solid var(--borde);
  background: var(--blanco);
}

.barra img { width: 32px; height: 32px; }
.barra span { flex: 1; }

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

h1 {
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--bellota);
  margin: 8px 0 12px;
}

h2 {
  font-size: 1.05rem;
  color: var(--bellota);
  margin: 24px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--terracota);
}

p { margin: 0 0 12px; }

.suave { color: var(--texto-suave); font-size: 0.95rem; }
.centrado { text-align: center; padding-top: 48px; }
.pregunta { font-weight: 700; margin-top: 20px; }

.aviso {
  background: var(--aviso);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.95rem;
}

.botones { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }

.boton, .boton-chico {
  font: inherit;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--terracota);
  background: var(--terracota);
  color: var(--blanco);
  cursor: pointer;
}

.boton { padding: 12px 20px; width: 100%; }
.boton-chico { padding: 6px 14px; font-size: 0.9rem; }
.boton-claro { background: transparent; color: var(--terracota); }
#actualizar { margin-top: 24px; }
#reintentar { margin-bottom: 16px; }

.pestanias { display: flex; gap: 8px; margin: 8px 0 4px; }

.pestania {
  font: inherit;
  /* Segun el largo de cada una: con tres, "Próximos 7 días" no entra en un
     tercio de la pantalla de un telefono. */
  flex: 1 1 auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--blanco);
  color: var(--texto);
  cursor: pointer;
}

.pestania[aria-selected='true'] {
  background: var(--bellota);
  border-color: var(--bellota);
  color: var(--blanco);
  font-weight: 700;
}

.turno {
  display: grid;
  grid-template-columns: 4.2em 1fr;
  column-gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}

/* min-width y overflow-wrap: un nombre largo sin espacios se corta en vez de
   empujar la pagina de costado. */
.turno > div:last-child { min-width: 0; overflow-wrap: anywhere; }
.turno .hora { font-weight: 800; font-variant-numeric: tabular-nums; }
.turno .hasta { display: block; font-size: 0.8rem; color: var(--texto-suave); font-weight: 400; }
.turno .nombre { font-weight: 700; }
.turno .detalle { color: var(--texto-suave); font-size: 0.95rem; }

.turno a {
  color: var(--terracota);
  font-weight: 700;
  white-space: nowrap;
}

.estado {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--borde);
  font-size: 0.8rem;
  font-weight: 700;
  vertical-align: middle;
}

.turno.cancelado .nombre { text-decoration: line-through; color: var(--texto-suave); }

.sin-turnos { color: var(--texto-suave); padding: 8px 0; }

/* ------------------------------------------------------------ el mes
   Solo con Plus (app.js decide). En el telefono, la grilla y abajo el dia
   elegido; en la compu (body.ancha), uno al lado del otro. */

/* En la compu la letra del telefono sobra, y el mes tiene que entrar entero
   sin bajar, aun con el zoom del navegador en 125 o 150 %: el alto de cada
   fila sale del alto de la ventana. Lo que se le resta es lo que va arriba
   de la grilla (barra, cuenta, aviso, mes y dias); seis filas es el peor
   mes. */
body.ancha { font-size: 15px; }
body.ancha main { max-width: 1120px; padding-top: 12px; }
body.ancha #cuenta { margin-bottom: 6px; }
body.ancha #frescura { padding: 6px 12px; margin-bottom: 8px; }
body.ancha #actualizar { width: auto; margin-top: 16px; padding: 6px 18px; }

#calendario {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

body.ancha #calendario {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 28px;
  margin-top: 8px;
}

.mes-barra { display: flex; align-items: center; gap: 8px; }
.mes-barra h2 { flex: 1; margin: 0; border: 0; padding: 0; font-size: 1.3rem; }

.flecha {
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--blanco);
  color: var(--bellota);
  cursor: pointer;
}

.grilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
}

.cabeza {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--texto-suave);
}

.celda {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  height: 52px;
  overflow: hidden;
  padding: 4px 6px;
  border-radius: 10px;
  border: 1px solid var(--borde);
  background: var(--blanco);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}

body.ancha .grilla { gap: 6px; }
body.ancha .celda {
  height: clamp(44px, calc((100vh - 270px) / 6), 84px);
  padding: 4px 8px;
  border-radius: 12px;
}

.celda .palabra { display: none; }
body.ancha .celda .palabra { display: inline; }

.celda:hover { border-color: var(--terracota); }
.celda .numero { font-weight: 800; font-variant-numeric: tabular-nums; }
.celda .cuantos { font-size: 0.8rem; color: var(--terracota); font-weight: 700; }
.celda.otro-mes { background: transparent; color: var(--texto-suave); }
.celda.otro-mes .cuantos { color: var(--texto-suave); }

.celda.hoy .numero {
  color: var(--blanco);
  background: var(--terracota);
  border-radius: 999px;
  padding: 0 7px;
}

.celda[aria-pressed='true'] {
  border: 2px solid var(--bellota);
  background: var(--aviso);
}

/* En la compu un dia cargado no alarga la pagina: la lista baja por adentro
   de su columna y el mes queda quieto a la izquierda. En el telefono baja la
   pagina entera, que es lo que se espera ahi. */
body.ancha .dia-elegido {
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  padding-right: 4px;
}
body.ancha .turno { padding: 8px 0; }
.dia-elegido h2 { margin-top: 4px; }
.dia-elegido h2:empty { display: none; }
.dia-elegido .boton-chico { margin-top: 4px; }