/*
 * CSS base de la web logueada de polo-26 (todo lo que extiende web/base.html.twig:
 * login, registro, recuperar contraseña, /subscribe, panel de usuario, on-demand,
 * galería, stage y páginas de error).
 *
 * Sustituye al style-v1.6.css que se servía desde S3 y que compartíamos con el
 * polo viejo: aquel traía ~46 clases muertas (merch, products, articles, la
 * landing antigua, LiveLike, el chat viejo) y un footer en position:absolute con
 * cuatro @media contradictorias que lo hacían pisar el contenido. Aquí solo está
 * lo que usan las plantillas de polo-26, agrupado por componente.
 *
 * Reparto de hojas de estilo:
 *   web.css      → esto: base + componentes comunes
 *   buttons.css  → hover global de botones
 *   on-demand.css, gallery.css, stage.css → una por página, se cargan en su block headers
 */

/* ---------------------------------------------------------------- tokens -- */
:root {
	--blue-color: #0FB7CE;
	--gray-color: #B2B2B2;
	--surface: #2B2B2B;
	--surface-soft: rgba(255, 255, 255, .05);
	--border-soft: rgba(255, 255, 255, .15);
	--danger: firebrick;
	--radius-pill: 30px;
	--navbar-height: 62px;
	--footer-height: 100px;
	/*
	 * Ancho de la tarjeta de suscripción. Debe coincidir con el max-width de
	 * .panel-suscripcion en bundles/app/css/fix-style.css, que es la misma
	 * tarjeta pintada en la landing pública (otra pila de CSS).
	 */
	--card-width: 420px;
}

/* ------------------------------------------------------------------ base -- */
html {
	background: black;
}

html, body {
	margin: 0;
	padding: 0;
	color: white;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
}

h1 {
	font-weight: bold;
	font-style: italic;
	font-size: 48px;
}

img {
	max-width: 100%;
}

label {
	display: block;
}

a {
	text-decoration: none;
	color: white;
}

ul, li {
	list-style: none;
}

/* ---------------------------------------------------------------- layout -- */
/*
 * Sticky footer: el body es una columna flex de al menos un viewport y el footer
 * se empuja al fondo con margin-top:auto. Así queda siempre abajo del todo sin
 * sacarlo del flujo, que era lo que hacía que se solapara con el contenido.
 * El padding-top compensa la navbar, que es fija.
 *
 * CONTRATO: el body usa min-height (no height), así que NO da base a alturas
 * en % de sus hijos. Una página que necesite ocupar el viewport (p. ej. el
 * stage) debe medirse contra 100vh, jamás con height:100% heredado del body.
 * El footer no se posiciona absolute/fixed nunca; en páginas sin footer se
 * oculta con body_class 'no-footer'.
 */
body {
	box-sizing: border-box;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-top: var(--navbar-height);
}

.container {
	width: 1350px;
	max-width: 95%;
	margin: 0 auto;
}

/* ------------------------------------------------------------ utilidades -- */
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-blue   { color: var(--blue-color); }

.display-none { display: none !important; }

.error {
	color: var(--danger);
	font-size: 14px;
	text-transform: lowercase;
}

/* --------------------------------------------------------------- botones -- */
/*
 * Todos los botones comparten forma (píldora, mayúsculas, negrita) y solo
 * cambian de color. Añadir uno nuevo es sumarlo a esta lista y darle su fondo.
 */
.btn-blue,
.btn-red,
.btn-cancel,
.watch {
	display: inline-block;
	border-radius: var(--radius-pill);
	font-family: inherit;
	font-size: 16px;
	font-weight: bold;
	font-style: normal;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}

.btn-blue {
	background: var(--blue-color);
	border: 0;
	color: white;
	padding: 2px 16px;
}

/*
 * Confirmación destructiva. Lo pinta el JS del front-app (FA.desubscribe) al
 * confirmar la baja de una suscripción: no aparece en ninguna plantilla, así que
 * ojo al auditar clases, no es código muerto. En el CSS antiguo era azul, igual
 * que .btn-blue; aquí va en rojo, que es lo que significa.
 */
.btn-red {
	background: var(--danger);
	border: 0;
	color: white;
	padding: 2px 16px;
}

/* Ghost sobre fondo oscuro: usado en las fichas del on-demand. */
.watch {
	background: transparent;
	border: 2px solid white;
	color: white;
	padding: 10px 20px;
	font-size: 14px;
}

.watch-blue {
	background: var(--blue-color);
	border: 0;
}

/* Destructivo: cancelar una suscripción. */
.btn-cancel {
	background: transparent;
	border: 1px solid var(--danger);
	color: #ff7b7b;
	padding: 6px 20px;
	font-size: 13px;
	white-space: nowrap;
}

.btn-cancel:hover {
	background: var(--danger);
	color: #fff;
	filter: none; /* anula el brightness genérico de buttons.css */
}

/* ---------------------------------------------------------------- navbar -- */
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background: black;
	height: var(--navbar-height);
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.navbar ul {
	display: flex;
	margin: 0;
	padding: 0;
}

/* Mismo ancho que .container: en panorámicas el contenido va centrado y la
   navbar no debe irse de punta a punta. Por debajo de 1350px, el 95% deja
   los mismos ~2.5% de margen a cada lado que el contenido. */
.navbar > ul {
	width: 1350px;
	max-width: 95%;
	padding: 0;
}

.navbar li {
	display: flex;
	align-items: center;
}

.navbar .logo  { flex: 20%; }

.navbar .links {
	display: flex;
	flex: 80%;
	justify-content: flex-end;
	align-items: center;
}

.navbar a {
	color: white;
	font-weight: bold;
	font-style: italic;
	margin: 0 10px;
}

.navbar a.active {
	color: var(--blue-color);
}

/* Subrayado que crece de derecha a izquierda, igual que en la landing pública.
   Se excluye el botón azul (SUBSCRIBE / nombre de usuario). */
.navbar .links > ul > li > a:not(.btn-blue) {
	position: relative;
}

.navbar .links > ul > li > a:not(.btn-blue):before {
	content: "";
	width: 0;
	height: 1px;
	background: #fff;
	position: absolute;
	bottom: -4px;
	left: auto;
	right: 0;
	transition: all .3s ease-in-out;
}

.navbar .links > ul > li > a:not(.btn-blue):hover:before {
	width: 100%;
	left: 0;
	right: auto;
}

.navbar .links > ul > li > a.active:before {
	background: var(--blue-color);
	width: 100%;
	left: 0;
	right: auto;
}

.navbar .toggle-nav {
	display: none;
}

/* Selector de idioma desplegable */
.navbar #menu-lang {
	position: absolute;
	margin-top: 115px;
	margin-left: -20px;
	display: flex;
	flex-direction: column;
	padding: 5px 10px;
	background: black;
}

.navbar #menu-lang li      { padding: 5px 0; }
.navbar #menu-lang.inactive { display: none; }

@media all and (max-width: 1000px) {
	.navbar .links {
		position: absolute;
		right: 220px;
	}
	.navbar .inactive {
		display: none !important;
	}
	.navbar .links ul {
		display: inline;
		width: 190px;
		position: absolute;
		top: 48px;
		left: -10px;
		padding: 10px 18px;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
		border-radius: 3px;
		background: black;
		z-index: 100;
	}
	.navbar .links li {
		padding-bottom: 10px;
	}
	.navbar .btn-responsive {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.navbar .toggle-nav {
		display: inline;
		font-size: 35px;
		line-height: 35px;
	}
}

/* ---------------------------------------------------------------- footer -- */
footer {
	background: black;
	min-height: var(--footer-height);
	width: 100%;
	display: flex;
	align-items: center;
	margin-top: auto;   /* pegado al fondo, sin sacarlo del flujo */
	flex-shrink: 0;
}

/* El stage calcula sus alturas a pantalla completa y no lleva footer. */
.no-footer footer {
	display: none;
}

footer nav,
footer nav > ul {
	width: 100%;
	padding: 0 20px;
}

footer nav ul {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

footer nav > ul > li {
	width: 50%;
}

footer nav .links {
	display: flex;
	justify-content: flex-end;
}

footer .links li {
	padding: 0 5px;
}

@media all and (max-width: 525px) {
	footer nav .logo img {
		max-width: 140px;
	}
}

/* ------------------------------------------------- formularios de acceso -- */
/* login, registro, recuperar contraseña */
.box-sign {
	background: var(--surface-soft);
	border: 1px solid var(--border-soft);
	border-radius: 12px;
	margin: 30px auto 50px auto;
	width: 500px;
	max-width: calc(90% - 60px);
	padding: 0 30px;
}

.box-sign h1 {
	padding: 0 0 20px 0;
	text-align: center;
	border-bottom: 1px solid var(--blue-color);
}

.box-sign label {
	text-transform: uppercase;
	margin-bottom: 5px;
}

.box-sign input[type="email"],
.box-sign input[type="password"],
.box-sign input[type="text"] {
	color: white;
	width: calc(100% - 20px);
	padding: 10px;
	border: 0;
	background: var(--surface);
	border-radius: var(--radius-pill);
	margin-bottom: 25px;
}

.box-sign input[type="submit"] {
	margin: 25px 0 40px 0;
}

.box-sign .row {
	display: flex;
}

.box-sign .row > div                { width: 47%; }
.box-sign .row > div:nth-child(1)   { margin-right: 3%; }
.box-sign .row > div:nth-child(2)   { margin-left: 3%; }

.box-sign .captcha {
	width: 305px;
	margin: 0 auto;
}

.box-sign a {
	color: var(--blue-color);
}

/* "¿No tienes cuenta?" a la izquierda y el botón de entrar a la derecha. */
.box-sign .login-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	flex-wrap: wrap;
}

@media all and (max-width: 525px) {
	.box-sign .row {
		flex-direction: column;
	}
	.box-sign .row > div {
		width: 100%;
		margin: 0 !important;
	}
	.box-sign .captcha {
		position: absolute;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
	.box-sign input[type="submit"] {
		margin: 105px 0 40px 0;
	}
}

/* --------------------------------------------------------- suscripciones -- */
/* Cabecera de /subscribe y del panel de usuario */
.subscription header {
	background: rgba(255, 255, 255, .1);
	background-image: url('https://cdn.live.aapolo.com/public/images/background.png');
	padding: 20px 0;
}

.subscription h1 {
	text-align: center;
	text-transform: uppercase;
}

.subscription h2 {
	font-size: 24px;
}

.subscription-title h2 {
	font-size: 36px;
}

.you-are-subscribed {
	padding: 100px 0;
}

.my-subscription {
	display: flex;
	align-items: center;
}

.my-subscription > div                { flex: 50%; }
.my-subscription > div:nth-child(2)   { text-align: right; }

/* Tarjetas de plan */
.landing .row {
	display: flex;
}

.landing .subscriptions {
	margin: 100px 0;
}

.landing .subscriptions .row {
	justify-content: center;
	flex-wrap: wrap;
}

.landing .subscriptions .row > div {
	width: var(--card-width);
	max-width: 100%;
	display: flex;
	flex-direction: column;
	margin: 10px;
	border: 1px solid black;
}

.landing .subscriptions .row > div > div:nth-child(2) {
	background: black;
	padding-bottom: 50px;
	height: 100%;
	/* Descripción y precio arriba; código + botón siempre al fondo (margin-top:auto en el form) */
	display: flex;
	flex-direction: column;
}

.landing .subscriptions .row > div > div:nth-child(2) form {
	margin-top: auto;
}

.landing .subscriptions h4 {
	font-size: 24px;
	margin: 30px 0;
	line-height: 36px;
}

.landing .subscriptions .description { font-size: 20px; }
.landing .subscriptions .price       { font-size: 48px; }
.landing .subscriptions .price small { font-size: 24px; }

/* Código de descuento dentro de la tarjeta (opcional, se valida al suscribirse) */
.landing .subscriptions .coupon-field {
	margin: 0 auto 18px;
	max-width: 260px;
	text-align: left;
}
.landing .subscriptions .coupon-field label {
	display: block;
	font-size: 14px;
	margin-bottom: 6px;
	opacity: .85;
}
.landing .subscriptions .coupon-field input {
	width: 100%;
	padding: 10px 12px;
	font-size: 16px;
	text-transform: uppercase;
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 4px;
	outline: none;
}
.landing .subscriptions .coupon-field input:focus {
	border-color: #fff;
}
.landing .subscriptions .coupon-field input.has-error {
	border-color: #ff5252;
}
.landing .subscriptions .coupon-field .coupon-error {
	margin: 6px 0 0;
	font-size: 14px;
	color: #ff5252;
}

/* En escritorio las tarjetas se alinean con los títulos, no centradas. */
@media all and (min-width: 1151px) {
	.landing .subscriptions .row {
		justify-content: flex-start;
		margin-left: -10px; /* compensa el margin:10px de las tarjetas */
	}
}

/*
 * En móvil la tarjeta ocupa todo el ancho disponible. Los márgenes laterales los
 * pone el .container (max-width:95%), así que aquí el margen horizontal se quita
 * para que no toque los bordes ni desborde.
 */
@media all and (max-width: 900px) {
	.landing .subscriptions .row {
		justify-content: center;
	}
	.landing .subscriptions .row > div {
		width: 100%;
		margin: 10px 0;
	}
}

/* Suscripciones activas: una fila-tarjeta por suscripción con su botón de baja */
.active-subscriptions ul {
	margin: 0;
	padding: 0;
}

.active-subscriptions li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 22px;
	margin-bottom: 12px;
	background: var(--surface-soft);
	border: 1px solid var(--border-soft);
	border-radius: 12px;
}

.active-subscriptions .info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.active-subscriptions .name {
	display: block;
	font-weight: bold;
	font-size: 18px;
}

.active-subscriptions .meta {
	color: var(--gray-color);
	font-size: 14px;
}

/* ------------------------------------------------------------- calendario -- */
/* Partidos del panel de usuario y del on-demand (mismas tarjetas de evento). */
.calendar {
	display: flex;
	flex-wrap: wrap;
}

.calendar .event {
	width: 23%;
	margin: 10px;
}

.landing .event .event-top {
	font-size: 24px;
	font-weight: bolder;
	font-style: italic;
	border-bottom: 1px solid var(--blue-color);
	text-align: center;
	background-image: url('https://cdn.live.aapolo.com/public/images/background-event.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.landing .event .event-top > div:nth-child(1) {
	width: 40px;
	margin-left: 20px;
}

.landing .event .event-top > div:nth-child(2) {
	padding-bottom: 30px;
}

.landing .event .day {
	background: var(--blue-color);
	padding: 10px 0;
	font-size: 16px;
	font-weight: bold;
}

.landing .event .month {
	padding: 5px 0;
	background: black;
	font-size: 12px;
}

.landing .event .event-bottom {
	display: flex;
	font-size: 20px;
	font-weight: bold;
	background: var(--surface);
	padding: 10px 0;
}

.landing .event .event-bottom > div:nth-child(1) {
	flex: 60%;
	text-align: center;
}

.landing .event .event-bottom > div:nth-child(2) {
	flex: 40%;
	cursor: pointer;
}

.calendar .event .event-bottom {
	font-size: 16px;
}

.calendar .event-bottom > div:nth-child(2) {
	text-align: right;
	padding-right: 10px;
}

@media all and (max-width: 1050px) {
	.calendar {
		justify-content: center;
	}
	.calendar .event {
		min-width: 300px;
	}
}

/* ------------------------------------------------------------------ alert -- */
/* Popup de FA.alert (front-app de S3) y del estado del pago. */
#alert {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, .8);
	z-index: 1100;
}

#alert .alert {
	padding: 10px 20px;
	border: 1px solid var(--blue-color);
	position: absolute;
	width: 500px;
	max-width: 80%;
	left: 0;
	right: 0;
	top: 150px;
	margin-left: auto;
	margin-right: auto;
	background: black;
	color: #fff;
}

#alert h1 {
	text-transform: uppercase;
}