/* 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;
}

/* ── 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; }
.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; }
#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);
}