/* Stile comune dei calcolatori geoapp (core.geoapp.eu/calcolatori/).
   Le app vivono in un iframe del portale: colonna centrale, niente larghezze fisse oltre i 960px, leggibile anche stretto.
   Classi: .calc (pagina), .testata, .sezione (riquadro con h2), .campi/.campo (etichetta | valore + unità),
   .scelte (.colonna), .pulsanti (button.primario per Calcola), .risultati, .errore, .avviso, .esito-ok/.esito-no,
   .tabella, .figura, .nota. */

:root {
    --testo: #2f3640;
    --testo-tenue: #6b7480;
    --accento: #1d6fb8;
    --accento-scuro: #155a96;
    --accento-chiaro: #e8f1fa;
    --bordo: #d8dee6;
    --sfondo: #ffffff;
    --sfondo-sezione: #fafbfc;
    --errore: #b3261e;
    --errore-chiaro: #fdecea;
    --ok: #1e7b45;
    --raggio: 6px;
}

html { -webkit-text-size-adjust: 100%; }

body.calc-corpo {
    margin: 0;
    background: var(--sfondo);
    color: var(--testo);
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

.calc {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

.calc *, .calc *::before, .calc *::after { box-sizing: border-box; }

/* Testata: nome dell'app */
.testata {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--accento);
    padding-bottom: 8px;
    margin-bottom: 16px;
}
.testata h1 {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    color: var(--testo);
}
.testata .sottotitolo { color: var(--testo-tenue); font-size: 13px; }
.testata a { color: var(--accento); text-decoration: none; font-size: 13px; }
.testata a:hover { text-decoration: underline; }

/* Riquadri */
.sezione {
    background: var(--sfondo-sezione);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.sezione > h2 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accento-scuro);
}
.sezione > h3 { margin: 14px 0 8px; font-size: 14px; font-weight: 600; }
.sezione p { margin: 0 0 10px; }

/* Campi: etichetta a sinistra, valore e unità a destra */
.campi { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 8px; align-items: center; }
.campo { display: contents; }
.campo > label, .campo > .etichetta { color: var(--testo); }
.campo > .valore { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.unita { color: var(--testo-tenue); font-size: 13px; min-width: 44px; }
.simbolo { color: var(--testo-tenue); font-size: 13px; font-style: italic; min-width: 22px; text-align: right; }

.calc input[type="text"], .calc input[type="number"], .calc select, .calc textarea {
    font: inherit;
    color: var(--testo);
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 4px;
    padding: 5px 8px;
    margin: 0;
}
.calc input[type="text"], .calc input[type="number"] { width: 120px; text-align: right; }
.calc input[type="text"].largo { width: 220px; text-align: left; }
.calc select { min-width: 120px; max-width: 100%; }
.calc input:focus, .calc select:focus, .calc textarea:focus { outline: 2px solid var(--accento-chiaro); border-color: var(--accento); }
.calc input[readonly] { background: var(--accento-chiaro); border-color: transparent; font-weight: 600; }
.calc input[type="checkbox"], .calc input[type="radio"] { width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: -2px; accent-color: var(--accento); }

.scelte { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.scelte label { cursor: pointer; }
.scelte.colonna { flex-direction: column; gap: 4px; margin-bottom: 8px; }   /* opzioni con descrizioni lunghe, una sotto l'altra */

/* Pulsanti */
.pulsanti { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 4px 0 16px; }
.calc button, .calc input[type="submit"], .calc input[type="button"] {
    font: inherit;
    font-size: 14px;
    min-width: 96px;
    height: 34px;
    padding: 0 14px;
    border-radius: 4px;
    border: 1px solid var(--bordo);
    background: #fff;
    color: var(--testo);
    cursor: pointer;
}
.calc button:hover, .calc input[type="submit"]:hover, .calc input[type="button"]:hover { border-color: var(--accento); color: var(--accento); }
.calc button.primario, .calc input.primario {
    background: var(--accento);
    border-color: var(--accento);
    color: #fff;
    font-weight: 600;
}
.calc button.primario:hover, .calc input.primario:hover { background: var(--accento-scuro); color: #fff; }
/* Pulsanti disattivati (es. «Salva PDF» ed «Esporta» prima di Calcola): devono sembrarlo */
.calc button:disabled, .calc input[type="submit"]:disabled, .calc input[type="button"]:disabled,
.calc button:disabled:hover, .calc input[type="submit"]:disabled:hover, .calc input[type="button"]:disabled:hover {
    opacity: .45;
    cursor: not-allowed;
    border-color: var(--bordo);
    color: var(--testo-tenue);
    background: #f3f4f6;
}

.caricamento { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; margin: -8px 0 16px; }

/* Risultati, errori, avvisi */
.risultati { background: var(--accento-chiaro); border-color: #bcd6ee; }
.risultati > h2 { color: var(--accento-scuro); }
.errore {
    background: var(--errore-chiaro);
    border: 1px solid #f3c2bd;
    color: var(--errore);
    border-radius: var(--raggio);
    padding: 10px 14px;
    margin-bottom: 16px;
}
.errore ul { margin: 0; padding-left: 18px; }
.avviso { color: var(--testo-tenue); font-size: 13px; }
/* anche sugli input readonly: .calc input.esito-* ha la stessa specificità di .calc input[type="text"] e viene dopo */
.calc .esito-ok, .calc input.esito-ok { color: var(--ok); font-weight: 600; }
.calc .esito-no, .calc input.esito-no { color: var(--errore); font-weight: 600; }

/* Messaggi di jQuery Validate (calcolointerassedreni) */
.calc label.error { color: var(--errore); font-size: 13px; }
.calc input.error, .calc select.error { border-color: var(--errore); }

/* Tabelle */
.tabella-contenitore { overflow-x: auto; }
.tabella { border-collapse: collapse; width: 100%; font-size: 14px; background: #fff; }
.tabella th, .tabella td { border-bottom: 1px solid var(--bordo); padding: 6px 8px; text-align: right; }
.tabella th { background: var(--accento-chiaro); color: var(--accento-scuro); font-weight: 600; }
.tabella td:first-child, .tabella th:first-child { text-align: left; }
.tabella tr:nth-child(even) td { background: #f7f9fb; }
.tabella input[type="text"] { width: 90px; }
.tabella select { max-width: 26em; }   /* opzioni lunghe (es. categorie di Combinazioni delle azioni) */

/* Testo dei risultati allineato con spazi e tab (Tempo di corrivazione) */
.calc textarea.testo-risultati { width: 100%; font-family: Consolas, 'Courier New', monospace; font-size: 13px; white-space: pre; tab-size: 8; }

/* Figure e schemi */
.figura { text-align: center; margin: 8px 0; }
.figura img, .figura svg, .figura canvas { max-width: 100%; height: auto; }
.figure { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: flex-start; }

.nota { color: var(--testo-tenue); font-size: 13px; }

/* Colonne affiancate (dati | figura) */
.affiancati { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 620px) {
    .calc { padding: 10px; }
    .campi { grid-template-columns: 1fr; row-gap: 2px; }
    .campo > .valore { justify-content: flex-start; margin-bottom: 8px; }
    .affiancati { grid-template-columns: 1fr; }
    .pulsanti { justify-content: stretch; }
    .pulsanti button { flex: 1; }
}