/* GestHouse — la aplicacion. Hereda la marca de marca.css. */

body{background:var(--crema)}
.oculto{display:none !important}

/* ── armazon ───────────────────────────────────────────────────────────────── */
.marco{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}

.lateral{background:var(--tinta);color:var(--hueso);padding:22px 16px;display:flex;
  flex-direction:column;gap:26px;position:sticky;top:0;height:100vh}
.lateral .marca{color:var(--hueso);font-size:18px}
.menu{display:flex;flex-direction:column;gap:2px}
.menu button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:none;border:0;color:rgba(251,249,244,.62);padding:10px 12px;border-radius:var(--r-s);
  cursor:pointer;font-weight:500;transition:background .16s,color .16s}
.menu button:hover{background:rgba(251,249,244,.07);color:var(--hueso)}
.menu button[aria-current="true"]{background:var(--ambar);color:var(--tinta);font-weight:600}
.menu .icono{width:18px;height:18px;flex:none}
.lateral .pie{margin-top:auto;font-size:12.5px;color:rgba(251,249,244,.42);line-height:1.5}

.panel{padding:30px 34px 80px;max-width:1280px}
.cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  margin-bottom:26px;flex-wrap:wrap}
.cabecera h1{font-size:clamp(28px, 3vw, 40px)}
.cabecera p{margin:7px 0 0;color:var(--tinta-45);max-width:56ch}

/* ── piezas ────────────────────────────────────────────────────────────────── */
.boton{display:inline-flex;align-items:center;gap:8px;background:var(--tinta);color:var(--hueso);
  border:0;border-radius:999px;padding:11px 20px;font-weight:600;cursor:pointer;
  transition:transform .12s ease, box-shadow .16s}
.boton:hover{transform:translateY(-1px);box-shadow:var(--sombra)}
.boton.ambar{background:var(--ambar);color:var(--tinta)}
.boton.linea{background:transparent;border:1.5px solid var(--linea);color:var(--tinta)}
.boton.pequeno{padding:7px 14px;font-size:14px}

.tarjeta{background:var(--hueso);border:1px solid var(--linea);border-radius:var(--r-l);
  box-shadow:var(--sombra)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:26px}
.kpi{padding:18px 20px 20px}
.kpi .et{font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--tinta-45);
  font-weight:600}
.kpi .cifra{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.03em;
  margin-top:6px;line-height:1}
.kpi .pie{font-size:13px;color:var(--tinta-45);margin-top:5px}
.kpi.destaca{background:var(--ambar);border-color:var(--ambar-oscuro)}
.kpi.destaca .et,.kpi.destaca .pie{color:rgba(20,20,15,.62)}

.etiqueta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:4px 10px;border-radius:999px;white-space:nowrap}
.et-ocupada{background:var(--oliva-suave);color:var(--oliva)}
.et-libre{background:#EFEADC;color:var(--tinta-70)}
.et-alerta{background:var(--arcilla-suave);color:var(--arcilla)}
.et-futura{background:var(--indigo-suave);color:var(--indigo)}

/* ── propiedades ───────────────────────────────────────────────────────────── */
.rejilla-props{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:18px}
.prop{overflow:hidden;display:flex;flex-direction:column}
.prop .foto{aspect-ratio:16/10;background:#E8E2D2 center/cover;position:relative}
.prop .foto .etiqueta{position:absolute;top:12px;left:12px;background:rgba(251,249,244,.94);
  color:var(--tinta);backdrop-filter:blur(4px)}
.prop .cuerpo{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.prop h3{font-size:19px}
.prop .dir{font-size:13.5px;color:var(--tinta-45)}
.prop .datos{display:flex;gap:14px;font-size:13.5px;color:var(--tinta-70);flex-wrap:wrap}
.prop .abajo{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;
  gap:10px;padding-top:6px;border-top:1px solid var(--linea)}
.prop .precio{font-family:var(--display);font-weight:700;font-size:22px}
.prop .precio small{font-family:var(--texto);font-weight:500;font-size:13px;color:var(--tinta-45)}

/* ── calendario ────────────────────────────────────────────────────────────── */
.cal-barra{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cal-mes{font-family:var(--display);font-weight:600;font-size:22px;min-width:190px}
.cal-envoltorio{overflow-x:auto;border-radius:var(--r-l);border:1px solid var(--linea);
  background:var(--hueso)}
.cal{border-collapse:separate;border-spacing:0;min-width:940px;width:100%;font-size:13px}
.cal th,.cal td{border-bottom:1px solid var(--linea);padding:0}
.cal thead th{position:sticky;top:0;background:var(--hueso);z-index:2;font-weight:600;
  color:var(--tinta-45);height:44px;font-size:12px}
.cal .col-prop{width:190px;min-width:190px;text-align:left;padding:10px 14px;
  position:sticky;left:0;background:var(--hueso);z-index:3;border-right:1px solid var(--linea)}
.cal thead .col-prop{z-index:4}
.cal td.dia{height:46px;position:relative;border-right:1px solid #F0EBDD}
.cal td.finde{background:#FAF6EB}
.cal .reserva{position:absolute;inset:7px 1px;border-radius:7px;display:flex;align-items:center;
  padding:0 8px;font-weight:600;font-size:12px;color:var(--hueso);overflow:hidden;
  white-space:nowrap;cursor:pointer;background:var(--oliva)}
.cal .reserva.futura{background:var(--indigo)}
.cal .reserva.impagada{background:var(--arcilla)}
.cal .reserva:hover{filter:brightness(1.12)}
.leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--tinta-45)}
.leyenda span{display:inline-flex;align-items:center;gap:7px}
.leyenda i{width:12px;height:12px;border-radius:4px;display:block}

/* ── tablas ────────────────────────────────────────────────────────────────── */
.tabla-envoltorio{overflow-x:auto;border-radius:var(--r-l);border:1px solid var(--linea);
  background:var(--hueso)}
table.lista{border-collapse:collapse;width:100%;min-width:680px;font-size:14.5px}
table.lista th{text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--tinta-45);padding:13px 16px;border-bottom:1px solid var(--linea)}
table.lista td{padding:13px 16px;border-bottom:1px solid #F0EBDD}
table.lista tr:last-child td{border-bottom:0}
table.lista tbody tr:hover{background:#FAF6EB}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fuerte{font-weight:600}

/* ── liquidaciones ─────────────────────────────────────────────────────────── */
.liq{padding:20px 22px;margin-bottom:14px}
.liq header{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-bottom:14px;flex-wrap:wrap}
.liq h3{font-size:20px}
.liq .lineas{display:grid;gap:8px;font-size:14.5px}
.liq .linea{display:flex;justify-content:space-between;gap:14px}
.liq .linea.total{border-top:1.5px solid var(--tinta);margin-top:8px;padding-top:10px;
  font-family:var(--display);font-weight:700;font-size:20px}
.liq .resta{color:var(--arcilla)}

/* ── formulario en panel lateral ───────────────────────────────────────────── */
.velo{position:fixed;inset:0;background:rgba(20,20,15,.42);backdrop-filter:blur(3px);z-index:40}
.cajon{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--hueso);
  z-index:41;padding:26px 26px 40px;overflow-y:auto;box-shadow:var(--sombra-alta);
  display:flex;flex-direction:column;gap:16px}
.cajon h2{font-size:25px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:13px;font-weight:600;color:var(--tinta-70)}
.campo input,.campo select,.campo textarea{border:1.5px solid var(--linea);border-radius:var(--r-s);
  padding:10px 12px;background:#fff;outline:0}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--tinta)}
.pareja{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acciones{display:flex;gap:10px;margin-top:6px}

.aviso{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:var(--tinta);color:var(--hueso);padding:12px 22px;border-radius:999px;
  font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.aviso.visible{opacity:1;transform:translateX(-50%) translateY(0)}

.vacio{padding:44px 20px;text-align:center;color:var(--tinta-45)}
.vacio h3{font-size:20px;color:var(--tinta);margin-bottom:6px}

/* ── movil ─────────────────────────────────────────────────────────────────── */
@media (max-width:860px){
  /* min-width:0 es lo que impide que una tabla ancha estire la columna del grid y saque
     scroll horizontal a TODA la pagina: sin esto la tabla desborda por fuera del cajon
     que si sabe hacer scroll. */
  .marco{grid-template-columns:minmax(0,1fr)}
  .panel{min-width:0;max-width:100%}
  .lateral{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;flex-direction:row;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:30;gap:0}
  .lateral .marca,.lateral .pie{display:none}
  .menu{flex-direction:row;width:100%;justify-content:space-between}
  .menu button{flex-direction:column;gap:3px;font-size:10.5px;padding:7px 4px;text-align:center;
    border-radius:12px}
  .menu button span.txt{display:block}
  .panel{padding:20px 16px 110px}
  .pareja{grid-template-columns:1fr}
}

/* La etiqueta del modo va arriba a la izquierda de la foto, para distinguir de un vistazo
   una propiedad de temporada de una de larga duracion sin tener que leer la ficha. */
.prop .foto .etiqueta{top:auto;bottom:12px}
.prop .foto .etiqueta.modo{top:12px;bottom:auto;
  background:rgba(20,20,15,.78);color:var(--hueso);border:0}