/* ============================================================
   CDM Alquileres — estilos base para el módulo de reservas
   Para que el buscador, el calendario y el formulario de reserva
   se vean como el resto del sitio. Diseño y dirección: Macarena Atauri.

   Uso:
   - Si el módulo vive DENTRO del sitio: cargar después de css/styles.css.
     Ya hereda tipografías y variables; este archivo solo suma componentes.
   - Si el módulo es un iframe o una página aparte: cargar este archivo solo.
     El bloque "Tokens" repite las variables del sitio para que funcione suelto.
     Las tipografías hay que declararlas con las mismas rutas (ver guía, punto 3).

   Todas las clases empiezan con .cdm- para no chocar con el CSS del sistema.
   Medidas en rem (1rem = 16px en notebook; el sitio escala en pantallas grandes).
   ============================================================ */

/* ---------- Tokens (idénticos a css/styles.css) ---------- */
:root{
  --bg:#F6F2EA;      /* fondo general (crema cálida) */
  --beige:#EAE4D8;   /* bloques destacados: el de "Reservá tu estadía" */
  --white:#FFFCF6;   /* tarjetas, botones claros, bloques blancos */
  --ink:#2B2926;     /* texto fuerte, botón en hover, selección */
  --body:#55504A;    /* texto corrido */
  --title:#6F675E;   /* títulos y etiquetas */
  --loc:#8E877D;     /* texto secundario, ayudas, notas */
  --green:#3D4A3E;   /* acento: dirección/mapa, WhatsApp, bloque Experiencias */
  --line:#D9D1C3;    /* bordes y divisores */
  --line-strong:#B9AF9F; /* borde en hover */
  --error:#9A4A3C;   /* NUEVO para el módulo: errores (terracota apagado, no rojo puro) */

  --serif:'Canela Deck',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;

  --radius-pill:999px;  /* botones */
  --radius-card:.625rem;/* tarjetas y campos (10px) */
  --radius-lg:1.125rem; /* paneles grandes / tarjeta del hero en celular (18px) */

  --shadow-sm:0 .375rem 1.375rem rgba(43,41,38,.14);
  --shadow-md:0 .5rem 1.5rem rgba(43,41,38,.13);
  --shadow-hover:0 .875rem 1.875rem rgba(43,41,38,.24);
  --shadow-panel:0 .875rem 2.5rem rgba(43,41,38,.12);

  --ease:cubic-bezier(.2,.7,.2,1);
  --t:.35s;
}

/* ---------- Contenedor del módulo ---------- */
.cdm-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.25rem,3vw,2.25rem);box-shadow:var(--shadow-panel);color:var(--body);font-family:var(--sans)}
.cdm-panel h2,.cdm-panel h3{font-family:var(--serif);font-weight:400;color:var(--title);margin:0}
.cdm-panel h2{font-size:clamp(1.8rem,2.78vw,2.5rem);line-height:1.06}
.cdm-panel h3{font-size:clamp(1.5rem,2.1vw,1.95rem);line-height:1.2}

/* ---------- Campos ---------- */
.cdm-field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.cdm-label{font-family:var(--sans);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;color:var(--title);line-height:1.3}
.cdm-input,.cdm-select{font:inherit;font-size:.95rem;color:var(--ink);background:var(--white);
  height:3.25rem;padding:0 1.125rem;border:1px solid var(--line);border-radius:var(--radius-card);
  transition:border-color var(--t) ease,box-shadow var(--t) ease;width:100%;appearance:none}
.cdm-input::placeholder{color:var(--loc)}
.cdm-input:hover,.cdm-select:hover{border-color:var(--line-strong)}
.cdm-input:focus,.cdm-select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(43,41,38,.08)}
.cdm-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2926' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:1.0625rem;padding-right:2.75rem}
.cdm-help{font-size:.75rem;color:var(--loc);line-height:1.5}
.cdm-field.is-error .cdm-input,.cdm-field.is-error .cdm-select{border-color:var(--error)}
.cdm-field.is-error .cdm-help{color:var(--error)}
textarea.cdm-input{height:auto;min-height:7.5rem;padding:.875rem 1.125rem;line-height:1.6;resize:vertical}

/* Buscador en una fila (fechas · huéspedes · edificio · botón); en celular se apila */
.cdm-search{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:.875rem;align-items:end}
@media (max-width:960px){.cdm-search{grid-template-columns:1fr 1fr}.cdm-search .cdm-btn{grid-column:1/-1;justify-content:center}}
@media (max-width:560px){.cdm-search{grid-template-columns:1fr}}

/* ---------- Selector de huéspedes ---------- */
.cdm-stepper{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:3.25rem;padding:0 .5rem 0 1.125rem;
  border:1px solid var(--line);border-radius:var(--radius-card);background:var(--white);color:var(--ink);font-size:.95rem}
.cdm-stepper button{width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid rgba(43,41,38,.32);background:transparent;color:var(--ink);
  font:500 1.05rem/1 var(--sans);cursor:pointer;display:grid;place-items:center;transition:background var(--t) ease,color var(--t) ease,border-color var(--t) ease}
.cdm-stepper button:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.cdm-stepper button:disabled{opacity:.35;cursor:default;background:transparent;color:var(--ink);border-color:rgba(43,41,38,.32)}

/* ---------- Opción (radio / checkbox) ---------- */
.cdm-check{display:flex;align-items:flex-start;gap:.75rem;font-size:.9rem;color:var(--body);line-height:1.5;cursor:pointer}
.cdm-check input{appearance:none;flex:none;width:1.125rem;height:1.125rem;margin-top:.15rem;border:1px solid rgba(43,41,38,.45);border-radius:.25rem;background:var(--white);display:grid;place-items:center;transition:background var(--t) ease}
.cdm-check input[type=radio]{border-radius:50%}
.cdm-check input:checked{background:var(--ink);border-color:var(--ink)}
.cdm-check input:checked::after{content:'';width:.375rem;height:.375rem;border-radius:50%;background:var(--white)}

/* ---------- Botones (mismos que el sitio) ---------- */
.cdm-btn{display:inline-flex;align-items:center;gap:.8em;font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  line-height:1;padding:1rem 1.875rem;border-radius:var(--radius-pill);border:0;cursor:pointer;white-space:nowrap;
  color:var(--ink);background:var(--white);box-shadow:var(--shadow-md);
  transition:background var(--t) ease,color var(--t) ease,transform var(--t) ease,box-shadow var(--t) ease}
.cdm-btn::after{content:'→';font-size:.9rem;letter-spacing:0;transition:transform var(--t) ease}
.cdm-btn:hover{background:var(--ink);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.cdm-btn:hover::after{transform:translateX(.25rem)}
.cdm-btn.no-arrow::after{content:none}
/* sobre fondo blanco el botón claro pierde contraste: usar la versión con contorno o la oscura */
.cdm-btn--dark{background:var(--ink);color:var(--white)}
.cdm-btn--dark:hover{background:var(--green)}
.cdm-btn--outline{background:transparent;box-shadow:none;border:1px solid rgba(43,41,38,.32);padding:.6875rem 1.25rem;font-size:.72rem;letter-spacing:.09em}
.cdm-btn--outline:hover{background:var(--ink);border-color:var(--ink);color:var(--white);box-shadow:0 .5rem 1.25rem rgba(43,41,38,.16)}
.cdm-btn:disabled,.cdm-btn[aria-disabled=true]{opacity:.45;cursor:default;transform:none;box-shadow:none}

/* ---------- Calendario ---------- */
.cdm-cal{font-family:var(--sans);color:var(--ink);user-select:none}
.cdm-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.cdm-cal__month{font-family:var(--serif);font-size:1.35rem;color:var(--title)}
.cdm-cal__nav{width:2.375rem;height:2.375rem;border-radius:50%;border:1px solid rgba(43,41,38,.32);background:transparent;cursor:pointer;color:var(--ink);transition:background var(--t) ease,color var(--t) ease}
.cdm-cal__nav:hover{background:var(--ink);color:var(--white)}
.cdm-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem 0}
.cdm-cal__dow{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--loc);text-align:center;padding:.5rem 0}
.cdm-day{height:2.75rem;display:grid;place-items:center;font-size:.9rem;border:0;background:transparent;color:var(--ink);cursor:pointer;position:relative}
.cdm-day::before{content:'';position:absolute;inset:.125rem;border-radius:50%;transition:background var(--t) ease}
.cdm-day span{position:relative}
.cdm-day:hover::before{background:var(--beige)}
.cdm-day.is-today span{border-bottom:1px solid currentColor}
.cdm-day.is-range{background:var(--beige)}                  /* noches intermedias */
.cdm-day.is-start,.cdm-day.is-end{color:var(--white)}
.cdm-day.is-start::before,.cdm-day.is-end::before{background:var(--ink)}
.cdm-day.is-start{background:linear-gradient(90deg,transparent 50%,var(--beige) 50%)}
.cdm-day.is-end{background:linear-gradient(90deg,var(--beige) 50%,transparent 50%)}
.cdm-day.is-unavailable,.cdm-day:disabled{color:#C2B9AB;text-decoration:line-through;cursor:default}
.cdm-day.is-unavailable:hover::before,.cdm-day:disabled:hover::before{background:transparent}

/* ---------- Resultado / unidad disponible ---------- */
.cdm-result{display:grid;grid-template-columns:minmax(0,11rem) 1fr auto;gap:1.25rem;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius-card);background:var(--white);overflow:hidden;
  transition:border-color var(--t) ease,box-shadow var(--t) ease}
.cdm-result:hover{border-color:var(--line-strong);box-shadow:0 .625rem 1.75rem rgba(43,41,38,.08)}
.cdm-result img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.cdm-result__title{font-family:var(--serif);font-size:1.4rem;color:var(--title);line-height:1.15}
.cdm-result__meta{margin-top:.4rem;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;font-weight:500;color:var(--ink)}
.cdm-result__price{padding-right:1.25rem;text-align:right;font-size:.8rem;color:var(--loc)}
.cdm-result__price b{display:block;font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--ink)}
@media (max-width:680px){.cdm-result{grid-template-columns:1fr}.cdm-result__body,.cdm-result__price{padding:0 1.125rem 1.125rem;text-align:left}}

/* ---------- Resumen de la reserva ---------- */
.cdm-summary{border-top:1px solid var(--line);margin-top:1.25rem}
.cdm-summary__row{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.cdm-summary__row dt{color:var(--loc)}
.cdm-summary__row dd{margin:0;color:var(--ink);text-align:right}
.cdm-summary__total{font-weight:600;font-size:1rem}

/* ---------- Mensajes ---------- */
.cdm-note{font-size:.75rem;line-height:1.6;letter-spacing:.02em;color:var(--loc)}
.cdm-alert{display:flex;gap:.75rem;padding:.875rem 1.125rem;border-radius:var(--radius-card);font-size:.88rem;line-height:1.55;border:1px solid var(--line);background:var(--bg);color:var(--body)}
.cdm-alert--ok{border-color:rgba(61,74,62,.35);background:rgba(61,74,62,.06);color:var(--green)}
.cdm-alert--error{border-color:rgba(154,74,60,.35);background:rgba(154,74,60,.06);color:var(--error)}

/* ---------- Carga ---------- */
.cdm-loading{display:inline-block;width:1.375rem;height:1.375rem;border-radius:50%;border:1.5px solid var(--line);border-top-color:var(--ink);animation:cdmSpin .9s linear infinite}
@keyframes cdmSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cdm-loading{animation-duration:2.4s}}