/* Piccole aggiunte alla grafica Unfold per le pagine del gestionale. */

.riquadri {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.scorciatoie {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Verde WhatsApp, così si riconosce al volo. */
.pulsante-whatsapp {
    background-color: #25d366 !important;
    border-color: #25d366 !important;
    color: #0b141a !important;
}

/* Carta grigia: pulsanti grandi, comodi col pollice sul telefono. */
.carta-grigia {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-bottom: 1rem;
}

.pulsante-grande {
    align-items: center;
    background-color: var(--color-primary-600);
    border: 0;
    border-radius: 0.75rem;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 1.15rem;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    min-height: 9rem;
    padding: 1.25rem;
    text-align: center;
}

.pulsante-grande .material-symbols-outlined {
    font-size: 3rem;
}

.destinazioni {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1rem;
}

@media (min-width: 1100px) {
    .destinazioni {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.destinazioni small {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.85;
}

.pulsante-principale {
    min-height: 7rem;
}

.pulsante-principale small {
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.85;
}

.pulsante-grande.secondario {
    background-color: transparent;
    border: 2px dashed var(--color-base-600);
    color: inherit;
}

.in-lettura {
    align-items: center;
    display: flex;
    font-size: 1.05rem;
    gap: 0.75rem;
    padding: 1.5rem 0;
}

.gira {
    animation: gira 1s linear infinite;
}

@keyframes gira {
    to { transform: rotate(360deg); }
}

.conferma {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
    .conferma {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }
}

.anteprima {
    border-radius: 0.5rem;
    width: 100%;
}

.griglia-campi {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin-top: 1rem;
}

.scelte label {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0;
}

/* Calendario noleggi: auto sulle righe, giorni sulle colonne (si scorre di lato sul telefono). */
.cal-comandi,
.cal-legenda {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cal-legenda .cal-barra {
    padding: 0.2rem 0.6rem;
}

.calendario {
    border: 1px solid var(--color-base-800);
    border-radius: 0.5rem;
    overflow-x: auto;
}

.cal-tabella {
    display: grid;
    grid-template-columns: 10.5rem repeat(var(--giorni), minmax(2.6rem, 1fr));
    min-width: calc(10.5rem + var(--giorni) * 2.6rem);
}

.cal-intestazione {
    border-bottom: 1px solid var(--color-base-700);
    color: var(--color-base-300);
    font-size: 0.75rem;
    padding: 0.4rem 0.2rem;
    text-align: center;
}

.cal-auto {
    background: var(--color-base-900);
    border-bottom: 1px solid var(--color-base-800);
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    justify-content: center;
    left: 0;
    padding: 0.35rem 0.6rem;
    position: sticky;
    z-index: 2;
}

.cal-auto small {
    color: var(--color-base-400);
}

.cal-celle {
    border-bottom: 1px solid var(--color-base-800);
    display: grid;
    grid-column: 2 / -1;
    grid-template-columns: repeat(var(--giorni), minmax(2.6rem, 1fr));
    padding: 0.2rem 0;
    row-gap: 0.2rem;
}

.cal-cella {
    border-left: 1px solid var(--color-base-800);
    grid-row: 1 / -1;
}

.cal-cella:hover {
    background: color-mix(in srgb, var(--color-primary-600) 25%, transparent);
}

.weekend {
    background: color-mix(in srgb, var(--color-base-700) 25%, transparent);
}

.oggi {
    background: color-mix(in srgb, var(--color-primary-600) 18%, transparent);
    color: var(--color-primary-300);
}

.cal-barra {
    border-radius: 0.4rem;
    color: #fff;
    font-size: 0.75rem;
    margin: 0 2px;
    overflow: hidden;
    padding: 0.3rem 0.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
}

.cal-barra.continua-prima { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: 0; }
.cal-barra.continua-dopo { border-bottom-right-radius: 0; border-top-right-radius: 0; margin-right: 0; }
.cal-barra.riservato { background: #b45309; }
.cal-barra.prenotato { background: var(--color-primary-600); }
.cal-barra.in_corso { background: #15803d; }
.cal-barra.in_ritardo { background: #dc2626; font-weight: 600; }
.cal-barra.chiuso,
.cal-barra.fatturato { background: #52525b; }
.cal-barra.officina {
    background: repeating-linear-gradient(135deg, #7f1d1d, #7f1d1d 6px, #991b1b 6px, #991b1b 12px);
}

.cal-vuoto {
    grid-column: 1 / -1;
    padding: 1.5rem;
}

.cal-ricerca {
    align-items: end;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

/* Calendario officina: un mese, una casella per giorno. */
.mese-titolo {
    font-size: 1.1rem;
    margin: 0 0.5rem;
    text-transform: capitalize;
}

.mese {
    border: 1px solid var(--color-base-800);
    border-radius: 0.5rem;
    display: grid;
    grid-template-columns: repeat(7, minmax(6.5rem, 1fr));
    overflow-x: auto;
}

.mese-intestazione {
    border-bottom: 1px solid var(--color-base-700);
    color: var(--color-base-300);
    font-size: 0.75rem;
    padding: 0.4rem;
    text-align: center;
}

.mese-giorno {
    border-bottom: 1px solid var(--color-base-800);
    border-left: 1px solid var(--color-base-800);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 6.5rem;
    padding: 0.35rem;
}

.mese-giorno.fuori {
    opacity: 0.45;
}

.mese-numero {
    font-size: 0.8rem;
    font-weight: 600;
}

.cal-voce {
    border-radius: 0.35rem;
    color: #fff;
    font-size: 0.72rem;
    overflow: hidden;
    padding: 0.2rem 0.4rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-voce.collaudo { background: #7c3aed; }
.cal-voce.collaudo.noleggio { background: #c026d3; }
.cal-voce.sollecito { background: #dc2626; font-weight: 600; }
.cal-voce.superato { background: #52525b; }
.cal-barra.collaudo { background: #c026d3; }
.cal-voce.app-cliente { background: #2563eb; }
.cal-voce.app-interno { background: #d97706; }
.cal-voce.app-officina { background: #0d9488; }
.cal-voce.nol-uscita,
.cal-voce.nol-rientro { background: #15803d; }
.cal-voce.in_ritardo { background: #dc2626; font-weight: 600; }
.cal-voce.fatto { opacity: 0.5; text-decoration: line-through; }

/* Ogni giorno dopo oggi un filo meno nero del precedente (--schiarita la calcola il gestionale). */
.giorno-sfumato {
    background: color-mix(in srgb, var(--color-base-600) var(--schiarita, 0%), var(--color-base-950));
}

.giorno-sfumato.weekend {
    box-shadow: inset 4px 0 0 var(--color-base-600);
}

.giorno-sfumato.oggi {
    background: color-mix(in srgb, var(--color-primary-600) 22%, var(--color-base-950));
    box-shadow: inset 4px 0 0 var(--color-primary-500);
}

.giorno-sfumato.passato {
    opacity: 0.55;
}

/* Calendario a giorni: si scende giorno per giorno, i successivi si caricano da soli. */
.cal-vai {
    align-items: center;
    display: flex;
    gap: 0.4rem;
}

.cal-vai input {
    width: auto;
}

.agenda {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.agenda-giorno {
    border: 1px solid var(--color-base-800);
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    scroll-margin-top: 5rem;
}

.agenda-data {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    text-transform: capitalize;
}

.agenda-nome {
    color: var(--color-primary-300);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.agenda-aggiungi {
    color: var(--color-base-400);
    font-size: 0.8rem;
    margin-left: auto;
    text-transform: none;
}

.agenda-aggiungi:hover {
    color: var(--color-primary-300);
}

.agenda-voci {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.agenda-voci .cal-voce {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    gap: 0.25rem 0.6rem;
    padding: 0.35rem 0.6rem;
    white-space: normal;
}

.agenda-voci .cal-voce small {
    flex-basis: 100%;
    opacity: 0.85;
}

/* Planning come il foglio dell'officina: carta chiara, una riga per giorno, a sinistra il giorno,
   a destra un riquadro per auto (fino a 6 per riga, 2 sul telefono), colorato per stato. */
.planning {
    background: #fff;
    border: 1px solid #9ca3af;
    color: #111;
    gap: 0;
}

.planning-scatola {
    max-height: 23rem; /* circa 4 giorni; il gestionale la regola esatta su 4 righe */
    overflow-y: auto;
}

.planning .planning-giorno {
    border: 0;
    border-bottom: 1px solid #9ca3af;
    border-radius: 0;
    padding: 0;
}

.planning-giorno {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    scroll-margin-top: 5rem;
}

.planning-data {
    background: color-mix(in srgb, #fff var(--schiarita, 0%), #d1d5db);
    border-right: 1px solid #9ca3af;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.6rem;
    text-transform: capitalize;
}

.planning-data strong {
    font-size: 0.95rem;
    text-transform: uppercase;
}

.planning-data .agenda-aggiungi {
    color: #374151;
    font-size: 0.75rem;
    margin: auto 0 0;
}

.planning-giorno.oggi .planning-data {
    background: #0284c7;
    color: #fff;
}

.planning-giorno.oggi .agenda-aggiungi {
    color: #e0f2fe;
}

.planning-giorno.weekend .planning-data {
    background: #f3f4f6;
}

.planning-giorno.passato {
    opacity: 0.6;
}

.planning-riquadri {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fill, minmax(max(10.5rem, calc(100% / 6)), 1fr));
}

.planning-vuoto {
    color: #6b7280;
    font-size: 0.8rem;
    padding: 0.6rem;
}

.riquadro {
    background: #fff;
    border-bottom: 1px solid #d1d5db;
    border-right: 1px solid #d1d5db;
    color: #111;
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    gap: 0.1rem;
    line-height: 1.25;
    min-height: 5.4rem;
    padding: 0.4rem 0.5rem;
}

.riquadro:hover {
    outline: 2px solid #0284c7;
    outline-offset: -2px;
}

.riquadro > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.riquadro-auto {
    font-weight: 700;
    text-transform: uppercase;
}

.riquadro-cosa {
    color: #374151;
    font-size: 0.72rem;
}

.riquadro-ore {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin-top: auto;
}

/* Colori del planning: (A) da fare arancio, (L) in lavorazione bianco, (R) ricambi in attesa giallo,
   (F) finito verde; noleggi azzurri, collaudi lilla, interni grigio chiaro. */
.riquadro.lav-a, .riquadro.app-cliente, .riquadro.app-officina { background: #ff7a1a; }
.riquadro.lav-l { background: #fff; }
.riquadro.lav-r { background: #fff34d; }
.riquadro.lav-f { background: #4ade50; }
.riquadro.nol-uscita, .riquadro.nol-rientro { background: #93c5fd; }
.riquadro.in_ritardo { background: #f87171; }
.riquadro.collaudo { background: #d8b4fe; }
.riquadro.collaudo.noleggio { background: #f0abfc; }
.riquadro.sollecito { background: #fca5a5; }
.riquadro.app-interno { background: #e5e7eb; }
.riquadro.fatto, .riquadro.superato { background: #d1d5db; color: #4b5563; }

.planning-legenda {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.planning-legenda .riquadro {
    border: 1px solid #9ca3af;
    min-height: 0;
    padding: 0.2rem 0.5rem;
}

.planning .agenda-altri {
    color: #374151;
}

/* Pallino azzurro nel calendario officina: quel giorno rientrano auto del noleggio da preparare. */
.pallino-noleggio {
    align-items: center;
    color: #0369a1;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.3rem;
    text-transform: none;
}

.pallino-noleggio .pallino {
    background: #38bdf8;
    border: 1px solid #0284c7;
    border-radius: 50%;
    display: inline-block;
    height: 0.75rem;
    width: 0.75rem;
}

.planning-giorno.oggi .pallino-noleggio {
    color: #e0f2fe;
}

.planning-meccanici .planning-data strong {
    font-size: 1rem;
}

.planning-meccanici .da-assegnare .planning-data {
    background: #fde68a;
}

@media (max-width: 640px) {
    .planning-giorno {
        grid-template-columns: 1fr;
    }

    .planning-data {
        border-bottom: 1px solid #9ca3af;
        border-right: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .planning-data .agenda-aggiungi {
        margin: 0 0 0 auto;
    }

    .planning-riquadri {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Accettazione al banco: carburante a tasti grandi e spazio bianco per la firma col dito. */
.carburante {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.carburante label {
    cursor: pointer;
}

.carburante input {
    position: absolute;
    opacity: 0;
}

.carburante span {
    border: 1px solid var(--color-base-600);
    border-radius: 0.5rem;
    display: block;
    font-weight: 600;
    padding: 0.7rem 0.2rem;
    text-align: center;
}

.carburante input:checked + span {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #fff;
}

.firma-tela {
    background: #fff;
    border-radius: 0.5rem;
    display: block;
    height: 11rem;
    touch-action: none;
    width: 100%;
}

.firma-cancella {
    align-items: center;
    color: var(--color-base-300);
    display: inline-flex;
    gap: 0.3rem;
    margin-top: 0.6rem;
}

/* Conto ricavi piccolo sopra l'articolo nelle righe (lo sposta static/righe.js). */
.conto-sopra {
    margin-bottom: 0.3rem;
}

.conto-sopra select {
    font-size: 0.72rem;
    height: auto;
    min-width: 0;
    padding: 0.1rem 1.6rem 0.1rem 0.4rem;
    width: 6.5rem;
}

/* Scansioni arrivate dallo ScanSnap nella pagina della carta grigia: nome a sinistra, «Leggi» a destra. */
.riga-scansione {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: space-between;
}

/* Mese: le cartelle con gli stessi colori del planning. */
.cal-voce.lav-a { background: #ea580c; }
.cal-voce.lav-l { background: #52525b; }
.cal-voce.lav-r { background: #ca8a04; }
.cal-voce.lav-f { background: #16a34a; }

.agenda-ora {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 2.8rem;
}

.agenda-vuoto {
    color: var(--color-base-500);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.agenda-altri {
    color: var(--color-base-400);
    padding: 1rem;
    text-align: center;
}

/* Avvisi in cima alla pagina iniziale */
.avvisi {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.avviso {
    align-items: center;
    border-left: 4px solid var(--color-primary-500);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.35rem 0.6rem;
}

.avviso.urgente {
    border-left-color: #dc2626;
}

.avviso small {
    color: var(--color-base-400);
    display: block;
}

.pulsanti-principali {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.pulsante-grande.camorino {
    background-color: #7c3aed;
}

.pulsante-grande.ordino-pezzi {
    background-color: #ea580c;
}

/* SFIZIO per la presentazione (da togliere): la foto tra Carta grigia e CAMORINO. */
.pulsanti-principali.con-foto {
    align-items: stretch;
    grid-template-columns: 1fr auto 1fr;
}

.foto-sfizio {
    display: block;
    justify-self: center;
}

.foto-sfizio img {
    border-radius: 0.75rem;
    box-shadow: 0 0 0 2px #d4a017, 0 0 28px rgba(212, 160, 23, 0.35);
    display: block;
    height: 20rem;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

@media (max-width: 760px) {
    .pulsanti-principali.con-foto {
        grid-template-columns: 1fr;
    }
}

/* Oggi al noleggio, nella pagina iniziale */
.oggi-noleggio {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.oggi-noleggio ul {
    margin: 0.5rem 0 0;
    padding: 0;
}

.oggi-noleggio li {
    list-style: none;
    padding: 0.2rem 0;
}

.stato-ok {
    color: var(--color-primary-400);
    font-weight: 600;
}

.stato-ko {
    color: #f87171;
    font-weight: 600;
}

.tabella-controlli {
    border-collapse: collapse;
    margin-top: 1rem;
    width: 100%;
}

.tabella-controlli th,
.tabella-controlli td {
    border-bottom: 1px solid var(--color-base-800);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.tabella-controlli th {
    color: var(--color-base-400);
    font-weight: 600;
}

/* Pagina del QR sulla cartella: il meccanico dal telefono, pulsanti grandi e colorati. */
.timbra-stato {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-weight: 600;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.pallino-lavoro {
    background: var(--color-base-500);
    border-radius: 999px;
    display: inline-block;
    height: 0.8rem;
    width: 0.8rem;
}

.pallino-lavoro.acceso {
    background: #16a34a;
    box-shadow: 0 0 0 4px rgb(22 163 74 / 0.25);
}

.chi-sei {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.chi-sei label {
    cursor: pointer;
}

.chi-sei input {
    opacity: 0;
    position: absolute;
}

.chi-sei span {
    border: 2px solid var(--color-base-600);
    border-radius: 0.75rem;
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 1rem 0.5rem;
    text-align: center;
}

.chi-sei input:checked + span {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #fff;
}

.timbra-pulsanti {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.timbra-pulsanti .pulsante-grande {
    min-height: 7.5rem;
    padding: 0.75rem 0.25rem;
}

.pulsante-grande.inizia {
    background-color: #16a34a;
}

.pulsante-grande.pausa {
    background-color: #d97706;
}

.pulsante-grande.finito {
    background-color: #0284c7;
}

.timbra-elenco {
    margin: 0;
    padding: 0;
}

.timbra-elenco li {
    border-bottom: 1px solid var(--color-base-800);
    list-style: none;
    padding: 0.5rem 0;
}

.timbra-elenco li.pezzo {
    color: var(--color-base-400);
    font-size: 0.9rem;
}

.timbra-cartella {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    padding: 0.75rem;
    text-decoration: underline;
}
/* Mappa degli scaffali (gomme e ricambi): piano più alto in cima, un riquadro per posto. */
.mappa-legenda {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.mappa-link {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
    text-decoration: underline;
}

.mappa-conti {
    color: var(--color-base-400);
    margin-bottom: 0.75rem;
}

.mappa-scaffale {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.mappa-piano {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: 4.5rem repeat(var(--posti), minmax(5.5rem, 1fr));
    min-width: min-content;
}

.mappa-numero-piano {
    align-self: center;
    color: var(--color-base-400);
    font-size: 0.8rem;
    font-weight: 600;
}

.posto,
.posto-campione {
    border: 2px solid var(--color-base-600);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    gap: 0.1rem;
    line-height: 1.2;
    min-height: 4.2rem;
    overflow: hidden;
    padding: 0.35rem 0.45rem;
}

.posto-campione {
    min-height: 0;
    padding: 0.2rem 0.6rem;
}

.posto b {
    font-size: 0.75rem;
    opacity: 0.75;
}

.posto span {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.posto small {
    opacity: 0.8;
}

.posto.libero,
.posto-campione.libero {
    border-style: dashed;
    color: var(--color-base-400);
}

.posto.libero:hover {
    border-color: var(--color-primary-500);
    color: var(--color-primary-400);
}

.posto.pieno,
.posto-campione.pieno {
    background: rgb(2 132 199 / 0.15);
    border-color: var(--color-primary-600);
}

.st-invernali {
    background: rgb(2 132 199 / 0.2);
    border-color: #0284c7;
}

.st-estive {
    background: rgb(234 88 12 / 0.18);
    border-color: #ea580c;
}

.st-quattro {
    background: rgb(22 163 74 / 0.18);
    border-color: #16a34a;
}

.posto.avviso,
.posto-campione.avviso {
    background: rgb(220 38 38 / 0.18);
    border-color: #dc2626;
}
/* Collegamenti: casella «Ricorda sul server» (solo online). */
.ricorda-server {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
}

.ricorda-server input {
    margin-top: 0.3rem;
}