/* Running Club Comacchio — i colori vengono dal logo: azzurro del corridore, marrone del Trepponti, verde */
:root{
  --azzurro:#1aa3dc; --azzurro-scuro:#0f7fb0; --marrone:#c4966a; --verde:#7cc243;
  --fondo:#f4f7f9; --carta:#ffffff; --testo:#1d2733; --tenue:#66727f; --linea:#dde3e8;
  --rosso:#d64545; --giallo:#e9a400;
  --raggio:14px;
}
@media (prefers-color-scheme: dark){
  :root{ --fondo:#0f1418; --carta:#182027; --testo:#e7edf2; --tenue:#98a5b1; --linea:#2a343d; }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo); color:var(--testo); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     min-height:100vh; display:flex; flex-direction:column}
a{color:var(--azzurro-scuro)}
@media (prefers-color-scheme: dark){ a{color:var(--azzurro)} }

.testata{display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--carta); border-bottom:3px solid var(--azzurro);
         position:sticky; top:0; z-index:5}
.testata-logo{width:52px; height:auto}
.testata-testo{flex:1; display:flex; flex-direction:column; line-height:1.25}
.testata-testo span{color:var(--tenue); font-size:13px}

.schede{display:flex; gap:6px; overflow-x:auto; padding:10px 16px; background:var(--carta); border-bottom:1px solid var(--linea);
        position:sticky; top:75px; z-index:4; scrollbar-width:none}
.schede::-webkit-scrollbar{display:none}
.schede button{flex:none; border:1px solid var(--linea); background:transparent; color:var(--testo); border-radius:999px;
               padding:7px 14px; font:inherit; font-size:14px; cursor:pointer; white-space:nowrap}
.schede button.attiva{background:var(--azzurro); border-color:var(--azzurro); color:#fff}

main{flex:1; width:100%; max-width:980px; margin:0 auto; padding:16px}
.attesa{color:var(--tenue); text-align:center; padding:40px 0}
h1{font-size:22px; margin:6px 0 14px} h2{font-size:18px; margin:22px 0 10px} h3{font-size:16px; margin:0 0 6px}

.riquadro{background:var(--carta); border:1px solid var(--linea); border-radius:var(--raggio); padding:16px; margin-bottom:14px}
.griglia{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:14px}
.numero{background:var(--carta); border:1px solid var(--linea); border-radius:var(--raggio); padding:14px}
.numero b{display:block; font-size:26px; line-height:1.1}
.numero span{color:var(--tenue); font-size:13px}
.numero.attenzione b{color:var(--rosso)}

.tasto{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:10px; padding:10px 16px;
       background:var(--azzurro); color:#fff; font:inherit; font-weight:600; cursor:pointer; text-decoration:none}
.tasto:hover{background:var(--azzurro-scuro)}
.tasto.secondario{background:transparent; color:var(--testo); border:1px solid var(--linea)}
.tasto.pericolo{background:var(--rosso)}
.tasto.verde{background:#4f9a22}
.tasto:disabled{opacity:.5; cursor:default}
.tasto-piccolo{border:1px solid var(--linea); background:transparent; color:var(--testo); border-radius:8px; padding:5px 10px; font:inherit; font-size:13px; cursor:pointer}
.fila{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.fila.spazio{justify-content:space-between}
:focus-visible{outline:3px solid var(--marrone); outline-offset:2px}

label{display:block; font-size:13px; color:var(--tenue); margin:10px 0 4px}
input,select,textarea{width:100%; padding:10px 12px; border:1px solid var(--linea); border-radius:10px; background:var(--carta); color:var(--testo); font:inherit}
textarea{min-height:90px}
.campi{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 12px}
.spunta{display:flex; gap:8px; align-items:center; color:var(--testo); font-size:15px}
.spunta input{width:auto}

.tabella{width:100%; border-collapse:collapse; font-size:14px}
.tabella th{text-align:left; color:var(--tenue); font-weight:600; border-bottom:2px solid var(--linea); padding:8px 6px}
.tabella td{border-bottom:1px solid var(--linea); padding:8px 6px; vertical-align:top}
.tabella tr.cliccabile{cursor:pointer} .tabella tr.cliccabile:hover td{background:rgba(26,163,220,.07)}
.scorre{overflow-x:auto}
.destra{text-align:right} .tenue{color:var(--tenue)} .piccolo{font-size:13px}

.bollo{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; background:var(--linea); color:var(--testo)}
.bollo.ok{background:#dff2d0; color:#2f6b10} .bollo.no{background:#fbdcdc; color:#9b1c1c} .bollo.forse{background:#fdeec8; color:#7a5300}
@media (prefers-color-scheme: dark){ .bollo.ok{background:#24401a; color:#b5e39a} .bollo.no{background:#4a1d1d; color:#f5b5b5} .bollo.forse{background:#4a3a12; color:#f5d98b} }

.gara{display:flex; gap:14px; align-items:flex-start}
.gara-data{flex:none; width:58px; text-align:center; background:var(--azzurro); color:#fff; border-radius:12px; padding:6px 0; line-height:1.15}
.gara-data b{display:block; font-size:22px} .gara-data span{font-size:12px; text-transform:uppercase}
.gara-corpo{flex:1; min-width:0}

.finestra{position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:flex-start; justify-content:center; z-index:20; overflow-y:auto; padding:30px 12px}
.finestra[hidden]{display:none}
.finestra-box{background:var(--carta); border-radius:var(--raggio); padding:20px; width:100%; max-width:640px; position:relative}
.finestra-chiudi{position:absolute; top:10px; right:10px; border:0; background:transparent; color:var(--testo); font-size:20px; cursor:pointer}

.avviso{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:#1d2733; color:#fff; padding:10px 18px; border-radius:10px; z-index:30; max-width:90vw}
.avviso.errore{background:var(--rosso)}

.accesso{max-width:400px; margin:20px auto}
.accesso img{display:block; width:180px; margin:0 auto 10px}
.piede{text-align:center; color:var(--tenue); font-size:12px; padding:20px}
.nascosto{display:none !important}

@media print{
  .testata,.schede,.piede,.no-stampa,.finestra-chiudi{display:none !important}
  body{background:#fff; color:#000}
  .finestra{position:static; background:none; padding:0}
  .finestra-box{max-width:none; border:0}
  main{display:none}
}