/* Elementi intorno alla pagina (stili.js): ingranaggio delle opzioni, valori al passaggio del puntatore,
   tabelle dei dati, strumenti interattivi. Prefisso rm- per non scontrarsi con le classi della pagina. */

.rm-attesa { font: 18px/1.5 system-ui, sans-serif; padding: 40px 20px; text-align: center; }

/* Opzioni: ingranaggio fisso in basso a destra; il pannello si apre sopra. Nascosto se OPZIONI_ATTIVE è false (avvio.js). */
.rm-opzioni { position: fixed; right: 14px; bottom: 14px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  font: 600 14px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; color: #151515; }
.rm-ingranaggio { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); background: rgba(255, 255, 255, .96); color: #193540;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transition: transform .25s; }
.rm-ingranaggio:hover { color: #831619; }
.rm-ingranaggio[aria-expanded="true"] { transform: rotate(60deg); color: #831619; }
.rm-ingranaggio:focus-visible { outline: 3px solid #193540; outline-offset: 2px; }
.rm-pannello { width: min(300px, calc(100vw - 28px)); background: #fff; border: 1px solid rgba(0, 0, 0, .15); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.rm-opzioni[hidden], .rm-pannello[hidden] { display: none; }
.rm-pannello-titolo { margin: 0 0 2px; font-size: 15px; font-weight: 800; }
.rm-interruttore { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; margin-top: 4px; }
.rm-interruttore input { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 26px; border-radius: 999px; background: #c4c7ca; position: relative; cursor: pointer; margin: 0; transition: background .2s; }
.rm-interruttore input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .2s; }
.rm-interruttore input:checked { background: #00a651; }
.rm-interruttore input:checked::after { left: 21px; }
.rm-interruttore input:focus-visible { outline: 3px solid #193540; outline-offset: 2px; }

#rm-suggerimento {
  position: fixed; z-index: 60; pointer-events: none; min-width: 150px;
  background: #fff; color: #151515; border: 1px solid rgba(0, 0, 0, .15); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); padding: 8px 10px; font: 13px/1.4 system-ui, sans-serif;
}
.rm-sugg-titolo { color: #555; margin-bottom: 4px; }
.rm-sugg-riga { display: flex; align-items: center; gap: 8px; }
.rm-sugg-riga strong { font-variant-numeric: tabular-nums; }
.rm-sugg-riga span:last-child { color: #555; }
.rm-sugg-chiave { width: 14px; height: 3px; border-radius: 2px; flex: none; }

.rm-grafico .rm-area { cursor: crosshair; }

.rm-tabella { margin-top: 10px; font-size: 14px; }
.rm-tabella summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.rm-scorri { max-height: 320px; overflow: auto; }
.rm-tabella table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.rm-tabella th, .rm-tabella td { text-align: right; padding: 4px 10px; border-bottom: 1px solid rgba(0, 0, 0, .1); white-space: nowrap; }
.rm-tabella th:first-child, .rm-tabella td:first-child { text-align: left; }
.rm-tabella th { position: sticky; top: 0; background: #fff; }

/* Sul telefono l'ingranaggio è un po' più piccolo e la pagina lascia spazio in fondo, così non copre la fine del piè di pagina
   (solo quando l'ingranaggio c'è). */
@media (max-width: 600px) {
  body:has(.rm-opzioni:not([hidden])) { padding-bottom: 64px; }
  .rm-opzioni { right: 10px; bottom: 10px; }
  .rm-ingranaggio { width: 48px; height: 48px; }
}

@media print { .rm-opzioni { display: none; } }

/* Funzioni interattive (js/interattivi.js), ognuna al suo posto nella pagina (avvio.js, mettiInterattivi) */
.rm-sotto-numero { display: grid; gap: 10px; margin: 0 0 22px; position: relative; z-index: 2; }
[id^="rm-"] { scroll-margin-top: 84px; }
.rm-condividi { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; padding: 0 16px; border: 0; border-radius: 999px;
  background: #193540; color: #fff; font: 800 14px "Open Sans", system-ui, sans-serif; cursor: pointer; }
.rm-condividi:hover { background: #831619; }
.rm-condividi.rm-piccolo { background: #fff; color: #193540; border: 1.5px solid #193540; padding: 0 12px; }
.rm-condividi.rm-piccolo:hover { background: #193540; color: #fff; }
.rm-anteprima-mappa { width: 120px; margin: 8px 0 0; }
.rm-apri-mappa { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #193540;
  background: #fff; color: #193540; font: 800 14px "Open Sans", system-ui, sans-serif; cursor: pointer; }
.rm-apri-mappa:hover, .rm-apri-mappa[aria-expanded="true"] { background: #193540; color: #fff; }
.rm-mappa-sezione { margin: 22px 0; }
/* Strumenti (js/interattivi.js) con le schede e i caratteri della pagina: schede bianche arrotondate, Inter per il testo,
   Archivo condensato maiuscolo per i titoli. "body" davanti: devono vincere sulle regole di interattivi.js, che arrivano dopo. */
body .rmi, body .rmi input, body .rmi select, body .rmi button, body .rmi-pannello-card { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
body .rm-verifica-barra .rmi, body .rm-mappa-sezione .rmi {
  background: #fff; border: 1.5px solid #c9d6da; border-radius: 14px; box-shadow: 0 8px 18px rgba(12, 52, 64, .10); }
body .rmi h3, body .rmi-compatta .rmi-domanda, body .rmi-pannello-testa b {
  font: 800 1.6rem/1.05 "Archivo", "Arial Narrow", sans-serif; font-stretch: 72%; text-transform: uppercase; color: #0b1f26; }
body .rmi-compatta .rmi-domanda { font-size: 1.35rem; }
/* Dentro gli strumenti testi, pulsanti e campi seguono il carattere della pagina (titoli e numeri hanno le loro regole) */
body .rmi :is(a, button, input, select, label, p, li, summary, span, div):not(.rmi-domanda) { font-family: inherit; }