/* Il portale su smartphone e tablet.
 *
 * Caricato da index.html solo con
 *   (max-width: 760px)                          -> telefoni (e finestre strette)
 *   (pointer: coarse) and (max-width: 1366px)   -> tablet, comandati col dito
 * Sul PC il browser non lo applica. Qui solo correzioni: niente che il PC
 * debba sapere.
 */

/* ── Al tocco: bersagli grandi, e 16px nei campi (iOS zooma sotto i 16px) ── */
button, .btn, input, select, textarea { min-height: 40px; }
input, select, textarea { font-size: 16px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 20px; height: 20px; }
input[type="range"] { min-height: 0; }

/* ── Il menu diventa un cassetto ── */
.portale, .portale.compatta { grid-template-columns: 1fr; }
.menu-riduci { display: none; }
/* Il menu ridotto e' una cosa del PC: nel cassetto si vede tutto. */
.portale.compatta .laterale { width: min(300px, 85vw); }
.portale.compatta .laterale:not(:hover) .marchio-testo,
.portale.compatta .laterale:not(:hover) .menu-titolo small,
.portale.compatta .laterale:not(:hover) .menu-voce .testo,
.portale.compatta .laterale:not(:hover) .laterale-comandi,
.portale.compatta .laterale:not(:hover) .chi-sono > span:not(.avatar) { display: revert; }
.portale.compatta .laterale:not(:hover) .menu-voce .testo { display: inline; }
.portale.compatta .laterale:not(:hover) .laterale-comandi { display: flex; }
.portale.compatta .laterale:not(:hover) .menu-titolo { font-size: 11px; justify-content: flex-start; padding: 6px 10px 8px; }
.portale.compatta .laterale:not(:hover) .menu-voce { justify-content: flex-start; padding: 12px 10px; }
.portale.compatta .laterale:not(:hover) .marchio { padding: 0; justify-content: flex-start; }
.portale.compatta .laterale:not(:hover) #menu { padding: 4px 10px 16px; }
.portale.compatta .laterale:not(:hover) .laterale-piede { padding: 12px; justify-items: stretch; }
.laterale { position: fixed; z-index: 55; left: 0; top: 0; width: min(300px, 85vw);
  transform: translateX(-102%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.6); }
body.cassetto-aperto .laterale { transform: none; }
body.cassetto-aperto .velo { display: block; position: fixed; inset: 0; z-index: 54; background: rgba(0,0,0,.5); }
.barra-mobile { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 40;
  padding: 8px 12px; background: #0b0e14; border-bottom: 1px solid var(--line); }
.barra-mobile .marchio { padding: 0; }
.barra-mobile button { width: 44px; font-size: 20px; background: transparent; }
.menu-voce { padding: 12px 10px; }

/* ── La pagina: margini stretti, una colonna ── */
.pagina-testa { padding: 16px 14px 12px; grid-template-columns: 1fr; }
.pagina-testa h1 { font-size: 19px; }
.pagina-stato { text-align: left; }
#avvisi { top: 10px; }
#pagina-corpo { padding: 14px 12px 60px; }
.fascia-assistenza { flex-direction: column; align-items: stretch; padding: 12px 14px; }
.card { padding: 14px; }
.grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
.riga-campo { grid-template-columns: 1fr; gap: 6px; }

/* Le linguette: una striscia che scorre col dito. */
.tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button, .tabs a { white-space: nowrap; flex: 0 0 auto; }

/* I gruppi di pulsanti vanno a capo e si allargano. */
.actions > button, .actions > .btn { flex: 1 1 auto; }

/* Tabelle: scorrono, non schiacciano. */
.table-wrap { -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 560px; }


/* 12px di margine attorno: con i 20px del PC la card larga 100vw-24px
   sporgeva di lato. La finestra scorre in verticale (componenti.css). */
.dialogo { padding: 12px; }
.dialogo .card { width: 100% !important; max-width: none; }
.schede { grid-template-columns: 1fr !important; }

@media (max-width: 420px) {
  .card { padding: 12px; }
  .table-wrap table { min-width: 480px; }
}

/* ── Le fasi della gara sul telefono: ogni fase e' una schedina (fase sopra,
   durata e orari sotto), senza tabella da scorrere di lato ── */
@media (max-width: 760px) {
  .tabella-fasi { min-width: 0 !important; }
  .tabella-fasi thead { display: none; }
  .tabella-fasi tr.fase { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px 8px;
                          align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .tabella-fasi tr.fase td { display: block; padding: 0; border: 0; }
  .tabella-fasi tr.fase td:nth-child(3) { grid-column: 2 / 4; grid-row: 2; }
  .tabella-fasi tr.fase td:nth-child(4) { grid-column: 2 / 4; grid-row: 3; font-size: 12px; }
  .tabella-fasi tr.fase td:nth-child(5) { grid-column: 3; grid-row: 1; }
  .tabella-fasi select { min-width: 0; width: 100%; }
  .durata-pezzo input { width: 58px; }
  .stint-linea { grid-template-columns: 58px minmax(0, 1fr); gap: 6px; }
  .stint-linea-etichette span { font-size: 9px; white-space: normal; line-height: 1.1; }
  /* l'asse stretto: una tacca si' e una no, la prima e l'ultima sempre */
  .stint-asse span:nth-child(even):not(.ultimo) { display: none; }
}

/* La squadra in bella vista: sul telefono il logo sopra il nome. */
@media (max-width: 760px) {
  .squadra-intestazione { flex-direction: column; text-align: center; gap: 12px; }
  .squadra-logo, .squadra-logo img { max-width: 100%; }
}