/*
 * Estilos del asistente de contratación — reutiliza la paleta de marca de conettam-catalogo
 * (mismas variables, redeclaradas aquí para que este plugin no dependa de que el otro también
 * esté cargado en la misma página). Layout de dos columnas (contenido + resumen fijo), como en
 * todas las operadoras revisadas (Parlem, Pepephone, Vodafone, MasMovil, Guuk, PTV...).
 */
:root {
	--conettam-color-primario: #7b2d8e;
	--conettam-color-primario-oscuro: #5e2270;
	--conettam-color-texto: #1c1b18;
	--conettam-color-texto-secundario: #6e685e;
	--conettam-color-borde: #e4e0da;
	--conettam-color-fondo-suave: #faf8f6;
}

#conettam-asistente {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 32px;
	align-items: start;
	max-width: 960px;
	margin: 0 auto;
	color: var(--conettam-color-texto);
	font-size: 1rem;
}
/* Red de seguridad anti-scroll-horizontal: cualquier bloque interno que herede un ancho fijo o
   texto largo debe encogerse antes que ensanchar la fila/columna que lo contiene.
   El "min-width: 0" es la parte que de verdad soluciona el desbordamiento: por defecto, un hijo
   flex/grid con "white-space: nowrap" (p.ej. el texto de un selector con ellipsis) reserva el
   ancho COMPLETO de su texto sin cortar como "mínimo", aunque luego se recorte visualmente con
   overflow:hidden — ese mínimo es justo lo que empuja a toda la columna a desbordar en móvil.
   Confirmado en vivo (DevTools) en el paso "Configura tu pack": el causante concreto era
   ".conettam-selector-toggle-contenido" (el texto de la tarifa elegida en el selector), pero
   aplicarlo a todo el asistente evita que vuelva a pasar con cualquier otro texto nowrap similar. */
#conettam-asistente,
#conettam-asistente * {
	box-sizing: border-box;
	min-width: 0;
}
#conettam-asistente img,
#conettam-asistente svg {
	max-width: 100%;
}
@media (max-width: 860px) {
	#conettam-asistente { grid-template-columns: 1fr; }
	#conettam-asistente .conettam-columna-lateral { order: -1; }
}

#conettam-asistente h3 { margin: 0 0 16px; font-size: 1.4rem; }
#conettam-asistente h4 { margin: 0 0 10px; font-size: 1.05rem; }

/* ---------------------------------------------------------------------------------------- */
/* Acordeón: pasos completados colapsados con check + "Modificar"; el activo, expandido       */
/* ---------------------------------------------------------------------------------------- */
#conettam-asistente .conettam-acordeon { display: flex; flex-direction: column; gap: 10px; }
#conettam-asistente .conettam-paso-resumen {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--conettam-color-borde);
	border-radius: 8px;
	background: var(--conettam-color-fondo-suave);
}
#conettam-asistente .conettam-paso-check {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--conettam-color-primario);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}
#conettam-asistente .conettam-paso-resumen-texto { flex: 1; font-size: 0.9rem; color: var(--conettam-color-texto-secundario); }
#conettam-asistente .conettam-paso-resumen-texto strong { color: var(--conettam-color-texto); }
#conettam-asistente .conettam-btn-modificar {
	flex-shrink: 0;
	background: #fff;
	border: 1px solid var(--conettam-color-primario);
	color: var(--conettam-color-primario);
	border-radius: 6px;
	padding: 6px 14px;
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
}
#conettam-asistente .conettam-btn-modificar:hover { background: var(--conettam-color-primario); color: #fff; }
#conettam-asistente .conettam-paso-activo {
	border: 2px solid var(--conettam-color-primario);
	border-radius: 8px;
	padding: 20px;
}

/* ---------------------------------------------------------------------------------------- */
/* Barra lateral de resumen (fija durante todo el proceso)                                    */
/* ---------------------------------------------------------------------------------------- */
#conettam-asistente .conettam-columna-lateral { position: sticky; top: 20px; }
#conettam-asistente .conettam-resumen-lateral {
	border: 1px solid var(--conettam-color-borde);
	border-radius: 10px;
	padding: 18px;
	background: #fff;
}
#conettam-asistente .conettam-resumen-vacio { color: var(--conettam-color-texto-secundario); font-size: 0.9rem; }

/* Cabecera compacta: en escritorio es solo el título (no hace nada al pulsarla, el detalle ya
   está siempre visible debajo); en móvil se convierte en el botón que pliega/despliega el resto. */
#conettam-asistente .conettam-resumen-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	background: none;
	border: none;
	padding: 0 0 12px;
	margin: 0 0 12px;
	border-bottom: 1px solid var(--conettam-color-borde);
	font: inherit;
	color: var(--conettam-color-texto);
	text-align: left;
	cursor: default;
}
#conettam-asistente .conettam-resumen-cabecera-texto { min-width: 0; overflow-wrap: anywhere; }
#conettam-asistente .conettam-resumen-cabecera-texto strong { font-size: 1.05rem; }
#conettam-asistente .conettam-resumen-cabecera-flecha { display: none; flex-shrink: 0; color: var(--conettam-color-texto-secundario); }

@media (max-width: 860px) {
	#conettam-asistente .conettam-resumen-cabecera { cursor: pointer; padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
	#conettam-asistente .conettam-resumen-cabecera-flecha { display: inline; }
	/* Compacto por defecto: solo cuota mensual + "IVA incluido" (ya en la cabecera). Sin sorpresas:
	   el total mostrado plegado es siempre el mismo número final que al desplegar. */
	#conettam-asistente .conettam-resumen-detalle { display: none; padding-top: 12px; }
	#conettam-asistente .conettam-resumen-detalle-abierto { display: block; }
}

#conettam-asistente .conettam-resumen-lineas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
#conettam-asistente .conettam-resumen-linea {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	font-size: 0.85rem;
	padding-bottom: 6px;
	border-bottom: 1px dashed var(--conettam-color-borde);
	color: var(--conettam-color-texto-secundario);
}
/* El nombre puede ser largo (con portabilidad/número entre paréntesis) y está bien que envuelva a
   varias líneas, pero el precio nunca debe partirse — sin flex-shrink:0 + nowrap aquí, el propio
   flex row a veces encogía el precio en vez de (o además de) el nombre. */
#conettam-asistente .conettam-resumen-linea-nombre { flex: 1 1 auto; min-width: 0; }
#conettam-asistente .conettam-resumen-linea-precio { flex: 0 0 auto; white-space: nowrap; }
#conettam-asistente .conettam-resumen-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-weight: 800;
	font-size: 1.15rem;
	color: var(--conettam-color-primario);
	padding-top: 8px;
	border-top: 1px solid var(--conettam-color-borde);
}
#conettam-asistente .conettam-resumen-total-unico { font-size: 0.95rem; color: var(--conettam-color-texto); border-top: none; padding-top: 2px; }
#conettam-asistente .conettam-resumen-nota { margin: 10px 0 0; font-size: 0.75rem; color: var(--conettam-color-texto-secundario); }

/* ---------------------------------------------------------------------------------------- */
/* Formularios genéricos                                                                      */
/* ---------------------------------------------------------------------------------------- */
#conettam-asistente .conettam-campo { display: block; margin-bottom: 12px; font-size: 0.88rem; color: var(--conettam-color-texto-secundario); }
#conettam-asistente .conettam-campo input[type="text"],
#conettam-asistente .conettam-input-direccion {
	display: block;
	width: 100%;
	padding: 10px 12px;
	margin-top: 4px;
	box-sizing: border-box;
	border: 1px solid var(--conettam-color-borde);
	border-radius: 6px;
	font-size: 1rem;
	color: var(--conettam-color-texto);
}
#conettam-asistente .conettam-campo input[type="text"]:focus,
#conettam-asistente .conettam-input-direccion:focus { outline: none; border-color: var(--conettam-color-primario); }
#conettam-asistente .conettam-campo-check { display: block; margin: 16px 0; font-size: 0.9rem; }
#conettam-asistente .conettam-direccion-facturacion { border-top: 1px dashed var(--conettam-color-borde); padding-top: 12px; margin-top: 4px; }

#conettam-asistente .conettam-btn {
	display: inline-block;
	padding: 12px 26px;
	border: none;
	border-radius: 8px;
	background: var(--conettam-color-primario);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
#conettam-asistente .conettam-btn:hover { background: var(--conettam-color-primario-oscuro); }
#conettam-asistente .conettam-btn:disabled { opacity: 0.6; cursor: default; }
/* Spinner inline para botones que disparan una llamada que tarda (buscar dirección, comprobar
   cobertura...) — sin esto el cliente no tiene ninguna pista de que la web está trabajando. */
#conettam-asistente .conettam-spinner {
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 6px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: #fff;
	border-radius: 50%;
	vertical-align: -2px;
	animation: conettam-girar 0.7s linear infinite;
}
@keyframes conettam-girar {
	to { transform: rotate(360deg); }
}
#conettam-asistente .conettam-btn-link {
	background: none;
	border: none;
	color: var(--conettam-color-primario);
	text-decoration: underline;
	cursor: pointer;
	padding: 4px 0;
	font-size: 0.95rem;
	display: block;
	margin-top: 8px;
}
#conettam-asistente ul { list-style: none; margin: 8px 0; padding: 0; }
#conettam-asistente .conettam-aviso { padding: 10px 14px; margin-bottom: 16px; border-radius: 6px; font-size: 0.9rem; }
#conettam-asistente .conettam-error { background: #fbeaea; color: #a30000; }
/* Aviso amable (p. ej. cobertura no disponible por mantenimiento): no es el rojo de error, pero se tiene que leer (lleva el teléfono): fondo suave, borde completo de 1 px y texto principal. */
#conettam-asistente .conettam-aviso.conettam-aviso-amable { background: var(--conettam-color-fondo-suave); color: var(--conettam-color-texto); border: 1px solid var(--conettam-color-borde); }
#conettam-asistente .conettam-info { background: var(--conettam-color-fondo-suave); color: var(--conettam-color-texto-secundario); padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.9rem; }
#conettam-asistente .conettam-anfitrion-box {
	background: var(--conettam-color-fondo-suave);
	border: 1px solid var(--conettam-color-primario);
	border-radius: 8px;
	padding: 12px 14px 4px;
	margin-bottom: 16px;
}
#conettam-asistente .conettam-anfitrion-box .conettam-campo { margin-bottom: 8px; }
#conettam-asistente .conettam-anfitrion-box input[type="text"]::placeholder { color: var(--conettam-color-texto-secundario); opacity: 0.7; }
#conettam-asistente .conettam-anfitrion-mensaje { margin: -4px 0 8px; min-height: 1.2em; }
#conettam-asistente .conettam-anfitrion-ok { color: #1e7e34; font-weight: 600; }
#conettam-asistente .conettam-anfitrion-error { color: #a30000; font-weight: 600; }
/* Pantalla final de éxito: ocupa las dos columnas del asistente (no solo la principal) y se
   centra, para que se note claramente que es el final del proceso y no un paso más. */
#conettam-asistente .conettam-exito-pantalla {
	grid-column: 1 / -1;
	text-align: center;
	background: #eafbea;
	color: #0a6b0a;
	padding: 40px 24px;
	border-radius: 12px;
}
#conettam-asistente .conettam-exito-icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #0a6b0a;
	color: #fff;
	font-size: 2rem;
}
#conettam-asistente .conettam-exito-titulo { margin: 0 0 10px; font-size: 1.8rem; color: var(--conettam-color-primario); }
#conettam-asistente .conettam-exito-texto { max-width: 480px; margin: 0 auto 22px; font-size: 1.05rem; line-height: 1.5; color: var(--conettam-color-texto); }
#conettam-asistente .conettam-exito-pasos { display: inline-block; text-align: left; margin: 0 auto; font-size: 0.95rem; color: #0a6b0a; }
#conettam-asistente .conettam-exito-pasos li { margin-bottom: 8px; }

/* Cobro puntual pendiente (terminales/envío) dentro de la propia pantalla de éxito: se separa
   visualmente con una línea y una caja blanca para que se lea como un paso aparte, no como parte
   del mensaje de bienvenida — el botón solo, sin este contexto, era fácil de pasar por alto. */
#conettam-asistente .conettam-exito-cobro-pendiente {
	margin: 28px auto 0;
	padding-top: 24px;
	max-width: 480px;
	border-top: 1px dashed rgba(10, 107, 10, 0.3);
}

#conettam-asistente .conettam-siguientes-pasos {
	background: #fff;
	border-radius: 10px;
	padding: 6px 16px;
	margin-bottom: 16px;
	text-align: left;
}
#conettam-asistente .conettam-siguiente-paso { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
#conettam-asistente .conettam-siguiente-paso + .conettam-siguiente-paso { border-top: 1px solid var(--conettam-color-borde); }
#conettam-asistente .conettam-siguiente-paso-icono {
	flex: none;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--conettam-color-fondo-suave);
	color: var(--conettam-color-texto-secundario);
	font-weight: 700;
	font-size: 0.85rem;
}
#conettam-asistente .conettam-siguiente-paso strong { color: var(--conettam-color-texto); font-size: 0.92rem; }
#conettam-asistente .conettam-siguiente-paso small { color: var(--conettam-color-texto-secundario); }
#conettam-asistente .conettam-siguiente-paso-hecho .conettam-siguiente-paso-icono { background: #0a6b0a; color: #fff; }
#conettam-asistente .conettam-siguiente-paso-actual .conettam-siguiente-paso-icono { background: var(--conettam-color-primario); color: #fff; }
#conettam-asistente .conettam-siguiente-paso-actual { background: var(--conettam-color-fondo-suave); border-radius: 8px; margin: 0 -10px; padding: 10px; }

/* ---------------------------------------------------------------------------------------- */
/* Cobertura                                                                                  */
/* ---------------------------------------------------------------------------------------- */
#conettam-asistente .conettam-cobertura-ok { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#conettam-asistente .conettam-cobertura-icono {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #eafbea;
	color: #0a6b0a;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
}
#conettam-asistente .conettam-cobertura-direccion { color: var(--conettam-color-texto-secundario); font-size: 0.85rem; }
#conettam-asistente .conettam-cobertura-producto {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 18px;
	background: var(--conettam-color-fondo-suave);
	border-radius: 8px;
	margin-bottom: 16px;
	font-weight: 700;
}
#conettam-asistente .conettam-cobertura-precio { color: var(--conettam-color-primario); }
/* Argumento comercial: nuestras tarifas son definitivas, no una promoción temporal — se destaca
   (no es la permanencia, que va aparte y discreta entre paréntesis junto al precio). */
#conettam-asistente .conettam-precio-definitivo { font-size: 0.85rem; font-weight: 700; color: #0a6b0a; margin: -6px 0 16px; }
/* CSS Grid en vez de flex: con flex, el width:100% que trae .conettam-input-direccion por defecto
   (para cuando se usa sola, fuera de esta fila) se colaba en el cálculo del flex-basis y acababa
   encogiendo el campo casi a 0 mientras el botón se quedaba con todo el ancho — el bug de siempre.
   Con grid-template-columns: 1fr auto no hay ninguna interacción flex-basis/width que pueda salir
   mal: la primera columna se lleva todo el espacio sobrante y la segunda su ancho natural, punto. */
#conettam-asistente .conettam-cobertura-buscador {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: start;
}
#conettam-asistente .conettam-cobertura-buscador .conettam-input-direccion { width: 100% !important; min-width: 0; margin-top: 0; }
#conettam-asistente .conettam-cobertura-buscador .conettam-btn { white-space: nowrap; }
/* Dirección/portal ya elegidos: sustituyen al campo editable, con estilo de "confirmado" en vez
   de invitar a seguir escribiendo. */
#conettam-asistente .conettam-direccion-elegida {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
	background: var(--conettam-color-fondo-suave);
	border-radius: 8px;
	font-weight: 700;
	margin-bottom: 4px;
}
#conettam-asistente .conettam-direccion-elegida .conettam-btn-link { margin: 0; }
#conettam-asistente .conettam-portal-elegido {
	padding: 10px 16px;
	background: var(--conettam-color-fondo-suave);
	border-radius: 8px;
	font-weight: 700;
	color: #0a6b0a;
	margin-bottom: 12px;
}
#conettam-asistente .conettam-opcion-cobertura {
	display: block;
	width: 100%;
	text-align: left;
	padding: 12px 16px;
	margin-bottom: 6px;
	border: 1px solid var(--conettam-color-borde);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	font-size: 0.95rem;
	color: var(--conettam-color-texto);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
#conettam-asistente .conettam-opcion-cobertura:hover { border-color: var(--conettam-color-primario); background: var(--conettam-color-fondo-suave); }
/* Portales/edificios: 3-4 por línea con el mismo ancho (auto-fit los reduce a menos columnas solo
   si el nombre es largo y no cabe en el mínimo), en vez de una lista vertical infinita en
   edificios con muchos portales. */
#conettam-asistente .conettam-lista-portales {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 8px;
}
#conettam-asistente .conettam-lista-portales .conettam-opcion-cobertura { width: auto; margin-bottom: 0; text-align: center; }
#conettam-asistente .conettam-form-piso-puerta { display: flex; gap: 10px; margin-bottom: 12px; }
#conettam-asistente .conettam-form-piso-puerta input { flex: 1; }

/* ---------------------------------------------------------------------------------------- */
/* Paso "Configura tu pack"                                                                   */
/* ---------------------------------------------------------------------------------------- */
#conettam-asistente .conettam-pack-base {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 18px;
	background: var(--conettam-color-fondo-suave);
	border: 1px solid var(--conettam-color-primario);
	border-radius: 8px;
	margin-bottom: 16px;
}
#conettam-asistente .conettam-pack-base-badge {
	align-self: flex-start;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--conettam-color-primario);
}
#conettam-asistente .conettam-pack-base-definitivo { font-size: 0.75rem; font-weight: 700; color: #0a6b0a; }
#conettam-asistente .conettam-pack-base-linea { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#conettam-asistente .conettam-pack-precio-base { font-weight: 800; color: var(--conettam-color-primario); font-size: 1.2rem; }
#conettam-asistente .conettam-pack-card { border: 1px solid var(--conettam-color-borde); border-radius: 8px; padding: 14px 18px; margin-bottom: 14px; }
#conettam-asistente .conettam-subtitulo { margin: 16px 0 6px; font-size: 0.95rem; padding-top: 12px; border-top: 1px dashed var(--conettam-color-borde); }
#conettam-asistente .conettam-pack-incluidos li { color: var(--conettam-color-texto); padding: 3px 0; }

/* Mini navegación por fases dentro de "Configura tu pack" (Fibra/Móvil/TV/Extra), igual que las
   pestañas de order_create.php en Gestia — evita el scroll largo con todas las categorías juntas. */
#conettam-asistente .conettam-fases {
	display: flex;
	gap: 6px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
#conettam-asistente .conettam-fases li {
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	background: var(--conettam-color-fondo-suave);
	color: var(--conettam-color-texto-secundario);
}
#conettam-asistente .conettam-fase-activa { background: var(--conettam-color-primario) !important; color: #fff !important; }
#conettam-asistente .conettam-fase-completada { background: #fff !important; color: var(--conettam-color-primario) !important; border: 1px solid var(--conettam-color-primario); }
#conettam-asistente .conettam-fase-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}
#conettam-asistente .conettam-fase-nav .conettam-btn-link { margin-top: 0; }
/* Botón "Anterior": blanco con borde, para contrastar claramente con "Siguiente/Continuar"
   (sólido, en el color de marca) sin competir visualmente con él. */
#conettam-asistente .conettam-btn-anterior {
	display: inline-block;
	box-sizing: border-box;
	/* 1px menos de padding vertical que .conettam-btn (que no tiene borde) para compensar el
	   borde de 1px arriba y abajo — así ambos botones miden exactamente el mismo alto. */
	padding: 11px 22px;
	border: 1px solid var(--conettam-color-borde);
	border-radius: 8px;
	background: #fff;
	color: var(--conettam-color-texto);
	font-weight: 700;
	font-size: 1rem;
	line-height: normal;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
#conettam-asistente .conettam-btn-anterior:hover { border-color: var(--conettam-color-primario); color: var(--conettam-color-primario); }

/* Upsell discreto de fibra dentro de un pedido que empieza siendo solo móvil — mismo patrón de
   grid que el buscador de cobertura principal (ver .conettam-cobertura-buscador): con flex, el
   width:100% que trae .conettam-input-direccion por defecto se colaba en el cálculo y encogía el
   campo casi a 0 mientras el botón se quedaba con todo el ancho. */
#conettam-asistente .conettam-fibra-upsell { border-style: dashed; }
#conettam-asistente .conettam-fibra-buscador {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: start;
	margin: 10px 0;
}
#conettam-asistente .conettam-fibra-buscador .conettam-input-direccion { width: 100% !important; min-width: 0; margin-top: 0; }
#conettam-asistente .conettam-fibra-buscador .conettam-btn { white-space: nowrap; }
/* Tarjetas de fibra disponible en esta segunda dirección — mismo espíritu que las tarjetas de
   tarifa (TV/dispositivos): nombre + precio grande + botón, sin mencionar la permanencia (ver
   .conettam-precio-definitivo debajo de la lista para el mensaje comercial de precio fijo). */
#conettam-asistente .conettam-lista-alternativas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin: 10px 0;
}
#conettam-asistente .conettam-fibra-alternativa-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 16px 12px;
	border: 1px solid var(--conettam-color-borde);
	border-radius: 10px;
	background: #fff;
}

/* Líneas móviles — selector + portabilidad/eSIM por línea, igual que en Gestia */
#conettam-asistente .conettam-linea-movil {
	border: 1px solid var(--conettam-color-borde);
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 12px;
}
#conettam-asistente .conettam-linea-movil-cabecera {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
#conettam-asistente .conettam-linea-movil-cabecera .conettam-btn-link { margin-top: 0; margin-left: auto; color: #a30000; }
/* Numerador de línea: grande y en círculo (pedido explícito) — también se usa como referencia en
   el selector de "a qué línea vinculo este terminal". */
#conettam-asistente .conettam-linea-numero-circulo {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--conettam-color-primario);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.15rem;
}
#conettam-asistente .conettam-linea-movil-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#conettam-asistente .conettam-linea-numero-tel { font-size: 0.85rem; color: var(--conettam-color-texto-secundario); }
#conettam-asistente .conettam-linea-badge-incluida {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--conettam-color-primario);
	background: var(--conettam-color-fondo-suave);
	padding: 3px 10px;
	border-radius: 999px;
}
#conettam-asistente .conettam-linea-movil[data-incluida="1"] { border-color: var(--conettam-color-primario); background: var(--conettam-color-fondo-suave); }
#conettam-asistente .conettam-linea-servicio-fijo-check { font-size: 0.9rem; }
#conettam-asistente .conettam-linea-movil select,
#conettam-asistente .conettam-linea-movil input[type="text"],
#conettam-asistente .conettam-linea-movil input[type="email"] {
	display: block;
	width: 100%;
	padding: 8px 10px;
	margin-bottom: 8px;
	border: 1px solid var(--conettam-color-borde);
	border-radius: 6px;
	font-size: 0.95rem;
	box-sizing: border-box;
}
#conettam-asistente .conettam-linea-portabilidad-opciones,
#conettam-asistente .conettam-linea-esim-opciones,
#conettam-asistente .conettam-linea-icc-opciones {
	padding-left: 4px;
	border-left: 2px solid var(--conettam-color-borde);
	margin: 4px 0 10px 6px;
	padding-left: 10px;
}
#conettam-asistente .conettam-anadir-linea-movil { display: block; margin-top: 4px; }
/* Portabilidad y eSIM en la misma fila en escritorio (en móvil/tablet se apilan, que es el
   formato que ya funcionaba bien ahí) — los campos dependientes de cada una siguen yendo debajo,
   ocupando el ancho completo, uno a continuación del otro si se marcan las dos. */
@media (min-width: 640px) {
	#conettam-asistente .conettam-linea-checks-fila { display: flex; gap: 24px; }
	#conettam-asistente .conettam-linea-checks-fila .conettam-campo-check { margin: 16px 0; }
}

/* Upsell a fibra superior: deliberadamente distinto del bloque "tu plan actual" (arriba, en
   .conettam-pack-base) — acento cálido en vez del primario de marca, para que a simple vista no
   se confundan. Se destaca la diferencia de precio (pequeña) en vez del precio total. */
#conettam-asistente .conettam-pack-upsell { border: 1px solid #e0a300; background: #fffaf0; border-radius: 8px; padding: 14px 18px; margin-bottom: 16px; }
#conettam-asistente .conettam-upsell-titulo {
	margin: 0 0 10px;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #a06800;
	display: flex;
	align-items: center;
	gap: 6px;
}
#conettam-asistente .conettam-upsell-icono { font-size: 0.95rem; }
#conettam-asistente .conettam-upsell-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 0;
	border-top: 1px solid rgba(224, 163, 0, 0.35);
}
#conettam-asistente .conettam-upsell-item:first-of-type { border-top: none; }
#conettam-asistente .conettam-upsell-info { display: flex; flex-direction: column; gap: 2px; }
#conettam-asistente .conettam-upsell-comparativa { font-size: 0.85rem; color: var(--conettam-color-texto-secundario); }
#conettam-asistente .conettam-upsell-cta { display: flex; align-items: center; gap: 10px; }
#conettam-asistente .conettam-upsell-diferencia { font-weight: 800; color: #a06800; white-space: nowrap; }
#conettam-asistente .conettam-btn-upsell { background: #e0a300; padding: 6px 14px; font-size: 0.85rem; }
#conettam-asistente .conettam-btn-upsell:hover { background: #c48f00; }

#conettam-asistente .conettam-opcional-linea,
#conettam-asistente .conettam-opcional-check {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--conettam-color-borde);
}
#conettam-asistente .conettam-opcional-linea:first-of-type,
#conettam-asistente .conettam-opcional-check:first-of-type { border-top: none; }
#conettam-asistente .conettam-opcional-precio { color: var(--conettam-color-texto-secundario); font-size: 0.9rem; margin-left: auto; margin-right: 10px; }
#conettam-asistente .conettam-stepper { display: inline-flex; align-items: center; gap: 10px; }
#conettam-asistente .conettam-stepper button {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--conettam-color-borde);
	background: #fff;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}
#conettam-asistente .conettam-stepper button:hover { border-color: var(--conettam-color-primario); color: var(--conettam-color-primario); }
#conettam-asistente .conettam-stepper-valor { min-width: 16px; text-align: center; font-weight: 700; }
#conettam-asistente .conettam-opcional-check { cursor: pointer; justify-content: flex-start; }
#conettam-asistente .conettam-opcional-check input { margin-right: 6px; }

#conettam-asistente .conettam-pack-continuar { margin-top: 8px; }

/* ---------------------------------------------------------------------------------------- */
/* Selector con estilo propio (tarifa de línea móvil, tarifa de TV): sustituye a un <select>
   nativo cuando hace falta alinear nombre + precio y mostrar información extra (permanencia...).
   ---------------------------------------------------------------------------------------- */
#conettam-asistente .conettam-selector { position: relative; margin-bottom: 10px; }
#conettam-asistente .conettam-selector-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--conettam-color-borde);
	border-radius: 6px;
	background: #fff;
	font-size: 0.95rem;
	text-align: left;
	cursor: pointer;
}
#conettam-asistente .conettam-selector-toggle:hover,
#conettam-asistente .conettam-selector.is-abierto .conettam-selector-toggle { border-color: var(--conettam-color-primario); }
#conettam-asistente .conettam-selector-toggle-contenido { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#conettam-asistente .conettam-selector-flecha {
	flex: none;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--conettam-color-texto-secundario);
	border-bottom: 2px solid var(--conettam-color-texto-secundario);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}
#conettam-asistente .conettam-selector.is-abierto .conettam-selector-flecha { transform: rotate(-135deg); }
#conettam-asistente .conettam-selector-panel {
	display: none;
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--conettam-color-borde);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	max-height: 260px;
	overflow-y: auto;
}
#conettam-asistente .conettam-selector.is-abierto .conettam-selector-panel { display: block; }
#conettam-asistente .conettam-selector-opcion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.9rem;
}
#conettam-asistente .conettam-selector-opcion:hover { background: var(--conettam-color-fondo-suave); }
#conettam-asistente .conettam-selector-opcion.is-selected { background: var(--conettam-color-fondo-suave); font-weight: 700; }
#conettam-asistente .conettam-selector-opcion-nombre { flex: 1; }
#conettam-asistente .conettam-selector-opcion-precio { color: var(--conettam-color-texto-secundario); font-size: 0.85rem; white-space: nowrap; }
#conettam-asistente .conettam-selector-opcion.is-selected .conettam-selector-opcion-precio { color: var(--conettam-color-primario); }

/* ---------------------------------------------------------------------------------------- */
/* Pago                                                                                       */
/* ---------------------------------------------------------------------------------------- */
#conettam-asistente .conettam-acciones-pago { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.gc-dropin-modal { z-index: 100000 !important; }

/* Modal propio para el Checkout de Stripe embebido (ver montarStripeEmbeddedCheckout() en
   wizard.js) — a diferencia del Drop-in de GoCardless, Stripe.js no crea su propio overlay, solo
   se monta en un contenedor que le demos, así que el modal en sí es cosa nuestra. */
.conettam-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(28, 27, 24, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
}
.conettam-modal-caja {
	position: relative;
	background: #fff;
	border-radius: 12px;
	max-width: 520px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 32px 24px 24px;
}
.conettam-modal-cerrar {
	position: absolute;
	top: 8px;
	right: 12px;
	border: none;
	background: none;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--conettam-color-texto-secundario);
	cursor: pointer;
	padding: 4px 8px;
}
.conettam-modal-cerrar:hover { color: var(--conettam-color-texto); }

/* Variante ancha para documentos (condiciones de contratación, PDF o página — ver
   abrirCondicionesModal() en wizard.js): necesita más espacio y sin padding interior propio, el
   iframe ocupa toda la caja. */
.conettam-modal-caja-documento {
	max-width: 900px;
	height: 85vh;
	padding: 0;
	display: flex;
}
.conettam-modal-caja-documento .conettam-modal-cerrar {
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	top: 10px;
	right: 10px;
	z-index: 1;
}
.conettam-modal-iframe {
	flex: 1;
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 12px;
}

/* ---------------------------------------------------------------------------------------- */
/* Reanudación de proceso en curso                                                            */
/* ---------------------------------------------------------------------------------------- */
#conettam-asistente .conettam-reanudacion {
	grid-column: 1 / -1;
	text-align: center;
	max-width: 460px;
	margin: 40px auto;
	padding: 32px;
	border: 1px solid var(--conettam-color-borde);
	border-radius: 10px;
}
#conettam-asistente .conettam-reanudacion .conettam-btn { display: block; width: 100%; margin-bottom: 6px; }

/* ---------------------------------------------------------------------------------------- */
/* Bloque "tentación" de dispositivos financiados (junto a las líneas móviles)                */
/* ---------------------------------------------------------------------------------------- */
#conettam-asistente .conettam-dispositivos-tentacion h4 { margin-bottom: 2px; }
/* 4 tarjetas por línea (pedido explícito) en desktop, menos en pantallas estrechas. */
#conettam-asistente .conettam-dispositivos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
	margin: 12px 0;
}
/* Tarjeta de terminal: foto a la izquierda, nombre/precio/permanencia a la derecha (precio
   destacado como en las tarifas), botón de añadir abajo — mismo diseño para los destacados y
   para el catálogo completo, para que no haya dos estilos distintos conviviendo. */
#conettam-asistente .conettam-dispositivo-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--conettam-color-borde);
	border-radius: 10px;
	background: #fff;
}
#conettam-asistente .conettam-dispositivo-card.is-seleccionado { border-color: var(--conettam-color-primario); background: var(--conettam-color-fondo-suave); }
#conettam-asistente .conettam-dispositivo-foto { flex-shrink: 0; width: 56px; height: 56px; object-fit: contain; }
#conettam-asistente .conettam-dispositivo-foto-vacia { background: var(--conettam-color-fondo-suave); border-radius: 6px; }
#conettam-asistente .conettam-dispositivo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#conettam-asistente .conettam-dispositivo-nombre { font-size: 0.88rem; line-height: 1.25; }
#conettam-asistente .conettam-dispositivo-precio-destacado { font-weight: 800; color: var(--conettam-color-primario); font-size: 1.05rem; }
#conettam-asistente .conettam-dispositivo-permanencia { font-size: 0.75rem; color: var(--conettam-color-texto-secundario); }
#conettam-asistente .conettam-dispositivo-card .conettam-btn { flex-basis: 100%; padding: 6px 16px; font-size: 0.85rem; }
#conettam-asistente .conettam-dispositivos-mas-toggle { display: block; margin-top: 6px; font-weight: 700; }
#conettam-asistente .conettam-dispositivos-lista { margin-top: 10px; border-top: 1px solid var(--conettam-color-borde); padding-top: 10px; }
#conettam-asistente .conettam-dispositivo-disclaimer { margin: 10px 0 0; font-size: 0.75rem; color: var(--conettam-color-texto-secundario); }
#conettam-asistente .conettam-dispositivo-financiado-fila {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 6px;
	border-top: 1px solid var(--conettam-color-borde);
	border-radius: 8px;
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
#conettam-asistente .conettam-dispositivo-financiado-fila:first-of-type { border-top: none; }
#conettam-asistente .conettam-dispositivo-financiado-fila .conettam-dispositivo-foto { width: 44px; height: 44px; }
#conettam-asistente .conettam-dispositivo-financiado-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#conettam-asistente .conettam-dispositivo-financiado-aviso { font-size: 0.8rem; font-weight: 700; color: var(--conettam-color-primario); }
#conettam-asistente .conettam-dispositivo-financiado-precio { font-size: 0.8rem; font-weight: 700; color: var(--conettam-color-texto-secundario); }
#conettam-asistente .conettam-dispositivo-financiado-linea { flex: none; max-width: 220px; }
/* Llamada de atención breve al añadir un terminal, para que el cliente vea dónde vincularlo a una
   línea aunque ya se haya autoasignado — dos pulsos suaves con el color de marca y se apaga sola. */
#conettam-asistente .conettam-destacar-atencion {
	background: var(--conettam-color-fondo-suave);
	box-shadow: 0 0 0 3px var(--conettam-color-primario);
	animation: conettam-pulso-atencion 1.1s ease-in-out 2;
}
@keyframes conettam-pulso-atencion {
	0%, 100% { box-shadow: 0 0 0 3px var(--conettam-color-primario); }
	50% { box-shadow: 0 0 0 0 var(--conettam-color-primario); }
}
#conettam-asistente .conettam-reanudacion .conettam-btn-link { text-align: center; margin-top: 0; }

/* ---------------------------------------------------------------------------------------- */
/* Tarjetas de tarifa de TV (mismo espíritu comercial que las de dispositivos)                */
/* ---------------------------------------------------------------------------------------- */
#conettam-asistente .conettam-tv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 12px;
}
#conettam-asistente .conettam-tv-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 16px 12px;
	border: 1px solid var(--conettam-color-borde);
	border-radius: 10px;
	background: #fff;
}
#conettam-asistente .conettam-tv-card.is-seleccionado { border-color: var(--conettam-color-primario); background: var(--conettam-color-fondo-suave); }
#conettam-asistente .conettam-tv-card-ninguna { color: var(--conettam-color-texto-secundario); justify-content: center; }
#conettam-asistente .conettam-tv-card .conettam-btn { margin-top: 4px; padding: 6px 16px; font-size: 0.85rem; }
/* El nombre y el icono de info van en la misma fila (en vez de un icono absoluto flotando sobre
   el texto, que en tarjetas estrechas llegaba a tapar parte del nombre) — así nunca se solapan,
   sea cual sea el largo del nombre del paquete. */
#conettam-asistente .conettam-tv-titulo-fila {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	width: 100%;
}
/* Icono de info: al pasar el ratón (o enfocar con teclado) se despliega un panel con la
   descripción comercial del producto, en vez de un modal aparte — más ligero y accesible. */
#conettam-asistente .conettam-tv-info {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--conettam-color-fondo-suave);
	color: var(--conettam-color-texto-secundario);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	cursor: help;
}
#conettam-asistente .conettam-tv-info-panel {
	display: none;
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	right: -10px;
	width: 260px;
	max-height: 280px;
	overflow-y: auto;
	padding: 10px 12px;
	background: #fff;
	color: var(--conettam-color-texto);
	border: 1px solid var(--conettam-color-borde);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	font-size: 0.78rem;
	font-weight: 400;
	text-align: left;
	line-height: 1.4;
}
#conettam-asistente .conettam-tv-info:hover .conettam-tv-info-panel,
#conettam-asistente .conettam-tv-info:focus .conettam-tv-info-panel { display: block; }
@media (max-width: 860px) {
	/* El icono ⓘ puede caer en cualquier punto de la fila; anclar el panel a su posición con un
	   ancho fijo de 260px es lo que provocaba el desbordamiento horizontal en móvil. Aquí se
	   fija en la parte baja de la pantalla en vez de junto al icono, así nunca puede sobresalir. */
	#conettam-asistente .conettam-tv-info-panel {
		position: fixed;
		top: auto;
		bottom: 16px;
		left: 16px;
		right: 16px;
		width: auto;
		max-width: none;
		max-height: 50vh;
	}
}
#conettam-asistente .conettam-tv-info-item { margin: 0 0 8px; }
#conettam-asistente .conettam-tv-info-item:last-child { margin-bottom: 0; }
#conettam-asistente .conettam-tv-info-item strong { display: block; color: var(--conettam-color-primario); margin-bottom: 2px; }

/* ---------------------------------------------------------------------------------------- */
/* Lista de espera de fibra («Avísame cuando haya fibra» / «No encuentro mi dirección»)       */
/* ---------------------------------------------------------------------------------------- */
#conettam-asistente .conettam-lista-espera { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--conettam-color-borde); }
#conettam-asistente .conettam-lista-espera h3 { margin: 0 0 6px; font-size: 1.05rem; }
#conettam-asistente .conettam-lista-espera-direccion { margin: 0 0 12px; font-size: 0.9rem; color: var(--conettam-color-texto-secundario); }
#conettam-asistente .conettam-lista-espera input[type="tel"],
#conettam-asistente .conettam-lista-espera input[type="email"],
#conettam-asistente .conettam-lista-espera input[type="text"]:not(.conettam-hp) {
	display: block;
	width: 100%;
	padding: 10px 12px;
	margin-top: 4px;
	box-sizing: border-box;
	border: 1px solid var(--conettam-color-borde);
	border-radius: 6px;
	font-size: 1rem;
	color: var(--conettam-color-texto);
}
#conettam-asistente .conettam-lista-espera input[type="tel"]:focus,
#conettam-asistente .conettam-lista-espera input[type="email"]:focus,
#conettam-asistente .conettam-lista-espera input[type="text"]:not(.conettam-hp):focus { outline: none; border-color: var(--conettam-color-primario); }
/* Aviso de error propio del formulario (clase propia a proposito: limpiarError/mostrarError del asistente solo tocan .conettam-aviso.conettam-error). */
#conettam-asistente .conettam-lista-espera-error { padding: 10px 14px; margin: 0 0 16px; border-radius: 6px; font-size: 0.9rem; background: #fbeaea; color: #a30000; }
/* Campo trampa contra bots: fuera de pantalla, no display:none (algunos bots lo ignoran si está oculto). */
#conettam-asistente .conettam-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#conettam-asistente .conettam-lista-espera-ok { background: var(--conettam-color-fondo-suave); border: 1px solid var(--conettam-color-borde); }
#conettam-asistente .conettam-lista-espera-movil { margin: 14px 0 0; font-size: 0.9rem; }
#conettam-asistente .conettam-no-encuentro { margin-top: 12px; }
/* Información básica de protección de datos bajo la casilla de consentimiento (primera capa, art. 11 LOPDGDD). */
#conettam-asistente .conettam-lista-espera-info { margin: 8px 0 16px; font-size: 0.8rem; line-height: 1.45; color: var(--conettam-color-texto-secundario); overflow-wrap: anywhere; }
#conettam-asistente .conettam-lista-espera-info a { color: inherit; text-decoration: underline; }