/* ======================================================
EstrenoLatinoHD Theme
Variante "Blockbuster": mismo fondo oscuro #060606 y tarjetas
#1a1a1a, pero acento azul #3579F7 (en vez de rojo) y un amarillo
tenue solo para el detalle VIP, evocando el azul/amarillo de
Blockbuster sin saturar la pantalla de color para no cansar la
vista. Este archivo SOLO reestiliza vía plugin: no toca el core.
====================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");
:root {
/* Identidad EstrenoLatinoHD */
--elhd-bg: #060606;
--elhd-bg-raised: #0d0d0d;
--elhd-card: #1a1a1a;
--elhd-card-hover: #232323;
--elhd-border: #2a2a2a;
--elhd-border-soft: #1f1f1f;
--elhd-red: #3579f7;
--elhd-red-dark: #2c67d2;
--elhd-red-soft: rgba(53, 121, 247, 0.16);
--elhd-green: #ffc72c;
--elhd-green-soft: rgba(255, 199, 44, 0.16);
--elhd-text: #f5f5f5;
--elhd-text-muted: #b8b0b0;
--elhd-text-faint: #8a8282;
/* Remapeo de las variables del core: todo el sitio hereda
el tema oscuro sin tocar static/css/style.css */
--anchor-text-color: var(--elhd-text);
--border-color: var(--elhd-border);
--border-left: var(--elhd-border);
--border-right: var(--elhd-border-soft);
--box-bg: var(--elhd-card);
--light-border: var(--elhd-border);
--hover: rgba(53, 121, 247, 0.1);
--main-background: var(--elhd-bg);
--main-color-dark: var(--elhd-red-dark);
--main-color-lighten: #5b93ff;
--main-color: var(--elhd-red);
--secondary-color-hover: var(--elhd-card-hover);
--secondary-color: var(--elhd-card);
--secondary-gradient: #111111;
--supress-text-color: var(--elhd-text-faint);
--text-color: var(--elhd-text-muted);
--text-shadow: #000;
--white-color-hover: rgba(53, 121, 247, 0.14);
--white-color: var(--elhd-text);
}
body,
a {
font-family: "Poppins", "Roboto", sans-serif;
}
/* El fondo va en (no en body): html siempre abarca el alto
total real del documento, mientras que body a veces no lo cubre
bien cuando crece con el contenido, dejando partes sin imagen al
hacer scroll en páginas largas. */
html {
height: 100%;
background:
linear-gradient(180deg, rgba(6, 6, 6, 0.55) 0%, rgba(6, 6, 6, 0.7) 100%),
url("https://wallpaperaccess.com/full/413663.jpg") center / cover fixed no-repeat;
background-color: var(--elhd-bg);
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
background: transparent;
}
/* background-attachment:fixed se porta mal en navegadores móviles: la
imagen se recalcula contra el viewport cada vez que éste cambia de
tamaño (al esconderse/mostrarse la barra de direcciones durante el
scroll, o al abrirse el teclado en un formulario), dando un efecto
de "crecer/estirarse". Con scroll normal (en vez de fixed) el fondo
queda pintado sobre el documento y no depende de ese recálculo. */
@media (max-width: 768px), (pointer: coarse) {
html {
background-attachment: scroll;
}
}
/* El footer flotaba donde terminara el contenido de cada página en
vez de quedarse siempre abajo. Con .content como columna flex que
ocupa todo el alto y margin-top:auto en el footer, éste se ancla
al fondo de la pantalla aunque haya poco contenido arriba. */
.content {
flex: 1;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
/* Selección de texto y foco, con la marca */
::selection {
background: var(--elhd-red);
color: #fff;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
outline: 2px solid var(--elhd-red);
outline-offset: 2px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: none;
}
input:not([type="radio"]):focus,
textarea:focus,
select:focus {
border-color: var(--elhd-text-faint);
}
/* Scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--elhd-bg);
}
::-webkit-scrollbar-thumb {
background: #2a2a2a;
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--elhd-red-dark);
}
/* ======================================================
Tipografía general
====================================================== */
h1,
h2,
h3 {
color: var(--elhd-text);
font-weight: 700;
letter-spacing: -0.01em;
}
/* ======================================================
Header
====================================================== */
.head-bg {
background: linear-gradient(180deg, #0d0d0d 0%, #060606 100%) !important;
border-bottom: 1px solid var(--elhd-border);
}
.brand-container .title {
font-weight: 800;
letter-spacing: -0.02em;
text-shadow: none;
}
.brand-container .description {
color: var(--elhd-text-faint);
text-shadow: none;
}
nav,
button,
.btn {
background: var(--elhd-card);
border: 1px solid var(--elhd-border);
border-radius: 8px;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
nav {
background: rgba(26, 26, 26, 0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: none;
border-radius: 12px;
overflow: hidden;
}
/* El core deja un vacío sin usar entre el contenido y el footer.
Como el nav real del menú siempre tiene
, :empty solo apaga ese. */
nav:empty {
display: none;
}
nav li {
border-left: 1px solid var(--elhd-border-soft);
border-right: none;
transition: background 0.18s ease;
}
nav li:hover {
background: none;
}
nav li a {
text-shadow: none;
font-weight: 500;
}
/* El core arma el
del nav con CSS Grid a lo ancho de su
contenido; se cambia a flex solo para poder empujar el badge de
sesión al extremo derecho con margin-left:auto. */
nav ul {
display: flex;
flex-wrap: wrap;
}
nav li.session-badge {
color: var(--elhd-text-faint);
font-weight: 500;
font-size: 0.85em;
cursor: default;
border-left: none;
/* flex:1 + text-align:center en vez de margin:auto: con
flex-wrap:wrap, el margin:auto en ambos lados hacía que Chrome
mandara cada
a su propio renglón (bug de esa combinación),
dejando "Mi cuenta"/"Salir" recortados por el overflow:hidden
del nav. flex:1 solo hace crecer este item para ocupar el
espacio libre, sin tocar el line-breaking de los demás. */
flex: 1;
text-align: center;
}
nav li.session-badge:hover {
background: transparent;
}
/* En móvil solo se ve el nombre de usuario; el prefijo "Sesión
iniciada como" completo se reserva para escritorio. */
.session-label {
display: none;
}
@media (min-width: 769px) {
.session-label {
display: inline;
}
/* En escritorio no se centra: se queda pegado a la derecha,
justo antes de "Salir", como estaba originalmente. */
nav li.session-badge {
flex: none;
text-align: left;
margin-left: auto;
}
}
button,
.btn {
font-weight: 600;
}
button:hover,
.btn:hover {
background: var(--elhd-red);
border-color: var(--elhd-red);
transform: translateY(-1px);
}
button:active,
.btn:active {
transform: translateY(0);
}
footer {
color: var(--elhd-text-faint);
}
footer a {
color: var(--elhd-text-faint);
}
footer a:hover {
color: var(--elhd-red);
}
/* ======================================================
Formularios / cajas
====================================================== */
form,
.grey-box {
background: var(--elhd-card);
border: 1px solid var(--elhd-border);
border-radius: 10px;
}
/* Cuando el form solo envuelve una tarjeta (login-box/center-box), esa
tarjeta ya trae su propio fondo y borde: el form no necesita repetirlos. */
form:has(> .login-box),
form:has(> .center-box) {
background: none;
border: none;
border-radius: 0;
}
fieldset {
border: 1px solid var(--elhd-border);
border-radius: 8px;
}
fieldset legend {
color: var(--elhd-text-faint);
padding: 0 6px;
}
input:not([type="radio"]),
textarea,
select {
background-color: var(--elhd-bg-raised);
color: var(--elhd-text);
border: 1px solid var(--elhd-border);
border-radius: 8px;
}
input::placeholder,
textarea::placeholder {
color: var(--elhd-text-faint);
}
label {
color: var(--elhd-text-muted);
}
.danger {
color: #ff6568;
}
/* ======================================================
Login / Registro / Mensajes (páginas de una sola tarjeta)
====================================================== */
@keyframes elhd-card-in {
from {
opacity: 0;
transform: translateY(34px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Centra verticalmente cualquier página que sea solo una tarjeta
(login, registro, recuperar contraseña, mensajes, bloqueo VIP)
en vez de dejarla pegada arriba con un vacío grande abajo.
Se usa padding fijo en vez de min-height con vh: en móvil, al
abrir el teclado el navegador reduce el alto visible y un
min-height atado a 100vh recalculaba todo, dando el efecto de
que la tarjeta "se encogía" al escribir. */
.content-wrapper:has(> form .login-box),
.content-wrapper:has(> form .center-box),
.content-wrapper:has(> .grey-box) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 0;
}
/* El