/*
 * Configurador embebido (iframe en la web o shadowbox del admin).
 * La clase html.embebido la añade configurador/embebido.html.twig.
 *
 * - Fondo de página completamente blanco.
 * - Las cajas pasan a tener el gris que antes tenía el fondo.
 * - Sin bordes ni sombras. Lo seleccionado y el foco se marcan con un
 *   resalte interior del color del tema.
 */
html.embebido {
  --embebido-caja: #f5f5f5;
  --embebido-sobre-caja: #ffffff;
  --embebido-bloqueado: #ebebeb;
}

/* Página */
html.embebido,
html.embebido body {
  background: #fff !important;
}

/* Dentro del iframe "vh" es la altura del propio iframe: los mínimos basados en vh y las
   alturas fijas hacen que la altura enviada al padre solo pueda crecer. */
html.embebido,
html.embebido body,
html.embebido .layout {
  min-height: 0 !important;
  height: auto !important;
}

/* Cajas: gris y sin bordes */
html.embebido .card,
html.embebido .card-facturacion,
html.embebido .card-promos,
html.embebido .resumen,
html.embebido .confirm-card,
html.embebido .resumen-wrapper {
  background: var(--embebido-caja) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Elementos dentro de las cajas: blancos sobre el gris */
html.embebido .opcion,
html.embebido .opcion-wrapper .info-icon,
html.embebido .linea-bloque,
html.embebido .confirm-section,
html.embebido .upload-card,
html.embebido .input,
html.embebido input[type="text"],
html.embebido input[type="email"],
html.embebido input[type="tel"],
html.embebido input[type="number"],
html.embebido select,
html.embebido textarea,
html.embebido .ts-wrapper.single .ts-control {
  background: var(--embebido-sobre-caja) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Campos dentro de un bloque blanco (líneas, secciones de confirmación): vuelven al gris */
html.embebido .linea-bloque .input,
html.embebido .linea-bloque input[type="text"],
html.embebido .linea-bloque select,
html.embebido .confirm-section .input,
html.embebido .confirm-section input[type="text"],
html.embebido .confirm-section input[type="email"],
html.embebido .confirm-section select {
  background: var(--embebido-caja) !important;
}

html.embebido input[readonly],
html.embebido input:disabled,
html.embebido .campo-bloqueado {
  background: var(--embebido-bloqueado) !important;
}

/* Selección y foco sin borde: resalte interior */
html.embebido .opcion:hover,
html.embebido .opcion-wrapper .info-icon:hover {
  box-shadow: inset 0 0 0 1px var(--color-principal) !important;
}

html.embebido .opcion.selected,
html.embebido .opcion-wrapper:has(a.selected) .info-icon {
  box-shadow: inset 0 0 0 2px var(--color-principal) !important;
}

html.embebido .input:focus,
html.embebido input[type="text"]:focus,
html.embebido input[type="email"]:focus,
html.embebido input[type="tel"]:focus,
html.embebido input[type="number"]:focus,
html.embebido select:focus,
html.embebido textarea:focus,
html.embebido .ts-wrapper.single .ts-control.focus {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--color-principal) !important;
}

/* Botones + / − de móviles: sin borde, en el color del tema para que se vean sobre blanco */
html.embebido .opcion-movil .contador a {
  border: none !important;
  background: var(--color-principal) !important;
  color: #fff !important;
}

/* Botones de navegación de la cabecera */
html.embebido .btn-prev,
html.embebido .btn-next-secondary {
  border: none !important;
}

/* Separadores y líneas decorativas */
html.embebido .bloque-fijo {
  border-top: none !important;
}

/* Desplegable del buscador de direcciones */
html.embebido .ts-dropdown {
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Avisos y mensajes de error: se mantiene el color de fondo, sin borde */
html.embebido .facturacion-aviso,
html.embebido .cambio-nombre-aviso,
html.embebido .datos-aviso,
html.embebido #flash-error,
html.embebido [style*="#ffb3b3"] {
  border: none !important;
}

/* Modal de documentación (Bootstrap) */
html.embebido #modal-docs .modal-content {
  border: none !important;
}

/* Sin márgenes exteriores: el contenido llega hasta los bordes del iframe y el espacio
   alrededor lo decide la página que lo embebe. Los huecos entre cajas se mantienen. */
html.embebido body {
  margin: 0 !important;
  padding: 0 !important;
  /* Que los hijos no se estiren a la altura del body (la altura del iframe sale de ellos) */
  align-items: flex-start !important;
}

/* En móvil (<= 491px) .content reserva hueco abajo para la barra fija del resumen: se respeta */
@media (min-width: 492px) {
  html.embebido .content {
    padding-bottom: 0 !important;
  }
}

html.embebido .layout,
html.embebido .boton-siguiente-wrapper,
html.embebido .boton-siguiente-wrapper .btn-next {
  margin-bottom: 0 !important;
}

/* Los contenedores ocupan todo el ancho del iframe en vez de centrarse con márgenes automáticos */
html.embebido .contenedor,
html.embebido .config-wrapper,
html.embebido .gracias-wrapper {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html.embebido .gracias-wrapper {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Home en escritorio: las columnas usan anchos fijos centrados con margin: auto y el resumen
   deja 20px a la derecha; se reparten el ancho disponible sin márgenes exteriores */
@media (min-width: 992px) {
  html.embebido .bloque-fibra-tv,
  html.embebido .bloque-movil,
  html.embebido .bloque-movil-duplicado {
    margin-left: 0 !important;
    max-width: none !important;
  }

  html.embebido .col-izquierda > :last-child {
    margin-bottom: 0 !important;
  }

  html.embebido .bloque-fibra-tv .card-fibra {
    flex: 1;
  }

  html.embebido .opcion-fibra {
    width: auto !important;
  }

  html.embebido .resumen,
  html.embebido .card-promos {
    margin-right: 0 !important;
  }
}