/* =====================================================================
   pronostico.css — Foglio di stile generale del nuovo standard
   Pronostico.it · restyle 2026 (Giulio)

   Casa unica per le componenti normalizzate del nuovo standard.
   Posizione: web root del sito (accanto a index.php), NON in /css/.
   Caricato DOPO style-site.css, così vince su cascata e specificità.

   Palette di riferimento:
     --blu #065386 · --azzurro #03a9f4 · --oro #ffcc02
     --ink #0f2c43 · --muted #5b7689 · --line #e6edf2 · --track #eaeff3

   Indice
     1. Box (card) arrotondati
     2. Titolo di sezione
     3. Sotto-titolo di sezione
     4. Valore fattore (Sorpresa / Ribaltamento)
     5. Alert informativo brand
     6. Cassa / rendimento (form profitto a comparsa)
   ===================================================================== */


/* ------------------------------------------------------------------ */
/* 1. BOX (CARD) — arrotondati, allineati a pronostico principale e   */
/*    tabellino. Barra blu superiore SOLO sulle due card hero (pbox,  */
/*    psto), che la portano già: qui le card dati restano pulite.     */
/*    .main-box è usato in tutto il sito, quindi questo arrotonda i    */
/*    box ovunque (effetto voluto: coerenza).                          */
/* ------------------------------------------------------------------ */
.main-box{
  border:1px solid #e6edf2;          /* --line */
  border-radius:16px;
  box-shadow:0 1px 2px rgba(15,44,67,.04);
}


/* ------------------------------------------------------------------ */
/* 2. TITOLO DI SEZIONE                                                */
/*    Markup: <h2 class="titolo-sezione"> dentro un .main-box          */
/*    Specificità .main-box h2.titolo-sezione (0,2,1) batte la         */
/*    vecchia .main-box h2 (0,1,1) senza !important.                   */
/* ------------------------------------------------------------------ */
.main-box h2.titolo-sezione{
  margin:0;
  padding:0;
  font-size:15px;
  line-height:1.3;
  font-weight:800;
  color:#0f2c43;            /* --ink */
  letter-spacing:.1px;
}
.main-box h2.titolo-sezione a{ color:#5b7689; font-size:.8em; text-decoration:none; }
.main-box h2.titolo-sezione a:hover{ color:#065386; }
/* titolo posizionato direttamente nel body (es. Percentuali 1X2):
   gli do lo stesso respiro in alto che gli altri prendono dall'header */
.main-box .main-box-body > h2.titolo-sezione:first-child{ padding-top:16px; }
@media(max-width:480px){ .main-box h2.titolo-sezione{ font-size:14px } }


/* ------------------------------------------------------------------ */
/* 3. SOTTO-TITOLO DI SEZIONE                                          */
/*    Sottoinsieme di un titolo principale (es. "Statistiche          */
/*    Under / Over Pacific" dentro "Statistiche trasferta Pacific").   */
/*    Markup: <h4 class="pull-left sottotitolo-sezione">               */
/* ------------------------------------------------------------------ */
.main-box h4.sottotitolo-sezione{
  float:none;                /* da sottotitolo non serve il pull-left */
  margin:20px 0 12px;
  padding:0;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#5b7689;            /* --muted */
}


/* ------------------------------------------------------------------ */
/* 4. VALORE FATTORE (Sorpresa / Ribaltamento) — pill                 */
/*    Markup: <span class="valore-fattore">Bassa</span>               */
/* ------------------------------------------------------------------ */
.valore-fattore{
  display:inline-flex;
  align-items:center;
  margin-top:6px;
  font-weight:800;
  font-size:15px;
  padding:6px 14px;
  border-radius:11px;
  background:rgba(6,83,134,.10);
  color:#065386;            /* --blu */
}


/* ------------------------------------------------------------------ */
/* 5. ALERT INFORMATIVO brand                                          */
/*    Stesso stile dell'alert del form profitto/perdita.              */
/*    Markup esistente: <div class="alert alert-info alert-row">       */
/* ------------------------------------------------------------------ */
.alert-info.alert-row{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:11px 14px;
  border:0;
  border-radius:12px;
  background:rgba(3,169,244,.10);
  color:#065386;            /* --blu */
  font-size:14px;
  font-weight:600;
  line-height:1.35;
}
.alert-info.alert-row .fa{ color:#03a9f4; }   /* --azzurro */


/* ------------------------------------------------------------------ */
/* 6. CASSA / RENDIMENTO — blocco profitto/perdita a comparsa          */
/*    (ex stile inline di dettaglio_form-profitto.php; Variante A:     */
/*    Selezione + importo + Salva su una sola riga, anche su mobile)   */
/* ------------------------------------------------------------------ */
.cassa-toggle{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:1.5px dashed #cdd9e2;border-radius:11px;
  color:#0277b8;font-family:inherit;font-weight:700;font-size:13.5px;
  padding:8px 14px;cursor:pointer;transition:border-color .15s,background .15s;
}
.cassa-toggle:hover{border-color:#03a9f4;background:rgba(3,169,244,.05)}
.cassa-toggle .plus{font-size:16px;line-height:1;font-weight:800}
.cassa-toggle[aria-expanded="true"]{display:none}
.cassa-panel[hidden]{display:none}

.form-profitto-perdita .alert,
.form-profitto-perdita .alert-info{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:11px 14px;
  border:0;border-radius:12px;background:rgba(3,169,244,.10);color:#065386;
  font-size:14px;font-weight:600;line-height:1.35;
}
.form-profitto-perdita .alert .fa,
.form-profitto-perdita .alert-info .fa{color:#03a9f4}
.form-profitto-perdita .cassa-close{margin-left:4px;background:none;border:0;color:#5b7689;font-size:18px;line-height:1;cursor:pointer;padding:0 2px}

/* una sola riga */
.form-profitto-perdita .fp-riga{display:flex;gap:8px;align-items:stretch;flex-wrap:nowrap}
.form-profitto-perdita .fp-tipo{
  flex:0 0 auto;width:170px;height:42px;font-size:15px;color:#0f2c43;background:#fff;
  border:1.5px solid #e6edf2;border-radius:12px;padding:6px 12px;font-family:inherit;transition:border-color .15s;
}
.form-profitto-perdita .fp-tipo:focus{outline:0;border-color:#03a9f4}
.form-profitto-perdita .fp-importo-wrap{
  flex:0 0 auto;width:130px;display:flex;align-items:center;gap:6px;
  border:1.5px solid #e6edf2;border-radius:12px;height:42px;padding:0 12px;background:#fff;transition:border-color .15s;
}
.form-profitto-perdita .fp-importo-wrap:focus-within{border-color:#03a9f4}
.form-profitto-perdita .fp-valuta{font-size:15px;font-weight:700;color:#5b7689}
.form-profitto-perdita .fp-importo{
  border:0;height:auto;padding:0;flex:1;min-width:0;font-size:15px;color:#0f2c43;background:transparent;font-family:inherit;
}
.form-profitto-perdita .fp-importo:focus{outline:0}
.form-profitto-perdita .fp-salva{
  flex:0 0 auto;height:42px;padding:6px 18px;font-size:14px;font-weight:800;color:#fff;
  background:#03a9f4;border:0;border-radius:12px;cursor:pointer;transition:filter .15s;font-family:inherit;
}
.form-profitto-perdita .fp-salva:hover{filter:brightness(.96)}

/* mobile: Selezione + importo restano in riga, Salva va a capo a tutta larghezza */
@media(max-width:480px){
  .form-profitto-perdita .fp-riga{flex-wrap:wrap}
  .form-profitto-perdita .fp-tipo{flex:1 1 130px;width:auto}
  .form-profitto-perdita .fp-importo-wrap{flex:1 1 120px;width:auto}
  .form-profitto-perdita .fp-salva{flex:1 1 100%;padding:9px 18px}
}