/* ====================================================================
   La Casa di Lu & Li — Gestionale
   Restyling: design caldo e accogliente, pensato mobile-first.
   Palette dal logo: verde-petrolio, terracotta, arancio.
   ==================================================================== */

/* ---- Font (Plus Jakarta Sans, ospitato localmente) ---- */
@font-face { font-family:'Jakarta'; font-weight:400; font-display:swap;
    src:url('../fonts/jakarta-400.woff2') format('woff2'); }
@font-face { font-family:'Jakarta'; font-weight:500; font-display:swap;
    src:url('../fonts/jakarta-500.woff2') format('woff2'); }
@font-face { font-family:'Jakarta'; font-weight:600; font-display:swap;
    src:url('../fonts/jakarta-600.woff2') format('woff2'); }
@font-face { font-family:'Jakarta'; font-weight:700; font-display:swap;
    src:url('../fonts/jakarta-700.woff2') format('woff2'); }
@font-face { font-family:'Jakarta'; font-weight:800; font-display:swap;
    src:url('../fonts/jakarta-800.woff2') format('woff2'); }

:root {
    /* Testo */
    --ink:        #2c2925;
    --ink-soft:   #7a736a;
    /* Superfici */
    --bg:         #f6f3ee;
    --surface:    #ffffff;
    --surface-2:  #faf8f4;
    --line:       #ebe4da;
    --line-soft:  #f1ece4;
    /* Primario (verde-petrolio) */
    --primary:      #548289;
    --primary-d:    #426970;
    --primary-soft: #e7eff0;
    /* Accento / pericolo (terracotta) */
    --accent:      #c0563c;
    --accent-d:    #a3472f;
    --accent-soft: #f5e5df;
    /* Arancio (richiami caldi) */
    --warm:       #e89a4f;
    /* Stati del calendario — colori nettamente distinti */
    --occ-libero-bg: #e9f0e6;
    --occ-libero-tx: #6e8470;
    --occ-libero-bd: #d2e1ce;
    --occ-booking:   #3a72b8;
    --occ-diretta:   #3f9a6b;
    --occ-blocco:    #6b6258;
    --occ-conflitto: #db3b3b;
    /* Forma */
    --r-card:  16px;
    --r-ctrl:  11px;
    --r-chip:  7px;
    --shadow:    0 1px 2px rgba(45,35,20,.04), 0 6px 20px rgba(45,35,20,.05);
    --shadow-sm: 0 1px 2px rgba(45,35,20,.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Jakarta', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.55;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
h2 { font-size: 1.13rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 12px; }
a  { color: var(--primary); }

.muted { color: var(--ink-soft); font-size: 0.92rem; }
.hint  { color: var(--ink-soft); font-weight: 400; font-size: 0.82rem; }
.mt        { margin-top: 14px; }
.mt-grande { margin-top: 32px; }

/* ---- Icone ---- */
.ico {
    width: 1.15em; height: 1.15em;
    flex-shrink: 0;
    vertical-align: -0.16em;
}

/* ---- Animazione d'ingresso ---- */
@keyframes sali { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ====================================================================
   BARRA SUPERIORE
   ==================================================================== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    padding: 9px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand { display: flex; align-items: center; }
.brand img { height: 36px; width: auto; display: block; }

/* Menu orizzontale (desktop) — nascosto su mobile */
.nav-desktop { display: none; align-items: center; gap: 2px; }

.nav-desktop a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 9px 13px;
    border-radius: 9px;
    transition: background .15s, color .15s;
}

.nav-desktop a:hover  { color: var(--ink); background: var(--surface-2); }
.nav-desktop a.attivo { color: var(--primary); background: var(--primary-soft); }
.nav-desktop a.logout { color: var(--accent); }
.nav-desktop a.logout:hover { background: var(--accent-soft); }

/* Pulsante hamburger (mobile) */
.hamburger {
    display: block;
    width: 44px; height: 44px;
    padding: 12px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 11px;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 100%; height: 2px;
    background: var(--ink);
    border-radius: 2px;
    margin: 4px 0;
    transition: transform .2s;
}

.hamburger span:first-child { margin-top: 0; }
.hamburger span:last-child  { margin-bottom: 0; }

/* ====================================================================
   PANNELLO LATERALE (DRAWER)
   ==================================================================== */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28, 24, 18, 0.46);
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s ease, visibility .26s ease;
    z-index: 55;
}

.drawer {
    position: fixed;
    top: 0; right: 0;
    height: 100%;
    width: 282px;
    max-width: 84vw;
    background: var(--surface);
    box-shadow: -10px 0 40px rgba(28, 24, 18, 0.2);
    transform: translateX(105%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 60;
    display: flex;
    flex-direction: column;
}

body.menu-aperto .drawer-overlay { opacity: 1; visibility: visible; }
body.menu-aperto .drawer { transform: translateX(0); }

.drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.drawer-titolo {
    font-weight: 800;
    color: var(--primary);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.drawer-x {
    background: none;
    border: none;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 0 4px;
}

.drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 2px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.drawer-nav a {
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 14px;
    border-radius: 12px;
    transition: background .15s;
}

.drawer-nav a .ico { width: 21px; height: 21px; color: var(--ink-soft); }
.drawer-nav a:hover { background: var(--surface-2); }

.drawer-nav a.attivo { background: var(--primary-soft); color: var(--primary); }
.drawer-nav a.attivo .ico { color: var(--primary); }

.drawer-nav a.logout { color: var(--accent); margin-top: 6px;
    border-top: 1px solid var(--line-soft); border-radius: 0 0 12px 12px; }
.drawer-nav a.logout .ico { color: var(--accent); }

/* Sotto-voce del drawer (es. Esci sotto Profilo) */
.drawer-nav a.drawer-sub {
    margin: 0 0 2px 18px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    border-top: none;
    border-radius: 12px;
    border-left: 2px solid var(--line);
}

.drawer-nav a.drawer-sub .ico { width: 18px; height: 18px; }
.drawer-nav a.drawer-sub.logout { color: var(--accent); }
.drawer-nav a.drawer-sub.logout .ico { color: var(--accent); }
.drawer-nav a.drawer-sub.logout:hover { background: var(--accent-soft); }

/* ====================================================================
   AREE PRINCIPALI
   ==================================================================== */
.main-app {
    max-width: 900px;
    margin: 0 auto;
    padding: 22px 16px 110px;
    animation: sali .4s ease both;
}

.main-centered {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
}

/* ====================================================================
   LOGIN / SETUP
   ==================================================================== */
.auth-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    max-width: 392px;
    width: 100%;
    padding: 30px 26px;
    box-shadow: var(--shadow);
    animation: sali .45s ease both;
}

.auth-logo { text-align: center; margin-bottom: 14px; }
.auth-logo img { width: 76%; max-width: 224px; height: auto; }

.auth-box h1 { text-align: center; font-size: 1.3rem; margin-bottom: 4px; }
.auth-box > .muted { margin-bottom: 22px; text-align: center; }

/* ====================================================================
   FORM
   ==================================================================== */
.form label {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    margin-bottom: 17px;
    color: var(--ink);
}

.form input,
.form select {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 13px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-ctrl);
    font-size: 16px;            /* evita lo zoom su iOS */
    font-weight: 500;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    transition: border-color .15s, box-shadow .15s;
}

.form input::placeholder { color: #b3aca1; }

.form input:focus,
.form select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

/* Menu a tendina: più grandi, con freccia ben visibile */
.form select {
    padding: 14px 44px 14px 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23548289' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 19px;
}

.form-griglia { display: flex; flex-direction: column; gap: 0; }
.form-griglia > label { flex: 1; }

/* Campo password con pulsante "mostra" */
.campo-pwd { position: relative; display: block; margin-top: 7px; }
.campo-pwd input { margin-top: 0; padding-right: 92px; }

.toggle-pwd {
    position: absolute;
    top: 50%; right: 5px;
    transform: translateY(-50%);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    padding: 7px 10px;
}

.toggle-pwd:hover { background: var(--primary-soft); }

/* ====================================================================
   PULSANTI
   ==================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 22px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--r-ctrl);
    font-size: 0.97rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, transform .04s;
}

.btn:hover  { background: var(--primary-d); }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 19px; height: 19px; margin-right: 8px; }

.btn-small {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border: none;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    transition: background .15s;
}

.btn-small:hover { background: var(--primary-d); }
.btn-small .ico { width: 16px; height: 16px; margin-right: 6px; }

.btn-small.ko { background: var(--surface); color: var(--accent);
    border: 1.5px solid var(--accent-soft); }
.btn-small.ko:hover { background: var(--accent-soft); }

/* Variante neutra (es. "Apri") */
.btn-small.ghost {
    background: var(--surface);
    color: var(--primary);
    border: 1.5px solid var(--line);
    text-decoration: none;
}
.btn-small.ghost:hover { background: var(--primary-soft); border-color: #cfe0e2; }

/* Cella con più comandi affiancati */
.azioni-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.azioni-wrap .inline { display: inline-flex; }

/* ====================================================================
   AVVISI
   ==================================================================== */
.alert {
    padding: 13px 15px;
    border-radius: 12px;
    font-size: 0.9rem;
    margin-bottom: 14px;
    border: 1px solid transparent;
}

.alert.ok { background: var(--primary-soft); color: var(--primary-d);
    border-color: #cfe0e2; }
.alert.ko { background: var(--accent-soft); color: var(--accent-d);
    border-color: #ecd2c9; }

/* ====================================================================
   SCHEDE RIEPILOGO
   ==================================================================== */
.cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 20px 0;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.card-label {
    font-size: 0.72rem;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 6px;
}

.card-value { font-size: 1rem; font-weight: 700; word-break: break-word; }

/* ====================================================================
   RIQUADRI
   ==================================================================== */
.info-box {
    background: var(--primary-soft);
    border: 1px solid #cfe0e2;
    border-radius: var(--r-card);
    padding: 17px 18px;
    font-size: 0.92rem;
    color: var(--primary-d);
}

.box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 20px;
    margin: 16px 0;
    box-shadow: var(--shadow-sm);
}

.box.conflitti {
    border-color: #e6b9aa;
    background: var(--accent-soft);
    box-shadow: none;
}

.box.conflitti ul { margin: 10px 0 0; list-style: none; }
.box.conflitti li {
    padding: 7px 0;
    font-size: 0.9rem;
    border-top: 1px solid #ecd2c9;
    display: flex;
    align-items: center;
}

/* ====================================================================
   TABELLE  (mobile: schede impilate)
   ==================================================================== */
.table-wrap { margin: 16px 0; }

.tabella { width: 100%; border-collapse: collapse; }

.tabella thead { display: none; }

.tabella tbody, .tabella tr, .tabella td { display: block; width: 100%; }

.tabella tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    margin-bottom: 12px;
    padding: 4px 4px;
    box-shadow: var(--shadow-sm);
}

.tabella td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.9rem;
    text-align: right;
}

.tabella td:last-child { border-bottom: none; }

.tabella td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    text-align: left;
    flex-shrink: 0;
}

.tabella td.azione { justify-content: center; padding: 12px 14px; }
.tabella td.azione::before { content: none; }
.tabella td.azione .btn-small { width: 100%; justify-content: center; }

/* Su mobile la cella con più azioni: pulsanti a tutta larghezza */
.tabella td.azioni-riga {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
    gap: 8px;
}
.tabella td.azioni-riga::before {
    content: attr(data-label);
}
.tabella td.azioni-riga .azioni-wrap { gap: 8px; }
.tabella td.azioni-riga .btn-small,
.tabella td.azioni-riga .inline {
    flex: 1;
    justify-content: center;
}
.tabella td.azioni-riga .inline .btn-small { width: 100%; }

.badge {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary-d);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    margin-left: 6px;
}

.inline { display: inline; }

.punto {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
}

.punto.booking { background: var(--occ-booking); }
.punto.diretta { background: var(--occ-diretta); }
.punto.blocco  { background: var(--occ-blocco); }

/* ====================================================================
   DASHBOARD
   ==================================================================== */
.dash-sezione-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin: 22px 0 4px;
}

.dash-sezione-top h2 { margin-bottom: 0; }

.link-piccolo {
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ====================================================================
   CALENDARIO
   ==================================================================== */
.cal-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
}

.cal-top h1 { margin: 0; min-width: 0; text-align: center; font-size: 1.2rem; }

.cal-nav {
    text-decoration: none;
    color: var(--primary);
    font-size: 1.5rem;
    line-height: 1;
    width: 42px; height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    flex-shrink: 0;
    transition: background .15s;
}

.cal-nav:hover { background: var(--primary-soft); }

.cal-oggi-link { text-align: center; margin-bottom: 12px; }
.cal-oggi-link a { font-size: 0.86rem; font-weight: 600; text-decoration: none; }

/* ---- Griglia mensile (desktop): nascosta su mobile ---- */
.cal-grid { display: none; }

/* ---- Elenco giorni (mobile) ---- */
.cal-lista { display: block; margin-top: 12px; }

.cal-riga {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--ink);
    transition: transform .05s, border-color .15s;
}

.cal-riga:active { transform: scale(0.99); }
.cal-riga.oggi {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), var(--shadow-sm);
}
.cal-riga.passato { opacity: 0.62; }

.cal-riga-giorno {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    flex-shrink: 0;
    background: var(--surface-2);
    border-radius: 11px;
}

.cal-riga.oggi .cal-riga-giorno { background: var(--primary); }
.cal-riga.oggi .cal-riga-giorno b,
.cal-riga.oggi .cal-riga-giorno small { color: #fff; }

.cal-riga-giorno b { font-size: 1.15rem; font-weight: 800; line-height: 1; }
.cal-riga-giorno small {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    margin-top: 2px;
}

.cal-riga.festivo .cal-riga-giorno b { color: var(--accent); }
.cal-riga.oggi.festivo .cal-riga-giorno b { color: #fff; }

.cal-riga-stati { display: flex; flex-direction: column; gap: 5px; flex: 1; }

.cal-chip {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--r-chip);
    color: #fff;
}

.cal-chip strong { font-weight: 800; margin-right: 4px; }

.cal-chip.libero {
    background: var(--occ-libero-bg);
    color: var(--occ-libero-tx);
    border: 1px solid var(--occ-libero-bd);
}

.cal-chip.booking { background: var(--occ-booking); }
.cal-chip.diretta { background: var(--occ-diretta); }
.cal-chip.blocco  { background: var(--occ-blocco); }
.cal-chip.conflitto { box-shadow: 0 0 0 2.5px var(--occ-conflitto); }

/* ---- Legenda ---- */
.cal-legenda {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 13px 15px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    font-size: 0.8rem;
    color: var(--ink-soft);
    font-weight: 600;
}

.cal-legenda span { display: flex; align-items: center; margin: 4px 16px 4px 0; }

.leg {
    width: 14px; height: 14px;
    border-radius: 5px;
    display: inline-block;
    margin-right: 7px;
}

.leg.libero { background: var(--occ-libero-bg); border: 1px solid var(--occ-libero-bd); }
.leg.booking { background: var(--occ-booking); }
.leg.diretta { background: var(--occ-diretta); }
.leg.blocco  { background: var(--occ-blocco); }
.leg.conflitto { background: #fff; box-shadow: 0 0 0 2.5px var(--occ-conflitto); }

.cal-aiuto { margin-top: 14px; text-align: center; }

/* ====================================================================
   FOOTER
   ==================================================================== */
.app-footer {
    max-width: 900px;
    margin: 30px auto 0;
    padding: 22px 20px 34px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.footer-nav { display: flex; flex-wrap: wrap; gap: 6px; }

.footer-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 7px 11px;
    border-radius: 9px;
    transition: background .15s, color .15s;
}

.footer-nav a:hover  { color: var(--primary); background: var(--surface); }
.footer-nav a.attivo { color: var(--primary); background: var(--primary-soft); }
.footer-nav a .ico { width: 17px; height: 17px; }

.footer-copy { color: var(--ink-soft); font-size: 0.78rem; }

/* ====================================================================
   DA TABLET IN SU  (>= 601px)
   ==================================================================== */
@media (min-width: 601px) {

    body { font-size: 15.5px; }
    h1 { font-size: 1.7rem; }

    .topbar { padding: 10px 24px; }
    .brand img { height: 44px; }

    .nav-desktop { display: flex; }
    .hamburger { display: none; }

    .main-app { padding: 30px 24px 140px; }

    .form-griglia { flex-direction: row; gap: 16px; }

    /* I pulsanti dei form tornano a larghezza automatica */
    .form .btn { width: auto; min-width: 180px; }
    .auth-box .btn { width: 100%; }

    /* Schede su più colonne */
    .cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

    /* Calendario: mostra la griglia, nascondi l'elenco */
    .cal-grid { display: flex; flex-wrap: wrap; }
    .cal-lista { display: none; }

    .cal-top h1 { font-size: 1.5rem; min-width: 230px; }

    /* Tabella vera e propria */
    .tabella {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-card);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }
    .tabella thead { display: table-header-group; }
    .tabella tbody { display: table-row-group; }
    .tabella tr {
        display: table-row;
        border: none; border-radius: 0;
        margin: 0; padding: 0; box-shadow: none;
    }
    .tabella td {
        display: table-cell;
        text-align: left;
        border-bottom: 1px solid var(--line);
        padding: 13px 15px;
        vertical-align: middle;
    }
    .tabella td::before { content: none; }
    .tabella th {
        text-align: left;
        padding: 11px 15px;
        background: var(--surface-2);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ink-soft);
        font-weight: 700;
        border-bottom: 1px solid var(--line);
    }
    .tabella tr:last-child td { border-bottom: none; }
    .tabella td.azione { text-align: right; }
    .tabella td.azione .btn-small { width: auto; }
    .tabella td.azioni-riga { display: table-cell; }
    .tabella td.azioni-riga::before { content: none; }

    /* Footer in linea */
    .app-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 24px 24px 36px;
    }
}

/* ---- Griglia mensile: stile celle (vale da 601px in su) ---- */
.cal-grid {
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.cal-grid > *:nth-child(7n) { border-right: none; }

.cal-dow {
    width: 14.285%;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    padding: 9px 0;
    background: var(--surface-2);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.cal-cell {
    width: 14.285%;
    box-sizing: border-box;
    background: var(--surface);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    min-height: 82px;
    padding: 5px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: background .12s;
}

.cal-cell:hover { background: var(--primary-soft); }
.cal-cell.vuota { background: var(--surface-2); }
.cal-cell.passato { opacity: 0.55; }
.cal-cell.oggi { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }

.cal-giorno { font-size: 0.82rem; font-weight: 700; padding: 1px 2px; }
.cal-cell.festivo .cal-giorno { color: var(--accent); }
.cal-cell.oggi .cal-giorno { color: var(--primary-d); font-weight: 800; }

.cal-unita {
    font-size: 0.66rem;
    font-weight: 700;
    text-align: center;
    border-radius: 5px;
    padding: 3px 0;
    color: #fff;
}

.cal-unita.libero {
    background: var(--occ-libero-bg);
    color: var(--occ-libero-tx);
    border: 1px solid var(--occ-libero-bd);
}

.cal-unita.booking { background: var(--occ-booking); }
.cal-unita.diretta { background: var(--occ-diretta); }
.cal-unita.blocco  { background: var(--occ-blocco); }
.cal-unita.conflitto { box-shadow: 0 0 0 2px var(--occ-conflitto); }

/* ====================================================================
   ELEMENTI AGGIUNTIVI (login, profilo, note)
   ==================================================================== */

/* Checkbox "ricordami" */
.check {
    display: flex !important;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.check input {
    width: 20px; height: 20px;
    accent-color: var(--primary);
    flex-shrink: 0;
    cursor: pointer;
    margin: 0 10px 0 0;
}

.check span { user-select: none; }

/* Link sotto i riquadri di login / recupero */
.auth-extra {
    text-align: center;
    margin-top: 18px;
    font-size: 0.9rem;
}

.auth-extra a { font-weight: 700; text-decoration: none; }
.auth-extra a:hover { text-decoration: underline; }

/* Pulsante "Esci" nella pagina Profilo */
.btn-uscita {
    width: auto;
    background: var(--surface);
    color: var(--accent);
    border: 1.5px solid #e6c4b9;
    text-decoration: none;
}

.btn-uscita:hover { background: var(--accent-soft); }

/* Riga di pulsanti in fondo a un form (es. Salva + Annulla) */
.form-azioni {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.form-azioni .btn { width: auto; }
.form-azioni .btn-small.ghost { text-decoration: none; }

@media (max-width: 560px) {
    .form-azioni { flex-direction: column-reverse; align-items: stretch; }
    .form-azioni .btn,
    .form-azioni .btn-small { width: 100%; justify-content: center; }
}

/* Nota informativa dentro un form */
.nota-campo {
    display: flex;
    align-items: flex-start;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 0.84rem;
    color: var(--ink-soft);
    margin-bottom: 16px;
    margin-top: 7px;
}

.nota-campo .ico {
    width: 17px; height: 17px;
    color: var(--primary);
    margin-top: 1px;
    margin-right: 9px;
}

/* ====================================================================
   PREZZI — listino base (vista in lettura + modifica)
   ==================================================================== */
.prezzi-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 18px 20px;
    margin: 16px 0;
    box-shadow: var(--shadow-sm);
}

.prezzi-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.prezzi-card-top h2 { margin-bottom: 0; }

/* Gruppo dei pulsanti (Salva + Modifica) accanto al titolo */
.prezzi-card-azioni {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Il pulsante "Salva" della sezione (verde, compare in modifica) */
.btn-small.pr-salva {
    background: var(--primary);
    color: #fff;
}
.btn-small.pr-salva:hover { background: var(--primary-d); }
.btn-small.pr-salva[hidden] { display: none !important; }

/* Il pulsante Modifica diventa "attivo" quando si sta modificando */
.btn-small.ghost.attivo {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: #e6c4b9;
}

/* --- Righe del listino --- */
.prezzi-righe { margin-top: 8px; }

.prezzi-intestazione,
.prezzi-riga {
    display: flex;
    align-items: center;
}

.prezzi-intestazione {
    padding: 8px 4px;
    border-bottom: 1.5px solid var(--line);
}

.prezzi-intestazione span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}

.prezzi-intestazione .hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.prezzi-riga {
    padding: 12px 4px;
    border-bottom: 1px solid var(--line-soft);
}

.prezzi-riga:last-child { border-bottom: none; }

.pr-fascia {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.pr-valore {
    flex: 0 0 132px;
    width: 132px;
    text-align: right;
    padding-left: 10px;
    box-sizing: border-box;
}

/* Prezzo mostrato (sola lettura): grande e leggibile */
.pr-mostra {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-d);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Prezzo mostrato e campo modifica: la visibilità è gestita
   dall'attributo "hidden" via JavaScript. Il fallback CSS qui
   sotto vale quando JS non è disponibile (mostra solo i prezzi). */
.pr-mostra[hidden],
.pr-edit[hidden] { display: none !important; }

/* Campo con simbolo € — abbastanza largo da mostrare i numeri */
.campo-euro { position: relative; }
.campo-euro:not([hidden]) { display: block; }

.campo-euro input {
    width: 100%;
    padding: 11px 12px 11px 28px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-ctrl);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    text-align: right;
    transition: border-color .15s, box-shadow .15s;
}

.campo-euro input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.campo-euro::before {
    content: "\20AC";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-soft);
    font-weight: 700;
    font-size: 0.92rem;
    pointer-events: none;
    z-index: 1;
}

/* Barra "Salva" — compare solo quando si modifica */

/* --- Mobile: colonne più strette ma leggibili --- */
@media (max-width: 560px) {
    .prezzi-card { padding: 16px 14px; }

    .prezzi-card-top {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .prezzi-card-azioni { width: 100%; }
    .prezzi-card-azioni .btn-small {
        flex: 1;
        justify-content: center;
    }

    .pr-valore {
        flex: 0 0 96px;
        width: 96px;
        padding-left: 7px;
    }

    .pr-mostra { font-size: 1.05rem; }
    .pr-fascia { font-size: 0.88rem; }

    .campo-euro input { padding-left: 24px; padding-right: 8px; }
    .campo-euro::before { left: 8px; font-size: 0.82rem; }
}

/* ====================================================================
   STAGIONI — promemoria festività
   ==================================================================== */
.festivi-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.festivo-voce {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: var(--shadow-sm);
    min-width: 150px;
}

.festivo-data {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-d);
}

.festivo-nome {
    font-size: 0.9rem;
    color: var(--ink);
    margin-top: 2px;
}

/* ====================================================================
   ARCHIVIO — riquadro di esportazione
   ==================================================================== */
.export-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.export-testo { flex: 1; min-width: 220px; }
.export-testo strong { font-size: 1rem; }
.export-testo .muted { margin-top: 3px; }

.export-box .btn { width: auto; flex-shrink: 0; }

@media (max-width: 560px) {
    .export-box .btn { width: 100%; }
}

/* ====================================================================
   PREVENTIVO — il preventivatore
   ==================================================================== */
.prev-intestazione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.prev-intestazione h2 { margin-bottom: 2px; }

/* Badge disponibilità */
.stato-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 20px;
    white-space: nowrap;
}

.stato-badge .ico { width: 15px; height: 15px; margin-right: 5px; }
.stato-badge.libero   { background: var(--occ-libero-bg); color: var(--occ-libero-tx); }
.stato-badge.occupato { background: var(--accent-soft); color: var(--accent-d); }

/* Dettaglio notti */
.tabella-notti .badge { background: var(--warm); color: #fff; }

/* Totale soggiorno: ben visibile */
.prev-totale {
    margin-top: 16px;
    padding: 18px 20px;
    background: var(--primary-soft);
    border: 1px solid #cfe0e2;
    border-radius: var(--r-card);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.prev-totale-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-d);
}

.prev-totale-cifra {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--primary-d);
    letter-spacing: -0.02em;
}

.prev-totale-media { font-size: 0.86rem; color: var(--ink-soft); }

/* Area di testo del preventivo */
.prev-testo {
    width: 100%;
    margin-top: 6px;
    padding: 14px 15px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-ctrl);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--surface-2);
    resize: vertical;
}

.prev-testo:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

/* Pulsante "copia" che conferma l'avvenuta copia */
#copia-preventivo.ok { background: var(--occ-diretta); }

/* Esiti testuali nelle alternative */
.testo-ok { color: var(--occ-diretta); font-weight: 700; }
.testo-ko { color: var(--accent); font-weight: 700; }

/* ====================================================================
   DASHBOARD — richiamo rapido al preventivatore
   ==================================================================== */
.azione-rapida {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0 8px;
    padding: 16px 18px;
    background: var(--primary);
    border-radius: var(--r-card);
    text-decoration: none;
    color: #fff;
    box-shadow: var(--shadow);
    transition: background .15s, transform .05s;
}

.azione-rapida:hover  { background: var(--primary-d); }
.azione-rapida:active { transform: scale(0.995); }

.azione-rapida-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.16);
    border-radius: 12px;
}

.azione-rapida-ico .ico { width: 23px; height: 23px; }

.azione-rapida-testo { flex: 1; display: flex; flex-direction: column; }
.azione-rapida-testo strong { font-size: 1.02rem; }
.azione-rapida-testo .muted { color: rgba(255,255,255,0.82); font-size: 0.86rem; }

.azione-rapida > .ico { width: 20px; height: 20px; flex-shrink: 0; }

/* ====================================================================
   PULSANTE FISSO CON MENU RAPIDO (FAB)
   ==================================================================== */
.fab-area {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* Pulsante tondo principale */
.fab {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(45,35,20,.28);
    transition: background .15s, transform .2s;
}

.fab:hover  { background: var(--accent-d); }
.fab .ico   { width: 26px; height: 26px; transition: transform .2s; }

/* Quando il menu è aperto, il "+" ruota in una "x" */
.fab-area.aperto .fab .ico { transform: rotate(45deg); }

/* Menu a comparsa sopra il pulsante */
.fab-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s, transform .18s, visibility .18s;
}

.fab-area.aperto .fab-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fab-voce {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 18px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 23px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(45,35,20,.16);
    transition: background .15s;
}

.fab-voce:hover { background: var(--surface-2); }
.fab-voce .ico  { width: 19px; height: 19px; color: var(--ink-soft); }

/* La voce in evidenza (nuovo preventivo) */
.fab-voce.in-evidenza {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.fab-voce.in-evidenza:hover { background: var(--primary-d); }
.fab-voce.in-evidenza .ico  { color: #fff; }

/* Velo che chiude il menu se si tocca fuori */
.fab-velo {
    position: fixed;
    inset: 0;
    z-index: 44;
    background: transparent;
    display: none;
}
.fab-area.aperto ~ .fab-velo,
.fab-velo.attivo { display: block; }

/* Spazio extra in fondo alla pagina, così il FAB non copre i contenuti */
.app-footer { padding-bottom: 100px; }

/* ====================================================================
   INTESTAZIONE DI PAGINA CON AZIONE
   ==================================================================== */
.intestazione-pagina {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.intestazione-pagina h1 { margin-bottom: 4px; }
.btn-intestazione { width: auto; flex-shrink: 0; }

@media (max-width: 560px) {
    .btn-intestazione { width: 100%; }
}

/* Riquadro "nessun elemento" con invito all'azione */
.vuoto-box {
    text-align: center;
    padding: 36px 20px;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--r-card);
    margin-top: 14px;
}

.vuoto-box .btn { width: auto; margin-top: 12px; }

/* Separatore tra gruppi di voci nel drawer */
.drawer-sep {
    height: 1px;
    background: var(--line-soft);
    margin: 8px 12px;
}

/* ====================================================================
   PREVENTIVO — scelta della tariffa (Opzione B)
   ==================================================================== */
.prev-scelta-titolo {
    font-size: 1rem;
    font-weight: 700;
    margin: 18px 0 10px;
}

.prev-tariffe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Ogni tariffa è un pulsante-scheda selezionabile */
.tariffa-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 15px 16px;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--r-card);
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, background .15s;
}

.tariffa-card:hover { border-color: var(--primary-soft); }

.tariffa-card.scelta {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.tariffa-nome {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.tariffa-card.scelta .tariffa-nome { color: var(--primary-d); }

.tariffa-cifra {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.tariffa-card.scelta .tariffa-cifra { color: var(--primary-d); }

.tariffa-media { font-size: 0.8rem; color: var(--ink-soft); }

.prev-scelta-nota { margin-top: 10px; }

/* Prezzo notte modificato da una stagione: messo in evidenza */
.prezzo-su { color: var(--warm); }

@media (max-width: 560px) {
    .prev-tariffe { grid-template-columns: 1fr; }
}

/* ====================================================================
   PREZZO DELLA PRENOTAZIONE — in lista e archivio
   ==================================================================== */
.prezzo-pren {
    font-weight: 700;
    color: var(--primary-d);
    white-space: nowrap;
}

/* ====================================================================
   PREVENTIVO — fascia disponibilità (esito immediato)
   ==================================================================== */
.esito-fascia {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--r-card);
    margin: 16px 0;
}

.esito-fascia.disponibile {
    background: var(--occ-libero-bg);
    border: 1.5px solid var(--occ-libero-bd);
}

.esito-fascia.occupato {
    background: var(--accent-soft);
    border: 1.5px solid #e6c4b9;
}

.esito-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
}

.esito-fascia.disponibile .esito-ico {
    background: var(--occ-diretta);
    color: #fff;
}
.esito-fascia.occupato .esito-ico {
    background: var(--accent);
    color: #fff;
}
.esito-ico .ico { width: 24px; height: 24px; }

.esito-testo { display: flex; flex-direction: column; gap: 2px; }
.esito-testo strong { font-size: 1.15rem; }
.esito-fascia.disponibile .esito-testo strong { color: var(--occ-diretta); }
.esito-fascia.occupato .esito-testo strong { color: var(--accent-d); }
.esito-testo span { font-size: 0.9rem; color: var(--ink-soft); }

/* Riquadro "Conferma come prenotazione" */
.prev-conferma {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

.prev-conferma .btn { width: auto; }
.prev-conferma .hint { margin-top: 8px; }

@media (max-width: 560px) {
    .prev-conferma .btn { width: 100%; }
}

/* ====================================================================
   MODIFICHE: footer guida, hover profilo, intestazione azioni,
   esito disponibilità dal vivo
   ==================================================================== */

/* Footer: la Guida al posto della scritta */
.footer-guida {
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 6px 10px;
    border-radius: 10px;
    transition: background .15s, color .15s;
}
.footer-guida:hover  { background: var(--surface-2); color: var(--ink); }
.footer-guida.attivo { color: var(--primary-d); }
.footer-guida .ico   { width: 18px; height: 18px; }

/* Menu desktop: voce Profilo con sottomenu "Esci" su hover */
.nav-conmenu { position: relative; }

/* Freccetta accanto alle voci con sottomenu */
.nav-freccetta {
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: .6;
}

.nav-sottomenu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(45,35,20,.16);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 50;
}

.nav-conmenu:hover .nav-sottomenu,
.nav-conmenu:focus-within .nav-sottomenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Voci dentro un sottomenu di navigazione */
.nav-sottomenu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.92rem;
}
.nav-sottomenu a:hover  { background: var(--surface-2); }
.nav-sottomenu a.attivo { color: var(--primary-d); background: var(--primary-soft); }
.nav-sottomenu a .ico   { width: 18px; height: 18px; }

/* Sottomenu "Altro": un po' più largo, contiene più voci */
.nav-sottomenu-largo { min-width: 210px; }

.nav-esci {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.92rem;
}
.nav-esci:hover { background: var(--accent-soft); }
.nav-esci .ico  { width: 18px; height: 18px; }

/* Intestazione pagina con più pulsanti affiancati */
.intestazione-azioni {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Pulsante secondario: bordo pieno, sfondo chiaro */
.btn.ghost-pieno {
    background: var(--surface);
    color: var(--primary-d);
    border: 1.5px solid var(--primary);
}
.btn.ghost-pieno:hover { background: var(--primary-soft); }

@media (max-width: 560px) {
    .intestazione-azioni { width: 100%; }
    .intestazione-azioni .btn { flex: 1; justify-content: center; }
}

/* Esito disponibilità "dal vivo" nel form preventivo */
.esito-live {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border-radius: var(--r-ctrl);
    margin: 4px 0 4px;
}
.esito-live[hidden] { display: none; }
.esito-live strong { font-size: 1rem; }
.esito-live span   { font-size: 0.86rem; }

.esito-live.in-corso {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink-soft);
}
.esito-live.disponibile {
    background: var(--occ-libero-bg);
    border: 1.5px solid var(--occ-libero-bd);
    color: var(--occ-diretta);
}
.esito-live.occupato {
    background: var(--accent-soft);
    border: 1.5px solid #e6c4b9;
    color: var(--accent-d);
}
.esito-live.attenzione {
    background: #fbf2dd;
    border: 1.5px solid #ecd9a8;
    color: #8a6d1e;
}
.esito-live span { color: inherit; opacity: .85; }

/* ====================================================================
   SINCRONIZZAZIONE — pagina di configurazione Booking
   ==================================================================== */

/* Riquadro stato sincronizzazione */
.sync-stato {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
}

.sync-stato-riga {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sync-etichetta {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}
.sync-valore { font-size: 0.9rem; font-weight: 600; color: var(--ink); }

.sync-esito {
    margin: 8px 0 12px;
    font-size: 0.88rem;
    color: var(--ink-soft);
}

/* Campo con pulsante "copia" accanto (link del feed) */
.campo-copia {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.campo-copia input {
    flex: 1;
    min-width: 0;
    padding: 11px 13px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-ctrl);
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--ink-soft);
    background: var(--surface-2);
}

.campo-copia .btn-small { flex-shrink: 0; }
.campo-copia .btn-small.ok { background: var(--occ-diretta); color: #fff; }

/* Riquadro informativo */
.info-box { background: var(--primary-soft); border-color: #cfe0e2; }

.lista-info {
    margin: 8px 0 0;
    padding-left: 20px;
}
.lista-info li {
    margin-bottom: 7px;
    font-size: 0.9rem;
    color: var(--ink);
    line-height: 1.5;
}
.lista-info li:last-child { margin-bottom: 0; }

/* Badge "sola lettura" per le prenotazioni da Booking */
.badge-lettura {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--occ-booking-bg, #e7eef6);
    color: var(--occ-booking-tx, #2f5b8f);
    border-radius: 16px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-lettura .ico { width: 15px; height: 15px; }

/* ====================================================================
   GUIDA — sezioni espandibili
   ==================================================================== */
.guida { margin-top: 14px; }

.guida-sezione {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.guida-sezione summary {
    padding: 16px 18px;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.guida-sezione summary::-webkit-details-marker { display: none; }

/* Freccia che ruota all'apertura */
.guida-sezione summary::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: rotate(45deg);
    transition: transform .18s;
    flex-shrink: 0;
    margin-left: 12px;
}
.guida-sezione[open] summary::after { transform: rotate(-135deg); }

.guida-sezione summary:hover { background: var(--surface-2); }

.guida-contenuto {
    padding: 0 18px 16px;
    border-top: 1px solid var(--line-soft);
}
.guida-contenuto p { margin: 12px 0; line-height: 1.6; }
.guida-contenuto ul { margin: 12px 0; padding-left: 22px; }
.guida-contenuto li { margin-bottom: 6px; line-height: 1.55; }

/* ====================================================================
   AIUTO CONTESTUALE — icona "i" con riquadro
   ==================================================================== */
.aiuto {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

/* Icona "i" tonda */
.aiuto-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    border-radius: 50%;
}
.aiuto-icona .ico { width: 18px; height: 18px; }
.aiuto-icona:hover { color: var(--primary-d); }
.aiuto.aperto .aiuto-icona { color: var(--primary-d); }

/* Riquadro esplicativo (stile "Wikipedia") */
.aiuto-box {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    width: 270px;
    max-width: 78vw;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(45,35,20,.2);
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    cursor: default;
}

/* L'attributo hidden deve avere la precedenza sul display: flex,
   altrimenti il riquadro resterebbe sempre visibile. */
.aiuto-box[hidden] { display: none; }

/* Codina del riquadro */
.aiuto-box::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom-color: var(--surface);
}

.aiuto-titolo {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
}
.aiuto-testo {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.aiuto-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    margin-top: 2px;
}
.aiuto-link:hover { text-decoration: underline; }

/* Su schermi stretti il riquadro non sborda fuori */
@media (max-width: 480px) {
    .aiuto-box { width: 240px; }
}

/* ====================================================================
   GUIDA — barra di ricerca
   ==================================================================== */
.guida-cerca {
    position: relative;
    display: flex;
    align-items: center;
    margin: 14px 0 6px;
}

.guida-cerca .ico {
    position: absolute;
    left: 14px;
    width: 19px; height: 19px;
    color: var(--ink-soft);
    pointer-events: none;
}

.guida-cerca input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-ctrl);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--surface);
}

.guida-cerca input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.guida-cerca-esito {
    font-size: 0.86rem;
    color: var(--ink-soft);
    margin: 4px 0 10px;
}

/* ====================================================================
   TARIFFE — griglia prezzi per fascia di ospiti
   ==================================================================== */
.tariffa-unita {
    margin: 16px 0;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
}
.tariffa-unita h3 {
    font-size: 0.98rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.tabella-tariffe { width: 100%; }
.tabella-tariffe th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    text-align: left;
    padding: 4px 6px;
}
.tabella-tariffe td { padding: 4px 6px; vertical-align: middle; }
.tabella-tariffe .campo-euro { margin: 0; }
.tabella-tariffe .campo-euro input { width: 110px; }

@media (max-width: 560px) {
    .tabella-tariffe .campo-euro input { width: 100%; }
}

/* Intestazione di gruppo nel menu mobile */
.drawer-gruppo {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    padding: 14px 12px 4px;
    margin-top: 4px;
    border-top: 1px solid var(--line-soft);
}
.drawer-gruppo:first-of-type { border-top: none; }

/* ====================================================================
   PULSANTI SINCRONIZZAZIONE — dashboard e FAB
   ==================================================================== */

/* Contenitore delle due azioni rapide in dashboard */
.azioni-dash {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}

/* Il form non deve aggiungere spazi: si comporta da blocco neutro */
.azione-sync-form { margin: 0; display: block; }
.azione-sync-form .azione-rapida { width: 100%; }

/* Pulsante "Sincronizza" in dashboard: colore diverso (terracotta)
   per distinguerlo da quello del preventivo */
button.azione-rapida {
    font-family: inherit;
    border: none;
    cursor: pointer;
    text-align: left;
}

.azione-sync {
    background: #fdf0e0;
    border: 1.5px solid #f0d3ab;
}
.azione-sync .azione-rapida-ico {
    background: var(--warm);
    color: #fff;
}
.azione-sync strong { color: #b9722a; }
.azione-sync .azione-rapida-testo span { color: #b9722a; opacity: .85; }
.azione-sync:hover { background: #fbe6cd; }

/* Voce "Sincronizza" nel menu del FAB */
.fab-voce-form { margin: 0; }
.fab-voce-form .fab-voce {
    width: 100%;
    font-family: inherit;
    border: none;
    cursor: pointer;
}
.fab-sync {
    background: var(--warm);
    color: #fff;
}
.fab-sync .ico { color: #fff; }
.fab-sync:hover { background: #d97e2e; }

/* ====================================================================
   PREVENTIVO — terza card "Prezzo personalizzato" e suo campo
   ==================================================================== */
.tariffa-pers .tariffa-cifra { color: var(--ink-soft); }
.tariffa-pers.scelta .tariffa-cifra { color: var(--ink); }

.prev-prezzo-pers {
    margin: 12px 0 18px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.prev-prezzo-pers[hidden] { display: none; }
.prev-prezzo-pers label { font-weight: 600; }
.prev-prezzo-pers .hint { margin: 0; }

/* ====================================================================
   NUOVA PRENOTAZIONE — pulsantini suggerimento prezzo
   ==================================================================== */
.np-prezzo-aiuti {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 6px 0 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-ctrl);
}
.np-prezzo-aiuti[hidden] { display: none; }
.np-prezzo-aiuti-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
}
.np-prezzo-aiuti .btn-small strong {
    font-weight: 700;
    margin-left: 4px;
}
/* Suggerimento più visibile (stile evidenziato) */
.np-sugg { border-color: var(--primary); color: var(--primary-d); }

/* ===== Specchietto Booking (preventivo, solo intero) =====
   Confronto interno col prezzo Booking. Discreto, accento blu Booking. */
.bk-specchietto {
    margin: 18px 0 4px;
    padding: 13px 16px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid #003580;
    border-radius: var(--r-ctrl);
}
.bk-testa {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 6px;
}
.bk-marchio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bk-logo {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 5px;
    display: block;
}
.bk-marchio-txt {
    font-weight: 700;
    font-size: 0.95rem;
    color: #003580;
    letter-spacing: -0.01em;
}
.bk-righe { display: flex; flex-direction: column; }
.bk-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 8px 0;
    border-top: 1px solid var(--line-soft);
    font-size: 0.92rem;
}
.bk-riga:first-child { border-top: none; }
.bk-voce { min-width: 74px; font-weight: 600; }
.bk-cella { color: var(--ink); }
.bk-cap {
    color: var(--ink-soft);
    font-size: 0.78rem;
    margin-right: 1px;
}
.bk-diff { margin-left: auto; font-weight: 700; }
.bk-diff.su  { color: var(--occ-diretta); }
.bk-diff.giu { color: var(--accent-d); }
.bk-nota { margin: 8px 0 0; }