/* /src/styles/acceso.css */
.acc-pagina {
--acc-exterior: #0a0f1d;
--acc-fondo: #0d1426;
--acc-campo: #0a1122;
--acc-borde: #26314f;
--acc-borde-campo: #2c3858;
--acc-texto: #f1f4fb;
--acc-texto-2: #c6cde0;
--acc-texto-3: #8f9ab8;
--acc-cian: var(--accent-cyan, #00f5d4);
--acc-cian-hover: #5dfbe4;
--acc-rosa: var(--accent-pink, #f72585);
--acc-boton: var(--accent-cyan-hondo, #00b89f);
--acc-boton-hover: #00d1b4;
--acc-discord: #5865f2;
--acc-discord-hover: #6d78f5;
--acc-letra: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
position: relative;
isolation: isolate;
overflow: hidden;
margin-top: calc(-1 * var(--navbar-height, 64px));
min-height: 100vh;
min-height: 100dvh;
padding: calc(var(--navbar-height, 64px) + clamp(24px, 5vh, 56px)) clamp(24px, 5vw, 96px) clamp(24px, 5vh, 56px);
background: var(--acc-exterior);
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
align-items: center;
column-gap: 40px;
}
body:has(.acc-pagina) #main-footer { margin-top: 0; }
.acc-pagina :where(h1, h2, p, span, a, button, input, label, figcaption, strong, em) {
font-family: var(--acc-letra);
letter-spacing: normal;
text-transform: none;
}
.acc-pagina :focus-visible {
outline: 3px solid var(--acc-cian);
outline-offset: 3px;
}
.acc-tarjeta {
width: 100%;
max-width: 480px;
grid-column: 2;
grid-row: 1;
justify-self: center;
background: rgba(10, 14, 24, .92);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}
.acc-cabecera {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px clamp(24px, 4vw, 44px) 0;
}
.acc-pagina .acc-logo {
font-family: var(--font-pixel, 'Press Start 2P', monospace);
font-size: 20px;
font-weight: 400;
line-height: 1;
letter-spacing: 0;
color: var(--acc-cian);
text-decoration: none;
text-shadow: 0 0 8px var(--acc-cian), 0 0 20px rgba(0, 245, 212, .3);
display: inline-flex;
align-items: center;
min-height: 44px;
white-space: nowrap;
}
.acc-pagina .acc-logo span {
font-family: inherit;
letter-spacing: 0;
color: var(--acc-rosa);
text-shadow: 0 0 8px var(--acc-rosa), 0 0 20px rgba(247, 37, 133, .3);
}
.acc-pagina .acc-volver {
font-size: 13px;
color: var(--acc-texto-2);
text-decoration: none;
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.acc-pagina .acc-volver:hover { color: var(--acc-texto); }
.acc-pagina .acc-volver .ico { transform: scaleX(-1); }
.acc-pagina [data-panel] { display: none; }
.acc-pagina[data-modo="login"] [data-panel="login"],
.acc-pagina[data-modo="register"] [data-panel="register"] { display: block; }
.acc-pagina[data-modo="verificar"] :is(.acc-sociales, .acc-separador) { display: none; }
.acc-pagina[data-modo="olvido"] :is(.acc-sociales, .acc-separador) { display: none; }
.acc-pagina .acc-titulos--fijo,
.acc-pagina .acc-formulario--fijo { display: block; }
.acc-pagina .acc-formulario--fijo { margin-top: 22px; }
.acc-pagina .acc-nota.acc-nota--izq { margin: -6px 0 16px; text-align: left; }
.acc-pagina .acc-final { display: grid; gap: 12px; margin-top: 24px; }
.acc-pagina .acc-final .acc-social { text-decoration: none; }
.acc-escena {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100vh;
height: 100dvh;
z-index: -1;
pointer-events: none;
}
.acc-escena-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 18% center;
}
.acc-escena::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(5, 8, 18, .55) 0%, rgba(5, 8, 18, 0) 14%),
linear-gradient(0deg, var(--acc-exterior) 0%, rgba(10, 15, 29, 0) 22%),
linear-gradient(90deg, rgba(5, 8, 18, 0) 45%, rgba(5, 8, 18, .45) 72%, rgba(5, 8, 18, .7) 100%);
}
.acc-form {
padding: 34px clamp(24px, 4vw, 44px) 26px;
display: flex;
flex-direction: column;
}
.acc-pagina .acc-titulo {
margin: 0;
font-size: 27px;
line-height: 1.2;
font-weight: 700;
color: var(--acc-texto);
}
.acc-pagina .acc-titulo--sm { font-size: 22px; }
.acc-pagina .acc-sub {
margin: 6px 0 0;
font-size: 16px;
line-height: 1.45;
color: var(--acc-texto-2);
}
.acc-sociales { display: grid; gap: 10px; margin-top: 22px; }
.acc-pagina .acc-social {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
min-height: 44px;
padding: 10px 16px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.acc-pagina .acc-social--discord {
background: var(--acc-discord);
border: 1px solid var(--acc-discord);
color: #fff;
}
.acc-pagina .acc-social--discord:hover { background: var(--acc-discord-hover); }
.acc-pagina .acc-social--steam {
background: rgba(255, 255, 255, .03);
border: 1px solid var(--acc-borde-campo);
color: var(--acc-texto);
}
.acc-pagina .acc-social--steam:hover { border-color: #56648a; background: #151e31; }
.acc-icono { flex: none; }
.acc-icono--marca { width: 22px; height: 22px; }
.acc-pagina .acc-nota {
margin: 0;
font-size: 13px;
line-height: 1.4;
color: var(--acc-texto-3);
text-align: center;
}
.acc-pagina .acc-separador {
align-items: center;
gap: 12px;
margin: 18px 0 14px;
font-size: 13px;
color: var(--acc-texto-3);
}
.acc-pagina[data-modo="login"] .acc-separador[data-panel="login"],
.acc-pagina[data-modo="register"] .acc-separador[data-panel="register"] { display: flex; }
.acc-pagina .acc-separador::before,
.acc-pagina .acc-separador::after {
content: '';
flex: 1;
border-top: 1px solid var(--acc-borde);
}
.acc-pagina .acc-aviso {
margin: 0 0 14px;
padding: 10px 14px;
border: 1px solid var(--acc-borde-campo);
border-radius: 8px;
background: rgba(255, 255, 255, .04);
font-size: 14px;
line-height: 1.45;
color: var(--acc-texto);
}
.acc-pagina .acc-alerta {
display: none;
margin: 0 0 14px;
padding: 10px 14px;
border-radius: 8px;
font-family: var(--acc-letra);
font-size: 14px;
line-height: 1.45;
}
.acc-alerta--bien { background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .45); color: #a7f3d0; }
.acc-alerta--mal { background: rgba(247, 37, 133, .08); border: 1px solid rgba(247, 37, 133, .5); color: #ffb3d4; }
.acc-formulario { display: none; }
.acc-pagina .acc-etiqueta {
display: block;
margin: 0 0 6px;
font-size: 14px;
font-weight: 500;
color: var(--acc-texto);
}
.acc-campo {
position: relative;
display: flex;
align-items: center;
margin-bottom: 14px;
background: var(--acc-campo);
border: 1px solid var(--acc-borde-campo);
border-radius: 8px;
transition: border-color .15s, box-shadow .15s;
}
.acc-campo:focus-within {
border-color: var(--acc-boton);
box-shadow: 0 0 0 3px rgba(0, 184, 159, .22);
}
.acc-pagina .acc-campo input:focus-visible { outline: none; }
.acc-campo > .acc-icono {
position: absolute;
left: 14px;
color: var(--acc-texto-3);
pointer-events: none;
}
.acc-pagina .acc-campo input {
flex: 1;
width: 100%;
min-height: 44px;
padding: 10px 14px 10px 42px;
background: transparent;
border: 0;
outline: none;
box-shadow: none;
font-size: 15px;
color: var(--acc-texto);
color-scheme: dark;
}
.acc-pagina .acc-campo input::placeholder { color: var(--acc-texto-3); opacity: 1; }
.acc-pagina .acc-campo input.acc-codigo {
padding-left: 14px;
text-align: center;
font-size: 22px;
letter-spacing: 6px;
}
.acc-pagina .acc-ojo {
flex: none;
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: none;
border: 0;
color: var(--acc-texto-3);
cursor: pointer;
}
.acc-pagina .acc-ojo:hover,
.acc-pagina .acc-ojo[aria-pressed="true"] { color: var(--acc-texto); }
.acc-pagina .acc-enlace {
display: inline;
padding: 0;
background: none;
border: 0;
font-size: inherit;
font-weight: 600;
color: var(--acc-cian);
cursor: pointer;
}
.acc-pagina .acc-enlace:hover { color: var(--acc-cian-hover); text-decoration: underline; }
.acc-pagina .acc-olvido {
display: inline-flex;
align-items: center;
min-height: 44px;
margin: -10px 0 8px;
font-size: 14px;
align-self: flex-start;
}
.acc-pagina .acc-check {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 2px 0 18px;
font-size: 13px;
line-height: 1.45;
color: var(--acc-texto-2);
cursor: pointer;
}
.acc-pagina .acc-check input {
flex: none;
width: 18px;
height: 18px;
margin: 1px 0 0;
accent-color: var(--acc-cian);
}
.acc-pagina .acc-check a { color: var(--acc-cian); font-weight: 500; text-decoration: none; }
.acc-pagina .acc-check a:hover { text-decoration: underline; }
.acc-pagina .acc-principal {
width: 100%;
min-height: 46px;
padding: 11px 16px;
border: 0;
border-radius: 8px;
background: var(--acc-boton);
box-shadow: none;
color: #04121a;
font-family: var(--acc-letra);
font-size: 16px;
font-weight: 600;
letter-spacing: normal;
text-transform: none;
cursor: pointer;
transition: background .15s, transform .1s;
}
.acc-pagina .acc-principal:hover { background: var(--acc-boton-hover); }
.acc-pagina .acc-principal:active { transform: translateY(1px); }
.acc-pagina .acc-principal:disabled { opacity: .7; cursor: progress; }
.acc-pagina .acc-demo {
width: 100%;
min-height: 44px;
margin-top: 10px;
padding: 10px 16px;
background: transparent;
border: 1px dashed #56648a;
border-radius: 8px;
color: var(--acc-texto-2);
font-size: 14px;
cursor: pointer;
}
.acc-pagina .acc-demo + .acc-nota { margin-top: 6px; }
.acc-pagina .acc-pie {
margin: 20px 0 0;
padding-top: 16px;
border-top: 1px solid var(--acc-borde);
text-align: center;
font-size: 15px;
color: var(--acc-texto-2);
}
.acc-pagina .acc-pie .acc-enlace { min-height: 44px; padding: 0 2px; }
.acc-buzon {
margin-top: 16px;
padding: 12px;
border: 1px dashed #56648a;
border-radius: 6px;
text-align: center;
}
.acc-pagina .acc-buzon p { margin: 0; font-size: 14px; color: var(--acc-texto-2); }
.acc-pagina .acc-buzon strong { color: var(--acc-cian); }
@media (max-width: 1100px) {
.acc-tarjeta { justify-self: end; }
.acc-escena-img { object-position: 12% center; }
}
@media (max-width: 820px) {
.acc-pagina {
display: block;
padding: calc(var(--navbar-height, 64px) + 210px) 16px 32px;
}
.acc-tarjeta { max-width: 520px; margin: 0 auto; }
.acc-escena { bottom: auto; height: calc(var(--navbar-height, 64px) + 340px); }
.acc-escena-img { object-position: 22% 35%; }
.acc-escena::after {
background: linear-gradient(0deg, var(--acc-exterior) 0%, rgba(10, 15, 29, .6) 30%, rgba(10, 15, 29, 0) 60%);
}
.acc-cabecera { padding: 12px 20px 0; }
.acc-pagina .acc-logo { font-size: 17px; }
.acc-form { padding: 24px 20px 28px; }
.acc-pagina .acc-titulo { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.acc-pagina * { transition: none !important; }
}