html {
min-height: 100%;
}
body {
min-height: 100vh;
}
.registro-qr-evento {
align-items: stretch;
display: flex;
gap: .75rem;
justify-content: center;
padding-block: .75rem;
}
.registro-qr-evento-logo-contenedor {
flex: 0 0 clamp(7rem, 16vw, 10rem);
position: relative;
}
.registro-qr-evento-logo {
height: 100%;
inset: 0;
object-fit: contain;
position: absolute;
transform: scale(1.35);
transform-origin: center;
width: 100%;
}
.registro-qr-evento-informacion {
align-self: center;
flex: 0 1 auto;
max-width: 42rem;
min-width: 0;
}
@media (max-width: 35.999rem) {
.registro-qr-evento {
gap: .5rem;
}
.registro-qr-evento-logo-contenedor {
flex-basis: 6rem;
}
}
.registro-qr-opcion + .registro-qr-opcion {
border-left: 1px solid var(--bs-border-color);
}
@media (max-width: 47.999rem) {
.registro-qr-opcion + .registro-qr-opcion {
border-left: 0;
border-top: 1px solid var(--bs-border-color);
}
}
/* ---------- superficie de cristal ----------
El fondo de ambiente es requisito, no adorno: `backdrop-filter` desenfoca lo que hay
detrás, así que sobre un color liso —como el `bg-body-tertiary` anterior— el efecto no se
percibe. Son gradientes CSS del azul institucional y del azul cinta: no pesan, no añaden
una solicitud y no dependen de una imagen.
Se aplica por el ``; las tarjetas no llevan clases nuevas. */
.superficie-cristal {
background:
radial-gradient(32rem 22rem at 6% -6%, rgba(73, 149, 206, .58), transparent 62%),
radial-gradient(28rem 20rem at 80% 6%, rgba(28, 40, 81, .42), transparent 64%),
radial-gradient(26rem 19rem at 18% 58%, rgba(73, 149, 206, .42), transparent 62%),
radial-gradient(26rem 19rem at 92% 78%, rgba(28, 40, 81, .32), transparent 64%),
#e9eef7;
background-attachment: fixed;
}
.superficie-cristal .card {
backdrop-filter: blur(1.25rem) saturate(175%);
-webkit-backdrop-filter: blur(1.25rem) saturate(175%);
background:
linear-gradient(135deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .38));
background-clip: border-box;
border: 0 !important;
box-shadow: 0 1.25rem 3rem rgba(28, 40, 81, .22) !important;
overflow: hidden;
position: relative;
}
.superficie-cristal .card::before {
background: linear-gradient(
118deg,
rgba(255, 255, 255, .30) 0%,
rgba(255, 255, 255, .08) 28%,
transparent 46%,
rgba(73, 149, 206, .07) 72%,
transparent 100%
);
border-radius: inherit;
content: "";
inset: 0;
pointer-events: none;
position: absolute;
}
.superficie-cristal .card > .card-header,
.superficie-cristal .card > .card-body,
.superficie-cristal .card > .card-footer {
position: relative;
z-index: 1;
}
.superficie-cristal .card > .card-header,
.superficie-cristal .card > .card-footer {
background-color: rgba(255, 255, 255, .24) !important;
}
/* El texto secundario no necesita ajuste. `text-body-secondary` es rgba(33,37,41,.75):
al ser translúcido se oscurece junto con el fondo, y la relación de contraste se
mantiene entre 5,5:1 y 6,7:1 sobre todas las zonas del gradiente. Sustituirlo por un
gris opaco lo empeora en la zona más saturada. */
/* El divisor entre las dos opciones usa un gris pensado para fondo blanco; sobre
cristal se ve como un corte pegado encima. */
.superficie-cristal .registro-qr-opcion + .registro-qr-opcion {
border-left-color: rgba(28, 40, 81, .14);
}
@media (max-width: 47.999rem) {
.superficie-cristal .registro-qr-opcion + .registro-qr-opcion {
border-top-color: rgba(28, 40, 81, .14);
}
}
/* Sin soporte de `backdrop-filter` el panel quedaría translúcido y el texto se apoyaría
sobre el gradiente. Ocurre en WebView de Android antiguo, que es un escenario real al
escanear con un teléfono viejo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.superficie-cristal .card {
background: rgba(255, 255, 255, .94);
}
}
/* Quien pide menos transparencia en su sistema recibe la superficie opaca. */
@media (prefers-reduced-transparency: reduce) {
.superficie-cristal {
background: var(--bs-tertiary-bg);
}
.superficie-cristal .card {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--bs-body-bg);
border-color: transparent !important;
}
.superficie-cristal .card > .card-header,
.superficie-cristal .card > .card-footer {
background-color: var(--bs-body-bg) !important;
}
}
.brand-mark {
align-items: center;
background: var(--bs-primary);
border-radius: 0.5rem;
display: inline-flex;
font-size: 0.75rem;
font-weight: 700;
height: 2rem;
justify-content: center;
letter-spacing: 0.04em;
width: 2rem;
}
.module-card {
transition: transform 150ms ease, box-shadow 150ms ease;
}
.module-card:hover {
box-shadow: var(--bs-box-shadow) !important;
transform: translateY(-2px);
}
.login-shell {
max-width: 28rem;
}
.login-brand-mark {
align-items: center;
background: var(--bs-dark);
border-radius: 1rem;
color: var(--bs-white);
display: inline-flex;
font-size: 1rem;
font-weight: 700;
height: 3.5rem;
justify-content: center;
letter-spacing: 0.04em;
width: 3.5rem;
}
.institution-events-accordion {
--bs-accordion-active-bg: var(--bs-gray-100);
--bs-accordion-active-color: var(--bs-gray-900);
--bs-accordion-bg: var(--bs-white);
--bs-accordion-border-color: var(--bs-gray-300);
--bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
--bs-accordion-btn-bg: var(--bs-white);
--bs-accordion-btn-color: var(--bs-gray-900);
--bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.2);
--bs-accordion-color: var(--bs-gray-900);
}
.institution-events-accordion .accordion-item,
.institution-events-accordion .accordion-body {
background-color: var(--bs-white);
color: var(--bs-gray-900);
}
.institution-events-accordion .accordion-button,
.institution-events-accordion .accordion-button:not(.collapsed) {
background-color: var(--bs-gray-100) !important;
box-shadow: none;
color: var(--bs-gray-900) !important;
}
.institution-events-accordion .accordion-button.collapsed {
background-color: var(--bs-white) !important;
}
.institution-events-accordion .accordion-button:focus {
border-color: var(--bs-gray-400);
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.2);
}
.institution-events-accordion .accordion-button::after {
filter: grayscale(1);
}
.qr-code-display canvas,
.qr-code-display img {
height: auto !important;
max-width: 100%;
}
/* El código institucional es un SVG: escala sin pérdida, así que basta fijar el ancho de
presentación y dejar que el viewBox resuelva la altura.
El ancho va en el contenedor, no en el