/* decodive.css */
:root {
    --blu: #0b3a5b;
    --blu-chiaro: #e8f1f8;
    --testo: #1d2630;
    --tenue: #5b6b7a;
    --bordo: #d3dde6;
    --sfondo: #f5f8fb;
    --gas0: #1d6fa5;
    --gas1: #d9822b;
    --gas2: #2e8b57;
    --gas3: #8e44ad;
    --gas4: #b5651d;
    --loop: #00838f;
    --tetto: #c0392b;
    --ok: #2e7d32;
    --attenzione: #b26a00;
    --errore: #c62828;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--sfondo);
    color: var(--testo);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

.contenitore { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

a { color: var(--gas0); }

/* Testata */
.testata { background: var(--blu); color: #fff; padding: 22px 0 18px; }
.testata h1 { margin: 0; font-size: 30px; letter-spacing: .5px; }
.sottotitolo { margin: 4px 0 10px; opacity: .9; }
.avviso-breve { margin: 0; font-size: 14px; background: rgba(255,255,255,.12); padding: 8px 12px; border-radius: 6px; display: inline-block; }
.lingue { float: right; }
.lingue a { color: #fff; text-decoration: none; padding: 3px 8px; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; margin-left: 4px; font-size: 14px; }
.lingue a.attiva { background: #fff; color: var(--blu); }

/* Modulo */
.modulo { margin: 20px 0; }
.modi { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.modi a { padding: 8px 16px; border: 1px solid var(--bordo); border-radius: 6px; background: #fff; color: var(--blu); text-decoration: none; font-weight: 600; }
.modi a.attiva { background: var(--blu); border-color: var(--blu); color: #fff; }
.modi.secondari a { padding: 6px 12px; font-size: 14px; font-weight: 600; }
.modi.secondari a.attiva { background: var(--blu-chiaro); color: var(--blu); border-color: var(--blu); }
.modi.immersioni { margin-top: 20px; }
.modi.immersioni a.aggiungi { border-style: dashed; font-weight: 400; }
.serie { margin: 0 0 16px; }
.serie h2 { margin: 0 0 8px; font-size: 17px; }
.serie tr.attiva td { background: var(--blu-chiaro); }
.nota-circuito { margin: 0 0 14px; font-size: 14px; }
fieldset { background: #fff; border: 1px solid var(--bordo); border-radius: 8px; margin: 0 0 14px; padding: 12px 16px 14px; }
legend { font-weight: 700; color: var(--blu); padding: 0 6px; }
.livelli { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; }
.livello, .gas-riga { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.gas-riga { margin-bottom: 8px; }
.griglia-campi + .gas-riga { margin-top: 12px; }
.nome-livello { flex: 0 0 100%; font-size: 14px; font-weight: 600; color: var(--tenue); }
.griglia-campi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; }
.campo { display: flex; flex-direction: column; font-size: 13px; color: var(--tenue); }
.livello .campo, .gas-riga .campo { width: 100px; }
.campo input, .campo select {
    margin-top: 3px; font: inherit; font-size: 16px; color: var(--testo);
    padding: 6px 8px; border: 1px solid var(--bordo); border-radius: 5px; background: #fff; width: 100%;
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--gas0); outline-offset: -1px; }
.spunta { display: block; margin-top: 12px; font-size: 14px; }
.nota { margin: 8px 0 0; font-size: 13px; color: var(--tenue); }
.espandibile { margin: 10px 0; border: 1px solid var(--bordo); border-radius: 6px; padding: 0 12px; }
.espandibile > summary { cursor: pointer; padding: 9px 0; font-weight: 600; color: var(--blu); }
.espandibile[open] { padding-bottom: 12px; }
.azioni { display: flex; gap: 14px; align-items: center; }
button, .secondario {
    font: inherit; border-radius: 6px; cursor: pointer; text-decoration: none;
}
button[type=submit] { background: var(--blu); color: #fff; border: 0; padding: 10px 22px; font-weight: 600; }
button[type=submit]:hover { background: #12507c; }
.secondario { background: #fff; color: var(--blu); border: 1px solid var(--bordo); padding: 7px 14px; font-size: 14px; }

/* Riquadri */
.riquadro { border-radius: 8px; padding: 12px 16px; margin: 16px 0; border: 1px solid var(--bordo); background: #fff; }
.riquadro h2, .riquadro h3 { margin: 0 0 6px; font-size: 17px; }
.riquadro ul { margin: 0; padding-left: 20px; }
.errori { border-color: var(--errore); background: #fdecec; }
.errori h2 { color: var(--errore); }
.avvisi { border-color: var(--attenzione); background: #fff6e5; }
.avvisi h3 { color: var(--attenzione); }
.disclaimer { font-size: 14px; color: var(--tenue); }
.disclaimer h2, .disclaimer h3 { color: var(--testo); }
.disclaimer h3 { margin-top: 12px; font-size: 15px; }

/* Risultato */
.risultato { background: #fff; border: 1px solid var(--bordo); border-radius: 8px; padding: 14px 16px; }
.titolo-risultato { display: flex; justify-content: space-between; align-items: center; }
.titolo-risultato h2 { margin: 0; color: var(--blu); }
.risultato h3 { font-size: 16px; margin: 18px 0 8px; color: var(--blu); }
.sintesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.dato { background: var(--blu-chiaro); border-radius: 6px; padding: 8px 12px; }
.dato span { display: block; font-size: 13px; color: var(--tenue); }
.dato strong { font-size: 18px; }
.dato.deco { background: #fff1e3; }
.dato.rb { background: #e6f4ea; }
.rock table { max-width: 560px; }
.rock td:last-child { text-align: right; }
.bailout { margin-top: 26px; padding-top: 6px; border-top: 3px solid var(--gas1); }
.bailout > h3 { font-size: 18px; }
.bailout .colonne { grid-template-columns: minmax(240px, 1fr) 2fr; }

.colonne { display: grid; grid-template-columns: minmax(240px, 1fr) 2.4fr; gap: 18px; align-items: start; }
.colonne > * { min-width: 0; }
.lavagnetta table { font-size: 17px; }
.lavagnetta td:first-child { font-weight: 700; }
tr.facoltativa td { color: var(--tenue); font-style: italic; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
th { font-size: 13px; color: var(--tenue); font-weight: 600; }
.dettaglio { font-size: 14px; }
.dettaglio tr.fase-sosta td, .dettaglio tr.fase-sosta_cambio td, .dettaglio tr.fase-sicurezza td { background: #fbf6ee; }
.dettaglio tr.fase-cambio td, .dettaglio tr.fase-bailout td, .dettaglio tr.fase-setpoint td { font-weight: 600; }
.scorre { overflow-x: auto; }
.stato-ok { color: var(--ok); font-weight: 600; }
.stato-riserva { color: var(--attenzione); font-weight: 600; }
.stato-finito { color: var(--errore); font-weight: 600; }
small { color: var(--tenue); }

.pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pallino.gas0, .tratto.gas0 { background: var(--gas0); }
.pallino.gas1, .tratto.gas1 { background: var(--gas1); }
.pallino.gas2, .tratto.gas2 { background: var(--gas2); }
.pallino.gas3, .tratto.gas3 { background: var(--gas3); }
.pallino.gas4, .tratto.gas4 { background: var(--gas4); }
.pallino.loop, .tratto.loop { background: var(--loop); }

/* Grafico */
.grafico { width: 100%; min-width: 560px; height: auto; display: block; }
.grafico .griglia { stroke: #e3e9ef; stroke-width: 1; }
.grafico .asse { fill: var(--tenue); font-size: 12px; }
.grafico .profilo { fill: none; stroke-width: 3; stroke-linejoin: round; }
.grafico .profilo.gas0 { stroke: var(--gas0); }
.grafico .profilo.gas1 { stroke: var(--gas1); }
.grafico .profilo.gas2 { stroke: var(--gas2); }
.grafico .profilo.gas3 { stroke: var(--gas3); }
.grafico .profilo.gas4 { stroke: var(--gas4); }
.grafico .profilo.loop { stroke: var(--loop); }
.grafico .tetto { fill: none; stroke: var(--tetto); stroke-width: 1.5; stroke-dasharray: 5 4; }
.grafico .etichetta { fill: var(--testo); font-size: 12px; font-weight: 600; }
.legenda { font-size: 13px; color: var(--tenue); display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; }
.tratto { display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: 3px; }
.tratto.tetto { background: repeating-linear-gradient(90deg, var(--tetto) 0 5px, transparent 5px 9px); }

.piede { color: var(--tenue); font-size: 13px; padding: 10px 0 28px; }

@media (max-width: 720px) {
    .colonne, .bailout .colonne { grid-template-columns: 1fr; }
    .testata h1 { font-size: 25px; }
    .livello .campo, .gas-riga .campo { width: calc(50% - 6px); }
}

@media print {
    body { background: #fff; font-size: 12px; }
    .modulo, .lingue, #stampa, .avviso-breve, .piede, .modi.immersioni { display: none; }
    .bailout { page-break-before: always; }
    .testata { background: none; color: #000; padding: 0 0 6px; border-bottom: 2px solid #000; }
    .risultato, .riquadro { border: 0; padding: 0; }
    .colonne { grid-template-columns: 1fr 2fr; }
    .dato { border: 1px solid #999; }
    .risultato { page-break-after: auto; }
    .disclaimer { font-size: 10px; }
    .grafico { min-width: 0; }
}