/* ============================================================================
   BakiPro — schermate del nuovo layout (FLUSSO_E_DATI.md)
   Richiede baki-tokens.css e baki.css. Valori solo dai token.
   Principio: la colonna vertebrale è l'unico elemento che brilla, il resto resta quieto.
   ============================================================================ */

/* ---- Testata delle pagine interne ---------------------------------------- */
.baki-apphead {
    position: relative;
    display: grid;
    grid-template-columns: var(--baki-touch-target) 1fr minmax(var(--baki-touch-target), auto);
    align-items: center;
    gap: var(--baki-space-2);
    padding: calc(var(--safe-top, 0px) + var(--baki-space-3)) var(--baki-space-3) var(--baki-space-3);
    background: var(--baki-surface);
    isolation: isolate;
}

.baki-apphead--wave {
    background:
        radial-gradient(120px 60px at 42% -10px, var(--baki-peach-200) 60%, transparent 62%),
        radial-gradient(220px 80px at 100% -10px, var(--baki-sky-200) 60%, transparent 62%),
        var(--baki-surface);
}

.baki-apphead__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--baki-touch-target);
    height: var(--baki-touch-target);
    border: 0;
    border-radius: var(--baki-radius-sm);
    background: var(--baki-sky-050);
    color: var(--baki-title);
    cursor: pointer;
}

.baki-apphead__center { min-width: 0; text-align: center; }
.baki-apphead__title { margin: 0; font-size: var(--baki-text-lg); font-weight: 700; color: var(--baki-title); }
.baki-apphead__subtitle { margin: 0; font-size: var(--baki-text-sm); color: var(--baki-gray-700); }
.baki-apphead__actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--baki-space-2); }

/* ---- Schermate di esito --------------------------------------------------- */
.baki-result {
    --result-color: var(--baki-accent);
    --result-soft: var(--baki-accent-soft);
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--baki-bottomnav-height));
    padding: var(--baki-space-6) var(--baki-space-5) var(--baki-space-5);
    background: var(--baki-surface);
    text-align: center;
}

.baki-result--primary { --result-color: var(--baki-primary); --result-soft: var(--baki-primary-soft); }
.baki-result--success { --result-color: var(--baki-success); --result-soft: var(--baki-success-bg); }
.baki-result--danger { --result-color: var(--baki-danger); --result-soft: var(--baki-danger-bg); }

.baki-result__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.baki-result__mark {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--baki-space-5);
}

.baki-result__disc {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--result-soft);
    color: var(--result-color);
    animation: baki-pop 420ms cubic-bezier(.2, 1.3, .4, 1) both;
}

.baki-result__ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 24px;
    margin: -12px 0 0 -3.5px;
    border-radius: var(--baki-radius-pill);
    background: var(--baki-highlight);
    transform: rotate(var(--ray)) translateY(-92px);
    animation: baki-ray 480ms ease-out both;
}

.baki-result__ray:nth-child(even) { background: var(--baki-primary); }

.baki-result__spinner {
    position: absolute;
    inset: -14px;
    border: 7px solid var(--baki-primary-soft);
    border-top-color: var(--baki-primary);
    border-radius: 50%;
    animation: baki-spin-slow 1s linear infinite;
}

.baki-result__title { margin: 0 0 var(--baki-space-2); font-size: var(--baki-text-2xl); font-weight: 700; color: var(--baki-title); }
.baki-result__text { max-width: 30ch; color: var(--baki-gray-700); }
.baki-result__actions { display: grid; gap: var(--baki-space-3); padding-top: var(--baki-space-4); }

@keyframes baki-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes baki-ray { from { opacity: 0; transform: rotate(var(--ray)) translateY(-64px); } to { opacity: 1; transform: rotate(var(--ray)) translateY(-92px); } }
@keyframes baki-spin-slow { to { transform: rotate(360deg); } }

/* ---- Dialogo con icona ---------------------------------------------------- */
.baki-actiondialog__backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--baki-space-4);
    background: rgba(28, 42, 74, .55);
}

.baki-actiondialog {
    position: relative;
    width: min(100%, 420px);
    max-height: calc(100dvh - var(--baki-space-6));
    overflow-y: auto;
    padding: var(--baki-space-5);
    border-radius: var(--baki-radius-lg);
    background: var(--baki-surface);
    box-shadow: var(--baki-shadow-raised);
    text-align: center;
}

.baki-actiondialog__close {
    position: absolute;
    top: var(--baki-space-2);
    right: var(--baki-space-2);
    width: var(--baki-touch-target);
    height: var(--baki-touch-target);
    border: 0;
    background: transparent;
    color: var(--baki-title);
    cursor: pointer;
}

.baki-actiondialog__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: var(--baki-space-3);
    border-radius: 50%;
}

.baki-actiondialog__icon--primary { background: var(--baki-primary-soft); color: var(--baki-primary-strong); }
.baki-actiondialog__icon--success { background: var(--baki-success-bg); color: var(--baki-success); }
.baki-actiondialog__icon--danger { background: var(--baki-danger-bg); color: var(--baki-danger); }
.baki-actiondialog__title { margin-bottom: var(--baki-space-1); }
.baki-actiondialog__text { color: var(--baki-gray-700); }
.baki-actiondialog__footer { display: flex; gap: var(--baki-space-3); margin-top: var(--baki-space-4); }
.baki-actiondialog__footer > * { flex: 1; }

/* ---- Calendario del mese --------------------------------------------------- */
.baki-monthcal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--baki-space-2); }
.baki-monthcal__label { font-size: var(--baki-text-lg); color: var(--baki-title); }

.baki-monthcal__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--baki-touch-target);
    height: var(--baki-touch-target);
    border: 0;
    background: transparent;
    color: var(--baki-title);
    cursor: pointer;
}

.baki-monthcal__nav:disabled { color: var(--baki-gray-300); cursor: not-allowed; }

.baki-monthcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: var(--baki-space-1); }
.baki-monthcal__dow { padding: var(--baki-space-1) 0; font-size: var(--baki-text-xs); text-align: center; color: var(--baki-gray-700); }

.baki-monthcal__day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--baki-title);
    font: inherit;
    font-size: var(--baki-text-sm);
    font-weight: 600;
    cursor: pointer;
    aspect-ratio: 1;
    transition: background var(--baki-transition);
}

.baki-monthcal__day:disabled { color: var(--baki-gray-300); font-weight: 400; cursor: default; }
.baki-monthcal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--baki-accent-soft); }
.baki-monthcal__day.is-selected { background: var(--baki-accent); color: var(--baki-accent-contrast); }
.baki-monthcal__day.is-selected .baki-dot { outline: 1.5px solid var(--baki-surface); }
.baki-monthcal__dots { position: absolute; bottom: 5px; display: flex; gap: 2px; }

.baki-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--baki-gray-500); }
.baki-dot--primary { background: var(--baki-primary); }
.baki-dot--highlight { background: var(--baki-highlight); }
.baki-dot--muted { background: var(--baki-gray-500); }

/* ---- Griglia orari --------------------------------------------------------- */
.baki-slotgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--baki-space-2); }

.baki-slotgrid__slot {
    min-height: var(--baki-touch-target);
    border: 1px solid var(--baki-gray-200);
    border-radius: var(--baki-radius-sm);
    background: var(--baki-surface);
    color: var(--baki-title);
    font: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.baki-slotgrid__slot.is-selected { border-color: var(--baki-accent); background: var(--baki-accent); color: var(--baki-accent-contrast); }
.baki-slotgrid__empty { color: var(--baki-gray-700); font-size: var(--baki-text-sm); }

/* ---- Pulsante fisso dei wizard ---------------------------------------------- */
.baki-wizardfoot {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: grid;
    gap: var(--baki-space-2);
    padding: var(--baki-space-3) var(--baki-space-4) calc(var(--baki-space-3) + var(--safe-bottom, 0px));
    background: linear-gradient(to top, var(--baki-surface) 75%, transparent);
}

.baki-wizardfoot--nav { bottom: calc(var(--baki-bottomnav-height) + var(--safe-bottom, 0px)); }
.baki-wizardfoot__note { margin: 0; font-size: var(--baki-text-xs); text-align: center; color: var(--baki-gray-700); }

/* ---- Pannello laterale ☰ --------------------------------------------------- */
.baki-drawer__backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(28, 42, 74, .5); }

.baki-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 81;
    display: flex;
    flex-direction: column;
    width: min(86vw, 340px);
    padding: calc(var(--safe-top, 0px) + var(--baki-space-4)) var(--baki-space-4) calc(var(--safe-bottom, 0px) + var(--baki-space-4));
    overflow-y: auto;
    border-radius: 0 var(--baki-radius-lg) var(--baki-radius-lg) 0;
    background: var(--baki-drawer-bg);
    color: #FFFFFF;
    animation: baki-drawer-in 200ms ease-out both;
}

[data-baki-role="customer"] .baki-drawer { --baki-drawer-bg: var(--baki-drawer-customer); }
[data-baki-role="professional"] .baki-drawer { --baki-drawer-bg: var(--baki-drawer-professional); }

.baki-drawer__head {
    display: flex;
    align-items: center;
    gap: var(--baki-space-3);
    width: 100%;
    padding: 0 0 var(--baki-space-4);
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.baki-drawer__hello { font-size: var(--baki-text-lg); font-weight: 700; }
.baki-drawer__sub { display: block; font-size: var(--baki-text-sm); font-weight: 400; opacity: .92; }

.baki-drawer__close {
    position: absolute;
    top: calc(var(--safe-top, 0px) + var(--baki-space-2));
    right: var(--baki-space-2);
    width: var(--baki-touch-target);
    height: var(--baki-touch-target);
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.baki-drawer__list { flex: 1; display: flex; flex-direction: column; padding: var(--baki-space-3) 0; }

.baki-drawer__item {
    display: flex;
    align-items: center;
    gap: var(--baki-space-3);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--baki-space-1);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.baki-drawer__item > span:first-of-type { flex: 1; }
.baki-drawer__divider { height: 1px; margin: var(--baki-space-2) 0; background: rgba(255, 255, 255, .45); }
.baki-drawer__count { min-width: 24px; padding: 2px 7px; border-radius: var(--baki-radius-pill); background: var(--baki-orange-500); font-size: var(--baki-text-sm); font-weight: 700; text-align: center; }

@keyframes baki-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* ---- Superfici ricorrenti ---------------------------------------------------- */
.baki-page { padding: var(--baki-space-4); padding-bottom: calc(var(--baki-bottomnav-height) + var(--safe-bottom, 0px) + var(--baki-space-5)); }
.baki-page--wizard { padding-bottom: var(--baki-space-3); }

.baki-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--baki-gray-200); margin-bottom: var(--baki-space-4); }

.baki-tabs__tab {
    min-height: var(--baki-touch-target);
    margin-bottom: -2px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--baki-gray-700);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.baki-tabs__tab.is-active { border-bottom-color: var(--baki-accent); color: var(--baki-accent-strong); }

.baki-choice {
    display: flex;
    align-items: center;
    gap: var(--baki-space-3);
    width: 100%;
    min-height: 72px;
    padding: var(--baki-space-3) var(--baki-space-4);
    border: 1.5px solid var(--baki-gray-200);
    border-radius: var(--baki-radius-md);
    background: var(--baki-surface);
    color: var(--baki-title);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.baki-choice.is-selected { border-color: var(--baki-accent); }

.baki-choice__radio {
    flex: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--baki-gray-300);
    border-radius: 50%;
}

.baki-choice.is-selected .baki-choice__radio { border: 6px solid var(--baki-accent); }
.baki-summary-row { display: flex; gap: var(--baki-space-3); padding: var(--baki-space-2) 0; }
.baki-summary-row__label { font-size: var(--baki-text-sm); color: var(--baki-gray-700); }
.baki-summary-row__value { font-weight: 600; color: var(--baki-title); }
.baki-money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Il router sposta il fuoco sul titolo a ogni pagina (utile ai lettori di schermo):
   un titolo non è interattivo, quindi niente anello visibile. */
h1:focus { outline: none; }

/* Nell'area del cliente le azioni delle pagine comuni seguono il suo arancione.
   Benvenuto, Accedi e Registrati restano azzurri come nei mockup: lì non c'è ancora una sessione. */
[data-baki-role="customer"][data-baki-session] .baki-page .baki-btn--primary { background: var(--baki-highlight); color: #FFFFFF; }
[data-baki-role="customer"][data-baki-session] .baki-page .baki-btn--primary:hover:not(:disabled) { background: var(--baki-highlight-strong); }

@media (prefers-reduced-motion: reduce) {
    .baki-result__disc, .baki-result__ray, .baki-result__spinner, .baki-drawer { animation: none; }
    .baki-monthcal__day { transition: none; }
}

/* ---- Registrazione (wizard condiviso da app e portale) ------------------------ */
.baki-regwizard { display: flex; flex-direction: column; min-height: 100dvh; }
.baki-regwizard > .baki-page { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; }
.baki-regwizard .baki-wizardfoot { width: 100%; max-width: 640px; margin: 0 auto; }
.baki-regwizard__stepper { width: 100%; max-width: 640px; margin: 0 auto; padding-top: var(--baki-space-2); }
.baki-regwizard .baki-result { min-height: 0; flex: 1; }
.baki-regwizard__heading { margin: var(--baki-space-3) 0 var(--baki-space-2); font-size: var(--baki-text-md); font-weight: 700; color: var(--baki-title); }
.baki-regwizard__heading span { font-weight: 400; color: var(--baki-gray-700); }
.baki-regwizard__lead { margin: 0 0 var(--baki-space-4); color: var(--baki-gray-700); text-align: center; }
.baki-regwizard__note { margin: var(--baki-space-2) 0; font-size: var(--baki-text-xs); color: var(--baki-gray-700); }
.baki-regwizard__ok { display: flex; align-items: center; gap: var(--baki-space-2); margin: 0; font-size: var(--baki-text-sm); color: var(--baki-success); }
.baki-regwizard__professions { display: grid; margin-bottom: var(--baki-space-3); }
.baki-regwizard__methods { display: grid; gap: var(--baki-space-2); }
.baki-regwizard__methods .baki-choice { min-height: var(--baki-touch-target); padding: var(--baki-space-2) var(--baki-space-3); }

.baki-regwizard__group {
    margin-bottom: var(--baki-space-4);
    padding: var(--baki-space-3) var(--baki-space-4);
    border: 1px solid var(--baki-gray-200);
    border-radius: var(--baki-radius-md);
    background: var(--baki-surface);
}

.baki-regwizard__group h3 { display: flex; align-items: center; gap: var(--baki-space-2); margin: 0 0 var(--baki-space-2); font-size: var(--baki-text-md); color: var(--baki-title); }
.baki-regwizard__group .baki-summary-row { justify-content: space-between; align-items: center; font-size: var(--baki-text-sm); color: var(--baki-gray-700); }
.baki-regwizard__group .baki-summary-row strong { color: var(--baki-title); }
.baki-regwizard__planname { display: block; font-size: var(--baki-text-xl); color: var(--baki-highlight); }
.baki-regwizard__promo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--baki-space-2); align-items: start; }
.baki-regwizard__promo .baki-field { margin-bottom: var(--baki-space-2); }
.baki-regwizard__recap { width: 100%; max-width: 420px; margin-top: var(--baki-space-3); text-align: left; }
.baki-regwizard__recap .baki-summary-row { justify-content: space-between; border-bottom: 1px solid var(--baki-gray-200); font-size: var(--baki-text-sm); }

.baki-password { position: relative; }
.baki-password .baki-input { padding-right: calc(var(--baki-touch-target) + var(--baki-space-1)); }

.baki-password__eye {
    position: absolute;
    top: 50%;
    right: var(--baki-space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--baki-touch-target);
    height: var(--baki-touch-target);
    border: 0;
    background: transparent;
    color: var(--baki-navy-700);
    cursor: pointer;
    transform: translateY(-50%);
}

.baki-upload {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--baki-space-3);
    min-height: 56px;
    margin-bottom: var(--baki-space-2);
    padding: var(--baki-space-2) var(--baki-space-3);
    border: 1px dashed var(--baki-gray-300);
    border-radius: var(--baki-radius-sm);
    background: var(--baki-surface);
    color: var(--baki-title);
    cursor: pointer;
}

.baki-upload:focus-within { outline: 2px solid var(--baki-accent); outline-offset: 2px; }
.baki-upload--done { border-style: solid; cursor: default; }
.baki-upload__text { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--baki-text-sm); font-weight: 600; }
.baki-upload__text small { display: block; font-size: var(--baki-text-xs); font-weight: 400; color: var(--baki-gray-700); }
.baki-upload__text small.is-ok { color: var(--baki-success); font-weight: 600; }

.baki-upload__add {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--baki-primary);
    color: var(--baki-primary-contrast);
}

.baki-upload__remove {
    flex: none;
    width: var(--baki-touch-target);
    height: var(--baki-touch-target);
    border: 0;
    background: transparent;
    color: var(--baki-gray-700);
    cursor: pointer;
}

.baki-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--baki-space-4); }

.baki-plan {
    --plan-color: var(--baki-primary-strong);
    --plan-soft: var(--baki-primary-soft);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--baki-space-4);
    border: 1.5px solid var(--plan-color);
    border-radius: var(--baki-radius-md);
    background: var(--baki-surface);
}

.baki-plan--highlight { --plan-color: var(--baki-highlight-strong); --plan-soft: var(--baki-highlight-soft); }

.baki-plan__ribbon {
    position: absolute;
    top: -12px;
    right: var(--baki-space-3);
    padding: 2px var(--baki-space-3);
    border-radius: var(--baki-radius-sm);
    background: var(--baki-highlight-strong);
    color: #FFFFFF;
    font-size: var(--baki-text-xs);
    font-weight: 700;
}

.baki-plan__name { margin: 0; font-size: var(--baki-text-xl); font-weight: 700; color: var(--plan-color); }
.baki-plan__list { color: var(--baki-gray-700); font-size: var(--baki-text-sm); }
.baki-plan__price { font-size: var(--baki-text-3xl); font-weight: 700; line-height: 1.1; color: var(--baki-title); }
.baki-plan__price span { font-size: var(--baki-text-md); }
.baki-plan__period { font-size: var(--baki-text-sm); color: var(--baki-gray-700); }

.baki-plan__offer {
    display: grid;
    gap: 2px;
    margin: var(--baki-space-3) 0;
    padding: var(--baki-space-2) var(--baki-space-3);
    border-radius: var(--baki-radius-sm);
    background: var(--plan-soft);
    font-size: var(--baki-text-xs);
    color: var(--baki-navy-700);
    text-align: center;
}

.baki-plan__offer strong { font-size: var(--baki-text-sm); color: var(--plan-color); }
.baki-plan__features { flex: 1; display: grid; align-content: start; gap: var(--baki-space-2); margin: 0 0 var(--baki-space-4); padding: 0; list-style: none; font-size: var(--baki-text-sm); color: var(--baki-title); }
.baki-plan__features li { display: flex; align-items: center; gap: var(--baki-space-2); }
.baki-plan__features .baki-icon { flex: none; color: var(--plan-color); }

/* ---- Appuntamenti (professionista: app e portale) ---------------------------- */
.baki-apphead__center .baki-logo img { max-width: 100%; height: auto; }
.baki-apphead__actions { min-width: 0; }
a.baki-apphead__back { text-decoration: none; }
.baki-actiondialog__backdrop:focus { outline: none; }
.baki-actiondialog--left { text-align: left; }
.baki-actiondialog--left .baki-actiondialog__title { padding-right: var(--baki-touch-target); }
.baki-actiondialog__title:focus { outline: none; }

.baki-apptcard { display: grid; gap: var(--baki-space-3); padding: var(--baki-space-3); border-radius: var(--baki-radius-md); background: var(--baki-surface); box-shadow: var(--baki-shadow-soft); }
.baki-apptcard__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--baki-space-3); }
.baki-apptcard__name { flex: 1 1 130px; min-width: 0; }
.baki-apptcard__facts { display: grid; border: 1px solid var(--baki-gray-100); border-radius: var(--baki-radius-md); }
.baki-apptcard__fact { display: flex; align-items: center; gap: var(--baki-space-3); min-height: 60px; padding: var(--baki-space-2) var(--baki-space-3); border-bottom: 1px solid var(--baki-gray-100); }
.baki-apptcard__fact:last-child { border-bottom: 0; }
.baki-apptcard__fact--link { width: 100%; border-top: 0; border-right: 0; border-left: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.baki-apptcard__place { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.baki-manage__required { color: var(--baki-danger); }
.baki-manage__counter { text-align: right; }
.baki-manage__reason { margin-top: var(--baki-space-3); text-align: left; }
.baki-manage__done { display: flex; align-items: center; gap: var(--baki-space-3); padding: var(--baki-space-4); border-radius: var(--baki-radius-md); background: var(--baki-primary-soft); }
.baki-manage__done--closed { background: var(--baki-gray-100); }
.baki-manage__done-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--baki-primary); color: var(--baki-primary-contrast); }
.baki-manage__done--closed .baki-manage__done-mark { background: var(--baki-gray-700); }

.baki-appttile { display: flex; align-items: center; gap: var(--baki-space-3); width: 100%; min-height: 72px; padding: var(--baki-space-3); border: 0; border-left: 4px solid var(--baki-primary); border-radius: var(--baki-radius-md); background: var(--baki-surface); box-shadow: var(--baki-shadow-soft); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.baki-appttile--pending { border-left-color: var(--baki-highlight); }
.baki-appttile--done { border-left-color: var(--baki-gray-500); }
.baki-appttile__time { flex: none; display: flex; flex-direction: column; font-weight: 800; color: var(--baki-title); font-variant-numeric: tabular-nums; }
.baki-appttile__end { font-size: var(--baki-text-xs); font-weight: 500; color: var(--baki-gray-700); }
.baki-appttile__text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.baki-appttile__name { font-weight: 700; color: var(--baki-title); }
.baki-appttile .baki-chip { margin-top: var(--baki-space-1); }

.baki-emptypanel { display: flex; align-items: center; gap: var(--baki-space-3); padding: var(--baki-space-3); border-radius: var(--baki-radius-md); background: var(--baki-surface); }
.baki-emptypanel--sky { background: transparent; padding-inline: 0; }
.baki-emptypanel--peach .baki-emptypanel__icon, .baki-next .baki-emptypanel__icon { background: var(--baki-highlight-soft); color: var(--baki-highlight); }
.baki-emptypanel__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--baki-surface); color: var(--baki-primary); }
.baki-emptypanel--plain .baki-emptypanel__icon { background: var(--baki-sky-050); }
.baki-emptypanel__text { flex: 1; min-width: 0; }
.baki-emptypanel__title { font-weight: 700; color: var(--baki-title); }
.baki-emptypanel__body { margin: 0; font-size: var(--baki-text-xs); color: var(--baki-gray-700); }
.baki-emptypanel__art { flex: none; width: 104px; height: auto; }
.baki-emptypanel__blob { fill: var(--baki-sky-100); }
.baki-next .baki-emptypanel__blob { fill: var(--baki-peach-100); }
.baki-emptypanel__sheet { fill: var(--baki-surface); stroke: var(--baki-sky-200); stroke-width: 1.5; }
.baki-emptypanel__band { fill: var(--baki-primary); }
.baki-emptypanel__cell { fill: var(--baki-sky-200); }
.baki-emptypanel__line { fill: none; stroke: var(--baki-sky-400); stroke-width: 3; stroke-linecap: round; }
.baki-emptypanel__lens { fill: var(--baki-surface); stroke: var(--baki-highlight); stroke-width: 3.5; }
.baki-emptypanel__handle { fill: none; stroke: var(--baki-navy-700); stroke-width: 5; stroke-linecap: round; }
.baki-emptypanel__hands { fill: none; stroke: var(--baki-highlight); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 419px) { .baki-emptypanel__art { display: none; } }

.baki-codeentry-page { display: grid; gap: var(--baki-space-3); }
.baki-codeentry { display: grid; justify-items: center; gap: var(--baki-space-2); padding: var(--baki-space-4); border-radius: var(--baki-radius-md); background: var(--baki-sky-050); text-align: center; }
.baki-codeentry__icon { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: var(--baki-sky-100); color: var(--baki-primary-strong); }
.baki-codeentry__title { margin: 0; font-size: var(--baki-text-lg); font-weight: 700; color: var(--baki-title); }
.baki-codeentry__text { margin: 0; font-size: var(--baki-text-sm); color: var(--baki-gray-700); }
.baki-codeentry__field { display: flex; align-items: center; gap: var(--baki-space-3); width: 100%; min-height: 56px; margin-top: var(--baki-space-2); padding: 0 var(--baki-space-3); border: 1.5px solid var(--baki-primary); border-radius: var(--baki-radius-sm); background: var(--baki-surface); color: var(--baki-navy-700); }
.baki-codeentry__field:focus-within { box-shadow: 0 0 0 3px var(--baki-primary-soft); }
.baki-codeentry__field.is-invalid { border-color: var(--baki-danger); }
.baki-codeentry__input { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: transparent; color: var(--baki-title); font: inherit; font-weight: 600; letter-spacing: .04em; }
.baki-codeentry__input::placeholder { color: var(--baki-gray-500); font-weight: 400; letter-spacing: 0; }
.baki-codeentry__alert { flex: none; color: var(--baki-danger); }
.baki-codeentry__error { justify-self: start; margin: 0; }

/* ---- Interruttore ------------------------------------------------------------- */
.baki-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--baki-space-3); min-height: var(--baki-touch-target); cursor: pointer; }
.baki-switch.is-disabled { cursor: not-allowed; opacity: .6; }
.baki-switch__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.baki-switch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.baki-switch__track { flex: none; width: 50px; height: 30px; padding: 3px; border-radius: var(--baki-radius-pill); background: var(--baki-gray-300); transition: background var(--baki-transition); }
.baki-switch__thumb { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--baki-surface); box-shadow: var(--baki-shadow-soft); transition: transform var(--baki-transition); }
.baki-switch.is-on .baki-switch__track { background: var(--baki-primary); }
.baki-switch.is-on .baki-switch__thumb { transform: translateX(20px); }
.baki-switch__input:focus-visible + .baki-switch__track { outline: 2px solid var(--baki-primary-strong); outline-offset: 2px; }

/* ---- Progressi ----------------------------------------------------------------- */
.baki-pp {
    --pp-warm: var(--baki-orange-700);
    --pp-warm-mark: var(--baki-orange-500);
    --pp-warm-soft: var(--baki-orange-050);
    --pp-warm-line: var(--baki-orange-100);
    --pp-cool: var(--baki-sky-700);
    --pp-cool-mark: var(--baki-sky-600);
    --pp-cool-soft: var(--baki-sky-050);
    --pp-cool-line: var(--baki-sky-200);
    --pp-accent: var(--baki-sky-700);
    --pp-coin: var(--baki-orange-700);
}

.baki-pp--professional {
    --pp-cool: var(--baki-teal-900);
    --pp-cool-mark: var(--baki-teal-700);
    --pp-cool-soft: var(--baki-teal-050);
    --pp-cool-line: var(--baki-teal-200);
    --pp-accent: var(--baki-teal-900);
    --pp-coin: var(--baki-teal-900);
}

.baki-pp .baki-dobloni-pill { flex: none; padding: 3px 10px 3px 4px; gap: var(--baki-space-1); text-decoration: none; color: var(--baki-title); }
.baki-pp .baki-dobloni-pill__amount { font-size: var(--baki-text-sm); }
.baki-pp .baki-menu-button { flex: none; }

.baki-pp__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(68px, 21vw, 124px);
    grid-template-areas: "hero hero" "sections spine";
    gap: var(--baki-space-3) var(--baki-space-2);
    padding: 0 var(--baki-space-3) calc(var(--baki-bottomnav-height) + var(--safe-bottom, 0px) + var(--baki-space-5));
}

.baki-pp__hero { grid-area: hero; display: flex; flex-wrap: wrap; gap: var(--baki-space-2); min-width: 0; }
.baki-pp__sections { grid-area: sections; display: grid; align-content: start; gap: var(--baki-space-3); min-width: 0; }
.baki-pp__spine { grid-area: spine; position: sticky; top: var(--baki-space-2); align-self: start; min-width: 0; }
.baki-pp .baki-spine { max-height: none; }

.baki-pp__level {
    flex: 1 1 280px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "photo who ring" "total total total";
    align-items: center;
    gap: var(--baki-space-2);
    min-width: 0;
    padding: var(--baki-space-3);
    border-radius: var(--baki-radius-md);
    background: var(--baki-surface);
    box-shadow: var(--baki-shadow-soft);
}

.baki-pp__level > .baki-avatar { grid-area: photo; }
.baki-pp__level > .baki-ring { grid-area: ring; }
.baki-pp__who { grid-area: who; min-width: 0; }
.baki-pp__total { grid-area: total; display: grid; gap: var(--baki-space-1); color: var(--baki-title); }
.baki-pp__name { font-size: var(--baki-text-lg); font-weight: 700; color: var(--baki-title); overflow-wrap: anywhere; }
.baki-pp__code { font-size: var(--baki-text-3xl); line-height: 1; font-weight: 800; color: var(--pp-cool-mark); }
.baki-pp__rank { font-size: var(--baki-text-xs); color: var(--baki-gray-700); }

.baki-pp__next { flex: 1 1 150px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 var(--baki-space-3); min-width: 0; padding: var(--baki-space-3); border: 1px solid var(--pp-cool-line); border-radius: var(--baki-radius-md); background: var(--pp-cool-soft); }
.baki-pp__next > .baki-xs { grid-column: 1 / -1; }
.baki-pp__nextcode { font-size: var(--baki-text-2xl); font-weight: 800; color: var(--pp-cool); }
.baki-pp__prize { display: flex; align-items: center; gap: var(--baki-space-2); min-width: 0; }
.baki-pp__prize > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.baki-pp__gift { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--baki-radius-sm); background: var(--baki-surface); color: var(--baki-highlight); }
.baki-pp__prizelabel { font-size: var(--baki-text-xs); font-weight: 700; color: var(--pp-warm); }

.baki-pp-bar { height: 8px; overflow: hidden; border-radius: var(--baki-radius-pill); background: var(--baki-gray-200); }
.baki-pp-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--pp-cool-mark); transition: width .4s ease; }

.baki-pp-section { overflow: hidden; border: 1px solid var(--pp-cool-line); border-radius: var(--baki-radius-md); background: var(--pp-cool-soft); color: var(--pp-cool); }
.baki-pp-section--warm { border-color: var(--pp-warm-line); background: var(--pp-warm-soft); color: var(--pp-warm); }
.baki-pp-section__head { display: flex; align-items: center; gap: var(--baki-space-2); padding: var(--baki-space-2) var(--baki-space-3); }
.baki-pp-section__head h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--baki-text-md); font-weight: 700; color: inherit; }
.baki-pp-section__count { font-size: var(--baki-text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.baki-pp-section__rows { display: grid; margin: 0 var(--baki-space-1) var(--baki-space-1); border-radius: var(--baki-radius-sm); background: var(--baki-surface); }

.baki-pp-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto 24px;
    align-items: center;
    gap: var(--baki-space-1) var(--baki-space-2);
    width: 100%;
    min-height: 46px;
    padding: var(--baki-space-1) var(--baki-space-2);
    border: 0;
    border-bottom: 1px solid var(--baki-gray-100);
    background: transparent;
    color: var(--baki-title);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.baki-pp-row:last-child { border-bottom: 0; }
.baki-pp-row:focus-visible, .baki-pp-how:focus-visible { outline: 2px solid var(--baki-primary-strong); outline-offset: -2px; }
.baki-pp-row__icon { display: inline-flex; color: var(--pp-warm-mark); }
.baki-pp-section:not(.baki-pp-section--warm) .baki-pp-row__icon { color: var(--pp-cool-mark); }
.baki-pp-row__title { font-size: var(--baki-text-xs); line-height: 1.25; overflow-wrap: anywhere; }
.baki-pp-row__reward { display: inline-flex; align-items: center; gap: var(--baki-space-1); font-size: var(--baki-text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.baki-pp-row__count { font-size: var(--baki-text-xs); color: var(--baki-gray-700); font-variant-numeric: tabular-nums; }
.baki-pp-row__chevron { color: var(--baki-gray-500); }
.baki-pp-row--milestone { grid-template-columns: 22px minmax(0, 1fr) auto 16px; }
.baki-pp-row__wait { grid-column: 2 / -1; justify-self: end; }
@media (max-width: 399px) { .baki-pp-row__coin { display: none; } }

.baki-pp-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid var(--baki-gray-300); border-radius: 50%; color: var(--baki-surface); }
.baki-pp-mark.is-done { border-color: var(--pp-warm-mark); background: var(--pp-warm-mark); }
.baki-pp-section:not(.baki-pp-section--warm) .baki-pp-mark.is-done { border-color: var(--pp-cool-mark); background: var(--pp-cool-mark); }

.baki-countdown { display: inline-flex; align-items: center; gap: var(--baki-space-2); padding: 2px var(--baki-space-3); border-radius: var(--baki-radius-pill); background: var(--pp-cool-soft, var(--baki-sky-050)); color: var(--pp-cool, var(--baki-sky-700)); }
.baki-countdown__text { display: flex; flex-direction: column; line-height: 1.15; }
.baki-countdown__label { font-size: 0.6875rem; }
.baki-countdown__value { font-size: var(--baki-text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

.baki-pp-how { display: flex; align-items: center; gap: var(--baki-space-2); width: 100%; min-height: 52px; padding: var(--baki-space-1) var(--baki-space-3); border: 1px solid var(--pp-warm-line); border-radius: var(--baki-radius-md); background: var(--pp-warm-soft); color: var(--pp-warm); font: inherit; font-size: var(--baki-text-sm); font-weight: 700; text-align: left; cursor: pointer; }
.baki-pp-how > span { flex: 1; min-width: 0; }

.baki-pp-sheet__eyebrow { display: flex; align-items: center; gap: var(--baki-space-2); margin-bottom: var(--baki-space-2); padding-right: var(--baki-touch-target); font-weight: 700; color: var(--pp-warm); }
.baki-pp-sheet__reward { display: flex; align-items: center; justify-content: center; gap: var(--baki-space-2); margin: var(--baki-space-3) 0; padding: var(--baki-space-2); border: 1px solid var(--pp-warm-line); border-radius: var(--baki-radius-sm); background: var(--pp-warm-soft); color: var(--pp-warm); }
.baki-pp-sheet__reward strong { font-size: var(--baki-text-xl); }
.baki-pp-sheet__meter { display: grid; justify-items: center; gap: var(--baki-space-1); margin-bottom: var(--baki-space-3); padding: var(--baki-space-3); border-radius: var(--baki-radius-sm); background: var(--baki-gray-100); }
.baki-pp-sheet__meter .baki-pp-bar { width: 100%; }
.baki-pp-sheet__big { font-size: var(--baki-text-xl); font-weight: 800; color: var(--baki-title); }
.baki-pp-sheet__wait { display: flex; width: 100%; margin-bottom: var(--baki-space-3); justify-content: center; }
.baki-pp-sheet__done { display: grid; justify-items: center; gap: var(--baki-space-1); margin-bottom: var(--baki-space-2); color: var(--baki-title); text-align: center; }
.baki-pp-sheet__donemark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--pp-cool-mark); color: var(--baki-surface); }
.baki-pp-sheet__checks, .baki-pp-sheet__earn { display: grid; gap: var(--baki-space-2); margin: 0 0 var(--baki-space-3); padding: 0; list-style: none; font-size: var(--baki-text-sm); }
.baki-pp-sheet__checks li, .baki-pp-sheet__earn li { display: flex; align-items: center; gap: var(--baki-space-2); }
.baki-pp-sheet__checks .baki-pp-mark { flex: none; }
.baki-pp-sheet__checks .baki-pp-mark.is-done { border-color: var(--pp-cool-mark); background: var(--pp-cool-mark); }
.baki-pp-sheet__earn .baki-icon { flex: none; color: var(--pp-accent); }
.baki-pp-sheet__how { margin: var(--baki-space-3) 0 var(--baki-space-2); font-size: var(--baki-text-md); font-weight: 700; color: var(--baki-title); }
.baki-pp-sheet__steps { display: grid; gap: var(--baki-space-2); margin: 0; padding: 0; list-style: none; counter-reset: pp-step; font-size: var(--baki-text-sm); }
.baki-pp-sheet__steps li { display: flex; align-items: center; gap: var(--baki-space-2); counter-increment: pp-step; }
.baki-pp-sheet__steps li::before { content: counter(pp-step); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--baki-highlight-soft); color: var(--pp-warm); font-weight: 700; }
.baki-pp-sheet__facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--baki-space-1) var(--baki-space-3); margin: 0; font-size: var(--baki-text-sm); }
.baki-pp-sheet__facts dd { margin: 0; text-align: right; font-weight: 700; }
.baki-pp-accent { color: var(--pp-warm); font-weight: 700; }

.baki-pp-levels { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 var(--baki-space-2); padding: 0; list-style: none; text-align: center; font-size: var(--baki-text-xs); }
.baki-pp-levels li { position: relative; display: grid; justify-items: center; gap: 1px; color: var(--baki-gray-700); }
.baki-pp-levels li:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 14px); right: calc(-50% + 14px); height: 3px; background: var(--baki-gray-200); }
.baki-pp-levels li.is-done:not(:last-child)::after { background: var(--pp-warm-mark); }
.baki-pp-levels__node { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid var(--baki-gray-300); border-radius: 50%; background: var(--baki-surface); font-weight: 700; }
.baki-pp-levels .is-done .baki-pp-levels__node { border-color: var(--pp-warm-mark); background: var(--pp-warm-mark); color: var(--baki-surface); }
.baki-pp-levels .is-active .baki-pp-levels__node { border-color: var(--pp-warm-mark); color: var(--pp-warm); }
.baki-pp-levels__label { font-weight: 700; color: var(--baki-title); }

.baki-pp-prizes { display: grid; margin: 0; padding: 0; list-style: none; font-size: var(--baki-text-xs); }
.baki-pp-prizes li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 20px; align-items: center; gap: var(--baki-space-2); min-height: 36px; border-bottom: 1px solid var(--baki-gray-100); color: var(--baki-title); }
.baki-pp-prizes li > .baki-icon { color: var(--baki-gray-500); }
.baki-pp-prizes li.is-done > .baki-icon { color: var(--pp-cool-mark); }

.baki-pp-table { display: grid; max-height: 260px; overflow-y: auto; border: 1px solid var(--baki-gray-100); border-radius: var(--baki-radius-sm); font-size: var(--baki-text-sm); }
.baki-pp-table__row { display: grid; grid-template-columns: 1fr 1fr; padding: var(--baki-space-1) var(--baki-space-3); border-bottom: 1px solid var(--baki-gray-100); }
.baki-pp-table__row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.baki-pp-table__row--head { position: sticky; top: 0; background: var(--baki-gray-100); font-weight: 700; }
.baki-pp-table__row.is-done { background: var(--pp-warm-soft); font-weight: 700; }

.baki-pp-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--baki-space-1); margin: 0 0 var(--baki-space-2); padding: 0; list-style: none; font-size: var(--baki-text-xs); }
.baki-pp-months li { display: grid; justify-items: center; align-content: center; min-height: 48px; border-radius: var(--baki-radius-sm); background: var(--baki-gray-100); color: var(--baki-gray-700); }
.baki-pp-months li.is-active { background: var(--pp-cool-soft); color: var(--pp-cool); font-weight: 700; }

.baki-pp-levelup {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--baki-space-4);
    overflow-y: auto;
    background: linear-gradient(180deg, var(--baki-navy-900), var(--baki-sky-900));
    color: var(--baki-surface);
}

.baki-pp-levelup:focus { outline: none; }
.baki-pp-levelup__rays { position: fixed; inset: -30%; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 45%, color-mix(in srgb, var(--baki-orange-300) 16%, transparent) 0 8deg, transparent 8deg 20deg); animation: baki-levelup-rays 40s linear infinite; }
.baki-pp-levelup__body { position: relative; display: grid; justify-items: center; gap: var(--baki-space-2); width: min(100%, 360px); text-align: center; animation: baki-pop 420ms cubic-bezier(.2, 1.3, .4, 1) both; }
.baki-pp-levelup__title { margin: 0; font-size: var(--baki-text-2xl); font-weight: 800; color: var(--baki-orange-300); }
.baki-pp-levelup__code { font-size: 4rem; line-height: 1; font-weight: 800; color: var(--baki-surface); }
.baki-pp-levelup__gift { display: inline-flex; color: var(--baki-orange-300); }
.baki-pp-levelup__hello { font-size: var(--baki-text-lg); font-weight: 700; color: var(--baki-orange-300); }
.baki-pp-levelup__text { margin: 0; font-size: var(--baki-text-sm); }
.baki-pp-levelup__reward { display: flex; align-items: center; gap: var(--baki-space-2); padding: var(--baki-space-2) var(--baki-space-4); border-radius: var(--baki-radius-md); background: var(--baki-surface); color: var(--baki-orange-700); }
.baki-pp-levelup__reward strong { font-size: var(--baki-text-xl); }
.baki-pp-levelup__list { display: grid; gap: var(--baki-space-1); width: 100%; margin: 0 0 var(--baki-space-2); padding: 0; list-style: none; font-size: var(--baki-text-sm); text-align: left; }
.baki-pp-levelup__list li { display: flex; align-items: center; gap: var(--baki-space-2); }

@keyframes baki-levelup-rays { to { transform: rotate(360deg); } }

@media (min-width: 768px) {
    .baki-pp__grid { grid-template-columns: minmax(0, 1fr) 200px; grid-template-areas: "hero spine" "sections spine"; gap: var(--baki-space-4); }
    .baki-pp-row__title { font-size: var(--baki-text-sm); }
}

/* Solo la colonna vertebrale brilla: arancio per il cliente, turchese per il professionista */
.baki-spine--customer .baki-spine__v--done, .baki-spine--customer .baki-spine__v--next { --spine-color: var(--baki-orange-500); }
.baki-spine--customer .baki-spine__v--current { --spine-color: var(--baki-sky-600); }
.baki-spine--professional .baki-spine__v--done, .baki-spine--professional .baki-spine__v--next { --spine-color: var(--baki-teal-600); }
.baki-spine--professional .baki-spine__v--current { --spine-color: var(--baki-orange-500); }
.baki-spine--professional .baki-spine__v--locked .baki-spine__body, .baki-spine--professional .baki-spine__v--locked .baki-spine__wing { fill: var(--baki-peach-100); stroke: var(--baki-peach-200); }
.baki-spine__ribbon { fill: none; stroke: var(--spine-ribbon, var(--baki-orange-300)); stroke-width: 2.5; stroke-linecap: round; opacity: .55; filter: drop-shadow(0 0 4px var(--spine-ribbon, var(--baki-orange-300))); animation: baki-spine-ribbon 3.6s ease-in-out infinite; }
.baki-spine__ribbon:nth-of-type(2) { --spine-ribbon: var(--baki-sky-400); animation-delay: -1.8s; }
.baki-spine--professional .baki-spine__ribbon { --spine-ribbon: var(--baki-teal-400); }

@keyframes baki-spine-ribbon { 50% { opacity: .9; } }

/* ---- Agenda e zona -------------------------------------------------------------- */
.baki-avail { display: grid; gap: var(--baki-space-3); }
.baki-avail__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--baki-space-2); }
.baki-avail__day { margin: 0; font-size: var(--baki-text-lg); font-weight: 700; text-align: center; color: var(--baki-title); }
.baki-avail__info { display: flex; align-items: center; gap: var(--baki-space-2); margin: 0; padding: var(--baki-space-2) var(--baki-space-3); border-radius: var(--baki-radius-sm); background: var(--baki-sky-050); font-size: var(--baki-text-xs); color: var(--baki-navy-700); }
.baki-avail__info .baki-icon { flex: none; color: var(--baki-primary-strong); }
.baki-avail__quick { padding: var(--baki-space-3); border-radius: var(--baki-radius-sm); background: var(--baki-sky-050); }
.baki-avail__quicktitle { margin: 0 0 var(--baki-space-2); font-size: var(--baki-text-sm); font-weight: 700; color: var(--baki-title); }
.baki-avail__quickrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--baki-space-2); }
.baki-avail__pick { flex: 1 1 110px; display: flex; align-items: center; gap: var(--baki-space-2); min-width: 0; font-size: var(--baki-text-sm); color: var(--baki-title); }
.baki-avail__pick .baki-select { flex: 1; min-width: 0; min-height: var(--baki-touch-target); padding: 0 var(--baki-space-1) 0 var(--baki-space-3); }
.baki-avail__list { display: grid; margin: 0; padding: 0; list-style: none; }
.baki-avail__slot { display: grid; grid-template-columns: 20px 52px minmax(0, 1fr) auto; align-items: center; gap: var(--baki-space-2); min-height: 48px; border-bottom: 1px solid var(--baki-gray-100); }
.baki-avail__clock { color: var(--baki-gray-700); }
.baki-avail__time { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--baki-title); }
.baki-avail__state { font-size: var(--baki-text-sm); color: var(--baki-primary-strong); }
.baki-avail__slot.is-off .baki-avail__state { color: var(--baki-highlight-strong); }
.baki-avail__slot.is-booked { background: var(--baki-gray-100); }
.baki-avail__slot.is-booked .baki-avail__state { color: var(--baki-gray-700); font-weight: 600; }
.baki-avail__lock { justify-self: center; width: 50px; color: var(--baki-gray-700); }
.baki-avail__note { margin: 0; font-size: var(--baki-text-xs); color: var(--baki-gray-700); }
.baki-avail__repeat { display: flex; align-items: center; gap: var(--baki-space-3); padding: var(--baki-space-2) var(--baki-space-3); border-radius: var(--baki-radius-sm); background: var(--baki-sky-050); color: var(--baki-primary-strong); }
.baki-avail__repeat .baki-switch { flex: 1; min-width: 0; color: var(--baki-title); }
.baki-switch--availability:not(.is-on) .baki-switch__track { background: var(--baki-highlight); }

.baki-zonemap { display: block; width: 100%; height: auto; border-radius: var(--baki-radius-md); }
.baki-zonemap__ground { fill: var(--baki-peach-050); }
.baki-zonemap__grid { fill: none; stroke: var(--baki-gray-200); stroke-width: 1; }
.baki-zonemap__radius { fill: color-mix(in srgb, var(--baki-primary) 22%, transparent); stroke: var(--baki-primary); stroke-width: 1.5; transition: r 200ms ease; }
.baki-zonemap__city { fill: var(--baki-primary-strong); }
.baki-zonemap__city.is-excluded { fill: var(--baki-gray-500); }
.baki-zonemap__halo { fill: var(--baki-surface); }
.baki-zonemap__center { fill: var(--baki-primary-strong); }
.baki-zonemap__label { fill: var(--baki-title); font-family: var(--baki-font); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--baki-surface); stroke-width: 3px; }
.baki-zonemap__label.is-excluded { fill: var(--baki-gray-700); text-decoration: line-through; }
.baki-zonemap__badge { fill: var(--baki-primary-strong); }
.baki-zonemap__badgetext { fill: var(--baki-surface); font-family: var(--baki-font); font-weight: 600; }

.baki-zoneedit { display: grid; gap: var(--baki-space-3); }
.baki-zoneedit__search { display: flex; align-items: center; gap: var(--baki-space-2); }
.baki-zoneedit__box { flex: 1; display: flex; align-items: center; gap: var(--baki-space-2); min-width: 0; min-height: var(--baki-touch-target); padding: 0 var(--baki-space-3); border-radius: var(--baki-radius-pill); background: var(--baki-sky-050); color: var(--baki-navy-700); }
.baki-zoneedit__box:focus-within { box-shadow: 0 0 0 2px var(--baki-primary); }
.baki-zoneedit__input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: var(--baki-title); font: inherit; }
.baki-zoneedit__input::-webkit-search-cancel-button { display: none; }
.baki-zoneedit__clear, .baki-zoneedit__locate { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--baki-touch-target); height: var(--baki-touch-target); border: 0; border-radius: 50%; background: transparent; color: var(--baki-primary-strong); cursor: pointer; }
.baki-zoneedit__clear { margin-right: calc(var(--baki-space-3) * -1); }
.baki-zoneedit__locate { background: var(--baki-sky-050); }
.baki-zoneedit__locate:disabled { color: var(--baki-gray-500); cursor: wait; }
.baki-zoneedit__results { display: grid; gap: var(--baki-space-2); margin: 0; padding: 0; list-style: none; }
.baki-zoneedit__result { display: flex; align-items: center; gap: var(--baki-space-3); width: 100%; min-height: 60px; padding: var(--baki-space-2) var(--baki-space-3); border: 0; border-radius: var(--baki-radius-md); background: var(--baki-sky-050); color: var(--baki-title); font: inherit; text-align: left; cursor: pointer; }
.baki-zoneedit__result > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.baki-zoneedit__resulticon { flex: none; display: inline-flex; color: var(--baki-primary-strong); }
.baki-zoneedit__radius, .baki-zoneedit__cities { display: grid; gap: var(--baki-space-2); }
.baki-zoneedit__radiushead { display: flex; align-items: center; justify-content: space-between; color: var(--baki-title); }
.baki-zoneedit__track { display: flex; align-items: center; min-height: var(--baki-touch-target); }
.baki-zoneedit__slider { flex: none; min-height: var(--baki-touch-target); margin: 0; accent-color: var(--baki-highlight); }
.baki-zoneedit__locked { flex: none; height: 4px; border-radius: var(--baki-radius-pill); background: repeating-linear-gradient(90deg, var(--baki-gray-300) 0 6px, transparent 6px 10px); }
.baki-zoneedit__ticks { display: flex; justify-content: space-between; font-size: var(--baki-text-xs); color: var(--baki-title); }
.baki-zoneedit__ticks .is-locked { color: var(--baki-gray-500); }
.baki-zoneedit__subtitle { margin: 0; font-size: var(--baki-text-sm); font-weight: 700; color: var(--baki-title); }
.baki-zoneedit__chips { display: flex; flex-wrap: wrap; gap: var(--baki-space-2); margin: 0; padding: 0; list-style: none; }
.baki-zoneedit__chip { display: inline-flex; align-items: center; gap: var(--baki-space-1); max-width: 100%; padding-left: var(--baki-space-3); border-radius: var(--baki-radius-pill); background: var(--baki-sky-100); font-size: var(--baki-text-sm); color: var(--baki-title); }
.baki-zoneedit__chip button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.baki-zoneedit__add { display: inline-flex; align-items: center; gap: var(--baki-space-1); min-height: 36px; padding: 0 var(--baki-space-3); border: 1px dashed var(--baki-primary); border-radius: var(--baki-radius-pill); background: transparent; color: var(--baki-primary-strong); font: inherit; font-size: var(--baki-text-sm); font-weight: 600; cursor: pointer; }

.baki-zonecard { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: var(--baki-space-3); padding: var(--baki-space-3); border-radius: var(--baki-radius-md); background: var(--baki-surface); box-shadow: var(--baki-shadow-soft); }
.baki-zonecard__name { font-size: var(--baki-text-lg); font-weight: 700; color: var(--baki-title); }
.baki-zonecard__chips { display: flex; flex-wrap: wrap; gap: var(--baki-space-1); margin: var(--baki-space-2) 0 0; padding: 0; list-style: none; }
.baki-zonecard__chips li { padding: 2px var(--baki-space-2); border-radius: var(--baki-radius-pill); background: var(--baki-sky-050); font-size: var(--baki-text-xs); color: var(--baki-title); }
.baki-zonecard__chips .is-more { background: var(--baki-sky-100); color: var(--baki-primary-strong); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .baki-switch__track, .baki-switch__thumb, .baki-pp-bar > span, .baki-zonemap__radius { transition: none; }
    .baki-pp-levelup__rays, .baki-pp-levelup__body, .baki-spine__ribbon { animation: none; }
}

/* Testata stretta a 360 px: il logo si riduce, le azioni restano intere */
.baki-apphead__center .baki-logo { display: flex; justify-content: center; max-width: 100%; }
.baki-apphead__center .baki-logo img { min-width: 0; }
.baki-pp .baki-menu-button { width: var(--baki-touch-target); height: var(--baki-touch-target); }

/* ============================================================================
   Portale: pagine desktop con sidebar, usabili fino a 360 px
   ========================================================================== */

/* Due colonne dove serve: si impilano sotto i 1100 px */
.baki-portal-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--baki-space-5); align-items: start; }
.baki-portal-split > * { min-width: 0; }
.baki-portal-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.baki-portal-split--reverse { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 1100px) {
    .baki-portal-split, .baki-portal-split--even, .baki-portal-split--reverse { grid-template-columns: minmax(0, 1fr); }
    .baki-portal-split--reverse > :last-child { order: -1; }
}

.baki-portal-narrow { width: 100%; max-width: 720px; }
.baki-portal__content .baki-mt-2 { margin-top: var(--baki-space-2); }
.baki-portal-title { margin: 0 0 var(--baki-space-2); font-size: var(--baki-text-lg); font-weight: 700; color: var(--baki-title); }
.baki-portal-segmented { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin-bottom: var(--baki-space-4); }
.baki-portal-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 var(--baki-space-3); }
.baki-table th.baki-portal-num, .baki-table td.baki-portal-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.baki-portal-options { display: grid; gap: var(--baki-space-2); margin: 0 0 var(--baki-space-3); padding: 0; border: 0; min-width: 0; }
.baki-portal-options__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--baki-space-2); }
.baki-portal-options__row input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--baki-primary); }
.baki-portal-options > .baki-btn { justify-self: start; }

/* I componenti condivisi nascono per il telefono: nel portale niente altezza piena e niente barra in basso */
.baki-portal__content .baki-result { min-height: 0; border-radius: var(--baki-radius-md); }
.baki-portal__content .baki-wizardfoot { position: static; padding-left: 0; padding-right: 0; background: none; }
.baki-portal__content .baki-avail .baki-wizardfoot { position: sticky; bottom: 0; background: linear-gradient(to top, var(--baki-surface) 75%, transparent); }
.baki-portal__content .baki-pp__grid { grid-template-rows: auto 1fr; padding: 0; }
.baki-portal-split--even .baki-monthcal__head, .baki-portal-split--even .baki-monthcal__grid { max-width: 460px; margin-inline: auto; }
@media (max-width: 480px) {
    /* Il minimo di 46 px con aspect-ratio allarga la griglia oltre la colonna sui telefoni stretti */
    .baki-portal__content .baki-monthcal__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .baki-portal__content .baki-monthcal__day { min-height: 0; }
}

/* Registrazione a tutta pagina: il nome del passo sta in testata, i sei cerchi non hanno spazio per le etichette */
.baki-regwizard__stepper .baki-stepper__step { flex: none; }
.baki-regwizard__stepper .baki-stepper__label { display: none; }
[data-baki-role="professional"] > .baki-regwizard .baki-result { background: transparent; }

/* Superfici in comune con l'app, che le definisce nel proprio app.css */
.baki-pronotice { display: flex; align-items: center; gap: var(--baki-space-3); margin: 0; padding: var(--baki-space-3); border: 1px solid var(--baki-orange-100); border-radius: var(--baki-radius-md); background: var(--baki-highlight-soft); color: var(--baki-title); text-decoration: none; }
.baki-pronotice > .baki-icon { flex: none; color: var(--baki-highlight-strong); }
.baki-pronotice > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.baki-pronotice--plain { border-color: transparent; background: var(--baki-sky-050); }
.baki-pronotice--plain > .baki-icon { color: var(--baki-primary-strong); }

.baki-prolegend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--baki-space-2) var(--baki-space-4); margin: 0; padding: 0; list-style: none; font-size: var(--baki-text-xs); color: var(--baki-title); }
.baki-prolegend li { display: inline-flex; align-items: center; gap: var(--baki-space-1); }
.baki-prolegend .baki-dot { width: 12px; height: 12px; }

.baki-zonerow { display: flex; align-items: center; gap: var(--baki-space-3); min-height: 60px; padding: var(--baki-space-2) var(--baki-space-3); border-radius: var(--baki-radius-md); background: var(--baki-sky-050); color: var(--baki-title); text-decoration: none; }
.baki-zonerow > .baki-icon { flex: none; color: var(--baki-primary-strong); }
.baki-zonerow__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.baki-zonerow__action { flex: none; display: inline-flex; align-items: center; font-size: var(--baki-text-sm); font-weight: 600; color: var(--baki-primary-strong); }

.baki-prozone-empty { display: grid; justify-items: center; gap: var(--baki-space-3); padding: var(--baki-space-5) var(--baki-space-3); text-align: center; }
.baki-prozone-empty__mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 128px; height: 128px; border-radius: 50%; background: var(--baki-highlight-soft); color: var(--baki-highlight); }
.baki-prozone-empty__alert { position: absolute; right: 24px; bottom: 24px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--baki-highlight-strong); color: var(--baki-surface); font-weight: 800; }
.baki-prozone-empty__title { margin: 0; font-size: var(--baki-text-xl); font-weight: 700; color: var(--baki-title); }
.baki-prozone-empty__text { margin: 0; font-size: var(--baki-text-sm); color: var(--baki-gray-700); }

.baki-procode__reward { display: flex; align-items: center; gap: var(--baki-space-3); width: 100%; margin-top: var(--baki-space-3); padding: var(--baki-space-3); border-radius: var(--baki-radius-md); background: var(--baki-sky-050); color: var(--baki-title); text-align: left; }
.baki-procode__reward > span { display: flex; flex-direction: column; min-width: 0; }

.baki-prorows { display: grid; margin: 0; padding: 0; list-style: none; }
.baki-prorows > li { display: flex; align-items: center; justify-content: space-between; gap: var(--baki-space-3); min-height: 56px; padding: var(--baki-space-2) 0; border-bottom: 1px solid var(--baki-gray-100); }
.baki-prorows > li:last-child { border-bottom: 0; }
.baki-prorows > li > span:first-child { display: flex; flex-direction: column; min-width: 0; }

.baki-prokpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--baki-space-2); }
.baki-prokpis__value { font-size: var(--baki-text-xl); font-weight: 800; color: var(--baki-title); }

.baki-prodobloni { display: grid; justify-items: center; gap: var(--baki-space-1); padding: var(--baki-space-4); border-radius: var(--baki-radius-md); background: var(--baki-sky-050); text-align: center; }
.baki-prodobloni__balance { font-size: var(--baki-text-3xl); font-weight: 800; color: var(--baki-title); }
.baki-prodobloni__balance span { font-size: var(--baki-text-md); font-weight: 600; }
.baki-movement.is-in { color: var(--baki-success); }
.baki-movement.is-out { color: var(--baki-danger); }

.baki-proquiz__question { margin: 0 0 var(--baki-space-3); font-size: var(--baki-text-lg); font-weight: 700; color: var(--baki-title); }
.baki-proquiz__options { display: grid; gap: var(--baki-space-2); }
.baki-proquiz__option { display: flex; align-items: center; justify-content: space-between; gap: var(--baki-space-2); min-height: 52px; padding: var(--baki-space-2) var(--baki-space-3); border: 1.5px solid var(--baki-gray-200); border-radius: var(--baki-radius-sm); background: var(--baki-surface); color: var(--baki-title); font: inherit; text-align: left; cursor: pointer; }
.baki-proquiz__option:disabled { cursor: default; }
.baki-proquiz__option.is-selected { border-color: var(--baki-accent); background: var(--baki-accent-soft); }
.baki-proquiz__option.is-correct { border-color: var(--baki-success); background: var(--baki-success-bg); }
.baki-proquiz__option.is-wrong { border-color: var(--baki-danger); background: var(--baki-danger-bg); }
.baki-proquiz__result { margin-top: var(--baki-space-3); padding: var(--baki-space-3); border-radius: var(--baki-radius-md); color: var(--baki-title); }
.baki-proquiz__result.is-correct { background: var(--baki-success-bg); }
.baki-proquiz__result.is-wrong { background: var(--baki-danger-bg); }

.baki-prosurvey { display: grid; gap: var(--baki-space-2); margin: 0; border: 0; }
.baki-prosurvey legend { float: left; width: 100%; margin-bottom: var(--baki-space-2); color: var(--baki-title); }
.baki-prosurvey .baki-choice { clear: both; min-height: 52px; }

.baki-proinvite { display: grid; justify-items: center; gap: var(--baki-space-2); padding: var(--baki-space-5) var(--baki-space-4); border-radius: var(--baki-radius-md); background: var(--baki-sky-050); text-align: center; }
.baki-proinvite__icon { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--baki-highlight-soft); color: var(--baki-highlight); }
.baki-proinvite__title { margin: 0; font-size: var(--baki-text-xl); font-weight: 700; color: var(--baki-title); }
.baki-proinvite__code { padding: var(--baki-space-2) var(--baki-space-4); border: 1.5px dashed var(--baki-primary); border-radius: var(--baki-radius-sm); background: var(--baki-surface); font-size: var(--baki-text-xl); font-weight: 800; letter-spacing: .08em; color: var(--baki-title); overflow-wrap: anywhere; }