/* ===========================================================================
   L'intestazione delle tre sezioni (Diretta, Film, Serie).
   Vedi components/IntestazioneSezione.js per il perche'.

   NESSUNA larghezza in percentuale: le tre versioni precedenti sommavano
   130% e 125%, e stavano insieme solo perche' flexbox schiaccia in
   silenzio quel che eccede. Qui la sinistra occupa quel che le serve, la
   destra si appoggia al bordo destro, e lo spazio in mezzo e' quel che
   avanza.
   =========================================================================== */
.intestazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 30px;
  color: white;
}
/* ===========================================================================
   L'intestazione delle tre sezioni (Diretta, Film, Serie).
   Vedi components/IntestazioneSezione.js per il perche'.

   NESSUNA larghezza in percentuale: le tre versioni precedenti sommavano
   130% e 125%, e stavano insieme solo perche' flexbox schiaccia in
   silenzio quel che eccede. Qui la sinistra occupa quel che le serve, la
   destra si appoggia al bordo destro, e lo spazio in mezzo e' quel che
   avanza.
   =========================================================================== */ .intestazione > * + * {
  margin-left: 40px; /* era gap: 40px (Chromium 84); qui webOS 5 */
}

.intestazione-sinistra {
  display: flex;
  align-items: center;
  /* Senza questo un titolo lungo spinge fuori schermo la parte destra
     invece di lasciare che sia la ricerca ad accorciarsi. */
  min-width: 0;
}
.intestazione-sinistra > * + * {
  margin-left: 45px; /* era gap: 45px (Chromium 84); qui webOS 5 */
}

.intestazione-destra {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.intestazione-destra > * + * {
  margin-left: 45px; /* era gap: 45px (Chromium 84); qui webOS 5 */
}

/* Il nome della sezione al posto del logo. */
.intestazione-titolo {
  margin: 0;
  font-size: 44px;
  font-weight: 500;
  white-space: nowrap;
  /* Sulle schede il titolo e' quello del film, che puo' essere lungo:
     si accorcia coi puntini invece di spingere fuori l'ora e il menu. */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* L'ora nella stessa posizione della schermata principale - in alto a
   destra - e della stessa misura in tutte e tre le sezioni: prima era
   32px in Live e 30px altrove. */
.intestazione-orologio .datetime {
  font-size: 32px;
  white-space: nowrap;
}

/* Il raggio sta sull'elemento, non sulla regola di fuoco: l'anello lo
   legge da qui (voce 3 del 7 settembre). */
.intestazione-ricerca {
  position: relative;
  min-width: 0;
  border-radius: 8px;
}

/* I TRE PUNTINI NEL CERCHIO DA 64 DELLA DASHBOARD anche sui TV (16 ottobre 2026, punto 32: come la web, html.web .intestazione-menu,
   e le pagine di gestione, .intestazione-menu-web); prima un rettangolo coi tre pallini nudi. Il raggio sta sull'elemento: l'anello lo
   legge, resta rotondo. */
.intestazione-menu {
  position: relative;
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.intestazione-menu > svg { width: 9px; height: 36px; }

/* ---- L'ANELLO DEL FUOCO NON STA NEL LAYOUT -----------------------------
   Era disegnato con "border" e, sui tre puntini e sul campo, anche con
   "padding". Bordo e padding fanno parte della scatola: mettendo il fuoco
   sui puntini l'intestazione cresceva di 12px e - essendo la prima cosa
   del documento - spingeva giu' TUTTA la pagina. Sul campo di ricerca
   erano 16.

   L'anello e' un box-shadow - meta' fuori, meta' dentro, dov'era il
   bordo - che non partecipa al calcolo delle dimensioni e LEGGE il
   raggio dall'elemento: sul Chromium 87 del televisore l'outline lo
   ignora e sporge agli angoli (punto 4 del 7 settembre).

   Le classi sono sei perche' le tre pagine ne applicano due ciascuna con
   nomi leggermente diversi (la Live usa -search-focused, Film e Serie
   -search-input-focused): sono nomi che il codice di navigazione cerca
   per stringa, e questa correzione non li tocca. */
.livetv-header-menu-focused,
.movies-header-menu-focused,
.series-header-menu-focused,
.livetv-header-search-focused,
.movies-header-search-focused,
.series-header-search-focused,
.livetv-header-search-input-focused,
.movies-header-search-input-focused,
.series-header-search-input-focused {
  box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 2px var(--gold);
}

/* Il campo di ricerca. Era scritto tre volte identico, tranne il bordo
   della Serie che era di 1px invece di 2: la deriva tipica di una copia. */
.intestazione-campo {
  width: 400px;
  padding: 6px 20% 6px 25px;
  color: white;
  border: 2px solid var(--gold);
  background-color: rgba(18, 18, 18, 0.4);
  border-radius: 10px;
  font-size: 28px;
  /* Il cursore e' oro e nativo: nella casella vuota sta all'inizio, prima
     del segnaposto (cantiere 0, 25 settembre 2026); il segnaposto e' grigio
     perche' non e' testo scritto. */
  caret-color: var(--gold);
}

.intestazione-campo::placeholder { color: #9a9a9a; opacity: 1; }

.intestazione-icona-ricerca {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  height: 30px;
  width: 30px;
}

/* L'INTESTAZIONE UNICA SUI TV (15 ottobre 2026, punto 26c; decisioni 53-54; components/IntestazioneWeb.js): la freccia e i tre puntini nel
   cerchio da 64 della dashboard, in alto a sinistra e a destra, il titolo a 44 px, l'ora. Le stesse misure della web (web.css, html.web
   .intestazione-*, che sulla web vince); qui in piu' l'anello del fuoco del telecomando (box-shadow: legge il raggio, resta rotondo). La
   testata sta dentro la pagina, che ha gia' i suoi margini (l'area sicura). */
.intestazione-web { padding: 0 0 10px; box-sizing: border-box; flex: 0 0 auto; }
.intestazione-web .intestazione-titolo { font-size: 44px; }
.intestazione-indietro {
  width: 64px;
  height: 64px;
  margin-right: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  flex: 0 0 auto;
  outline: none;
}
.intestazione-menu-web {
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.intestazione-menu-web > svg { width: 9px; height: 36px; }
.intestazione-indietro.intestazione-focused,
.intestazione-menu-web.intestazione-focused,
html:not(.web) .intestazione .livetv-header-menu-focused,
html:not(.web) .intestazione .movies-header-menu-focused,
html:not(.web) .intestazione .series-header-menu-focused,
.intestazione .livetv-header-back-focused,
.intestazione .movies-header-back-focused,
.intestazione .series-header-back-focused {
  border-color: #e7a101;
  box-shadow: 0 0 0 4px #e7a101;
}
.intestazione-web-menu { position: absolute; z-index: 60; }
/* i margini dell'area sicura (5 %: 54 px sopra, 96 ai lati) nelle pagine che non li hanno gia' per la testata: Il mio account (senza margini
   suoi), Gestisci profili (40 px sopra) e Chi sta guardando? (60 ai lati). Sulla web vincono le regole di web.css (html.web ...). */
.account-page-container > .intestazione-web { padding: 60px 140px 10px; }
.gp-pagina > .intestazione-web { padding-top: 20px; }
.pf-pagina > .intestazione-web { padding: 20px 80px 10px; }