/* Yelcho — Aseo
   Pensada para teléfono, a la intemperie, con una mano y a veces con guantes.
   Objetivos: contraste alto, tipografía grande, blancos de toque de 56px o más. */

:root {
  --lago:        #0f3b4c;
  --lago-claro:  #1b5e77;
  --lago-tenue:  #e6f0f3;
  --papel:       #f7f5f1;
  --tarjeta:     #ffffff;
  --tinta:       #16202a;
  --tinta-suave: #5a6b78;
  --borde:       #dfdcd5;
  --verde:       #2e7d54;
  --ambar:       #a8631a;
  --radio:       14px;
  --sombra:      0 1px 2px rgba(22,32,42,.06), 0 4px 14px rgba(22,32,42,.07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --lago:        #7fc4dd;
    --lago-claro:  #a6d7e9;
    --lago-tenue:  #16303c;
    --papel:       #10161c;
    --tarjeta:     #18212a;
    --tinta:       #e8edf1;
    --tinta-suave: #93a3b0;
    --borde:       #2a3742;
    --verde:       #63c391;
    --ambar:       #e0a35c;
    --sombra:      0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior-y: contain;
}

.vista { max-width: 640px; margin: 0 auto; padding: 0 16px 40px; }
.vista--centrada { min-height: 100dvh; display: flex; align-items: center; }
[hidden] { display: none !important; }

/* ── Ingreso ───────────────────────────────────────────────── */

.ingreso { width: 100%; padding: 32px 0 48px; }
.marca { text-align: center; margin-bottom: 40px; }

/* El logo real reemplazó a la "Y" cuadrada: su estilo está más abajo, con el
   resto de las reglas de marca. */
.marca-bajada {
  margin: 6px 0 0;
  color: var(--tinta-suave);
  font-size: 14px; font-weight: 550;
  text-transform: uppercase; letter-spacing: .14em;
}

.ingreso-titulo {
  margin: 0 0 16px;
  font-size: 19px; font-weight: 600;
  text-align: center;
}

.personas { display: grid; gap: 10px; }

.persona {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 62px;
  padding: 12px 18px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: inherit; font: inherit; font-size: 18px; font-weight: 550;
  text-align: left; cursor: pointer;
}
.persona:active { transform: scale(.985); }

.persona-inicial {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--lago-tenue);
  color: var(--lago);
  display: grid; place-items: center;
  font-weight: 650; font-size: 16px;
}

/* ── Cabecera de inicio ────────────────────────────────────── */

.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 2px 22px;
}
.cabecera-hola { margin: 0; color: var(--tinta-suave); font-size: 15px; }

.cabecera-nombre {
  background: none; border: 0; padding: 0;
  color: inherit; font: inherit;
  font-size: 26px; font-weight: 650; letter-spacing: -.01em;
  cursor: pointer;
}
.cabecera-nombre::after { content: " ⌄"; color: var(--tinta-suave); font-size: 18px; font-weight: 400; }

.conexion {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 13px; font-weight: 550;
  background: var(--lago-tenue); color: var(--lago);
}
.conexion::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.conexion--sin { background: rgba(168,99,26,.14); color: var(--ambar); }

/* ── Accesos ───────────────────────────────────────────────── */

.accesos { display: grid; gap: 11px; }

/* Encabezado de grupo dentro del listado del inicio ("Reportar"). Separa lo
   que se mira de lo que se completa, sin agregar una tarjeta más. */
.accesos-titulo {
  margin: 12px 0 -2px 2px;
  color: var(--tinta-suave); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
/* Lo que viene después del grupo respira un poco más, para que se lea que el
   grupo "Reportar" terminó. */
.acceso--aparte { margin-top: 12px; }

.acceso {
  display: flex; align-items: center; gap: 15px;
  width: 100%; min-height: 74px;
  padding: 14px 16px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.acceso:active { transform: scale(.99); }

.acceso-icono { flex: 0 0 auto; font-size: 27px; line-height: 1; }
.acceso-texto { flex: 1 1 auto; min-width: 0; display: block; }
.acceso-titulo { display: block; font-size: 17.5px; font-weight: 600; }
.acceso-nota { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: 14px; }
.acceso-flecha { flex: 0 0 auto; color: var(--tinta-suave); font-size: 26px; line-height: 1; }

.acceso--pendiente { opacity: .5; box-shadow: none; cursor: default; }

/* ── Barra de las vistas internas ──────────────────────────── */

.barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  margin: 0 -16px 18px; padding: 8px 8px;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}

.barra-volver, .barra-accion {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 12px;
  color: var(--lago); font-size: 28px; line-height: 1;
  cursor: pointer;
}
.barra-accion { font-size: 21px; }
.barra-volver:active, .barra-accion:active { background: var(--lago-tenue); }

.barra-titulo {
  flex: 1 1 auto; min-width: 0;
  margin: 0; font-size: 18px; font-weight: 620; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Aviso ─────────────────────────────────────────────────── */

.aviso {
  margin-bottom: 14px; padding: 11px 14px;
  border-radius: 12px;
  background: rgba(168,99,26,.12);
  color: var(--ambar);
  font-size: 14.5px; font-weight: 500;
}

/* El ámbar es para lo que está mal (sin señal, copia vieja). Esto solo explica
   algo, así que va en el color de la app: si todo avisa en ámbar, el ámbar
   deja de significar "mirá esto". */
.aviso--suave { background: var(--lago-tenue); color: var(--lago); }
.aviso--suave strong { font-weight: 700; }

/* ── Documento (protocolo) ─────────────────────────────────── */

.documento { font-size: 17px; line-height: 1.62; padding-bottom: 24px; }
.documento h2 { margin: 30px 0 10px; font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.documento h3 { margin: 28px 0 8px; font-size: 19.5px; font-weight: 620; }
/* heading_3 de Notion. En varios protocolos es el ÚNICO encabezado que existe,
   así que tiene que verse como un título de sección de verdad, no como una
   etiqueta secundaria. Se distingue del h3 por el filete lateral, no por ser
   más chico. */
.documento h4 {
  margin: 26px 0 8px;
  padding-left: 11px;
  border-left: 3px solid var(--lago);
  font-size: 17.5px; font-weight: 640; letter-spacing: -.005em;
}
.documento h2:first-child,
.documento h3:first-child,
.documento h4:first-child { margin-top: 4px; }
.documento p { margin: 0 0 12px; }
/* Adjuntos (PDF del reglamento, por ejemplo). Se ven como un botón porque eso
   es lo que son: hay que tocarlos, y necesitan señal para abrirse. */
.documento .adjunto { margin: 4px 0 12px; }
.documento .adjunto a {
  display: block; padding: 14px 15px;
  background: var(--lago-tenue); color: var(--lago);
  border-radius: 12px;
  font-size: 15.5px; font-weight: 600; text-decoration: none;
  overflow-wrap: anywhere;
}
.documento figure { margin: 14px 0; }
.documento figure img { border-radius: 10px; }
.documento figcaption { margin-top: 6px; color: var(--tinta-suave); font-size: 14px; }
.documento ul, .documento ol { margin: 0 0 14px; padding-left: 26px; }
.documento li { margin-bottom: 7px; }
.documento li::marker { color: var(--lago); font-weight: 600; }
.documento hr { margin: 26px 0; border: 0; border-top: 1px solid var(--borde); }
.documento a { color: var(--lago); }
.documento code {
  background: var(--lago-tenue); border-radius: 5px;
  padding: 1px 5px; font-size: .9em;
}
.documento blockquote {
  margin: 0 0 14px; padding: 2px 0 2px 15px;
  border-left: 3px solid var(--lago); color: var(--tinta-suave);
}
.documento img { max-width: 100%; height: auto; border-radius: 10px; }

.destacado {
  display: flex; gap: 11px;
  margin: 0 0 14px; padding: 13px 15px;
  background: var(--lago-tenue); border-radius: 12px;
}
.destacado-icono { flex: 0 0 auto; }

.tarea { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }

/* ── Pie ───────────────────────────────────────────────────── */

.pie-nota {
  margin: 18px 0 0;
  color: var(--tinta-suave); font-size: 13.5px; text-align: center;
}
.pie-nota--suelto { margin-top: 28px; }

/* ── Carga ─────────────────────────────────────────────────── */

.cargando { padding: 40px 0; text-align: center; color: var(--tinta-suave); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .acceso:active, .persona:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   Fase 2 — formularios de aseo
   Todo control se toca con el pulgar: mínimo 48px de alto y
   blancos generosos, porque se usa de pie y a veces con guantes.
   ═══════════════════════════════════════════════════════════ */

.formulario { display: grid; gap: 14px; padding-bottom: 120px; }

.bloque {
  margin: 0; padding: 16px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.bloque-titulo {
  padding: 0; margin-bottom: 12px;
  font-size: 16.5px; font-weight: 650;
}
.bloque-nota {
  margin: -6px 0 12px;
  color: var(--tinta-suave); font-size: 14px;
}

/* ── Unidades ─────────────────────────────────────────────── */

.grupo + .grupo { margin-top: 16px; }
.grupo-titulo {
  margin: 0 0 8px;
  color: var(--tinta-suave);
  font-size: 12.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .07em;
}
.fichas { display: flex; flex-wrap: wrap; gap: 8px; }

.ficha { position: relative; }
.ficha input { position: absolute; opacity: 0; width: 0; height: 0; }
.ficha span {
  display: grid; place-items: center;
  min-width: 62px; min-height: 50px;
  padding: 0 14px;
  border: 1.5px solid var(--borde);
  border-radius: 11px;
  font-size: 16.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ficha input:checked + span {
  background: var(--lago); border-color: var(--lago);
  color: var(--papel);
}
.ficha input:focus-visible + span { outline: 3px solid var(--lago); outline-offset: 2px; }

/* ── Chequeos ─────────────────────────────────────────────── */

.chequeos { display: grid; gap: 2px; }

.chequeo {
  display: flex; align-items: center; gap: 13px;
  min-height: 52px; padding: 6px 4px;
  font-size: 16.5px; cursor: pointer;
}
.chequeo + .chequeo { border-top: 1px solid var(--borde); }
.chequeo input { position: absolute; opacity: 0; width: 0; height: 0; }

.chequeo-marca {
  flex: 0 0 auto;
  width: 27px; height: 27px;
  border: 2px solid var(--borde);
  border-radius: 8px;
  display: grid; place-items: center;
}
.chequeo-marca::after {
  content: "✓";
  color: var(--papel); font-size: 17px; font-weight: 700; line-height: 1;
  opacity: 0;
}
.chequeo input:checked + .chequeo-marca {
  background: var(--verde); border-color: var(--verde);
}
.chequeo input:checked + .chequeo-marca::after { opacity: 1; }
.chequeo input:checked ~ span:last-child { color: var(--tinta-suave); }
.chequeo input:focus-visible + .chequeo-marca { outline: 3px solid var(--lago); outline-offset: 2px; }

/* ── Interruptor ──────────────────────────────────────────── */

.interruptor {
  display: flex; align-items: center; gap: 13px;
  min-height: 50px; font-size: 16.5px; cursor: pointer;
}
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor-pista {
  flex: 0 0 auto;
  width: 52px; height: 31px;
  padding: 3px;
  background: var(--borde); border-radius: 999px;
  transition: background .18s;
}
.interruptor-perilla {
  display: block; width: 25px; height: 25px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
  transition: transform .18s;
}
.interruptor input:checked + .interruptor-pista { background: var(--ambar); }
.interruptor input:checked + .interruptor-pista .interruptor-perilla { transform: translateX(21px); }
.interruptor input:focus-visible + .interruptor-pista { outline: 3px solid var(--lago); outline-offset: 2px; }

/* ── Campos de texto ──────────────────────────────────────── */

.campo { display: block; margin: 16px 0 14px; }
.campo-etiqueta {
  display: block; margin-bottom: 6px;
  color: var(--tinta-suave); font-size: 14.5px; font-weight: 550;
}
.entrada {
  width: 100%; min-height: 50px; padding: 12px 14px;
  background: var(--papel);
  border: 1.5px solid var(--borde); border-radius: 11px;
  color: inherit; font: inherit; font-size: 16.5px;
}
.entrada--area { min-height: 88px; resize: vertical; line-height: 1.5; }

/* Los desplegables del sistema se ven distinto en cada teléfono (en iOS, casi
   invisibles dentro de un borde). Se les saca el estilo nativo y se les dibuja
   la flecha, para que se lean como los demás campos. */
select.entrada {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235b6b73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.entrada:focus { outline: none; border-color: var(--lago); }

/* ── Fotos ────────────────────────────────────────────────── */

.boton-foto {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 20px;
  border: 1.5px dashed var(--borde); border-radius: 11px;
  color: var(--lago); font-size: 16px; font-weight: 600;
  cursor: pointer;
}
.boton-foto:active { background: var(--lago-tenue); }

.miniaturas { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.miniatura { position: relative; width: 84px; height: 84px; }
.miniatura img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 10px;
  border: 1px solid var(--borde);
}
.miniatura-quitar {
  position: absolute; top: -7px; right: -7px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--papel);
  border: 2px solid var(--papel); border-radius: 50%;
  font-size: 16px; line-height: 1; cursor: pointer;
}

/* ── Barra de envío ───────────────────────────────────────── */

.barra-envio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--papel) 93%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--borde);
}
.resumen {
  margin: 0; text-align: center;
  color: var(--tinta-suave); font-size: 14px;
}

.boton-principal {
  width: 100%; min-height: 56px;
  background: var(--lago); color: var(--papel);
  border: 0; border-radius: 13px;
  font: inherit; font-size: 18px; font-weight: 650;
  cursor: pointer;
}
.boton-principal:active { filter: brightness(1.12); }
.boton-principal:disabled { opacity: .55; }

.boton-secundario {
  width: 100%; min-height: 50px;
  background: none; color: var(--lago);
  border: 1.5px solid var(--borde); border-radius: 12px;
  font: inherit; font-size: 16.5px; font-weight: 600;
  cursor: pointer;
}
/* El botón "Actualizar" del reporte. Lleva texto y no solo el símbolo ↻:
   hace bastante más que refrescar la pantalla —vuelve a preguntarle a PXSOL—
   y tiene que quedar claro que es LA forma de traer los cambios del día. */
.boton-actualizar {
  width: 100%; min-height: 48px; margin: 4px 0 2px;
  background: var(--lago-tenue); color: var(--lago);
  border: none; border-radius: 12px;
  font: inherit; font-size: 16px; font-weight: 650;
  cursor: pointer;
}
.boton-actualizar[disabled] { opacity: .55; }

.boton-secundario--chico {
  width: auto; min-height: 42px; padding: 0 16px;
  flex: 0 0 auto; font-size: 15px;
}

/* ── Confirmación ─────────────────────────────────────────── */

.confirmacion { width: 100%; text-align: center; display: grid; gap: 12px; padding: 40px 0; }
.confirmacion-icono {
  width: 82px; height: 82px; margin: 0 auto 8px;
  display: grid; place-items: center;
  background: var(--verde); color: #fff;
  border-radius: 50%; font-size: 42px; line-height: 1;
}
.confirmacion-icono--espera { background: var(--ambar); font-size: 34px; }
.confirmacion h1 { margin: 0; font-size: 27px; font-weight: 650; }
.confirmacion-texto {
  margin: 0 auto 14px; max-width: 34ch;
  color: var(--tinta-suave); font-size: 16.5px; line-height: 1.5;
}

/* ── Banner de pendientes ─────────────────────────────────── */

.banner {
  display: block; width: 100%;
  margin-bottom: 13px; padding: 13px 15px;
  background: var(--lago-tenue); color: var(--lago);
  border: 0; border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 550;
  text-align: left; cursor: pointer;
}
.banner--mal { background: rgba(168,99,26,.14); color: var(--ambar); }

.marca-mal { color: var(--ambar); font-weight: 550; }

/* ── Noticias de Gerencia ─────────────────────────────────── */

/* Se parece a una tarjeta pero no lo es: no se toca, no lleva a ningún lado.
   La franja lateral y el megáfono la separan de los accesos para que se lea
   como un mensaje de alguien y no como un botón más. */
.noticias { display: grid; gap: 8px; margin: 2px 0 16px; }
.noticia {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px 13px 13px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--verde);
  border-radius: 12px;
  box-shadow: var(--sombra);
}
.noticia-icono { font-size: 19px; line-height: 1.35; }
.noticia-texto {
  margin: 0; font-size: 16px; line-height: 1.45; font-weight: 550;
  color: var(--tinta);
}

/* ── Aviso flotante ───────────────────────────────────────── */

.flotante {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 40;
  max-width: min(92vw, 460px);
  padding: 13px 19px;
  background: var(--tinta); color: var(--papel);
  border-radius: 12px;
  font-size: 15px; font-weight: 550; text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.24);
}
.flotante--bien { background: var(--verde); color: #fff; }
.flotante--mal { background: var(--ambar); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   Fase 4 — reporte de habitaciones
   ═══════════════════════════════════════════════════════════ */

.dias { display: flex; gap: 8px; margin-bottom: 16px; }
.dia {
  flex: 1 1 0; min-height: 44px;
  background: var(--tarjeta);
  border: 1.5px solid var(--borde); border-radius: 11px;
  color: var(--tinta-suave); font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.dia--activo { background: var(--lago); border-color: var(--lago); color: var(--papel); }

.seccion {
  display: flex; align-items: center; gap: 11px;
  margin: 26px 0 10px;
}
.seccion:first-child { margin-top: 4px; }
.seccion-icono { font-size: 21px; line-height: 1; }
.seccion-titulo { display: block; font-size: 17px; font-weight: 650; }
.seccion-nota { display: block; color: var(--tinta-suave); font-size: 13.5px; }

.unidad {
  margin-bottom: 9px; padding: 13px 15px;
  background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.unidad-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.unidad-nombre {
  font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.unidad-persona {
  padding: 3px 10px; border-radius: 999px;
  background: var(--lago-tenue); color: var(--lago);
  font-size: 13px; font-weight: 600;
}
/* Cómo hay que armar la cama. Es lo más importante de la tarjeta después del
   número de unidad: si se arma matrimonial donde iban dos individuales, hay
   que rehacer la habitación. Por eso va destacado y no como un dato más. */
.camas {
  display: flex; align-items: center; gap: 8px;
  margin: 9px 0 0; padding: 9px 12px;
  background: var(--lago-tenue); color: var(--lago);
  border-radius: 10px;
  font-size: 16px; font-weight: 650;
}

.unidad-datos { margin-top: 7px; font-size: 15.5px; line-height: 1.7; }
.etiqueta {
  display: inline-block; min-width: 52px;
  color: var(--tinta-suave); font-size: 12.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .05em;
}
.unidad-nota {
  margin: 9px 0 0; padding-top: 9px;
  border-top: 1px solid var(--borde);
  color: var(--ambar); font-size: 14px;
}

/* Tareas. Mismo formato de tarjeta que el reporte, con dos diferencias: el
   nombre es una frase y no un número de habitación (tiene que poder cortarse
   en varias líneas), y la nota es una instrucción, no una advertencia — en
   ámbar se leería como un problema. */
.tarea-nombre { font-size: 17px; font-weight: 650; line-height: 1.35; }
/* Una tarea vencida tiene que verse vencida, no ser un renglón más. */
.atrasada {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: 999px;
  background: rgba(168, 99, 26, .14); color: var(--ambar);
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
#lista-tareas .unidad-nota { color: var(--tinta-suave); }

/* ═══════════════════════════════════════════════════════════
   Logo y fechas
   ═══════════════════════════════════════════════════════════ */

/* El logo se pinta como MÁSCARA, no como imagen: el archivo solo aporta la
   forma y el color lo pone el CSS. Así el mismo archivo se ve negro sobre
   papel y claro sobre fondo oscuro, sin necesidad de dos versiones. */
.marca-logo,
.marca-barra-logo {
  background-color: var(--tinta);
  -webkit-mask: url("iconos/logo-yelcho.png") no-repeat center / contain;
  mask: url("iconos/logo-yelcho.png") no-repeat center / contain;
}

.marca-logo {
  width: min(72vw, 260px);
  aspect-ratio: 1000 / 388;
  margin: 0 auto 10px;
}

.marca-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 20px 2px 0;
}
.marca-barra-logo {
  width: 132px;
  aspect-ratio: 1000 / 388;
  flex: 0 0 auto;
  opacity: .78;
}

.cabecera-fecha {
  margin: 3px 0 0;
  color: var(--tinta-suave);
  font-size: 15px;
}

.fecha-grande {
  margin: -6px 0 16px;
  text-align: center;
  font-size: 15.5px; font-weight: 600;
  color: var(--tinta-suave);
}

/* ── Cocina ───────────────────────────────────────────────────
   Los tres turnos son lo primero que se mira, casi siempre de lejos y con las
   manos ocupadas. El número tiene que leerse desde el otro lado de la mesada;
   el detalle solo aparece si alguien lo pide. */

.turno {
  margin-bottom: 10px;
  background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.turno-cabecera {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 76px; padding: 14px 16px;
  background: none; border: 0;
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.turno-cabecera:active { background: var(--lago-tenue); }
.turno-icono { flex: 0 0 auto; font-size: 26px; line-height: 1; }
.turno-nombre { flex: 1 1 auto; font-size: 18px; font-weight: 650; }

/* El dato de la pantalla. Tabular para que los números no bailen al cambiar. */
.turno-numero {
  flex: 0 0 auto;
  font-size: 40px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--lago);
}
.turno-flecha {
  flex: 0 0 auto; width: 20px;
  color: var(--tinta-suave); font-size: 18px; line-height: 1;
  transition: transform .18s ease;
}
.turno--abierto .turno-flecha { transform: rotate(180deg); }

.turno-detalle { padding: 2px 16px 14px; border-top: 1px solid var(--borde); }
.turno-vacio { margin: 12px 0 4px; color: var(--tinta-suave); }
.turno-pie { margin: 12px 0 0; color: var(--ambar); font-size: 14px; }

.comensal { padding: 11px 0; }
.comensal + .comensal { border-top: 1px solid var(--borde); }
.comensal-linea { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.comensal-unidad {
  font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.comensal-pax { color: var(--tinta-suave); font-size: 14.5px; }
.comensal-huesped { margin-top: 1px; color: var(--tinta-suave); font-size: 15px; }

/* Alergias, regímenes, pedidos especiales. Va destacado: es lo único de esta
   pantalla que, si se pasa por alto, termina con un plato devuelto. */
.comensal-nota {
  margin-top: 7px; padding: 8px 11px;
  background: var(--lago-tenue); color: var(--lago);
  border-radius: 9px;
  font-size: 15px; font-weight: 550; line-height: 1.45;
}

.boton-listo {
  margin-top: 11px; min-height: 46px; padding: 0 20px;
  background: none;
  border: 1.5px solid var(--verde); border-radius: 11px;
  color: var(--verde); font: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer;
}
.boton-listo:active { background: var(--verde); color: #fff; }

/* La tarjeta se va antes de que el envío llegue: la cola se encarga del resto,
   y si algo falla la tarea vuelve sola en la próxima actualización. */
.unidad--yendose { opacity: 0; transform: translateX(28px); transition: opacity .2s ease, transform .2s ease; }

.campo-opcional { color: var(--tinta-suave); font-weight: 400; }
.seccion-texto { flex: 1 1 auto; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .turno-flecha, .unidad--yendose { transition: none; }
}

/* La cabecera de Cocina: el día manda, y el botón de actualizar es un botón,
   no media pantalla. (En la app de aseo `.boton-actualizar` va a lo ancho
   dentro de una columna; acá vive en una fila y hay que soltarlo.) */
#vista-dia .cabecera { align-items: flex-start; padding-bottom: 18px; }
#vista-dia .cabecera-fecha {
  margin: 1px 0 0;
  color: var(--tinta); font-size: 19px; font-weight: 650;
  letter-spacing: -.01em;
}
#vista-dia .boton-actualizar {
  flex: 0 0 auto; width: auto; min-height: 44px; margin: 0; padding: 0 18px;
  font-size: 15px;
}

/* El próximo cordero, cuando hoy no hay ninguno. Va apagado a propósito: es
   un aviso para planificar, no trabajo de hoy, y tiene que distinguirse de un
   golpe de lo que sí hay que cocinar ahora. */
.proximo-aviso { margin: 2px 0 8px; color: var(--tinta-suave); font-size: 15px; }
.proximo-aviso strong { color: var(--tinta); font-weight: 650; }
.unidad--proxima { background: none; box-shadow: none; border-style: dashed; }

/* La nota de desayuno. Distinta de la restricción alimentaria a propósito: una
   es "no puede comer esto" y la otra "esa mañana pidió tal cosa". Si se vieran
   iguales, con el tiempo se leerían las dos por encima. */
.comensal-nota--desayuno {
  margin-top: 6px;
  background: rgba(168,99,26,.12); color: var(--ambar);
  font-weight: 500;
}