/* ═══════════════════════════════════════════════════════════════════
   LA GRAFICA DEI DUE STRUMENTI GRATUITI
   ═══════════════════════════════════════════════════════════════════
   Si appoggia a home.css: qui ci sono solo i pezzi che servono a
   queste due pagine e da nessun'altra parte.
   ═══════════════════════════════════════════════════════════════════ */

.pagina-strumento{ padding-top:74px }
.corpo-strumento{ min-height:60vh }

.barra .menu a.qui{ color:var(--oro-chiaro); font-weight:700 }
.barra .lingua{ text-decoration:none }

/* ─────────────── La testata della pagina ─────────────── */

.testa-strumento{
  padding:44px 0 30px;
  border-bottom:1px solid var(--bordo);
  background:
    radial-gradient(62% 130% at 14% 0%, rgba(212,175,55,.09), transparent 64%),
    var(--nero);
}
.testa-strumento .occhietto{
  display:inline-block; margin-bottom:13px;
  font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--oro);
}
.testa-strumento h1{ font-size:clamp(28px, 4.2vw, 46px) }
.testa-strumento .sottotitolo{
  margin:16px 0 0; max-width:46em;
  font-size:15px; color:#C4C4CC;
}

/* ─────────────── Il modulo grande ─────────────── */

.modulo-grande{
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:24px;
}
.modulo-grande .campi{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.modulo-grande .campo{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.modulo-grande .campo--largo{ grid-column:1 / -1 }
.modulo-grande .etichetta-campo{
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--grigio-2);
}
.modulo-grande input, .modulo-grande select{
  width:100%; min-width:0;
  padding:13px 15px;
  border-radius:9px;
  border:1px solid var(--bordo);
  background:rgba(255,255,255,.03);
  color:var(--bianco);
  font-family:var(--sans);
  font-size:15px;
  outline:none;
  transition:border-color .2s ease;
}
.modulo-grande input::placeholder{ color:#5a5a64 }
.modulo-grande input:focus, .modulo-grande select:focus{ border-color:var(--oro) }
.modulo-grande select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A9B2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
  background-size:15px; padding-right:36px;
}
.modulo-grande select option{ background:#101018; color:var(--bianco) }

.riga-invio{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:20px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.07);
}
.minuscolo{ margin:0; font-size:12px; color:var(--grigio-2); line-height:1.55 }

/* il pulsante mentre sta lavorando */
.bottone.sta-lavorando{ opacity:.75; pointer-events:none }
.bottone .rotella{
  width:14px; height:14px; border-radius:99px;
  border:2px solid rgba(0,0,0,.25);
  border-top-color:rgba(0,0,0,.75);
  animation:gira .7s linear infinite;
}
@keyframes gira{ to{ transform:rotate(360deg) } }

/* ─────────────── Gli avvisi ─────────────── */

.avviso--rosso{
  margin-top:16px;
  border-color:rgba(248,113,113,.4);
  background:rgba(248,113,113,.07);
  color:#F0B4B4;
}
.avviso--rosso b{ color:#FFD9D9 }

/* ─────────────── La pagella ─────────────── */

.pagella{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:28px;
  align-items:center;
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:26px 28px;
}
.voto{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:152px; height:152px; border-radius:99px;
  border:3px solid var(--bordo);
  flex-shrink:0;
}
.voto--alto  { border-color:rgba(52,211,153,.55); background:rgba(52,211,153,.06) }
.voto--medio { border-color:rgba(212,175,55,.55); background:rgba(212,175,55,.06) }
.voto--basso { border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.06) }
.voto .numerone{
  font-family:var(--serif); font-size:52px; font-weight:600;
  color:var(--bianco); line-height:1;
}
.voto--alto  .numerone{ color:#6EE7B7 }
.voto--medio .numerone{ color:var(--oro-chiaro) }
.voto--basso .numerone{ color:#FCA5A5 }
.voto .su{ font-size:12px; color:var(--grigio-2); margin-top:2px }
.voto .che-cosa{
  font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--grigio-2); margin-top:7px; text-align:center; padding:0 12px;
}

.pagella-testo h2{ font-size:24px; word-break:break-word }
.pagella-testo .riassunto{ margin:8px 0 0; font-size:15px }
.rosso{ color:#FCA5A5 } .verde{ color:#6EE7B7 } .giallo{ color:var(--oro-chiaro) }

.avvertenza-google{
  margin-top:16px; padding:13px 16px;
  border-radius:10px;
  border:1px solid var(--bordo-oro);
  background:rgba(212,175,55,.07);
  font-size:12.5px; line-height:1.6; color:#C8C8CE;
}
.avvertenza-google b{ display:block; color:var(--oro-chiaro); margin-bottom:4px }

/* ─────────────── Le sei aree ─────────────── */

.aree{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.area{
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:11px;
  padding:14px 16px;
}
.area--spenta{ opacity:.45 }
.area-testa{ display:flex; justify-content:space-between; align-items:baseline; gap:10px }
.area-nome{ font-size:13px; color:#C4C4CC }
.area-voto{ font-family:var(--serif); font-size:21px; font-weight:600; color:var(--bianco) }
.barra-voto{
  height:5px; border-radius:99px; margin:9px 0 6px;
  background:rgba(255,255,255,.08); overflow:hidden;
}
.barra-voto span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--oro-scuro), var(--oro-chiaro));
}
.area-peso{ font-size:10.5px; color:var(--grigio-2) }
.nota-saltate{ margin-top:12px }

/* ─────────────── I tre problemi ─────────────── */

.tre-problemi{ display:grid; gap:12px }
.problema{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px;
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-left-width:3px;
  border-radius:var(--raggio);
  padding:18px 20px;
}
.problema--grave{ border-left-color:#F87171 }
.problema--attenzione{ border-left-color:var(--oro) }
.problema .ordine{
  font-family:var(--serif); font-size:30px; font-weight:600;
  color:var(--oro); line-height:1;
}
.problema h3{ font-size:17.5px; margin-bottom:7px }
.problema p{ margin:0 0 5px; font-size:13.5px; line-height:1.65 }
.problema .perche b{ color:#C8C8CE }
.problema .fare{ color:var(--oro-chiaro) }
.problema .fare b{ color:var(--oro-chiaro) }

/* ─────────────── La velocita' ─────────────── */

.numeri-velocita{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
}
.numeri-velocita div{
  background:var(--pannello); border:1px solid var(--bordo);
  border-radius:11px; padding:15px 16px;
}
.numeri-velocita b{
  display:block; font-family:var(--serif); font-size:25px;
  font-weight:600; color:var(--oro-chiaro); line-height:1.1;
}
.numeri-velocita span{ display:block; margin-top:4px; font-size:11px; color:var(--grigio-2) }

.elenco-occasioni{ list-style:none; margin:8px 0 0; padding:0 }
.elenco-occasioni li{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06);
  font-size:13px; color:#C4C4CC;
}
.elenco-occasioni li:last-child{ border-bottom:0 }
.guadagno{ color:var(--oro-chiaro); font-weight:700; white-space:nowrap }

/* ─────────────── L'elenco completo ─────────────── */

.gruppo-controlli summary{ display:flex; align-items:center; gap:12px }
.conteggini{
  display:inline-flex; align-items:center; gap:5px;
  margin-left:auto; margin-right:8px;
  font-family:var(--sans); font-size:12px; color:var(--grigio-2);
}
.pallino{ width:8px; height:8px; border-radius:99px; display:inline-block }
.pallino.rosso{ background:#F87171 } .pallino.giallo{ background:var(--oro) }
.pallino.verde{ background:#34D399 }

.controllo{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
.controllo:last-child{ border-bottom:0 }
.controllo .segno{
  width:9px; height:9px; border-radius:99px; margin-top:6px;
  background:var(--grigio-2);
}
.controllo--bene .segno{ background:#34D399 }
.controllo--attenzione .segno{ background:var(--oro) }
.controllo--grave .segno{ background:#F87171 }
.controllo--non-applicabile{ opacity:.6 }
.controllo b{ font-size:14px; color:var(--bianco) }
.controllo p{ margin:4px 0 0; font-size:12.5px; line-height:1.6 }
.controllo .fare{ color:var(--oro-chiaro) }

/* ─────────────── La chiamata finale ─────────────── */

.chiamata{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:24px; align-items:center;
  border:1px solid var(--bordo-oro);
  border-radius:var(--raggio);
  padding:26px 28px;
  background:
    radial-gradient(70% 160% at 8% 50%, rgba(212,175,55,.1), transparent 68%),
    var(--pannello-2);
}
.chiamata h2{ font-size:23px }
.chiamata p{ margin:9px 0 0; font-size:13.5px; max-width:52em }
.bottoni-chiamata{ display:flex; flex-direction:column; gap:10px; flex-shrink:0 }
.bottoni-chiamata .bottone{ white-space:nowrap }
.nota-fonti{ margin-top:16px }

/* ═══════════ IL CALCOLATORE DELLA PUBBLICITA' ═══════════ */

.scenari{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px;
}
.scenario{
  background:var(--pannello);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:20px;
}
.scenario--realistico{ border-color:var(--bordo-oro); background:var(--pannello-2) }
.scenario h3{ font-size:17px; display:flex; align-items:center; gap:9px }
.scenario .quando{ font-size:11px; color:var(--grigio-2); margin:4px 0 14px }
.scenario dl{ margin:0 }
.scenario .voce-n{
  display:flex; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06);
  font-size:13px;
}
.scenario .voce-n:last-child{ border-bottom:0 }
.scenario .voce-n dt{ color:var(--grigio) }
.scenario .voce-n dd{ margin:0; color:var(--bianco); font-weight:700; text-align:right }
.scenario .voce-n.forte dd{ color:var(--oro-chiaro); font-size:15px }

.pareggio{
  margin-top:16px; padding:18px 20px;
  border-radius:var(--raggio);
  border:1px solid var(--bordo);
  background:var(--pannello);
}
.pareggio.buono{ border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.05) }
.pareggio.cattivo{ border-color:rgba(248,113,113,.45); background:rgba(248,113,113,.05) }
.pareggio b{ color:var(--bianco) }
.pareggio .grande{ font-family:var(--serif); font-size:26px; color:var(--oro-chiaro) }

.fonte{
  display:inline-block;
  font-size:9px; font-weight:800; letter-spacing:.08em;
  padding:3px 8px; border-radius:99px; vertical-align:2px;
  margin-left:8px; white-space:nowrap;
}
.fonte--stima{ color:var(--oro-chiaro); border:1px solid var(--bordo-oro); background:rgba(212,175,55,.1) }
.fonte--tua{ color:#6EE7B7; border:1px solid rgba(52,211,153,.4); background:rgba(52,211,153,.08) }
.fonte--assente{ color:var(--grigio-2); border:1px solid var(--bordo) }

.affidabilita{ display:inline-flex; align-items:center; gap:6px; font-size:11px }
.affidabilita i{ width:7px; height:7px; border-radius:99px; background:var(--grigio-2) }
.affidabilita.alta i{ background:#34D399 }
.affidabilita.media i{ background:var(--oro) }
.affidabilita.bassa i{ background:#F87171 }

.confronto-mercati{ width:100%; border-collapse:collapse; font-size:13px }
.confronto-mercati th, .confronto-mercati td{
  padding:11px 13px; text-align:left;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.confronto-mercati thead th{
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--grigio-2); background:rgba(255,255,255,.025);
}
.confronto-mercati td.n{ text-align:right; color:var(--bianco); font-weight:600 }

/* ═══════════════════ TELEFONO ═══════════════════ */

@media (max-width:760px){
  .pagella{ grid-template-columns:minmax(0,1fr); gap:20px; padding:20px; text-align:center }
  .voto{ margin:0 auto }
  .pagella-testo h2{ font-size:20px }
  .avvertenza-google{ text-align:left }
  .aree{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .numeri-velocita{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .chiamata{ grid-template-columns:minmax(0,1fr); padding:20px }
  .bottoni-chiamata .bottone{ width:100% }
  .scenari{ grid-template-columns:minmax(0,1fr) }
  .problema{ gap:12px; padding:16px }
  .problema .ordine{ font-size:24px }
}

@media (max-width:660px){
  .modulo-grande{ padding:18px }
  .modulo-grande .campi{ grid-template-columns:minmax(0,1fr) }
  .riga-invio{ flex-direction:column; align-items:stretch; gap:12px }
  .riga-invio .bottone{ width:100%; padding:15px }
  .testa-strumento{ padding:32px 0 24px }
  .aree{ grid-template-columns:minmax(0,1fr) }
  /* la tabella dei mercati diventa un elenco */
  .confronto-mercati, .confronto-mercati tbody, .confronto-mercati tr,
  .confronto-mercati th, .confronto-mercati td{ display:block; width:auto }
  .confronto-mercati thead{ display:none }
  .confronto-mercati tr{ border:1px solid var(--bordo); border-radius:11px; padding:12px 14px; margin-bottom:10px }
  .confronto-mercati td{ border:0; padding:3px 0; display:flex; justify-content:space-between; gap:12px }
  .confronto-mercati td::before{ content:attr(data-nome); color:var(--grigio-2); font-size:12px }
}