:root {
  --ink: #1e2a26;
  --shade: #3f534c;
  --limewash: #eef2ec;
  --paper: #f7f8f4;
  --teak: #7a5332;
  --lagoon: #0f6e6a;
  --error: #a33a32;
  --line: #c5d0c8;
  --brass: #c4a36a;
  /* Contorno del llavero. ink sobre brass = 6.22 (el número, AA). brass
     sobre limewash = 2.11, por debajo del 3:1 de un control no textual.
     No se oscurece el relleno: se perdería el 6.22. #6b5428 sobre paper
     = 6.73, sobre limewash = 6.34, sobre brass = 3.01. */
  --brass-line: #6b5428;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--limewash);
  color: var(--ink);
  font-family: "Instrument Sans", "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.45;
}

body {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.5rem 1.15rem 4rem;
}

/* Los titulos NO llevan letra de exhibicion. Syne en cada h2 hacia que una
   consola de trabajo pareciera un folleto: una herramienta que se usa todos
   los dias no lleva letra de cartel. La jerarquia la da el peso y el tamano,
   no una forma llamativa. El nombre de la casa sobre la foto es la unica
   excepcion, y ahi si va una serif de exhibicion. */
h1, h2, h3 {
  font-family: "Instrument Sans", "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.15rem; margin-bottom: 0.35rem; }
h3 { font-size: 1rem; }

/* En la ficha los h2 bajan de peso para no pelearle el escenario al llavero,
   que es el elemento fuerte de esa pantalla. En el panel (body.wide) suben:
   ahí la jerarquía carga más trabajo y no hay foto que compita. */
body:not(.wide) h2,
body:not(.wide) h3 {
  font-family: "Instrument Sans", "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
}

@media (max-width: 639px) {
  /* A 360px "Casa Palmera" en 2rem se partía en dos líneas y comía el
     primer gesto (elegir el loft) por encima del pliegue. */
  h1 { font-size: 1.65rem; }
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.4rem;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* El idioma vivia en una barra recuadrada arriba del todo: era el elemento mas
   pesado de la pagina y el menos importante para la mayoria. Ahora es un
   conmutador discreto en la cabecera. Se conservan las palabras completas y no
   "ES / EN" porque quien no lee espanol busca la palabra "English". */
.idiomas {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.88rem;
  white-space: nowrap;
}

.idiomas a {
  color: var(--shade);
  text-decoration: none;
  padding: 0.35rem 0.1rem;
  border-bottom: 2px solid transparent;
}

.idiomas a:hover { color: var(--ink); }

.idiomas a.is-on {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--lagoon);
}

.rama {
  margin-bottom: 0.35rem;
}

.rama-pregunta {
  margin: 0 0 0.35rem;
  font-weight: 700;
  color: var(--ink);
  font-size: 1.05rem;
}

.rama-ops {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin: 0.7rem 0 0.5rem;
}

@media (min-width: 640px) {
  .rama-ops { grid-template-columns: 1fr 1fr; }
}

.rama-opt {
  appearance: none;
  font: inherit;
  font-weight: 600;
  min-height: 3.1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.rama-opt.is-on {
  background: var(--lagoon);
  border-color: var(--lagoon);
  color: #06231f;
}

/* En la ficha (noche) el boton no elegido usa el campo oscuro —antes era
   #fff fijo, que con el texto claro del tema quedaba blanco sobre blanco,
   ilegible— y el elegido se ENCIENDE en ambar, como las llaves. */
body.noche .rama-opt {
  background: var(--campo);
  border-color: var(--campo-line);
}
body.noche .rama-opt.is-on {
  background: var(--luz);
  border-color: var(--luz);
  color: #241a09;
  box-shadow: 0 0 18px rgba(216, 192, 144, 0.35);
}

.place {
  margin: 0 0 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--shade);
}

.lede {
  margin: 0 0 1.4rem;
  color: var(--shade);
  max-width: 36rem;
}

.panel {
  background: var(--paper);
  padding: 1.15rem 1.1rem 1.25rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--line);
}

.hint {
  margin: 0 0 0.85rem;
  color: var(--shade);
  font-size: 0.92rem;
}

.keyrack {
  display: grid;
  /* Tres columnas bajo 640px: a 360px cuatro dejaban ~67px y el clip-path
     se comía las esquinas. La altura (2.9rem) no se toca. */
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

@media (min-width: 640px) {
  .keyrack { grid-template-columns: repeat(4, 1fr); }
}

.keytag {
  appearance: none;
  background: var(--brass);
  border: 1px solid var(--brass-line);
  color: var(--ink);
  font-family: "Instrument Sans", "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  min-height: 2.9rem;
  cursor: pointer;
  clip-path: polygon(12% 0, 88% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
  position: relative;
}

.keytag span {
  display: block;
}

.keytag::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  left: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: -0.28rem;
  border-radius: 50%;
  background: var(--limewash);
}

.keytag.is-on,
.keytag[aria-pressed="true"] {
  background: var(--teak);
  color: var(--paper);
}

.keytag.lone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  min-height: 4.2rem;
  margin-bottom: 1rem;
}

/* En el panel la llave identifica el loft, no celebra: achicar el
   recuadro recupera densidad. La altura de las llaves de la ficha
   (2.9rem) no se toca. */
body.wide .keytag.lone {
  width: 3.5rem;
  min-height: 2.9rem;
  margin-bottom: 0;
}

.dates {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 640px) {
  .dates { grid-template-columns: 1fr 1fr 1fr; }
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.92rem;
  color: var(--shade);
}

input, select {
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ink);
  padding: 0.55rem 0.6rem;
  width: 100%;
  /* Mismo piso que un pulgar: 2.75 × 17px = 46.75 ≥ 44. */
  min-height: 2.75rem;
}

input:focus, select:focus, .keytag:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--lagoon);
  outline-offset: 2px;
}

.grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

.persona {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-top: 1rem;
}

.persona:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

.persona header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.sire {
  border: 1px dashed var(--line);
  margin: 0.9rem 0 0;
  padding: 0.85rem;
  display: grid;
  gap: 0.75rem;
}

.sire legend {
  padding: 0 0.35rem;
  color: var(--shade);
  font-size: 0.85rem;
}

button.ghost, button.quitar, a.ghost {
  appearance: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}

.submit {
  display: inline-block;
  appearance: none;
  border: 0;
  background: var(--lagoon);
  color: #f4fbfa;
  font: inherit;
  font-weight: 600;
  padding: 0.85rem 1.2rem;
  cursor: pointer;
  text-decoration: none;
  margin-top: 0.4rem;
}

.submit:disabled { opacity: 0.6; cursor: wait; }

/* Foto del documento: acelerador, no puerta. Botón con palabras,
   no un icono, porque de noche y de pie hay que saber qué va a pasar. */
.foto-atajo {
  margin: 0 0 1rem;
  padding: 0.85rem;
  border: 1px dashed var(--line);
  background: var(--paper);
}
.foto-botones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.foto-btn {
  appearance: none;
  width: 100%;
  min-height: 2.9rem;
  font: inherit;
  font-weight: 600;
  text-align: left;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.foto-titulo {
  font-weight: 600;
  margin: 0.35rem 0 0.5rem;
}
.foto-campos {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.foto-campo {
  display: grid;
  gap: 0.15rem;
  padding: 0.45rem 0.55rem;
  border-left: 3px solid var(--lagoon);
  background: #fff;
}
.foto-campo.dudoso { border-left-color: var(--error); }
.foto-etiqueta {
  font-size: 0.8rem;
  color: var(--shade);
}
.foto-campo em {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--shade);
}
.foto-campo.dudoso em { color: var(--error); }
.foto-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.foto-acciones .submit { margin-top: 0; }
.aviso-campo {
  color: var(--error);
  font-size: 0.8rem;
}
input.es-dudoso,
select.es-dudoso { border-color: var(--error); }

body.noche .foto-atajo { background: var(--campo); }
body.noche .foto-btn { background: var(--campo); border-color: var(--campo-line); color: var(--ink); }
body.noche .foto-campo { background: var(--campo); }

/* En el telefono el envio es la unica accion que cierra la ficha: ocupa el
   ancho para que no haya que apuntar. */
#enviar { width: 100%; min-height: 3.25rem; font-size: 1.05rem; }
@media (min-width: 640px) { #enviar { width: auto; } }

.field-error {
  color: var(--error);
  font-size: 0.85rem;
}

.banner {
  background: #f6e4e1;
  color: var(--error);
  padding: 0.7rem 0.85rem;
  margin-bottom: 1rem;
}

.done .meta {
  color: var(--shade);
}

/* El recibo es la llave: es lo último que ve el huésped y el único
   gesto de que quedó registrado. No es un trophy extra, es la misma
   llave que eligió. */
.done .keytag.lone.recibo {
  width: 6rem;
  min-height: 4.6rem;
  margin: 0.2rem 0 1.15rem;
}

body.wide {
  max-width: 72rem;
  font-size: 15px;
  padding: 1.1rem 1.25rem 2.5rem;
}

body.wide .masthead { align-items: center; }

.share {
  padding: 0.7rem 0.9rem 0.8rem;
}

.share h2 { font-size: 1rem; margin-bottom: 0.15rem; }

.share .hint { margin-bottom: 0.45rem; }

.entrar label { margin-bottom: 0.75rem; }

.stay {
  margin-bottom: 1rem;
}

.stay header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.9rem;
}

/* Confirmar fechas en el panel. Tenia la misma clase que la fila de fechas de
   la ficha del huesped y la pisaba: dos reglas .dates con grid-template-columns
   distinto en la misma media query. La segunda ganaba, asi que la ficha se veia
   con la columna de "motivo" encogida y desalineada. */
.dates-confirmar {
  display: grid;
  gap: 0.75rem;
}

.dates-confirmar .submit { margin-top: 0; }

@media (min-width: 640px) {
  .dates-confirmar {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 0 0 1.4rem;
  color: var(--shade);
}

.enlace {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.9rem;
  word-break: break-all;
  background: #fff;
  border: 1px solid var(--line);
  padding: 0.55rem 0.7rem;
}

.share-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.45rem;
}

a.ghost { text-decoration: none; display: inline-flex; align-items: center; }

.nueva { border-left: 4px solid var(--lagoon); }

.filtro { margin: 0.6rem 0 0.9rem; max-width: 24rem; }

.tabla-wrap { overflow-x: auto; }

table.historico {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: var(--paper);
}

table.historico th,
table.historico td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.historico th {
  color: var(--shade);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------------------------------------------------------------
   Pantalla de conexión. El botón que lleva a MinCIT es el elemento
   más pesado de la página a propósito: es la única acción que la
   persona no puede hacer aquí, y es donde se atasca todo el mundo.
   --------------------------------------------------------------- */

.aviso {
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
  border-left: 4px solid var(--line);
  background: var(--paper);
}
.aviso.ok  { border-left-color: var(--lagoon); }
.aviso.mal { border-left-color: var(--error); color: var(--error); background: #f6e4e1; }

.estado-ok {
  border-left: 4px solid var(--lagoon);
  background: #fff;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}
.estado-ok p { margin: 0 0 0.3rem; }
.meta { color: var(--shade); font-size: 0.9rem; margin: 0; }

.pasos { margin: 0.5rem 0 1.2rem; padding-left: 1.3rem; }
.pasos li { margin-bottom: 0.9rem; }
.pasos p { margin: 0 0 0.5rem; }

.importante { color: var(--teak); font-weight: 600; }

.boton-externo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--teak);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
  padding: 0.8rem 1.15rem;
  min-height: 3rem;
  border: 0;
}
.boton-externo:hover { background: var(--ink); }

.pegar { display: grid; gap: 0.6rem; max-width: 34rem; }
.pegar input,
.pegar select { font-family: ui-monospace, Consolas, monospace; }
.pegar .submit { justify-self: start; }

.tarifas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .tarifas { grid-template-columns: repeat(4, 1fr); }
}

.panel.apagado { opacity: 0.62; }

/* Nombre y RNT juntos, junto al campo del token. "Perfil A" no dice
   contra qué establecimiento autentica: un token pegado en el bloque
   equivocado crea un registro bajo el RNT que no era, y eso no se borra. */
.identidad {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  margin-bottom: 0.65rem;
}
.identidad h2 { margin-bottom: 0; }
.identidad .rnt,
.rnt-junto {
  margin: 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.88rem;
  color: var(--shade);
}
.rnt-junto { display: block; font-weight: 400; }
.rnt-bloque .pegar { margin-bottom: 0.35rem; }
.rnt-bloque h3 {
  margin: 0.85rem 0 0.4rem;
  font-family: "Instrument Sans", "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--shade);
  font-size: 0.95rem;
}

/* Una ficha sin valor de estadia no se puede reportar a MinCIT. Se senala en
   teca y no en rojo: es informacion operativa pendiente, no un error de nadie. */
.sin-valor { color: var(--teak); font-weight: 600; }

@media (min-width: 640px) {
  .dates-confirmar { grid-template-columns: 1fr 1fr 1fr auto; }
}

/* Configuración de establecimientos: se visita poco. No le pelea
   el escenario al llavero de la ficha. */
.frase-reparto {
  margin: 0 0 0.6rem;
  overflow-wrap: anywhere;
}
.reparto-form { display: grid; gap: 0.75rem; }
.reparto-form .submit { justify-self: start; }
label.check {
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
}
label.check input {
  width: auto;
  min-height: 1.25rem;
  margin: 0;
}
@media (max-width: 360px) {
  body.wide { padding-left: 0.85rem; padding-right: 0.85rem; overflow-x: hidden; }
}

.mrz-caja {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.mrz-caja textarea {
  font: inherit;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
  width: 100%;
  min-height: 4.5rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ink);
  padding: 0.55rem 0.6rem;
}
.mrz-caja textarea:focus {
  outline: 2px solid var(--lagoon);
  outline-offset: 2px;
}
.mrz-cambios {
  margin: 0.4rem 0 0.8rem;
  padding-left: 1.1rem;
}
.mrz-cambios li { margin-bottom: 0.25rem; }

/* ===========================================================================
   LA NOCHE — solo la ficha pública (body.noche)
   ---------------------------------------------------------------------------
   Por qué existe esto: la ficha era clara y fría (#eef2ec) y el sitio es
   oscuro y cálido. Muestreando la foto de la fachada: el 84% de los píxeles
   está por debajo del brillo medio, la noche es #000000 con negros cálidos
   (#101000), y la luz de las ventanas es #d8c090. Ese ámbar es el mismo
   --brass #c4a36a de las llaves: el latón ya estaba en la foto.

   Una foto casi negra sobre una página verde pálido se ve pegada con cinta.
   Así que la página se pasa a la noche, que además es cuando de verdad se
   hace un check-in: el huésped acaba de llegar.

   El PANEL de recepción NO cambia. Ella trabaja de día en un computador; es
   otra habitación. Dos superficies, dos ambientes.

   Contrastes medidos, no estimados: texto sobre fondo 15.75, texto sobre
   panel 13.53, texto secundario 6.52, borde de panel 3.06 sobre el fondo,
   borde de campo 4.63, foco 10.34, número de la llave sobre latón 6.22.
   =========================================================================== */
body.noche {
  --ink: #ede8dd;
  --shade: #a9a294;
  --limewash: #0d0f0d;
  --paper: #1b201c;
  --line: #5a6350;
  --lagoon: #4fb8b0;
  --error: #e08a80;
  --luz: #d8c090;
  --campo: #12160f;
  --campo-line: #868f7c;
  background: var(--limewash);
  color: var(--ink);
}

/* La fachada. Sangra a los bordes y se desvanece en la página: si tuviera un
   corte recto se leería como una imagen pegada encima y no como el sitio. */
.fachada {
  position: relative;
  margin: -1.5rem -1.15rem 1.6rem;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #000;
}

.fachada img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* El degradado hace el trabajo de unión: opaco abajo, transparente arriba.
   Sin él, el texto blanco cae sobre zonas claras de la foto y desaparece. */
.fachada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13, 15, 13, 0.15) 0%,
    rgba(13, 15, 13, 0.55) 55%,
    rgba(13, 15, 13, 0.94) 88%,
    var(--limewash) 100%
  );
}

.fachada .masthead {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 1.5rem 1.15rem 1.3rem;
  border-bottom: 0;
  align-items: flex-end;
}

body.noche .place { color: var(--luz); }
body.noche .fachada h1 { color: #fff; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.7); }

/* Las luces encendiéndose. La foto entra oscura y sube el brillo, en vez de
   aparecer de golpe: es llegar de noche y ver la casa iluminada. No se
   intenta señalar ventanas concretas — las palmeras tapan media fachada y
   cualquier marca acabaría desalineada. */
@keyframes encender {
  from { filter: brightness(0.45) saturate(0.7); transform: scale(1.06); }
  to   { filter: brightness(1) saturate(1);      transform: scale(1); }
}

.fachada img { animation: encender 1500ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }

body.noche .panel {
  background: var(--paper);
  border: 1px solid var(--line);
}

body.noche input,
body.noche select,
body.noche textarea {
  background: var(--campo);
  border-color: var(--campo-line);
  color: var(--ink);
}

body.noche input::placeholder,
body.noche textarea::placeholder { color: #8f8878; }

body.noche input:focus-visible,
body.noche select:focus-visible,
body.noche textarea:focus-visible { border-color: var(--luz); outline-color: var(--luz); }

/* El selector de fecha nativo dibuja su icono en negro: sobre un campo
   oscuro desaparece. Se invierte solo el icono, no el campo. */
body.noche input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
}

/* La llave elegida se ENCIENDE, como una ventana. Es la única animación que
   se ata a la foto sin fingir coordenadas: la llave es la luz. */
body.noche .keytag {
  border-color: #6b5428;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  transition: box-shadow 240ms ease, filter 240ms ease;
}

body.noche .keytag::before { background: var(--limewash); }

body.noche .keytag.is-on,
body.noche .keytag[aria-pressed="true"] {
  background: var(--luz);
  color: #241a09;
  border-color: var(--luz);
  filter: brightness(1.04);
  box-shadow:
    0 0 0 1px rgba(216, 192, 144, 0.6),
    0 0 18px rgba(216, 192, 144, 0.45),
    0 0 44px rgba(216, 192, 144, 0.22);
}

body.noche .aviso.mal { background: #2a1512; }
body.noche .banner { background: #2a1512; border-color: var(--error); }
body.noche .submit { background: var(--lagoon); color: #06231f; }
body.noche .ghost { border-color: var(--line); color: var(--ink); }
body.noche table.historico th { color: var(--shade); }
body.noche .sin-valor { color: var(--luz); }

/* Quien pide menos movimiento no recibe el encendido ni el brillo: ve la
   fachada ya iluminada, que es el estado final. */
@media (prefers-reduced-motion: reduce) {
  .fachada img { animation: none; }
  body.noche .keytag { transition: none; }
}

@media (min-width: 640px) {
  .fachada { min-height: 40vh; }
}

/* --- correcciones tras verlo en pantalla ------------------------------------
   1. La llave es un objeto CLARO: su número se queda oscuro. Al redefinir
      --ink para la noche, el número lo heredó y quedó claro sobre latón
      (contraste 1.9 frente al 6.22 que se había medido). El control principal
      de la ficha dejó de ser legible.
   2. El lienzo lo pinta <html>, y ahí seguía el fondo pálido: la página oscura
      salía con un marco claro alrededor porque el body solo mide 44rem.
   3. La foto es vertical y la banda es ancha y baja: recortaba el edificio y
      solo se veían palmeras. Más alto en escritorio y encuadre más arriba,
      donde están las ventanas encendidas.
   --------------------------------------------------------------------------- */
body.noche .keytag { color: #1e2a26; }
body.noche .keytag span { color: inherit; }

html:has(body.noche) { background: #0d0f0d; }

.fachada { min-height: 58vh; }
.fachada img { object-position: center 30%; }

@media (min-width: 640px) {
  .fachada { min-height: 62vh; }
  .fachada img { object-position: center 34%; }
}

/* --- dos columnas en escritorio --------------------------------------------
   La foto es VERTICAL (726x1020) y la franja de cabecera es ancha y baja: con
   object-fit: cover solo se veia una tajada del 20% de la altura, y cualquier
   tajada pierde el edificio. Se veian palmeras, no una casa de tres pisos.
   Ademas el escritorio era un movil estirado: una columna estrecha flotando
   en vacio.
   Las dos cosas se arreglan igual. La foto pasa a ser una columna alta a la
   izquierda, donde su proporcion vertical cabe entera, y el formulario ocupa
   la derecha. En movil se apila y la franja se queda como estaba, porque ahi
   la pantalla YA es vertical y la foto encaja.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  body.noche {
    max-width: none;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(20rem, 1fr) minmax(0, 42rem);
    gap: 0;
    align-items: start;
  }

  body.noche .fachada {
    margin: 0;
    min-height: 100vh;
    /* Se queda quieta mientras el formulario baja: el sitio no se va. */
    position: sticky;
    top: 0;
    align-self: start;
  }

  /* En columna alta ya no hace falta desvanecer hacia abajo: el degradado
     solo tiene que asegurar que el nombre se lea sobre lo que haya detras. */
  body.noche .fachada::after {
    background: linear-gradient(
      to bottom,
      rgba(13, 15, 13, 0.1) 0%,
      rgba(13, 15, 13, 0.1) 45%,
      rgba(13, 15, 13, 0.82) 90%,
      rgba(13, 15, 13, 0.94) 100%
    );
  }

  body.noche .fachada img { object-position: center 45%; }

  body.noche main {
    padding: 3.5rem 3rem 4rem;
    max-width: 42rem;
  }

  body.noche h1 { font-size: 2.6rem; }
}

/* Muy ancho: la foto no se estira sin limite, se queda en su sitio y el
   formulario se centra en lo que sobra. */
@media (min-width: 1500px) {
  body.noche { grid-template-columns: minmax(20rem, 34rem) minmax(0, 1fr); }
  body.noche main { margin: 0 auto; }
}

/* --- la cabecera sobre la foto ---------------------------------------------
   "Casa Palmera" parte en dos lineas en la columna de la foto y el conmutador
   de idioma se le montaba al lado, apretado y en un sitio que no significa
   nada. Dos lineas con interlineado corto se leen como decision editorial; el
   idioma se va arriba a la derecha, que es donde se busca.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  body.noche .fachada .masthead {
    display: block;
    padding: 2.2rem 2.4rem 2.6rem;
  }

  body.noche .fachada h1 {
    line-height: 0.92;
    letter-spacing: -0.04em;
    max-width: 11em;
  }

  body.noche .fachada .place {
    margin-bottom: 0.5rem;
    letter-spacing: 0.18em;
  }

  body.noche .fachada .idiomas {
    position: absolute;
    top: 1.8rem;
    right: 2.4rem;
    z-index: 2;
    /* Sobre la foto hay zonas claras y oscuras: una pastilla translucida
       garantiza que se lea en las dos sin taparle el edificio. */
    background: rgba(13, 15, 13, 0.62);
    backdrop-filter: blur(6px);
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
  }

  body.noche .fachada .idiomas a { color: #d9d3c6; }
  body.noche .fachada .idiomas a.is-on { color: #fff; }
}

/* El .masthead es position: relative, asi que el conmutador se posicionaba
   respecto a EL —que vive abajo— y no respecto a la foto. Soltarlo. */
@media (min-width: 900px) {
  body.noche .fachada .masthead { position: static; }
}

/* ===========================================================================
   JERARQUÍA Y ORIENTACIÓN
   ---------------------------------------------------------------------------
   El problema no era que faltara decoración: era que ninguna pantalla decía
   qué hacer ni por dónde empezar. Todo pesaba igual —mismo tamaño, mismo
   color, misma caja— así que la vista no tenía dónde aterrizar. Y el texto
   estaba escrito para quien ya entiende el sistema: explicaba consecuencias
   ("TRA no permite corregir") en vez de dar instrucciones.

   Quien llena esto es un desconocido que abrió un enlace por WhatsApp, de pie,
   con una mano. Necesita tres cosas: cuántos pasos son, en cuál está, y si
   algo es obligatorio.
   =========================================================================== */

/* Los pasos, numerados. Un formulario largo sin números se siente infinito;
   con "Paso 2" se sabe que queda uno. */
.paso-num {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.15rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.paso-num span { color: var(--teak); }

.requerido {
  font-style: normal;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--shade);
}

body.noche .paso-num span { color: var(--luz); }
body.noche .requerido { border-color: var(--line); color: var(--shade); }

/* La sección en la que se está gana un filo de color a la izquierda. Es la
   única señal de "aquí" que tiene la página. */
.paso { border-left: 3px solid var(--line); }
.paso:focus-within { border-left-color: var(--lagoon); }

.una-ficha { margin-top: -0.5rem; }

/* Confirmación de la llave elegida, en palabras y no solo en color. */
.elegido {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  color: var(--shade);
}

.elegido strong {
  font-family: "Instrument Sans", "Segoe UI", sans-serif;
  font-size: 1.1rem;
  color: var(--ink);
}

body.noche .elegido strong { color: var(--luz); }

/* La ayuda. Plegada: quien sabe qué hacer no la ve; quien duda la encuentra
   al final, sin que compita con el formulario. */
.ayuda {
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.ayuda summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--lagoon);
  padding: 0.4rem 0;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

.ayuda dl { margin: 0.6rem 0 0; }
.ayuda dt { font-weight: 600; margin-top: 1.1rem; }
.ayuda dd { margin: 0.3rem 0 0; color: var(--shade); }

/* La sección de fechas ES la rejilla, así que el encabezado del paso se
   convirtió en columnas al lado de los campos: "PASO 2", "Tus fechas" y la
   ayuda quedaron en tres columnas. El encabezado ocupa el ancho completo. */
.panel.dates .paso-num,
.panel.dates > h2,
.panel.dates > .hint { grid-column: 1 / -1; }

/* --- el panel de recepción: orientación y jerarquía ------------------------
   Los contadores (0 nuevas / 50 históricas / 3 con SIRE incompletos) eran la
   letra MÁS PEQUEÑA de la pantalla siendo el dato más importante, mientras
   "Enlace de la ficha" ocupaba la caja más grande. Y ninguna pantalla decía
   qué es ni qué hacer: el texto explicaba reglas del sistema, no el trabajo
   de la persona.
   --------------------------------------------------------------------------- */
.orienta { background: var(--paper); border-left: 3px solid var(--lagoon); }

.comofunciona {
  margin: 0.6rem 0 0.9rem;
  padding-left: 1.4rem;
  line-height: 1.55;
}

.comofunciona li { margin-bottom: 0.55rem; }
.comofunciona li::marker { color: var(--lagoon); font-weight: 700; }

/* Los contadores pasan a ser el ancla visual de la pantalla. */
.stats-grandes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.4rem 0 1.6rem;
  padding: 0;
}

.stats-grandes span {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 9rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.9rem;
}

.stats-grandes strong {
  font-family: "Instrument Sans", "Segoe UI", sans-serif;
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.stats-grandes em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--shade);
}

/* Si hay fichas por confirmar, ese número es lo único que reclama atención en
   la pantalla. Con cero, no grita: no hay nada que hacer. */
.stat-activo { border-color: var(--lagoon); border-width: 2px; }
.stat-activo strong { color: var(--lagoon); }

.h2-nota {
  font-family: "Instrument Sans", "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--shade);
}

/* "Salir" pesaba igual que las tres acciones útiles de la cabecera. Se queda
   accesible pero deja de competir: nadie entra al panel para salirse. */
.masthead form .ghost {
  border-color: transparent;
  color: var(--shade);
}

.masthead form .ghost:hover { border-color: var(--line); }

/* Los contadores desbordaban la pantalla: flex: 1 1 9rem sin min-width no
   deja encogerse a una caja con etiqueta larga, así que la tercera se salía
   por la derecha. Es justo el scroll horizontal que no debe existir. */
.stats-grandes span { min-width: 0; }
.stats-grandes span > :not(strong) { overflow-wrap: anywhere; }

/* La única letra de exhibición del proyecto: el nombre de la casa sobre la
   fachada. Una serif de alto contraste ahí se lee como el letrero de un
   establecimiento, que es literalmente lo que es. No aparece en ningún otro
   sitio, y NUNCA en el panel: eso es una herramienta de trabajo. */
.fachada h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

@media (min-width: 900px) {
  body.noche .fachada h1 { font-size: 3.6rem; line-height: 0.98; }
}

/* El bloque que responde "qué es esto" en cada pantalla del panel. Filo en
   lagoon porque es orientación, no advertencia; las advertencias van en teak
   o en error y no deben competir con esto. */
body.wide .orienta { border-left: 3px solid var(--lagoon); }
body.wide .orienta p { margin: 0.5rem 0 0; }

/* El estado actual, que es lo que ella viene a comprobar. */
.destacado { border-left: 3px solid var(--teak); }
.destacado .frase-reparto { margin: 0.4rem 0 0; font-size: 1.05rem; }

/* --- la pantalla de "listo" ------------------------------------------------
   Era la única sin nada del sitio, y es lo último que ve el huésped. La foto de
   la puerta con su número y la luz encendida cierra el gesto: acaba de elegir
   su llave y ve la puerta que le corresponde.
   --------------------------------------------------------------------------- */
.fachada.puerta { min-height: 42vh; }
.fachada.puerta img { object-position: center 42%; }

body.listo main.done { padding-top: 0.5rem; }

.done .recibo { margin-top: -2.6rem; position: relative; z-index: 2; }

.que-sigue {
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--shade);
}

.gracias {
  margin: 1.6rem 0 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.5rem;
  color: var(--luz);
}

/* Enlace discreto, no botón: la mayoría termina aquí. Un botón grande invita a
   rellenar otra ficha sin querer, y eso son datos de una estadía que no existe. */
.volver {
  display: inline-block;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--shade);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 2.75rem;
  line-height: 2.75rem;
}

@media (min-width: 900px) {
  body.listo { grid-template-columns: minmax(18rem, 1fr) minmax(0, 34rem); }
  .fachada.puerta { min-height: 100vh; }
}

/* [hidden] es solo `display:none` de la hoja del navegador, asi que CUALQUIER
   regla propia con `display` le gana por especificidad. `.sire { display: grid }`
   estaba anulando el hidden del fieldset, y a todo colombiano se le pedian fecha
   de nacimiento, pais de procedencia y pais de destino: tres datos que solo
   Migracion necesita y solo de extranjeros.
   Esta regla lo cierra para todo el formulario, no solo para .sire: el mismo
   fallo estaba a una linea de repetirse en cualquier bloque que se oculte. */
[hidden] { display: none !important; }

/* Ejemplo de cómo fotografiar el documento. Solo se ve el de la rama elegida
   (cédula para colombiano, pasaporte para extranjero). La imagen es un ejemplo
   genérico, no la del huésped. */
.foto-ejemplo { margin: 0 0 1rem; }
.foto-ejemplo img {
  display: block; width: 100%; max-width: 22rem;
  border-radius: 10px; border: 1px solid var(--line);
}
.foto-ejemplo figcaption {
  margin-top: 0.5rem; font-size: 0.9rem; color: var(--shade);
  max-width: 24rem; line-height: 1.45;
}
.foto-ejemplo figcaption strong { color: var(--ink); display: block; }
body.noche .foto-ejemplo figcaption strong { color: var(--luz); }

/* --- diagrama de qué fotografiar, dibujado en el estilo de la ficha ---------
   No es foto: no hay persona, no hay dato real, y encaja con el ámbar del
   llavero. El documento en trazo tenue y la ZONA que importa —código de barras
   de la cédula, líneas MRZ del pasaporte— resaltada en ámbar. */
.doc-guia { margin: 0 0 1rem; max-width: 22rem; }
.doc-guia svg { width: 100%; height: auto; display: block; }
.doc-cuerpo { fill: var(--campo); stroke: var(--campo-line); stroke-width: 2; }
.doc-rotulo {
  fill: var(--shade); font-family: "Instrument Sans", sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em;
}
.doc-lineas rect { fill: var(--campo-line); opacity: 0.55; }
/* la zona a fotografiar: marco ámbar, tenue relleno */
.doc-zona rect { fill: rgba(216,192,144,0.12); stroke: var(--luz); stroke-width: 2.5; }
.doc-qr rect { fill: var(--luz); }
.doc-mrz {
  fill: var(--luz); font-family: ui-monospace, "Courier New", monospace;
  font-size: 11px; letter-spacing: 1px;
}
.doc-guia figcaption {
  margin-top: 0.5rem; font-size: 0.9rem; color: var(--shade);
  max-width: 24rem; line-height: 1.45;
}
.doc-guia figcaption strong { color: var(--luz); display: block; }

/* ------------------------------------------------------------------
   Selector de la foto del enlace (panel → establecimientos).

   El radio se esconde a la vista pero NO a la accesibilidad: sigue en el
   orden de tabulación y el lector de pantalla lo anuncia como opción. Se
   esconde con clip y no con display:none ni [hidden], que lo sacarían del
   teclado. Y hay que pisar a propósito la regla general `input` de arriba
   (width 100%, min-height 2.75rem, borde): sin esto cada radio ocupaba una
   fila entera encima de su miniatura.
   ------------------------------------------------------------------ */
.fondo-form { display: grid; gap: 0.9rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.fondo-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.5rem; }
.fondo-form legend { font-weight: 600; color: var(--ink); padding: 0; margin-bottom: 0.2rem; }
.fondo-form .submit { justify-self: start; }

.fondo-tema {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shade);
}

/* auto-fill con mínimo de 132px: a 360px de ancho caben dos por fila sin
   desbordar, y en escritorio se acomodan las que quepan. */
.fondos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.6rem;
}

.fondo-opt {
  position: relative;
  gap: 0.35rem;
  cursor: pointer;
  min-width: 0;
}

.fondo-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.fondo-mini {
  display: block;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  border: 2px solid transparent;
  outline: 1px solid var(--line);
  background-color: var(--ink);
}

.fondo-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La fachada es vertical: se encuadra por arriba, donde está la casa. */
.fondo-mini--defecto img { object-position: center 30%; }

.fondo-nombre {
  font-size: 0.8rem;
  color: var(--shade);
  overflow-wrap: anywhere;
}

/* Elegida: borde grueso + marca, no solo color, para que se distinga sin
   depender de ver bien el verde. */
.fondo-opt input:checked + .fondo-mini {
  border-color: var(--lagoon);
  outline: 2px solid var(--lagoon);
  outline-offset: 1px;
}
.fondo-opt input:checked ~ .fondo-nombre { color: var(--ink); font-weight: 600; }
.fondo-opt input:checked ~ .fondo-nombre::before { content: "✓ "; color: var(--lagoon); }

/* El foco va sobre la miniatura, que es lo que se ve; el radio es invisible. */
.fondo-opt input:focus { outline: none; }
.fondo-opt input:focus-visible + .fondo-mini {
  outline: 3px solid var(--lagoon);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .fondo-mini { transition: border-color 120ms ease, outline-color 120ms ease; }
}