/* /Layout/MainLayout.razor.rz.scp.css */
/* Diseñado para móvil primero: una columna estrecha centrada, que en pantallas
   grandes simplemente se queda centrada en lugar de estirarse. */

.cabecera[b-pm5v5nqrxh] {
    position: relative; /* ancla el menú desplegable de móvil */
    display: flex;
    align-items: center;
    min-height: var(--altura-tactil);
    padding: 0 var(--espacio-4);
    background-color: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
}

.marca[b-pm5v5nqrxh] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-texto);
    text-decoration: none;
}

/* Agrupa el botón de ayuda con el menú/navegación a la derecha de la marca.
   El margen automático vive aquí, no en `.boton-menu` ni en `.navegacion`:
   dos elementos con `margin-left: auto` a la vez repartirían el hueco entre
   ambos en lugar de empujar el grupo entero contra el borde. */
.cabecera-acciones[b-pm5v5nqrxh] {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin-left: auto;
}

.contenido[b-pm5v5nqrxh] {
    width: 100%;
    max-width: var(--ancho-contenido);
    margin: 0 auto;
    padding: var(--espacio-6) var(--espacio-4) var(--espacio-7);
}

@media (min-width: 40rem) {
    .contenido[b-pm5v5nqrxh] {
        padding-top: var(--espacio-7);
    }
}
/* /Pages/Home.razor.rz.scp.css */
.acciones[b-gqzhwckgwz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-4);
    margin-top: var(--espacio-6);
}

.acciones .boton[b-gqzhwckgwz] {
    text-decoration: none;
}

.enlace-secundario[b-gqzhwckgwz] {
    font-size: var(--texto-pequeno);
}