/* =========================================================================
   Solicitud de alquiler — hoja de estilos
   Sin dependencias, sin build. Todo el color sale de --color (config.php).
   ========================================================================= */

:root {
  --color:        #1f5f4f;

  /* Los valores fijos son el respaldo por si el navegador no soporta
     color-mix(); si lo soporta, la segunda línea gana y el tono se
     deriva solo del color que pusiste en config.php. */
  --color-suave:  #eaf1ef;
  --color-suave:  color-mix(in srgb, var(--color) 10%, white);
  --color-borde:  #b8d0c9;
  --color-borde:  color-mix(in srgb, var(--color) 28%, white);

  --fondo:        #f2f1ed;
  --papel:        #ffffff;
  --tinta:        #1b1c1e;
  --tinta-suave:  #62656b;
  --linea:        #e2e3e6;
  --error:        #b3261e;
  --error-suave:  #fdf1f0;

  --radio:        12px;
  --sombra:       0 1px 2px rgba(20,22,26,.05), 0 8px 24px -12px rgba(20,22,26,.18);
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-suave: #1d2a27;
    --color-suave: color-mix(in srgb, var(--color) 22%, #16181b);
    --color-borde: #2f4a43;
    --color-borde: color-mix(in srgb, var(--color) 45%, #16181b);
    --fondo:       #121417;
    --papel:       #1b1e22;
    --tinta:       #e9eaec;
    --tinta-suave: #9ca1a8;
    --linea:       #2c3037;
    --error:       #f2b8b5;
    --error-suave: #2a1a19;
    --sombra:      0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 24px 16px 64px;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.hoja { max-width: 640px; margin: 0 auto; }

/* ---------- Cabecera ---------------------------------------------------- */

.cabecera { padding: 8px 4px 24px; }

.negocio {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color);
}

.cabecera h1 {
  margin: 0;
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 660;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.subtitulo { margin: 8px 0 0; color: var(--tinta-suave); font-size: 15px; }

/* ---------- Progreso ---------------------------------------------------- */

.progreso { margin-bottom: 20px; }

.progreso__barra {
  height: 4px;
  border-radius: 99px;
  background: var(--linea);
  overflow: hidden;
}

.progreso__relleno {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--color);
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}

.progreso__pasos {
  display: flex;
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.progreso__pasos::-webkit-scrollbar { display: none; }

.progreso__pasos li {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 4px 10px 4px 4px;
  border-radius: 99px;
  font-size: 13px;
  color: var(--tinta-suave);
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.progreso__pasos li span {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--linea);
  color: var(--tinta-suave);
  font-size: 12px;
  font-weight: 600;
}

.progreso__pasos li.activo { background: var(--color-suave); color: var(--color); font-weight: 600; }
.progreso__pasos li.activo span { background: var(--color); color: #fff; }
.progreso__pasos li.hecho span { background: var(--color-borde); color: var(--color); }

/* ---------- Pasos ------------------------------------------------------- */

.paso {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 28px 24px 24px;
  animation: entrar .32s cubic-bezier(.22,.61,.36,1);
}

@keyframes entrar {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .paso { animation: none; }
  .progreso__relleno { transition: none; }
}

.paso__cabecera { margin-bottom: 22px; }
.paso__cabecera h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 640;
  letter-spacing: -.01em;
}
.paso__cabecera p { margin: 4px 0 0; color: var(--tinta-suave); font-size: 14px; }

/* ---------- Campos ------------------------------------------------------ */

/* El espacio vertical entre campos lo aporta en su mayoría la línea de
   error reservada más abajo; por eso el hueco de la rejilla es pequeño. */
.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 16px; }

.campo { min-width: 0; display: flex; flex-direction: column; }
.campo--completo { grid-column: 1 / -1; }
.campo--mitad    { grid-column: span 1; }

/* El control se pega al fondo de su celda. Así dos campos que van lado a
   lado quedan alineados aunque uno tenga texto de ayuda y el otro no, o
   aunque una etiqueta ocupe dos líneas y la otra una. */
.campo > fieldset { display: flex; flex-direction: column; flex: 1 1 auto; }
.campo > input,
.campo > select,
.campo > textarea,
.campo > .con-prefijo,
.campo .opciones { margin-top: auto; }

@media (max-width: 520px) {
  .rejilla { grid-template-columns: 1fr; }
  .campo--mitad { grid-column: 1 / -1; }
}

.campo fieldset { margin: 0; padding: 0; border: 0; }

.etiqueta {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 560;
}

.req { color: var(--color); }

.ayuda { margin: -2px 0 8px; font-size: 13px; color: var(--tinta-suave); }

input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], textarea, select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: 16px; /* evita el zoom automático en iPhone */
  transition: border-color .15s, box-shadow .15s;
}

textarea { resize: vertical; min-height: 76px; }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%),
                    linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%);
  background-position: calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color);
  box-shadow: 0 0 0 3px var(--color-suave);
}

.con-prefijo { position: relative; }
.con-prefijo .prefijo {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--tinta-suave); font-size: 15px; pointer-events: none;
}
.con-prefijo input { padding-left: 52px; }

/* Opciones tipo tarjeta */
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }

.opcion {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 9px;
  cursor: pointer;
  font-size: 15px;
  transition: border-color .15s, background .15s;
}
.opcion:hover { border-color: var(--color-borde); }

.opcion input { accent-color: var(--color); margin: 0; width: 17px; height: 17px; }

.opcion:has(input:checked) {
  border-color: var(--color);
  background: var(--color-suave);
  font-weight: 550;
}

.opcion:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--color-suave); }

/* ---------- Subgrupos y campos a demanda -------------------------------- */

.subgrupo { grid-column: 1 / -1; }

/* Botón que revela lo opcional. Se ve como una acción, no como un campo:
   lo opcional no debería parecer una pregunta más esperando respuesta. */
.revelar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 4px;
  padding: 9px 15px;
  border: 1px dashed var(--linea);
  border-radius: 9px;
  background: transparent;
  color: var(--tinta-suave);
  font: inherit;
  font-size: 14px;
  font-weight: 530;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.revelar:hover { border-color: var(--color); color: var(--color); }
.revelar:focus-visible { outline: 2px solid var(--color); outline-offset: 2px; }
.revelar span { font-size: 16px; line-height: 1; }

.subgrupo__cuerpo {
  margin: 14px 0 4px;
  padding-left: 15px;
  border-left: 2px solid var(--color-borde);
}

.subgrupo__titulo {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color);
}

/* Errores
   La línea reserva su altura SIEMPRE, incluso vacía. Si se ocultara al
   estar vacía, cada campo que la persona corrige encogería y el resto del
   formulario daría un salto hacia arriba justo debajo del cursor. */
.error {
  margin: 5px 0 0;
  min-height: 1.3em;
  font-size: 13px;
  line-height: 1.3;
  color: var(--error);
}

.campo--error input, .campo--error textarea, .campo--error select {
  border-color: var(--error);
  background: var(--error-suave);
}

.aviso {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 9px;
  font-size: 14px;
}
.aviso--error { background: var(--error-suave); color: var(--error); border: 1px solid var(--error); }

/* Trampa para robots */
.trampa {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Resumen del último paso ------------------------------------- */

.resumen { display: grid; gap: 20px; }

.resumen__grupo { }
.resumen__titulo {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color);
}

.resumen__fila {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 14px;
}
.resumen__fila dt { color: var(--tinta-suave); margin: 0; flex: 0 1 auto; }
.resumen__fila dd { margin: 0; font-weight: 550; text-align: right; overflow-wrap: anywhere; }

.resumen__editar {
  margin-top: 8px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color);
  font: inherit;
  font-size: 13px;
  font-weight: 560;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consentimiento {
  display: flex;
  gap: 11px;
  margin-top: 26px;
  padding: 15px;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: var(--fondo);
  font-size: 13.5px;
  line-height: 1.5;
  cursor: pointer;
}
.consentimiento input { accent-color: var(--color); width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; }

/* ---------- Botones ----------------------------------------------------- */

.botonera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
}

.btn {
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--color);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 560;
  cursor: pointer;
  transition: filter .15s, transform .06s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color); outline-offset: 3px; }

.btn--suave { background: transparent; color: var(--tinta-suave); border-color: var(--linea); }
.btn--suave:hover { filter: none; border-color: var(--tinta-suave); color: var(--tinta); }

.btn--enviar { padding-inline: 28px; }
.btn[disabled] { opacity: .55; cursor: progress; }

/* ---------- Pie --------------------------------------------------------- */

.pie { margin-top: 20px; text-align: center; }
.pie p { margin: 0; font-size: 12.5px; color: var(--tinta-suave); }

/* ---------- Página de gracias ------------------------------------------- */

.gracias {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 44px 28px;
  text-align: center;
}
.gracias__marca {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--color-suave);
  color: var(--color);
}
.gracias h1 { margin: 0 0 8px; font-size: 24px; font-weight: 640; }
.gracias p  { margin: 0 auto; max-width: 40ch; color: var(--tinta-suave); font-size: 15px; }
.gracias .referencia {
  display: inline-block;
  margin-top: 20px;
  padding: 9px 18px;
  border-radius: 99px;
  background: var(--color-suave);
  color: var(--color);
  font-weight: 640;
  font-size: 15px;
}