/* /Layout/MainLayout.razor.rz.scp.css */
/* Il telaio è pensato per un telefono tenuto in mano: intestazione ferma in alto, corpo che
   scorre, navigazione in basso (NavMenu). Su schermi larghi il corpo si limita in larghezza,
   perché una riga di canto lunga un metro non si legge. */

.app[b-f42kd0rtri] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--fondo);
}

/* L'altezza e' fissata apposta: sotto ci si appoggia la barra dello scorrimento, che deve
   restare visibile mentre il canto scorre, e per sapere dove fermarla bisogna sapere quanto e'
   alta questa. --alto-testa vive su :root (app.css) e vale per tutti e due. */
.app-testa[b-f42kd0rtri] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .9rem;
    height: var(--alto-testa);
    box-sizing: border-box;
    background: var(--superficie);
    border-bottom: 1px solid var(--bordo);
}

.app-marchio[b-f42kd0rtri] {
    font-weight: 700;
    color: var(--testo);
    text-decoration: none;
    font-size: 1rem;
}

.commutatore[b-f42kd0rtri] {
    display: flex;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    overflow: hidden;
}

.commutatore button[b-f42kd0rtri] {
    border: 0;
    background: transparent;
    color: var(--tenue);
    font: inherit;
    padding: .35rem 1rem;
    min-height: 36px;
    cursor: pointer;
}

.commutatore button.attiva[b-f42kd0rtri] {
    background: var(--accento);
    color: #fff;
    font-weight: 600;
}

.app-corpo[b-f42kd0rtri] {
    flex: 1 1 auto;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: .8rem .9rem 1.2rem;
}

@media (min-width: 700px) {
    .app-testa[b-f42kd0rtri] { padding: .6rem 1.4rem; }
    .app-marchio[b-f42kd0rtri] { font-size: 1.1rem; }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* Quattro bersagli larghi in fondo allo schermo: il pollice ci arriva senza cambiare presa.
   L'area minima è 44 px per lato, quella sotto la quale si sbaglia tasto.
   Le voci le disegna NavLink, che è un componente: senza ::deep lo stile non le raggiunge. */

.app-piede[b-oahjidt8sb] {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    background: var(--superficie);
    border-top: 1px solid var(--bordo);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.app-piede[b-oahjidt8sb]  .voce {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    min-height: 52px;
    padding: .3rem;
    color: var(--tenue);
    text-decoration: none;
    font-size: .75rem;
}

.app-piede[b-oahjidt8sb]  .voce .segno { font-size: 1.15rem; line-height: 1; }

.app-piede[b-oahjidt8sb]  .voce.active {
    color: var(--accento);
    font-weight: 600;
}