/* MedioPat — TEMA TABLET (schermo largo ma comandato col dito).
   ---------------------------------------------------------------------------
   Il difetto di prima era che il tablet veniva scambiato per un telefono e la
   pagina finiva ingrandita: scritte enormi, margini sprecati, poca roba a
   schermo. Qui si riparte dall'idea opposta — un tablet è uno schermo grande:
   il testo resta di misura normale (16 px, come su un computer), le tabelle
   restano tabelle, le colonne restano due dove servono. L'unica cosa che
   cresce sono i bersagli, perché il dito non è una freccia.

   Le due larghezze contano davvero: in verticale (≈768) e sdraiato (≈1100)
   sono due pagine diverse, e le media query di questo foglio restano accese
   (tema.js spegne solo quelle del tema computer). */

/* =========================================================================
   1. Token
   ========================================================================= */
html[data-tema="tablet"] {
  --fs-base: 16px;
  --fs-pic:  14px;
  --fs-min:  12px;
  --fs-tit:  17px;
  --fs-big:  29px;
  --fs-btn:  15px;

  --sp1: 5px; --sp2: 9px; --sp3: 14px; --sp4: 18px;
  --gutter: 14px;
  --tap: 44px;
  --rad: 14px;
  --rad-s: 10px;
  --top-h: 56px;
  --nav-h: 64px;
}

html[data-tema="tablet"] main { max-width: 1280px; margin: 0 auto; }
html[data-tema="tablet"] .card { padding: var(--sp3) var(--sp4) var(--sp4); margin-bottom: var(--sp3); }

/* nell'intestazione c'è spazio: stagione e nome restano leggibili */
html[data-tema="tablet"] header.top > span:not(.spazio) { font-size: var(--fs-pic); opacity: .85; }

/* barra in basso: con l'etichetta scritta sotto l'icona, e non a tutta larghezza —
   sul tablet le cinque voci in mezzo allo schermo si prendono meglio che agli angoli */
html[data-tema="tablet"] .ml-nav { justify-content: center; }
html[data-tema="tablet"] .ml-nav > * { flex: 0 1 150px; font-size: var(--fs-min); }
html[data-tema="tablet"] .ml-sheet-corpo { max-width: 620px; margin: 0 auto; border-radius: 20px 20px 0 0; }

/* =========================================================================
   2. Tabelle: restano tabelle (è il vantaggio dello schermo largo)
   ========================================================================= */
html[data-tema="tablet"] th, html[data-tema="tablet"] td { padding: 11px var(--sp2); }
/* l'intestazione resta attaccata sotto la barra del titolo mentre si scorre */
html[data-tema="tablet"] thead th {
  position: sticky; top: calc(var(--top-h) + env(safe-area-inset-top, 0px));
  z-index: 5; background: var(--carta);
  box-shadow: inset 0 -1px 0 var(--bordo);
}
html[data-tema="tablet"] table.schede thead { display: table-header-group; }
html[data-tema="tablet"] .ordina-mob { display: none; }   /* si ordina cliccando l'intestazione */
html[data-tema="tablet"] table input,
html[data-tema="tablet"] table select { min-height: 40px; font-size: 15px; }
html[data-tema="tablet"] td.azioni button { min-height: 38px; padding: 0 var(--sp3); margin-left: 5px; }

/* =========================================================================
   3. Finestre: al centro, non attaccate in fondo
   ========================================================================= */
html[data-tema="tablet"] dialog {
  width: min(620px, 92vw); margin: auto; border-radius: var(--rad); max-height: 88vh;
}
html[data-tema="tablet"] .dlg-piede { justify-content: flex-end; }
html[data-tema="tablet"] .dlg-piede > * { flex: 0 0 auto; }

/* =========================================================================
   4. Home
   ========================================================================= */
html[data-tema="tablet"] .allenamenti { display: flex; gap: var(--sp3); }
html[data-tema="tablet"] .all-box { flex: 1 1 0; min-width: 0; border-radius: 12px; padding: var(--sp3); }
html[data-tema="tablet"] .all-box .tit { font-size: 19px; }
html[data-tema="tablet"] .sezioni { grid-template-columns: repeat(3, 1fr); gap: var(--sp3); }
html[data-tema="tablet"] .voce { padding: var(--sp3) var(--sp4) var(--sp4); }
html[data-tema="tablet"] .voce h2 { font-size: var(--fs-tit); padding-right: 66px; }
html[data-tema="tablet"] .voce p { font-size: var(--fs-pic); padding-right: 66px; min-height: 40px; margin-bottom: var(--sp3); }
html[data-tema="tablet"] .voce .filigrana { opacity: .15; height: 68%; right: 14px; }
@media (max-width: 820px) {
  html[data-tema="tablet"] .sezioni { grid-template-columns: 1fr 1fr; }
  html[data-tema="tablet"] .allenamenti { flex-wrap: wrap; }
  html[data-tema="tablet"] .all-box { flex: 1 1 100%; }
}

/* =========================================================================
   5. Programma
   ========================================================================= */
/* sdraiato la tavolozza sta di fianco come sul computer, in verticale diventa
   la striscia che scorre: a 768 px due colonne lascerebbero le serie senza spazio */
html[data-tema="tablet"] .editor { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp3); }
html[data-tema="tablet"] .editor > * { min-width: 0; }
html[data-tema="tablet"] .palette .titolo-mobile { display: none; }
html[data-tema="tablet"] .chip { min-height: 44px; font-size: 14.5px; border-radius: 9px; }

@media (max-width: 1000px) {
  html[data-tema="tablet"] .editor { grid-template-columns: 1fr; }
  html[data-tema="tablet"] .palette { position: static; }
  html[data-tema="tablet"] .palette .titolo-mobile { display: flex; align-items: center; gap: var(--sp2); }
  html[data-tema="tablet"] .palette .titolo-mobile button { min-height: 38px; padding: 0 12px; font-size: var(--fs-pic); }
  html[data-tema="tablet"] .palette .rotolo { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 5px; }
  html[data-tema="tablet"] .palette .rotolo .chip { flex: 0 0 auto; margin: 0; padding: 0 13px; }
  html[data-tema="tablet"] .palette .rotolo .chip small { display: none; }
  html[data-tema="tablet"] .palette.chiusa .corpo { display: none; }
}

/* la serie resta una riga sola: c'è larghezza — solo con i campi presi bene */
html[data-tema="tablet"] .serie { padding: var(--sp2); gap: var(--sp2); border-radius: 10px; }
html[data-tema="tablet"] .serie input,
html[data-tema="tablet"] .serie select { min-height: 40px; padding: 0 8px; font-size: 15.5px; }
html[data-tema="tablet"] .serie .n { width: 54px; text-align: center; }
html[data-tema="tablet"] .serie .dist { width: 70px; text-align: center; }
html[data-tema="tablet"] .serie .note { min-height: 40px; font-size: 14.5px; padding: 8px 10px; }
html[data-tema="tablet"] .serie .maniglia { font-size: 22px; padding: 0 4px; }
html[data-tema="tablet"] .mods button { width: 42px; min-height: 30px; font-size: 11px; padding: 0; border-radius: 6px; }
html[data-tema="tablet"] .azioni button { min-height: 34px; min-width: 34px; padding: 0; background: none; color: var(--grigio); font-size: 14px; }
html[data-tema="tablet"] .azioni .par { color: var(--acc); }
html[data-tema="tablet"] .azioni .par.on { background: var(--acc); color: #fff; }
html[data-tema="tablet"] .azioni .elimina { color: #c62828; font-size: 16px; }
html[data-tema="tablet"] .pausa select { width: 44px; min-height: 40px; padding: 0; text-align: center; background-image: none; }
html[data-tema="tablet"] .pausa input { width: 72px; min-height: 40px; }
html[data-tema="tablet"] .blocco { border-radius: 12px; padding: var(--sp2) var(--sp2) var(--sp2) 10px; }
html[data-tema="tablet"] .blocco .mini { min-height: 36px; padding: 0 13px; font-size: 13px; }
html[data-tema="tablet"] .blocco input.n { width: 58px; min-height: 40px; }
html[data-tema="tablet"] .barra-giu { display: none; }   /* i totali si vedono già nella scheda */

html[data-tema="tablet"] .totali { gap: var(--sp4) 26px; }
html[data-tema="tablet"] .totali .num { font-size: var(--fs-big); }
html[data-tema="tablet"] .barra-int { height: 26px; }
html[data-tema="tablet"] .barra-int div { font-size: var(--fs-min); }
html[data-tema="tablet"] .legenda { font-size: var(--fs-pic); }

/* calendario: riga larga, bottoni presi col dito */
html[data-tema="tablet"] .barra-cal { gap: var(--sp2); margin-bottom: var(--sp3); }
html[data-tema="tablet"] .barra-cal input[type=date] { width: auto; min-height: var(--tap); font-size: 15px; }
html[data-tema="tablet"] .barra-cal .frec { padding: 0 16px; }
html[data-tema="tablet"] .seduta-riga {
  gap: var(--sp3); padding: var(--sp3) var(--sp2); border-radius: 10px;
}
html[data-tema="tablet"] .seduta-riga .d { min-width: 104px; }
html[data-tema="tablet"] .seduta-riga .tit { font-size: 16.5px; }
html[data-tema="tablet"] .seduta-riga .azioni-r > * { min-height: 40px; padding: 0 var(--sp3); font-size: var(--fs-pic); }
html[data-tema="tablet"] .mese { font-size: var(--fs-min); color: var(--acc); }
html[data-tema="tablet"] .sett { font-size: var(--fs-min); }
html[data-tema="tablet"] .tipo { font-size: var(--fs-min); padding: 3px 9px; }

/* =========================================================================
   6. Appello: un ragazzo per riga, come sul computer, ma coi tasti veri
   ========================================================================= */
html[data-tema="tablet"] .sticky {
  top: calc(var(--top-h) + env(safe-area-inset-top, 0px));
  background: var(--sfondo); padding: var(--sp3) 0; margin-bottom: var(--sp3);
}
html[data-tema="tablet"] .riepilogo { gap: var(--sp4) 24px; }
html[data-tema="tablet"] .riepilogo b { font-size: 24px; color: var(--acc); }
html[data-tema="tablet"] .riepilogo span { font-size: var(--fs-min); }

html[data-tema="tablet"] .atleta {
  padding: var(--sp2) var(--sp3); gap: var(--sp2); margin-bottom: var(--sp2);
  border-radius: 10px; border-left-width: 5px;
}
html[data-tema="tablet"] .atleta .nome { min-width: 150px; font-size: 15.5px; }
html[data-tema="tablet"] .stati { gap: 5px; }
html[data-tema="tablet"] .stati button {
  min-height: var(--tap); padding: 0 11px; font-size: 13.5px; border-radius: 9px; border-width: 2px;
}
html[data-tema="tablet"] .carico { min-width: 250px; gap: var(--sp2); }
html[data-tema="tablet"] .carico input[type=range] { width: 110px; height: 30px; }
html[data-tema="tablet"] .carico .pc { font-size: 14.5px; color: var(--acc); }
html[data-tema="tablet"] .metri-in { width: 88px; min-height: 40px; font-size: 14.5px; padding: 0 4px; text-align: center; }
html[data-tema="tablet"] .rit-in { width: 62px; min-height: 40px; font-size: 14.5px; padding: 0 2px; text-align: center; }
html[data-tema="tablet"] .imp select { width: auto; min-height: 40px; font-size: 14.5px; padding: 0 26px 0 9px; }
html[data-tema="tablet"] .nota-in { flex: 1; min-width: 150px; min-height: 40px; font-size: 14.5px; }
html[data-tema="tablet"] .et { font-size: var(--fs-min); }

/* in verticale non ci sta tutto in riga: si scende a due piani */
@media (max-width: 900px) {
  html[data-tema="tablet"] .atleta { padding: var(--sp3); }
  html[data-tema="tablet"] .atleta .nome { flex: 1; min-width: 0; font-size: 16.5px; }
  html[data-tema="tablet"] .stati { flex: 0 0 auto; }
  html[data-tema="tablet"] .carico { flex: 1 1 100%; min-width: 0; }
  html[data-tema="tablet"] .carico input[type=range] { flex: 1; width: auto; }
  html[data-tema="tablet"] .nota-in { flex: 1 1 100%; }
  html[data-tema="tablet"] .vuota { display: none; }
}

/* =========================================================================
   7. Diario
   ========================================================================= */
html[data-tema="tablet"] .filtri { gap: var(--sp2) var(--sp3); margin-bottom: var(--sp3); }
html[data-tema="tablet"] .filtri select,
html[data-tema="tablet"] .filtri input { width: auto; min-width: 160px; }
html[data-tema="tablet"] .giorno { border-radius: 12px; }
html[data-tema="tablet"] .giorno > summary { padding: var(--sp3); min-height: 56px; }
html[data-tema="tablet"] .giorno .data { min-width: 110px; }
html[data-tema="tablet"] .giorno .tit { font-size: 16.5px; }
html[data-tema="tablet"] .giorno .az { min-height: 38px; padding: 0 var(--sp3); font-size: 13px; background: #eef2f6; color: var(--testo); }
html[data-tema="tablet"] .due { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp4); }
html[data-tema="tablet"] .due > * { min-width: 0; }
@media (max-width: 980px) { html[data-tema="tablet"] .due { grid-template-columns: 1fr; } }
html[data-tema="tablet"] .serie-r { font-size: 14.5px; padding: 6px 0; }
html[data-tema="tablet"] h4 { font-size: var(--fs-min); }
html[data-tema="tablet"] .tag { font-size: var(--fs-min); padding: 2px 8px; }
html[data-tema="tablet"] table.pres select,
html[data-tema="tablet"] table.pres input { width: auto; min-height: 38px; font-size: 14px; padding: 0 8px; }
html[data-tema="tablet"] table.pres input.mini { width: 78px; text-align: center; }
html[data-tema="tablet"] table.pres input.nt { width: 100%; min-width: 150px; }
html[data-tema="tablet"] .agg select { width: auto; min-height: 40px; font-size: 14.5px; }

/* =========================================================================
   8. Classifica
   ========================================================================= */
html[data-tema="tablet"] .podio { gap: var(--sp3); margin-bottom: var(--sp4); }
html[data-tema="tablet"] .posto { min-width: 168px; border-radius: var(--rad); padding: var(--sp3) var(--sp4); }
html[data-tema="tablet"] .posto .pt { font-size: 26px; color: var(--acc); }
html[data-tema="tablet"] .grezzo { font-size: var(--fs-min); }
html[data-tema="tablet"] .spiega { font-size: var(--fs-pic); }
html[data-tema="tablet"] .barretta { height: 7px; }

/* =========================================================================
   9. Atleti · Test · Gare
   ========================================================================= */
html[data-tema="tablet"] .barra { gap: var(--sp2) var(--sp3); }
html[data-tema="tablet"] .barra input[type=search],
html[data-tema="tablet"] .barra select { width: auto; min-width: 180px; }
html[data-tema="tablet"] .barra label {
  display: inline-flex; align-items: center; gap: var(--sp2); min-height: var(--tap);
  text-transform: none; font-size: var(--fs-base); color: var(--testo); margin: 0;
}
html[data-tema="tablet"] .riga2 { gap: var(--sp3); }

html[data-tema="tablet"] .test-riga,
html[data-tema="tablet"] .gara-riga { gap: var(--sp3); padding: var(--sp3) var(--sp2); }
html[data-tema="tablet"] .test-riga .d,
html[data-tema="tablet"] .gara-riga .d { min-width: 96px; }
html[data-tema="tablet"] .chip { min-height: 40px; font-size: var(--fs-pic); }
html[data-tema="tablet"] .chip button { min-height: 32px; min-width: 32px; padding: 0 6px; background: none; color: #c62828; }
html[data-tema="tablet"] .t-in { width: 104px; min-height: 42px; font-size: 15.5px; text-align: center; }
html[data-tema="tablet"] .split-b { min-width: 40px; min-height: 40px; font-size: 14px; background: #fff; color: var(--grigio); box-shadow: inset 0 0 0 1.5px var(--bordo); }
html[data-tema="tablet"] .split-b.pieno { color: var(--acc); box-shadow: inset 0 0 0 2px var(--acc); }
html[data-tema="tablet"] .pos { font-size: var(--fs-min); }
html[data-tema="tablet"] .parziale { font-size: var(--fs-min); }
html[data-tema="tablet"] .sintesi-vel { gap: var(--sp4); padding: var(--sp3); font-size: var(--fs-pic); }
html[data-tema="tablet"] .sintesi-vel b { font-size: 22px; color: var(--acc); }
html[data-tema="tablet"] .prova { border-radius: 12px; }
html[data-tema="tablet"] .prova .testa { padding: var(--sp2) var(--sp3); }
html[data-tema="tablet"] .sommario-gara { gap: 24px; }
html[data-tema="tablet"] .sommario-gara b { font-size: 24px; color: var(--acc); }
html[data-tema="tablet"] .sommario-gara span { font-size: var(--fs-min); }

/* =========================================================================
   10. La mia pagina · Statistiche
   ========================================================================= */
html[data-tema="tablet"] .numeroni { gap: var(--sp3) 26px; }
html[data-tema="tablet"] .numerone { padding: var(--sp3) var(--sp2); border-radius: 12px; }
html[data-tema="tablet"] .numerone b { font-size: var(--fs-big); color: var(--acc); }
html[data-tema="tablet"] .numerone span,
html[data-tema="tablet"] .numerone small { font-size: var(--fs-min); }
html[data-tema="tablet"] .numeroni .num { font-size: var(--fs-big); color: var(--acc); }
html[data-tema="tablet"] .numeroni .et { font-size: var(--fs-min); }
html[data-tema="tablet"] .grafico { height: 240px; }
html[data-tema="tablet"] .distintivo { font-size: var(--fs-pic); min-height: 42px; }
html[data-tema="tablet"] .gr-num, html[data-tema="tablet"] .gr-et { font-size: 11.5px; }
html[data-tema="tablet"] .gr-et2 { font-size: 12.5px; }
html[data-tema="tablet"] .gr-leg { font-size: var(--fs-min); }
html[data-tema="tablet"] .scelte button {
  min-height: 40px; padding: 0 var(--sp3); font-size: var(--fs-pic);
  background: #eef2f6; color: var(--testo); box-shadow: inset 0 0 0 1.5px var(--bordo);
}
html[data-tema="tablet"] .scelte button.on { background: var(--acc); color: #fff; box-shadow: none; }
html[data-tema="tablet"] .griglia2 { gap: var(--sp3); }
@media (max-width: 980px) { html[data-tema="tablet"] .griglia2 { grid-template-columns: 1fr; } }

/* =========================================================================
   11. Impostazioni · Accesso
   ========================================================================= */
html[data-tema="tablet"] .griglia { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp3); }
html[data-tema="tablet"] table.fitta input,
html[data-tema="tablet"] table.fitta select { min-height: 38px; font-size: 14px; padding: 0 7px; }
html[data-tema="tablet"] table.fitta td, html[data-tema="tablet"] table.fitta th { padding: 6px 5px; }
html[data-tema="tablet"] .w-col { height: 38px; padding: 2px; }
html[data-tema="tablet"] .pillola { font-size: var(--fs-min); }
html[data-tema="tablet"] .nota-ruolo { font-size: var(--fs-pic); }
html[data-tema="tablet"] .login-box { max-width: 460px; margin: 8vh auto; }
html[data-tema="tablet"] .login-box .card { padding: var(--sp4) 22px 22px; }
html[data-tema="tablet"] .login-box button { width: 100%; }