:root{
  --bg:#ffffff;          /* fondo global blanco */
  --panel:#f7fafc;       /* panel claro */
  --card:#ffffff;        /* tarjetas claras */
  --muted:#5f6b7a;       /* texto secundario */
  --brand:#31B8BD;       /* verde de acción */
  --brand-dark:#23538D;  /* azul institucional */
  --text:#111827;        /* texto principal en fondo claro */
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;
  color:var(--text);
  background:#ffffff; /* fondo blanco plano en todo el sistema */
}

/* Botones */
.btn{
  padding:.8rem 1rem;
  border:1px solid #1f2937;
  background:#111827;   /* botón base oscuro, legible */
  color:#fff;
  border-radius:.75rem;
  cursor:pointer;
}
.btn[disabled]{ opacity:.5; cursor:not-allowed }
.btn.primary{
  background:var(--brand);   /* verde de acción */
  border-color:var(--brand);
  color:#fff;
}



.scene{
  position:relative;
  height:100vh;
  perspective:1600px;
  overflow:hidden;
  background:#ffffff;
}



/* Escena pasillo (fondo claro) */
.scene{
  position:relative;
  height:100vh;
  perspective:1600px;
  /* permite scroll vertical si el contenido crece */
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  background:#ffffff;
}


/* === AJUSTE: subir TODO el bloque (logo, puerta, props) === */
.hallway{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 30% at 50% 0%, rgba(35,83,141,.06), transparent 60%),
    linear-gradient(180deg,#ffffff 0%, #f7fafc 70%, #f1f5f9 100%);
  display:grid;
  justify-items:center;   /* centrado horizontal */
  align-content:start;    /* bloque pegado arriba */
  padding-top:10px;       /* separación mínima al top */
  grid-auto-rows:auto;
}

/* Puerta */
.door{
  width:240px; height:420px;
  transform-style:preserve-3d;
  transform:translateZ(0);
  will-change:transform;
  cursor:pointer;
}
.door-inner{
  position:relative;
  width:100%; height:100%;
  background:linear-gradient(180deg,#1f375a,#152745 70%);
  border:6px solid #0a1a33;
  border-radius:.5rem;
  box-shadow:
    0 10px 40px rgba(0,0,0,.6),
    inset 0 0 0 4px rgba(255,255,255,.06);
  transform-origin:left center;
  transition:transform 1.2s cubic-bezier(.22,1,.36,1);
}
.door.open .door-inner{ transform:rotateY(-100deg); }
.knob{
  position:absolute; right:26px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #dbeafe,#7dd3fc);
  box-shadow:0 0 12px rgba(49,184,189,.6);
}
.door-sign{
  position:absolute; left:50%; transform:translateX(-50%);
  top:24px; padding:.3rem .6rem;
  font-weight:600; letter-spacing:.5px;
  background:rgba(35,83,141,.35);
  border:1px solid rgba(255,255,255,.15);
  border-radius:.4rem;
  color:#fff; /* letrero blanco */
}

/* Botón saltar (si lo usas) */
.skip{
  position:absolute; right:14px; bottom:14px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.2);
  color:#fff; border-radius:.6rem;
  padding:.5rem .7rem; cursor:pointer;
}

/* Transición de cámara */
.scene.camera-in{ animation:camPush 1.4s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes camPush{
  0%{ transform:scale(1) }
  100%{ transform:scale(1.35) translateY(-4vh) }
}

/* Oficina */
.office{ position:relative; height:100vh; display:grid; place-items:center; }
.office.hidden{ display:none; }
.office .office-bg{ position:absolute; inset:0; background:transparent; } /* sin azul marino */
.office .desk{
  position:absolute; bottom:0; left:0; right:0;
  height:20vh;
  background:transparent;   /* sin franja oscura */
  box-shadow:none;
}

/* Tarjeta calendario — azul sólido y texto blanco */
.calendar-card{
  position:relative;
  z-index:2;
  width:min(920px, 90vw);
  background:var(--brand-dark);     /* azul sólido */
  border:none;
  border-radius:1.25rem;
  padding:1.2rem;
  box-shadow:0 20px 60px rgba(0,0,0,.1);
  color:#fff;
}
.calendar-card h1{
  margin:0 0 .2rem;
  font-size:clamp(1.4rem, 3vw, 2rem);
  font-weight:800;
  color:#fff;                        /* sin gradiente en título */
}
.subtitle{ margin:0 0 1rem; color:rgba(255,255,255,.85) }

/* Días de la semana (legibles sobre azul) */
.week-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:.6rem;
}
.week-grid .day{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.15);
  border-radius:.9rem; padding:.8rem; cursor:pointer;
  text-align:center;
  color:#fff;
}
.week-grid .day[aria-selected="true"]{
  outline:2px solid var(--brand);
  box-shadow:none;
}
.week-grid .day .date{ font-size:1.4rem; font-weight:800 }
.week-grid .day .label{ color:rgba(255,255,255,.85); font-size:.9rem }

/* Slots legibles sobre azul */
.slots-wrap{ margin-top:1rem }
.slots{ display:flex; flex-wrap:wrap; gap:.5rem }
.slot{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.15);
  border-radius:.6rem; padding:.55rem .7rem;
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  color:#fff;
}
.slot input{ accent-color: var(--brand); }
.slot.taken{ opacity:.45; pointer-events:none; text-decoration:line-through; }
.actions{ margin-top:1rem; display:flex; justify-content:flex-end }

/* Modal (oscuro, legible) */
.modal{
  position:fixed; inset:0;
  display:grid; align-items:start;
  padding:24px;
  background:rgba(0,0,0,.5);
  overflow:auto;
}
.modal.hidden{ display:none; pointer-events:none; }
.modal-card{
  width:min(680px, 92vw);
  background:#0b1220; border:1px solid rgba(255,255,255,.12);
  border-radius:1rem; padding:1rem;
  max-height:90vh; overflow:auto;
  color:#fff;                         /* texto blanco en modal */
}
.form .grid{ display:grid; gap:.8rem; grid-template-columns:1fr 1fr 1fr; }
.form label{ display:flex; flex-direction:column; gap:.35rem; font-size:.95rem; color:#fff; }
.form input{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  border-radius:.6rem; padding:.6rem .7rem;
}
.consent{ display:flex; align-items:center; gap:.6rem; margin-top:.6rem }
.consent input{ accent-color:var(--brand); color:#fff }
.form-actions{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:.8rem }

/* Confirmación dentro del modal (texto blanco) */
.post-booking.hidden{ display:none; }
.post-booking .result-box{
  margin-top:1rem; padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.15);
}
.post-booking .result-title{ margin:0 0 .4rem; font-weight:800; color:#fff; }
.post-booking .result-text{ color:#fff; }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:#0b1220; border:1px solid rgba(255,255,255,.15);
  border-radius:.7rem; padding:.6rem .9rem; color:#fff;
}
.toast.hidden{ display:none }

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .door-inner, .scene.camera-in{ transition:none; animation:none }
}

/* Responsive */
@media (max-width: 820px){
  .form .grid{ grid-template-columns:1fr }
  .week-grid{ grid-template-columns:repeat(2,1fr) }
}

/* Helper universal */
.hidden{ display:none !important; }

/* === Logo en flujo: encima de la puerta, margen mínimo === */
.logo-slot{
  position:static;               /* en flujo (sin absolute/top calc) */
  width:200px; height:200px;
  margin-bottom:12px;            /* separación con la puerta */
  display:grid; place-items:center;
  pointer-events:none;           /* no bloquea el clic de la puerta */
}
.logo-slot img{
  width:100%;
  height:auto;
  display:block;
}

/* Cross-fade: la escena (puerta) se desvanece y la oficina aparece */
.hallway{ transition: opacity .6s ease; }
.scene.fade-away .hallway{ opacity: 0; }
.office{ opacity: 0; transition: opacity .6s ease; }
.office.show{ opacity: 1; }

/* Plantita SVG: posición absoluta; el JS define top/left */
.plant-svg{
  position:absolute;
  width:220px;
  height:auto;
  pointer-events:none;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.12));
}
.plant-svg img{
  display:block;
  width:100%; height:auto;
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 820px){
  .plant-svg{ width:160px; }
}

/* Sillón SVG: el JS pone top/left; aquí solo tamaño/estética */
.sofa-svg{
  position:absolute;
  width:320px;
  height:auto;
  pointer-events:none;
  inset:auto;               /* resetea top/right/bottom/left previos */
}
.sofa-svg img{
  display:block;
  width:100%;
  height:auto;
}

/* Planta un poco más chica (override final) */
.plant-svg{ width:160px; }

/* (Opcional) en móvil */
@media (max-width: 820px){
  .sofa-svg{  width:240px; }
  .plant-svg{ width:140px; }
}

/* fondo blanco del SVG se integra en blanco */
.plant-svg img,
.sofa-svg img{
  mix-blend-mode: multiply;
}

/* === Indicaciones: 90% del ancho de pantalla, centradas === */

.info-box{
  width:90%;             /* 90% del ancho */
  
  background:#23538D;     /* azul sólido */
  color:#fff;
  border-radius:1rem;
  padding:1.5rem 2rem;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}
.info-box h2{
  margin-top:0;
  margin-bottom:.5rem;
  font-size:1.5rem;
  color:#31B8BD; /* verde para resaltar */
}
.info-box h3{
  margin-top:1.5rem;
  margin-bottom:.5rem;
  font-size:1.2rem;
  color:#fff;
}
.info-box p{ margin:0 0 1rem; line-height:1.5; }
.info-box ul{
  margin:0; padding-left:1.2rem;
  list-style:disc;
}
.info-box li{ margin-bottom:.5rem; }

/* Stack vertical: logo → puerta → texto con separación fija */
.door-stack{
  display: grid;
  justify-items: center;
  row-gap: 28px;          /* ← separación fija pedida */
  padding-top: 10px;      /* margen mínimo al top */
}

/* El texto ya no es absolute; ocupa ancho y se centra */
.hallway .info-box{
  position: static !important;
  width: 90vw;            /* 90% del ancho de pantalla, sin max */
  margin: 0 auto;
  box-sizing: border-box;
}

/* El logo va en flujo, encima de la puerta */
.logo-slot{
  position: static;
  width: 200px;
  height: 200px;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.logo-slot img{ width:100%; height:auto; display:block; }

/* (Opcional) en móvil, un poco menos de separación */
@media (max-width: 820px){
  .door-stack{ row-gap: 20px; }
}
/* ========== RESPONSIVE ========== */

/* Laptop/Tablet grande (<= 1200px) */
@media (max-width: 1200px){
  .calendar-card{ width: min(960px, 94vw); }
  .week-grid{ grid-template-columns: repeat(5, 1fr); gap: .6rem; }
  .slots{ gap:.5rem; }
}

/* Tablet (<= 992px) */
@media (max-width: 992px){
  .door{ width:220px; height:385px; }             /* escala ligera de puerta */
  .door-stack .logo-slot{ width:180px; height:180px; }
  .door-stack{ row-gap: 22px; }                    /* separa un poco menos */

  .calendar-card{ width: min(860px, 94vw); padding: 1rem; }
  .form .grid{ grid-template-columns: 1fr 1fr; }   /* 2 columnas en tablet */
}

/* Tablet chica / Phablet (<= 820px) */
@media (max-width: 820px){
  /* Texto inferior ancho completo y legible */
  .hallway .info-box{
    width: 94% !important;
    padding: 1rem 1.2rem;
  }

  /* Días en 2 columnas */
  .week-grid{ grid-template-columns: repeat(2, 1fr); }

  /* Reducir elementos decorativos para que no estorben */
  .plant-svg{ width: 140px; }
  .sofa-svg{  width: 240px; }

  .calendar-card h1{ font-size: clamp(1.2rem, 4.5vw, 1.6rem); }
  .subtitle{ font-size: .95rem; }
}

/* Móvil (<= 600px) */
@media (max-width: 600px){
  /* Si los props decorativos estorban, mejor ocultarlos en móvil */
  .plant-svg, .sofa-svg{ display: none !important; }

  .door{ width:200px; height:350px; }
  .door-stack .logo-slot{ width:150px; height:150px; }
  .door-stack{ row-gap: 18px; }

  .hallway .info-box{
    width: 92% !important;
    padding: .9rem 1rem;
    border-radius: .8rem;
  }

  .calendar-card{
    width: 94vw;
    border-radius: 1rem;
    padding: .9rem;
  }

  /* Form en una sola columna */
  .form .grid{ grid-template-columns: 1fr; gap:.7rem; }
  .form input{ padding:.55rem .65rem; }

  /* Chips de horarios: filas con buen tacto */
  .slots{ gap:.45rem; }
  .slot{ padding:.5rem .65rem; }

  /* Botones más cómodos al dedo */
  .btn{ padding:.7rem .9rem; border-radius: .65rem; }
  .btn.primary{ font-weight: 600; }

  .toast{ bottom: 14px; }
}

/* Móvil chico (<= 400px) */
@media (max-width: 400px){
  .door{ width:180px; height:320px; }
  .door-stack .logo-slot{ width:130px; height:130px; }
  .door-stack{ row-gap: 16px; }

  .calendar-card{
    width: 95vw;
    padding: .8rem;
  }
  .calendar-card h1{ font-size: 1.1rem; }
  .subtitle{ font-size: .9rem; }

  .week-grid .day .date{ font-size: 1.2rem; }
  .week-grid .day .label{ font-size: .85rem; }

  .slot span{ font-size: .95rem; }
}


/* ===== FIX móvil: layout fluido + scroll ===== */
@media (max-width: 640px){
  /* Que la escena pueda hacer scroll vertical en móviles */
  .scene{
    height:auto;
    min-height:100svh;          /* respeta barra de iOS */
    overflow-y:auto;
  }
  .hallway{
    position:relative;
    min-height:calc(100svh - 16px);
    padding-top:10px;
  }

  /* Ocultamos props para no tapar UI en pantallas pequeñas */
  .plant-svg,
  .sofa-svg{
    display:none;
  }

  /* Logo pegado arriba */
  .logo-slot{ top:10px !important; }

  /* La puerta centrada */
  .door{ margin:0 auto; }

  /* Indicaciones: que bajen al flujo normal, 100% legibles y scrollables */
  .info-box{
    position:static !important;
    width:92% !important;
    max-width:92% !important;
    transform:none !important;
    top:auto !important;
    margin:16px auto 0 !important;
  }

  /* Tarjeta más contenida y legible en móvil */
  .calendar-card{ width:92vw; }

  /* Formularios en una sola columna */
  .form .grid{ grid-template-columns:1fr; }

  /* Días y slots en columna (tap targets grandes) */
  .week-grid{ grid-template-columns:1fr; }
  .slots{ flex-direction:column; }

  /* Botones anchos (más fácil tocar) */
  .btn{ width:100%; }
}

/* Al abrir la oficina, aseguramos que lo de la escena ya no capture toques */
.scene.fade-away .hallway,
.scene.fade-away .info-box{
  pointer-events:none !important;
  opacity:0;
}