/*=========================================================
EVOL-IA CONTRACTS PLATFORM
STYLE.CSS
=========================================================*/
/* Los @import se retiraron A PROPOSITO (2026-08-21).
Una URL de @import no puede llevar ?v={{ ASSET_V }}: es un fichero CSS,
no una plantilla. Resultado: style.css se versionaba pero sus tres
importaciones no, asi que el navegador podia seguir sirviendo una
components.css vieja -- justo la hoja donde vive la correccion de
[hidden] y de dialog.modal-backdrop. Un usuario con esa cache habria
seguido viendo los modales rotos por mucho que subieramos VERSION.
Ahora las cuatro hojas se enlazan desde base.html, cada una con su
version. De paso desaparece la carga en cascada de @import, que
serializa las descargas. El ORDEN de esos es el que habia aqui:
variables -> animations -> components -> style. */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
width:100%;
/* Antes html y body median height:100% y body ademas llevaba
overflow:hidden. Con eso NINGUNA pagina podia crecer mas alto que la
ventana: el desplazamiento habia que delegarlo a un contenedor
interno, y esa barra interior no siempre resultaba evidente -- habia
que acertar con el raton dentro del contenedor correcto.
Ahora la pagina se desplaza como una pagina normal. */
height:auto;
/* scrollbar-gutter:stable estuvo aqui para que abrir un modal no
desplazara el contenido de lado. Se retiro porque NO funciona para
este caso y se comprobo midiendo: con la propiedad puesta, la misma
aplicacion medía 1270px de ancho util en una pagina que desborda y
1280px en una que no. Chrome no reserva el hueco cuando el overflow
del elemento raiz pasa a hidden, que es justo lo que hace el bloqueo
del modal. La compensacion real se mide en app.js (--hueco-barra). */
}
body{
width:100%;
min-height:100%;
}
body{
font-family:var(--font-family);
color:var(--text-primary);
/* El overflow:hidden que habia aqui es lo que impedia el scroll de
pagina. La imagen de fondo se mantiene: ahora queda DETRAS del video
y es lo que se ve si el video no llega a cargar. */
background:
url("/static/img/background/background-login.png")
center center /
cover
no-repeat
fixed;
}
/*=========================================
CAPA OSCURA
=========================================*/
body::before{
content:"";
position:fixed;
inset:0;
background:
linear-gradient(
rgba(4,8,25,.45),
rgba(4,8,25,.45)
);
z-index:-5;
/* Capa puramente decorativa: nunca debe poder interceptar un clic ni
una rueda. Va con el resto de capas de fondo, que ya lo tenian. */
pointer-events:none;
}
/*=========================================
ATMOSFERA DEL DASHBOARD
-----------------------------------------
SOLO paginas autenticadas.
style.css lo cargan TODAS las paginas, asi que body::before alcanza
tambien a / y /login -- que tienen su fondo en video ya aprobado y no
deben cambiar. El discriminador no hace falta inventarlo: .sidebar
existe unicamente en las plantillas del panel (medido: 1 en /inicio y
/contratos, 0 en / y /login), y .fondo-evolia solo en las publicas.
Si un navegador no soportara :has(), la regla no aplica y el fondo
queda como hoy. Nunca puede alcanzar a las publicas.
=========================================*/
body:has(.sidebar)::before{
/* Color plano, sin degradados y sin la foto debajo.
Aqui habia tres capas -- dos focos radiales, violeta arriba a la
derecha e indigo bajo el sidebar, sobre un degradado base en 168deg --
montadas sobre background-login.png. La idea era dar atmosfera. El
efecto real es que el fondo no tenia UN color: cambiaba de tono segun
la zona, y los recuadros semitransparentes que habia encima se tenian
con lo que les tocara detras. Por eso las tarjetas de arriba se veian
azules a la izquierda y moradas a la derecha.
Con los recuadros ya opacos en --recuadro, la atmosfera solo aportaba
ruido bajo cajas que ya no la dejan pasar.
OPACO: cubre background-login.png, que sigue declarada en body y
vuelve a verse sola si algun dia se retira esta capa. Las publicas
(/ y /login) no se tocan: el :has(.sidebar) del selector las deja
fuera, y ahi manda el fondo en video.
Es el par de --recuadro. Se miran juntos. */
background: var(--fondo-panel);
}
/*=========================================
CONTENEDOR PRINCIPAL
=========================================*/
main{
width:100%;
/* min-height y no height: con alto fijo, el contenido mas alto que
la ventana quedaba recortado en vez de generar scroll. */
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
/*=========================================
LOGIN
=========================================*/
.login-card{
width:560px;
padding:60px;
text-align:center;
border-radius:36px;
background:var(--glass-bg);
backdrop-filter:blur(28px);
border:1px solid rgba(34,200,255,.12);
box-shadow:
0 30px 90px rgba(0,0,0,.45);
animation:
fadeIn 1s ease,
floating 7s ease-in-out infinite;
}
/*=========================================
LOGO
=========================================*/
.logo{
width:280px;
margin-bottom:35px;
animation:
breathing 5s ease-in-out infinite,
logoGlow 5s ease-in-out infinite;
}
/*=========================================
TITULO
=========================================*/
.title{
font-size:58px;
font-weight:700;
margin-top:15px;
margin-bottom:18px;
}
/*=========================================
SUBTITULO
=========================================*/
.subtitle{
width:85%;
margin:auto;
font-size:20px;
line-height:1.7;
color:var(--text-secondary);
}
/*=========================================
LINEA
=========================================*/
.line{
animation:
lineGlow 4s infinite;
}
/*=========================================
VERSION
=========================================*/
.version{
margin-top:30px;
margin-bottom:35px;
color:var(--text-muted);
font-size:18px;
}
/*=========================================
BOTON
=========================================*/
.btn-primary{
animation:
buttonGlow 4s infinite;
}
/*=========================================
FOOTER
=========================================*/
.footer{
margin-top:35px;
color:var(--text-muted);
font-size:13px;
opacity:.7;
}
/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:900px){
.login-card{
width:92%;
padding:40px;
}
.logo{
width:220px;
}
.title{
font-size:44px;
}
.subtitle{
width:100%;
font-size:18px;
}
}
@media(max-width:600px){
.login-card{
padding:30px;
}
.logo{
width:180px;
}
.title{
font-size:34px;
}
.subtitle{
font-size:16px;
}
.btn-primary{
font-size:18px;
}
}
/*=========================================
FONDO DE VIDEO — AMBIENTE DE EVOL-IA
=========================================*/
/* Tres capas fijas, todas por DEBAJO del contenido y ninguna en el flujo:
.fondo-evolia z-index -10 video + poster
.fondo-evolia-velo dentro velo propio del video
body::before z-index -5 capa oscura que ya existia
Los valores de abajo NO son arbitrarios: salen de medir fondo.mp4
fotograma a fotograma sobre un canvas (7 muestras a lo largo de sus
10,01 s). El video mide 1280x720 y da luminancia media 0,22, PICOS de
1,0 y saturacion media 0,73-0,84.
Ese perfil dice que el problema no es el brillo medio -- ya es un video
oscuro -- sino otras dos cosas: unos reflejos que llegan al blanco puro
y un color muy cargado. Por eso el filtro ataca primero esas dos:
saturate(.4) 0,80 -> 0,32 de saturacion. Queda el azul de EVOL-IA
insinuado, no un fondo de colores.
contrast(.75) comprime hacia el medio: el pico baja de 1,0 a 0,875 y
la media sube de 0,22 a 0,29, asi que la relacion
pico/media pasa de 4,5x a 3,0x. Es lo que quita el
parpadeo: sin esto, los destellos siguen saltando por
mucho velo que se ponga encima.
brightness(.7) baja el conjunto ya aplanado.
Y despues los velos: .45 propio x .45 heredado de body::before dejan
pasar un 30%. Resultado calculado -- y comprobado luego sobre pixeles
reales -- en torno a un 6% de luminancia media y un 18% en los picos.
Se percibe movimiento; no se percibe un video. */
.fondo-evolia{
position:fixed;
inset:0;
z-index:-10;
overflow:hidden;
/* No captura ni un clic: ni el video, ni el velo, ni el contenedor. */
pointer-events:none;
/* El poster va aqui y no solo en el atributo del