/*
 * Vivere Ponderano v3
 * Attese Civiche — tema chiaro
 *
 * SOLO PRESENTAZIONE.
 * Nessuna logica, dato, timer o stato viene modificato.
 */

:root {
    --bg: #f4f7f8;
    --bg-soft: #eef3f3;
    --panel: #ffffff;
    --panel-light: #f8fafb;

    --text: #17202a;
    --muted: #64748b;
    --line: #dfe7ea;

    --red: #b45309;
    --red-bright: #d97706;
    --red-soft: #fff7ed;

    --amber: #d97706;
    --amber-soft: #fff8eb;

    --green: #16855b;
    --green-soft: #edf9f3;

    --shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 10px 30px rgba(15, 23, 42, .055);
}


/* ---------------------------------------------------------
   PAGINA
   --------------------------------------------------------- */

body {
    color: var(--text);
    background:
        linear-gradient(
            180deg,
            #f8fafb 0,
            #f3f6f7 280px,
            #f6f8f9 100%
        );
}

.page {
    width: min(1120px, calc(100% - 30px));
}

.back,
.text-version {
    color: #64748b;
}

.back:hover,
.text-version:hover {
    color: #0f766e;
}


/* ---------------------------------------------------------
   AGGIORNAMENTO LIVE: informazione, non allarme
   --------------------------------------------------------- */

.live {
    color: #0f625d;
    border: 1px solid #b9ddd9;
    background: #eef9f7;
    letter-spacing: .06em;
}

.live-dot {
    background: #159a8c;
    box-shadow: none;
    animation: none;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero {
    border: 1px solid #dce6e7;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(13, 148, 136, .09),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f5faf9
        );

    box-shadow:
        0 1px 2px rgba(15,23,42,.03),
        0 14px 40px rgba(15,23,42,.055);
}

.hero::before {
    background: rgba(13, 148, 136, .055);
}

.hero::after {
    opacity: .12;
}

.hero h1,
.hero h2,
.hero strong,
.hero .value {
    color: #17202a;
}

.hero p,
.hero small {
    color: #64748b;
}


/* eventuali box riepilogo nella hero */

.hero [class*="stat"],
.hero [class*="summary"] {
    border-color: #dbe5e7;
    color: #17202a;
    background: rgba(255,255,255,.76);
    box-shadow: none;
}


/* ---------------------------------------------------------
   TITOLI DI SEZIONE
   --------------------------------------------------------- */

.page h2,
.page h3,
.card-title {
    color: #17202a;
}

.section-kicker,
.eyebrow,
.kicker {
    color: #0f766e;
}

.section-head,
.section-header {
    color: #17202a;
}


/* ---------------------------------------------------------
   ALBO CIVICO
   --------------------------------------------------------- */

.albo-context {
    border: 1px solid #cfe3e1;
    color: #52616d;
    background:
        linear-gradient(
            135deg,
            #f0f8f7,
            #ffffff
        );

    box-shadow: none;
}

.albo-context-label {
    color: #ffffff;
    background: #167d74;
}

.albo-context strong {
    color: #17202a;
}

.albo-context a {
    color: #0f766e;
    font-weight: 850;
}


/* ---------------------------------------------------------
   ATTESE APERTE
   --------------------------------------------------------- */

.waiting-card {
    color: #17202a;

    border:
        1px solid #dce5e8;

    border-left:
        4px solid #d99a2b;

    background: #ffffff;

    box-shadow: var(--shadow);
}

.waiting-card::before {
    background: transparent;
    opacity: 0;
}

.waiting-card::after {
    display: none;
}

.waiting-card h3,
.waiting-card h4,
.waiting-card strong,
.waiting-card b {
    color: #17202a;
}

.waiting-card p,
.waiting-card li,
.waiting-card dd,
.waiting-card small {
    color: #4f5f6d;
}

.waiting-card a {
    color: #0f766e;
}


/* badge aperta: ambra, non rosso */

.badge {
    color: #92400e;
    border: 1px solid #f2c77d;
    background: #fff8e8;
}


/* stato pratica */

.status-line {
    color: #8a5709;
}

.status-line::before {
    background: #d99a2b;
    box-shadow: none;
}


/* pannelli interni */

.waiting-card [class*="notice"],
.waiting-card [class*="update"],
.waiting-card [class*="note"],
.waiting-card [class*="detail"],
.waiting-card [class*="request"] {
    border-color: #e0e7e9;
    color: #475569;
    background: #f8fafb;
    box-shadow: none;
}


/* ---------------------------------------------------------
   CONTATORI
   --------------------------------------------------------- */

.counter-label {
    color: #64748b;
}

.counter {
    gap: 8px;
}

.counter .time,
.waiting-card .time,
.closed-card .time {
    border: 1px solid #dfe6e8;
    color: #17202a;
    background: #f8fafb;
    box-shadow: none;
}

.counter .value,
.time .value {
    color: #17202a;
}

.counter .label,
.time .label {
    color: #718096;
}


/* i secondi non sono un'emergenza */

.waiting-card .time.seconds {
    border-color: #dfe6e8;
    color: #17202a;
    background: #f8fafb;
    box-shadow: none;
}


/* ---------------------------------------------------------
   LINEA TEMPORALE / AGGIORNAMENTI
   --------------------------------------------------------- */

.waiting-card [class*="timeline"],
.waiting-card [class*="history"] {
    color: #475569;
}

.waiting-card [class*="timeline"]::before {
    background: #dbe5e7;
}

.waiting-card [class*="update"] {
    border-color: #dfe7e9;
    background: #f8fafb;
}

.waiting-card [class*="update"] strong {
    color: #17202a;
}


/* ---------------------------------------------------------
   PRATICHE CONCLUSE
   --------------------------------------------------------- */

.closed-card {
    color: #17202a;

    border:
        1px solid #d8e7df;

    border-left:
        4px solid #269266;

    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(15,23,42,.025),
        0 8px 24px rgba(15,23,42,.045);
}

.closed-card h3,
.closed-card h4,
.closed-card strong,
.closed-card b,
.closed-card .card-title {
    color: #17202a;
}

.closed-card p,
.closed-card li,
.closed-card small,
.closed-card .summary-text {
    color: #52616d;
}

.closed-badge {
    color: #11633f;
    border: 1px solid #a9dac1;
    background: #edf9f3;
}

.closed-card .counter {
    color: #17202a;
}

.closed-card .time {
    border-color: #dce8e1;
    background: #f6fbf8;
}

.closed-card .value {
    color: #155f42;
}


/* ---------------------------------------------------------
   TESTI SECONDARI / FOOTER
   --------------------------------------------------------- */

.page footer,
.page footer p,
.page footer small {
    color: #64748b;
}

.page footer a {
    color: #0f766e;
}


/* ---------------------------------------------------------
   ACCESSIBILITÀ
   --------------------------------------------------------- */

a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(13,148,136,.28);
    outline-offset: 3px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 720px) {

    .page {
        width: min(100% - 22px, 1120px);
    }

    .hero {
        border-radius: 20px;
        box-shadow: 0 6px 22px rgba(15,23,42,.05);
    }

    .waiting-card,
    .closed-card {
        border-radius: 18px;
    }

    .counter {
        gap: 6px;
    }
}

/* VP_ATTESE_FASCIA_V3_START */

/* =========================================================
   PRINCIPIO EDITORIALE
   ========================================================= */

.manifesto {
    position: relative !important;
    display: block !important;

    min-height: 0 !important;

    margin:
        30px 0
        22px !important;

    padding:
        24px 28px !important;

    border:
        1px solid #d9e6e5 !important;

    border-left:
        4px solid #16877d !important;

    border-radius:
        18px !important;

    color:
        #17202a !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f5faf9
        ) !important;

    box-shadow:
        0 1px 2px rgba(15,23,42,.03),
        0 8px 26px rgba(15,23,42,.045)
        !important;

    text-align:
        left !important;
}

/* elimina la vecchia virgoletta decorativa */

.manifesto::before,
.manifesto::after {
    display: none !important;
    content: none !important;
}

.manifesto p {
    max-width:
        850px !important;

    margin:
        0 !important;

    color:
        #17202a !important;

    font-size:
        clamp(1.12rem, 2.2vw, 1.5rem)
        !important;

    font-weight:
        750 !important;

    line-height:
        1.42 !important;

    letter-spacing:
        -.025em !important;
}

.manifesto strong {
    color:
        #0f766e !important;

    font-weight:
        850 !important;
}


/* =========================================================
   COME FUNZIONA
   ========================================================= */

.how-it-works {
    overflow:
        hidden !important;

    margin:
        0 0 34px !important;

    border:
        1px solid #d9e5e6 !important;

    border-radius:
        16px !important;

    color:
        #17202a !important;

    background:
        #ffffff !important;

    box-shadow:
        0 1px 2px rgba(15,23,42,.025)
        !important;
}

.how-it-works summary {
    position:
        relative !important;

    padding:
        16px 48px
        16px 18px !important;

    color:
        #0f625d !important;

    background:
        #f5faf9 !important;

    cursor:
        pointer !important;

    font-size:
        .94rem !important;

    font-weight:
        850 !important;

    line-height:
        1.3 !important;

    list-style:
        none !important;
}

.how-it-works summary::-webkit-details-marker {
    display: none;
}

.how-it-works summary::after {
    position:
        absolute;

    top:
        50%;

    right:
        18px;

    content:
        "+";

    transform:
        translateY(-50%);

    color:
        #0f766e;

    font-size:
        1.3rem;

    font-weight:
        500;
}

.how-it-works[open] summary::after {
    content:
        "−";
}

.how-it-works[open] summary {
    border-bottom:
        1px solid #e1e9ea !important;
}

.how-content {
    padding:
        18px 20px
        20px !important;

    color:
        #52616d !important;

    background:
        #ffffff !important;
}

.how-content p {
    max-width:
        900px;

    margin:
        0 0 14px;

    color:
        #52616d !important;

    font-size:
        .94rem;

    line-height:
        1.65;
}

.how-content p:last-child {
    margin-bottom:
        0;
}

.how-content strong {
    color:
        #263845 !important;
}


/* =========================================================
   RACCORDO CON RISCONTRI RICEVUTI
   ========================================================= */

.how-it-works + .section {
    margin-top:
        6px !important;
}

.section-head {
    margin-bottom:
        14px !important;
}

.section-head h2 {
    color:
        #17202a !important;
}

.section-count {
    color:
        #52616d !important;

    border:
        1px solid #dce5e7 !important;

    background:
        #ffffff !important;
}

.comparison-note {
    margin-bottom:
        14px !important;

    padding:
        13px 15px !important;

    border:
        1px solid #dfe7e9 !important;

    border-radius:
        13px !important;

    color:
        #64748b !important;

    background:
        #f8fafb !important;
}

.comparison-note strong {
    color:
        #334155 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .manifesto {
        margin:
            22px 0 16px !important;

        padding:
            19px 20px !important;

        border-radius:
            15px !important;
    }

    .manifesto p {
        font-size:
            1.08rem !important;

        line-height:
            1.48 !important;
    }

    .how-it-works {
        margin-bottom:
            26px !important;
    }

    .how-it-works summary {
        padding:
            15px 44px
            15px 16px !important;
    }

    .how-content {
        padding:
            16px !important;
    }
}

/* VP_ATTESE_FASCIA_V3_END */