html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
/* Fondo global del sitio: beige (replica --color-background / --color-surface
de ClientApp/src/vendors/design-tokens/tokens.css). Se declara aquí (no vía
la variable CSS) porque tokens.css solo se importa dentro de los bundles JS
de React, no en el de _Layout.cshtml, y el es manejado por
Razor/CSS puro. */
body {
margin-bottom: 60px;
background-color: #fafaf3;
}
/* El header (#top-menu-root -> TopMenu.jsx) es position:fixed (ver
TopMenu.css); este espaciador compensa esa altura para que el contenido no
quede tapado debajo. Mismos breakpoints/alturas que .top-menu__container
en TopMenu.css (64px mobile / 80px desktop). */
.top-menu-spacer {
padding-top: 64px;
}
@media (min-width: 768px) {
.top-menu-spacer {
padding-top: 80px;
}
}