/*
 * Tasaciones CBRE — estilos del rediseño 2026.
 *
 * Todos los estilos se aplican bajo la clase raíz `.tasacion-redesign` para no
 * interferir con el layout antiguo. Se irán añadiendo a lo largo de las
 * fases del rediseño (step 1 → step 2+3 → step 4-5 → step 6 → éxito).
 *
 * Paleta y tipografías reutilizadas del CSS principal (variables :root ya
 * definidas en tasacion.css).
 */

/* =========================================================================
   Stepwizard horizontal de 4 stages
   ========================================================================= */

.tasacion-redesign .redesign-stepwizard {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  max-width: var(--max-with-container);
  margin: 0 auto;
  padding: 10px 0 0;
}

.tasacion-redesign .redesign-stage {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding-bottom: 8px;
}

.tasacion-redesign .redesign-stage-label {
  display: block;
  font-family: var(--main-font-medium);
  font-size: 14px;
  line-height: 1.25;
  /* Future stages: greenDark con alpha 40% (per JSX ProgressBarDesktop) */
  color: rgba(1, 42, 45, 0.4);
  margin-bottom: 10px;
  min-height: 2.5em; /* dos líneas para labels largas */
}

.tasacion-redesign .redesign-stage-label strong {
  color: rgba(1, 42, 45, 0.4);
}

.tasacion-redesign .redesign-stage-label strong {
  display: block;
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
  font-size: 16px;
}

.tasacion-redesign .redesign-stage::after {
  content: "";
  display: block;
  height: 6px;
  /* Future stages: greenSoft con alpha 25% (per JSX) */
  background-color: rgba(128, 187, 173, 0.25);
  border-radius: 4px;
}

/* stage activo: label en verde oscuro full + línea en verde soft full */
.tasacion-redesign .redesign-stage.is-active .redesign-stage-label,
.tasacion-redesign .redesign-stage.is-active .redesign-stage-label strong {
  color: var(--dark-green);
}

.tasacion-redesign .redesign-stage.is-active::after {
  background-color: var(--turquoise);
}

/* stages completados: mismo color que activo (per JSX) */
.tasacion-redesign .redesign-stage.is-done .redesign-stage-label,
.tasacion-redesign .redesign-stage.is-done .redesign-stage-label strong {
  color: var(--dark-green);
}

.tasacion-redesign .redesign-stage.is-done::after {
  background-color: var(--turquoise);
}

/* stage con error (pago/firma fallidos): label y barra en rojo principal */
.tasacion-redesign .redesign-stage.is-error .redesign-stage-label,
.tasacion-redesign .redesign-stage.is-error .redesign-stage-label strong {
  color: var(--main-error);
}

.tasacion-redesign .redesign-stage.is-error::after {
  background-color: var(--main-error);
}

/* =========================================================================
   Stepwizard legacy oculto (forzado).
   La regla legacy `tasacion.css:2699` (`@media screen and (max-width: 64.063em)`)
   aplica `.stepwizard { display: block !important; }`, lo que vence el
   `style="display:none"` inline del markup y revela el wizard antiguo de
   6 pasos en mobile. Anulamos con specificity superior + !important.
   ========================================================================= */
.tasacion-redesign .stepwizard.desktop-only {
  display: none !important;
}

/* Sticky payment bar — oculta por defecto en cualquier viewport.
   El CSS phone (@media (max-width: 640px)) la hace visible mediante
   `display: flex`. Sin esta regla por defecto, el `<button>` se
   renderiza con el estilo nativo del navegador en desktop. */
.tasacion-redesign .redesign-sticky-payment-bar {
  display: none;
}

/* =========================================================================
   Step pago — wrapper iframe Getnet
   El proveedor Getnet renderiza un logo "Getnet by Santander" en blanco
   con overflow-top respecto a la franja roja del header de su iframe;
   el cross-origin nos impide tocar su CSS, pero damos breathing room
   visual con padding-top y aseguramos que el contenido inferior cabe
   con un min-height generoso.
   ========================================================================= */

.tasacion-redesign .redesign-payment-iframe-wrapper {
  padding-top: 24px;
  min-height: 760px;
  background-color: #fff;
}

.tasacion-redesign .redesign-payment-iframe-wrapper > iframe {
  display: block;
  min-height: 760px;
}

/* =========================================================================
   Step 1 — layout con dos sub-pantallas
   ========================================================================= */

.tasacion-redesign .redesign-step1 {
  max-width: var(--max-with-container2);
  /* Espacio entre stepwizard y panel — JSX PageShellDesktop usa gap 48 */
  margin: 15px auto 0;
  padding: 0 30px;
}

.tasacion-redesign .redesign-step1-panel {
  background-color: #fff;
  /* Per JSX CardD: shadow lateral + inferior que aporta elevación */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.16);
  /* Per JSX Step1D: padding 48 uniforme dentro de la card */
  padding: 28px 48px 28px;
  margin-bottom: 15px;
}

/* Override para que el panel del step 1 ocupe el ancho completo del
   contenedor. Por defecto el legacy aplica .tasacion-section { width: 60% }
   para dejar hueco al mapa lateral, pero el rediseño ya integra el mapa
   dentro del panel. */
.tasacion-redesign .window-section .tasacion-section {
  width: 100%;
}

/* El mapa legacy que vivía a la derecha de .tasacion-section ya no se
   usa — el rediseño tiene su propio mapa dentro del panel. Si por algún
   motivo persiste en el DOM, lo ocultamos para evitar duplicados. */
.tasacion-redesign .window-section > .window-section-content > #map {
  display: none;
}

.tasacion-redesign .redesign-step1-title {
  font-family: var(--secondary-font);
  font-size: 32px;
  line-height: 1.13;
  color: var(--main-green);
  text-align: center;
  margin: 0 0 16px;
}

.tasacion-redesign .redesign-step1-subtitle {
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
  font-size: 18px;
  color: var(--main-green);
  text-align: center;
  margin: 0 0 16px;
}

/* Cards selección de modo.
   Nota sobre especificidad: el CSS legacy del template define
   `#step1-type { width:100%; justify-content:flex-start; border-bottom:...;
   column-gap:40px; padding-bottom:8px; }`. El selector ID (1,0,0) gana
   a un selector de dos clases (0,2,0), así que aquí incluimos
   `#step1-type` en el selector para empatar la especificidad y ganar. */
.tasacion-redesign #step1-type.redesign-mode-cards {
  display: flex;
  justify-content: center;
  gap: 32px;
  column-gap: 32px;
  /* width: fit-content para que el contenedor se ajuste exactamente al
       ancho de las dos cards + gap, sin excedente. Centrado con margin auto. */
  width: fit-content;
  margin: 0 auto 30px;
  /* Anulamos el border-bottom y padding-bottom heredados del legacy
       (visualmente innecesarios en el rediseño). */
  border-bottom: 0;
  padding-bottom: 0;
}

.tasacion-redesign .redesign-mode-card {
  /* Tamaño fijo per spec del usuario: 200×130 (no flex-grow). Las dos cards
       se centran horizontalmente gracias a `justify-content: center` del
       contenedor `.redesign-mode-cards`. */
  flex: 0 0 200px;
  max-width: 200px;
  /* min-height: 130px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 14px;
  background-color: #fff;
  border: 1px solid var(--gray);
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

.tasacion-redesign .redesign-mode-card:hover {
  border-color: var(--main-green);
}

.tasacion-redesign .redesign-mode-card.active {
  background-color: #80bbad59;
  border-color: var(--light-gray-2);
}

.tasacion-redesign .redesign-mode-card .redesign-mode-icon {
  /* Per JSX: IconPin size=48 / IconDoc size=44 */
  width: 36px;
  height: 36px;
  display: block;
}

.tasacion-redesign .redesign-mode-card .redesign-mode-icon path,
.tasacion-redesign .redesign-mode-card .redesign-mode-icon rect,
.tasacion-redesign .redesign-mode-card .redesign-mode-icon circle {
  stroke: var(--main-green);
  fill: none;
  stroke-width: 1.5;
}

.tasacion-redesign .redesign-mode-card .redesign-mode-label {
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
  font-size: 16px;
  color: var(--main-green);
  text-align: center;
}

/* Layout form + mapa */
.tasacion-redesign .redesign-search-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  /* max-width: 960px; */
  margin: 0 auto;
}

.tasacion-redesign .redesign-search-form {
  display: flex;
  flex-direction: column;
  /* Más respiro entre filas (per diseño: ~24px) */
  gap: 24px;
}

.tasacion-redesign .redesign-field {
  display: flex;
  flex-direction: column;
}

/* Hover de inputs/selects: el bloque compensatorio que vivía aquí ya no
   es necesario — `tasacion.css:1254-1264` ahora solo modifica
   `border-color` en hover, sin tocar padding ni border-width, así que
   no hay shift que neutralizar. */

.tasacion-redesign
  .redesign-field-slim
  .select2-container:not(.select2-container--disabled):not(
    .select2-container--open
  ):hover
  .select2-selection__rendered {
  padding-left: 17px !important;
  padding-right: 32px !important;
}

#ref-catastral-field {
  margin-bottom: 16px;
}

.redesign-field-slim .select2-container--default .select2-selection--single {
  height: 39px !important;
  line-height: 39px !important;
  border: none !important;
  border-radius: 0 !important;
}

.tasacion-redesign .redesign-field label {
  /* Per JSX LabelD: font-weight 700, color greenDark */
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1px;
  color: var(--dark-green);
  margin-top: 8px;
  display: block;
}

.tasacion-redesign .redesign-field input[type="text"],
.tasacion-redesign .redesign-field input[type="number"],
.tasacion-redesign .redesign-field select {
  height: 48px;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid var(--gray);
  background-color: #fff;
  color: var(--dark-green);
}

/* Select2 — el padding interno ya lo gestiona el componente; añadirlo
   aquí desplaza el placeholder/texto y no encaja con el line-height. */
.tasacion-redesign
  .redesign-field
  .select2-container
  .select2-selection--single {
  height: 48px;
  padding: 0;
  font-size: 16px;
  border: 1px solid var(--gray);
  background-color: #fff;
  color: var(--dark-green);
}

.tasacion-redesign
  .redesign-field
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 26px;
  padding-left: 16px;
  padding-right: 32px;
  color: var(--dark-green);
}

.tasacion-redesign
  .redesign-field
  .select2-container
  .select2-selection--single
  .select2-selection__arrow {
  height: 26px;
  right: 8px;
}

/* Input de búsqueda dentro del dropdown abierto — Select2 le aplica una
   fuente del browser por defecto. Forzamos Calibre + tamaño/colores
   coherentes con el resto de inputs del rediseño. */
.tasacion-redesign
  .select2-container--default
  .select2-search--dropdown
  .select2-search__field,
.select2-container--default.select2-container--open
  .select2-search--dropdown
  .select2-search__field {
  font-family: var(--main-font);
  font-size: 16px;
  color: var(--dark-green);
  border: 1px solid var(--gray);
  padding: 8px 12px;
  background-color: #fff;
  outline: none;
}

.tasacion-redesign .select2-results__option,
.select2-container--open .select2-results__option {
  font-family: var(--main-font);
  font-size: 15px;
  color: var(--dark-green);
}

/* "Número" + botón "Buscar vivienda" en la misma línea (per JSX Step1UbicD).
   Usamos un wrapper flex donde el campo ocupa una porción mínima fija y
   el botón se alinea a la derecha. */
.tasacion-redesign .redesign-search-form .redesign-field-number {
  flex: 0 0 200px;
  max-width: 200px;
}

.tasacion-redesign .redesign-number-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.tasacion-redesign .redesign-search-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 0;
  flex: 1;
}

.tasacion-redesign .redesign-btn-primary {
  background-color: var(--main-green);
  color: #fff;
  font-family: var(--main-font-medium);
  font-size: 16px;
  padding: 10px 28px;
  border: 0;
  cursor: pointer;
  min-height: 39px;
}

.tasacion-redesign .redesign-btn-primary:disabled,
.tasacion-redesign .redesign-btn-primary.disabled {
  background-color: var(--light-gray-3);
  color: var(--gray2);
  cursor: not-allowed;
}

.tasacion-redesign .redesign-search-map {
  min-height: 260px;
}

.tasacion-redesign .redesign-search-map #map {
  width: 100%;
  height: 100%;
  min-height: 260px;
  margin: 0;
}

.tasacion-redesign .redesign-error {
  color: var(--main-error);
  font-family: var(--main-font-semi-bold);
  font-size: 14px;
  margin-top: 8px;
}

/* =========================================================================
   Step 2 + 3 unificado (Fase 4) — form izq + sidebar derecho
   ========================================================================= */

.tasacion-redesign .redesign-stepwizard,
.tasacion-redesign .redesign-step2 {
  max-width: var(--max-with-container2);
  margin: 15px auto 0;
  padding: 0 30px;
}

.tasacion-redesign .redesign-step2-card {
  background-color: #fff;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.16);
  display: grid;
  grid-template-columns: 67% 33%;
  margin-bottom: 48px;
}

/* Columna izquierda: formulario */
.tasacion-redesign .redesign-step2-form {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

.tasacion-redesign .redesign-step2-header {
  display: flex;
  flex-direction: column;
}

.tasacion-redesign .redesign-step2-title {
  margin: 0;
  font-family: var(--secondary-font);
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  color: var(--main-green);
}

/* Segunda línea del título (CP, municipio, provincia) — debajo de la calle. */
.tasacion-redesign .redesign-step2-title .full-address-location {
  display: block;
}

.tasacion-redesign .redesign-step2-subtitle {
  margin: 0;
  font-family: var(--main-font-medium);
  font-weight: 500;
  font-size: 16px;
  color: var(--main-green);
}

.tasacion-redesign .redesign-step2-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Layout 6/6 — pago + motivo lado a lado en desktop, stack en mobile (Fase 4c). */
.tasacion-redesign .redesign-step2-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 1199px) {
  .tasacion-redesign .redesign-step2-row-half {
    grid-template-columns: 1fr;
  }
}

/* Bloque "Selecciona el motivo de la tasación" (Fase 4c) — hereda toda la
   estética de `.redesign-payment-methods` / `.redesign-payment-label` (el
   check `:before` legacy + el contenido del label). Aquí sólo:
   1) Forzamos las dos labels lado a lado (sin wrap) y que compartan el
      ancho de la columna para que quepan en la mitad del row 6/6.
   2) Añadimos tipografía al `<span>` que sustituye al `<img>` del bloque
      de pago. */
.tasacion-redesign .redesign-payment-methods.redesign-purpose-methods {
  flex-wrap: nowrap;
  align-items: stretch;
}

.tasacion-redesign .redesign-purpose-label {
  flex: 1 1 0;
  min-width: 0;
}

.tasacion-redesign .redesign-purpose-label > span {
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: var(--dark-green);
}

.tasacion-redesign .redesign-section-title {
  margin: 0;
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
  font-size: 14px;
  line-height: 19px;
  color: var(--fourth-green);
}

.tasacion-redesign .redesign-step2-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tasacion-redesign .redesign-row {
  display: grid;
  gap: 32px;
}

/* Address block (Calle/Municipio/CP/Provincia): keeps the 8px row gap
   provided by .redesign-step2-fields. Hidden when catastro returned all
   the data; JS removes .is-hidden if anything is missing. */
.tasacion-redesign .redesign-address-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tasacion-redesign .redesign-address-block.is-hidden {
  display: none;
}

.tasacion-redesign .redesign-row-1 {
  grid-template-columns: 1fr;
}
.tasacion-redesign .redesign-row-2 {
  grid-template-columns: 1fr 1fr;
}
.tasacion-redesign .redesign-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Inputs slim 39px (per JSX FieldSlim) */
.tasacion-redesign .redesign-field-slim label {
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
  font-size: 14px;
  line-height: 19px;
  color: var(--main-green);
  margin-bottom: 8px;
  display: block;
}

.tasacion-redesign .redesign-field-slim input[type="text"],
.tasacion-redesign .redesign-field-slim input[type="email"],
.tasacion-redesign .redesign-field-slim input[type="tel"],
.tasacion-redesign .redesign-field-slim input[type="number"],
.tasacion-redesign .redesign-field-slim select {
  width: 100%;
  height: 39px;
  box-sizing: border-box;
  padding: 0 17px;
  border: 1px solid var(--gray);
  border-radius: 0;
  background: #fff;
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  color: var(--dark-green);
  outline: none;
}

.tasacion-redesign .redesign-field-slim input::placeholder {
  color: var(--gray2);
}

/* Select2 dentro de los campos slim del step 2: igualar altura a 39px y
   tipografía 14px para alinear con los inputs/selects vecinos. */
.tasacion-redesign
  .redesign-field-slim
  .select2-container
  .select2-selection--single {
  width: 100%;
  height: 39px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--gray);
  border-radius: 0;
  background: #fff;
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 14px;
  color: var(--dark-green);
}

.tasacion-redesign
  .redesign-field-slim
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered,
.tasacion-redesign
  .redesign-field-slim
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  height: 39px;
  line-height: 37px !important;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 16px;
  padding-right: 32px;
  font-size: 14px;
  color: var(--dark-green);
}

.redesign-field-slim
  .select2-container:not(.select2-container--disabled):not(
    .select2-container--open
  ):hover
  .select2-search--dropdown
  .select2-search__field,
.redesign-field-slim
  .select2-container:not(.select2-container--disabled):not(
    .select2-container--open
  ):hover
  .select2-selection__rendered {
  /* border: 2px transparent !important; */
  line-height: 39px;
}

.tasacion-redesign
  .redesign-field-slim
  .select2-container
  .select2-selection--single
  .select2-selection__placeholder {
  color: var(--gray2);
}

.select2-dropdown {
    margin-top: -39px !important;
}

.tasacion-redesign
  .redesign-field-slim
  .select2-container
  .select2-selection--single
  .select2-selection__arrow {
  height: 39px;
  right: 8px;
  top: 0;
}

/* Checkbox cuadrado tipo Figma */
.tasacion-redesign .redesign-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--main-font);
  font-size: 14px;
  line-height: 19px;
  color: var(--gray2);
}

.tasacion-redesign .redesign-checkbox-row label {
  cursor: pointer;
  margin: 0;
}

.tasacion-redesign .redesign-checkbox {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1.5px solid var(--gray);
  border-radius: 0;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.tasacion-redesign .redesign-checkbox:checked {
  background: var(--main-green);
  border-color: var(--main-green);
}

.tasacion-redesign .redesign-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.select2-search--dropdown .select2-search__field {
  height: 39px;
}

/* Bloque billing fields (toggle desde checkbox personal=facturación) */
.tasacion-redesign .redesign-billing-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* Estado :checked para los `.radio-primary` del rediseño (cubre los radios
   de método de pago y el checkbox de condiciones). El legacy oculta el
   input y dibuja el cuadrado vía `:before` del label, pero NO define un
   visual de check al marcar. Aquí lo añadimos de forma uniforme. */
.tasacion-redesign .radio-primary:checked + label {
  position: relative;
}

.tasacion-redesign .radio-primary:checked + label::before {
  background-color: var(--main-green) !important;
  border-color: var(--main-green) !important;
}

.tasacion-redesign .radio-primary:checked + label::after {
  content: "";
  position: absolute;
  /* El `:before` del legacy mide 24×24 con margin-right:10. El check se
       posiciona dentro de ese cuadrado: ~9px desde la izquierda, centrado
       verticalmente. */
  left: 8px;
  top: 50%;
  width: 6px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-65%) rotate(45deg);
  transform-origin: center;
  pointer-events: none;
  background-image: none !important;
}

/* Métodos de pago — `<input type=radio class="radio-primary">` legacy
   (oculto con width:0/height:0/display:none por el CSS global) +
   `<label class="redesign-payment-label">` que aporta el visual del check
   vía `:before` (estilo de la web ya definido) y aloja el `<img>` del
   logo. */
.tasacion-redesign .redesign-payment-methods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin: 0;
}

.tasacion-redesign .redesign-payment-label {
  /* Hereda el comportamiento legacy de `.radio-primary+label` (display:flex,
       gap, :before como pseudo-radio). Sólo añadimos cursor para el `<img>` */
  cursor: pointer;
  margin: 0;
}

/* Logos del método de pago. width/height vía atributos HTML reservan el
   espacio (CLS=0); height:auto vía CSS preserva la proporción si el width
   responsive cambia. */
.tasacion-redesign .redesign-payment-img {
  display: block;
  width: 75px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Textarea de datos adicionales */
.tasacion-redesign .redesign-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 60px;
  padding: 10px 20px;
  border: 1px solid var(--gray);
  border-radius: 0;
  background: #fff;
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  color: var(--dark-green);
  outline: none;
  resize: vertical;
}

.tasacion-redesign .redesign-textarea::placeholder {
  color: var(--gray2);
}

/* Columna derecha: sidebar resumen de pago */
.tasacion-redesign .redesign-step2-sidebar {
  background-color: #fff;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.tasacion-redesign .redesign-sidebar-header {
  padding: 12px 32px 4px;
}

.tasacion-redesign .redesign-sidebar-header h2 {
  margin: 0;
  font-family: var(--secondary-font);
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  color: var(--main-green);
  text-align: left;
}

.tasacion-redesign .redesign-sidebar-pricing {
  padding: 12px 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tasacion-redesign .redesign-sidebar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--main-font);
  font-weight: 300;
  font-size: 18px;
  color: var(--dark-green);
}

.tasacion-redesign .redesign-sidebar-row > span:first-child {
  font-weight: 500;
}

/* Importes de las filas (Precio tasación, Base imponible, IVA) — 18px y el
   mismo peso 700 que el TOTAL. #prediscount-price-preview tiene regla de id en
   tasacion.css (16px/900) que gana a la clase, así que subimos especificidad
   (clase+clase+id). #subtotal/#iva no tienen regla de id pero los incluimos
   por consistencia. La fila TOTAL queda fuera (su #total ya es 24px/700). */
.tasacion-redesign .redesign-sidebar-row #prediscount-price-preview,
.tasacion-redesign .redesign-sidebar-row #subtotal,
.tasacion-redesign .redesign-sidebar-row #iva {
  font-size: 18px;
  font-weight: 700;
}

.tasacion-redesign .redesign-total-row {
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
  font-size: 24px;
}

.tasacion-redesign .redesign-total-row > span:first-child {
  font-weight: 700;
}

/* El importe vive en #total, que tiene reglas en tasacion.css (font-size 16px,
   y 30px en la media query 1100–1366px) que ganan por especificidad de id al
   .redesign-total-row. Subimos la especificidad (clase+clase+id) para forzar
   el tamaño/peso del total en el rediseño. */
.tasacion-redesign .redesign-total-row #total,
.tasacion-redesign .redesign-total-row #total span {
  font-size: 24px;
  font-weight: 700;
}

/* Pill descuento */
.tasacion-redesign .redesign-discount-pill {
  height: 35px;
  border-radius: 40px;
  /*background: var(--turquoise);*/
  border: 2px solid var(--turquoise);
  padding: 5px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--dark-green);
}

.tasacion-redesign .redesign-discount-pill-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--main-font);
  font-weight: 300;
  font-size: 16px;
}

.tasacion-redesign .redesign-discount-pill-label svg {
  color: var(--dark-green);
}

.tasacion-redesign #redesign-discount-pill-amount {
  font-family: var(--main-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
}

.tasacion-redesign .redesign-sidebar-divider {
  height: 1px;
  background: var(--light-gray-2);
  margin: 16px 32px 0;
}

/* Sub-bloque nota simple (Fase 4e): vive en el form izquierdo, en la columna
   derecha del row 6/6 junto al motivo de la tasación. Visibilidad gobernada
   por la selección de purpose (visible si "Garantía Hipotecaria"; oculto si
   "Asesoramiento"). El JS añade/quita la clase `is-hidden`. */
.tasacion-redesign .redesign-nota-simple-block {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows .25s ease, opacity .2s ease, padding-top .25s ease;
}

.tasacion-redesign .redesign-nota-simple-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}

/* Alinea el checkbox con los radios del motivo: la columna izquierda lleva el
   título (.redesign-section-title 19px) + el gap 8px de .redesign-step2-section,
   así que empujamos 27px la columna derecha (que no tiene título). */
.tasacion-redesign .redesign-step2-row-half .redesign-nota-simple-block {
  padding-top: 27px;
}

.tasacion-redesign .redesign-nota-simple-block.is-hidden {
  grid-template-rows: 0fr;
  opacity: 0;
  padding-top: 0;
  pointer-events: none;
}

.tasacion-redesign .redesign-nota-simple-block.is-hidden .redesign-nota-simple-inner {
  visibility: hidden;
  transition: visibility 0s linear .25s;
}

@media (prefers-reduced-motion: reduce) {
  .tasacion-redesign .redesign-nota-simple-block {
    transition: none;
  }
}

/* Fila "Nota simple registral - 15,00 €" dentro de "Resumen de pago" — hereda
   el layout de `.redesign-sidebar-row`. Sólo refuerza el peso del importe. */
.tasacion-redesign .redesign-nota-simple-row .redesign-nota-simple-amount {
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
}

/* Checkbox "Añade una nota simple por 15€ + IVA" — usa la misma estética que
   el resto de checkboxes del form (`.radio-primary` con `:before` square +
   `:checked + label::after` check). El sub-texto va indentado debajo, alineado
   con el label (saltando la columna del checkbox). */
.tasacion-redesign .redesign-nota-simple-check {
  color: var(--dark-green);
  align-items: flex-start;
}

.tasacion-redesign .redesign-nota-simple-check label > span {
  color: var(--dark-green);
  font-weight: 300;
}

.tasacion-redesign .redesign-nota-simple-check label > span strong {
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
}

/* Sub-texto informativo — alineado a la izquierda del label (offset = 24px
   ancho del :before + 10px margin del legacy = 34px). */
.tasacion-redesign .redesign-nota-simple-sub {
  margin: 0 0 0 40px;
  font-family: var(--main-font);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.35;
  color: var(--third-green);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tasacion-redesign .redesign-info-icon {
  color: var(--dark-green);
  flex-shrink: 0;
}

/* Finca registral — visible cuando solicita_nota_simple=true */
.tasacion-redesign .redesign-finca-registral {
  padding: 12px 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tasacion-redesign .redesign-finca-registral label {
  font-family: var(--main-font);
  font-size: 14px;
  color: var(--dark-green);
}

.tasacion-redesign .redesign-finca-registral input[type="text"] {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--gray);
  background: var(--light-gray);
  font-family: var(--main-font);
  font-size: 14px;
  color: var(--dark-green);
  box-sizing: border-box;
}

.tasacion-redesign .redesign-sidebar-disclaimer {
  margin: 0;
  padding: 8px 32px 16px;
  font-family: var(--main-font);
  font-weight: 300;
  font-size: 14px;
  line-height: 19px;
  color: var(--third-green);
}

/* Bloque "Importante" */
.tasacion-redesign .redesign-importante {
  background: var(--light-gray);
  padding: 16px 32px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.tasacion-redesign .redesign-importante-icon {
  color: var(--main-error);
  flex-shrink: 0;
}

.tasacion-redesign .redesign-importante-text {
  display: flex;
  flex-direction: column;
}

.tasacion-redesign .redesign-importante-text strong {
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
  font-size: 16px;
  color: var(--main-green);
}

.tasacion-redesign .redesign-importante-text span {
  font-family: var(--main-font);
  font-weight: 300;
  font-size: 14px;
  line-height: 17px;
  color: var(--main-green);
  margin-top: 4px;
}

/* Footer del sidebar: términos + CTA + share */
.tasacion-redesign .redesign-sidebar-footer {
  padding: 24px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tasacion-redesign .field-conditions.redesign-checkbox-row {
  align-items: flex-start;
  color: var(--third-green);
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
}

/* Override del legacy `.radio-primary { display:none }` para que el browser
   pueda enfocar el checkbox de condiciones y mostrar el tooltip de validación
   HTML5 si el usuario intenta enviar sin marcarlo. Lo dejamos visualmente
   invisible (1×1, opacity 0, posición absoluta) pero presente en el flow. */
.tasacion-redesign .field-conditions.redesign-checkbox-row input.radio-primary {
  display: block !important;
  width: 1px !important;
  height: 1px !important;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  margin: 0 !important;
}

/* El input es `.radio-primary` y queda oculto por el legacy. El visual lo
   aporta el `:before` del label + nuestra regla `:checked + label::after`
   más abajo. El `<span>` interior del label envuelve TODO el texto + link
   para que el flex del legacy no lo parta en columnas. */
.tasacion-redesign .field-conditions.redesign-checkbox-row label > span {
  flex: 1;
  display: block;
}

/* La regla global `.underline:after { content:""; display:block; width:100% }`
   (main.css) inserta una pseudo-línea de bloque que rompe la línea tras el
   `<a>` y empuja el punto final a la siguiente fila. La sustituimos aquí por
   un subrayado nativo y anulamos el pseudo. */
.tasacion-redesign .field-conditions.redesign-checkbox-row label a.underline {
  text-decoration: underline;
}

.tasacion-redesign
  .field-conditions.redesign-checkbox-row
  label
  a.underline::after {
  content: none;
  display: none;
}

/* Botón "Pagar y Firmar" — accent verde brillante (rgb(23,232,143) = --light-green) */
.tasacion-redesign .redesign-btn-pagar {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: var(--light-green);
  color: var(--dark-green);
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.tasacion-redesign .redesign-btn-pagar:hover {
  opacity: 0.9;
}

.tasacion-redesign .redesign-btn-pagar:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Estado "procesando…" tras el submit (Fase 4d) — opacidad parcial, cursor
   wait y un spinner pequeño antes del texto para feedback visual mientras
   redirige a /tasacion-payment. */
.tasacion-redesign .redesign-btn-pagar.is-submitting {
  opacity: 0.75;
  cursor: wait;
}

.tasacion-redesign .redesign-btn-pagar.is-submitting::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: redesign-pagar-spin 0.6s linear infinite;
}

@keyframes redesign-pagar-spin {
  to {
    transform: rotate(360deg);
  }
}

.tasacion-redesign .redesign-btn-share {
  background: var(--main-green);
  color: #fff;
  margin-top: 12px;
}

/* Compartir el presupuesto */
.tasacion-redesign .redesign-share {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tasacion-redesign .redesign-share-label {
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 16px;
  color: var(--fourth-green);
}

.tasacion-redesign .redesign-share-icons {
  display: inline-flex;
  gap: 16px;
  align-items: center;
}

.tasacion-redesign .redesign-share-btn {
  background: none;
  border: none;
  color: var(--third-green);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tasacion-redesign .redesign-share-btn:hover {
  color: var(--main-green);
}

/* Form de share email expandible */
.tasacion-redesign .share-order-email-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.tasacion-redesign .share-order-email-container input[type="text"],
.tasacion-redesign .share-order-email-container input[type="email"] {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--gray);
  box-sizing: border-box;
  font-family: var(--main-font);
  font-size: 14px;
  color: var(--dark-green);
}

/* Ocultar el botón de FormFlow legacy y el botón "Aceptar presupuesto":
   nuestro CTA principal es "Pagar y Firmar". */
.tasacion-redesign .redesign-formflow-buttons,
.tasacion-redesign #aceptar-presupuesto {
  display: none !important;
}

/* Margin-top de `.site` específico de móvil (header sticky compacto).
   Debe quedar dentro de su propio bloque ≤968 para no aplicarse a
   tablet horizontal, donde el header ya no es sticky compacto y
   empujarlo 115 px provoca solape del card con el wizard. */
@media (max-width: 968px) {
  .site {
    margin-top: 115px;
  }
}

/* Mobile + tablet (<1200 px): stack vertical de la card del Stage 2.
   El sticky-bottom acordeón del sidebar (línea ~1254) se neutraliza
   después en el bloque tablet (641–1199) y en el bloque móvil (≤640). */
@media (max-width: 1199px) {
  .tasacion-redesign .redesign-step2 {
    padding: 0;
  }

  .tasacion-redesign .redesign-step2-card {
    grid-template-columns: 1fr;
    box-shadow: none;
  }

  .tasacion-redesign .redesign-step2-form {
    padding: 24px 0;
  }

  .tasacion-redesign .redesign-nota-simple-sub {
    margin: 6px 0 0 0;
  }

  .tasacion-redesign .redesign-row-2,
  .tasacion-redesign .redesign-row-3 {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tasacion-redesign .redesign-step2-sidebar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.16);
  }

  .tasacion-redesign .redesign-sidebar-header {
    padding: 16px 0 0;
  }

  .tasacion-redesign .redesign-sidebar-header h2 {
    font-size: 22px;
    line-height: 28px;
  }

  .tasacion-redesign .redesign-sidebar-pricing,
  .tasacion-redesign .redesign-nota-simple-block,
  .tasacion-redesign .redesign-finca-registral,
  .tasacion-redesign .redesign-sidebar-disclaimer,
  .tasacion-redesign .redesign-sidebar-footer {
    padding-left: 0;
    padding-right: 0;
  }

  .tasacion-redesign .redesign-sidebar-footer {
    padding-bottom: 24px;
  }

  .tasacion-redesign .redesign-nota-simple-block,
  .tasacion-redesign .redesign-step2-row-half .redesign-nota-simple-block {
    padding: 0;
  }
}

/* =========================================================================
   Select2 plano de selección de vivienda (Fase 3-bis)
   ========================================================================= */

.tasacion-redesign .redesign-vivienda-flat-wrapper {
  margin-top: 24px;
  max-width: 100%;
  min-width: 0;
}

/* `min-width: 0` en toda la cadena flex (search-form → prop-result-display
   → vivienda-flat-wrapper) para que un texto largo en el Select2 no
   expanda el grid de arriba. Sin esto, `white-space: nowrap` haría que
   el wrapper crezca hasta caber todo el texto y romper el ancho del
   panel del step 1. */
.tasacion-redesign .redesign-search-form,
.tasacion-redesign #prop-result-display {
  min-width: 0;
  max-width: 100%;
}

.tasacion-redesign .redesign-vivienda-flat-wrapper .select2-container {
  max-width: 100%;
  width: 100% !important;
  min-width: 0;
}

.tasacion-redesign
  .vivienda-flat-select
  + .select2-container
  .select2-selection--single {
  max-width: 100%;
  overflow: hidden;
}

.tasacion-redesign
  .vivienda-flat-select
  + .select2-container
  .select2-selection__rendered {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%;
}

/* Dropdown abierto: limita el ancho del menú y trunca las opciones
   largas con ellipsis (el ancho del dropdown lo calcula Select2 al
   abrir y puede salir del viewport si el contenido es muy ancho). */
.tasacion-redesign .select2-container--open .select2-dropdown {
  max-width: 100vw;
}

.tasacion-redesign .select2-results__option {
  white-space: normal;
  word-break: break-word;
}

.tasacion-redesign .redesign-vivienda-flat-wrapper > label {
  font-family: var(--main-font-medium);
  font-size: 14px;
  color: var(--main-green);
  margin-bottom: 8px;
  display: block;
}

.tasacion-redesign
  .vivienda-flat-select
  + .select2-container
  .select2-selection--single {
  height: 48px;
  /* padding: 4px 12px; */
  border: 1px solid var(--gray);
  background-color: #fff;
  border-radius: 0;
}

.tasacion-redesign
  .vivienda-flat-select
  + .select2-container
  .select2-selection__rendered {
  line-height: 38px;
  padding-left: 8px;
  color: var(--dark-green);
  font-family: var(--main-font);
  font-size: 16px;
}

.tasacion-redesign
  .vivienda-flat-select
  + .select2-container
  .select2-selection__arrow {
  height: 46px;
}

.tasacion-redesign
  .vivienda-flat-select
  + .select2-container
  .select2-selection--single:focus {
  outline: 2px solid var(--main-green);
  outline-offset: 0;
}

.tasacion-redesign .redesign-vivienda-flat-wrapper .confirm-vivienda {
  text-align: right;
}

.tasacion-redesign #confirm-vivienda-btn.redesign-btn-primary {
  background-color: var(--main-green);
  color: #fff;
  font-family: var(--main-font-medium);
  font-size: 16px;
  padding: 10px 28px;
  border: 0;
  cursor: pointer;
  min-height: 39px;
}

.tasacion-redesign #confirm-vivienda-btn.redesign-btn-primary:disabled {
  background-color: var(--light-gray-3);
  color: var(--gray2);
  cursor: not-allowed;
}

/* =========================================================================
   Overrides sobre estilos legacy dentro del contenedor del rediseño.
   Se mantienen mientras convivan DOM antiguo y nuevo (fases 3-4). Cuando
   toda la UI esté migrada, este bloque debería poder eliminarse.
   ========================================================================= */

/* Ocultamos los indicadores del wizard vertical antiguo (step-toggle-header,
   arrow-down, step-status-icon). El nuevo stepwizard horizontal ya vive
   arriba y comunica el progreso. */
.tasacion-redesign .step-toggle-header,
.tasacion-redesign .arrow-down,
.tasacion-redesign .step-status-icon {
  display: none !important;
}

/* El contenedor .step-1-wrapper antiguo tenía fondo verde claro y padding
   grande. Ya no lo queremos. */
.tasacion-redesign .step-1-wrapper {
  background-color: transparent;
  padding: 0;
}

/* El .step-box-shadow antiguo tenía caja blanca con sombra. Lo neutralizamos
   para que los sub-bloques hereden el estilo del nuevo panel. */
.tasacion-redesign .step-box-shadow {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}

.tasacion-redesign .step-wrapper {
  margin-bottom: 0;
  border-bottom: none;
}

/* Contenedor del resultado de la búsqueda AVM. Cuando el JS lo pinta
   ("Selecciona tu vivienda"), queremos que se integre en el form grid. */
.tasacion-redesign #prop-result-display:not(:empty) {
  margin-top: 16px;
}

.tasacion-redesign #prop-result-display label,
.tasacion-redesign #prop-result-display .label {
  font-family: var(--main-font-medium);
  font-size: 14px;
  color: var(--main-green);
  margin-bottom: 8px;
  display: block;
}

/* `#prop-result > .prop-result` (Fase 4c) — contiene el `#get-budget` legacy
   que sólo se dispara por `trigger("click")` desde varios entry points (no
   tiene UI propia en el rediseño). Lo ocultamos sin tocar el wrapper
   `#prop-result`, que recibe `slideDown` desde el step-toggle legacy y debe
   seguir manipulable. Sin este `display:none`, el botón "Continuar" sin
   estilar aparece visible durante la carga automática por token. */
.tasacion-redesign #prop-result > .prop-result {
  display: none !important;
}

/* Step 1 — overlays loader (Fase 3-ter).
   `#loader1` y `#loader2` son overlays `position: absolute` que cubren la
   columna del formulario (`.redesign-search-form`), no el viewport completo
   ni el mapa. Backdrop blanco translúcido + spinner centrado en verde
   principal. No empujan contenido (out of flow). */
.tasacion-redesign .redesign-search-form {
  position: relative;
}

.tasacion-redesign #loader1,
.tasacion-redesign #loader2 {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.85);
  /* `display:none` heredado de `.spinner` legacy (tasacion.css:765);
       jQuery aplica `display:block` inline al hacer fadeIn / hide. */
}

/* Anula el backdrop verde claro `#loader1::before` legacy (tasacion.css:768)
   — ya tenemos backdrop propio en `#loader1` directamente. */
.tasacion-redesign #loader1::before {
  display: none;
}

/* Loader rediseñado — anillo fino con arco contrastante.
   La regla general aplica color + grosor a cualquier .loader dentro de
   .tasacion-redesign (overlays Step 1, partial form-upload-files en
   Step 6). NO incluye `animation` porque `.file-attach .loader` de
   files.css necesita conservar su `fileSpin` (que mantiene el
   transform: translate(-50%, -50%) para centrar el spinner durante
   upload). El sizing se hereda: 56×56 forzado para overlays Step 1
   (regla específica abajo) — 20×20 para uploads vía files.css:252. */
.tasacion-redesign .loader {
  border-width: 3px;
  border-style: solid;
  border-color: rgba(0, 63, 45, 0.12);
  border-top-color: var(--light-green);
}

/* `!important` en sizing necesario para vencer `files.css:252`
   (`.loader { width: 20px !important; height: 20px !important }`) que
   se importa vía `@import` en `main.css` y aplica globalmente. Aquí
   añadimos también `animation: redesign-spin` porque estos overlays no
   conviven con `.file-attach .loader` (no son uploads) y queremos el
   easing cubic-bezier suave del rediseño. */
.tasacion-redesign #loader1 .loader,
.tasacion-redesign #loader2 .loader {
  width: 56px !important;
  height: 56px !important;
  animation: redesign-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Caso `<div id="loader1" class="loader">` plano (firma fullpage —
   `tasacion-firma.html.twig`). En este template el `#loader1` es a la vez
   wrapper y spinner — no hay `.loader` anidado, así que la regla de arriba
   no matchea. Reseteamos el overlay absoluto y aplicamos sizing + anillo
   + animación directamente sobre el propio elemento. */
.tasacion-redesign #loader1.loader {
  position: static !important;
  background: transparent;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50%;
  margin: 20px auto 30px;
  animation: redesign-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes redesign-spin {
  to { transform: rotate(360deg); }
}

.input-error:before,
.dynamic-error:before {
  bottom: -12px;
}

.input-error:after,
.dynamic-error:after {
  bottom: -15px;
}

textarea {
  height: 60px !important;
}

/* =========================================================================
   Responsive — mobile y tablet
   ========================================================================= */

@media (max-width: 968px) {
  .tasacion-redesign .redesign-stepwizard {
    padding: 10px 20px 0;
    gap: 12px;
  }

  .tasacion-redesign .redesign-stage-label {
    font-size: 12px;
    min-height: 3.2em;
  }

  .tasacion-redesign .redesign-step1 {
    padding: 0;
    margin-top: 32px;
  }

  .tasacion-redesign .redesign-step1-panel {
    padding: 32px 20px 48px;
  }

  .tasacion-redesign .redesign-step1-title {
    font-size: 28px;
  }

  .tasacion-redesign .redesign-mode-cards {
    gap: 8px;
  }

  .tasacion-redesign .redesign-mode-card {
    padding: 24px 16px;
    min-height: 120px;
  }

  .tasacion-redesign .redesign-search-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tasacion-redesign .redesign-search-map {
    order: 2; /* en mobile el mapa va debajo del form */
  }

  .tasacion-redesign .redesign-search-map,
  .tasacion-redesign .redesign-search-map #map {
    min-height: 220px;
  }

  .tasacion-redesign .redesign-search-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tasacion-redesign .redesign-btn-primary {
    width: 100%;
  }

  .tasacion-redesign #step1-type.redesign-mode-cards {
    flex-direction: row;
    gap: 12px;
  }
}

/* =========================================================================
   Step 6 — Adjuntar documentos (Fase 6)
   ========================================================================= */

.tasacion-redesign .redesign-step6 {
  max-width: var(--max-with-container2);
  margin: 0 auto 32px;
  padding: 0 30px;
}

/* Card blanca exterior con padding 40 + panel verde claro envolvente per Q7 (sesión 2026-04-28). */
.tasacion-redesign .redesign-step6-panel {
  background-color: var(--light-gray);
  padding: 48px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08);
  margin-top: 40px;
}

.tasacion-redesign .redesign-step6-title {
  margin: 0 0 16px;
  font-family: var(--secondary-font);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.13;
  color: var(--main-green);
  text-align: center;
}

.tasacion-redesign .redesign-step6-intro {
  margin: 0 0 32px;
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-green);
  text-align: center;
}

.tasacion-redesign .redesign-step6-intro strong {
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
}

/* Link "Subiré la documentación más adelante" debajo del panel, centrado. */
.tasacion-redesign .redesign-step6-skip {
  margin-top: 24px;
  text-align: center;
}

.tasacion-redesign .redesign-link-ghost {
  display: inline-block;
  padding: 10px 16px;
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 14px;
  color: var(--main-green);
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.tasacion-redesign .redesign-link-ghost:hover {
  color: var(--dark-green);
}

.fileUploadForm .filesContainer {
  justify-content: space-between !important;
}

.flex.flex-row.row-gap-sm-2.file-container {
  min-width: 150px;
}

@media (max-width: 968px) {
  .tasacion-redesign .redesign-step6 {
    padding: 0 16px;
  }
  .tasacion-redesign .redesign-step6-panel {
    padding: 24px;
  }
  .tasacion-redesign .redesign-step6-title {
    font-size: 24px;
  }
}

/* =========================================================================
   Pantalla final de éxito (Fase 6)
   ========================================================================= */

.tasacion-redesign .redesign-exito-final {
  /* Alineación con el edge visual del wizard (donde están las barras y
     labels). El wizard outer son 1360px (mw-xl 1400 - 40 padding del
     `.container` wrapper), y dentro tiene `padding: 0 30px` que mete las
     barras 60px más adentro. Total reducción 100px desde mw-xl base. */
  max-width: calc(var(--max-with-container2) - 100px);
  margin: 50px auto 48px;
  padding: 48px;
  background-color: #fff;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.16);
}

/* Header — IconOk + título alineados horizontalmente, centrados (per Q10). */
.tasacion-redesign .redesign-exito-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  margin-bottom: 32px;
}

.tasacion-redesign .redesign-exito-icon-ok {
  color: var(--main-green);
  flex-shrink: 0;
}

.tasacion-redesign .redesign-exito-title {
  margin: 0;
  font-family: var(--secondary-font);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  color: var(--main-green);
}

/* Bloque cuenta — recuadro con border accent verde brillante per Q10. */
.tasacion-redesign .redesign-exito-account {
  margin-top: 32px;
  padding: 24px;
  background-color: var(--light-gray);
}

.tasacion-redesign .redesign-exito-account-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 36px 24px;
  border: 1.5px solid var(--light-green);
}

.tasacion-redesign .redesign-exito-account-text {
  flex: 1 1 auto;
}

.tasacion-redesign .redesign-exito-account-title {
  margin: 0 0 8px;
  font-family: var(--secondary-font);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--main-green);
}

.tasacion-redesign .redesign-exito-account-body {
  margin: 0;
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark-green);
}

.tasacion-redesign .redesign-link-inline {
  color: var(--main-green);
  text-decoration: underline;
}

.tasacion-redesign .redesign-exito-account-actions {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tasacion-redesign .redesign-btn-ghost {
  width: 100%;
  height: 40px;
  padding: 0 16px;
  background: transparent;
  border: 1.5px solid var(--main-green);
  color: var(--main-green);
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.tasacion-redesign .redesign-btn-ghost:hover {
  background-color: var(--main-green);
  color: #fff;
}

/* Bloque siguientes pasos — h3 + 3 timeline cards en fila. */
.tasacion-redesign .redesign-exito-steps {
  margin-top: 32px;
  padding: 40px 32px;
  border: 1px solid var(--gray);
}

.tasacion-redesign .redesign-exito-steps-title {
  margin: 0 0 24px;
  font-family: var(--secondary-font);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  color: var(--main-green);
  text-align: center;
}

.tasacion-redesign .redesign-exito-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tasacion-redesign .redesign-exito-timeline-card {
  background-color: var(--light-gray);
  padding: 24px;
}

.tasacion-redesign .redesign-exito-timeline-card h4 {
  margin: 0 0 12px;
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--main-green);
}

.tasacion-redesign .redesign-exito-timeline-card p {
  margin: 0;
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--third-green);
}

@media (max-width: 968px) {
  .tasacion-redesign .redesign-exito-final {
    margin: 0 16px 32px;
    padding: 24px;
  }
  .tasacion-redesign .redesign-exito-header {
    flex-direction: column;
    gap: 12px;
  }
  .tasacion-redesign .redesign-exito-title {
    font-size: 24px;
  }
  .tasacion-redesign .redesign-exito-account-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .tasacion-redesign .redesign-exito-account-actions {
    flex-basis: auto;
  }
  .tasacion-redesign .redesign-exito-steps {
    padding: 24px 16px;
  }
  .tasacion-redesign .redesign-exito-timeline {
    grid-template-columns: 1fr;
  }
  .tasacion-redesign .redesign-exito-steps-title {
    font-size: 22px;
  }
}

/* ============================================================
   Finca registral — tarjeta-input que sustituye al upload de
   nota simple en Step 6 cuando el usuario contrató la nota
   simple +15€ con purpose = Garantía Hipotecaria (Financiación).
   Autosave silencioso con debounce 2s.

   Nota sobre nombres: usamos prefijo `redesign-finca-*` porque
   existe una clase legacy `.finca-registral-label` en tasacion.css
   con background verde + color blanco — colisionaría visualmente.
   ============================================================ */
.tasacion-redesign .redesign-finca-card {
    display: flex;
    flex-direction: column;
    padding: 8px;
    flex: 0 0 240px;
    width: 240px;
    gap: 4px;
}

.tasacion-redesign .redesign-finca-label {
  font-family: var(--main-font);
  font-size: 18px;
  font-weight: 400;
  color: var(--third-green);
  background: transparent;
}

.tasacion-redesign .redesign-finca-label-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.tasacion-redesign .redesign-finca-tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  margin-bottom: 0.5rem;
}

.tasacion-redesign .redesign-finca-tooltip-trigger img {
  display: block;
  width: 16px;
  height: 16px;
}

.tasacion-redesign .redesign-finca-tooltip-bubble {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 260px;
  max-width: calc(100vw - 40px);
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--turquoise);
  color: var(--dark-green);
  font-family: var(--main-font);
  font-weight: 300;
  font-size: 14px;
  line-height: 19px;
  text-align: left;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.tasacion-redesign .redesign-finca-tooltip-bubble strong {
  font-family: var(--main-font-semi-bold);
  font-weight: 700;
}

.tasacion-redesign .redesign-finca-tooltip-trigger:hover ~ .redesign-finca-tooltip-bubble,
.tasacion-redesign .redesign-finca-tooltip-trigger:focus ~ .redesign-finca-tooltip-bubble,
.tasacion-redesign .redesign-finca-tooltip-trigger:focus-visible ~ .redesign-finca-tooltip-bubble {
  opacity: 1;
  visibility: visible;
}

.tasacion-redesign .redesign-finca-input {
  border: 1px solid var(--gray);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--main-font);
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

.tasacion-redesign .redesign-finca-input:focus {
  outline: none;
  border-color: var(--light-green);
}

.tasacion-redesign .redesign-finca-helper {
  font-size: 12px;
  color: var(--gray2);
  text-align: center;
}

.tasacion-redesign .redesign-finca-status {
  min-height: 18px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tasacion-redesign .redesign-finca-status[data-state="saving"] {
  color: var(--gray2);
}

.tasacion-redesign .redesign-finca-status[data-state="saved"] {
  color: var(--main-green);
}

.tasacion-redesign .redesign-finca-status[data-state="error"] {
  color: var(--main-error);
}

/* =========================================================================
   Fase mobile (≤ 640px) — phone breakpoint.
   Las reglas a 968px ya colapsan grids a 1fr y reducen paddings de tablet.
   A 640px se aplican los ajustes específicos de phone derivados del diseño
   mobile (`screens.jsx` / `ui.jsx`): stepwizard con meta "Paso N de 4",
   inputs 44px, sticky payment bar, cards de upload cuadradas, etc.
   ========================================================================= */

/* Meta del stepwizard mobile — oculta en >640px. */
.tasacion-redesign .redesign-stepwizard-mobile-meta {
  display: none;
}

@media (max-width: 640px) {
  /* ---------- Stepwizard mobile ----------
     Layout: la meta "Paso N de 4" + label del stage activo ocupa una fila
     y debajo se muestran las 4 barras en grid 4 columnas. */
  .tasacion-redesign .redesign-stepwizard {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-flow: row;
    align-items: end;
    column-gap: 6px;
    row-gap: 10px;
    background-color: #fff;
    padding: 16px 16px 12px;
    margin: 0;
    max-width: none;
  }

  .tasacion-redesign .redesign-stepwizard-mobile-meta {
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-family: var(--main-font);
  }

  .tasacion-redesign .redesign-stepwizard-mobile-pill {
    font-family: var(--main-font-medium);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: var(--fourth-green);
    text-transform: uppercase;
    flex: 0 0 auto;
  }

  .tasacion-redesign .redesign-stepwizard-mobile-label {
    font-family: var(--main-font-medium);
    font-weight: 500;
    font-size: 14px;
    color: var(--dark-green);
    line-height: 1.15;
    text-align: right;
  }

  /* Cada stage es 1 columna del grid; ocultamos su label textual y dejamos
     solo la barrita inferior. */
  .tasacion-redesign .redesign-stepwizard > .redesign-stage {
    padding: 0;
    min-width: 0;
  }

  .tasacion-redesign .redesign-stepwizard > .redesign-stage .redesign-stage-label {
    display: none;
  }

  .tasacion-redesign .redesign-stepwizard > .redesign-stage::after {
    height: 4px;
    border-radius: 3px;
  }

  /* ---------- Header / spacing global mobile (Issue 1) ----------
     La cadena de wrappers (body 78px + .container.mob-margin-top-30 30px
     + container-proceso paddings + step margin) generaba un hueco grande
     entre el header sticky y el card. Lo neutralizamos a 640px. */
  .tasacion-redesign .container-proceso {
    padding: 0;
  }

  .tasacion-redesign .proceso-sticky {
    padding: 0;
  }

  .tasacion-redesign .mob-margin-top-30 {
    margin-top: 8px;
  }

  .tasacion-redesign .container.py-m {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ---------- Step 1 mobile (datos propiedad) ---------- */
  .tasacion-redesign .redesign-step1 {
    padding: 0;
    margin-top: 16px;
  }

  .tasacion-redesign .redesign-step1-panel {
    padding: 20px 16px 24px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
  }

  .tasacion-redesign .redesign-step1-title {
    font-size: 22px;
    line-height: 1.15;
  }

  .tasacion-redesign .redesign-step1-subtitle {
    font-size: 15px;
    margin: 16px 0 12px;
  }

  /* Mode cards: 2 en fila, 110px alto. */
  .tasacion-redesign #step1-type.redesign-mode-cards {
    flex-direction: row;
    gap: 12px;
  }

  .tasacion-redesign .redesign-mode-card {
    flex: 1 1 0;
    min-height: 110px;
    padding: 12px;
  }

  .tasacion-redesign .redesign-mode-card .redesign-mode-icon {
    width: 28px;
    height: 28px;
  }

  .tasacion-redesign .redesign-mode-card .redesign-mode-label {
    font-size: 14px;
    line-height: 1.2;
  }

  /* Inputs 44px en mobile (per ui.jsx Input). */
  .tasacion-redesign .redesign-field input[type="text"],
  .tasacion-redesign .redesign-field input[type="number"],
  .tasacion-redesign .redesign-field input[type="email"],
  .tasacion-redesign .redesign-field input[type="tel"],
  .tasacion-redesign .redesign-field select {
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
  }

  .tasacion-redesign .redesign-field .select2-container .select2-selection--single {
    height: 44px;
  }

  .tasacion-redesign .redesign-field .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 22px;
    padding-left: 14px;
  }

  .tasacion-redesign .redesign-field label {
    font-size: 14px;
    margin-top: 12px;
  }

  /* Search form layout: form arriba, mapa 160px abajo. */
  .tasacion-redesign .redesign-search-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tasacion-redesign .redesign-search-form {
    gap: 16px;
  }

  .tasacion-redesign .redesign-search-map,
  .tasacion-redesign .redesign-search-map #map {
    min-height: 160px;
  }

  /* "Número (110px) + Buscar vivienda" en la misma fila a 640px. */
  .tasacion-redesign .redesign-search-form .redesign-field-number {
    flex: 0 0 110px;
    max-width: 110px;
  }

  .tasacion-redesign .redesign-number-row {
    gap: 12px;
    align-items: flex-end;
  }

  .tasacion-redesign .redesign-search-actions {
    flex-direction: row;
    flex: 1;
    align-items: flex-end;
  }

  .tasacion-redesign .redesign-btn-primary {
    width: 100%;
    height: 44px;
    min-height: 44px;
  }

  /* ---------- Step 2 mobile (datos + pago) ---------- */
  .tasacion-redesign .redesign-step2 {
    padding: 0 16px;
  }

  .tasacion-redesign .redesign-step2-form {
    padding: 16px 0;
    gap: 16px;
  }

  .tasacion-redesign .redesign-step2-title {
    font-size: 22px;
    line-height: 1.15;
  }

  .tasacion-redesign .redesign-step2-subtitle {
    font-size: 14px;
  }

  /* Sidebar desktop apilado bajo el form en mobile.
     Hereda toda la lógica de precios/checkbox/CTA del legacy sin
     duplicar nada. Neutralizamos el sticky-bottom (vive en flow normal)
     y separamos visualmente del form con un border-top dentro del card. */
  .tasacion-redesign .redesign-step2-sidebar {
    display: flex;
    flex-direction: column;
    position: static;
    bottom: auto;
    z-index: auto;
    box-shadow: none;
    padding: 0;
    border-top: 1px solid var(--gray);
    margin-top: 8px;
    padding-top: 24px;
  }

  /* Reservar espacio final para el iframe Getnet (pasarela de pago). */
  .tasacion-redesign .redesign-payment-iframe-wrapper {
    padding-bottom: 80px;
  }

  /* ---------- Sticky payment bar (phone-only) — versión minimal ----------
     Single row: "TOTAL A PAGAR ↓" + precios. Toda la aside es un único
     botón clickable que hace smooth scroll al `[data-payment-summary]`. */
  .tasacion-redesign .redesign-sticky-payment-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: 100%;
    background-color: #fff;
    border: 0;
    border-top: 1px solid rgba(1, 42, 45, 0.12);
    box-shadow: 0 -6px 14px rgba(1, 42, 45, 0.06);
    font-family: var(--main-font);
    padding: 12px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .tasacion-redesign .redesign-sticky-payment-bar[data-visible="false"] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
  }

  .tasacion-redesign .redesign-sticky-payment-bar:hover {
    background-color: var(--light-gray);
  }

  .tasacion-redesign .redesign-sticky-payment-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--main-font-semi-bold);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--fourth-green);
  }

  .tasacion-redesign .redesign-sticky-payment-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
  }

  .tasacion-redesign .redesign-sticky-payment-amount s {
    font-size: 12px;
    color: var(--fourth-green);
  }

  .tasacion-redesign .redesign-sticky-payment-amount s:empty {
    display: none;
  }

  .tasacion-redesign .redesign-sticky-payment-amount b {
    font-family: var(--secondary-font);
    font-weight: 500;
    font-size: 22px;
    line-height: 1;
    color: var(--main-green);
  }

  .tasacion-redesign .redesign-sticky-payment-chevron {
    width: 12px;
    height: 12px;
    color: var(--fourth-green);
  }

  /* ---------- Step 3 mobile (firma DocuSign) ---------- */
  .tasacion-redesign .window-section {
    padding: 0 !important;
  }

  /* ---------- Step 6 mobile (documentos) ---------- */
  .tasacion-redesign .redesign-step6 {
    padding: 0 12px;
  }

  .tasacion-redesign .redesign-step6-panel {
    padding: 18px 14px;
  }

  .tasacion-redesign .redesign-step6-title {
    font-size: 22px;
  }

  .tasacion-redesign .redesign-step6-intro {
    font-size: 14px;
    margin-bottom: 20px;
  }

  /* Cards de upload: cuadrado 56×56 con label arriba (3 por fila). */
  .tasacion-redesign .fileUploadFormContainer {
    align-items: stretch;
  }

  .tasacion-redesign .fileUploadForm {
    width: 100%;
  }

  .tasacion-redesign .fileUploadForm .filesContainer {
    flex-wrap: wrap;
    gap: 16px 12px;
    justify-content: center!important;
    width: 100%;
  }

  .tasacion-redesign .fileUploadForm .filesContainer .file-container {
    flex: 1 0 calc(33.333% - 12px);
    max-width: calc(33.333% - 12px);
    min-width: 0;
    flex-direction: column !important;
    align-items: center;
    gap: 8px;
    padding: 0;
  }

  .tasacion-redesign .fileUploadForm .filesContainer .file-container .file-attach {
    width: 56px;
    height: 56px;
    border: 1px solid var(--gray);
    background-color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
  }

  .tasacion-redesign .fileUploadForm .filesContainer .file-container .file-actions {
    padding: 0;
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 4px;
  }

  .tasacion-redesign .fileUploadForm .filesContainer .file-container .file-actions > div:first-child {
    width: 100%;
    justify-content: center;
  }

  .tasacion-redesign .fileUploadForm .filesContainer .file-container .file-name {
    font-family: var(--main-font-semi-bold);
    font-weight: 600;
    font-size: 12px;
    color: var(--dark-green);
    text-align: center;
    line-height: 1.2;
    order: -1;
    min-height: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  /* Finca registral input — ancho 100% en mobile. */
  .tasacion-redesign .redesign-finca-card {
    flex: 1 1 100%;
    width: 100%;
    padding: 0;
    margin-top: 20px;
    padding: 0 20px;
  }

  .tasacion-redesign .redesign-finca-label {
    font-family: var(--main-font-semi-bold);
    font-weight: 600;
    font-size: 12px;
    color: var(--dark-green);
    line-height: 1.2;
  }

  /* ---------- Éxito / Error mobile ---------- */
  .tasacion-redesign .redesign-exito-final {
    margin: 35px 0;
    padding: 20px 16px !important;
  }

  .tasacion-redesign .redesign-exito-title {
    font-size: 22px;
  }

  .tasacion-redesign .redesign-exito-account {
    padding: 14px;
  }

  .tasacion-redesign .redesign-exito-account-inner {
    padding: 18px 14px;
    gap: 14px;
  }

  .tasacion-redesign .redesign-exito-account-actions {
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
  }

  .tasacion-redesign .redesign-exito-account{
    background-color: #FFFFFF;
  }

  .tasacion-redesign .redesign-exito-steps{
    border: none;
  }

  .tasacion-redesign .redesign-exito-steps {
    padding: 20px 14px;
    margin-top: 20px;
  }

  .tasacion-redesign .redesign-exito-steps-title {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .tasacion-redesign .redesign-exito-timeline-card {
    padding: 14px;
  }

  .tasacion-redesign .redesign-exito-timeline-card h4 {
    font-size: 15px;
  }

  .tasacion-redesign .redesign-exito-timeline-card p {
    font-size: 14px;
  }

  /* ---------- Step 2 margin-top mobile (Issue 1) ---------- */
  .tasacion-redesign .redesign-step2 {
    margin-top: 4px;
  }

  /* ---------- Checkboxes/radios `.radio-primary` normalizados (Issue 2)
     Aplica a TODOS los `.radio-primary + label` dentro del rediseño
     mobile (motivo de tasación, datos de facturación, condiciones,
     share-email, nota simple sidebar). Tick perfectamente centrado
     en la caja 20×20 mediante position absolute + top/left fijo. */
  .tasacion-redesign .radio-primary {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .tasacion-redesign .radio-primary + label {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-left: 30px;
    min-height: 20px;
    cursor: pointer;
    line-height: 1.3;
  }

  .tasacion-redesign .radio-primary + label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    min-width: 20px;
    max-height: 20px;
    margin-right: 0;
    border: 1.5px solid var(--gray);
    border-radius: 0;
    background-color: #fff;
    box-sizing: border-box;
    display: block;
    transition: background-color 120ms ease, border-color 120ms ease;
  }

  .tasacion-redesign .radio-primary:checked + label::before {
    background-color: var(--main-green);
    border-color: var(--main-green);
  }

  .tasacion-redesign .radio-primary + label::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-65%) rotate(45deg);
    opacity: 0;
    transition: opacity 80ms ease;
  }

  /* Forzamos las dimensiones del tick también en :checked porque la regla
     legacy `.tasacion-redesign .radio-primary:checked + label::after`
     fuera del @media tiene mayor specificity (incluye `:checked`) y
     pisaría width/height/left si no las re-aplicamos aquí dentro de
     `:checked`. */
  .tasacion-redesign .radio-primary:checked + label::after {
    width: 5px;
    height: 10px;
    left: 7px;
    top: 50%;
    opacity: 1;
  }

  /* Override específico para el checkbox de condiciones (label 2 líneas).
     El legacy `tasacion.css:2672-2680` fija `top: 5px` en el :before y
     `top: 14px` en el :after con specificity ID, ganando a la regla
     general. Aquí re-alineamos el tick dentro del cuadrado: cuadrado
     ocupa de top:5 a top:25, su centro es top:15. El tick (width:5,
     height:10) centrado en ese punto va a top:10 (10+5=15). */
  .tasacion-redesign #tasacionStep1_condition + label::before {
    top: 5px;
    transform: none;
  }

  .tasacion-redesign #tasacionStep1_condition + label::after,
  .tasacion-redesign #tasacionStep1_condition:checked + label::after {
    top: 10px;
    left: 7px;
    width: 5px;
    height: 10px;
    transform: translateY(-15%) rotate(45deg);
  }

  /* El radio del purpose tenía un fondo verde claro tipo "pill" cuando
     se aplicaba .redesign-purpose-label. Mantener consistencia visual
     con el resto: forzamos el mismo patrón check+label. */
  .tasacion-redesign .redesign-payment-methods.redesign-purpose-methods {
    gap: 12px;
  }

  /* ---------- Footer toggle (Issue 3) ----------
     `.tasacion-bottom-contact` y `.toggleBottomContactBlock` viven en
     `<body>` (fuera de `.tasacion-redesign`), pero solo existen en
     `tasacion.html.twig`, así que selectores sin ancestor son seguros. */
  .toggleBottomContactBlock {
    display: none !important;
  }

  .tasacion-bottom-contact.closed {
    transform: none !important;
  }

  .tasacion-bottom-contact {
    padding: 12px 16px;
  }

  /* Cuando la sticky payment bar está visible (body.has-sticky-bar),
     el footer queda detrás de ella; lo ocultamos para evitar el "doble
     bloque" en el fondo. La sticky bar manda. */
  body.has-sticky-bar .tasacion-bottom-contact {
    display: none;
  }

}

/* =========================================================================
   Responsive — tablet (641–1199 px)
   Rango intermedio entre móvil (≤640) y desktop (≥1200). Resuelve los
   desajustes documentados a 768 y 1024 sin alterar los baselines de
   mobile y desktop.
   Ver: docs/superpowers/specs/2026-05-14-rediseno-tasacion-viewports-tablet-design.md
   ========================================================================= */
@media (min-width: 641px) and (max-width: 1199px) {

  /* Stage 2 contenedor: evita el solape del card con el wizard (TV1).
     `container-proceso` es `position: fixed` (tasacion.css:94-102) y no
     ocupa altura en el flow → el card se renderiza pegado al header y el
     wizard fijo cubre su parte superior. Empujamos el step lo suficiente
     para que ningún contenido del card quede tapado. */
  .tasacion-redesign .redesign-step2 {
    padding: 0 24px;
    margin-top: 56px;
  }

  /* Wizard horizontal: respiración entre stages (TV2). */
  .tasacion-redesign .redesign-stepwizard {
    gap: 20px;
    padding: 16px 24px 0;
  }
  .tasacion-redesign .redesign-stage-label {
    font-size: 13px;
    min-height: 2.8em;
  }

  /* Sidebar Stage 2: NO sticky-bottom en tablet (TV3).
     El acordeón sticky-bottom es deliberado a ≤640 (CTA siempre visible).
     En tablet basta con que el sidebar caiga bajo el form con un border-top
     separador. */
  .tasacion-redesign .redesign-step2-sidebar {
    position: static;
    bottom: auto;
    z-index: auto;
    box-shadow: none;
    padding: 24px 0 0;
    border-top: 1px solid var(--gray);
    margin-top: 16px;
  }

  /* Filas internas del form (TH2).
     `redesign-row-3` con 3 columnas trunca placeholders a este ancho;
     pasa a 2 columnas (Teléfono+Email en una fila, DNI sola). */
  .tasacion-redesign .redesign-row-3 {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .tasacion-redesign .redesign-row-2 {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* Footer rico (TV4/TH5): devolver el bloque "¿Tienes alguna duda?…"
     que el container-window legacy ocultaba entre el card y el final
     de página. */
  .tasacion-redesign .container-window {
    overflow: visible;
  }
}