/*
 * Portal de clientes de tucine.club (plugin tucine-clientes). Misma paleta que
 * los planes, el catálogo y la página de pago. !important en borde, radio,
 * fondo y color de botones y campos: el tema los reescribe todos.
 */
.tcl {
	--tcl-fondo: #141414;
	--tcl-tarjeta: #1d1d1d;
	--tcl-borde: #2c2c2c;
	--tcl-texto: #ffffff;
	--tcl-apagado: #b4b4b4;
	--tcl-acento: #ff5a19;
	--tcl-ok: #3ecf8e;
	--tcl-error: #ff5a5a;
	--tcl-aviso: #ffb020;

	max-width: 1080px;
	margin: 0 auto;
	/* 150 y no 110 (sept. 2026): con 110 la caja de «Entra a tu cuenta»
	   quedaba pegada a la cabecera fija (116 px), y con la barra de
	   administración de WordPress, debajo de ella. */
	padding: 150px 20px 60px;
	color: var(--tcl-texto);
	box-sizing: border-box;
}

.tcl *, .tcl *::before, .tcl *::after { box-sizing: border-box; }
/* El tema (Hello Elementor) encoge la columna de la página a 500, 600 y 800
   px entre 576 y 1199 de ancho. Con el celular acostado (844) el portal se
   quedaba en 600, y en Dispositivos las dos tarjetas lado a lado partían el
   texto en columnas de tres palabras (JC, 10/10/2026). Donde está el portal,
   la columna toma todo el ancho: .tcl ya trae su propio tope de 1080. */
body:not([class*=elementor-page-]) .site-main:has(.tcl) { max-width: none; }
/* `hidden` tiene que ganar a los display: flex de los campos. */
.tcl [hidden] { display: none !important; }

body:has(.tcl) .page-header { display: none; }

.tcl .tcl-titulo { margin: 0 0 6px; color: var(--tcl-texto); font-size: 26px !important; font-weight: 800; line-height: 1.15 !important; letter-spacing: normal !important; }
.tcl .tcl-sub { margin: 0 0 20px; color: var(--tcl-apagado); font-size: 14.5px; line-height: 1.45; }

/* ── Acceso ───────────────────────────────────────────────────────────── */

.tcl-acceso { max-width: 420px; margin: 0 auto; }

.tcl-caja {
	padding: 28px 26px;
	border: 1px solid var(--tcl-borde);
	border-radius: 20px;
	background: var(--tcl-tarjeta);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

/* Con JavaScript se ve solo el formulario de la vista actual (entrar con
   contraseña, entrar con código por SMS en sus dos pasos, o recordar). */
.tcl-acceso.is-con-js [data-tcl-form] { display: none; }
.tcl-acceso.is-con-js[data-tcl-vista="entrar"] [data-tcl-form="entrar"],
.tcl-acceso.is-con-js[data-tcl-vista="sms"] [data-tcl-form="sms"],
.tcl-acceso.is-con-js[data-tcl-vista="codigo"] [data-tcl-form="codigo"],
.tcl-acceso.is-con-js[data-tcl-vista="recordar"] [data-tcl-form="recordar"] { display: flex; }

.tcl-acceso:not(.is-con-js) [data-tcl-form="recordar"],
.tcl-acceso:not(.is-con-js) [data-tcl-form="sms"] { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--tcl-borde); }
/* Sin JavaScript, el paso del código solo cuando toca. */
.tcl-acceso:not(.is-con-js):not([data-tcl-vista="codigo"]) [data-tcl-form="codigo"] { display: none; }
.tcl-acceso:not(.is-con-js) .tcl-metodo { display: none; }

/* «Contraseña · Código por SMS» (12/10/2026). */
.tcl .tcl-metodo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 4px; border: 1px solid var(--tcl-borde); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.tcl .tcl-metodo-opcion {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; margin: 0; padding: 8px 10px !important;
	border: 0 !important; border-radius: 10px !important; background: transparent !important;
	color: var(--tcl-apagado) !important; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap;
}
.tcl .tcl-metodo-opcion:hover { color: var(--tcl-texto) !important; }
.tcl .tcl-metodo-opcion[aria-pressed="true"] { background: var(--tcl-acento) !important; color: #fff !important; }
.tcl .tcl-metodo-opcion:focus-visible { outline: 2px solid var(--tcl-acento); outline-offset: 2px; }

/* El paso del código: el campo grande, centrado y espaciado. */
.tcl-codigo-pasos { flex-direction: column; gap: 10px; }
.tcl .tcl-campo input.tcl-codigo-sms { height: 60px; font-size: 26px; font-weight: 700; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; padding-left: calc(14px + .45em) !important; }
.tcl-codigo-otras { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; margin: 0; color: var(--tcl-apagado); }
.tcl .tcl-codigo-otras .tcl-enlace { align-self: auto; }
.tcl-nowrap { white-space: nowrap; }
.tcl-acceso:not(.is-con-js) [data-tcl-ir] { display: none; }

.tcl-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.tcl-form .tcl-sub { margin-bottom: 4px; }

.tcl-campo { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.tcl-campo > span:first-child,
.tcl-campo > label:first-child { color: var(--tcl-texto); font-size: 14px; font-weight: 600; }

.tcl .tcl-campo input {
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 14px !important;
	border: 1px solid var(--tcl-borde) !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, .04) !important;
	color: var(--tcl-texto) !important;
	font-size: 16px;
	box-shadow: none !important;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tcl .tcl-campo input:focus { border-color: var(--tcl-acento) !important; box-shadow: 0 0 0 3px rgba(255, 90, 25, .18) !important; }
.tcl .tcl-campo input::placeholder { color: #7c7c7c; }

.tcl-clave { position: relative; display: block; }
.tcl .tcl-clave input { padding-right: 48px !important; }

.tcl .tcl-ojo {
	position: absolute; top: 50%; right: 6px;
	width: 38px; height: 38px; margin-top: -19px;
	padding: 0 !important; border: 0 !important; border-radius: 10px !important;
	background: transparent !important; color: var(--tcl-apagado) !important; cursor: pointer;
}

.tcl .tcl-boton {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; min-height: 50px; margin: 4px 0 0; padding: 0 20px !important;
	border: 1.5px solid var(--tcl-acento) !important; border-radius: 14px !important;
	background: var(--tcl-acento) !important; color: #fff !important;
	font-size: 16px; font-weight: 800; text-decoration: none !important; cursor: pointer;
	transition: filter .15s ease;
}
.tcl .tcl-boton:hover { filter: brightness(1.08); }
.tcl .tcl-boton:disabled { opacity: .6; cursor: wait; }

.tcl .tcl-boton--sec {
	width: auto; min-height: 42px; font-size: 14px; font-weight: 700;
	border-color: var(--tcl-borde) !important; background: transparent !important;
}
.tcl .tcl-boton--sec:hover { border-color: var(--tcl-acento) !important; filter: none; }

.tcl .tcl-enlace {
	align-self: center; margin: 0; padding: 4px !important;
	border: 0 !important; background: transparent !important;
	color: var(--tcl-apagado) !important; font-size: 14px; cursor: pointer;
}
.tcl .tcl-enlace:hover { color: var(--tcl-texto) !important; }

.tcl-pie { margin: 18px 0 0; color: var(--tcl-apagado); font-size: 14px; text-align: center; }
.tcl-pie a { color: var(--tcl-acento) !important; font-weight: 700; }

.tcl-aviso { margin: 0 0 18px; padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.tcl-aviso--error { border: 1px solid rgba(255, 90, 90, .45); background: rgba(255, 90, 90, .1); color: #ffb3b3; }
.tcl-aviso--ok { border: 1px solid rgba(62, 207, 142, .45); background: rgba(62, 207, 142, .1); color: #a8f0cf; }

/* ── Cuenta ───────────────────────────────────────────────────────────── */

.tcl-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 22px; flex-wrap: wrap; }
.tcl-cabeza-textos { display: flex; align-items: center; gap: 14px; }
.tcl-cabeza .tcl-sub { margin: 0; }

.tcl-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.tcl-tarjeta--suscripcion { grid-row: auto; } /* Va en su propia columna con «Recomienda y gana» debajo (06/10/2026); a la derecha, los datos de acceso. */
/* A todo el ancho de la rejilla (estado del servidor, sept. 2026). */
.tcl-tarjeta--ancha { grid-column: 1 / -1; }

.tcl-tarjeta { padding: 22px 22px 24px; border: 1px solid var(--tcl-borde); border-radius: 18px; background: var(--tcl-tarjeta); }
/* Algo que el cliente tiene que hacer (p. ej. activar su cobro automático). */
.tcl-tarjeta--acento { margin-bottom: 16px; border-color: var(--tcl-acento); background: rgba(255, 90, 25, .07); }
.tcl .tcl-tarjeta-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--tcl-texto); font-size: 17px !important; font-weight: 700; line-height: 1.2 !important; }
.tcl-tarjeta-titulo i { color: var(--tcl-acento); }
.tcl .tcl-subtitulo--primero { margin-top: 0 !important; }
.tcl .tcl-subtitulo { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 15px !important; color: var(--tcl-texto); }

.tcl-plan { margin: 0 0 18px; padding: 16px; border: 1px solid rgba(255, 90, 25, .3); border-radius: 14px; background: rgba(255, 90, 25, .06); }
.tcl-plan-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.tcl-plan-nombre { font-size: 19px; font-weight: 800; }
.tcl-plan-dias { margin: 0; color: var(--tcl-apagado); font-size: 15px; }
.tcl-plan-dias strong { color: var(--tcl-texto); font-size: 34px; font-weight: 800; line-height: 1; margin-right: 4px; }
.tcl-plan-fecha { margin: 4px 0 12px; color: var(--tcl-apagado); font-size: 13.5px; }
.tcl-plan-datos { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tcl-plan-datos li { display: flex; align-items: center; gap: 9px; color: var(--tcl-apagado); font-size: 14px; }
.tcl-plan-datos i { width: 16px; color: var(--tcl-acento); text-align: center; }

.tcl-estado { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.tcl-estado.is-activa { background: rgba(62, 207, 142, .14); color: var(--tcl-ok); }
.tcl-estado.is-pronto { background: rgba(255, 176, 32, .14); color: var(--tcl-aviso); }
.tcl-estado.is-vencida { background: rgba(255, 90, 90, .14); color: var(--tcl-error); }

.tcl-dato { margin: 0 0 12px; }
.tcl-dato-etiqueta { display: block; margin: 0 0 5px; color: var(--tcl-apagado); font-size: 13px; }
.tcl-dato-fila { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border: 1px solid var(--tcl-borde); border-radius: 12px; background: rgba(255, 255, 255, .03); }
.tcl-dato-valor { flex: 1; min-width: 0; overflow-wrap: anywhere; background: none !important; color: var(--tcl-texto) !important; font-family: Menlo, Consolas, monospace; font-size: 14.5px; padding: 0 !important; }

.tcl .tcl-icono {
	flex-shrink: 0; width: 36px; height: 36px; padding: 0 !important;
	border: 0 !important; border-radius: 10px !important;
	background: rgba(255, 255, 255, .07) !important; color: var(--tcl-texto) !important; cursor: pointer;
	transition: background-color .15s ease;
}
.tcl .tcl-icono:hover { background: var(--tcl-acento) !important; }
.tcl .tcl-icono.is-copiado { background: var(--tcl-ok) !important; }

.tcl-nota, .tcl-vacio { margin: 6px 0 0; color: var(--tcl-apagado); font-size: 13.5px; line-height: 1.45; }

.tcl-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tcl-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--tcl-borde); border-radius: 12px; }
.tcl-lista small { display: block; color: var(--tcl-apagado); font-size: 12.5px; }

/* ── Cargando otra pestaña o cuenta (navegación por AJAX) ─────────────── */

.tcl { position: relative; transition: opacity .15s ease; }
.tcl.is-cargando { opacity: .55; pointer-events: none; }
/* Dentro de la misma sección (10/10/2026): sin apagar el portal, solo la
   barrita; y el contenido nuevo entra con un fundido corto. */
.tcl.is-cargando-suave::before,
.tcl.is-cargando::before {
	content: ""; position: fixed; top: 0; left: 0; z-index: 99999;
	width: 100%; height: 3px;
	/* Barra sólida que se desliza (06/10/2026: sin degradados en el sitio). */
	background: var(--tcl-acento);
	background-size: 40% 100%; background-repeat: no-repeat;
	animation: tcl-barra 1s linear infinite;
}
@keyframes tcl-barra { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .tcl.is-cargando::before, .tcl.is-cargando-suave::before { animation: none; background: var(--tcl-acento); } }
.tcl-vista.is-entrando { animation: tcl-entrar .22s ease-out; }
@keyframes tcl-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

.tcl-saludo { margin: 0 0 16px; color: var(--tcl-texto); font-size: 20px; font-weight: 700; line-height: 1.3; }
.tcl-saludo a { margin-left: 6px; color: var(--tcl-acento) !important; font-size: 14px; font-weight: 600; }
/* «¿Cómo te llamas?» abre una hoja para escribir el nombre ahí mismo (12/10/2026, JC). */
.tcl-saludo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tcl button.tcl-saludo-enlace { display: inline; width: auto; height: auto; min-height: 0; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; background-image: none !important; box-shadow: none !important; color: var(--tcl-acento) !important; font-family: inherit; font-size: 14px !important; font-weight: 600; line-height: inherit; letter-spacing: normal; text-transform: none; text-decoration: none !important; cursor: pointer; }
.tcl button.tcl-saludo-enlace:hover, .tcl button.tcl-saludo-enlace:focus-visible { color: #fff !important; }
.tcl-hoja--nombre .tcl-hoja-icono { align-self: center; }
/* Con poca altura (celular acostado) sin ícono y los botones lado a lado,
   para que todo quepa sin desplazarse con el teclado cerca. */
@media (max-height: 500px) {
	.tcl-hoja--nombre .tcl-hoja-icono { display: none; }
	.tcl-hoja--nombre .tcl-hoja-texto { margin-bottom: 12px; }
	.tcl .tcl-hoja--nombre .tcl-dialogo-campo { margin-bottom: 12px; }
	.tcl-hoja--nombre .tcl-hoja-botones { flex-direction: row-reverse; }
	.tcl .tcl-hoja--nombre .tcl-hoja-botones .tcl-boton { flex: 1 1 0; }
}
.tcl-hoja-icono--saludo { background: rgba(255, 90, 25, .14); color: var(--tcl-acento); }
.tcl-hoja--nombre .tcl-form { gap: 0; }
.tcl .tcl-hoja--nombre .tcl-dialogo-campo { height: 50px; margin: 0 0 16px; border-radius: 12px !important; text-align: center; font-size: 16px; }
.tcl .tcl-hoja--nombre .tcl-dialogo-campo:focus { border-color: var(--tcl-acento) !important; box-shadow: 0 0 0 3px rgba(255, 90, 25, .18) !important; outline: none; }
.tcl-ayuda { color: var(--tcl-apagado); font-size: 12.5px; }

/* ── Pestañas ─────────────────────────────────────────────────────────── */

/* También en computadora van en DOS filas (JC, 05/10/2026): en una sola no
   cabían y había que deslizar. Columnas = la mitad de las pestañas
   (--tcl-columnas, lo calcula cuenta.php). En el celular, ver más abajo. */
.tcl-pestanas { display: grid; grid-template-columns: repeat(var(--tcl-columnas, 4), minmax(0, 1fr)); gap: 6px; margin: 0 0 22px; padding: 5px; border: 1px solid var(--tcl-borde); border-radius: 16px; background: var(--tcl-tarjeta); }
.tcl .tcl-pestana {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0;
	min-height: 44px; padding: 0 12px; border-radius: 12px;
	color: var(--tcl-apagado) !important; font-size: 15px; font-weight: 700; text-decoration: none !important; white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.tcl .tcl-pestana:hover { color: var(--tcl-texto) !important; background: rgba(255, 255, 255, .05); }
.tcl .tcl-pestana.is-activa { background: var(--tcl-acento); color: #fff !important; }

/* ── Piezas comunes ───────────────────────────────────────────────────── */

.tcl-aviso--info { border: 1px solid rgba(255, 176, 32, .4); background: rgba(255, 176, 32, .08); color: #ffd99a; }
.tcl-tarjeta .tcl-aviso { margin: 0; }

.tcl .tcl-boton--auto { width: auto; }
.tcl .tcl-boton--peligro:hover { border-color: var(--tcl-error) !important; color: #ffb3b3 !important; }

.tcl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--tcl-borde); border-radius: 999px; color: var(--tcl-apagado); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.tcl .tcl-chip--enlace { text-decoration: none !important; color: var(--tcl-apagado) !important; padding: 7px 14px; font-size: 13.5px; transition: border-color .15s ease, color .15s ease; }
.tcl .tcl-chip--enlace:hover { border-color: var(--tcl-acento); color: var(--tcl-texto) !important; }
.tcl .tcl-chip--enlace.is-activo { border-color: var(--tcl-acento); background: rgba(255, 90, 25, .14); color: #fff !important; }
.tcl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.tcl-chips-etiqueta { color: var(--tcl-apagado); font-size: 13.5px; margin-right: 2px; }

.tcl-contador { margin-left: auto; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--tcl-apagado); font-size: 13px; font-weight: 700; }

.tcl-estado-vacio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 20px; text-align: center; }
.tcl-estado-vacio > i { font-size: 34px; color: var(--tcl-acento); opacity: .85; }
.tcl-estado-vacio p { margin: 0; max-width: 420px; color: var(--tcl-apagado); font-size: 14.5px; line-height: 1.5; }
.tcl-estado-vacio--chico { padding: 22px 10px; }
.tcl-estado-vacio--chico > i { font-size: 26px; }

.tcl-nota--centro { margin-top: 18px; text-align: center; }
.tcl-nota--arriba { margin: -8px 0 14px; }
.tcl-nota a, .tcl-volver { color: var(--tcl-acento) !important; font-weight: 700; }
.tcl .tcl-volver { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14.5px; text-decoration: none !important; }


/* ── Dispositivos ─────────────────────────────────────────────────────── */

.tcl-rejilla--dispositivos { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin: 0 0 18px; }

.tcl-etiqueta-plan { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; font-weight: 700; }
/* «Por correo · Sin límite de dispositivos» no cabe en un celular angosto, y
   con el nowrap general de .tcl-chip se salía de la tarjeta (JC, 10/10/2026):
   aquí la pastilla puede partirse en dos líneas sin pasar del ancho, y con
   menos redondeo, que en dos líneas una cápsula se ve deforme. */
.tcl-etiqueta-plan .tcl-chip { max-width: 100%; border-radius: 14px; white-space: normal; line-height: 1.35; }

.tcl-pasos { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 10px; }
.tcl-pasos li { position: relative; padding-left: 36px; color: var(--tcl-apagado); font-size: 14.5px; line-height: 1.45; counter-increment: paso; }
.tcl-pasos li::before {
	content: counter(paso); position: absolute; left: 0; top: -2px;
	width: 25px; height: 25px; border-radius: 50%;
	background: rgba(255, 90, 25, .16); color: var(--tcl-acento);
	font-size: 13px; font-weight: 800; line-height: 25px; text-align: center;
}
.tcl-pasos strong { color: var(--tcl-texto); }

.tcl-enlace { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.tcl .tcl-campo input.tcl-codigo {
	height: 64px; text-align: center; text-transform: uppercase;
	font-family: Menlo, Consolas, monospace; font-size: 30px; font-weight: 800; letter-spacing: .45em;
	padding-left: calc(14px + .45em) !important;
}
.tcl .tcl-campo input.tcl-codigo::placeholder { color: #4a4a4a; }

.tcl-aparatos { margin: 0; padding: 0; list-style: none; }
.tcl-aparato-fila { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--tcl-borde); }
.tcl-aparato-fila:first-child { padding-top: 0; }
.tcl-aparato-fila:last-child { border-bottom: 0; }
.tcl-aparato-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tcl-aparato-textos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.tcl-aparato-textos small { color: var(--tcl-apagado); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.tcl-aparato-fila form { flex-shrink: 0; margin: 0; }
.tcl .tcl-desenlazar { width: auto; min-height: 38px; margin: 0; padding: 0 14px !important; font-size: 13.5px; }
.tcl-aparato-icono { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 90, 25, .12); color: var(--tcl-acento); }

/* ── Selector de cuentas (titular y adicionales) ──────────────────────── */

.tcl-cuentas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 0 0 16px; }
.tcl .tcl-cuenta-opcion {
	display: flex; align-items: center; gap: 12px; padding: 12px 14px;
	border: 1px solid var(--tcl-borde); border-radius: 14px; background: var(--tcl-tarjeta);
	color: var(--tcl-texto) !important; text-decoration: none !important;
	transition: border-color .15s ease, background-color .15s ease;
}
.tcl .tcl-cuenta-opcion:hover { border-color: rgba(255, 90, 25, .6); }
.tcl .tcl-cuenta-opcion.is-activa { border-color: var(--tcl-acento); background: rgba(255, 90, 25, .08); box-shadow: inset 0 0 0 1px var(--tcl-acento); }
.tcl-cuenta-opcion-icono { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--tcl-acento); }
.tcl-cuenta-opcion.is-activa .tcl-cuenta-opcion-icono { background: var(--tcl-acento); color: #fff; }
.tcl .tcl-cuenta-opcion--nueva { border-style: dashed; background: transparent; }
.tcl .tcl-cuenta-opcion--nueva .tcl-cuenta-opcion-icono { background: rgba(255, 90, 25, .12); }
.tcl .tcl-cuenta-opcion--nueva:hover { border-color: var(--tcl-acento); background: rgba(255, 90, 25, .05); }
.tcl-cuenta-opcion-textos { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tcl-cuenta-opcion-textos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.tcl-cuenta-opcion-textos small { color: var(--tcl-apagado); font-size: 12.5px; }

.tcl-chip--adicional { margin: 0 0 8px; border-color: rgba(255, 90, 25, .45); color: #ffb08f; }

/* ── Ajustes · cambiar contraseña ─────────────────────────────────────── */

.tcl-columna { display: grid; gap: 18px; align-content: start; min-width: 0; }


.tcl-requisitos { margin: -4px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.tcl-requisitos li { position: relative; padding-left: 20px; color: var(--tcl-apagado); font-size: 12.5px; }
.tcl-requisitos li::before { content: "○"; position: absolute; left: 2px; top: 0; }
.tcl-requisitos li.is-cumple { color: var(--tcl-ok); }
.tcl-requisitos li.is-cumple::before { content: "✓"; font-weight: 800; }

.tcl-grupo { margin: 0; padding: 0; border: 0; }
.tcl-grupo legend { margin: 0 0 8px; padding: 0; color: var(--tcl-texto); font-size: 14px; font-weight: 600; }
.tcl-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.tcl-opcion { position: relative; margin: 0; cursor: pointer; }
.tcl-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.tcl-opcion span {
	display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px;
	border: 1px solid var(--tcl-borde); border-radius: 999px;
	color: var(--tcl-apagado); font-size: 14px; font-weight: 600;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.tcl-opcion:hover span { border-color: rgba(255, 90, 25, .6); }
.tcl-opcion input:checked + span { border-color: var(--tcl-acento); background: rgba(255, 90, 25, .14); color: #fff; }
.tcl-opcion input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255, 90, 25, .3); }

.tcl-propio { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--tcl-apagado); font-size: 14px; }
.tcl .tcl-propio input, .tcl .tcl-propio select {
	height: 40px; margin: 0; padding: 0 10px !important;
	border: 1px solid var(--tcl-borde) !important; border-radius: 10px !important;
	background: rgba(255, 255, 255, .04) !important; color: var(--tcl-texto) !important; font-size: 14px;
}
.tcl .tcl-propio input { width: 80px; }
.tcl .tcl-propio select option { background: #1d1d1d; }

.tcl-tarjeta--peligro { border-color: rgba(255, 90, 90, .35); }
.tcl-tarjeta--peligro .tcl-tarjeta-titulo i { color: var(--tcl-error); }
.tcl .tcl-boton--rojo { border-color: #d93636 !important; background: #d93636 !important; }
.tcl-grupo--campos { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Apagado mientras tenga servicio: se ve, pero se nota que no se puede usar. */
.tcl-grupo--campos:disabled { opacity: .45; }
.tcl-grupo--campos:disabled .tcl-boton { cursor: not-allowed; filter: grayscale(.4); }

/* ── WhatsApp con país (mismo buscador que /suscribirse) ──────────────── */

.tcl-tel {
	display: flex; align-items: stretch; min-height: 50px;
	border: 1px solid var(--tcl-borde); border-radius: 12px;
	background: rgba(255, 255, 255, .04);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.tcl-tel:focus-within { border-color: var(--tcl-acento); box-shadow: 0 0 0 3px rgba(255, 90, 25, .18); }
.tcl .tcl-tel input[type="tel"], .tcl .tcl-tel select {
	flex: 1; min-width: 0; height: auto; margin: 0; padding: 0 14px !important;
	border: 0 !important; border-radius: 0 !important; background: transparent !important;
	box-shadow: none !important; color: var(--tcl-texto) !important; font-size: 16px; outline: none;
}
.tcl .tcl-tel select { flex: 0 0 auto; max-width: 45%; border-right: 1px solid var(--tcl-borde) !important; }
.tcl .tcl-tel select option { background: #1d1d1d; }

.tcl-oculto-visual { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

.tcl-buscapais { position: relative; flex: 0 0 auto; display: flex; }
.tcl .tcl-buscapais-boton {
	display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 12px 0 14px !important;
	border: 0 !important; border-right: 1px solid var(--tcl-borde) !important; border-radius: 12px 0 0 12px !important;
	background: transparent !important; color: var(--tcl-texto) !important; font-size: 16px; white-space: nowrap; cursor: pointer;
}
.tcl .tcl-buscapais-boton::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid var(--tcl-apagado); border-bottom: 2px solid var(--tcl-apagado); transform: translateY(-2px) rotate(45deg); }
.tcl-buscapais-panel {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
	width: min(320px, 80vw); padding: 8px;
	border: 1px solid var(--tcl-borde); border-radius: 14px; background: #1d1d1d;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.tcl .tcl-buscapais-input {
	width: 100%; height: 40px; margin: 0 0 6px; padding: 0 12px !important;
	border: 1px solid var(--tcl-borde) !important; border-radius: 10px !important;
	background: rgba(255, 255, 255, .04) !important; color: var(--tcl-texto) !important; font-size: 15px; outline: none;
}
.tcl .tcl-buscapais-input:focus { border-color: var(--tcl-acento) !important; }
.tcl-buscapais-lista { max-height: 260px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.tcl-buscapais-item { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--tcl-texto); font-size: 14px; cursor: pointer; }
.tcl-buscapais-item span:last-child { color: var(--tcl-apagado); }
.tcl-buscapais-item:hover { background: rgba(255, 255, 255, .06); }
.tcl-buscapais-item.is-activa { background: rgba(255, 90, 25, .14); }
.tcl-buscapais-vacio { padding: 10px; color: var(--tcl-apagado); font-size: 14px; }

/* ── Pagos ────────────────────────────────────────────────────────────── */

.tcl-pagos { display: grid; gap: 8px; }
.tcl-pago { border: 1px solid var(--tcl-borde); border-radius: 14px; overflow: hidden; transition: border-color .15s ease; }
.tcl-pago[open] { border-color: rgba(255, 90, 25, .55); }
.tcl-pago-resumen { display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; list-style: none; }
.tcl-pago-resumen::-webkit-details-marker { display: none; }
.tcl-pago-resumen:hover { background: rgba(255, 255, 255, .03); }
.tcl-pago-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tcl-pago-textos strong { font-size: 15px; }
.tcl-pago-textos small { color: var(--tcl-apagado); font-size: 13px; }
.tcl-pago-total { min-width: 92px; text-align: right; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tcl-pago-flecha { color: var(--tcl-apagado); font-size: 12px; transition: transform .15s ease; }
.tcl-pago[open] .tcl-pago-flecha { transform: rotate(180deg); }

.tcl-pago-detalle { padding: 4px 14px 14px; border-top: 1px solid var(--tcl-borde); background: rgba(0, 0, 0, .15); }
.tcl-pago-fecha { margin: 10px 0 4px; color: var(--tcl-apagado); font-size: 13px; }
.tcl-lineas { margin: 0; padding: 0; list-style: none; }
.tcl-linea { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--tcl-borde); font-size: 14px; }
.tcl-linea small { display: block; margin-top: 2px; color: var(--tcl-apagado); font-size: 12.5px; }
/* «¿Cómo se calculó?» de las conexiones (12/10/2026), como el del pago. */
.tcl-linea-como { margin-top: 6px; color: var(--tcl-apagado); font-size: 12.5px; }
.tcl-linea-como summary { cursor: pointer; color: var(--tcl-acento); }
.tcl-linea-como ol { margin: 6px 0 0; padding: 0 0 0 18px; list-style: decimal; line-height: 1.45; }
.tcl-linea-como li { padding: 2px 0; }
.tcl-linea-importe { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.tcl-linea--descuento .tcl-linea-importe { color: var(--tcl-ok); }
.tcl-linea--prorrateo > span:first-child { color: var(--tcl-apagado); }
.tcl-linea-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 90, 25, .1); font-size: 16px; font-weight: 800; }
.tcl-linea-total span:last-child { color: var(--tcl-acento); font-variant-numeric: tabular-nums; }

/* ── Tutoriales ───────────────────────────────────────────────────────── */

.tcl-tuts { display: grid; gap: 8px; }
.tcl .tcl-tut {
	display: flex; align-items: center; gap: 12px; padding: 12px;
	border: 1px solid var(--tcl-borde); border-radius: 14px;
	color: var(--tcl-texto) !important; text-decoration: none !important;
	transition: border-color .15s ease, background-color .15s ease;
}
.tcl .tcl-tut:hover { border-color: var(--tcl-acento); background: rgba(255, 90, 25, .05); }
.tcl-tut-icono { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--tcl-acento); font-size: 18px; }
.tcl-tut-icono img { max-width: 26px; max-height: 26px; }
.tcl-tut-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tcl-tut-textos strong { font-size: 15px; }
.tcl-tut-textos small { color: var(--tcl-apagado); font-size: 13px; line-height: 1.4; }
.tcl-tut-flecha { color: var(--tcl-apagado); font-size: 13px; }

.tcl-tut-detalle { padding: 26px 26px 10px; }
.tcl .tcl-tut-titulo { margin: 0 0 8px; color: var(--tcl-texto); font-size: 24px !important; font-weight: 800; line-height: 1.2 !important; }
.tcl-tut-detalle .tcl-sub { margin-bottom: 18px; }
.tcl-tut-detalle .tcl-etiqueta-plan { justify-content: flex-start; margin: 0 0 12px; }

/* Los pasos, en carrusel (10/10/2026, JC): uno por pantalla, se desliza de
   derecha a izquierda. El deslizamiento es scroll-snap del navegador; el JS
   pinta los puntitos y ajusta el alto al paso visible (si no, la tarjeta
   mediría lo que el paso más largo y los puntitos quedarían lejos). */
.tcl-tut-carrusel { position: relative; margin: 8px 0 0; border-top: 1px solid var(--tcl-borde); }
.tcl-tut-pasos { display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; transition: height .25s ease; }
.tcl-tut-pasos::-webkit-scrollbar { display: none; }
.tcl-tut-pasos:focus-visible { outline: 2px solid var(--tcl-acento); outline-offset: 4px; border-radius: 8px; }
.tcl-tut-paso { flex: 0 0 100%; min-width: 0; padding: 18px 2px; scroll-snap-align: start; scroll-snap-stop: always; }
/* Con el script (is-js), el gesto lo lleva él: un paso por deslizamiento. El
   navegador solo se queda el desplazamiento vertical de la página (pan-y). */
.tcl-tut-carrusel.is-js .tcl-tut-pasos { overflow-x: hidden; scroll-snap-type: none; scroll-behavior: auto; touch-action: pan-y; overscroll-behavior-x: contain; }
.tcl-tut-carrusel.is-js .tcl-tut-paso { scroll-snap-align: none; }
.tcl-tut-carrusel.is-arrastrando .tcl-tut-pasos { cursor: grabbing; user-select: none; -webkit-user-select: none; transition: none; }
.tcl-tut-carrusel .tcl-tut-pasos img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.tcl-tut-paso-texto { display: flex; gap: 16px; }
/* Centrada (13/10/2026, JC): una captura vertical no llena el ancho. Y
   sin pasar de tres cuartos de pantalla de alto, para que una captura de
   celular no obligue a desplazar para ver el paso entero. */
.tcl-tut-foto .tcl-tut-imagen { width: auto; max-height: 75vh; margin: 14px auto 4px; }

.tcl-tut-control { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 0 2px; }
.tcl-tut-control[hidden], .tcl-tut-pie[hidden] { display: none; }
/* Una sola fila: el script deja ver como mucho 7 puntos (PUNTOS_MAX) y
   achica los de las orillas cuando hay más pasos de ese lado. */
.tcl-tut-puntos { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; }
/* El punto se ve de 8 px pero se toca en 24: con el dedo, 8 px no se aciertan. */
.tcl .tcl-tut-punto { position: relative; width: 24px; height: 24px; padding: 0 !important; border: 0 !important; border-radius: 50%; background: transparent !important; cursor: pointer; }
.tcl-tut-punto::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 4px; background: var(--tcl-borde); transform: translate(-50%, -50%); transition: width .25s ease, background-color .25s ease; }
.tcl-tut-punto:hover::after { background: var(--tcl-apagado); }
.tcl-tut-punto.is-activo::after { width: 22px; background: var(--tcl-acento); }
.tcl .tcl-tut-punto.is-fuera { display: none; }
.tcl-tut-punto.is-medio::after { width: 6px; height: 6px; }
.tcl-tut-punto.is-chico::after { width: 4px; height: 4px; }
.tcl .tcl-tut-flecha-paso { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0 !important; border: 1px solid var(--tcl-borde) !important; border-radius: 50%; background: var(--tcl-tarjeta) !important; color: var(--tcl-texto) !important; font-size: 14px; cursor: pointer; transition: border-color .2s ease, opacity .2s ease; }
.tcl .tcl-tut-flecha-paso:hover:not(:disabled) { border-color: var(--tcl-acento) !important; }
.tcl .tcl-tut-flecha-paso:disabled { opacity: .3; cursor: default; }
.tcl-tut-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 8px 0 14px; color: var(--tcl-apagado); font-size: 13px; }
.tcl-tut-gesto { display: inline-flex; align-items: center; gap: 6px; }
.tcl-tut-gesto i { animation: tcl-gesto 1.8s ease-in-out infinite; }
@keyframes tcl-gesto { 0%, 100% { transform: translateX(6px); opacity: .6; } 50% { transform: translateX(-6px); opacity: 1; } }
/* Solo el icono, arriba a la derecha a la altura del número del paso
   (13/10/2026, JC). Queda fijo: los pasos se deslizan por debajo. */
.tcl .tcl-tut-abrir-completa { position: absolute; top: 18px; right: 2px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0 !important; border: 1px solid var(--tcl-borde) !important; border-radius: 50%; background: var(--tcl-tarjeta) !important; color: var(--tcl-texto) !important; font-size: 14px; cursor: pointer; }
.tcl .tcl-tut-abrir-completa[hidden] { display: none; }
.tcl-tut-carrusel:not(.is-completa) .tcl-tut-paso-texto { padding-right: 44px; }
.tcl .tcl-tut-abrir-completa:hover { border-color: var(--tcl-acento) !important; }

/* PANTALLA COMPLETA: el mismo carrusel, fijo sobre toda la página. En cada
   paso, el texto arriba y la foto debajo, que ocupa el resto sin recortarse
   (contain). Si el texto es largo, se desplaza él solo y la foto se queda. */
.tcl-tut-carrusel.is-completa { position: fixed; inset: 0; z-index: 100000; margin: 0; border: 0; display: flex; flex-direction: column; background: var(--tcl-fondo); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.tcl-tut-carrusel.is-completa [data-tcl-solo-normal] { display: none; }
.tcl-tut-carrusel:not(.is-completa) [data-tcl-solo-completa] { display: none; }
.tcl-tut-barra-completa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--tcl-borde); }
.tcl-tut-barra-titulo { min-width: 0; overflow: hidden; color: var(--tcl-texto); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.tcl .tcl-tut-cerrar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0 !important; border: 1px solid var(--tcl-borde) !important; border-radius: 50%; background: var(--tcl-tarjeta) !important; color: var(--tcl-texto) !important; font-size: 18px; cursor: pointer; }
.tcl-tut-carrusel.is-completa .tcl-tut-pasos { flex: 1; min-height: 0; height: auto !important; align-items: stretch; }
/* En pantalla completa se arrastra con el ratón por todas partes: sin
   seleccionar texto, que en Safari se queda el gesto (13/10/2026). */
.tcl-tut-carrusel.is-completa .tcl-tut-pasos { user-select: none; -webkit-user-select: none; }
.tcl-tut-carrusel.is-completa .tcl-tut-paso { display: flex; flex-direction: column; padding: 16px; }
.tcl-tut-carrusel.is-completa .tcl-tut-paso-texto { flex: 0 1 auto; max-height: 45%; overflow-y: auto; }
.tcl-tut-carrusel.is-completa .tcl-tut-foto { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin-top: 12px; }
.tcl-tut-carrusel.is-completa .tcl-tut-imagen { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; object-fit: contain; border: 0; border-radius: 10px; }
/* En escritorio, el texto no se estira de lado a lado: columna de 960 px. */
.tcl-tut-carrusel.is-completa .tcl-tut-paso { padding-left: max(16px, calc((100% - 960px) / 2)); padding-right: max(16px, calc((100% - 960px) / 2)); }
.tcl-tut-carrusel.is-completa .tcl-tut-control { padding: 10px 16px 4px; border-top: 1px solid var(--tcl-borde); }
.tcl-tut-carrusel.is-completa .tcl-tut-pie { justify-content: center; padding: 0 16px 12px; }
html.tcl-sin-scroll, html.tcl-sin-scroll body { overflow: hidden !important; }

/* PANTALLA COMPLETA MÁS LIMPIA (13/10/2026, JC: «quita lo de Paso 2 de X,
   las flechas y el título; el número de paso sobre la imagen; deja la
   cruz»). Se pasa con el dedo, el ratón o los puntitos. La ✕ flota arriba a
   la derecha, sin barra. */
.tcl-tut-carrusel.is-completa .tcl-tut-barra-titulo,
.tcl-tut-carrusel.is-completa .tcl-tut-flecha-paso,
.tcl-tut-carrusel.is-completa .tcl-tut-pie { display: none; }
.tcl-tut-carrusel.is-completa .tcl-tut-barra-completa { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 3; padding: 0; border: 0; }
.tcl-tut-carrusel.is-completa .tcl-tut-control { border-top: 0; }
/* Un toque en la foto los esconde y otro los devuelve (13/10/2026). */
.tcl-tut-carrusel.is-completa .tcl-tut-barra-completa,
.tcl-tut-carrusel.is-completa .tcl-tut-control { transition: opacity .2s ease, visibility .2s; }
.tcl-tut-carrusel.is-completa.is-sin-controles .tcl-tut-barra-completa,
.tcl-tut-carrusel.is-completa.is-sin-controles .tcl-tut-control { opacity: 0; visibility: hidden; }
/* El número del paso, arriba a la izquierda de la pantalla y a la altura
   de la ✕ (13/10/2026, JC; antes iba en la esquina de la foto). Sale del
   bloque de texto (posición absoluta respecto al paso), así que en un paso
   sin texto el bloque se «disuelve» y la foto ocupa todo el alto. La foto
   va en un marco que mide lo que la imagen ya ajustada (unidades cqw/cqh).
   En el celular en horizontal el número sigue en la franja de abajo. */
.tcl-tut-foto-marco { display: block; }
.tcl-tut-foto .tcl-tut-numero-foto { display: none; }
@media not all and (orientation: landscape) and (max-height: 600px) {
	.tcl-tut-carrusel.is-completa .tcl-tut-foto { container-type: size; }
	.tcl-tut-carrusel.is-completa .tcl-tut-foto-marco { display: inline-block; max-width: 100%; max-height: 100%; line-height: 0; }
	.tcl-tut-carrusel.is-completa .tcl-tut-foto .tcl-tut-imagen { width: auto; height: auto; max-width: 100cqw; max-height: 100cqh; }
	.tcl-tut-carrusel.is-completa .tcl-tut-paso { position: relative; }
	/* 13 px: la ✕ mide 40 y está a 10 del borde; el número mide 34. */
	.tcl-tut-carrusel.is-completa .tcl-tut-paso-texto > .tcl-tut-numero { position: absolute; top: 13px; left: max(13px, env(safe-area-inset-left)); z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
	.tcl-tut-carrusel.is-completa .tcl-tut-paso:has(.tcl-tut-foto) .tcl-tut-paso-texto:not(:has(h3, .tcl-tut-contenido)) { display: contents; }
	.tcl-tut-carrusel.is-completa .tcl-tut-paso:has(.tcl-tut-foto) .tcl-tut-paso-texto:not(:has(h3, .tcl-tut-contenido)) .tcl-tut-paso-cuerpo { display: none; }
	/* El texto deja sitio al número (izquierda) y a la ✕ (derecha). */
	.tcl-tut-carrusel.is-completa .tcl-tut-paso-texto { padding: 6px 48px 0 36px; }
}


/* PANTALLA COMPLETA CON EL CELULAR EN HORIZONTAL (10/10/2026, JC: «la
   interfaz ocupa demasiado»). Con 350-450 px de alto no caben barra, texto,
   foto y puntitos uno debajo de otro: la foto pasa a ocupar TODA la pantalla
   y el texto va abajo, encima de ella, en una franja oscura translúcida
   (color sólido con transparencia: en el sitio no se usan degradados). La
   barra de arriba se queda en una ✕ flotante y los puntitos flotan abajo;
   flechas y contador sobran, se desliza con el dedo. Un paso sin foto se ve
   como siempre (:has). */
@media (orientation: landscape) and (max-height: 600px) {
	.tcl-tut-carrusel.is-completa { padding: 0; background: #000; }
	.tcl-tut-carrusel.is-completa .tcl-tut-barra-completa { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); z-index: 3; padding: 0; border: 0; }
	.tcl-tut-carrusel.is-completa .tcl-tut-barra-titulo { display: none; }
	.tcl .tcl-tut-carrusel.is-completa .tcl-tut-cerrar { width: 36px; height: 36px; border-color: rgba(255, 255, 255, .25) !important; background: rgba(0, 0, 0, .55) !important; font-size: 16px; }
	.tcl-tut-carrusel.is-completa .tcl-tut-paso:has(.tcl-tut-foto) { position: relative; padding: 0; }
	.tcl-tut-carrusel.is-completa .tcl-tut-paso:has(.tcl-tut-foto) .tcl-tut-foto { position: absolute; inset: 0; margin: 0; }
	/* El marco del número (vertical) aquí solo estorba: ocupa toda la foto. */
	.tcl-tut-carrusel.is-completa .tcl-tut-foto-marco { width: 100%; height: 100%; }
	.tcl-tut-carrusel.is-completa .tcl-tut-paso:has(.tcl-tut-foto) .tcl-tut-imagen { border-radius: 0; }
	.tcl-tut-carrusel.is-completa .tcl-tut-paso:has(.tcl-tut-foto) .tcl-tut-paso-texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-height: 40%; overflow-y: auto; gap: 10px; padding: 10px max(16px, env(safe-area-inset-left)) 30px; background: rgba(0, 0, 0, .68); }
	.tcl-tut-carrusel.is-completa .tcl-tut-paso:has(.tcl-tut-foto) .tcl-tut-numero { width: 26px; height: 26px; font-size: 13px; }
	.tcl .tcl-tut-carrusel.is-completa .tcl-tut-paso:has(.tcl-tut-foto) .tcl-tut-paso-cuerpo h3 { margin: 2px 0 4px; font-size: 15px !important; color: #fff; }
	.tcl-tut-carrusel.is-completa .tcl-tut-paso:has(.tcl-tut-foto) .tcl-tut-contenido { color: #e6e6e6; font-size: 14px; line-height: 1.45; }
	.tcl-tut-carrusel.is-completa .tcl-tut-paso:has(.tcl-tut-foto) .tcl-tut-contenido p { margin: 0 0 6px; }
	.tcl-tut-carrusel.is-completa .tcl-tut-control { position: absolute; left: 0; right: 0; bottom: max(2px, env(safe-area-inset-bottom)); z-index: 3; padding: 0; border: 0; pointer-events: none; }
	.tcl-tut-carrusel.is-completa .tcl-tut-control .tcl-tut-puntos { pointer-events: auto; }
	.tcl-tut-carrusel.is-completa .tcl-tut-flecha-paso,
	.tcl-tut-carrusel.is-completa .tcl-tut-pie { display: none; }
	.tcl-tut-carrusel.is-completa .tcl-tut-punto::after { background: rgba(255, 255, 255, .4); }
	.tcl-tut-carrusel.is-completa .tcl-tut-punto.is-activo::after { background: var(--tcl-acento); }
}

@media (prefers-reduced-motion: reduce) {
	.tcl-tut-pasos { scroll-behavior: auto; transition: none; }
	.tcl-tut-gesto i { animation: none; }
}
.tcl-tut-numero { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tcl-acento); color: #fff; font-size: 15px; font-weight: 800; }
.tcl-tut-paso-cuerpo { flex: 1; min-width: 0; }
.tcl .tcl-tut-paso-cuerpo h3 { margin: 5px 0 8px; color: var(--tcl-texto); font-size: 17px !important; font-weight: 700; line-height: 1.3 !important; }
.tcl-tut-contenido { color: var(--tcl-apagado); font-size: 15px; line-height: 1.6; }
.tcl-tut-contenido p { margin: 0 0 10px; }
.tcl-tut-contenido a { color: var(--tcl-acento) !important; }
.tcl-tut-contenido img, .tcl-tut-imagen { display: block; max-width: 100%; height: auto; margin: 12px 0 4px; border: 1px solid var(--tcl-borde); border-radius: 12px; }

/* Con la sesión de WordPress iniciada, la barra de administración (32 px en
   escritorio, 46 en móvil) baja la cabecera: se suma lo mismo arriba. */
body.admin-bar .tcl { padding-top: 182px; }

@media (max-width: 767px) {
	.tcl { padding: 150px 14px 40px; }
	body.admin-bar .tcl { padding-top: 196px; }
	.tcl-rejilla { grid-template-columns: minmax(0, 1fr); }
	.tcl-tarjeta--suscripcion { grid-row: auto; }
	.tcl-caja { padding: 22px 18px; }
	/* Las pestañas no caben en una fila: van en DOS (JC, 05/10/2026; en una
	   sola, con ocho, el texto quedaba diminuto). Icono arriba y texto debajo,
	   todas a la vista sin deslizar. Las columnas = la mitad de las pestañas
	   (--tcl-columnas, lo calcula cuenta.php): las de solo TV tienen una menos. */
	.tcl-pestanas { display: grid; grid-template-columns: repeat(var(--tcl-columnas, 4), minmax(0, 1fr)); gap: 4px; }
	.tcl-requisitos { grid-template-columns: minmax(0, 1fr); }
	.tcl .tcl-pestana { flex-direction: column; gap: 4px; min-height: 58px; padding: 6px 2px; font-size: 12.5px; letter-spacing: -.01em; white-space: normal; text-align: center; line-height: 1.15; }
	.tcl .tcl-pestana i { font-size: 16px; }
	.tcl-cuentas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.tcl .tcl-cuenta-opcion--nueva { grid-column: 1 / -1; }
	.tcl .tcl-cuenta-opcion { padding: 10px; gap: 9px; }
	.tcl-cuenta-opcion-icono { width: 32px; height: 32px; font-size: 13px; }
	.tcl-pago-resumen { flex-wrap: wrap; gap: 8px 10px; }
	.tcl-pago-textos { flex-basis: calc(100% - 30px); }
	.tcl-pago-flecha { order: -1; margin-left: auto; position: absolute; right: 14px; }
	.tcl-pago-resumen { position: relative; padding-right: 36px; }
	.tcl-pago-total { margin-left: auto; min-width: 0; }
	.tcl-rejilla--dispositivos { grid-template-columns: minmax(0, 1fr); }
	.tcl-tut-detalle { padding: 20px 16px 6px; }
	.tcl-tut-paso-texto { gap: 12px; }

	/* En el celular, «Desenlazar» se queda en su icono: el nombre del
	   aparato necesita el ancho, y el botón lleva su texto para lectores de
	   pantalla en aria-label. */
	.tcl .tcl-desenlazar { width: 40px; min-height: 40px; padding: 0 !important; }
	.tcl-desenlazar-texto { display: none; }
}

/* ── Pestaña «Peticiones» (sept. 2026) ─────────────────────────────────── */

.tcl .tcl-campo select,
.tcl .tcl-campo textarea {
	width: 100%;
	padding: 11px 14px !important;
	border: 1px solid var(--tcl-borde) !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, .04) !important;
	color: var(--tcl-texto) !important;
	font-family: inherit;
	font-size: 15px;
}
.tcl .tcl-campo textarea { resize: vertical; min-height: 80px; }
/* Las opciones del desplegable no heredan la transparencia: fondo sólido. */
.tcl .tcl-campo select { background: var(--tcl-tarjeta) !important; }
.tcl .tcl-campo select:focus,
.tcl .tcl-campo textarea:focus { border-color: var(--tcl-acento) !important; outline: none; }
.tcl .tcl-campo small { color: var(--tcl-apagado); font-weight: 400; }

.tcl .tcl-pet-reglas { margin: 0; padding-left: 18px; color: var(--tcl-apagado); font-size: 14px; line-height: 1.55; }
.tcl .tcl-pet-reglas li + li { margin-top: 6px; }
.tcl .tcl-pet-reglas strong { color: var(--tcl-texto); }

.tcl .tcl-pet-campos { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.tcl .tcl-pet-campos[disabled] { opacity: .5; }
.tcl .tcl-pet-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.tcl .tcl-pet-saldo { margin: 0 0 14px; color: var(--tcl-apagado); font-size: 15px; }
.tcl .tcl-pet-saldo strong { color: var(--tcl-texto); font-size: 30px; font-weight: 800; }

.tcl .tcl-pet-paquetes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tcl .tcl-pet-paquete { position: relative; cursor: pointer; }
.tcl .tcl-pet-paquete input { position: absolute; opacity: 0; pointer-events: none; }
.tcl .tcl-pet-paquete span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 1.5px solid var(--tcl-borde);
	border-radius: 12px;
	color: var(--tcl-apagado);
	font-size: 13px;
}
.tcl .tcl-pet-paquete strong { color: var(--tcl-texto); font-size: 15px; }
.tcl .tcl-pet-paquete input:checked + span { border-color: var(--tcl-acento); background: rgba(255, 90, 25, .08); }
.tcl .tcl-pet-paquete input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255, 90, 25, .25); }

.tcl .tcl-pet-lista { margin: 0; padding: 0; list-style: none; }
.tcl .tcl-pet-item { padding: 12px 0; border-top: 1px solid var(--tcl-borde); }
.tcl .tcl-pet-item:first-child { border-top: 0; padding-top: 0; }
.tcl .tcl-pet-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tcl .tcl-pet-titulo { color: var(--tcl-texto); font-weight: 700; }
.tcl .tcl-pet-titulo small { color: var(--tcl-apagado); font-weight: 400; }
.tcl .tcl-pet-meta { margin: 4px 0 0; color: var(--tcl-apagado); font-size: 13px; }
.tcl .tcl-pet-propuesta { margin-top: 10px; padding: 12px 14px; border: 1px solid rgba(255, 176, 32, .45); border-radius: 12px; background: rgba(255, 176, 32, .08); }
.tcl .tcl-pet-propuesta p { margin: 0 0 10px; color: var(--tcl-texto); font-size: 14px; }
.tcl .tcl-pet-propuesta .tcl-nota { margin: 10px 0 0; }
.tcl .tcl-pet-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.tcl .tcl-pet-botones form { margin: 0; }

@media (max-width: 560px) {
	.tcl .tcl-pet-fila { grid-template-columns: 1fr; }
	.tcl .tcl-pet-cabeza { flex-direction: column; }
}

/* Paginación de «Mis peticiones» (sept. 2026). */
.tcl .tcl-paginas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tcl-borde); }
.tcl .tcl-pagina {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid var(--tcl-borde);
	border-radius: 10px;
	color: var(--tcl-apagado) !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
}
.tcl a.tcl-pagina:hover { border-color: var(--tcl-acento); color: var(--tcl-texto) !important; }
.tcl .tcl-pagina.is-actual { border-color: var(--tcl-acento); background: var(--tcl-acento); color: #fff !important; }
.tcl .tcl-pagina.is-apagada { opacity: .35; }
.tcl .tcl-pagina.is-puntos { border-color: transparent; min-width: 18px; padding: 0; }
.tcl .tcl-paginas-texto { margin: 8px 0 0; color: var(--tcl-apagado); font-size: 12px; text-align: center; }


/* ── Estado de tu servidor (sept. 2026) ─────────────────────────────── */
.tcl-servidor-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tcl-servidor-cabeza strong { color: var(--tcl-texto); font-size: 16px; }
.tcl-servidor-ocupacion { margin-top: 14px; }
.tcl-servidor-fila { display: flex; justify-content: space-between; gap: 12px; color: var(--tcl-apagado); font-size: 14px; margin-bottom: 6px; }
.tcl-servidor-fila strong { color: var(--tcl-texto); }
.tcl-barra { height: 10px; border-radius: 999px; background: var(--tcl-borde); overflow: hidden; }
.tcl-barra span { display: block; height: 100%; border-radius: inherit; background: var(--tcl-ok); transition: width .3s; }
.tcl-barra span.is-media { background: var(--tcl-aviso); }
.tcl-barra span.is-alta { background: var(--tcl-error); }
.tcl-servidor-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.tcl-servidor-cifras div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--tcl-borde); border-radius: 10px; }
.tcl-servidor-cifras span { color: var(--tcl-apagado); font-size: 12.5px; }
.tcl-servidor-cifras strong { color: var(--tcl-texto); font-size: 18px; }
.tcl-servidor-grafica { margin: 16px 0 0; position: relative; }
/* El globo de cada hora (14/10/2026). */
.tcl-grafica-zona { fill: transparent; cursor: pointer; }
.tcl-grafica-hora.is-activa .tcl-grafica-ocupacion { opacity: 1; }
.tcl-grafica-hora.is-activa .tcl-grafica-zona { fill: var(--tcl-borde); fill-opacity: .35; }
.tcl-grafica-tip { position: absolute; top: 0; z-index: 2; transform: translateX(-50%); padding: 8px 10px; border-radius: 8px; background: var(--tcl-texto); color: var(--tcl-fondo, #111); font-size: 12.5px; line-height: 1.45; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.tcl-grafica-tip strong { display: block; }
.tcl-servidor-grafica figcaption { color: var(--tcl-apagado); font-size: 13px; margin-bottom: 6px; }
.tcl-servidor-grafica svg { display: block; width: 100%; height: 110px; }
.tcl-grafica-ocupacion { fill: var(--tcl-acento); opacity: .85; }
.tcl-grafica-disp.is-ok { fill: var(--tcl-ok); }
.tcl-grafica-disp.is-aviso { fill: var(--tcl-aviso); }
.tcl-grafica-disp.is-error { fill: var(--tcl-error); }
.tcl-grafica-disp.is-sin { fill: var(--tcl-borde); }
.tcl-grafica-ejes { display: flex; justify-content: space-between; color: var(--tcl-apagado); font-size: 12px; margin-top: 4px; }
.tcl-grafica-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; color: var(--tcl-apagado); font-size: 12px; }
.tcl-grafica-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.tcl-grafica-leyenda i.is-ocupacion { background: var(--tcl-acento); }
.tcl-grafica-leyenda i.is-ok { background: var(--tcl-ok); }
.tcl-grafica-leyenda i.is-aviso { background: var(--tcl-aviso); }
.tcl-grafica-leyenda i.is-error { background: var(--tcl-error); }
@media (max-width: 480px) { .tcl-servidor-cifras { grid-template-columns: 1fr; } }
.tcl .tcl-servidor .tcl-servidor-cabeza + .tcl-nota { margin: 8px 0 0; }

/* ── Notificaciones (30/09/2026) ─────────────────────────────────────────── */
.tcl-notif-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--tcl-borde); }
.tcl-notif-fila:last-child { border-bottom: 0; }
.tcl-notif-etiqueta { flex: 1 1 200px; min-width: 0; }
.tcl-opcion--fija { cursor: default; }
.tcl-opcion--fija:hover span { border-color: var(--tcl-acento); }
/* Cada aviso, un recuadro de .tcl-lista a todo lo ancho (14/10/2026, JC):
   el li es flex y el <details> se encogía a su texto, así que los iconos
   quedaban pegados al título en vez de a la derecha. Y sin el «último sin
   borde» de cuando eran filas con raya: cortaba el recuadro de abajo. */
.tcl-notif-historial li { display: block; padding: 0 12px; }
.tcl-notif-aviso { width: 100%; }
/* De qué cuenta son los avisos (12/10/2026, JC). */
.tcl-notif-de-cuenta { display: flex; gap: 10px; align-items: baseline; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--tcl-borde); border-left: 3px solid var(--tcl-acento); border-radius: 10px; font-size: 14px; line-height: 1.5; }
.tcl-notif-de-cuenta i { color: var(--tcl-acento); }
/* Cada aviso se abre para leerlo completo (12/10/2026, JC). */
.tcl-notif-aviso summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; cursor: pointer; list-style: none; }
/* El título en una sola línea, con «…» si no cabe (14/10/2026, JC); al
   abrir el aviso se lee completo. Por ancho y no por número de letras:
   así aprovecha lo que haya en cada pantalla. */
.tcl-notif-resumen { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tcl-notif-aviso[open] .tcl-notif-resumen { white-space: normal; }
.tcl-notif-aviso summary::-webkit-details-marker { display: none; }
.tcl-notif-aviso summary:hover .tcl-notif-resumen { color: var(--tcl-acento); }
.tcl-notif-flecha { font-size: 11px; transition: transform .15s ease; }
.tcl-notif-aviso[open] .tcl-notif-flecha { transform: rotate(180deg); }
.tcl-notif-texto { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.tcl-notif-texto p { margin: 0 0 10px !important; }
.tcl-notif-texto p:last-child { margin-bottom: 0 !important; }
.tcl-notif-texto code { font-size: 13px; }
.tcl-notif-fecha { color: var(--tcl-apagado); font-size: 13px; white-space: nowrap; }
.tcl-notif-canales { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--tcl-apagado); }

/* ── Notificaciones push por dispositivo (05/10/2026) ───────────────────── */
.tcl-push-este { padding: 12px 14px; border: 1px solid var(--tcl-borde); border-radius: 12px; margin: 4px 0 16px; }
.tcl-push-estado { margin: 0 0 10px; color: var(--tcl-texto); }
.tcl-push-botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.tcl-push-dispositivo { border: 1px solid var(--tcl-borde); border-radius: 12px; margin: 0 0 10px; }
.tcl-push-dispositivo { min-width: 0; }
/* La fila se parte en dos si no cabe (05/10/2026: en iPhone, nombre + «Este
   dispositivo» + «Todos los avisos» no cabían y la tarjeta empujaba la página a
   lo ancho). El resumen baja a su propia línea, debajo del nombre. */
.tcl-push-dispositivo > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 14px; cursor: pointer; }
.tcl-push-dispositivo > summary::-webkit-details-marker { display: none; }
.tcl-push-dispositivo > summary > i { color: var(--tcl-acento); width: 18px; text-align: center; }
.tcl-push-nombre { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcl-push-este-sello { font-size: 12px; font-weight: 700; color: #141414; background: var(--tcl-ok); border-radius: 999px; padding: 2px 8px; }
.tcl-push-este-sello[hidden] { display: none; }
.tcl-push-resumen { font-size: 13px; color: var(--tcl-apagado); }
@media (max-width: 560px) {
	.tcl-push-resumen { flex-basis: 100%; padding-left: 28px; }
}
.tcl-push-dispositivo .tcl-form { padding: 0 14px 14px; }
.tcl-push-todos { margin: 12px 0 4px; }
.tcl-push-grupo { margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--tcl-apagado); text-transform: uppercase; letter-spacing: .03em; }
.tcl-push-avisos[hidden] { display: none; }
/* Enlace de texto rojo, no botón. Con !important porque el tema le pone a todo
   <button> su degradado amarillo y naranja (05/10/2026, JC: «color raro»). */
.tcl button.tcl-enlace-peligro,
.tcl button.tcl-enlace-peligro:hover,
.tcl button.tcl-enlace-peligro:focus {
	background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important;
	padding: 6px 0 !important; color: var(--tcl-error) !important; font: inherit; font-size: 14px !important; font-weight: 600; cursor: pointer;
}
.tcl button.tcl-enlace-peligro:hover { text-decoration: underline; }
/* Celulares angostos (360 px) con las 8 pestañas: «Notificaciones» es una sola
   palabra y no puede partirse; con letra un poco menor cabe en su columna. */
@media (max-width: 380px) {
	.tcl .tcl-pestana { font-size: 11px; letter-spacing: -.02em; padding: 6px 1px; }
}
@media (max-width: 340px) {
	.tcl .tcl-pestana { font-size: 10px; }
}

/* Las tarjetas no pueden ser más anchas que su columna (05/10/2026: a 360 px la
   columna medía 312 y las tarjetas se medían por su contenido, 329, y la página
   se movía a lo ancho). Con min-width 0 se ajustan y su contenido se acomoda. */
.tcl-columna { grid-template-columns: minmax(0, 1fr); }
.tcl-columna > * { min-width: 0; }

/* «Este dispositivo ya recibe notificaciones»: sin botones visibles debajo, el
   texto queda centrado en su recuadro y no pegado arriba (JC, 05/10/2026). */
.tcl-push-este { display: flex; flex-direction: column; justify-content: center; min-height: 52px; }
.tcl .tcl-push-estado { margin: 0; }
.tcl-push-este .tcl-push-botones { margin-top: 12px; }
.tcl-push-este .tcl-push-botones:not(:has(> :not([hidden]))) { display: none; }
.tcl-push-este [data-push-ios] { margin: 12px 0 0; }
.tcl-push-este [data-push-ios][hidden] { display: none; }

/* Oferta de notificaciones en «pago confirmado» (05/10/2026): va dentro de la
   caja de tucine-mp-subs y usa sus clases; aquí solo la separación. */
.tcl-push-oferta { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.tcl-push-oferta[hidden] { display: none; }
.tcl-push-oferta [data-push-ios][hidden], .tcl-push-oferta [data-push-activar][hidden] { display: none; }

/* ── Tu horario (05/10/2026): canal + «Desde» / «Hasta», legible en el celular ── */
.tcl-horario-zona { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; color: var(--tcl-apagado); font-size: 13px; }
.tcl-horario { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.tcl-horario-fila {
	display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px; align-items: end; gap: 10px;
	padding: 12px 14px; border: 1px solid var(--tcl-borde); border-radius: 12px; background: rgba(255, 255, 255, .02);
}
.tcl-horario-canal { display: flex; align-items: center; gap: 8px; align-self: center; color: var(--tcl-texto); font-size: 14px; font-weight: 600; }
.tcl-horario-canal i { width: 18px; color: var(--tcl-acento); text-align: center; }
.tcl-horario-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--tcl-apagado); font-size: 12px; }
.tcl .tcl-horario-zona select, .tcl .tcl-horario-campo select {
	width: 100%; height: 40px; margin: 0; padding: 0 10px !important;
	border: 1px solid var(--tcl-borde) !important; border-radius: 10px !important;
	background: rgba(255, 255, 255, .04) !important; color: var(--tcl-texto) !important; font-size: 14px;
}
.tcl .tcl-horario-zona select option, .tcl .tcl-horario-campo select option { background: #1d1d1d; }
@media (max-width: 560px) {
	.tcl-horario-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.tcl-horario-canal { grid-column: 1 / -1; }
}

/* Guardado al momento de Notificaciones: aviso pequeño que sigue a la vista. */
.tcl-autoguardado {
	position: fixed; z-index: 50; left: 50%; bottom: 20px; transform: translateX(-50%);
	max-width: calc(100vw - 32px); margin: 0; padding: 9px 16px; border-radius: 999px;
	border: 1px solid rgba(62, 207, 142, .45); background: #142a20; color: #a8f0cf;
	font-size: 13.5px; line-height: 1.4; box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.tcl-autoguardado.is-error { border-color: rgba(255, 90, 90, .45); background: #2d1616; color: #ffb3b3; border-radius: 12px; }
.tcl-autoguardado.is-guardando { border-color: var(--tcl-borde); background: #1d1d1d; color: var(--tcl-apagado); }

/* «Donde vives»: buscador de zonas (usa la lista del buscador de país). */
.tcl-buscazona { position: relative; }
.tcl .tcl-buscazona-input {
	width: 100%; height: 40px; margin: 0; padding: 0 12px !important;
	border: 1px solid var(--tcl-borde) !important; border-radius: 10px !important;
	background: rgba(255, 255, 255, .04) !important; color: var(--tcl-texto) !important; font-size: 16px;
}
.tcl .tcl-buscazona-input:focus { border-color: var(--tcl-acento) !important; outline: none; }
.tcl-buscazona-lista {
	position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; padding: 6px !important;
	border: 1px solid var(--tcl-borde); border-radius: 12px; background: #1d1d1d; box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}

/* «Todos los avisos»: separado de la lista y con el canal a medias punteado. */
.tcl-notif-todos { margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--tcl-borde); }
.tcl-notif-todos .tcl-notif-etiqueta { font-weight: 700; color: var(--tcl-texto); }
.tcl-opcion.is-parcial span { border-style: dashed; border-color: rgba(255, 90, 25, .6); }

/* Recomienda y gana: el botón de compartir (sin el enlace a la vista: JC). */
.tcl-recomendar { display: flex; justify-content: center; margin-top: 14px; }

/* Renombrar una cuenta adicional (05/10/2026): lápiz en su tarjeta del
   selector y un <dialog> para escribir el nombre. */
.tcl-cuenta-caja { position: relative; display: flex; min-width: 0; }
.tcl-cuenta-caja > .tcl-cuenta-opcion { flex: 1; min-width: 0; padding-right: 46px; }
.tcl .tcl-cuenta-renombrar {
	position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0 !important;
	border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, .06) !important; background-image: none !important;
	color: var(--tcl-apagado) !important; font-size: 13px; cursor: pointer; box-shadow: none !important;
}
.tcl .tcl-cuenta-renombrar:hover, .tcl .tcl-cuenta-renombrar:focus-visible { background: rgba(255, 90, 25, .18) !important; color: var(--tcl-acento) !important; }
.tcl-dialogo {
	width: min(420px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--tcl-borde); border-radius: 18px;
	background: var(--tcl-tarjeta, #1b1b1b); color: var(--tcl-texto);
}
.tcl-dialogo::backdrop { background: rgba(0, 0, 0, .6); }
.tcl .tcl-dialogo-campo {
	width: 100%; height: 44px; margin: 0; padding: 0 12px !important;
	border: 1px solid var(--tcl-borde) !important; border-radius: 10px !important;
	background: rgba(255, 255, 255, .04) !important; color: var(--tcl-texto) !important; font-size: 16px;
}
.tcl-dialogo-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
/* El nombre de una adicional puede ocupar dos líneas en vez de cortarse
   («Web 05…»): con el lápiz al lado, en el celular no cabía. */
.tcl-cuenta-caja .tcl-cuenta-opcion-textos strong { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* En el celular, una cuenta por fila: en dos columnas, con el ícono y el
   lápiz, el nombre de una adicional no cabía. */
@media (max-width: 767px) {
	.tcl .tcl-cuentas { grid-template-columns: minmax(0, 1fr); }
}
/* La cruz para cerrar el cuadro de «Cambiar nombre». */
.tcl-dialogo { position: relative; }
/* Abierto, siempre centrado en la PANTALLA (06/10/2026). Con relative/absolute
   se colocaba respecto al principio de la página: un diálogo abierto desde
   abajo (independizar) salía cortado arriba, fuera de la vista. Fixed también
   sirve de referencia para la cruz, que es absolute. */
.tcl-dialogo[open] { position: fixed; inset: 0; margin: auto; max-height: calc(100dvh - 32px); overflow: auto; }
.tcl .tcl-opcion--confirmar { margin-top: 4px; }

/* Hoja de confirmación (10/10/2026, JC), la arma tucine-clientes.js
   (confirmarConHoja). En la computadora, una ventana centrada; en el celular,
   de pie o acostado, sube desde abajo a todo el ancho, como las hojas de
   acciones del iPhone y Android, con los botones al alcance del pulgar. */
.tcl-hoja { width: min(400px, calc(100vw - 32px)); padding: 26px 22px 22px; text-align: center; }
.tcl-hoja-asa { display: none; }
.tcl-hoja-icono {
	display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 0 14px;
	border-radius: 50%; background: rgba(255, 90, 90, .14); color: var(--tcl-error); font-size: 20px;
}
.tcl .tcl-hoja-titulo { margin: 0 0 8px; color: var(--tcl-texto); font-size: 19px !important; font-weight: 800; line-height: 1.3 !important; overflow-wrap: anywhere; }
.tcl-hoja-texto { margin: 0 0 20px; color: var(--tcl-apagado); font-size: 15px; line-height: 1.5; }
.tcl-hoja-botones { display: flex; flex-direction: column; gap: 8px; }
.tcl .tcl-hoja-botones .tcl-boton { width: 100%; margin: 0; }
.tcl .tcl-hoja-botones .tcl-boton--sec { min-height: 50px; font-size: 16px; }
.tcl .tcl-boton--peligro-lleno { border-color: var(--tcl-error) !important; background: var(--tcl-error) !important; }
.tcl-hoja[open] { animation: tcl-hoja-aparece .18s ease-out; }
.tcl-hoja::backdrop { background: rgba(0, 0, 0, .6); }
@keyframes tcl-hoja-aparece { from { opacity: 0; transform: scale(.96); } }

@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	.tcl-hoja[open] {
		inset: auto 0 0 0; width: 100%; max-width: 560px; margin: 0 auto; max-height: 90dvh;
		padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
		border-width: 1px 1px 0; border-radius: 22px 22px 0 0;
		animation: tcl-hoja-sube .26s cubic-bezier(.2, .8, .2, 1);
	}
	.tcl-hoja-asa { display: block; width: 40px; height: 5px; margin: 0 auto 16px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
	@keyframes tcl-hoja-sube { from { transform: translateY(100%); } }
}
/* Acostado hay poco alto: icono más chico y los dos botones lado a lado. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	.tcl-hoja-icono { width: 40px; height: 40px; margin-bottom: 8px; font-size: 16px; }
	.tcl-hoja-texto { margin-bottom: 14px; }
	.tcl-hoja-botones { flex-direction: row-reverse; }
}
@media (prefers-reduced-motion: reduce) {
	.tcl-hoja[open] { animation: none; }
}
.tcl .tcl-dialogo-cruz {
	position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
	background: rgba(255, 255, 255, .06) !important; background-image: none !important; box-shadow: none !important;
	color: var(--tcl-apagado) !important; font-size: 15px; cursor: pointer;
}
.tcl .tcl-dialogo-cruz:hover, .tcl .tcl-dialogo-cruz:focus-visible { background: rgba(255, 255, 255, .12) !important; color: var(--tcl-texto) !important; }

/* Dos barras (05/10/2026), una debajo de la otra desde el 10/10/2026: la de
   la cuenta arriba y la general debajo. Un hueco corto entre las dos, que se
   lean como barras distintas, y el de siempre antes del saludo. */
.tcl .tcl-pestanas--cuenta { margin: 0 0 10px; }
.tcl .tcl-pestanas--generales { margin: 0 0 18px; }

/* Celular (10/10/2026, JC: «mucho espacio entre las pestañas y la barra
   negra»). Los 150 px de arriba están pensados para la cabecera de
   escritorio; en el celular dejaban unos 50 px vacíos bajo la cabecera y
   ahora quedan la mitad. Acostado, la cabecera mide 48 px (mu-plugin
   tucine-cabecera) y el hueco era el mismo. De pie, JC lo pidió a la mitad
   otra vez: de «Inicio» a la primera barra quedan 23 px. */
@media (max-width: 767px) {
	.tcl { padding-top: 101px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	.tcl { padding-top: 127px; }
}

/* Escritorio (10/10/2026, JC: «la barra de Cuenta se funde con el menú de
   arriba»). La sección de la cabecera de Elementor trae un margen inferior
   NEGATIVO del 7 % del ancho (pensado para que la foto de la portada suba
   por debajo de la cabecera), y su copia que ocupa el sitio mientras la
   cabecera va fija lo hereda. Con 150 px fijos aquí, el hueco bajo la
   cabecera iba de 60 px en 1280 a 16 en 1920. En el portal se le quita ese
   margen y el hueco queda en 40 px a cualquier ancho, el mismo que el título
   de las demás páginas (mu-plugin tucine-cabecera). Solo desde 1025 px,
   donde Elementor deja de ser «tableta»: en tableta y celular el hueco ya
   está medido con el margen de esos tamaños. */
@media (min-width: 1025px) {
	body:has(.tcl) .elementor-location-header > .elementor-sticky__spacer,
	body:has(.tcl) .elementor-location-header > .elementor-section:not(.elementor-sticky--active) { margin-bottom: 0 !important; }
	.tcl { padding-top: 40px; }
	body.admin-bar .tcl { padding-top: 40px; }
}

/* «Contratar cuenta adicional» completo, sin «…» (JC, 05/10/2026): puede bajar
   a una segunda línea en vez de cortarse. */
.tcl-cuenta-opcion--nueva .tcl-cuenta-opcion-textos strong { white-space: normal; overflow: visible; text-overflow: clip; }

/* Pestaña Cuenta en dos columnas (06/10/2026). En el celular se deshacen y
   «Recomienda y gana» baja al final, después de los datos de acceso. */
@media (max-width: 767px) {
	.tcl-rejilla--cuenta > .tcl-columna { display: contents; }
	.tcl-rejilla--cuenta .tcl-tarjeta--recomendar { order: 5; }
	.tcl-rejilla--cuenta .tcl-servidor { order: 6; }
}

/* Renovación ya pagada que empieza cuando termina la actual (06/10/2026). */
.tcl .tcl-plan-programada { display: flex; gap: 10px; align-items: baseline; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(46, 204, 113, .1); color: var(--tcl-texto); font-size: 14px; line-height: 1.5; }
.tcl .tcl-plan-programada i { color: #2ecc71; }

/* Notificación flotante al guardar sin recargar (10/10/2026, JC). Va en
   <body>, fuera de .tcl: lleva sus propios colores. El script le pone `top`
   justo debajo de la cabecera fija. */
.tcl-notificacion {
	position: fixed; left: 50%; z-index: 100000; display: flex; align-items: flex-start; gap: 10px;
	width: max-content; max-width: min(440px, calc(100vw - 24px)); padding: 12px 16px;
	border: 1px solid rgba(62, 207, 142, .45); border-radius: 14px; background: #1d1d1d; color: #fff;
	font-size: 15px; font-weight: 600; line-height: 1.4; box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
	cursor: pointer; opacity: 0; pointer-events: none; transform: translate(-50%, -12px);
	transition: opacity .2s ease, transform .2s ease;
}
.tcl-notificacion.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.tcl-notificacion i { flex-shrink: 0; margin-top: 2px; color: #3ecf8e; font-size: 17px; }
.tcl-notificacion.is-error { border-color: rgba(255, 90, 90, .5); }
.tcl-notificacion.is-error i { color: #ff5a5a; }
@media (prefers-reduced-motion: reduce) {
	.tcl-notificacion { transition: none; }
}

/* Visor de imágenes de los tutoriales (10/10/2026, JC). Vive en <body>,
   fuera de .tcl: lleva sus propios colores. El zoom lo hace el script
   (transform en la imagen); touch-action: none para que el iPhone no
   agrande la página entera. En la vista normal, la foto avisa con la lupa
   de que se puede ampliar. */
.tcl-tut-carrusel:not(.is-completa) .tcl-tut-imagen { cursor: zoom-in; }
/* El visor: texto del paso arriba, la foto en el resto y abajo flechas con
   «Paso 2 de 5» (13/10/2026). Vive en <body>, fuera de .tcl: no hereda sus
   variables y lleva los colores escritos. */
.tcl-visor { position: fixed; inset: 0; z-index: 100002; display: flex; flex-direction: column; overflow: hidden; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); background: #000; touch-action: none; overscroll-behavior: contain; }
.tcl-visor[hidden] { display: none; }
.tcl-visor-zona { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tcl-visor-img { display: block; max-width: 100%; max-height: 100%; margin: 0; object-fit: contain; transform-origin: center; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; cursor: zoom-in; }
.tcl-visor.is-sin-foto .tcl-visor-zona { display: none; }
.tcl-visor-texto { flex: 0 1 auto; display: flex; gap: 12px; max-height: 38%; overflow-y: auto; padding: 14px 112px 12px 16px; color: #e6e6e6; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; touch-action: pan-y; }
.tcl-visor-texto[hidden] { display: none; }
.tcl-visor.is-sin-foto .tcl-visor-texto { flex: 1; max-height: none; }
.tcl-visor-texto .tcl-tut-numero { width: 30px; height: 30px; font-size: 14px; background: #ff5a19; }
.tcl-visor-texto .tcl-tut-paso-cuerpo h3 { margin: 3px 0 6px; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.3; }
.tcl-visor-texto .tcl-tut-contenido { color: #d4d4d4; font-size: 14px; line-height: 1.5; }
.tcl-visor-texto .tcl-tut-contenido p { margin: 0 0 6px; }
.tcl-visor-texto .tcl-tut-contenido a { color: #ff5a19 !important; }
.tcl-visor-texto .tcl-tut-contenido img { display: none; }
.tcl-visor-control { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 16px 10px; }
.tcl-visor-control[hidden] { display: none; }
.tcl-visor-flecha { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .25) !important; border-radius: 50% !important; background: rgba(20, 20, 20, .8) !important; color: #fff !important; cursor: pointer; }
.tcl-visor-flecha:disabled { opacity: .3; cursor: default; }
/* Los puntitos, copiados del carrusel. El visor vive fuera de .tcl: aquí
   van sus reglas con los colores escritos. */
.tcl-visor-puntos { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; min-width: 92px; }
.tcl-visor .tcl-tut-punto { position: relative; width: 24px; height: 24px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 50%; background: transparent !important; cursor: pointer; }
.tcl-visor .tcl-tut-punto::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .4); transform: translate(-50%, -50%); transition: width .25s ease, background-color .25s ease; }
.tcl-visor .tcl-tut-punto.is-activo::after { width: 22px; background: #ff5a19; }
.tcl-visor .tcl-tut-punto.is-fuera { display: none; }
.tcl-visor .tcl-tut-punto.is-medio::after { width: 6px; height: 6px; }
.tcl-visor .tcl-tut-punto.is-chico::after { width: 4px; height: 4px; }
/* Celular en horizontal: la foto a toda la pantalla y el texto en franja
   abajo, encima de ella, como en pantalla completa. */
@media (orientation: landscape) and (max-height: 600px) {
	.tcl-visor:not(.is-sin-foto) .tcl-visor-texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; max-height: 40%; padding: 8px 16px 52px; background: rgba(0, 0, 0, .68); }
	/* La pista se encimaría con las flechas: con tan poco alto sobra. */
	.tcl-visor:not(.is-sin-foto) .tcl-visor-pista { display: none; }
	.tcl-visor:not(.is-sin-foto) .tcl-visor-control { position: absolute; left: 0; right: 0; bottom: max(2px, env(safe-area-inset-bottom)); z-index: 2; padding: 4px; }
}
.tcl-visor.is-ampliada .tcl-visor-img { cursor: grab; }
.tcl-visor-cerrar { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .25) !important; border-radius: 50% !important; background: rgba(20, 20, 20, .8) !important; color: #fff !important; cursor: pointer; }
.tcl-visor-completa { right: 60px; }
.tcl-visor-completa[hidden] { display: none; }
.tcl-visor-pista { position: absolute; left: 50%; bottom: 12px; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(20, 20, 20, .8); color: #e6e6e6; font: 600 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; white-space: nowrap; transform: translateX(-50%); pointer-events: none; transition: opacity .3s ease; }
.tcl-visor.is-ampliada .tcl-visor-pista, .tcl-visor.is-sin-pista .tcl-visor-pista { opacity: 0; }

/* Tutoriales por tema y por sus equipos (10/10/2026, JC). Una tarjeta por
   tema, todas del mismo alto (la rejilla estira y los equipos van abajo). */
.tcl-tut-mis-equipos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.tcl-tut-mis-acciones { display: inline-flex; flex-wrap: wrap; gap: 14px; margin-left: auto; font-size: 14px; }
.tcl .tcl-tut-mis-acciones a { color: var(--tcl-acento) !important; font-weight: 600; text-decoration: none !important; }
.tcl-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: stretch; }
.tcl .tcl-tema { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 16px; border: 1px solid var(--tcl-borde); border-radius: 16px; background: var(--tcl-tarjeta); color: var(--tcl-texto) !important; text-decoration: none !important; transition: border-color .15s ease, background-color .15s ease; }
.tcl .tcl-tema:hover { border-color: var(--tcl-acento); background: rgba(255, 90, 25, .05); }
.tcl-tema-cabeza { display: flex; align-items: center; gap: 12px; }
.tcl-tema-cabeza strong { flex: 1; min-width: 0; font-size: 16px; line-height: 1.3; }
.tcl-tema-texto { color: var(--tcl-apagado); font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcl-tema-equipos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tcl-tema-equipo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--tcl-borde); border-radius: 999px; color: var(--tcl-apagado); font-size: 12px; font-weight: 600; }
.tcl-tema-equipo.is-mio { border-color: rgba(255, 90, 25, .55); color: #ffb08f; }
.tcl-tut-equipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0 0 16px; }
.tcl-tut-equipo { position: relative; display: block; cursor: pointer; }
.tcl-tut-equipo input { position: absolute; opacity: 0; pointer-events: none; }
.tcl-tut-equipo span { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--tcl-borde); border-radius: 12px; background: rgba(255, 255, 255, .02); font-size: 14px; font-weight: 600; transition: border-color .15s ease, background-color .15s ease; }
.tcl-tut-equipo span i { width: 18px; color: var(--tcl-apagado); text-align: center; }
.tcl-tut-equipo span img { max-width: 22px; max-height: 22px; }
.tcl-tut-equipo input:checked + span { border-color: var(--tcl-acento); background: rgba(255, 90, 25, .1); }
.tcl-tut-equipo input:checked + span i { color: var(--tcl-acento); }
.tcl-tut-equipo input:focus-visible + span { outline: 2px solid var(--tcl-acento); outline-offset: 2px; }
.tcl-tut-equipos-pie { margin: 12px 0 0; color: var(--tcl-apagado); font-size: 14px; text-align: center; }
.tcl .tcl-tut-equipos-pie a { color: var(--tcl-acento) !important; font-weight: 600; text-decoration: none !important; }
.tcl .tcl-tut-ver-para .tcl-chip--enlace.is-mio:not(.is-activo) { border-color: rgba(255, 90, 25, .45); }

/* «Compartir» del tutorial, al final de la fila del tema y el equipo. */
.tcl .tcl-tut-compartir { margin-left: auto; font-family: inherit; cursor: pointer; background: transparent !important; }
.tcl .tcl-tut-compartir i { color: var(--tcl-acento); }

/* Ajustes sin columna izquierda (adicional solo TV, 11/10/2026): la columna
   vacía se quita y las tarjetas de la derecha se reparten en la rejilla de
   dos columnas (en el celular siguen una debajo de otra). */
.tcl-rejilla--ajustes.is-sin-izquierda > .tcl-columna:first-child { display: none; }
.tcl-rejilla--ajustes.is-sin-izquierda > .tcl-columna:last-child { display: contents; }

/* El plan de cada cuenta en el selector, entre el nombre y los días. */
.tcl-cuenta-opcion-plan { display: block; color: var(--tcl-texto); font-size: 12.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; opacity: .85; }

/* Eliminar una cuenta adicional: el bote, debajo del lápiz (11/10/2026). */
.tcl .tcl-cuenta-eliminar {
	position: absolute; top: calc(50% + 18px); right: 8px; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0 !important;
	border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, .06) !important; background-image: none !important;
	color: var(--tcl-apagado) !important; font-size: 13px; cursor: pointer; box-shadow: none !important;
}
.tcl .tcl-cuenta-eliminar:hover, .tcl .tcl-cuenta-eliminar:focus-visible { background: rgba(255, 90, 90, .18) !important; color: var(--tcl-error) !important; }
.tcl-hoja-puntos { margin: -8px 0 18px; padding: 0 0 0 18px; color: var(--tcl-apagado); font-size: 14px; line-height: 1.5; text-align: left; }
.tcl-hoja-puntos li { margin: 0 0 6px; }
.tcl-hoja-puntos[hidden] { display: none; }

/* «Miembro desde» al final de Ajustes de la cuenta principal (11/10/2026). */
.tcl-miembro-desde { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 0; color: var(--tcl-apagado); font-size: 14px; font-weight: 600; }
.tcl-miembro-desde i { color: var(--tcl-acento); }

/* Botones de cada cuenta del selector, en columna (11/10/2026): ⚡ Mejorar,
   lápiz y papelera. Antes cada uno se colocaba suelto con top fijo; con un
   tercero hacía falta apilarlos de verdad. */
.tcl .tcl-cuenta-acciones {
	position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
	display: flex; flex-direction: column; gap: 4px;
}
.tcl .tcl-cuenta-acciones .tcl-cuenta-renombrar,
.tcl .tcl-cuenta-acciones .tcl-cuenta-eliminar { position: static; transform: none; }
.tcl .tcl-cuenta-caja.con-acciones-2 > .tcl-cuenta-opcion { min-height: 84px; }
.tcl .tcl-cuenta-caja.con-acciones-3 > .tcl-cuenta-opcion { min-height: 118px; }
.tcl .tcl-cuenta-mejorar {
	display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
	border-radius: 50%; background: rgba(255, 193, 7, .14); color: #ffc107 !important; font-size: 13px; text-decoration: none !important;
}
.tcl .tcl-cuenta-mejorar:hover, .tcl .tcl-cuenta-mejorar:focus-visible { background: rgba(255, 193, 7, .28); }
.tcl-botones-plan { display: flex; flex-wrap: wrap; gap: 10px; }
.tcl .tcl-boton--mejorar i { color: #ffc107; }

/* «Mejorar mi plan» igual de grande que «Renovar o cambiar de plan» (mismo
   ancho, alto y letra), con su fondo oscuro y borde (11/10/2026, JC). */
.tcl .tcl-botones-plan .tcl-boton--mejorar { width: 100%; min-height: 50px; font-size: 16px; font-weight: 800; }

/* Casilla de confirmación visible (11/10/2026, JC: en «Cambiarla a cuenta
   independiente» la píldora de .tcl-opcion escondía la casilla y no se
   entendía que había que marcarla). */
.tcl .tcl-casilla { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 2px; cursor: pointer; font-size: 14px; line-height: 1.45; }
.tcl .tcl-casilla input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tcl-acento); cursor: pointer; }
.tcl .tcl-aviso a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ── Reportes de problemas en el contenido (11/10/2026, JC) ───────────────
   El buscador con su lista desplegable, el título elegido, la parte de la
   serie y los problemas. La lista de reportes usa las piezas de Peticiones
   (.tcl-pet-*). */
.tcl .tcl-rep-busqueda { position: relative; }
.tcl .tcl-rep-resultados {
	position: absolute; z-index: 20; top: calc(100% - 18px); left: 0; right: 0; max-height: 320px; margin: 0; padding: 6px;
	overflow-y: auto; list-style: none; border: 1px solid var(--tcl-borde); border-radius: 14px;
	background: var(--tcl-tarjeta, #1b1b1b); box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
}
.tcl .tcl-rep-resultados li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.tcl .tcl-rep-resultados li:hover, .tcl .tcl-rep-resultados li.is-activo { background: rgba(255, 90, 25, .12); }
.tcl .tcl-rep-resultados li > i { flex: none; width: 18px; color: var(--tcl-acento); text-align: center; }
.tcl .tcl-rep-resultados li span, .tcl .tcl-rep-elegido > span { display: flex; flex-direction: column; min-width: 0; }
.tcl .tcl-rep-resultados strong, .tcl .tcl-rep-elegido strong { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.tcl .tcl-rep-resultados small, .tcl .tcl-rep-elegido small { color: var(--tcl-apagado); font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.tcl .tcl-rep-resultados .tcl-rep-sin { cursor: default; color: var(--tcl-apagado); font-size: 14px; }
.tcl .tcl-rep-resultados .tcl-rep-sin:hover { background: none; }
.tcl .tcl-rep-elegido {
	display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--tcl-acento);
	border-radius: 14px; background: rgba(255, 90, 25, .07);
}
.tcl .tcl-rep-elegido > i { flex: none; color: var(--tcl-acento); font-size: 18px; }
.tcl .tcl-rep-elegido > span { flex: 1; }
.tcl .tcl-rep-elegido .tcl-boton { flex: none; margin: 0; }
.tcl .tcl-rep-serie, .tcl .tcl-rep-problemas { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.tcl .tcl-rep-serie[hidden], .tcl .tcl-rep-problemas[hidden], .tcl .tcl-rep-par[hidden], .tcl [data-tcl-rep-mensaje][hidden], .tcl [data-tcl-rep-caja][hidden], .tcl .tcl-casilla[hidden] { display: none; }
.tcl .tcl-rep-serie legend, .tcl .tcl-rep-problemas legend { margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 700; }
.tcl .tcl-rep-alcances { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 14px; }
.tcl .tcl-rep-numeros { display: flex; flex-direction: column; gap: 10px; }
.tcl .tcl-rep-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tcl .tcl-rep-par .tcl-campo { margin: 0; }
.tcl .tcl-rep-par-titulo { grid-column: 1 / -1; color: var(--tcl-apagado); font-size: 13px; font-weight: 700; }
.tcl .tcl-rep-par-titulo[hidden] { display: none; }
.tcl .tcl-rep-par .tcl-campo[hidden] { display: none; }
.tcl .tcl-rep-hilo { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.tcl .tcl-rep-burbuja { margin: 0; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.tcl .tcl-rep-texto { display: block; white-space: pre-line; }
.tcl .tcl-rep-burbuja.is-equipo { border-left: 3px solid var(--tcl-acento); }
.tcl .tcl-rep-burbuja small { display: block; margin-bottom: 2px; color: var(--tcl-apagado); font-size: 12px; }
.tcl .tcl-rep-responder { margin-top: 10px; }
.tcl .tcl-rep-leidos { margin-top: 14px; }
.tcl .tcl-rep-leidos summary { cursor: pointer; color: var(--tcl-apagado); font-size: 14px; font-weight: 700; }
.tcl .tcl-rep-leidos .tcl-pet-lista { margin-top: 10px; opacity: .85; }
@media (max-width: 480px) {
	.tcl .tcl-rep-elegido { flex-wrap: wrap; }
	.tcl .tcl-rep-elegido .tcl-boton { width: 100%; }
}

/* Con 5 pestañas generales (Reportes, 11/10/2026) los textos se juntaban en
   pantallas angostas (JC): ahí van de 3 en 3, en dos filas. */
@media (max-width: 700px) {
	.tcl .tcl-pestanas--generales[data-tcl-muchas] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tcl .tcl-rep-sueltos { display: flex; flex-direction: column; gap: 8px; }
.tcl .tcl-rep-sueltos[hidden] { display: none; }
.tcl .tcl-rep-temporada { border: 1px solid var(--tcl-borde); border-radius: 12px; padding: 8px 12px; }
.tcl .tcl-rep-temporada summary { cursor: pointer; font-size: 14px; font-weight: 700; }
.tcl .tcl-rep-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px 10px; margin-top: 10px; }
.tcl .tcl-rep-caps .tcl-casilla { margin: 0; align-items: center; }

/* Los enlaces-botón del acceso en UNA línea: la flecha y el texto (11/10/2026,
   JC). La regla .tcl-enlace de arriba (columna) es de otro bloque y los
   partía en dos. */
.tcl button.tcl-enlace { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
/* «¿Olvidaste tu contraseña?»: por correo o por SMS. */
.tcl .tcl-recordar-medios { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tcl .tcl-recordar-medios .tcl-casilla { margin: 0; align-items: center; }
.tcl .tcl-recordar-medios i { width: 16px; color: var(--tcl-acento); }
.tcl [data-tcl-recordar][hidden] { display: none; }

/* Promociones de temporada en «Mis cupones» (11/10/2026). */
.tcl .tcl-promo .tcl-dato-etiqueta i { margin-right: 4px; color: var(--tcl-acento); }
.tcl .tcl-promo.is-usada { opacity: .6; }
/* Miniatura de la portada en el buscador de reportes (11/10/2026). */
.tcl .tcl-rep-mini { flex: none; width: 34px; height: 51px; border-radius: 5px; object-fit: cover; background: rgba(255, 255, 255, .06); }
.tcl .tcl-rep-elegido .tcl-rep-mini { width: 40px; height: 60px; }

/* Campo trampa de «¿Olvidaste tu contraseña?»: fuera de la vista (no
   display:none, que algunos robots saltan). */
.tcl .tcl-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }