/* /web/htdocs/www.italialive.app/home/assets/css/style.css */

:root {
    --bg-primary:    #080c0f;
    --bg-secondary:  #0d1317;
    --bg-tertiary:   #111820;
    --bg-elevated:   #16202a;
    --border:        #1e2d3d;
    --border-strong: #2a3f55;

    --accent-blue:   #00b4ff;
    --accent-green:  #00e676;
    --accent-red:    #ff3d3d;
    --accent-yellow: #ffd600;
    --accent-orange: #ff6d00;
    --accent-purple: #b388ff;

    --text-primary:   #e8f4f8;
    --text-secondary: #8ab4c8;
    --text-muted:     #4a6a7a;

    --shadow-soft: 0 4px 16px rgba(0,0,0,.4);

    --pol: #b388ff;
    --eco: #00e676;
    --cro: #ff3d3d;
    --est: #00b4ff;
    --tec: #ffd600;
    --spo: #ff6d00;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -.01em; }

a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== TICKER BAR ===== */
/* z-index alti per stare SOPRA i layer Leaflet (control 1000, panes ~700)
   e i widget. Sotto al cookie banner (9999) e al logo brand (200 ma nell'header). */
.ticker-bar {
    position: sticky;
    top: 0;
    z-index: 1500;
    height: 32px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
}
/* News ticker: sotto al ticker mercati */
.ticker-bar.news-ticker {
    top: 32px;
    z-index: 1499;
    height: 30px;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary));
    padding-left: 10px;
    gap: 10px;
}
.ticker-bar.news-ticker .ticker-label {
    color: var(--accent-blue);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    flex-shrink: 0;
    padding-right: 8px;
    border-right: 1px solid var(--border);
    white-space: nowrap;
}
.ticker-bar.news-ticker .ticker-track {
    animation-duration: 240s; /* più lento ancora per leggere bene i titoli */
}
.news-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    text-decoration: none;
    transition: opacity .15s;
}
.news-ticker-item:hover { opacity: .75; text-decoration: none; }
.news-ticker-item .label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--bg-elevated);
}
.news-ticker-item .label.cat-politica   { color: var(--pol); border: 1px solid var(--pol); }
.news-ticker-item .label.cat-economia   { color: var(--eco); border: 1px solid var(--eco); }
.news-ticker-item .label.cat-cronaca    { color: var(--cro); border: 1px solid var(--cro); }
.news-ticker-item .label.cat-esteri     { color: var(--est); border: 1px solid var(--est); }
.news-ticker-item .label.cat-tecnologia { color: var(--tec); border: 1px solid var(--tec); }
.news-ticker-item .label.cat-sport      { color: var(--spo); border: 1px solid var(--spo); }
.news-ticker-item .news-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    max-width: 460px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-ticker-item .news-src {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
}

.eq-ticker-bar {
    position: sticky;
    bottom: 0;
    z-index: 1500;
    height: 32px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-left: 10px;
    gap: 10px;
}
.eq-ticker-label {
    color: var(--accent-orange);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    flex-shrink: 0;
    padding-right: 8px;
    border-right: 1px solid var(--border);
    white-space: nowrap;
}
.eq-ticker-bar .ticker-item .eq-mini {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'Space Grotesk';
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-right: 4px;
}
.eq-ticker-bar .ticker-item .eq-mini.info     { background: var(--accent-blue); }
.eq-ticker-bar .ticker-item .eq-mini.warning  { background: var(--accent-orange); }
.eq-ticker-bar .ticker-item .eq-mini.critical { background: var(--accent-red); }
.eq-ticker-bar .ticker-item .label { color: var(--text-primary); font-weight: 500; font-size: 12px; }
.eq-ticker-bar .ticker-item .time  { color: var(--text-muted); font-size: 12px; margin-left: 4px; }
.ticker-track {
    display: flex;
    gap: 32px;
    white-space: nowrap;
    animation: ticker-scroll 90s linear infinite;
    padding-left: 100%;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: .02em;
}
.ticker-item .label  { color: var(--text-secondary); text-transform: uppercase; font-weight: 600; font-size: 11px; }
.ticker-item .price  { color: var(--text-primary); font-weight: 600; }
.ticker-item .change { font-weight: 600; font-size: 12px; }
.ticker-item .change.up   { color: var(--accent-green); }
.ticker-item .change.down { color: var(--accent-red); }
.ticker-item .change.flat { color: var(--text-muted); }

/* BTP Spread voce speciale: pillola colorata in base al valore */
.ticker-item.ticker-btp {
    background: var(--bg-elevated);
    padding: 2px 10px;
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    align-items: center;
}
.ticker-item.ticker-btp .label { letter-spacing: .12em; }
.ticker-item.ticker-btp .btp-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.ticker-item.ticker-btp .btp-value small { font-size: 9px; font-weight: 600; opacity: .75; margin-left: 1px; }
.ticker-item.ticker-btp.low  { border-color: var(--accent-green);  background: rgba(0,230,118,.10); }
.ticker-item.ticker-btp.low  .btp-value { color: var(--accent-green); }
.ticker-item.ticker-btp.mid  { border-color: var(--accent-yellow); background: rgba(255,214,0,.10); }
.ticker-item.ticker-btp.mid  .btp-value { color: var(--accent-yellow); }
.ticker-item.ticker-btp.high { border-color: var(--accent-red);    background: rgba(255,61,61,.12); animation: match-pulse 2s infinite; }
.ticker-item.ticker-btp.high .btp-value { color: var(--accent-red); }
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ===== HEADER ===== */
.site-header {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
}
/* Energia + Carburanti a sinistra, Meta a destra. Logo (absolute) centrato sopra. */
.site-header .meta { margin-left: auto; }

/* Logo "Cruscotto Italia" in primo piano sopra a tutto.
   position: absolute → non occupa spazio nel flow, l'header resta compatto
   e energia + LIVE/clock si vedono ai lati. */
/* Logo immagine "Italia Live" centrato sopra a tutto.
   PNG con sfondo nero + halo blu/rosso, si integra col gradient dark dell'header.
   position: absolute → non occupa spazio nel flow header. */
.site-header .brand-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 80px;
    width: auto;
    max-width: 90vw;
    mix-blend-mode: screen;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
    z-index: 200;
    pointer-events: none;
}
@media (max-width: 768px) {
    .site-header .brand-logo { height: 51px; }
}
@media (max-width: 380px) {
    .site-header .brand-logo { height: 40px; }
}

/* Badge consumo energetico */
.energy-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(255,214,0,.12), rgba(255,109,0,.08));
    border: 1px solid var(--accent-yellow);
    border-radius: 22px;
    padding: 6px 16px 6px 12px;
    box-shadow: 0 0 12px rgba(255,214,0,.15);
    transition: transform .15s ease, box-shadow .2s;
    flex-shrink: 0;
}
.energy-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(255,214,0,.3);
}
.energy-badge .energy-icon {
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(255,214,0,.6));
    animation: energy-pulse 2.5s ease-in-out infinite;
}
@keyframes energy-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .75; transform: scale(1.08); }
}
.energy-badge .energy-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.energy-badge .energy-label {
    font-size: 9px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
}
.energy-badge .energy-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--accent-yellow);
    letter-spacing: -.01em;
    margin-top: 1px;
}
.energy-badge .energy-trend {
    font-size: 11px;
    font-weight: 700;
    padding-left: 4px;
    border-left: 1px solid rgba(255,214,0,.3);
    margin-left: 2px;
    min-width: 50px;
    text-align: right;
}
.energy-badge .energy-trend.up   { color: var(--accent-red);   }
.energy-badge .energy-trend.down { color: var(--accent-green); }
.energy-badge .energy-trend.flat { color: var(--text-muted);   }

/* ===== Carburanti badge (header) ===== */
.fuel-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(0,180,255,.08), rgba(0,230,118,.05));
    border: 1px solid var(--border-strong);
    border-radius: 22px;
    padding: 6px 16px;
    color: var(--text-primary);
    flex-shrink: 0;
}
.fuel-badge .fuel-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.fuel-badge .fuel-icon { font-size: 16px; line-height: 1; }
.fuel-badge .fuel-label {
    font-size: 9px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
}
.fuel-badge .fuel-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.01em;
}
.fuel-badge .fuel-value.up   { color: var(--accent-red); }
.fuel-badge .fuel-value.down { color: var(--accent-green); }
.fuel-badge .fuel-sep { color: var(--text-muted); font-size: 11px; }
.fuel-badge .fuel-meta {
    font-size: 10px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: .04em;
}
@media (max-width: 768px) {
    .fuel-badge { padding: 4px 10px; gap: 6px; }
    .fuel-badge .fuel-icon { font-size: 14px; }
    .fuel-badge .fuel-label { display: none; }
    .fuel-badge .fuel-value { font-size: 12px; }
    .fuel-badge .fuel-meta { display: none; }
}
@media (max-width: 768px) {
    .energy-badge { padding: 4px 10px; }
    .energy-badge .energy-icon { font-size: 18px; }
    .energy-badge .energy-value { font-size: 14px; }
}
.site-header .brand .flag {
    width: 34px; height: 22px;
    background: linear-gradient(90deg, #009246 0 33%, #fff 33% 66%, #ce2b37 66% 100%);
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.1);
}
.site-header h1 {
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: -.02em;
}
.site-header h1 .accent { color: var(--accent-blue); }
.site-header .meta {
    display: flex;
    gap: 20px;
    align-items: center;
    color: var(--text-secondary);
    font-size: 12px;
}
.site-header .meta .clock { font-family: 'Space Grotesk'; font-size: 16px; color: var(--text-primary); font-weight: 600; }
.site-header .meta .status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-green);
    display: inline-block;
    margin-right: 6px;
    box-shadow: 0 0 8px var(--accent-green);
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%,100% { opacity: 1; }
    50%     { opacity: .4; }
}

/* ===== LAYOUT ===== */
.dashboard {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* Layout sfalsato: auto-flow dense piazza i widget nelle prime celle disponibili
       della loro colonna, in base all'altezza naturale. Le righe non sono fisse:
       i widget di altezze diverse creano un effetto a colonne sfalsate. */
    grid-auto-rows: 10px;        /* unità base sottile per auto-fit fine-grained */
    grid-auto-flow: row dense;
    gap: 15px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* Layout 1920x1080 (12 cols × 8 rows)
   Map rspan 4 (= 2× content widget rspan 2)
   Webcam rspan 1 (= 1/2 × content widget rspan 2)
   Buone Notizie cspan 6 (= 2× content widget cspan 3) — sostituisce Sicurezza
*/

/* Layout sfalsato: altezze leggermente diverse per ogni widget così
   le colonne non si allineano orizzontalmente. Unità grid-row = 10px + 10px gap. */

.col-map        { grid-column: 1 / span 3; grid-row: span 33; }  /* ~640px */
.col-energia    { grid-column: 1 / span 3; grid-row: span 15; }  /* ~290px */
.col-gazzetta   { grid-column: 1 / span 3; grid-row: span 16; }  /* ~310px */
.col-public     { grid-column: 1 / span 3; grid-row: span 18; }  /* Governo sotto Gazzetta ~340px */
.col-salute     { grid-column: 4 / span 3; grid-row: span 17; }  /* Salute in col 4-6 sotto Meteobox ~320px */

.col-news       { grid-column: 4 / span 3; grid-row: span 20; }  /* ~390px */
.col-eq-world   { grid-column: 1 / span 3; grid-row: span 20; }  /* sotto Mappa Italia, stessa size di News */
.col-radar      { grid-column: 4 / span 3; grid-row: span 16; }  /* ~310px */
.col-meteobox   { grid-column: 4 / span 3; grid-row: span 19; }  /* ~370px */

.col-tv         { grid-column: 7 / span 3; grid-row: span 17; }  /* ~320px */
.col-events     { grid-column: 7 / span 3; grid-row: span 21; }  /* ~410px */
.col-trasporti  { grid-column: 7 / span 3; grid-row: span 34; }  /* triplicato -20% ~670px */

/* Buone Notizie cspan 6, altezza raddoppiata */
.col-buone      { grid-column: 4 / span 6; grid-row: span 34; }

/* Wrapper webcam: su desktop "trasparente" al grid (display: contents).
   Su mobile diventa carosello orizzontale (vedi media query). */
.webcam-strip { display: contents; }

/* Cols 10-12 (4ª colonna) — grid 75px per row:
   rows 1-2 = sport-cluster (~150px totali → ~50px per widget sport)
   row 3    = webcam Milano (75px)
   row 4    = webcam Roma   (75px)
   row 5    = webcam Napoli (75px)
   row 6    = vuota
   rows 7-8 = Salute (definito sopra, 150px)
*/
.sport-cluster {
    grid-column: 10 / span 3;
    grid-row: span 26;               /* ~510px totali */
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
    min-height: 0;
}
/* Serie A e Tennis ridotti del 30% rispetto a F1 (ratio 70:70:100). */
.sport-cluster > .col-seriea { flex: 70; min-height: 0; }
.sport-cluster > .col-tennis { flex: 70; min-height: 0; }
.sport-cluster > .col-f1     { flex: 100; min-height: 0; }

/* Widget sport: contenuto aumentato per leggibilità */
.sport-cluster .widget-header { padding: 6px 12px; min-height: 0; }
.sport-cluster .widget-header .title { font-size: 12px; letter-spacing: .12em; }
.sport-cluster .widget-header .title:first-letter { font-size: 1.3em; }
.sport-cluster .widget-header .title::before { width: 4px; height: 12px; }
.sport-cluster .widget-header .last-update { font-size: 10px; }
.sport-cluster .widget-body { padding: 6px 12px; }
.sport-cluster .seriea-tab,
.sport-cluster .f1-tab { padding: 4px 10px; font-size: 11px; }

.sport-cluster .match-card { height: auto; min-height: 60px; padding: 7px 12px; gap: 10px; }
.sport-cluster .match-badge { width: 40px; height: 40px; }
.sport-cluster .match-team { font-size: 12px; max-width: 90px; font-weight: 700; }
.sport-cluster .match-score { font-size: 21px; min-width: 72px; padding: 4px 10px; }
.sport-cluster .match-score.vs { font-size: 13px; padding: 7px 10px; }
.sport-cluster .match-status { font-size: 10px; padding: 3px 7px; }

.sport-cluster .tennis-match { padding: 5px 7px; font-size: 13px; }
.sport-cluster .tennis-match .tennis-score { font-size: 15px; }
.sport-cluster .tennis-sinner-card { padding: 7px 10px; margin-bottom: 6px; }
.sport-cluster .tennis-sinner-card .sinner-label { font-size: 11px; margin-bottom: 5px; }
.sport-cluster .tennis-tournament { font-size: 10px; }

.sport-cluster .f1-table tbody td { padding: 4px 5px; font-size: 12px; }
.sport-cluster .f1-table .pts { font-size: 13px; }
.sport-cluster .f1-table .constructor { font-size: 10px; }
.sport-cluster .f1-race-meta { padding: 5px 8px; font-size: 11px; margin-bottom: 6px; }
.sport-cluster .f1-race-meta .race-name { font-size: 12px; }

/* Widget sport singoli: dentro il cluster non hanno più grid-row diretto */
.col-seriea, .col-tennis, .col-f1 {
    grid-column: auto;
    grid-row: auto;
}

.col-cam        { grid-column: 10 / span 3; grid-row: span 19; }
.col-cam-1, .col-cam-2, .col-cam-3,
.col-cam-4, .col-cam-5 { grid-row: span 19; }  /* +10% → ~370px */

/* TABLET / MOBILE LANDSCAPE (≤ 1400px): override del grid sfalsato.
   Torna a layout a colonne normali: grid-auto-rows auto, span auto,
   2 colonne (cspan 6 ciascuno). Lo sfalsamento si applica solo desktop ≥ 1400px. */
@media (max-width: 1400px) {
    .dashboard {
        grid-auto-rows: auto;
        grid-auto-flow: row;
    }
    /* TUTTI i widget rispettano altezza contenuto (no span fisso) */
    .dashboard > .widget,
    .sport-cluster {
        grid-row: auto !important;
    }
    .col-map { grid-column: 1 / -1; min-height: 360px; }
    .col-news, .col-tv,
    .col-radar, .col-events,
    .col-public, .col-meteobox, .col-trasporti,
    .col-energia, .col-salute,
    .col-eq-world,
    .col-buone { grid-column: span 6; min-height: 280px; }
    .col-cam, .col-cam-1, .col-cam-2, .col-cam-3, .col-cam-4, .col-cam-5 {
        grid-column: span 6;
        min-height: 200px;
    }
    .sport-cluster { grid-column: span 6; min-height: 480px; }
    .col-buone { grid-column: span 12; }
}
/* ===========================================================
   MOBILE — riscrittura completa (≤ 768px)
   Strategia: stack verticale ordinato per priorità informativa,
   webcam in carosello orizzontale snap, header collassato,
   tipografia rilassata per touch, drag-drop disabilitato via JS.
   =========================================================== */
@media (max-width: 768px) {
    /* ----- Tipografia base ----- */
    html, body { font-size: 15px; }
    body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

    /* ----- Ticker (alto + bottom) ----- */
    .ticker-bar, .eq-ticker-bar { height: 30px; }
    .ticker-bar.news-ticker { top: 30px; }
    .news-ticker-item .news-title { max-width: 240px; }
    .ticker-track { animation-duration: 60s; gap: 22px; }
    .ticker-item { font-size: 11.5px; gap: 6px; }
    .ticker-item .label { font-size: 10px; }
    .eq-ticker-label { font-size: 10px; padding-right: 6px; }

    /* ----- Header mobile: logo PRIMA di tutto (in flusso, non overlay) ----- */
    .site-header {
        padding: 10px 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    /* Logo torna in-flow, primo elemento centrato */
    .site-header .brand-logo {
        position: static;
        transform: none;
        order: -1;
        margin: 0 auto;
        display: block;
        height: 56px;
        max-width: 90%;
        z-index: auto;
        pointer-events: auto;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
    }
    .site-header .info-row,
    .site-header .energy-badge {
        order: 0;
    }
    .site-header .energy-badge {
        align-self: center;
        margin: 0 auto;
        padding: 5px 14px 5px 10px;
        gap: 8px;
        min-width: 0;
        max-width: 100%;
    }
    .energy-badge .energy-label { font-size: 8px; letter-spacing: .08em; }
    .energy-badge .energy-trend { font-size: 10px; min-width: 38px; padding-left: 3px; }

    .site-header .meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 12px;
        align-items: center;
        font-size: 11px;
        max-width: 100%;
        width: 100%;
        text-align: center;
    }
    .site-header .meta > div { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .site-header .meta .clock { font-size: 13px; }
    #resetLayoutBtn { padding: 4px 8px; font-size: 10px; }

    /* ----- Layout: stack semplice (no grid righe fisse) ----- */
    .dashboard {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 10px 10px 14px;
    }
    /* Tutti i widget a piena larghezza */
    .dashboard > .widget {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
    }

    /* ----- Ordine widget mobile (priorità informativa) ----- */
    .col-news      { order: 1; }
    .col-map       { order: 2; }
    .col-meteobox  { order: 3; }
    .col-events    { order: 4; }
    .col-trasporti { order: 5; }
    .col-radar     { order: 6; }
    .col-seriea    { order: 7; }
    .col-tennis    { order: 8; }
    .col-f1        { order: 9; }
    .col-tv        { order: 10; }
    .col-gazzetta  { order: 11; }
    .col-public    { order: 12; }
    .col-energia   { order: 13; }
    .col-salute    { order: 14; }
    .col-buone     { order: 15; }
    .webcam-strip  { order: 16; }

    /* ----- Widget body: rimuovere altezza fissa ----- */
    .widget-body { max-height: 60vh; padding: 10px 12px; }
    .widget-header { padding: 10px 12px; cursor: default; }
    .widget-header:active { cursor: default; }
    .widget-header:hover { background: var(--bg-tertiary); }
    .widget-header .title { font-size: 12px; letter-spacing: .14em; }
    .widget-header .title:first-letter { font-size: 1.4em; }
    .widget-header .last-update { font-size: 10px; }

    /* ----- Mappa ----- */
    #map { min-height: 320px; max-height: 50vh; }
    .widget.col-map .widget-body, .widget.col-map #map { min-height: 320px; }

    /* ----- Radar ----- */
    .radar-map { min-height: 260px; }
    .radar-controls button { padding: 4px 10px; font-size: 13px; }
    .radar-controls .radar-time { font-size: 10px; min-width: 70px; }

    /* ----- News tabs (touch-friendly) ----- */
    .news-tabs {
        gap: 6px;
        padding: 8px 12px;
        margin: -10px -12px 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .news-tabs::-webkit-scrollbar { display: none; }
    .news-tab {
        padding: 8px 14px;
        font-size: 12px;
        letter-spacing: .05em;
        min-height: 36px;
    }
    .news-item { padding: 10px 12px; }
    .news-item .title { font-size: 14px; line-height: 1.4; }
    .news-item .meta { font-size: 11px; }

    /* ----- TV ----- */
    .widget.col-tv .widget-header {
        flex-wrap: wrap;
        gap: 6px;
    }
    .tv-controls {
        width: 100%;
        justify-content: stretch;
        gap: 6px;
    }
    .tv-controls select { flex: 1; min-width: 0; padding: 6px 8px; font-size: 12px; }
    .tv-controls button, .tv-controls .tv-open-btn {
        padding: 6px 10px;
        font-size: 11px;
        flex-shrink: 0;
    }
    .tv-body iframe { min-height: 56.25vw; max-height: 240px; }
    .tv-fallback { font-size: 11px; padding: 8px 12px; }

    /* ----- Eventi / Pub items ----- */
    .event-item .title, .pub-item .title { font-size: 13px; }
    .traffic-item .title { font-size: 13px; }
    .eq-item .loc { font-size: 13px; }
    .eq-mag { width: 38px; height: 38px; font-size: 14px; }

    /* ----- Buone Notizie counters ----- */
    .buone-counters {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .buone-counters .counter { padding: 8px; }
    .buone-counters .counter-icon { font-size: 20px; }
    .buone-counters .counter-value { font-size: 14px; }
    .buone-counters .counter-label { font-size: 9px; letter-spacing: .02em; }

    /* ----- Webcam: carosello orizzontale snap ----- */
    .webcam-strip {
        display: flex;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 4px 10px 10px;
        margin: 0 -10px;
        scrollbar-width: none;
    }
    .webcam-strip::-webkit-scrollbar { display: none; }
    .webcam-strip > .widget.col-cam {
        flex: 0 0 86vw;
        max-width: 360px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    .webcam-strip > .widget.col-cam .widget-header { padding: 8px 10px; }
    .cam-body iframe { min-height: 48.4vw; max-height: 220px; }

    /* Hint scorrimento webcam (gradient sui bordi) */
    .webcam-strip {
        -webkit-mask-image: linear-gradient(90deg,
            transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
                mask-image: linear-gradient(90deg,
            transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    }

    /* ----- SortableJS: feedback visivo nullo (drag off via JS) ----- */
    .widget-chosen, .widget-drag, .widget-ghost {
        box-shadow: var(--shadow-soft);
        opacity: 1;
        transform: none;
    }

    /* ----- Footer ----- */
    .site-footer { padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); font-size: 10px; line-height: 1.5; }

    /* ----- Spazio per ticker bottom sticky (evita coprire ultimo widget) ----- */
    body { padding-bottom: 0; }
    main.dashboard { padding-bottom: 18px; }
}

/* Mobile XS — telefoni stretti (≤ 380px) */
@media (max-width: 380px) {
    .site-header h1 { font-size: 16px; }
    .energy-badge .energy-value { font-size: 12px; }
    .energy-badge .energy-icon { font-size: 16px; }
    .news-tab { padding: 7px 10px; font-size: 11px; }
    .buone-counters .counter-value { font-size: 13px; }
    #map, .radar-map { min-height: 280px; }
    .webcam-strip > .widget.col-cam { flex: 0 0 90vw; }
}

/* ===== WIDGET ===== */
.widget {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-soft);
    transition: box-shadow .2s, transform .2s;
}
.widget-header {
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.widget-header:active { cursor: grabbing; }
.widget-header:hover {
    background: var(--bg-elevated);
}

/* SortableJS states */
.widget-ghost {
    opacity: .25;
    background: var(--bg-elevated) !important;
}
.widget-chosen {
    box-shadow: 0 0 0 2px var(--accent-blue), 0 12px 32px rgba(0,180,255,.15);
    z-index: 50;
}
.widget-drag {
    transform: rotate(.5deg);
    cursor: grabbing !important;
}

/* Reset layout button */
#resetLayoutBtn {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: all .15s;
}
#resetLayoutBtn:hover {
    color: var(--text-primary);
    border-color: var(--accent-blue);
    background: var(--bg-elevated);
}
.widget-header .title {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--text-secondary);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.widget-header .title::before {
    content: '';
    width: 4px; height: 13px;
    background: var(--accent-blue);
    border-radius: 1px;
    flex-shrink: 0;
}
/* Ingrandisce leggermente le emoji nei titoli per renderle più riconoscibili */
.widget-header .title {
    font-feature-settings: "liga" 1;
}
.widget-header .title:first-letter {
    font-size: 1.35em;
    letter-spacing: normal;
    margin-right: 2px;
}
.widget-header .last-update {
    font-size: 10px;
    color: var(--text-muted);
}
.widget-header .widget-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    padding: 2px 5px;
    border-radius: 4px;
    transition: all .15s;
}
.widget-header .widget-link:hover {
    color: var(--accent-blue);
    background: var(--bg-elevated);
    text-decoration: none;
}

/* Bottone toggle traffico nel widget mappa */
.map-btn {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.2;
    font-family: inherit;
    transition: all .15s;
}
.map-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-blue);
}
.map-btn.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #000;
}

/* Legenda traffico TomTom */
.traffic-legend {
    background: rgba(8, 12, 15, .85);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-primary);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.traffic-legend .legend-title {
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--accent-blue);
    letter-spacing: .12em;
    font-size: 10px;
    text-transform: uppercase;
}
.traffic-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.traffic-legend .legend-item .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(0,0,0,.6);
}
.traffic-legend .legend-footer {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10px;
}

/* Layer control TomTom in dark theme */
.leaflet-control-layers {
    background: rgba(13, 19, 23, .92) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(6px);
}
.leaflet-control-layers-expanded { padding: 8px 12px !important; }
.leaflet-control-layers label {
    font-size: 11px !important;
    color: var(--text-primary) !important;
    margin-bottom: 4px !important;
}
.widget-body {
    padding: 10px 14px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.widget-body::-webkit-scrollbar { width: 6px; }
.widget-body::-webkit-scrollbar-track { background: transparent; }
.widget-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ===== TERREMOTI ===== */
.eq-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.eq-item:last-child { border-bottom: none; }
.eq-mag {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 15px;
    color: #000;
}
.eq-mag.info     { background: var(--accent-blue); color: #fff; }
.eq-mag.warning  { background: var(--accent-orange); color: #fff; }
.eq-mag.critical { background: var(--accent-red); color: #fff; animation: pulse-bg 1.5s infinite; }
@keyframes pulse-bg {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,61,61,.6); }
    50%     { box-shadow: 0 0 0 8px rgba(255,61,61,0); }
}
.eq-info { flex: 1; min-width: 0; }
.eq-info .loc { font-size: 13px; font-weight: 500; line-height: 1.3; }
.eq-info .meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* ===== MAPPA ===== */
.widget.col-map { overflow: hidden; }
#map {
    width: 100%;
    flex: 1;
    height: 100%;
    min-height: 0;
    background: #000;
}
.leaflet-popup-content-wrapper {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-soft);
}
.leaflet-popup-tip { background: var(--bg-elevated) !important; }
.leaflet-popup-content { font-family: 'Inter', sans-serif; font-size: 12px; }
.leaflet-control-attribution {
    background: rgba(8,12,15,.7) !important;
    color: var(--text-muted) !important;
    font-size: 11px !important;
}
.leaflet-control-attribution a { color: var(--text-secondary) !important; }

/* Legenda qualità aria */
.aqi-legend {
    background: rgba(13, 19, 23, 0.92);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 8px 10px 6px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
    min-width: 110px;
}
.aqi-legend .title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}
.aqi-legend .row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
}
.aqi-legend .row:last-of-type { margin-bottom: 0; }
.aqi-legend .swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.1);
}
.aqi-legend .label {
    font-size: 11px;
    color: var(--text-primary);
    line-height: 1.1;
}
.aqi-legend .footnote {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
    font-style: italic;
}

/* Locate button (geolocalizzazione) */
.leaflet-bar.leaflet-locate a {
    background-color: var(--bg-elevated);
    color: var(--accent-blue);
    text-decoration: none;
    text-align: center;
    line-height: 26px;
    width: 26px; height: 26px;
    display: block;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}
.leaflet-bar.leaflet-locate a:hover {
    background-color: var(--bg-tertiary);
}
.leaflet-bar a { background-color: var(--bg-elevated); color: var(--text-primary); }
.leaflet-bar a:hover { background-color: var(--bg-tertiary); }

/* World weather marker (capitali mondo — compatto) */
.world-weather-marker {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(8,12,15,.85);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    padding: 2px 5px;
    line-height: 1;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.world-weather-marker .ww-icon { font-size: 12px; }
.world-weather-marker .ww-temp { font-size: 11px; font-weight: 700; }
.world-weather-marker:hover {
    border-color: var(--accent-blue);
    background: rgba(0,180,255,.18);
    z-index: 10;
}

/* Toggle "🌍 Mondo" sopra la mappa */
.leaflet-bar.leaflet-world-toggle a {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    text-align: center;
    line-height: 26px;
    width: 26px; height: 26px;
    display: block;
    font-size: 14px;
}
.leaflet-bar.leaflet-world-toggle a:hover { background-color: var(--bg-tertiary); }
.leaflet-bar.leaflet-world-toggle a.off {
    opacity: .45;
    background-color: var(--bg-secondary);
}

/* Weather marker (DivIcon su mappa) */
.weather-marker {
    background: rgba(8,12,15,.92);
    border: 1px solid var(--accent-blue);
    border-radius: 8px;
    padding: 3px 6px 4px;
    text-align: center;
    line-height: 1;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
}
.weather-marker .wm-icon { font-size: 16px; line-height: 1; }
.weather-marker .wm-temp { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-top: 1px; }
.weather-marker .wm-city { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; }
.weather-marker:hover {
    border-color: var(--accent-green);
    background: rgba(0,180,255,.15);
}

/* ===== WEBCAM BOX (5 boxes nella 4ª colonna) ===== */
.widget.col-cam { overflow: hidden; }
.widget.col-cam .widget-header {
    padding: 6px 10px;
    cursor: grab;
}
.widget.col-cam .widget-body.cam-body {
    padding: 0;
    max-height: none;
    overflow: hidden;
    background: #000;
    position: relative;
    flex: 1;
    /* Container query units per emulare object-fit: cover sull'iframe YouTube */
    container-type: size;
}
.cam-body iframe {
    /* Cover effect: l'iframe ha sempre aspect 16:9 e copre il container,
       eccedendo sui bordi (overflow hidden sul container nasconde l'eccedenza).
       Formula: width = max(100%, 16/9 * height del container) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 177.78cqh);
    height: max(100%, 56.25cqw);
    border: 0;
    background: #000;
    display: block;
    pointer-events: none; /* no controlli YouTube su hover/click */
}
.cam-open {
    color: var(--accent-blue);
    font-size: 13px;
    text-decoration: none;
    padding: 0 4px;
    line-height: 1;
}
.cam-open:hover { color: var(--accent-green); }

/* ===== RADAR METEO ===== */
.widget.col-radar { overflow: hidden; }
.widget.col-radar .widget-header { position: relative; z-index: 5; }
.radar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.radar-controls button {
    background: var(--bg-elevated);
    color: var(--accent-blue);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
}
.radar-controls button:hover { background: var(--bg-tertiary); }
.radar-controls .radar-time {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'Space Grotesk';
    min-width: 90px;
    text-align: right;
}
.radar-map {
    width: 100%;
    flex: 1;
    height: 100%;
    min-height: 0;
    background: #000;
}
.radar-map .leaflet-control-zoom { font-size: 11px; }

/* ===== TRAFFICO (deprecato, manteniamo stili nel caso) ===== */
.traffic-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 8px;
}
.traffic-item:last-child { border-bottom: none; }
.severity-badge {
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    height: fit-content;
}
.severity-badge.info     { background: rgba(0,180,255,.15); color: var(--accent-blue); border: 1px solid var(--accent-blue); }
.severity-badge.warning  { background: rgba(255,109,0,.15); color: var(--accent-orange); border: 1px solid var(--accent-orange); }
.severity-badge.critical { background: rgba(255,61,61,.2);  color: var(--accent-red); border: 1px solid var(--accent-red); animation: pulse-bg 1.5s infinite; }
.traffic-info { flex: 1; min-width: 0; }
.traffic-info .road { font-size: 11px; color: var(--accent-yellow); font-weight: 700; }
.traffic-info .title { font-size: 13px; font-weight: 500; line-height: 1.3; margin-top: 2px; }
.traffic-info .meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* ===== NEWS ===== */
.news-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    margin: -10px -14px 10px;
    padding: 6px 14px;
    background: var(--bg-tertiary);
}
.news-tab {
    padding: 6px 12px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    font-family: inherit;
}
.news-tab:hover { background: var(--bg-elevated); color: var(--text-primary); }
.news-tab.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--accent-blue);
}
.news-item {
    padding: 8px 10px;
    border-left: 3px solid var(--border);
    margin-bottom: 5px;
    background: var(--bg-elevated);
    border-radius: 5px;
    transition: all .15s;
}
.news-item:hover {
    background: var(--bg-tertiary);
    transform: translateX(2px);
}
.news-item.cat-politica   { border-left-color: var(--pol); }
.news-item.cat-economia   { border-left-color: var(--eco); }
.news-item.cat-cronaca    { border-left-color: var(--cro); }
.news-item.cat-esteri     { border-left-color: var(--est); }
.news-item.cat-tecnologia { border-left-color: var(--tec); }
.news-item.cat-sport      { border-left-color: var(--spo); }
.news-item .title { font-size: 13px; font-weight: 600; line-height: 1.4; }
.news-item .title a { color: var(--text-primary); }
.news-item .title a:hover { color: var(--accent-blue); }
.news-item .meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.news-item .meta .pill {
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--bg-secondary);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}
.news-item .breaking {
    background: var(--accent-red);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    animation: pulse-text 1.5s infinite;
}
@keyframes pulse-text {
    0%,100% { opacity: 1; }
    50%     { opacity: .6; }
}

/* ===== BUONE NOTIZIE (contatori + lista) ===== */
.buone-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.buone-counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.buone-counters .counter {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    transition: transform .15s, box-shadow .2s;
    min-width: 0;
}
.buone-counters .counter:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 230, 118, .15);
    border-color: var(--accent-green);
}
.buone-counters .counter-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(0, 230, 118, .3));
}
.buone-counters .counter-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
    flex: 1;
}
.buone-counters .counter-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-green);
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.buone-counters .counter-label {
    font-size: 8px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
    line-height: 1.1;
}
.buone-news {
    flex: 1;
    overflow-y: auto;
}
.buone-news .pub-item { padding: 6px 0; }
.buone-news .pub-item .title a:hover { color: var(--accent-green); }
.buone-news .pub-item .src { color: var(--accent-green) !important; }
@media (max-width: 1280px) {
    .buone-counters { grid-template-columns: repeat(2, 1fr); }
}

/* ===== BOX PUBBLICI (dati_pubblici, meteo, trasporti, energia, salute) ===== */
.pub-item {
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}
.pub-item:last-child { border-bottom: none; }
.pub-item .title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}
.pub-item .title a { color: var(--text-primary); }
.pub-item .title a:hover { color: var(--accent-blue); }
.pub-item .meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    display: flex;
    gap: 6px;
    align-items: center;
}
.pub-item .src {
    color: var(--accent-blue);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .04em;
}
#w-energia .pub-item .src { color: var(--accent-yellow); }
#w-salute  .pub-item .src { color: var(--accent-green); }
#w-public  .pub-item .src { color: var(--accent-blue); }
#w-meteobox .pub-item .src { color: var(--accent-orange); }
#w-trasporti .pub-item .src { color: var(--accent-purple); }
#w-sicurezza .pub-item .src { color: var(--accent-red); }

/* ===== GAZZETTA UFFICIALE — stile sobrio, atti ufficiali ===== */
.widget.col-gazzetta .widget-header .title::before {
    background: var(--text-muted);  /* barra sobria, no colore acceso */
}
.gz-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.gz-item:last-child { border-bottom: none; }
.gz-item .gz-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.gz-item .gz-badge {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    flex-shrink: 0;
    white-space: nowrap;
}
.gz-item .gz-numero {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    color: var(--text-muted);
}
.gz-item .gz-title {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-primary);
}
.gz-item .gz-title a {
    color: var(--text-primary);
    text-decoration: none;
}
.gz-item .gz-title a:hover {
    color: var(--text-secondary);
    text-decoration: underline;
}
.gz-item .gz-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-muted);
}
.gz-item .gz-meta a {
    color: var(--text-secondary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    border: 1px solid var(--border);
    padding: 2px 6px;
    border-radius: 3px;
    transition: all .15s;
}
.gz-item .gz-meta a:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* ===== TRASPORTI & SCIOPERI — card strutturate ===== */
.sciopero-card {
    display: block;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-muted);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-primary);
}
.sciopero-card.status-live      { border-left-color: var(--accent-red); }
.sciopero-card.status-scheduled { border-left-color: var(--accent-yellow); }
.sciopero-card.status-ended     { border-left-color: var(--text-muted); opacity: .75; }
.sciopero-card.status-unknown   { border-left-color: var(--accent-blue); }

.sciopero-card .sc-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.3;
}
.sciopero-card .sc-ico { font-size: 16px; line-height: 1; }
.sciopero-card .sc-settore { font-weight: 700; color: var(--text-primary); }
.sciopero-card .sc-rilevanza { color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.sciopero-card .sc-date { color: var(--text-secondary); font-family: 'Space Grotesk', sans-serif; font-size: 11px; }
.sciopero-card .sc-sep { color: var(--text-muted); }

.sciopero-card .sc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sciopero-card .sc-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.sciopero-card .sc-badge.live      { background: var(--accent-red);    color: #fff; animation: match-pulse 1.5s infinite; }
.sciopero-card .sc-badge.scheduled { background: var(--accent-yellow); color: #000; }
.sciopero-card .sc-badge.ended     { background: var(--bg-elevated);   color: var(--text-muted); border: 1px solid var(--border); }
.sciopero-card .sc-badge.unknown   { background: rgba(0,180,255,.15);  color: var(--accent-blue); border: 1px solid var(--accent-blue); }

.sciopero-card .sc-luogo {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}
.sciopero-card .sc-modalita {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ===== EVENTI ===== */
.event-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.event-item:last-child { border-bottom: none; }
.event-item .type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    margin-bottom: 4px;
}
.event-item .type.sciopero       { background: var(--accent-orange); color: #fff; }
.event-item .type.protesta       { background: var(--accent-red); color: #fff; }
.event-item .type.manifestazione { background: var(--accent-purple); color: #fff; }
.event-item .type.allerta        { background: var(--accent-yellow); color: #000; }
.event-item .type.altro          { background: var(--text-muted); color: #fff; }
.event-item .title { font-size: 12px; font-weight: 500; line-height: 1.3; }
.event-item .meta  { font-size: 10px; color: var(--text-muted); margin-top: 3px; }

/* ===== TV / STREAMING ===== */
.tv-controls {
    display: flex;
    gap: 5px;
    align-items: center;
}
.tv-controls select {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tv-controls select:focus {
    outline: none;
    border-color: var(--accent-blue);
}
.tv-controls button,
.tv-controls .tv-open-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    line-height: 1.4;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tv-controls button:hover,
.tv-controls .tv-open-btn:hover {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    background: var(--bg-elevated);
}
.tv-controls .tv-open-btn {
    background: var(--accent-blue);
    color: #000;
    border-color: var(--accent-blue);
}
.tv-controls .tv-open-btn:hover {
    filter: brightness(1.15);
    color: #000;
}
.tv-controls #tvMute.active {
    background: var(--accent-blue);
    color: #000;
    border-color: var(--accent-blue);
}
.tv-controls #tvMute.active:hover {
    filter: brightness(1.15);
    color: #000;
}

/* TV body: si adatta in altezza alla mappa (stessa riga grid) */
.widget.col-tv .widget-body.tv-body {
    padding: 0;
    max-height: none;
    overflow: hidden;
    background: #000;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.tv-body iframe {
    display: block;
    width: 100%;
    flex: 1;
    height: 100%;
    min-height: 0;
    border: 0;
    background: #000;
}
.tv-body .tv-fallback { flex: 0 0 auto; }
@media (max-width: 768px) {
    .tv-body iframe { min-height: 56.25vw; max-height: 240px; }
}

.tv-fallback {
    color: var(--text-muted);
    font-size: 11px;
    padding: 6px 12px;
    background: var(--bg-elevated);
    width: 100%;
    text-align: center;
    border-top: 1px solid var(--border);
}
.tv-fallback a {
    color: var(--accent-blue);
    text-decoration: underline;
}

/* ===== SERIE A — ticker partite scorrente + classifica ===== */
.widget.col-seriea { overflow: hidden; }
.widget.col-seriea .widget-header {
    background: linear-gradient(135deg, #1a3a5c 0%, var(--bg-tertiary) 60%);
    border-bottom-color: #2a5a8c;
    flex-wrap: wrap;
    gap: 8px;
}
.widget.col-seriea .widget-header .title::before {
    background: linear-gradient(180deg, var(--accent-green), var(--accent-blue));
}

/* Toggle tabs Partite/Classifica nel widget header */
.seriea-toggle {
    display: inline-flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}
.seriea-tab {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    white-space: nowrap;
}
.seriea-tab:hover { color: var(--text-primary); }
.seriea-tab.active {
    background: var(--accent-blue);
    color: #000;
}

.seriea-body {
    padding: 0;
    max-height: none;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 50%, rgba(0, 230, 118, .04) 0%, transparent 60%),
        radial-gradient(circle at 70% 50%, rgba(0, 180, 255, .04) 0%, transparent 60%),
        var(--bg-secondary);
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}
.seriea-view { flex: 1; min-height: 0; display: flex; }
.seriea-view[hidden] { display: none; }

.seriea-view-matches {
    align-items: center;
    overflow: hidden;
    position: relative;
}
.seriea-view-matches::before, .seriea-view-matches::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; width: 24px;
    z-index: 2;
    pointer-events: none;
}
.seriea-view-matches::before { left: 0;  background: linear-gradient(90deg, var(--bg-secondary), transparent); }
.seriea-view-matches::after  { right: 0; background: linear-gradient(270deg, var(--bg-secondary), transparent); }

/* View classifica: scroll verticale dentro widget compatto */
.seriea-view-standings {
    flex-direction: column;
    overflow-y: auto;
    padding: 6px 8px 8px;
}
.seriea-view-standings::-webkit-scrollbar { width: 6px; }
.seriea-view-standings::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Drag-scroll: l'animazione è gestita in JS (autoscroll + pausa su hover + drag manuale).
   Nessuna animation CSS qui per evitare conflitti col transform JS. */
.seriea-view-matches { cursor: grab; }
.seriea-view-matches.dragging { cursor: grabbing; user-select: none; }
.seriea-track {
    display: flex;
    gap: 14px;
    padding: 8px 16px;
    white-space: nowrap;
    align-items: center;
    will-change: transform;
}
/* La card sotto cursore mostra che è interattiva */
.match-card { cursor: pointer; }

/* Match card — altezza adatta a widget rspan 1 (~90px), badge 40×40 */
.match-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 14px;
    flex-shrink: 0;
    height: 90px;
    transition: transform .15s, border-color .2s, box-shadow .2s;
}
.match-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-blue);
    box-shadow: 0 6px 22px rgba(0,180,255,.22);
}

/* Status pill — finita / live / programmata */
.match-status {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}
.match-status.live {
    background: var(--accent-red);
    color: #fff;
    animation: match-pulse 1.5s infinite;
}
.match-status.finished {
    background: rgba(0, 230, 118, .15);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
}
.match-status.scheduled {
    background: rgba(0, 180, 255, .12);
    color: var(--accent-blue);
    border: 1px solid var(--accent-blue);
}
.match-status.postponed {
    background: rgba(255, 109, 0, .15);
    color: var(--accent-orange);
    border: 1px solid var(--accent-orange);
}
@keyframes match-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,61,61,.7); }
    50%      { box-shadow: 0 0 0 6px rgba(255,61,61,0); }
}

.match-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.match-side {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.match-badge {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.match-team {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.01em;
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.match-score {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    min-width: 70px;
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
    letter-spacing: -.02em;
}
.match-score.vs {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 8px 10px;
}
.match-score .sep { color: var(--text-muted); margin: 0 6px; font-weight: 400; }

.match-time {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif;
    flex-shrink: 0;
}

/* (Modal classifica rimosso: ora la classifica è inline nel widget via toggle) */

.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.standings-table thead th {
    text-align: center;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 4px 3px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
}
.standings-table thead th.team-col { text-align: left; padding-left: 6px; }
.standings-table tbody td {
    padding: 4px 3px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    color: var(--text-primary);
    vertical-align: middle;
}
.standings-table tbody tr:last-child td { border-bottom: none; }
.standings-table tbody tr:hover td { background: var(--bg-elevated); }

.standings-table .rank-col {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--text-muted);
    width: 22px;
}
.standings-table tbody tr.zone-cl  .rank-col { color: var(--accent-blue); }   /* 1-4: Champions */
.standings-table tbody tr.zone-el  .rank-col { color: var(--accent-green); }  /* 5-6: Europa */
.standings-table tbody tr.zone-cf  .rank-col { color: var(--accent-yellow); } /* 7: Conference */
.standings-table tbody tr.zone-rel .rank-col { color: var(--accent-red); }    /* 18-20: retroc. */

.standings-table .team-col {
    text-align: left;
    padding-left: 6px;
}
.standings-table .team-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}
.standings-table .team-cell img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}
.standings-table .team-cell .team-name {
    font-weight: 600;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90px;
}
.standings-table .points-col {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--accent-blue);
}
/* Nel widget compatto nascondiamo dettagli — solo posizione, squadra, PG, DR, PT */
.widget.col-seriea .standings-table .w-col,
.widget.col-seriea .standings-table .d-col,
.widget.col-seriea .standings-table .l-col,
.widget.col-seriea .standings-table .gf-col,
.widget.col-seriea .standings-table .ga-col,
.widget.col-seriea .standings-table .form-col {
    display: none;
}
.standings-table .gd-col.pos { color: var(--accent-green); }
.standings-table .gd-col.neg { color: var(--accent-red); }

.standings-form { display: inline-flex; gap: 2px; }
.standings-form span {
    width: 14px; height: 14px;
    border-radius: 3px;
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    line-height: 14px;
    text-align: center;
}
.standings-form .W { background: var(--accent-green); color: #000; }
.standings-form .D { background: var(--text-muted); }
.standings-form .L { background: var(--accent-red); }

@media (max-width: 768px) {
    .match-card { height: 84px; padding: 8px 12px; gap: 8px; }
    .match-team { max-width: 70px; font-size: 10px; }
    .match-score { font-size: 18px; min-width: 60px; padding: 3px 8px; }
    .match-badge { width: 36px; height: 36px; }
    .standings-table thead th { font-size: 8px; }
    .standings-table .gf-col, .standings-table .ga-col,
    .standings-table .w-col, .standings-table .d-col, .standings-table .l-col,
    .standings-table .form-col { display: none; }
}

/* ===== TENNIS widget ===== */
.widget.col-tennis .widget-header {
    background: linear-gradient(135deg, #2a4a1a 0%, var(--bg-tertiary) 60%);
    border-bottom-color: #4a7a3a;
}
.widget.col-tennis .widget-header .title::before {
    background: linear-gradient(180deg, #c2ff4a, var(--accent-green));
}
.tennis-body { padding: 8px 12px; }
.tennis-sinner-card {
    background: linear-gradient(135deg, rgba(0,230,118,.10), rgba(255,214,0,.05));
    border: 1px solid var(--accent-green);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.tennis-sinner-card .sinner-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-green);
    margin-bottom: 4px;
}
/* Card "prossima partita" / "in corso" — accento blu per distinguerla dall'esito */
.tennis-next-card {
    background: linear-gradient(135deg, rgba(0,180,255,.10), rgba(0,180,255,.03));
    border-color: var(--accent-blue);
}
.tennis-next-card .sinner-label { color: var(--accent-blue); }
.tennis-match .tennis-score.tennis-when {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-blue);
}
.tennis-match {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.tennis-match:last-child { border-bottom: none; }
.tennis-match .tennis-players { flex: 1; min-width: 0; line-height: 1.35; }
.tennis-match .tennis-players .p {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tennis-match .tennis-players .p.winner { color: var(--accent-green); font-weight: 700; }
.tennis-match .tennis-score {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
.tennis-match .tennis-status {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 2px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}
.tennis-match .tennis-status.live  { background: var(--accent-red); color: #fff; animation: match-pulse 1.5s infinite; }
.tennis-match .tennis-status.final { background: rgba(0,230,118,.15); color: var(--accent-green); border: 1px solid var(--accent-green); }
.tennis-match .tennis-status.scheduled { background: rgba(0,180,255,.12); color: var(--accent-blue); border: 1px solid var(--accent-blue); }
.tennis-tournament {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
}

/* ===== F1 widget ===== */
.widget.col-f1 .widget-header {
    background: linear-gradient(135deg, #5c1a1a 0%, var(--bg-tertiary) 60%);
    border-bottom-color: #8c2a2a;
}
.widget.col-f1 .widget-header .title::before {
    background: linear-gradient(180deg, var(--accent-red), var(--accent-orange));
}
.f1-toggle {
    display: inline-flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}
.f1-tab {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    white-space: nowrap;
}
.f1-tab:hover { color: var(--text-primary); }
.f1-tab.active {
    background: var(--accent-red);
    color: #fff;
}
.f1-body {
    padding: 0;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.f1-view { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 8px; }
.f1-view[hidden] { display: none; }
.f1-view::-webkit-scrollbar { width: 6px; }
.f1-view::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.f1-race-meta {
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}
.f1-race-meta .race-name { color: var(--text-primary); font-weight: 700; font-size: 12px; }
.f1-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.f1-table tbody td {
    padding: 4px 4px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: middle;
}
.f1-table tbody tr:last-child td { border-bottom: none; }
.f1-table tbody tr:hover td { background: var(--bg-elevated); }
.f1-table .pos {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--text-muted);
    width: 22px;
    text-align: center;
}
.f1-table tbody tr.podium-1 .pos { color: #FFD700; }
.f1-table tbody tr.podium-2 .pos { color: #C0C0C0; }
.f1-table tbody tr.podium-3 .pos { color: #CD7F32; }
.f1-table .driver { font-weight: 600; }
.f1-table .constructor { color: var(--text-muted); font-size: 10px; }
.f1-table .pts {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--accent-red);
    text-align: right;
    white-space: nowrap;
}
.f1-table .time-col { color: var(--text-secondary); font-size: 10px; text-align: right; }

/* ===== SEO BLOCK (testo descrittivo per indicizzazione) ===== */
.seo-block {
    margin: 24px 10px 12px;
    padding: 22px 28px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.65;
}
.seo-block h2 {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 10px;
    letter-spacing: -.01em;
}
.seo-block p { margin-bottom: 10px; }
.seo-block p:last-child { margin-bottom: 0; }
.seo-block strong { color: var(--text-primary); font-weight: 600; }
.seo-block em { color: var(--accent-blue); font-style: normal; }

/* ===== FOOTER ===== */
.site-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
    margin-top: 22px;
}
.site-footer a { color: var(--text-secondary); }

/* ===== LOADING / EMPTY ===== */
.loading {
    padding: 22px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}
.loading::after {
    content: '';
    display: inline-block;
    margin-left: 8px;
    width: 10px; height: 10px;
    border: 2px solid var(--border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

/* ===== COOKIE BANNER (GDPR) ===== */
.cookie-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 9999;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-blue);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(0,180,255,.15);
    padding: 16px 20px;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.cookie-banner--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.cookie-banner-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
}
.cookie-banner-text { flex: 1; min-width: 0; }
.cookie-banner h3 {
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--text-primary);
    letter-spacing: -.01em;
    font-weight: 700;
}
.cookie-banner p {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}
.cookie-banner p strong { color: var(--text-primary); font-weight: 600; }
.cookie-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.cookie-btn {
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    transition: all .15s;
    white-space: nowrap;
}
.cookie-btn-primary {
    background: var(--accent-blue);
    color: #000;
}
.cookie-btn-primary:hover {
    filter: brightness(1.1);
}
.cookie-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-strong);
}
.cookie-btn-ghost:hover {
    color: var(--text-primary);
    border-color: var(--accent-blue);
    background: var(--bg-elevated);
}
@media (max-width: 768px) {
    .cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 14px 16px; }
    .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 12px; }
    .cookie-banner-actions { justify-content: stretch; }
    .cookie-btn { flex: 1; padding: 11px; }
}

/* Link "Gestione cookie" nel footer */
.site-footer a#cookieSettingsLink { color: var(--text-secondary); }
.site-footer a#cookieSettingsLink:hover { color: var(--accent-blue); }

/* ===== FLASH NEW ===== */
.flash-new {
    position: absolute;
    top: 8px; right: 12px;
    background: var(--accent-green);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    animation: flash-fade 3s forwards;
}
@keyframes flash-fade {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-6px); }
}

/* ====================================================================
   PLANISFERO TERREMOTI MONDIALI (USGS) — sezione full-width fondo pagina
   ==================================================================== */
.eq-world-section {
    width: 100%;
    margin: 24px 0 12px;
    padding: 0 14px;
    background: transparent;
}

/* Variante "pagina evergreen": rompe il container .eg-main (max-width 1100px)
   ed occupa tutta la larghezza della finestra ("full bleed").
   Pattern `calc(50% - 50vw)`: il margine compensa esattamente la distanza
   tra il centro del parent (50%) e il bordo della viewport (50vw),
   indipendente dal padding del parent. Piu' robusto del trio left/right/-50vw
   su mobile, dove iOS Safari conta diversamente vw vs % del padding container. */
.eq-world-section--page {
    width: 100vw;
    max-width: 100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;
    border-radius: 0;
}
.eq-world-section--page .eq-world-header {
    border-radius: 0;
    border-left: none;
    border-right: none;
}
.eq-world-section--page .eq-world-map {
    border-radius: 0;
    border-left: none;
    border-right: none;
    height: 70vh;
    min-height: 480px;
}

/* Split view: header diviso in 2 lati + mappa sx Italia / globo dx Mondo */
.eq-split-header {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    gap: 0;
}
.eq-split-side {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 14px;
    min-width: 0;
}
.eq-split-divider {
    width: 1px;
    height: 36px;
    background: var(--border);
}
.eq-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}
.eq-split-pane {
    width: 100%;
    height: 70vh;
    min-height: 480px;
    background: radial-gradient(ellipse at center, #0d1b2a 0%, #04080c 70%, #000 100%);
    position: relative;
    overflow: hidden;
}
.eq-split-pane-it {
    background: #04080a; /* Leaflet tiles riempiono comunque */
}
/* Su mobile: stack verticale, ciascuna mappa metà altezza */
@media (max-width: 900px) {
    .eq-split-header {
        grid-template-columns: 1fr;
    }
    .eq-split-divider {
        width: 100%;
        height: 1px;
        margin: 6px 0;
    }
    .eq-split-side {
        padding: 8px 14px;
        flex-direction: column;
        align-items: stretch;
    }
    .eq-split {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .eq-split-pane { height: 50vh; min-height: 300px; }
}
.eq-world-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    border-bottom: none;
}
.eq-world-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.eq-world-icon {
    font-size: 22px;
    line-height: 1;
}
.eq-world-title h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: .2px;
}
.eq-world-stats {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.eq-world-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}
.eq-world-stat-val {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.eq-world-stat-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin-top: 2px;
}
.eq-world-stat-1h .eq-world-stat-val {
    color: var(--accent-red);
    text-shadow: 0 0 12px rgba(255, 61, 61, .55);
    animation: eq-stat-pulse 1.4s ease-in-out infinite;
}
.eq-world-stat-6h .eq-world-stat-val {
    color: var(--accent-orange);
}
@keyframes eq-stat-pulse {
    0%, 100% { opacity: 1;   }
    50%      { opacity: .55; }
}
.eq-world-update {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: .4px;
}
.eq-world-update span { color: var(--text-secondary); font-weight: 600; }

.eq-world-map {
    width: 100%;
    height: 640px;
    background: radial-gradient(ellipse at center, #0d1b2a 0%, #04080c 70%, #000 100%);
    border: 1px solid var(--border);
    border-radius: 0 0 10px 10px;
    border-top: 1px solid var(--border);
    overflow: hidden;
    position: relative;
}

/* Widget Terremoti Mondo nella home (col-eq-world) — il globo deve riempire il body */
.widget.col-eq-world .widget-body.eq-world-body {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.widget.col-eq-world #eqWorldMap {
    width: 100%;
    flex: 1;
    min-height: 280px;
    background: radial-gradient(ellipse at center, #0d1b2a 0%, #04080c 70%, #000 100%);
    position: relative;
    overflow: hidden;
}
/* Nel widget piccolo: legenda piu' compatta, popup ridotto */
.widget.col-eq-world .eq-legend-3d {
    padding: 6px 8px;
    font-size: 9.5px;
    max-width: 130px;
}
.widget.col-eq-world .eq-legend-3d .eq-legend-hint { display: none; }
.widget.col-eq-world .eq-popup-3d { width: 220px; }
/* Canvas del globo: trascinamento sempre attivo */
.eq-world-map canvas { display: block; cursor: grab; }
.eq-world-map canvas:active { cursor: grabbing; }

/* Loader iniziale mentre la texture si carica */
.eq-globe-loader {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-secondary);
    font-size: 13px;
    letter-spacing: .5px;
    padding: 10px 18px;
    background: rgba(13,19,23,.85);
    border: 1px solid var(--border);
    border-radius: 6px;
    pointer-events: none;
    z-index: 5;
}

/* Popup 3D: floating overlay sopra al canvas */
.eq-popup-3d {
    position: absolute;
    width: 280px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(74,163,255,.15);
    overflow: hidden;
    z-index: 10;
    font-size: 12px;
    line-height: 1.45;
    animation: eq-popup-in .18s ease-out;
}
@keyframes eq-popup-in {
    from { opacity: 0; transform: translateY(6px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1);   }
}
.eq-popup-3d .eq-pop-close {
    position: absolute;
    top: 6px; right: 8px;
    width: 22px; height: 22px;
    background: transparent;
    border: none;
    color: rgba(0,0,0,.6);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    padding: 0;
}
.eq-popup-3d .eq-pop-close:hover { color: #000; }
.eq-popup-3d .eq-pop-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 36px 8px 12px;
    color: #000;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}
.eq-popup-3d .eq-pop-mag  { font-size: 18px; }
.eq-popup-3d .eq-pop-type { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .7; }
.eq-popup-3d .eq-pop-body { padding: 10px 12px 12px; }
.eq-popup-3d .eq-pop-place {
    font-weight: 600; color: var(--text-primary);
    margin-bottom: 8px; font-size: 13px; line-height: 1.35;
}
.eq-popup-3d .eq-pop-row {
    display: flex; align-items: center; gap: 6px;
    color: var(--text-secondary); margin-bottom: 4px;
}
.eq-popup-3d .eq-pop-row span:first-child {
    width: 18px; text-align: center; color: var(--text-muted);
}
.eq-popup-3d .eq-pop-ago { color: var(--text-muted); font-size: 11px; }
.eq-popup-3d .eq-pop-tsu {
    margin-top: 8px; padding: 4px 8px;
    background: rgba(0,180,255,.15); border: 1px solid rgba(0,180,255,.5);
    color: var(--accent-blue); border-radius: 4px;
    font-weight: 600; text-align: center;
}
.eq-popup-3d .eq-pop-alert {
    margin-top: 6px; padding: 3px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-align: center;
}
.eq-popup-3d .eq-pop-alert-green  { background: rgba(0,230,118,.15); color: var(--accent-green);  border: 1px solid rgba(0,230,118,.4); }
.eq-popup-3d .eq-pop-alert-yellow { background: rgba(255,214,0,.15); color: var(--accent-yellow); border: 1px solid rgba(255,214,0,.4); }
.eq-popup-3d .eq-pop-alert-orange { background: rgba(255,109,0,.15); color: var(--accent-orange); border: 1px solid rgba(255,109,0,.4); }
.eq-popup-3d .eq-pop-alert-red    { background: rgba(255,61,61,.18); color: var(--accent-red);    border: 1px solid rgba(255,61,61,.5); }
.eq-popup-3d .eq-pop-link {
    display: inline-block; margin-top: 10px; padding: 5px 10px;
    background: var(--accent-blue); color: #000; font-weight: 600;
    border-radius: 4px; font-size: 11px; text-decoration: none;
}
.eq-popup-3d .eq-pop-link:hover { background: #38c8ff; text-decoration: none; }

/* Legenda 3D: overlay in basso a destra del globo */
.eq-legend-3d {
    position: absolute;
    bottom: 14px; right: 14px;
    background: rgba(13,19,23,.85);
    color: var(--text-secondary);
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.55;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 20px rgba(0,0,0,.6);
    z-index: 6;
    max-width: 200px;
}
.eq-legend-3d .eq-legend-hint {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
}
@media (max-width: 768px) {
    .eq-legend-3d {
        bottom: 8px; right: 8px; left: auto;
        padding: 7px 9px;
        font-size: 9.5px;
        line-height: 1.45;
        max-width: 150px;
    }
    .eq-legend-3d .eq-legend-title { font-size: 9px; margin-bottom: 4px; }
    .eq-legend-3d .eq-legend-sep   { margin: 4px 0; }
    .eq-legend-3d .eq-legend-hint  { display: none; }
    .eq-legend-3d .eq-legend-dot   { width: 9px; height: 9px; }

    /* Popup: centrato in basso, occupa quasi tutta la larghezza */
    .eq-popup-3d {
        width: auto;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: 8px;
        max-height: 60%;
        overflow-y: auto;
    }
}

/* Schermi cortissimi: legenda ancora piu' compatta */
@media (max-width: 480px) {
    .eq-legend-3d { max-width: 130px; font-size: 9px; padding: 6px 8px; }
    .eq-legend-3d .eq-legend-row { gap: 4px; }
}

/* Marker terremoti: classi applicate al <path> SVG dal `className` di L.circleMarker */
.eq-marker {
    transition: stroke-width .2s ease;
    cursor: pointer;
}
.eq-marker:hover {
    stroke-width: 3 !important;
}

/* Pulsazione (piccolo<->grande) per eventi delle ultime 6 ore.
   transform-box: fill-box ancora la trasformazione al bounding box del <circle>
   SVG (centro del cerchio), altrimenti scale() ruoterebbe attorno a (0,0). */
@keyframes eq-pulse {
    0%, 100% { transform: scale(.55); fill-opacity: .95; stroke-opacity: 1;   }
    50%      { transform: scale(1.6); fill-opacity: .25; stroke-opacity: .35; }
}
.eq-recent {
    transform-box: fill-box;
    transform-origin: center;
    animation: eq-pulse 1.6s ease-in-out infinite;
}

/* Eventi dell'ultima ora: pulsazione piu' ampia e veloce + glow */
@keyframes eq-pulse-fast {
    0%, 100% { transform: scale(.45); fill-opacity: 1;   stroke-opacity: 1;   stroke-width: 2; }
    50%      { transform: scale(2);   fill-opacity: .25; stroke-opacity: .3;  stroke-width: 1; }
}
.eq-fresh {
    transform-box: fill-box;
    transform-origin: center;
    animation: eq-pulse-fast .95s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255, 61, 61, .85));
}

/* Onde concentriche (ripple) sugli eventi dell'ultima ora */
.eq-ripple-icon { pointer-events: none; background: transparent; border: none; }
.eq-ripple {
    position: absolute;
    left: 0; top: 0;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    border-radius: 50%;
    border: 2px solid rgba(255, 61, 61, .9);
    box-shadow: 0 0 0 0 rgba(255, 61, 61, .7);
    animation: eq-ripple-pulse 1.8s ease-out infinite;
}
.eq-ripple::before,
.eq-ripple::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid rgba(255, 61, 61, .9);
    animation: eq-ripple-pulse 1.8s ease-out infinite;
}
.eq-ripple::before { animation-delay: .6s;  }
.eq-ripple::after  { animation-delay: 1.2s; }

@keyframes eq-ripple-pulse {
    0%   { transform: scale(.8);  opacity: .85; }
    80%  { opacity: 0; }
    100% { transform: scale(5.5); opacity: 0;   }
}

/* Popup terremoti — override stile di default Leaflet */
.eq-popup-wrapper .leaflet-popup-content-wrapper {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.55);
    padding: 0;
    overflow: hidden;
}
.eq-popup-wrapper .leaflet-popup-content {
    margin: 0;
    width: 260px !important;
    font-size: 12px;
    line-height: 1.45;
}
.eq-popup-wrapper .leaflet-popup-tip { background: var(--bg-elevated); border: 1px solid var(--border-strong); }
.eq-popup-wrapper a.leaflet-popup-close-button { color: var(--text-secondary); top: 6px; right: 6px; }

.eq-popup .eq-pop-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 12px;
    color: #000;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}
.eq-popup .eq-pop-mag  { font-size: 18px; }
.eq-popup .eq-pop-type { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .75; }
.eq-popup .eq-pop-body { padding: 10px 12px 12px; }
.eq-popup .eq-pop-place {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.35;
}
.eq-popup .eq-pop-row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.eq-popup .eq-pop-row span:first-child {
    width: 18px;
    text-align: center;
    color: var(--text-muted);
}
.eq-popup .eq-pop-ago { color: var(--text-muted); font-size: 11px; }
.eq-popup .eq-pop-tsu {
    margin-top: 8px;
    padding: 4px 8px;
    background: rgba(0,180,255,.15);
    border: 1px solid rgba(0,180,255,.5);
    color: var(--accent-blue);
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
}
.eq-popup .eq-pop-alert {
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-align: center;
}
.eq-popup .eq-pop-alert-green  { background: rgba(0,230,118,.15); color: var(--accent-green);  border: 1px solid rgba(0,230,118,.4); }
.eq-popup .eq-pop-alert-yellow { background: rgba(255,214,0,.15); color: var(--accent-yellow); border: 1px solid rgba(255,214,0,.4); }
.eq-popup .eq-pop-alert-orange { background: rgba(255,109,0,.15); color: var(--accent-orange); border: 1px solid rgba(255,109,0,.4); }
.eq-popup .eq-pop-alert-red    { background: rgba(255,61,61,.18); color: var(--accent-red);    border: 1px solid rgba(255,61,61,.5); }
.eq-popup .eq-pop-link {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 10px;
    background: var(--accent-blue);
    color: #000;
    font-weight: 600;
    border-radius: 4px;
    font-size: 11px;
}
.eq-popup .eq-pop-link:hover { background: #38c8ff; text-decoration: none; }

/* Legenda magnitudo */
.eq-legend {
    background: rgba(13,19,23,.92);
    color: var(--text-secondary);
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.5;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.eq-legend-title {
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1.2px;
    margin-bottom: 6px;
}
.eq-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.eq-legend-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.eq-legend-sep {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}
@keyframes eq-legend-pulse {
    0%, 100% { transform: scale(.55); opacity: .95; }
    50%      { transform: scale(1.4); opacity: .35; }
}
.eq-legend-blink {
    background: var(--accent-red);
    transform-origin: center;
    animation: eq-legend-pulse 1.6s ease-in-out infinite;
}
.eq-legend-ripple {
    background: var(--accent-red);
    box-shadow: 0 0 0 2px rgba(255,61,61,.4), 0 0 0 5px rgba(255,61,61,.18);
}

/* Mobile: planisfero piu' compatto */
@media (max-width: 768px) {
    .eq-world-section { margin: 16px 0 8px; padding: 0 8px; }
    .eq-world-header {
        padding: 10px 12px;
        gap: 10px;
        flex-direction: column;
        align-items: stretch;
    }
    .eq-world-title { justify-content: center; }
    .eq-world-title h2 { font-size: 14px; }
    .eq-world-icon { font-size: 18px; }
    .eq-world-stats {
        gap: 8px;
        width: 100%;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .eq-world-stat { flex: 1 1 auto; min-width: 70px; }
    .eq-world-stat-val { font-size: 18px; }
    .eq-world-stat-lbl { font-size: 9px; }
    .eq-world-update {
        width: 100%;
        text-align: center;
        font-size: 10px;
        order: 99;
    }
    .eq-world-map { height: 55vh; min-height: 320px; }

    /* IMPORTANTE: override della variante --page (altrimenti 70vh + min 480px
       fanno restare il globo alto come desktop su mobile). */
    .eq-world-section--page { margin: 0; padding: 0; }
    .eq-world-section--page .eq-world-map {
        height: 55vh;
        min-height: 320px;
    }
}

/* Mobile portrait molto stretto: globo ancora piu' compatto */
@media (max-width: 480px) {
    .eq-world-section--page .eq-world-map,
    .eq-world-map { height: 50vh; min-height: 300px; }
    .eq-world-header { padding: 8px 10px; gap: 8px; }
    .eq-world-title h2 { font-size: 13px; }
    .eq-world-stat-val { font-size: 16px; }
    .eq-world-stat-lbl { font-size: 8.5px; letter-spacing: .8px; }
}

/* Landscape su telefono: globo abbastanza alto da essere leggibile,
   ma lascia spazio ai controlli del browser */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .eq-world-section--page .eq-world-map,
    .eq-world-map { height: 70vh; min-height: 260px; }
    .eq-world-header { flex-direction: row; flex-wrap: wrap; }
}