/* Casita Carbón — la identidad sale de sus fotos de Instagram: una caja negra de chapa
   asomada sobre una base de piedra, madera clara adentro, el monte y el lago. No hay logotipo
   (el avatar es una foto de la casita), asi que el nombre va escrito en serif. La web es clara
   y aireada; el carbon de la casita manda y la madera acompaña.
   FUNCIONALIDAD: inmobiliario/casitacarbon_web */

:root{
  --fondo:#f4f1eb; --papel:#fdfbf7; --papel2:#ede8df; --linea:#dfd8cc;
  --tinta:#1f1e1b; --gris:#6f6b64; --gris2:#4a4741;
  --carbon:#2b2a27; --carbon2:#111110; --carbon-suave:#e7e3db;
  --madera:#a87a4f; --madera2:#86603a; --verde:#25d366; --rojo:#c0524a;
  --radio:16px; --ancho:1080px;
  --fuente:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* Una sola tipografía, también en los títulos: la de Ingresar, que es la que le gustó a
     Lucas (Nahuel, 16/09: "los títulos también"). La serif se fue; --display queda como nombre
     para no tocar cada regla, pero es la misma Inter. */
  --display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--fuente);
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--madera2);text-decoration:none}
img{max-width:100%}

/* ── barra ── */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:50;height:64px;display:flex;align-items:center;
  gap:8px;padding:0 22px 0 max(12px, env(safe-area-inset-left,0px));
  background:transparent;border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
/* LA BARRA FLOTA SOBRE LA FOTO (Lucas, reunión del 15/09/2026: "esto que está acá arriba lo
   sacamos; Ingresar queda disimulado dentro de la foto de portada"). Al abrir no hay franja ni
   logotipo ni nombre —la portada ya lo dice—: sólo Ingresar (o el rol y el ☰), en blanco, en la
   esquina. Con la página destapada y al bajar, la barra se vuelve sólida para que se lean
   Ingresar, el rol y el ☰ sobre fondo claro. La clase `solida` la pone app.js con el scroll. */
/* El logotipo con el nombre no va más en la barra (Nahuel, 16/09: "esa parte desaparece"):
   la portada ya dice Casita Carbón. Queda en el HTML por la norma de marca, sin dibujarse. */
.barra .marca{display:none}
.barra:not(.solida) .enlace,.barra:not(.solida) .enlace.entrar,.barra:not(.solida) .volver-entrada,.barra:not(.solida) .quien,
.barra:not(.solida) .hamburguesa{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.barra:not(.solida) .enlace:hover,.barra:not(.solida) .enlace.entrar:hover{color:#fff}
.barra.solida{background:rgba(246,242,234,.86);backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom-color:var(--linea)}
/* EL ☰ Y EL ISOTIPO, JUNTOS Y A LA IZQUIERDA (Nahuel, 07/09: "el isotipo debe estar a la
   izquierda, no debe haber aires" · "que estén más pegados entre sí, están muy separados").
   La barra repartía con `space-between` y tres piezas, así que TODO el espacio sobrante caía
   justo entre el ☰ y el logo. Y cuando el texto del teléfono es grande pasa lo contrario: el
   grupo de la derecha crece, empuja al logo hacia la izquierda y lo termina montando encima
   del ☰, que queda tapado y sin poder tocarse.

   Ahora el sobrante va a un solo lugar —después del logo— y lo que cede cuando no entra es la
   lista de enlaces, nunca el ☰ ni el logo. */
/* 15/09: el ☰ pasa a la derecha, después del rol (Nahuel). El sobrante sigue después del logo. */
.barra > .hamburguesa{flex:0 0 auto;margin-left:2px;margin-right:-8px}
.barra > .marca{flex:0 0 auto;margin-right:auto}
/* Sin el logotipo a la izquierda, el grupo de la derecha se empuja solo (margin-left auto). */
.barra > .barra-der{flex:0 1 auto;min-width:0;overflow:hidden;justify-content:flex-end;margin-left:auto}
.barra > .barra-der > *{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){ .barra > .barra-der{gap:11px} }
.marca{display:flex;align-items:center;gap:10px;height:100%;color:var(--tinta)}
.marca img{height:34px;width:34px;border-radius:50%;display:block;object-fit:cover}
.marca-nombre{font-family:var(--display);font-size:18px;font-weight:500;letter-spacing:0;white-space:nowrap}
.barra-der{display:flex;gap:18px;align-items:center}
.enlace{background:none;border:0;padding:0;font-size:12.5px;color:var(--gris2);cursor:pointer;
  letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.enlace:hover{color:var(--carbon2)}
.quien{color:var(--carbon2);cursor:default;text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;gap:6px}
.quien .ico-np{width:18px;height:18px}
/* Ingresar, sutil: un enlace con su dibujo, sin caja (Nahuel, 15/09). */
.barra .enlace.entrar{display:inline-flex;align-items:center;gap:6px;color:var(--gris2);font-weight:500}
.barra .enlace.entrar .ico-np{width:17px;height:17px}
.barra .enlace.entrar:hover{color:var(--carbon2)}
.hamburguesa .ico-np{width:26px;height:26px;stroke-width:2}

/* El cartel de la vista previa (dictamen 02/09) también va sobre la foto, debajo de la barra,
   y se va con el scroll: la entrada sigue siendo una foto entera. */
/* A la altura de Ingresar, a la izquierda, sin franja (Nahuel, 16/09): un renglón discreto
   que no se cruza con el nombre de la casita. */
.aviso{
  position:absolute;top:0;left:max(14px, env(safe-area-inset-left,0px));right:150px;height:64px;z-index:49;
  display:flex;align-items:center;color:rgba(243,234,214,.85);font-size:11px;line-height:1.3;text-align:left;
  text-shadow:0 1px 3px rgba(0,0,0,.6);transition:opacity .7s ease;
}
.aviso.se-va{opacity:0;pointer-events:none}

/* LA ENTRADA ES SÓLO LAS DOS FOTOS. El resto de la página está, pero no se ve ni se puede
   bajar hasta ahí: aparece cuando el huésped toca Info o Reservar (Nahuel, 16/09/2026: "no
   quería un scrolleo interminable en el primer impacto; más bien opciones resumidas"). */
body.entrada main,body.entrada .cierre,body.entrada footer{display:none}
/* LAS VENTANAS. Info, Reservar o la obra no estiran la entrada: la reemplazan. Con
   body[data-vista] las fotos se van, queda la ventana elegida —sólo sus secciones— con la barra
   sólida y Volver (Nahuel, 16/09: "no es parte de la misma pantalla"). */
body[data-vista] .portada,body[data-vista] .firulete{display:none}
body[data-vista="casita"] main>section:not([data-vista~="casita"]),
body[data-vista="reservar"] main>section:not([data-vista~="reservar"]),
body[data-vista="obra"] main>section:not([data-vista~="obra"]){display:none}
body[data-vista] main{padding-top:64px}
body[data-vista] .seccion:first-of-type{padding-top:28px}
.barra .volver-entrada{display:inline-flex;align-items:center;gap:4px;margin-right:auto;text-transform:none;letter-spacing:0;font-size:14px}
.barra .volver-entrada .ico-np{width:20px;height:20px}
/* Con sesión, el hueco para la barra de abajo se saca en la entrada: si no, la página mide dos
   fotos y 64 px más, y se puede seguir bajando (lo vio la prueba V15). */
body.entrada.con-barra{padding-bottom:0}
/* Y se ve una foto por vez: al deslizar, la página encaja en una u otra, con su nombre y sus
   botones enteros; nunca queda a mitad de camino (Nahuel, 16/09). Sólo en la entrada: con
   la página destapada el scroll corre libre. */
html:has(body.entrada){scroll-snap-type:y mandatory}
body.entrada .portada{scroll-snap-align:start;scroll-snap-stop:always}

/* ── portada ── */
/* El texto va arriba, sobre el cielo: la casita queda en la mitad de abajo de la foto. */
/* Menos cielo arriba y los botones abajo, debajo de la casita (Nahuel, 15/09): la foto se
   encuadra más abajo y el texto ocupa la portada entera, nombre arriba y botones al pie. */
/* Las dos pantallas de la entrada ocupan lo que queda de la ventana (--alto-portada, lo pone
   app.js) y encajan al deslizar; de ahí para abajo la página corre normal. */
.portada{position:relative;height:var(--alto-portada,82vh);min-height:420px;display:grid;place-items:stretch center;overflow:hidden;
  background:#2b3d42}
/* La unión entre las dos fotos: sin línea; la primera se apaga hacia abajo y la segunda
   amanece desde lo oscuro, así el pase es un fundido y no un corte (Nahuel, 16/09). Y arriba
   de la segunda, un firulete fino —dos hilos y una hoja—, como abre capítulo un libro. */
/* Justo en la división de las dos fotos, mitad en cada una (Nahuel, 16/09): por eso la
   pantalla de la obra no recorta lo que asoma (overflow visible; nada más se sale de ella). */
.portada-obra{overflow:visible}
.firulete{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;
  transform:translateY(-50%);color:rgba(240,228,204,.85);pointer-events:none}
.firulete span{height:1px;width:clamp(40px,14vw,110px);
  background:linear-gradient(90deg,transparent,currentColor)}
.firulete span:last-child{background:linear-gradient(90deg,currentColor,transparent)}
.firulete svg{width:44px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:.9;stroke-linecap:round}
.portada-obra .portada-velo{
  background:linear-gradient(180deg,rgba(20,24,28,.92) 0%,rgba(20,24,28,.38) 18%,rgba(20,24,28,.45) 55%,rgba(20,24,28,.78) 100%)}
.portada-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 68%}
/* El cielo de la foto es claro justo donde cae el nombre: el velo se oscurece en el medio y
   detras del texto hay un halo, si no las letras blancas se pierden (Nahuel, 02/09, en el celular). */
.portada-velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,24,28,.40) 0%,rgba(20,24,28,.50) 45%,rgba(20,24,28,.74) 86%,rgba(20,24,28,.92) 100%)}
.portada-texto::before{content:"";position:absolute;inset:-40px -10vw;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(15,18,22,.55) 0%,rgba(15,18,22,.30) 45%,rgba(15,18,22,0) 72%)}
/* El nombre baja del borde: arranca a un quinto de la pantalla, no pegado a Ingresar (Nahuel, 16/09). */
.portada-texto{position:relative;text-align:center;padding:clamp(84px,15vh,160px) 22px calc(28px + env(safe-area-inset-bottom,0px));color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;width:100%;max-width:var(--ancho)}
.portada-texto::before{inset:-20px -10vw auto;height:52%}
.lapiz-linea .ico-np{fill:none}
/* El lápiz de la portada va arriba a la IZQUIERDA. A la derecha, debajo de la barra, quedaba
   en la misma columna que el ☰ y el rol: dos redondeles pegados uno encima del otro (Nahuel,
   30/10/2026: "se pisa el botón editar con el menú hamburguesa"). A la izquierda, en la
   entrada, no hay nada —el Volver sólo existe con la página destapada, y ahí no hay portada—. */
.portada .lapiz{bottom:auto;top:76px;right:auto;left:16px}
.lema .lapiz-linea{margin-left:8px;color:#fff;border-color:rgba(255,255,255,.5)}
.subtitulo .lapiz-linea,.display .lapiz-linea{margin-left:10px;vertical-align:middle}
#m-categoria-campo .lapiz-linea{margin-left:8px;width:26px;height:26px;vertical-align:middle}
.portada-nombre{font-family:var(--display);font-size:clamp(34px,6.5vw,64px);font-weight:500;
  line-height:1.05;margin:0 0 14px;color:#fff;letter-spacing:-.01em;
  text-shadow:0 2px 6px rgba(0,0,0,.7),0 8px 34px rgba(0,0,0,.6)}
.lema{font-family:var(--display);font-size:clamp(17px,2.4vw,24px);font-weight:400;
  color:#f7f3ea;margin:0 auto 28px;max-width:26em;letter-spacing:.01em;
  text-shadow:0 1px 4px rgba(0,0,0,.75),0 4px 20px rgba(0,0,0,.6)}
/* Los logotipos sobre las fotos: el de la casita más angosto (dos renglones), el de la familia
   más ancho (lleva el "Construí con nosotros"). Sombra suave para despegarlos del cielo. */
.portada-logo{display:block;margin:0 auto;width:min(62vw,300px);height:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 8px 30px rgba(0,0,0,.45))}
.portada-logo.obra{width:min(78vw,420px)}
/* En la foto de la obra el logotipo sube, para no tapar la casa (Nahuel, 16/09). */
.portada-obra .portada-texto{padding-top:clamp(64px,11vh,120px)}
/* Los botones van abajo del todo, no en el medio: la portada-texto reparte el alto entre
   sus tres hijos y los dejaba justo sobre la casita, tapandola (Nahuel, 30/10/2026). */
.portada-botones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:auto}
/* El sello de versión de la entrada. 9 px y translúcido: está para consultarlo, no para verlo
   (Nahuel, 29/09). Sobre la foto va en blanco, que es lo único que se lee ahí. */
.portada-version{margin:8px 0 0;font-size:9px;font-weight:400;letter-spacing:.04em;
  color:#fff;opacity:.35;text-align:center}
/* El mismo sello al pie, debajo de la firma: ahí lo busca quien ya bajó hasta el final. */
.pie-version{margin:18px 0 6px;font-size:10px;letter-spacing:.04em;color:var(--gris);opacity:.65}
.portada-botones .boton{margin-top:0;min-width:150px}
.lema{margin-bottom:0}

.res-aviso{margin:10px 0 0;font-size:13px;color:var(--gris2);text-align:center}

/* La planilla de gastos de Balances: la fecha adelante, el detalle en gris (Lucas, 22/09). */
.gasto-detalle .fecha-gasto{flex:0 0 auto;color:var(--gris);font-size:12.5px;min-width:70px}
.gasto-detalle .nombre em{font-style:normal;color:var(--gris)}

/* El mes que agrupa las filas del panel (Lucas, 22/09). */
.mes-rotulo{margin:16px 0 6px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.mes-rotulo:first-child{margin-top:4px}

/* ── layout ── */
main{max-width:var(--ancho);margin:0 auto;padding:0 22px 40px}
/* `scroll-margin-top`: la barra de arriba flota y mide 64 px; sin esto, al saltar a una
   sección su título queda debajo de ella (30/10/2026). */
.seccion{padding:72px 0 8px;scroll-margin-top:68px}
.titulo{
  font-family:var(--display);font-size:clamp(26px,3.4vw,34px);font-weight:500;letter-spacing:-.01em;
  color:var(--tinta);text-align:center;margin:0 0 14px;line-height:1.1;
}
.titulo::after{content:"";display:block;width:44px;height:2px;background:var(--carbon);margin:14px auto 0;
  border-radius:2px}
.display{font-family:var(--display);font-size:26px;font-weight:500;margin:0 0 8px;line-height:1.15;letter-spacing:-.01em}
.subtitulo{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--carbon2);
  font-weight:600;margin:34px 0 12px}
.sub{color:var(--gris);font-size:15px;margin:0 0 22px}
.centrado{text-align:center;max-width:36em;margin-left:auto;margin-right:auto}
.nota{font-size:12.5px;color:var(--gris);margin:14px 0 0}
.error{color:var(--rojo);font-size:13px;margin:10px 0 0}
.opcional,.obligatorio{color:var(--gris);font-weight:400}

/* ── galería ── */
.galeria{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.galeria figure{margin:0;overflow:hidden;border-radius:var(--radio);cursor:pointer;
  background:var(--papel2);aspect-ratio:3/4;box-shadow:0 1px 2px rgba(31,42,45,.06)}
.galeria img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.galeria figure:hover img{transform:scale(1.05)}

/* ── calendario ── */
.referencias{display:flex;gap:20px;justify-content:center;font-size:12px;color:var(--gris2);
  margin:0 0 22px;flex-wrap:wrap}
.referencias span{display:inline-flex;align-items:center;gap:7px}
/* LOS COLORES DE CADA ESTADO SE DEFINEN UNA SOLA VEZ, ACÁ, y los usan el día del calendario y
   la pastilla de la leyenda. Antes cada uno tenía su propio hexadecimal y la leyenda mostraba
   un tono y el calendario otro (Nahuel lo vio el 15/09/2026: "los colores de arriba no
   coinciden con los de abajo"). */
:root{
  --est-libre:var(--papel);        --est-libre-borde:var(--linea);
  --est-pendiente:#fbf1d9;         --est-pendiente-borde:#eedcae;    --est-pendiente-texto:#7a5c12;
  --est-tomada:#dcc2b3;            --est-tomada-borde:#caa995;       --est-tomada-texto:#6c4f3f;
  --est-cerrada:#e9d9cf;           --est-cerrada-borde:#dcc8bb;      --est-cerrada-texto:#9a8478;
  --est-estadia:var(--carbon);
}
.pastilla{width:13px;height:13px;border-radius:5px;display:inline-block}
.pastilla.libre{background:var(--est-libre);border:1px solid var(--est-libre-borde)}
.pastilla.tomada{background:var(--est-tomada);border:1px solid var(--est-tomada-borde)}
.pastilla.cerrada{background:var(--est-cerrada);border:1px solid var(--est-cerrada-borde)}
.pastilla.elegida{background:var(--est-estadia)}

.calendario-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:16px}
#mes-rotulo{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris2);
  min-width:12em;text-align:center;font-weight:500}
.flecha{
  background:var(--papel);border:1px solid var(--linea);color:var(--tinta);
  width:34px;height:34px;border-radius:50%;font-size:19px;line-height:1;cursor:pointer;
}
.flecha:hover:not(:disabled){border-color:var(--carbon);color:var(--carbon2)}
.flecha:disabled{opacity:.3;cursor:default}

.meses{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.mes h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris2);
  text-align:center;font-weight:600;margin:0 0 12px}
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dia-rotulo{font-size:10px;color:var(--gris);text-align:center;padding-bottom:6px;
  letter-spacing:.08em;text-transform:uppercase}
.dia{
  aspect-ratio:1;border:1px solid var(--linea);background:var(--papel);border-radius:9px;
  font-size:13px;color:var(--tinta);cursor:pointer;padding:0;display:grid;place-items:center;
  transition:background .15s,border-color .15s;
}
.dia:hover:not(:disabled){border-color:var(--carbon)}
.dia.vacio{border:0;background:none;cursor:default}
/* Para el huésped, tomada es tomada: un solo tono. El tono más claro de las noches que cerró
   el dueño lo ve sólo el dueño (body.con-sesion), con su leyenda (Nahuel, 15/09). */
.dia.tomada,.dia.pasada{background:var(--est-tomada);color:var(--est-tomada-texto);cursor:not-allowed;border-color:var(--est-tomada-borde)}
/* La noche que cerró el dueño: fondo claro y BORDE PUNTEADO. Hasta el 30/10/2026 era un rosa
   apenas más claro que el de una noche reservada y, en el teléfono, se confundían (Nahuel:
   "el color es muy parecido"). El punteado también lo usa `.dia.cambio` —lo que todavía no se
   guardó—, pero ése es carbón, más grueso y lleva un puntito arriba; va después en esta hoja,
   así que pisa a éste. */
body.con-sesion .dia.tomada:not(.confirmada){background:var(--papel);color:var(--est-cerrada-texto);
  border:1px dashed var(--est-tomada-borde)}
body.con-sesion .pastilla.cerrada{background:var(--papel);border:1px dashed var(--est-tomada-borde)}
.dia.pasada{background:#ece8e0;color:#b5b0a6;border-color:#e4dfd5}
.dia.confirmada{background:var(--est-tomada);border-color:var(--est-tomada-borde);color:var(--est-tomada-texto)}
/* Pendiente: alguien la pidio y falta la seña. Se ve, pero sigue libre (Lucas, 11/09/2026). */
.dia.pendiente{background:var(--est-pendiente);border-color:var(--est-pendiente-borde);color:var(--est-pendiente-texto)}
.pastilla.pendiente{background:var(--est-pendiente);border:1px solid var(--est-pendiente-borde)}
.reserva-fila .quienes .cobro{display:block;margin-top:3px;font-size:12.5px;color:var(--gris2)}
/* Lo que falta cobrar se lee de un vistazo, y cuando no falta nada lo dice con todas las
   letras (Nahuel, 30/10/2026: "cuando se completó el pago debe aparecer Pago completo"). */
.cobro .falta-plata{font-weight:600;color:#8a5a12}
.cobro .pago-completo{font-weight:600;color:#2f6b43}
/* El botón que cobra el saldo: no es gris como los demás, es la acción de esa fila. */
.boton.mini.cobrar{background:#fbf1d9;border:1px solid #e3cd93;color:#6b4f12;font-weight:600}
.boton.mini.cobrar:hover{background:#f7e9c8;border-color:#d9bd79}
.opciones-pago{display:flex;flex-direction:column;gap:10px;margin:8px 0 14px}
/* `.hoja label` pisa este display por venir después: se escribe con la hoja adelante. */
.hoja .opciones-pago label{display:flex;gap:10px;align-items:center;font-size:14.5px;cursor:pointer;margin-top:0;color:var(--tinta)}
.opciones-pago input[type=radio]{width:20px;height:20px;margin:0;accent-color:var(--carbon);flex:0 0 auto}
.hoja label.adjuntar{display:inline-flex;margin-top:14px;cursor:pointer;color:var(--carbon2);font-size:13.5px}
.hoja label.adjuntar .tenue{color:var(--gris);font-weight:400}
.opciones-pago input{margin-top:3px}
/* Marcado para cerrar o abrir, todavía sin guardar: borde carbón punteado y un puntito. */
.dia.cambio{border:2px dashed var(--carbon);position:relative}
.dia.cambio::after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--carbon)}
.dias-cambios{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:0 0 18px}
.dias-cambios .boton{width:auto;margin-top:0}
.dia.elegida{background:var(--est-estadia);color:#fff;border-color:var(--est-estadia);font-weight:600}
/* La estadía entera del color de la leyenda "Tu estadía", el carbón: el celeste era del molde
   (Nahuel, 15/09: "que coincidan los colores"). Entrada y salida llenas; las noches del medio,
   el mismo carbón aclarado. */
.dia.entre{background:var(--carbon-suave);border-color:#cfc9be;color:var(--carbon2)}
.dia.salida{background:var(--est-estadia);color:#fff;border-color:var(--est-estadia);font-weight:600}

/* El resumen de la estadía: una fila por dato, el campo a la izquierda y el valor a la
   derecha, como la cuenta de la hoja de reserva (Nahuel, 15/09: "primero el campo y a la
   derecha el valor, para que tenga una lógica visual"). */
.resumen{
  margin-top:26px;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:10px 20px 18px;display:flex;flex-direction:column;gap:0;max-width:520px;margin-left:auto;margin-right:auto;
  box-shadow:0 2px 10px rgba(31,42,45,.05);
}
.resumen > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--linea)}
.resumen > div:last-of-type{border-bottom:0}
.resumen-rotulo{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.resumen strong{font-size:17px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.resumen .boton{width:100%;margin-top:14px}

/* ── panel ── */
.reserva-fila{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:15px 18px;margin-bottom:10px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
.reserva-fila .quienes{flex:1 1 210px;min-width:0}
.reserva-fila .quienes strong{display:block;font-weight:500}
.reserva-fila .quienes span{font-size:12.5px;color:var(--gris)}
.reserva-fila .fechas{font-size:13.5px;color:var(--gris2);flex:0 0 auto}
.marca-estado{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;
  border-radius:999px;border:1px solid var(--linea);color:var(--gris2);
}
.marca-estado.RESERVADA{color:var(--madera2);border-color:#e3c7b6;background:#fbf0e8}
.marca-estado.CONFIRMADA{color:#2f7a4a;border-color:#bfe0c9;background:#eaf6ee}
.marca-estado.CANCELADA{color:#9a8478}
/* Dice más que antes ("CONFIRMADA · PAGO COMPLETO"): se le deja respirar y no se parte raro. */
.marca-estado{white-space:nowrap;flex:0 0 auto}
@media (max-width:620px){.marca-estado{white-space:normal;text-align:center}}
.vacio-lista{color:var(--gris);font-size:13.5px;padding:6px 0}
/* EL BUSCADOR de Datos de reserva (30/10/2026): un campo con su lupa y una × para limpiarlo. */
.buscador{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0 14px;
  background:var(--papel);border:1px solid var(--linea);border-radius:999px}
.buscador .ico-np{width:18px;height:18px;color:var(--gris);flex:0 0 auto}
.buscador input{flex:1 1 auto;min-width:0;border:0;background:none;padding:13px 0;font-size:15px;
  color:var(--tinta);font-family:inherit}
.buscador input:focus{outline:0}
.buscador input::-webkit-search-cancel-button{display:none}
.buscador button{flex:0 0 auto;border:0;background:none;color:var(--gris);font-size:20px;
  line-height:1;cursor:pointer;padding:4px 2px}
.buscador button:hover{color:var(--tinta)}
.buscador:focus-within{border-color:var(--carbon)}

/* Las listas desplegables de Datos de reserva: título con dibujo, cuenta y flecha que gira. */
.desplegable{border:1px solid var(--linea);border-radius:14px;background:var(--papel);margin:0 0 10px;overflow:hidden}
/* La flecha que despliega no va pegada al borde del recuadro: 22 px de aire a la derecha,
   como el redondeo (Nahuel, 30/10/2026: "la flecha que colapsa está muy pegada al contenedor"). */
.desplegable summary{display:flex;align-items:center;gap:10px;padding:14px 22px 14px 16px;cursor:pointer;list-style:none;font-weight:500;font-size:15px}
.desplegable summary::-webkit-details-marker{display:none}
.desplegable summary > span{flex:1 1 auto}
.desplegable summary b{font-weight:600;font-size:12px;background:var(--carbon-suave);border-radius:999px;padding:2px 9px;min-width:22px;text-align:center}
.desplegable summary b:empty{display:none}
.desplegable .desp-flecha{transition:transform .2s}
.desplegable[open] .desp-flecha{transform:rotate(90deg)}
.desplegable > div{padding:0 12px 12px}
#desp-pendientes summary b{background:#fbf1d9;color:#7a5c12}

/* ── botones ──
   UNA SOLA FAMILIA (Nahuel, 15/09: "que sean pro, intuitivos"): lleno para la acción principal,
   gris con borde para la secundaria, rojo para lo que deshace. Todos con su dibujo a la
   izquierda del texto, 48 px de alto los grandes, 40 los chicos. */
.boton{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;
  padding:12px 22px;border:0;border-radius:999px;cursor:pointer;font-family:inherit;
  background:var(--carbon);color:#fff;font-size:15px;font-weight:600;letter-spacing:.01em;
  margin-top:16px;text-align:center;text-decoration:none;
}
.boton .ico-np,.boton i[data-ico]{display:inline-flex;flex:0 0 auto}
.boton .ico-np{width:18px;height:18px}
i[data-ico]{display:inline-flex;align-items:center;line-height:0}
/* pantalla.css (núcleo) rellena el svg del lápiz viejo; los de Lucide son trazo, no relleno. */
.lapiz .ico-np,.lapiz-esquina .ico-np,.lapiz-linea .ico-np{fill:none}
.boton.peligro{background:var(--papel);color:var(--rojo);border:1px solid var(--rojo)}
.boton.peligro:hover{background:#fbeeed}
.boton:hover{background:var(--carbon2)}
.boton:disabled{opacity:.55;cursor:default}
.boton.claro{background:#fff;color:var(--carbon2);display:inline-flex;width:auto;padding:12px 30px;margin-top:0}
.boton.claro:hover{background:var(--carbon-suave)}
.boton.borde{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.85);
  display:inline-flex;width:auto;padding:11px 30px;margin-top:0}
.boton.borde:hover{background:rgba(255,255,255,.14)}
.boton.verde{background:var(--verde);color:#04310f}
.boton.verde:hover{background:#1fbf5a}
.boton.fino{width:auto;min-height:40px;padding:9px 18px;font-size:13.5px;background:var(--papel);
  color:var(--carbon2);border:1px solid var(--linea);margin-top:0;display:inline-flex}
.boton.fino:hover{border-color:var(--carbon);background:var(--carbon-suave)}
.boton.mini{width:auto;min-height:40px;padding:8px 14px;font-size:12.5px;margin-top:0;display:inline-flex}
.boton.mini .ico-np{width:15px;height:15px}
.boton.gris{background:var(--papel2);color:var(--gris2);border:1px solid var(--linea)}
.boton.gris:hover{background:#e6dfd3;color:var(--tinta)}
.boton.peligro{background:#fbeae8;color:var(--rojo);border:1px solid #efc9c5}
.boton.peligro:hover{background:#f6d9d5}
.botones-linea{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

.cierre{max-width:var(--ancho);margin:0 auto;padding:26px 22px 44px;text-align:center}
.cierre .consultar{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:auto;
  padding:12px 22px;font-size:15px;
}
.cierre .consultar svg{width:18px;height:18px;fill:currentColor;flex:0 0 18px}

/* ── pie ── */
.pie{
  max-width:var(--ancho);margin:0 auto;padding:34px 22px 60px;border-top:1px solid var(--linea);
  font-size:12.5px;color:var(--gris);line-height:1.7;text-align:center;
}
.marca-pie{font-family:var(--display);font-size:21px;font-weight:500;margin:0 0 12px;opacity:.75}
.pie p{margin:.25em 0}
.tenue{color:#8a9397}
.tenue a{color:#6f7a7d}
.tenue a:hover{color:var(--carbon2)}
/* La firma de quien la hizo. Va última, separada y en el tono más bajo del pie: es nuestra,
   no del cliente (NORMA_MARCA_EN_APPS). */
.firma{margin-top:18px;font-size:11.5px;letter-spacing:.04em;color:#9aa2a5}
.firma a{color:#8a9397}
.firma a:hover{color:var(--carbon2)}
footer .firma strong{white-space:nowrap;font-weight:500}   /* el nombre nunca se corta */
@media (max-width:430px){ footer .firma strong{display:block} } /* y si no entra, baja entero */
.contacto-np{font-size:11px;color:#a8afb2;display:block;margin-top:2px}
.contacto-np a{color:#a8afb2}
.contacto-np a:hover{color:var(--carbon2)}

/* ── hojas ── */
.fondo{
  position:fixed;inset:0;z-index:100;background:rgba(31,42,45,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;
}
.hoja{
  position:relative;background:var(--papel);border:1px solid var(--linea);
  border-radius:20px;padding:30px 26px 26px;width:100%;max-width:540px;
  box-shadow:0 20px 60px rgba(20,38,44,.25);max-height:calc(100vh - 40px);overflow:auto;
}
.hoja.angosta{max-width:420px}
.hoja h2{font-family:var(--display);font-size:24px;font-weight:500;margin:0 0 6px;line-height:1.15;letter-spacing:-.01em}
.cerrar{
  position:absolute;top:12px;right:14px;background:none;border:0;color:var(--gris);
  font-size:26px;line-height:1;cursor:pointer;z-index:2;
}
.cerrar:hover{color:var(--tinta)}
.hoja label{display:block;font-size:12px;color:var(--gris2);margin-top:14px}
/* `background-color` y no el atajo `background`: el atajo borra el `background-image` con el
   que se le dibuja la flecha a los desplegables, y los de las hojas quedaban sin ella
   (Nahuel, 30/10/2026: "le sacaste la flecha acá"). */
.hoja input,.hoja select,.hoja textarea{
  display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;margin-top:6px;padding:11px 13px;border-radius:10px;
  border:1px solid var(--linea);background-color:#fff;font-size:15px;color:var(--tinta);font-family:inherit;
}
/* El padding de arriba vuelve a dejarle lugar a la flecha. */
.hoja select{padding-right:38px}
/* LA FLECHA DE LOS DESPLEGABLES, DESPEGADA DEL BORDE (Nahuel, 30/10/2026: "todas las listas
   colapsables tienen la flecha muy al borde"). La del sistema se dibuja pegada al marco y no
   se puede mover: se apaga y se dibuja una propia, a 14 px del borde, con su lugar reservado
   en el padding. Vale para TODOS los `select` de la app, no sólo para los de la hoja. */
select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6a60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;
  padding-right:38px;
}
select::-ms-expand{display:none}

/* El campo de fecha de iOS trae su ancho propio y hacía correr la hoja para el costado
   (Nahuel, 15/09: "la app se desplaza horizontal al cargar un campo"). */
.hoja input[type=date]{-webkit-appearance:none;appearance:none;min-height:46px;text-align:left}
.hoja input[type=date]::-webkit-date-and-time-value{text-align:left}
.hoja,.fondo{overflow-x:hidden}
html,body{overflow-x:hidden;max-width:100%}
/* Los botones con texto largo bajan de línea sin salirse. */
.boton{white-space:normal;line-height:1.2}
.hoja label.adjuntar{flex-wrap:wrap;text-align:center;justify-content:center}
.hoja textarea{font-family:inherit;resize:vertical;line-height:1.5}
.hoja input:focus,.hoja select:focus,.hoja textarea:focus{outline:0;border-color:var(--carbon);
  box-shadow:0 0 0 3px rgba(43,42,39,.15)}
/* Face ID / huella: los botones del núcleo (llaves_ui.js), con la paleta de la casita. */
.btn-llave{display:block;width:100%;margin-top:12px;padding:13px;border:1px solid var(--linea);border-radius:12px;
  background:var(--papel2);color:var(--tinta);font-weight:600;font-size:14.5px;cursor:pointer;font-family:inherit}
.btn-llave:hover{border-color:var(--carbon)}
.btn-llave.tenue{font-weight:500;font-size:13px;border-style:dashed;opacity:.75}
.bloque-llave{margin-top:18px;padding-top:16px;border-top:1px solid var(--linea)}
.bloque-llave .detalle,#llaves-ingreso .detalle{font-size:12.5px;color:var(--gris);margin:8px 0 0;line-height:1.5}
.ra-fila{display:flex;gap:8px;align-items:center;margin-top:8px}
.ra-fila input{flex:1 1 auto;margin:0}
.ra-fila .quitar-rasgo{flex:0 0 36px;height:36px;border:1px solid var(--linea);border-radius:10px;background:none;
  color:var(--gris);font-size:18px;cursor:pointer}
.ra-fila .quitar-rasgo:hover{color:var(--rojo);border-color:var(--rojo)}
#ra-agregar{margin-top:12px}
.rejilla-form{display:grid;gap:0 14px;grid-template-columns:1fr 1fr}
.puerta{
  display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);padding:16px 18px;margin-top:12px;cursor:pointer;
}
.puerta:hover{border-color:var(--carbon);background:var(--carbon-suave)}
.puerta strong{display:block;font-size:15.5px;font-weight:600;margin-bottom:3px}
.puerta span{font-size:12.5px;color:var(--gris)}
.datos-pago{margin-top:18px;border-top:1px solid var(--linea)}
.datos-pago div{display:flex;justify-content:space-between;padding:11px 0;
  border-bottom:1px solid var(--linea);font-size:14px;gap:12px}
.datos-pago span{color:var(--gris)}
.datos-pago strong{text-align:right}
.reglas{list-style:none;padding:0;margin:8px 0 0;font-size:12px;color:var(--gris)}
.reglas li::before{content:"○ ";color:var(--gris)}
.reglas li.ok{color:#2f7a4a}
.reglas li.ok::before{content:"● ";color:#2f7a4a}

/* ── visor ── */
.visor{padding:0;background:rgba(20,38,44,.9)}
/* La tira: una foto por pantalla, se corre con el dedo y frena en cada una. */
.visor-tira{display:flex;width:100vw;height:100vh;height:100dvh;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.visor-tira::-webkit-scrollbar{display:none}
.visor-cuadro{flex:0 0 100vw;height:100%;display:grid;place-items:center;scroll-snap-align:center;padding:0 4vw}
.visor img{max-width:92vw;max-height:88vh;border-radius:12px;object-fit:contain}
.visor-puntos{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.visor .cerrar{color:#fff}
/* Las flechas, sólo con mouse: en el celular la tira se arrastra (Nahuel, 15/09). */
.visor-flecha{display:none;position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  font-size:24px;background:rgba(255,255,255,.9);border:0}
@media (hover:hover) and (pointer:fine){.visor-flecha{display:inline-block}}
.visor-flecha.izq{left:16px}
.visor-flecha.der{right:16px}

@media (max-width:640px){
  .rejilla-form{grid-template-columns:1fr}
  .seccion{padding:52px 0 8px}
  .visor-flecha.izq{left:6px}
  .visor-flecha.der{right:6px}
  .barra .enlace:not(#btn-ingresar):not(.quien):not(.volver-entrada){display:none}
}

/* ── las casas ── */
.cabanas{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:30px}
.cabana{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 12px rgba(31,42,45,.05);
}
.cabana-foto{aspect-ratio:4/3;background:var(--papel2);position:relative;overflow:hidden;cursor:pointer}
.cabana-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.cabana:hover .cabana-foto img{transform:scale(1.04)}
.cabana-foto.vacia{display:grid;place-items:center;gap:10px;text-align:center;padding:20px;
  background:linear-gradient(180deg,#eef3f4 0%,#e3eef0 100%);cursor:default}
.cabana-foto.vacia img{width:120px;height:auto;opacity:.45;transform:none}
.cabana-foto.vacia span{font-size:11.5px;color:var(--gris);line-height:1.5}
.cabana-cuerpo{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.cabana-cuerpo h3{font-family:var(--display);font-size:21px;font-weight:500;margin:0 0 2px;line-height:1.15;letter-spacing:-.01em}
.cabana-cuerpo .capacidad{font-size:12.5px;color:var(--gris);margin:0 0 14px}
/* La estadia con dos o mas casas: un bloque por casa, con su nombre arriba. */
.estadia-casa + .estadia-casa{margin-top:34px;padding-top:28px;border-top:1px solid var(--linea)}
.estadia-casa .titulo-casa{text-align:center;font-size:17px;font-weight:600;margin:0 0 18px}

/* El parrafo de cada casa, debajo del nombre. Solo aparece con dos o mas casas: con una sola
   se lee arriba del todo (21/10/2026, Casamanta). */
.descripcion-cabana{font-size:14px;color:var(--gris2);margin:0 0 16px;line-height:1.55}
.descripcion-cabana.faltan{color:var(--gris);font-style:italic}
.rasgos{list-style:none;padding:0;margin:0 0 16px;font-size:14px;color:var(--gris2)}
.rasgos li{padding:3px 0 3px 16px;position:relative}
.rasgos li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--carbon)}
.rasgos.faltan{color:var(--gris);font-style:italic}
.rasgos.faltan li::before{background:var(--linea)}
.precio-cabana{font-size:16px;margin:0 0 14px;font-weight:500}
.precio-temporada{font-size:14px;margin:-10px 0 14px;font-weight:500}
.precio-temporada span{font-weight:400;color:var(--gris)}
.precio-cabana span{color:var(--gris);font-size:12px;font-weight:400}
.cabana-cuerpo .boton{margin-top:auto}

/* ── pestañas del calendario ── */
.pestanas{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 22px}
.pestana{
  background:var(--papel);border:1px solid var(--linea);color:var(--gris2);
  padding:9px 18px;border-radius:999px;font-size:13.5px;cursor:pointer;
}
.pestana:hover{border-color:var(--carbon);color:var(--tinta)}
.pestana[aria-selected="true"]{background:var(--carbon);border-color:var(--carbon);color:#fff;font-weight:600}

/* EL CALENDARIO, ARRIBA Y ENTERO PARA EL HUÉSPED (Lucas, 28/10/2026: "tener que scrollear para
   abajo para ver el calendario completo y apretar el continuar"). Sin sesión desaparecen el
   título grande y el mes repetido; la instrucción y la casa quedan chicas. 66 px es la barra
   de arriba (64) más aire: ya no hay título que lo despegue. El dueño lo ve como estaba. */
body:not(.con-sesion) #calendario{padding-top:66px}
/* Pero entrando por el botón del link —que es como llega el huésped— el `main` YA reserva los
   64 px de la barra, y los 66 de acá quedaban encima: 130 px de blanco entre la barra y el
   primer renglón (Nahuel, 30/10/2026, mirándolo en su teléfono). Acá sólo va el aire. */
body[data-vista]:not(.con-sesion) #calendario{padding-top:10px}
body:not(.con-sesion) #calendario > .titulo{display:none}
body:not(.con-sesion) #calendario > .sub{font-size:14px;line-height:1.4;margin-bottom:10px}
/* LA BIENVENIDA (28/10/2026): dos renglones, para el huésped. Sustituye a la instrucción de
   arriba, que queda sólo para el dueño. Tan chica como hace falta para que el encabezado siga
   midiendo 230 px o menos (V23); si se agranda, el calendario deja de entrar en un 390x844. */
.bienvenida{display:none}
body:not(.con-sesion) #calendario > .sub{display:none}
body:not(.con-sesion) .bienvenida{display:block;text-align:center;max-width:36em;margin:0 auto 4px;
  font-size:12px;line-height:1.3;color:var(--gris2)}
.bienvenida p{margin:0 0 3px}
.bienvenida strong{color:var(--tinta);font-weight:600}
body:not(.con-sesion) #pestanas{margin-bottom:10px}
body:not(.con-sesion) #calendario .calendario-nav{margin-bottom:8px}
body:not(.con-sesion) #meses .mes h3{display:none}
/* …salvo que se dibujen dos: ahí cada uno dice cuál es (30/10/2026). */
/* El mes se nombra en UN solo lugar: el rótulo de las flechas, que dice el tramo entero
   (Nahuel, 30/10/2026). Repetirlo sobre cada mes decía dos veces lo mismo. */
/* ENTRANDO POR EL LINK DE UNA CASA no se eligen las otras: ese link es el que Lucas manda
   cuando ya hablaron de esa casa, y las pestañas invitaban a irse a la otra sin querer
   (Nahuel, 30/10/2026). La invitación a la otra casa vive en la ficha larga, al final, que es
   donde él la pidió. Con sesión el dueño las sigue viendo: las usa para mirar los dos
   calendarios. */
body[data-casa-directa]:not(.con-sesion) #pestanas{display:none}
body:not(.con-sesion) #resumen{margin-top:12px;padding:2px 18px 14px}
body:not(.con-sesion) #resumen > div{padding:6px 0}

/* ── fotos: subir, quitar y repartir ── */
.hoja.ancha{max-width:760px}
/* Centrado y con el ícono de subida (Nahuel, 15/09). */
.subir{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}
.subir-boton{cursor:pointer;margin-top:0 !important;font-size:13.5px !important;color:var(--carbon2) !important;
  display:inline-flex;align-items:center;gap:8px}
.subir-boton svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.subir .nota{margin:0}
.repartir{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  margin-top:18px}
.repartir figure{margin:0;position:relative}
.repartir img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.repartir select{
  width:100%;margin-top:6px;padding:7px 9px;border-radius:8px;font-size:12.5px;
  border:1px solid var(--linea);background:#fff;color:var(--tinta);
}
.repartir .quitar{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:0;
  background:rgba(31,42,45,.7);color:#fff;font-size:16px;line-height:1;cursor:pointer;
}
.repartir .quitar:hover{background:var(--rojo)}

/* ── las casas, en el panel ── */
.casa-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--linea);font-size:14.5px}
.casa-fila:last-child{border-bottom:0}
.casa-fila span{color:var(--gris);font-size:12.5px}

.marca-cabana{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;
  border-radius:999px;background:var(--papel2);border:1px solid var(--linea);color:var(--gris2);
}

/* ── la estadía ── */
.dos-columnas{display:grid;gap:26px 42px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.dos-columnas.centrada{max-width:820px;margin:0 auto;justify-items:center}
.dos-columnas.centrada .columna{text-align:left}
.dos-columnas.centrada .subtitulo{text-align:left}
.columna .subtitulo{margin-top:0}
.lista-tildes,.lista-cruces{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.lista-tildes li,.lista-cruces li{display:flex;gap:11px;align-items:baseline;font-size:15.5px;color:var(--gris2)}
.lista-tildes li::before,.lista-cruces li::before{content:"✓";color:var(--carbon);flex:0 0 auto;font-size:13px}

.relato{max-width:60ch;margin:0 auto;font-size:17px;line-height:1.7;color:var(--gris2);text-align:center;
  font-family:var(--display);font-size:17px}
.relato-izq{font-size:16px;line-height:1.7;color:var(--gris2);margin:0 0 18px}

/* ── la obra: Familia Carbón construye ── */
.obra{display:grid;gap:26px;grid-template-columns:1fr;margin-top:30px}
.obra-texto{max-width:720px;margin:0 auto;text-align:center}
/* El texto de la obra: párrafos con aire, alineado como eligió el dueño. */
#obra-texto p{margin:0 0 14px}
#obra-texto[data-alinear="izquierda"]{text-align:left}
#obra-texto[data-alinear="centro"]{text-align:center}
#obra-texto[data-alinear="derecha"]{text-align:right}
/* La barra de formato de la hoja: botones chicos, el elegido de alineación se ve apretado. */
.formato{display:flex;gap:6px;align-items:center;margin:0 0 6px}
.formato button{width:34px;height:30px;border:1px solid var(--linea);border-radius:8px;background:var(--papel);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--tinta)}
.formato button[aria-pressed="true"]{background:var(--carbon);color:#fff;border-color:var(--carbon)}
.formato button .ico-np{width:16px;height:16px}
.formato-sep{width:1px;height:20px;background:var(--linea);margin:0 4px}
.obra-texto .botones-linea{justify-content:center}
/* Las fotos de la obra van en la misma pasarela que la casita (Nahuel, 15/09). */
.obra-fotos .carrusel-caja{border-radius:var(--radio);overflow:hidden}
.obra-fotos .carrusel{aspect-ratio:4/3}
.obra-texto .display{color:var(--madera2)}
@media (max-width:720px){
  .obra{grid-template-columns:1fr}
  /* Un botón debajo del otro, al ancho (Nahuel, 15/09). */
  .obra .botones-linea{flex-direction:column}
  .obra .botones-linea .boton{width:100%;text-align:center}
}
.mensaje-caja{margin:14px 0 6px;padding:12px 14px;border:1px dashed var(--linea);border-radius:12px;background:var(--papel2)}
.mensaje-caja .nota{margin:0 0 8px}
.mensaje{white-space:pre-wrap;font-family:inherit;font-size:14px;margin:0 0 10px;color:var(--tinta)}

/* ── el carrusel de cada casa ── */
.carrusel-caja{position:relative;background:var(--papel2)}
.carrusel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;aspect-ratio:4/3;scrollbar-width:none}
.carrusel::-webkit-scrollbar{display:none}
.carrusel .cuadro{flex:0 0 100%;width:100%;height:100%;margin:0;position:relative;overflow:hidden;scroll-snap-align:center;background:#1f1e1b}
.carrusel img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;position:relative}
/* La vertical entera, sobre la misma foto difuminada (16/09). */
.carrusel .cuadro-fondo{display:none;position:absolute;inset:-24px;background-size:cover;background-position:center;
  filter:blur(18px) brightness(.75);transform:scale(1.1)}
.carrusel .cuadro.vertical img{object-fit:contain}
.carrusel .cuadro.vertical .cuadro-fondo{display:block}
/* En el celular no hay flechas ni cartel de "8 fotos": la pasarela se corre con el dedo y los
   puntitos de abajo dicen cuántas fotos hay y en cuál estás (Nahuel, 15/09/2026). Las flechas
   quedan sólo para quien mira con mouse, que no tiene cómo arrastrar: juntas, chicas, en la
   esquina de arriba a la derecha, sin tapar la foto. */
.carrusel-flecha{display:none;position:absolute;top:10px;transform:none;width:30px;height:30px;font-size:17px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:0}
.carrusel-flecha.izq{right:46px;left:auto}
.carrusel-flecha.der{right:10px}
@media (hover:hover) and (pointer:fine){.carrusel-flecha{display:inline-block}}
/* El lápiz de las fotos va a la otra esquina, porque la derecha ya es de las flechas. */
.carrusel-caja > .lapiz-esquina{right:auto;left:10px}
.carrusel-puntos{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.carrusel-puntos .punto{pointer-events:auto;width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.15);transition:transform .15s,background .15s}
.carrusel-puntos .punto.activo{background:#fff;transform:scale(1.35)}

/* ── la barra de abajo, con sesión ──
   Reservas · Caja · Balances · Menú a un toque desde cualquier punto de la página. Fija, con el
   hueco del iPhone abajo, y el body deja lugar para que la firma no quede tapada. */
.barra-inferior{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  height:calc(58px + env(safe-area-inset-bottom,0px));padding:4px 8px env(safe-area-inset-bottom,0px);
  background:rgba(246,242,234,.55);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
  border-top:1px solid rgba(223,216,204,.6);
  touch-action:manipulation;
  transition:left .25s ease,right .25s ease,bottom .25s ease,border-radius .25s ease,height .25s ease}
.barra-inferior button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;background:none;border:0;
  color:var(--gris2);font:500 11px/1 var(--fuente);border-radius:12px;cursor:pointer;letter-spacing:.02em;touch-action:manipulation}
.barra-inferior button .ico-np{width:24px;height:24px;transition:width .2s ease,height .2s ease}
.barra-inferior button span{transition:opacity .15s ease,max-height .2s ease;max-height:14px;overflow:hidden}
.barra-inferior button:active{background:var(--carbon-suave)}
.barra-inferior button.activa{color:var(--carbon2)}
/* Como Instagram, pero hacia los costados y no hacia abajo (Nahuel, 15/09): al bajar por la
   página la barra se recoge en una píldora centrada, sólo con los dibujos; al subir vuelve a
   ocupar todo el ancho. LA ALTURA NO CAMBIA: una barra que se achica hacia abajo mueve el
   botón justo cuando el pulgar va a tocarlo, y el toque cae en el vacío ("hay que tocar dos
   veces"). */
.barra-inferior.compacta{left:12%;right:12%;bottom:calc(10px + env(safe-area-inset-bottom,0px));
  height:52px;padding:0 6px;border-radius:999px;border:1px solid rgba(223,216,204,.7);
  box-shadow:0 6px 24px rgba(31,30,27,.12)}
.barra-inferior.compacta button .ico-np{width:22px;height:22px}
.barra-inferior.compacta button span{opacity:0;max-height:0}
body.con-barra{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
/* Con la barra de abajo, los botones de las dos fotos suben para no quedar detrás de ella. */
body.con-barra .portada-texto{padding-bottom:calc(28px + 64px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){.barra-inferior{display:none}body.con-barra{padding-bottom:0}
  body.con-barra .portada-texto{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}}

/* ── el menú de quien administra ── */
/* Grande y con area de toque de 48 px: Nahuel lo pidio mas grande el 03/09. */
.hamburguesa{background:none;border:0;color:var(--tinta);width:48px;height:48px;margin-left:-6px;
  margin-right:0;padding:0;display:grid;place-items:center;cursor:pointer;border-radius:12px}
.hamburguesa svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.hamburguesa:hover{color:var(--carbon2);background:var(--carbon-suave)}
.hamburguesa:focus-visible{outline:2px solid var(--carbon);outline-offset:2px}
.fondo.lateral{align-items:stretch;justify-content:flex-end;padding:0}
.cajon{background:var(--papel);border-left:1px solid var(--linea);width:min(86%,340px);height:100%;padding:18px;
  overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.cajon-tapa{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cajon-tapa .cerrar{position:static}
.cajon-rotulo{margin:0 0 2px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.cajon-tapa strong{font-size:17px;font-weight:600}
.cajon-rol{margin:2px 0 0;font-size:12.5px;color:var(--gris)}
.cajon-lista{display:flex;flex-direction:column;gap:2px}
.cajon-grupo{margin:18px 0 4px;padding:0 12px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
.cajon-grupo:first-child{margin-top:4px}
.item{display:flex;align-items:center;gap:12px;justify-content:space-between;background:none;border:0;border-radius:10px;
  padding:13px 18px 13px 12px;cursor:pointer;text-align:left;color:var(--tinta)}
.item:hover{background:var(--carbon-suave)}
.item:focus-visible{outline:2px solid var(--carbon);outline-offset:-2px}
.item strong{display:block;font-size:15px;font-weight:500}
.item em{display:block;font-style:normal;font-size:12.5px;color:var(--gris);margin-top:2px}
.item span[aria-hidden]{color:var(--gris);flex:0 0 auto}
.item > span{flex:1 1 auto;min-width:0}
.item-ico{flex:0 0 auto;color:var(--carbon2)}
.item-ico .ico-np{width:22px;height:22px}
.item-flecha{flex:0 0 auto;color:var(--gris)}
.item-flecha .ico-np{width:18px;height:18px}
.quitar-rasgo .ico-np{width:16px;height:16px}
.cajon .boton{margin-top:auto}
.cajon-firma{font-size:11px;line-height:1.7;color:var(--gris);border-top:1px solid var(--linea);padding-top:14px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px}
.cajon-firma .cajon-version{margin-bottom:6px;color:var(--gris)}
.cajon-firma .hecho-np strong{color:var(--gris2);font-weight:600}
.cajon-firma a{color:inherit;text-decoration:none}

/* ── balances ── */
.balance-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin:18px 0 16px}
#bal-rotulo{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris2);min-width:11em;text-align:center}
.balance-tarjetas{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.balance-dato{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:15px 14px;text-align:center}
.balance-dato span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.balance-dato strong{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums}
.balance-dato.plata strong{color:var(--carbon2)}

/* La dona de gastos: el dibujo a la izquierda, la lista con porcentajes a la derecha. */
.dona{display:flex;gap:18px;align-items:center;margin:8px 0 14px}
.dona svg{flex:0 0 120px;width:120px;height:120px}
.dona-num{font-size:9px;font-weight:600;fill:var(--tinta)}
.dona-txt{font-size:6.5px;fill:var(--gris);letter-spacing:.1em;text-transform:uppercase}
.dona-leyenda{list-style:none;margin:0;padding:0;flex:1 1 auto;font-size:13px}
.dona-leyenda li{display:flex;align-items:center;gap:8px;padding:3px 0}
.dona-leyenda i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.dona-leyenda span{flex:1 1 auto;color:var(--gris2)}
.dona-leyenda b{font-weight:600;font-variant-numeric:tabular-nums}
.acumulado{background:var(--carbon);color:#fff;border-radius:12px;padding:16px 18px;margin-bottom:12px}
.acumulado span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:4px}
.acumulado strong{display:block;font-size:26px;font-weight:500;font-variant-numeric:tabular-nums}
.acumulado small{display:block;font-size:12px;opacity:.75;margin-top:6px}
.balance-fila{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--linea);font-size:14px}
.balance-fila:last-child{border-bottom:0}
.balance-fila .nombre{flex:1 1 auto;min-width:0}
.balance-fila .cuanto{color:var(--gris2);font-variant-numeric:tabular-nums;flex:0 0 auto}
.barra-ocupacion{flex:0 0 84px;height:5px;background:var(--papel2);border-radius:999px;overflow:hidden}
.barra-ocupacion i{display:block;height:100%;background:var(--carbon);border-radius:999px}

/* ── la caja ── */
.caja-filtros{margin:14px 0 6px}
.caja-filtros label{margin-top:8px}
/* Tres campos (el mes y el tramo) sin que la hoja se corra para el costado: en el celular el
   mes va entero arriba y las dos fechas abajo (22/09). */
.caja-fechas{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.caja-fechas > label{min-width:0}
.caja-fechas > label:first-child{grid-column:1 / -1}
.caja-fechas input{width:100%;min-width:0}
.caja-filtros .nota{margin:8px 0 0;font-size:12.5px}
/* La casa que se mira (Caja, Balances y Tablero) y la casa de cada movimiento (Lucas, 28/10/2026). */
.campo-casa{min-width:0}
.balance-nav + .campo-casa{margin:0 0 14px}
.reserva-fila .quienes .casa-mov{display:inline-block;margin-top:4px;font-size:12px;color:var(--gris2)}
/* El chico de cada movimiento: la flecha más cerca, porque el campo entero mide poco. */
.reserva-fila .quienes select.casa-mov{width:auto;max-width:100%;padding:3px 24px 3px 8px;font-size:12px;
  background-position:right 7px center;background-size:13px 13px}
.reserva-fila .quienes select.casa-mov.sin-casa{background-color:#fbf1d9;border-color:#eedcae;color:#6b4f12}
.aviso-sin-casa{background:#fbf1d9;border:1px solid #eedcae;border-radius:10px;padding:11px 13px;margin:14px 0 0;
  font-size:13px;color:#6b4f12;line-height:1.5}
.aviso-sin-casa .caja-fechas{margin-top:8px}
.caja-botones{display:flex;gap:10px;margin:14px 0}
.caja-botones .boton{width:auto;flex:1 1 0}
#form-mov{border:1px solid var(--linea);border-radius:var(--radio);padding:16px 16px 6px;
  margin-bottom:18px;background:var(--papel)}
#form-mov .subtitulo{margin-top:0}
.comprobante input[type=file]{font-size:13px}
.reserva-fila.mov{padding:12px 16px}
.reserva-fila.mov .cuanto-mov{font-variant-numeric:tabular-nums;font-size:15px;flex:0 0 auto;
  color:var(--gris2)}
.reserva-fila.mov.ingreso .cuanto-mov{color:#2f7a4a}
.reserva-fila.mov .boton.mini,.reserva-fila.mov a.boton{flex:0 0 auto;width:auto;text-align:center;
  text-decoration:none}

.aviso-demo{background:#fbf1d9;border:1px solid #eedcae;border-radius:10px;padding:11px 13px;margin:14px 0 0;
  font-size:13px;color:#6b4f12;line-height:1.5}
.aviso-demo strong{color:#3d2c05}

/* ── el Tablero ─────────────────────────────────────────────────────────────
   Lucas, 28/10/2026: "todo en una sola página, todo por mes". Tres columnas en la compu; en el
   celular una sola, y el orden lo da `order` (las columnas se deshacen con display:contents):
   balances → calendario → próximas reservas → en qué se gastó → detalle. */
.hoja.tablero{max-width:1180px}
.tablero-tope{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 18px;padding-right:30px}
/* Arriba va el mes y nada más: el logotipo, el título y la barra de atajos se fueron el
   30/10/2026 (los atajos abrían las pantallas que Lucas no quiere recorrer). */
.tablero-mes{display:flex;align-items:center;gap:12px}
/* EL FILTRO DE CASA SE TIENE QUE VER (Nahuel, 30/10/2026: "que se note más el filtro por casa").
   Antes era un `select` gris igual a cualquier campo de formulario, perdido a la derecha. */
/* `label.campo-casa` y no `.campo-casa` a secas: dentro de una hoja manda `.hoja label`, que es
   `display:block`, y el rótulo "Casa" quedaba arriba en vez de al lado (Nahuel, 30/10/2026). */
.campo-casa,.hoja label.campo-casa{display:flex;align-items:center;gap:10px;margin:0;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris);flex:0 0 auto;width:auto}
/* `background-color`, NO el atajo `background`: el atajo borra el `background-image` con el que
   se dibuja la flecha, y la píldora quedaba sin flecha (30/10/2026). */
.campo-casa .selector-casa,.hoja .campo-casa .selector-casa{font-size:14px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--tinta);background-color:var(--carbon-suave);
  border:1px solid var(--carbon);border-radius:999px;
  padding:9px 38px 9px 16px;margin:0;width:auto;min-width:9em}
#tb-rotulo{font-size:15px;font-weight:600;min-width:9.5em;text-align:center;text-transform:capitalize}

.tablero-cuerpo{display:flex;flex-direction:column;gap:14px}
.tablero-col{display:contents}
.tb-tarjeta{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:16px;min-width:0}
.tb-titulo{margin:0 0 6px;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tinta)}
.tb-titulo-linea{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.tb-titulo-linea .tb-titulo{margin:0}
.tb-enlace{background:none;border:0;padding:6px 2px;font-size:13px;color:var(--carbon2);cursor:pointer}
.tb-enlace:hover{text-decoration:underline}
.tb-tarjeta .sub{font-size:13px;margin:0 0 12px}

/* Mobile: el orden que pidió el dueño. Las que comparten número se quedan en su orden de
   escritura (balance, y pegado a él la cuenta; detalle, y pegado a él el aviso de lo que falta). */
.tb-balance,#tb-cuenta{order:1}
.tb-calendario{order:2}
.tb-proximas{order:3}
.tb-gastos{order:4}
.tb-ingresos{order:5}
.tb-ingresos .total-ingresos{border-bottom:0;border-top:1px solid var(--linea);margin-top:4px;font-weight:600}
.tb-ingresos .gasto-detalle{flex-wrap:wrap;gap:4px 10px;padding:9px 2px}
.tb-ingresos .gasto-detalle .nombre{flex:1 1 140px}
#tb-cuenta:empty{display:none}

/* Con "Todas" hay un calendario por casa, cada uno con su nombre encima (30/10/2026). */
.tb-casa-mes + .tb-casa-mes{margin-top:8px;padding-top:8px;border-top:1px solid var(--linea)}
.tb-casa-nombre{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 10px;padding:8px 6px;cursor:pointer;list-style:none;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris2)}
.tb-casa-nombre::-webkit-details-marker{display:none}
.tb-casa-nombre .desp-flecha{color:var(--gris);transition:transform .2s}
.tb-casa-mes[open] .tb-casa-nombre .desp-flecha{transform:rotate(90deg)}
.tb-casa-nombre:hover{color:var(--tinta)}

/* El calendario: los mismos días y los mismos colores que el de la página, sin botón. */
.tb-dia{aspect-ratio:1;border:1px solid var(--linea);background:var(--est-libre);border-radius:9px;
  font-size:12.5px;color:var(--tinta);display:grid;place-items:center}
.tb-dia.vacio{border:0;background:none}
.tb-dia.pasada{background:#ece8e0;color:#b5b0a6;border-color:#e4dfd5}
.tb-dia.tomada{background:var(--est-cerrada);color:var(--est-cerrada-texto);border-color:var(--est-cerrada-borde)}
.tb-dia.tomada.confirmada{background:var(--est-tomada);color:var(--est-tomada-texto);border-color:var(--est-tomada-borde)}
.tb-dia.pendiente{background:var(--est-pendiente);color:var(--est-pendiente-texto);border-color:var(--est-pendiente-borde)}
/* Próximas reservas: nombre y fechas, personas y noches, importe y estado, y el chevron. */
.tb-proxima{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;
  grid-template-areas:"quien plata flecha" "datos estado flecha";gap:2px 12px;align-items:center;
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--linea);
  padding:11px 2px;cursor:pointer;color:inherit}
.tb-proxima:last-child{border-bottom:0}
.tb-proxima:hover{background:var(--papel)}
.tb-prox-quien{grid-area:quien;min-width:0}
.tb-prox-quien strong{display:block;font-weight:500;font-size:14px;overflow-wrap:anywhere}
.tb-prox-quien small{display:block;font-size:12.5px;color:var(--gris)}
.tb-prox-datos{grid-area:datos;font-size:12.5px;color:var(--gris)}
.tb-prox-plata{grid-area:plata;justify-self:end;font-size:14px;font-variant-numeric:tabular-nums}
.tb-proxima .marca-estado{grid-area:estado;justify-self:end}
.tb-proxima .item-flecha{grid-area:flecha}

/* Balances del mes: cuatro datos en dos filas y el saldo, destacado, debajo. */
.tb-balance .balance-tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Cada número lleva a su detalle: es un botón, y se nota al pasar por encima (30/10/2026). */
button.balance-dato{cursor:pointer;font-family:inherit;text-align:center;width:100%}
button.balance-dato:hover{border-color:var(--carbon);background:var(--carbon-suave)}
/* La tarjeta a la que se llegó desde un número, resaltada un momento. */
.tb-tarjeta.recien{outline:2px solid var(--carbon);outline-offset:3px}
.tb-balance .balance-dato.saldo{grid-column:1 / -1;background:var(--carbon-suave);border-color:var(--carbon)}
.tb-balance .balance-dato.saldo strong{font-size:26px;font-weight:600}
/* Botón, no cartel: lleva a las reservas que deben (Nahuel, 30/10/2026). */
.nota.tb-falta{display:block;width:100%;text-align:left;background:#fbf1d9;border:1px solid #eedcae;
  border-radius:10px;padding:10px 12px;margin:12px 0 0;font-size:13px;color:#6b4f12;
  cursor:pointer;font-family:inherit}
.nota.tb-falta:hover{background:#f7e9c8;border-color:#e3cd93}
/* La reserva a la que se llegó desde el Tablero, resaltada hasta que la vista se acomoda. */
.reserva-fila.recien{outline:2px solid var(--carbon);outline-offset:3px;border-radius:12px;
  transition:outline-color .4s}
.tb-botones{margin:14px 0 0}
.tb-tarjeta + #tb-cuenta{margin-top:0}
#tb-cuenta .acumulado{margin-bottom:0}

.tb-gastos .dona{margin-top:4px}
.tb-gastos .gasto-detalle{flex-wrap:wrap;gap:4px 10px;padding:9px 2px}
.tb-gastos .gasto-detalle .nombre{flex:1 1 140px}
/* El rótulo que separa el reparto por categoría de los gastos uno por uno, dentro de la misma
   tarjeta (30/10/2026). */
.tb-subtitulo{margin:16px 0 2px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

@media (min-width:960px){
  .tablero-cuerpo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
  .tablero-col{display:flex;flex-direction:column;gap:14px;min-width:0}
  .tb-balance,#tb-cuenta,.tb-calendario,.tb-proximas,.tb-gastos,.tb-ingresos{order:0}
}
@media (max-width:740px){
  .tablero-tope{justify-content:center;padding-right:0;margin:6px 0 14px}
}

/* FUNCIONALIDAD: nucleo/firma_estilo
   GUIA: NORMA_MARCA_EN_APPS.md · va con firma.html.

   CENTRADA, siempre. No es gusto: la firma es lo último de la página y va sola en su renglón;
   pegada a la izquierda queda como un dato más del negocio en vez de leerse como el pie.
   Hereda el color de la página a propósito — es la casa del cliente, no un aviso nuestro. */
.firma-np{text-align:center;font-size:11.5px;line-height:1.7;letter-spacing:.02em;opacity:.72;
          padding:22px 16px calc(22px + env(safe-area-inset-bottom,0px))}
.firma-np a{color:inherit;text-decoration:none}
/* El nombre es una unidad y no se parte: en un celular angosto cortaba donde caía y dejaba
   "Inteligentes" huérfano en su propio renglón. El corte lo elegimos nosotros. */
.firma-np strong{white-space:nowrap;font-weight:600}
/* El eslogan va en su propio renglon, debajo de "Desarrollado por Neuron P". Bajada de Nahuel,
   05/09/2026: el nombre y lo que hacemos se leen como dos lineas, no como una sola frase larga. */
.firma-np .hecho-np{display:block}
.firma-np .eslogan-np{display:block;white-space:nowrap;font-weight:600}
.firma-np .contacto-np{display:block;margin-top:3px;opacity:.85}
.firma-np .contacto-np a{white-space:nowrap}

/* FUNCIONALIDAD: nucleo/tipografia
   GUIA: Areas/CreacionContenido/NORMA_TIPOGRAFIA.md · se pega en la hoja de estilos de cada app.

   POR QUÉ EXISTE: Nahuel venía marcando la misma falla una vez por app —"quedó una huérfana",
   "no se parte el nombre", "hay un espacio de más"— y cada vez se arreglaba a mano en ESA app.
   Una regla que se aplica de memoria se incumple en la siguiente. Esto es la regla escrita una
   vez, en el núcleo, y la compuerta la busca en lo que se publica.

   `:where()` no suma especificidad: cualquier regla de la app le gana sin tener que pelear con
   `!important`. Es una base, no una imposición. */

/* Los titulares reparten sus palabras entre los renglones en vez de llenar cada uno hasta el
   borde. Es lo que evita que el último quede con una sola palabra colgando. */
:where(h1, h2, h3, .titular, .lede, .sec-head h2, .hero h1) { text-wrap: balance; }

/* Los párrafos largos: `pretty` hace lo mismo, más suave, y sobre todo no deja la última línea
   con una palabra sola. */
:where(p, li, dd, figcaption, .sub, .bajada, .nota, .card p) { text-wrap: pretty; }

/* Al imprimir —un presupuesto, un balance— una línea suelta arriba o abajo de la página se lee
   como un error de armado. Dos líneas mínimo de cada lado. */
@media print { :where(p, li) { orphans: 2; widows: 2; } }

/* Un nombre propio no se corta nunca a la mitad, aunque el renglón no dé. */
:where(.no-cortar) { white-space: nowrap; }

/* Y las palabras largas de verdad —una URL, un correo— parten con guion en vez de desbordar la
   caja y empujar la página a los costados. */
:where(body) { overflow-wrap: break-word; }

/* ── el núcleo pinta las pantallas del dueño ─────────────────────────────────
   La barra del dueño, la hoja como pantalla en el teléfono con su "Volver", el ojo de las
   claves, el lápiz de la portada, el reparto de fotos y el modo de marcar días viven en
   `Desarrollo/nucleo/pantalla.css`, copiado a `pantalla.css` y cargado después de esta hoja.
   Son de todas las apps de alquiler, no de ésta.

   Lo único que hace falta acá es decirle al núcleo cuáles son los colores de Casita Carbón.
   Mountain es oscura y mapea sus fichas contra su noche y su dorado; esta app es CLARA, así
   que el mapeo va al revés: lo que en Mountain se aclara para resaltar sobre lo oscuro, acá
   se oscurece para resaltar sobre lo claro.
     --np-panel  -> --papel   (la superficie de una tarjeta sobre el fondo crema)
     --np-panel2 -> --papel2  (un tono más el hueco, para el hover y el ícono de "+")
     --np-texto  -> --tinta   (el texto principal)
     --np-suave  -> --gris    (texto secundario, atenuado)
     --np-suave2 -> --gris2   (más oscuro que --gris: en fondo claro, resaltar es oscurecer)
     --np-linea  -> --linea   (los bordes finos)
     --np-acento -> --madera  (el color de marca: la madera clara de la casita, no el carbón)
     --np-acento2-> --madera2 (más oscuro que --madera, para el hover: mismo criterio que suave2)
     --np-alerta -> --rojo    (borrar, cancelar)
     --np-radio  -> --radio   (el mismo radio que ya usa toda la app)

   VA EN `body` Y NO EN `:root` A PROPÓSITO: pantalla.css (el núcleo) se carga después y trae
   su propia paleta oscura en `:root`; declarada acá en `:root` perdía por orden y el "no" de
   "Marcar los días que no alquilo" salía color crema sobre crema, invisible (Nahuel lo vio el
   15/09/2026). En `body` gana por cercanía, cargue lo que cargue después. */
body{
  --np-panel:var(--papel);     --np-panel2:var(--papel2);
  --np-texto:var(--tinta);     --np-suave:var(--gris);     --np-suave2:var(--gris2);
  --np-linea:var(--linea);     --np-acento:var(--madera);  --np-acento2:var(--madera2);
  --np-alerta:var(--rojo);     --np-radio:var(--radio);
}

/* pantalla.css ya resalta la portada del SITIO en #elegir-portada; esta es la portada de CADA
   casa, dentro de la hoja de fotos de una unidad. Mismo criterio, otro contenedor. */
#repartir .es-la-portada{outline:2px solid var(--np-acento);border-radius:var(--np-radio)}

/* FUNCIONALIDAD: reserva/puerta_np_estilo
   La puerta de NEURON P en la hoja de ingreso. Discreta pero legible: no es un secreto. */
.np-entrada{margin:14px 0 0;padding-top:12px;border-top:1px dashed rgba(128,128,128,.32);text-align:center}
.np-entrada-boton{background:none;border:0;font:inherit;font-size:12.5px;font-weight:600;
                  letter-spacing:.04em;color:inherit;opacity:.62;text-decoration:underline;
                  cursor:pointer;padding:4px}
.np-entrada-boton:hover{opacity:.95}


/* ── la ficha larga, en el panel (28/10/2026) ── */
.fh-bloque{border:1px solid var(--linea);border-radius:14px;padding:12px 14px 14px;margin-top:14px;background:var(--papel)}
.fh-tope{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.fh-tope span{display:inline-flex;gap:6px}
.fh-mover,.fh-quitar{width:36px;height:36px;border:1px solid var(--linea);border-radius:10px;background:none;
  cursor:pointer;font-size:17px;line-height:1;color:var(--gris2)}
.fh-mover:disabled{opacity:.3;cursor:default}
.fh-quitar:hover{color:var(--rojo);border-color:var(--rojo)}
.fh-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin:6px 0 10px}
.fh-foto{position:relative;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;
  background:none;cursor:pointer;aspect-ratio:1}
.fh-foto img{width:100%;height:100%;object-fit:cover;display:block}
.fh-foto.puesta{border-color:var(--carbon)}
.fh-foto:disabled{opacity:.35;cursor:not-allowed}
.fh-foto b{position:absolute;top:4px;left:4px;min-width:20px;height:20px;border-radius:10px;background:var(--carbon);
  color:#fff;font-size:12px;line-height:20px;text-align:center}
/* LA DIRECCION DIRECTA a una casa: el calendario SOBRE la foto de esa casa (Lucas, 22/10/2026:
   "que de fondo tenga alguna de las fotos de la casa", y 05/11/2026 sobre su maqueta: "el
   calendario queda un poco más alto, más limpia la pantalla y más colorida").

   HASTA EL 05/11/2026 LA FOTO ESTABA Y NO SE VEÍA: el velo que llevaba encima iba de .9 a .97
   de opacidad, así que de la foto quedaba un fantasma. Ahora la foto se ve, y lo que se vuelve
   translúcido es el calendario, que es lo que la maqueta muestra. La foto la pone la app en
   --foto-casa; el color de la casa, en --color-casa. */
/* LA FOTO DE FONDO ES PARA EL TELÉFONO, Y SÓLO PARA EL TELÉFONO (06/11/2026). El enlace de
   una casa se manda por WhatsApp y se abre en un celular: ahí la foto llena la pantalla, el
   calendario es un mes y la tarjeta cierra. En una compu el calendario son DOS meses de 493 px
   cada uno, la tarjeta mide un metro de ancho y al bajar el papel translúcido deja de pintar
   debajo del segundo mes: los días de diciembre quedan flotando sobre el monte. Nahuel lo filmó
   en su pantalla. En pantalla ancha vuelve el papel liso de siempre, que es lo que ya estaba
   bien, y lo que se gana con la foto —saber de qué casa se habla— lo dice igual el nombre que
   quedó arriba. */
@media (min-width: 760px) {
  body.con-foto-casa[data-casa-directa] #calendario::before { display: none }
  body.con-foto-casa[data-casa-directa]:not(.con-sesion) #meses {
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none; padding: 0; border-radius: 0;
  }
  body.con-foto-casa[data-casa-directa]:not(.con-sesion) .bienvenida,
  body.con-foto-casa[data-casa-directa]:not(.con-sesion) #mes-rotulo { text-shadow: none }
  body.con-foto-casa[data-casa-directa]:not(.con-sesion) nav.barra {
    background: var(--fondo);
    border-bottom: 1px solid var(--linea);
  }
  body.con-foto-casa[data-casa-directa]:not(.con-sesion) footer.pie { margin-top: 0 }
}

body.con-foto-casa[data-casa-directa] #calendario {
  position: relative;
  isolation: isolate;
}
body.con-foto-casa[data-casa-directa] #calendario::before {
  content: "";
  position: fixed;          /* fija: la foto no se desliza con el calendario */
  inset: 0;
  z-index: -1;
  /* El velo claro de arriba es lo único que la tapa, y sólo donde va el texto: sin él, un
     cielo brillante se come el nombre de la casa. Abajo la foto queda limpia. */
  background-image: linear-gradient(rgba(244, 241, 235, .62) 0, rgba(244, 241, 235, .30) 30%,
                                    rgba(244, 241, 235, .06) 58%, rgba(244, 241, 235, 0) 100%),
                    var(--foto-casa, none);
  background-size: cover;
  background-position: center;
}
/* El mes, sobre papel translúcido: es la tarjeta de la maqueta. */
body.con-foto-casa[data-casa-directa]:not(.con-sesion) #meses {
  background: rgba(253, 251, 247, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 14px 12px 12px;
  box-shadow: 0 6px 30px rgba(17, 17, 16, .13);
}
/* Sobre la foto, el texto de la pantalla se lee con más cuerpo que sobre papel liso. */
body.con-foto-casa[data-casa-directa]:not(.con-sesion) .bienvenida,
body.con-foto-casa[data-casa-directa]:not(.con-sesion) #mes-rotulo {
  color: var(--carbon2);
  text-shadow: 0 1px 10px rgba(253, 251, 247, .85), 0 0 3px rgba(253, 251, 247, .9);
}
/* LA BARRA DE ARRIBA, TRANSPARENTE SOBRE LA FOTO: con su crema sólido cortaba la foto en seco
   a 64 px del borde y la pantalla se partía en dos (05/11/2026). */
body.con-foto-casa[data-casa-directa]:not(.con-sesion) nav.barra {
  background: linear-gradient(rgba(244, 241, 235, .86), rgba(244, 241, 235, 0));
  border-bottom: 0;
  backdrop-filter: none;
}
/* La pestaña de la otra casa no va: entrando por el enlace de una, la otra no se ofrece — y
   sobre la foto se leía como una marca de agua. Ya estaba oculta; esto es para que tampoco
   ocupe lugar. */
body.con-foto-casa[data-casa-directa]:not(.con-sesion) #pestanas { display: none }
/* EL PIE, SOBRE PAPEL Y NO SOBRE LA FOTO (05/11/2026): sin esto el nombre del lugar y la firma
   quedaban flotando encima del monte, en gris sobre verde, leyéndose como una marca de agua
   puesta sin querer. */
body.con-foto-casa[data-casa-directa]:not(.con-sesion) footer.pie {
  background: var(--fondo);
  border-top: 1px solid var(--linea);
  margin-top: 28px;
  /* `position` Y `z-index`, los dos: `#calendario` tiene `isolation:isolate`, así que es un
     elemento con contexto de apilado y se pinta DESPUÉS de los bloques sueltos. Sin esto, su
     foto de fondo le pasaba por encima al pie aunque el pie tuviera fondo propio, y el nombre
     del lugar se leía como una marca de agua sobre el monte (05/11/2026). */
  position: relative;
  z-index: 1;
}
/* La foto se corre hacia abajo: lo que importa es la casa, y centrada le tocaba el cerro.
   Debajo de la tarjeta del calendario es donde queda a la vista. */
body.con-foto-casa[data-casa-directa] #calendario::before { background-position: center 64% }

/* EL NOMBRE DE LA CASA, EN DOS RENGLONES, como el logotipo: el primero fino y espaciado, el
   segundo grueso. Lo arma `pintarBienvenida()` partiendo el nombre por el último espacio, así
   "Casa Manta" y cualquier casa que se dé de alta mañana tienen el suyo sin dibujar nada. */
.bienvenida-casa { display: none }
body[data-casa-directa]:not(.con-sesion) .bienvenida-casa {
  display: block;
  line-height: .98;
  margin-bottom: 5px;
  color: var(--carbon2);
}
.bienvenida-casa .arriba {
  display: block;
  font-size: 13px;
  letter-spacing: .34em;
  text-indent: .34em;      /* compensa el espaciado del último, para que quede centrado */
  font-weight: 400;
}
.bienvenida-casa b { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.01em }
.bienvenida-cap { font-size: 12px }
body:not([data-casa-directa]) .bienvenida-cap { display: none }

/* EL COLOR DE LA CASA EN EL CALENDARIO DEL HUÉSPED (Lucas, 05/11/2026): "que el huésped vea
   las fechas ocupadas con color y las fechas disponibles del mismo color que el calendario
   para que él las pueda marcar". O sea: un solo color por casa, fuerte en lo ocupado y apenas
   teñido en lo libre — que sigue siendo lo que se toca. Sólo sin sesión: el dueño mantiene sus
   colores de estado, que son los que le dicen qué está pendiente y qué confirmado. */
body[data-casa-directa]:not(.con-sesion) #meses .dia {
  border-color: color-mix(in srgb, var(--color-casa, #2b2a27) 22%, transparent);
  background: color-mix(in srgb, var(--color-casa, #2b2a27) 5%, #fdfbf7);
}
body[data-casa-directa]:not(.con-sesion) #meses .dia.tomada,
body[data-casa-directa]:not(.con-sesion) #meses .dia.pasada,
body[data-casa-directa]:not(.con-sesion) #meses .dia.confirmada,
body[data-casa-directa]:not(.con-sesion) #meses .dia.pendiente {
  background: color-mix(in srgb, var(--color-casa, #2b2a27) 62%, #fdfbf7);
  border-color: color-mix(in srgb, var(--color-casa, #2b2a27) 72%, transparent);
  color: color-mix(in srgb, var(--color-casa, #2b2a27) 88%, #000);
}
body[data-casa-directa]:not(.con-sesion) #meses .dia.pasada { opacity: .5 }
body[data-casa-directa]:not(.con-sesion) #meses .dia.elegida,
body[data-casa-directa]:not(.con-sesion) #meses .dia.salida {
  background: var(--color-casa, #2b2a27);
  border-color: var(--color-casa, #2b2a27);
  color: #fff;
}
body[data-casa-directa]:not(.con-sesion) #meses .dia.entre {
  background: color-mix(in srgb, var(--color-casa, #2b2a27) 26%, #fdfbf7);
  border-color: color-mix(in srgb, var(--color-casa, #2b2a27) 34%, transparent);
}
body[data-casa-directa]:not(.con-sesion) #btn-reservar:not(:disabled) {
  background: var(--color-casa, #2b2a27);
  border-color: var(--color-casa, #2b2a27);
}

/* El selector de color de la casa, en Precios y fichas: la muestra y al lado qué es. */
.color-casa{display:flex;align-items:center;gap:10px}
.color-casa input[type=color]{width:46px;height:34px;padding:0;border:1px solid var(--linea);
  border-radius:9px;background:none;cursor:pointer;flex:0 0 auto}
.color-casa small{color:var(--gris);font-size:11.5px;line-height:1.3}