/*
 * El simulador «¿Qué plan me conviene?» y la ventana de las insignias de
 * calidad (06/10/2026). Ver tucine-simulador.js.
 *
 * Los diálogos cuelgan del <body>, fuera de .tcp, así que repiten aquí sus
 * colores (los de .tcp en tucine-planes.css). Igual que el resto del plugin,
 * se escribe todo lo que importa (color, tipografía, márgenes) porque el tema
 * y Elementor meten estilos por todas partes.
 */

/* ── La entrada, encima del paso 1 ───────────────────────────────────────── */
.tcp .tcp-sim-entrada { margin: 0 0 22px; }
.tcp .tcp-sim-abrir {
	display: flex; align-items: center; gap: 14px; width: 100%;
	padding: 14px 18px; margin: 0; cursor: pointer; text-align: left;
	border: 1px dashed rgba(255, 90, 25, .55); border-radius: var(--tcp-radio);
	background: rgba(255, 90, 25, .1);
	color: var(--tcp-texto); font: inherit; box-shadow: none; text-transform: none; letter-spacing: normal;
	white-space: normal; /* el tema pone nowrap a los botones y el texto se salía en el celular */
	transition: border-color .15s, background-color .15s, transform .15s;
}
.tcp .tcp-sim-abrir:hover, .tcp .tcp-sim-abrir:focus-visible { border-style: solid; border-color: var(--tcp-acento); transform: translateY(-1px); }
.tcp .tcp-sim-abrir-icono {
	flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%; background: var(--tcp-acento); color: #fff; font-size: 18px;
}
.tcp .tcp-sim-abrir-textos { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tcp .tcp-sim-abrir-textos strong { font-size: 16px; font-weight: 700; color: #fff; }
.tcp .tcp-sim-abrir-textos span { font-size: 13px; color: var(--tcp-texto-apagado); }
.tcp .tcp-sim-abrir-flecha { color: var(--tcp-acento); }

/* La tarjeta elegida por el simulador y el destello de «Ver planes con 4K». */
.tcp .tcp-tarjeta--ideal { border-color: var(--tcp-acento) !important; box-shadow: 0 0 0 2px var(--tcp-acento), 0 18px 40px rgba(255, 90, 25, .25) !important; }
.tcp .tcp-sim-sello {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px;
	padding: 5px 10px; border-radius: 999px; background: var(--tcp-acento); color: #fff; font-size: 12px; font-weight: 700;
}
.tcp .tcp-tarjeta--destello { animation: tcp-sim-destello 1.2s ease-in-out 2; }
@keyframes tcp-sim-destello {
	50% { box-shadow: 0 0 0 3px var(--tcp-acento), 0 18px 40px rgba(255, 90, 25, .35); }
}

/* ── Las insignias de calidad de la portada (Elementor) ──────────────────── */
.tucine-calidades .tcp-sim-insignia { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: border-color .15s, background-color .15s; }
.tucine-calidades .tcp-sim-insignia:hover,
.tucine-calidades .tcp-sim-insignia:focus-visible { border-color: #ff5a19 !important; background: rgba(255, 90, 25, .15) !important; outline: none; }
.tucine-calidades .tcp-sim-insignia-info { font-size: 11px; opacity: .7; }

/* ── Los diálogos ────────────────────────────────────────────────────────── */
.tcp-sim-dialogo {
	--tcp-tarjeta: #1d1d1d; --tcp-borde: #2c2c2c; --tcp-texto: #fff; --tcp-apagado: #b4b4b4; --tcp-acento: #ff5a19;
	position: fixed; inset: 0; margin: auto; box-sizing: border-box;
	width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
	/* El deslizamiento se queda dentro: al llegar al final no mueve la página
	   de atrás (ver fijarPagina en el JS para el iPhone). */
	overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	padding: 26px 24px 22px; border: 1px solid var(--tcp-borde); border-radius: 20px;
	background: var(--tcp-tarjeta); color: var(--tcp-texto);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.tcp-sim-dialogo::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(2px); }
.tcp-sim-dialogo *, .tcp-sim-dialogo *::before, .tcp-sim-dialogo *::after { box-sizing: border-box; }
.tcp-sim-dialogo--simulador { width: min(640px, calc(100vw - 24px)); }

.tcp-sim-dialogo button { font-family: inherit; text-transform: none; letter-spacing: normal; box-shadow: none; white-space: normal; }
.tcp-sim-dialogo .tcp-sim-cruz {
	position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0; margin: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; cursor: pointer;
}
.tcp-sim-dialogo .tcp-sim-cruz:hover { background: rgba(255, 255, 255, .16); }

.tcp-sim-dialogo .tcp-sim-titulo { margin: 0 40px 8px 0; color: #fff; font-size: 22px; font-weight: 700; line-height: 1.25; }
.tcp-sim-dialogo .tcp-sim-titulo--plan { font-size: 28px; color: var(--tcp-acento); margin-bottom: 14px; }
.tcp-sim-dialogo .tcp-sim-sobre { margin: 0 0 2px; color: var(--tcp-apagado); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.tcp-sim-dialogo .tcp-sim-lema { margin: 0; color: var(--tcp-apagado); font-size: 14px; }
.tcp-sim-dialogo .tcp-sim-texto { margin: 0 0 14px; color: rgba(255, 255, 255, .82); }
.tcp-sim-dialogo .tcp-sim-nota {
	display: flex; gap: 8px; align-items: baseline; margin: 0 0 10px; padding: 10px 12px;
	border-radius: 12px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .9); font-size: 14px;
}
.tcp-sim-dialogo .tcp-sim-nota i { color: var(--tcp-acento); }
.tcp-sim-dialogo .tcp-sim-nota--sutil { background: none; padding: 0 2px; color: var(--tcp-apagado); font-size: 13px; }
.tcp-sim-dialogo .tcp-sim-nota--aviso { background: rgba(255, 196, 0, .08); }
.tcp-sim-dialogo .tcp-sim-nota--aviso i { color: #ffc400; }

/* Ventana de una calidad */
.tcp-sim-dialogo .tcp-sim-calidad-cabeza { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.tcp-sim-dialogo .tcp-sim-calidad-icono {
	flex: 0 0 54px; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px;
	border-radius: 16px; background: rgba(255, 90, 25, .15); color: var(--tcp-acento); font-size: 24px;
}
.tcp-sim-dialogo .tcp-sim-calidad-cabeza .tcp-sim-titulo { margin-bottom: 2px; }

/* Progreso */
.tcp-sim-dialogo .tcp-sim-progreso { display: flex; gap: 6px; margin: 0 44px 8px 0; }
.tcp-sim-dialogo .tcp-sim-progreso span { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.tcp-sim-dialogo .tcp-sim-progreso span.is-hecho { background: var(--tcp-acento); }
.tcp-sim-dialogo .tcp-sim-contador { margin: 0 0 14px; color: var(--tcp-apagado); font-size: 12px; font-weight: 600; }

/* Opciones grandes */
.tcp-sim-dialogo .tcp-sim-opciones { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.tcp-sim-dialogo .tcp-sim-opcion {
	display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 14px 16px; cursor: pointer; text-align: left;
	border: 1px solid var(--tcp-borde); border-radius: 14px; background: rgba(255, 255, 255, .03); color: #fff; font-size: 15px;
	transition: border-color .15s, background-color .15s;
}
.tcp-sim-dialogo .tcp-sim-opcion:hover { border-color: rgba(255, 90, 25, .6); }
.tcp-sim-dialogo .tcp-sim-opcion.is-activa { border-color: var(--tcp-acento); background: rgba(255, 90, 25, .1); }
.tcp-sim-dialogo .tcp-sim-opcion-icono {
	flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
	border-radius: 12px; background: rgba(255, 90, 25, .15); color: var(--tcp-acento); font-size: 18px;
}
.tcp-sim-dialogo .tcp-sim-opcion-textos { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tcp-sim-dialogo .tcp-sim-opcion-textos strong { font-size: 16px; }
.tcp-sim-dialogo .tcp-sim-opcion-textos span { color: var(--tcp-apagado); font-size: 13px; line-height: 1.45; }
.tcp-sim-dialogo .tcp-sim-opcion-check { color: var(--tcp-acento); opacity: 0; }
.tcp-sim-dialogo .tcp-sim-opcion.is-activa .tcp-sim-opcion-check { opacity: 1; }

/* Pantallas */
.tcp-sim-dialogo .tcp-sim-contador-pantallas { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 18px 0 8px; }
.tcp-sim-dialogo .tcp-sim-mas-menos {
	display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0; padding: 0;
	border: 1px solid var(--tcp-borde); border-radius: 50%; background: rgba(255, 255, 255, .05); color: #fff; font-size: 18px; cursor: pointer;
}
.tcp-sim-dialogo .tcp-sim-mas-menos:hover { border-color: var(--tcp-acento); color: var(--tcp-acento); }
.tcp-sim-dialogo .tcp-sim-pantallas { min-width: 70px; text-align: center; color: #fff; font-size: 46px; font-weight: 800; line-height: 1; }

/* Equipos */
.tcp-sim-dialogo .tcp-sim-grupo { margin: 14px 0 8px; color: var(--tcp-apagado); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.tcp-sim-dialogo .tcp-sim-equipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
.tcp-sim-dialogo .tcp-sim-equipo {
	display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px; cursor: pointer; text-align: left;
	border: 1px solid var(--tcp-borde); border-radius: 12px; background: rgba(255, 255, 255, .03); color: #fff;
	transition: border-color .15s, background-color .15s;
}
.tcp-sim-dialogo .tcp-sim-equipo:hover { border-color: rgba(255, 90, 25, .6); }
.tcp-sim-dialogo .tcp-sim-equipo.is-activa { border-color: var(--tcp-acento); background: rgba(255, 90, 25, .12); }
.tcp-sim-dialogo .tcp-sim-equipo img { flex: 0 0 34px; width: 34px; height: 34px; object-fit: contain; }
.tcp-sim-dialogo .tcp-sim-equipo-textos { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.3; }
.tcp-sim-dialogo .tcp-sim-equipo-textos strong { font-size: 14px; }
.tcp-sim-dialogo .tcp-sim-equipo-textos span { color: var(--tcp-apagado); font-size: 12px; }
.tcp-sim-dialogo .tcp-sim-equipo-textos em { color: #ffc400; font-size: 11px; font-style: normal; }
.tcp-sim-dialogo .tcp-sim-equipo--otro { margin-top: 12px; }
.tcp-sim-dialogo .tcp-sim-equipo--otro i { flex: 0 0 34px; text-align: center; font-size: 22px; color: var(--tcp-apagado); }

/* Resultado */
.tcp-sim-dialogo .tcp-sim-resumen { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.tcp-sim-dialogo .tcp-sim-resumen li { display: flex; gap: 10px; align-items: baseline; margin: 0; color: #fff; font-size: 15px; }
.tcp-sim-dialogo .tcp-sim-resumen li i { width: 18px; color: var(--tcp-acento); text-align: center; }
.tcp-sim-dialogo .tcp-sim-precio { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 16px 0 4px; color: var(--tcp-apagado); }
.tcp-sim-dialogo .tcp-sim-precio strong { color: #fff; font-size: 34px; font-weight: 800; }
/* «≈ US$14», solo en inglés: referencia, el cobro es en pesos. */
.tcp-sim-dialogo .tcp-sim-precio .tcp-sim-usd { font-size: 13px; }

/* Botones */
.tcp-sim-dialogo .tcp-sim-botones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.tcp-sim-dialogo .tcp-sim-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin: 0; padding: 0 20px; cursor: pointer;
	border: 1px solid var(--tcp-acento); border-radius: 12px; background: var(--tcp-acento); color: #fff; font-size: 15px; font-weight: 700;
}
.tcp-sim-dialogo .tcp-sim-btn:hover { filter: brightness(1.08); }
.tcp-sim-dialogo .tcp-sim-btn--sec { background: transparent; border-color: var(--tcp-borde); color: #fff; }
.tcp-sim-dialogo .tcp-sim-btn--sec:hover { border-color: rgba(255, 255, 255, .4); filter: none; }
.tcp-sim-dialogo .tcp-sim-pista { color: var(--tcp-apagado); font-size: 13px; }

@media (max-width: 560px) {
	.tcp-sim-dialogo { padding: 22px 16px 18px; border-radius: 16px; }
	.tcp-sim-dialogo .tcp-sim-titulo { font-size: 19px; }
	.tcp-sim-dialogo .tcp-sim-titulo--plan { font-size: 24px; }
	.tcp-sim-dialogo .tcp-sim-equipos { grid-template-columns: 1fr 1fr; }
	.tcp-sim-dialogo .tcp-sim-botones .tcp-sim-btn { flex: 1 1 auto; }
	.tcp .tcp-sim-abrir { padding: 12px 14px; }
	.tcp .tcp-sim-abrir-textos strong { font-size: 15px; }
}

/*
 * El kit de Elementor pinta TODOS los botones (también :hover y :focus) con su
 * propio fondo, y con más prioridad que estas reglas cuando el botón tiene el
 * foco: la cruz salía naranja con degradado al abrir el diálogo. Se fija aquí
 * con la misma o más prioridad. Sin degradados en ninguna parte (JC, 06/10/2026).
 */
.tcp-sim-dialogo button, .tcp-sim-dialogo button:hover, .tcp-sim-dialogo button:focus,
.tcp button.tcp-sim-abrir, .tcp button.tcp-sim-abrir:hover, .tcp button.tcp-sim-abrir:focus { background-image: none !important; }
.tcp-sim-dialogo button.tcp-sim-cruz, .tcp-sim-dialogo button.tcp-sim-cruz:focus { background-color: rgba(255, 255, 255, .08) !important; color: #fff !important; }
.tcp-sim-dialogo button.tcp-sim-cruz:hover { background-color: rgba(255, 255, 255, .16) !important; }
.tcp-sim-dialogo button.tcp-sim-opcion, .tcp-sim-dialogo button.tcp-sim-equipo, .tcp-sim-dialogo button.tcp-sim-mas-menos,
.tcp-sim-dialogo button.tcp-sim-opcion:focus, .tcp-sim-dialogo button.tcp-sim-equipo:focus, .tcp-sim-dialogo button.tcp-sim-mas-menos:focus { background-color: rgba(255, 255, 255, .03) !important; color: #fff !important; }
.tcp-sim-dialogo button.tcp-sim-opcion.is-activa, .tcp-sim-dialogo button.tcp-sim-equipo.is-activa { background-color: rgba(255, 90, 25, .12) !important; }
.tcp-sim-dialogo button.tcp-sim-btn, .tcp-sim-dialogo button.tcp-sim-btn:focus { background-color: var(--tcp-acento) !important; color: #fff !important; }
.tcp-sim-dialogo button.tcp-sim-btn:hover { background-color: #e64a0d !important; }
.tcp-sim-dialogo button.tcp-sim-btn--sec, .tcp-sim-dialogo button.tcp-sim-btn--sec:focus, .tcp-sim-dialogo button.tcp-sim-btn--sec:hover { background-color: transparent !important; }
.tcp button.tcp-sim-abrir, .tcp button.tcp-sim-abrir:focus, .tcp button.tcp-sim-abrir:hover { background-color: rgba(255, 90, 25, .1) !important; color: #fff !important; }


/*
 * QUE NADA SE MUEVA AL TOCAR (06/10/2026, JC: «en el iPhone se mueve el botón
 * de Películas, TV en vivo, Las dos cosas cuando le doy»). El kit de Elementor
 * pone `border-width: 0` a todos los botones en :hover y :focus; en el iPhone
 * esos estados se quedan pegados tras tocar, el borde de 1 px desaparecía y el
 * contenido saltaba. Se fija el borde en todos los estados, y se quita el
 * recuadro gris que iOS pinta al tocar.
 */
.tcp-sim-dialogo button,
.tcp button.tcp-sim-abrir { -webkit-tap-highlight-color: transparent; transform: none !important; }
.tcp-sim-dialogo button.tcp-sim-opcion,
.tcp-sim-dialogo button.tcp-sim-opcion:hover,
.tcp-sim-dialogo button.tcp-sim-opcion:focus,
.tcp-sim-dialogo button.tcp-sim-opcion:active,
.tcp-sim-dialogo button.tcp-sim-equipo,
.tcp-sim-dialogo button.tcp-sim-equipo:hover,
.tcp-sim-dialogo button.tcp-sim-equipo:focus,
.tcp-sim-dialogo button.tcp-sim-equipo:active,
.tcp-sim-dialogo button.tcp-sim-mas-menos,
.tcp-sim-dialogo button.tcp-sim-mas-menos:hover,
.tcp-sim-dialogo button.tcp-sim-mas-menos:focus,
.tcp-sim-dialogo button.tcp-sim-mas-menos:active,
.tcp-sim-dialogo button.tcp-sim-btn,
.tcp-sim-dialogo button.tcp-sim-btn:hover,
.tcp-sim-dialogo button.tcp-sim-btn:focus,
.tcp-sim-dialogo button.tcp-sim-btn:active { border-style: solid !important; border-width: 1px !important; }
.tcp-sim-dialogo button.tcp-sim-opcion, .tcp-sim-dialogo button.tcp-sim-opcion:hover, .tcp-sim-dialogo button.tcp-sim-opcion:focus, .tcp-sim-dialogo button.tcp-sim-opcion:active { border-radius: 14px !important; }
.tcp-sim-dialogo button.tcp-sim-equipo, .tcp-sim-dialogo button.tcp-sim-equipo:hover, .tcp-sim-dialogo button.tcp-sim-equipo:focus, .tcp-sim-dialogo button.tcp-sim-equipo:active { border-radius: 12px !important; }
.tcp-sim-dialogo button.tcp-sim-btn, .tcp-sim-dialogo button.tcp-sim-btn:hover, .tcp-sim-dialogo button.tcp-sim-btn:focus, .tcp-sim-dialogo button.tcp-sim-btn:active { border-radius: 12px !important; }
.tcp-sim-dialogo button.tcp-sim-mas-menos, .tcp-sim-dialogo button.tcp-sim-mas-menos:hover, .tcp-sim-dialogo button.tcp-sim-mas-menos:focus, .tcp-sim-dialogo button.tcp-sim-mas-menos:active { border-radius: 50% !important; }
/* Los colores del borde por estado, con la misma prioridad que lo de arriba. */
.tcp-sim-dialogo button.tcp-sim-opcion, .tcp-sim-dialogo button.tcp-sim-equipo, .tcp-sim-dialogo button.tcp-sim-mas-menos, .tcp-sim-dialogo button.tcp-sim-btn--sec { border-color: var(--tcp-borde) !important; }
.tcp-sim-dialogo button.tcp-sim-opcion.is-activa, .tcp-sim-dialogo button.tcp-sim-equipo.is-activa, .tcp-sim-dialogo button.tcp-sim-btn:not(.tcp-sim-btn--sec) { border-color: var(--tcp-acento) !important; }
@media (hover: hover) {
	.tcp-sim-dialogo button.tcp-sim-opcion:hover, .tcp-sim-dialogo button.tcp-sim-equipo:hover { border-color: rgba(255, 90, 25, .6) !important; }
	.tcp-sim-dialogo button.tcp-sim-mas-menos:hover { border-color: var(--tcp-acento) !important; color: var(--tcp-acento) !important; }
	.tcp-sim-dialogo button.tcp-sim-btn--sec:hover { border-color: rgba(255, 255, 255, .4) !important; }
}
.tcp-sim-dialogo button.tcp-sim-cruz, .tcp-sim-dialogo button.tcp-sim-cruz:hover, .tcp-sim-dialogo button.tcp-sim-cruz:focus, .tcp-sim-dialogo button.tcp-sim-cruz:active { border: 0 !important; border-radius: 50% !important; }
.tcp button.tcp-sim-abrir, .tcp button.tcp-sim-abrir:hover, .tcp button.tcp-sim-abrir:focus, .tcp button.tcp-sim-abrir:active { border-width: 1px !important; border-radius: var(--tcp-radio) !important; }
.tcp button.tcp-sim-abrir { border-style: dashed !important; border-color: rgba(255, 90, 25, .55) !important; }
@media (hover: hover) {
	.tcp button.tcp-sim-abrir:hover { border-style: solid !important; border-color: var(--tcp-acento) !important; }
}

/* El «hover» que se note (06/10/2026, JC): fondo un poco más claro y borde de
   acento. Solo donde hay ratón: en el celular el estado se quedaría pegado. */
@media (hover: hover) {
	.tcp-sim-dialogo button.tcp-sim-opcion:hover,
	.tcp-sim-dialogo button.tcp-sim-equipo:hover { background-color: rgba(255, 90, 25, .08) !important; border-color: var(--tcp-acento) !important; }
	.tcp-sim-dialogo button.tcp-sim-btn--sec:hover { background-color: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .5) !important; }
	.tcp-sim-dialogo button.tcp-sim-mas-menos:hover { background-color: rgba(255, 90, 25, .1) !important; }
	.tcp-sim-dialogo button.tcp-sim-cruz:hover { background-color: rgba(255, 255, 255, .18) !important; }
}

/* Pantallas por servicio (10/10/2026): con películas y TV, un contador para
   cada uno, con su rótulo encima y una línea entre los dos. */
.tcp-sim-dialogo .tcp-sim-pantallas-grupo + .tcp-sim-pantallas-grupo { margin-top: 10px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .08); }
.tcp-sim-dialogo .tcp-sim-pantallas-grupo .tcp-sim-grupo { text-align: center; }
.tcp-sim-dialogo .tcp-sim-pantallas-grupo .tcp-sim-contador-pantallas { margin: 8px 0 6px; }