/*
 * El comparador de costes de la web pública (AL-346). Sólo con tokens, para que el claro y el
 * grafito salgan solos. Sin JavaScript, los cuatro pasos van seguidos; con él
 * (`.lb-comparador--pasos`), una sola ventana con su indicador de pasos.
 */
.lb-comparador {
  max-width: 1040px;
  scroll-margin-top: var(--lb-space-20);
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-2xl);
  background: var(--lb-bg-surface);
  box-shadow: var(--lb-e2);
  overflow: hidden;
}

/* --- El indicador de pasos ------------------------------------------------------------------ */
.lb-comparador__indicador {
  padding: var(--lb-space-3) var(--lb-space-5);
  border-bottom: 1px solid var(--lb-border-subtle);
}

.lb-comparador__indicador ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lb-comparador__indicador button {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-2);
  min-height: 44px;
  padding: var(--lb-space-1) var(--lb-space-3);
  border: 0;
  border-radius: var(--lb-radius-full);
  background: transparent;
  color: var(--lb-text-secondary);
  font-size: var(--lb-fs-body-sm);
  font-weight: 500;
}

.lb-comparador__indicador button[aria-current="step"] {
  background: var(--lb-accent-subtle);
  color: var(--lb-accent-subtle-text);
  font-weight: 600;
}

.lb-comparador__indicador button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.lb-comparador__indicador button:focus-visible {
  outline: 2px solid var(--lb-focus);
  outline-offset: 2px;
}

.lb-comparador__n {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--lb-border-strong);
  border-radius: var(--lb-radius-full);
  font-variant-numeric: tabular-nums;
}

[aria-current="step"] .lb-comparador__n {
  border-color: var(--lb-accent);
  background: var(--lb-accent);
  color: var(--lb-text-on-accent);
}

.lb-comparador__hecho .lb-comparador__n {
  border-color: var(--lb-accent);
  color: var(--lb-accent-subtle-text);
}

/* --- Cada paso -------------------------------------------------------------------------------- */
.lb-comparador__paso {
  padding: var(--lb-space-6);
}

.lb-comparador__paso + .lb-comparador__paso {
  border-top: 1px solid var(--lb-border-subtle);
}

.lb-comparador--pasos .lb-comparador__paso + .lb-comparador__paso {
  border-top: 0;
}

.lb-comparador__titulo-paso {
  margin: 0 0 var(--lb-space-1);
  font-size: var(--lb-fs-title-2);
  line-height: var(--lb-lh-title-2);
}

.lb-comparador__titulo-paso:focus {
  outline: none;
}

.lb-comparador__titulo-paso:focus-visible {
  outline: 2px solid var(--lb-focus);
  outline-offset: 4px;
}

.lb-comparador__sub,
.lb-comparador__ayuda,
.lb-comparador__nota {
  color: var(--lb-text-secondary);
}

.lb-comparador__sub {
  max-width: 62ch;
  margin-bottom: var(--lb-space-4);
}

.lb-comparador__ayuda {
  margin: var(--lb-space-1) 0 0;
  font-size: var(--lb-fs-body-sm);
}

.lb-comparador__nota {
  margin: var(--lb-space-4) 0 0;
  font-size: var(--lb-fs-body-sm);
}

.lb-comparador__fila {
  display: grid;
  gap: var(--lb-space-3) var(--lb-space-4);
  align-items: end;
}



.lb-comparador__error {
  margin: var(--lb-space-2) 0 0;
  color: var(--lb-error);
  font-size: var(--lb-fs-body-sm);
}

.lb-comparador__propia {
  margin-top: var(--lb-space-3);
}

.lb-comparador__propia summary {
  color: var(--lb-text-link);
  cursor: pointer;
}

.lb-comparador__propia[open] summary {
  margin-bottom: var(--lb-space-2);
}

.lb-comparador__importe {
  max-width: 16rem;
}

/* --- El coste base y las etiquetas «orientativa» ------------------------------------------- */
.lb-comparador__base {
  margin-top: var(--lb-space-4);
  padding: var(--lb-space-4);
  border-radius: var(--lb-radius-lg);
  background: var(--lb-bg-surface-2);
}

.lb-comparador__base-titulo {
  margin: 0;
  color: var(--lb-text-secondary);
  font-size: var(--lb-fs-body-sm);
}

.lb-comparador__base-cifra {
  margin: var(--lb-space-1) 0;
  font-size: var(--lb-fs-title-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lb-comparador__etiqueta {
  display: inline-block;
  margin: var(--lb-space-1) 0 0;
  padding: 2px var(--lb-space-2);
  border-radius: var(--lb-radius-full);
  /* El par de «pendiente»: oscuro sobre claro en el modo claro y al revés en el grafito */
  background: var(--lb-estado-pendiente-bg);
  color: var(--lb-estado-pendiente-texto);
  font-size: var(--lb-fs-caption);
  font-weight: 600;
}

.lb-comparador__etiqueta--chica {
  margin: 0;
  padding: 0 var(--lb-space-1);
  font-weight: 500;
}

/* --- Modelo, periodo y ajustes ------------------------------------------------------------ */
.lb-comparador__grupo {
  margin: 0 0 var(--lb-space-3);
}

.lb-comparador__segmentos {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--lb-space-1);
  padding: var(--lb-space-1);
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-full);
  background: var(--lb-bg-surface-2);
}

.lb-comparador__segmentos label {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-1);
  min-height: 40px;
  padding: 0 var(--lb-space-3);
  border-radius: var(--lb-radius-full);
  cursor: pointer;
}

.lb-comparador__segmentos label:has(input:checked) {
  background: var(--lb-bg-surface);
  box-shadow: var(--lb-e1);
  font-weight: 600;
}

.lb-comparador__segmentos input:focus-visible {
  outline: 2px solid var(--lb-focus);
  outline-offset: 2px;
}

.lb-comparador__segmentos--chico label {
  min-height: 32px;
  font-size: var(--lb-fs-body-sm);
}


.lb-comparador__aviso {
  padding: var(--lb-space-3) var(--lb-space-4);
  border-left: 3px solid var(--lb-info);
  border-radius: var(--lb-radius-md);
  background: var(--lb-info-bg);
}

.lb-comparador__ajustes {
  margin: 0 0 var(--lb-space-5);
}

.lb-comparador__interruptor {
  margin-bottom: var(--lb-space-3);
  font-weight: 600;
}

.lb-comparador__rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lb-space-4);
}

.lb-comparador__porcentaje {
  max-width: 10rem;
}

/* --- La navegación de cada paso ----------------------------------------------------------- */
.lb-comparador__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--lb-space-3);
  margin-top: var(--lb-space-5);
  padding-top: var(--lb-space-4);
  border-top: 1px solid var(--lb-border-subtle);
}

.lb-comparador__nav-der {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
  margin-left: auto;
}

.lb-comparador__calcular {
  margin-top: var(--lb-space-4);
}

/* --- El resultado ------------------------------------------------------------------------- */
.lb-comparador__resultado {
  padding: var(--lb-space-5);
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-xl);
  background: var(--lb-bg-surface-2);
}

.lb-comparador__cifras {
  display: grid;
  gap: var(--lb-space-2);
  margin: 0;
}

.lb-comparador__cifras > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--lb-space-3);
  padding-bottom: var(--lb-space-2);
  border-bottom: 1px solid var(--lb-border-subtle);
}

.lb-comparador__cifras dt {
  color: var(--lb-text-secondary);
  font-weight: 400;
}

.lb-comparador__cifras dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.lb-comparador__cifras > .lb-comparador__diferencia {
  display: block;
  border-bottom: 0;
}

.lb-comparador__diferencia dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lb-space-1) var(--lb-space-3);
}

.lb-comparador__cifra {
  font-size: var(--lb-fs-display-3);
  line-height: var(--lb-lh-display-3);
  font-weight: 700;
}

.lb-comparador__pct {
  color: var(--lb-text-secondary);
  font-weight: 500;
}

.lb-comparador__frase {
  margin: var(--lb-space-3) 0 0;
  font-weight: 500;
}

.lb-comparador__reparto,
.lb-comparador__outsourcing {
  margin: var(--lb-space-3) 0 0;
}

.lb-comparador__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
  margin-top: var(--lb-space-4);
}

/* --- Los perfiles del paso 1 y sus presupuestos (fase 2) ---------------------------------- */
.lb-comparador__perfiles,
.lb-comparador__presupuestos,
.lb-comparador__por-perfil {
  display: grid;
  gap: var(--lb-space-3);
  margin: 0 0 var(--lb-space-3);
  padding: 0;
  list-style: none;
}

.lb-comparador__perfil {
  padding: var(--lb-space-4);
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-lg);
  background: var(--lb-bg-surface);
}

.lb-comparador__perfil-cabeza {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--lb-space-2);
  margin-bottom: var(--lb-space-2);
}

.lb-comparador__perfil-titulo {
  margin: 0;
  font-weight: 700;
}

.lb-comparador__acciones-perfiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}

.lb-comparador__fila--puesto {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

/* --- El resultado por perfil ----------------------------------------------------------------- */
.lb-comparador__fila-resultado {
  padding: var(--lb-space-3) var(--lb-space-4);
  border: 1px solid var(--lb-border-subtle);
  border-radius: var(--lb-radius-lg);
  background: var(--lb-bg-surface);
}

.lb-comparador__fila-nombre {
  display: flex;
  align-items: center;
  gap: var(--lb-space-2);
  margin: 0 0 var(--lb-space-2);
  font-weight: 600;
}

.lb-comparador__cifras--chicas dd {
  font-weight: 500;
}

/* --- La copia por correo ---------------------------------------------------------------------- */
.lb-comparador__copia {
  padding: var(--lb-space-5) var(--lb-space-6) var(--lb-space-6);
  border-top: 1px solid var(--lb-border-subtle);
  background: var(--lb-bg-surface-2);
}

.lb-comparador__copia-titulo {
  margin: 0 0 var(--lb-space-1);
  font-size: var(--lb-fs-title-3);
}

.lb-comparador__rejilla--copia {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--lb-space-3) 0;
}

.lb-comparador__acepto {
  display: flex;
  gap: var(--lb-space-2);
  align-items: flex-start;
  margin: 0 0 var(--lb-space-3);
}

.lb-comparador__enviada {
  padding: var(--lb-space-3) var(--lb-space-4);
  border-left: 3px solid var(--lb-exito);
  border-radius: var(--lb-radius-md);
  background: var(--lb-exito-bg);
}

/* El campo trampa: fuera de la vista y del foco, como el del contacto. */
.lb-comparador__trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- A lo estrecho, una columna ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .lb-comparador__rejilla,
  .lb-comparador__rejilla--copia {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .lb-comparador__paso,
  .lb-comparador__resultado {
    padding: var(--lb-space-4);
  }

  .lb-comparador__indicador {
    padding: var(--lb-space-2) var(--lb-space-3);
  }

  /* Los cuatro en una fila: los números y, del actual, también su nombre */
  .lb-comparador__indicador ol {
    flex-wrap: nowrap;
    gap: var(--lb-space-1);
  }

  .lb-comparador__indicador button {
    padding: var(--lb-space-1) var(--lb-space-2);
    white-space: nowrap;
  }

  .lb-comparador__indicador button span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .lb-comparador__indicador [aria-current="step"] span:last-child {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
  }

  .lb-comparador__fila--puesto,
  .lb-comparador__rejilla {
    grid-template-columns: minmax(0, 1fr);
  }

  .lb-comparador__cifras > div {
    flex-direction: column;
  }

  .lb-comparador__cifra {
    font-size: var(--lb-fs-title-1);
    line-height: var(--lb-lh-title-1);
  }

  .lb-comparador__copia {
    padding-left: var(--lb-space-4);
    padding-right: var(--lb-space-4);
  }
}

/* ===== En la portada fija (AL-346, fase 3) ===================================================
   La portada no carga Bootstrap (sería otra página: AL-353), y el bloque usa lo poco suyo que
   le hace falta: las etiquetas encima, los campos a todo el ancho con su flecha, el «€» pegado,
   el interruptor, los botones secundarios y lo oculto a la vista. Aquí sólo eso, dentro de la
   sección, con los tokens de la landing: el mismo aspecto que en /calculadora. */
.calculadora-landing { padding-block: clamp(96px, 11vw, 168px); }
/* El ancla y la vuelta de la copia (`#calculadora`, `#comparador`), por debajo de la cabecera fija. */
.calculadora-landing [id] { scroll-margin-top: 84px; }
.calculadora-landing :is(h2, h3, h4) { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }
.calculadora-landing p { margin-top: 0; margin-bottom: 1rem; }
.calculadora-landing fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.calculadora-landing legend { float: left; width: 100%; padding: 0; margin-bottom: .5rem; line-height: inherit; }
.calculadora-landing legend + * { clear: left; }
.calculadora-landing label { display: inline-block; }
.calculadora-landing .visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.calculadora-landing .form-label { margin-bottom: .5rem; }
.calculadora-landing :is(.form-control, .form-select) { display: block; width: 100%; }
.calculadora-landing .form-select {
  appearance: none; padding-right: 44px; background-repeat: no-repeat; background-position: right 16px center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.calculadora-landing .input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.calculadora-landing .input-group > .form-control { flex: 1 1 auto; width: 1%; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.calculadora-landing .input-group-text {
  display: flex; align-items: center; padding: 0 16px; border: 1px solid var(--border-strong); border-left: 0;
  border-radius: 0 14px 14px 0; background: var(--surface-2); color: var(--text-2);
}
.calculadora-landing .form-check { display: flex; gap: 10px; align-items: center; min-height: 1.5rem; }
.calculadora-landing .form-check-input { flex: none; margin: 0; }
.calculadora-landing .form-switch .form-check-input {
  appearance: none; width: 42px; height: 24px; border-radius: 999px; cursor: pointer;
  background: radial-gradient(circle at 12px 50%, var(--lb-blanco) 8px, transparent 8.5px), var(--border-strong);
  transition: background-color .2s var(--ease);
}
.calculadora-landing .form-switch .form-check-input:checked {
  background: radial-gradient(circle at 30px 50%, var(--lb-blanco) 8px, transparent 8.5px), var(--violeta);
}
.calculadora-landing .form-switch .form-check-input:focus-visible { outline: 2px solid var(--violeta-500); outline-offset: 3px; }
.calculadora-landing .btn-outline-secondary { background: transparent; border-color: transparent; color: var(--text); box-shadow: none; }
.calculadora-landing .btn-outline-secondary:hover { background: var(--surface-2); }