/* =========================================================
   GESTIONALE FRONTEND
   Pagina a tutto schermo, pensata per computer e smartphone.
========================================================= */

:root {
    --ceg-rosa: #bd829c;
    --ceg-rosa-scuro: #a96d88;
    --ceg-rosa-chiaro: #f8edf2;
    --ceg-bordo: #f0e5eb;
    --ceg-testo: #494148;
    --ceg-testo-forte: #3a2f35;
    --ceg-grigio: #8f8289;
    --ceg-sfondo: #faf8f9;
    --ceg-bianco: #fff;
    --ceg-errore: #b3382c;
    --ceg-sidebar: 232px;
    --ceg-barra-mobile: 58px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body.ceg-body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body.ceg-body {
    background: var(--ceg-sfondo);
    color: var(--ceg-testo);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
}

.ceg-app button,
.ceg-app input,
.ceg-app select,
.ceg-app textarea {
    font: inherit;
    color: inherit;
}

.ceg-app a {
    color: var(--ceg-rosa-scuro);
}

[hidden] {
    display: none !important;
}


/* =========================================================
   STRUTTURA
========================================================= */

.ceg-app {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.ceg-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ceg-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 28px 22px;
    overflow: auto;
}


/* =========================================================
   MENU LATERALE
========================================================= */

.ceg-sidebar {
    width: var(--ceg-sidebar);
    flex: 0 0 var(--ceg-sidebar);
    display: flex;
    flex-direction: column;
    padding: 26px 16px 18px;
    background: var(--ceg-bianco);
    border-right: 1px solid var(--ceg-bordo);
}

.ceg-brand {
    text-align: center;
    padding: 6px 0 34px;
}

.ceg-brand h2 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 26px;
    font-weight: normal;
    color: var(--ceg-rosa);
}

.ceg-navigation {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ceg-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #776a72 !important;
    text-decoration: none;
    font-size: 14px;
}

.ceg-nav-link:hover,
.ceg-nav-link.active {
    background: var(--ceg-rosa-chiaro);
    color: #b36f8d !important;
}

.ceg-nav-link svg {
    flex: 0 0 auto;
}

.ceg-sidebar-footer {
    margin-top: auto;
}


/* =========================================================
   BARRA SUPERIORE
========================================================= */

.ceg-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 0 28px;
    background: var(--ceg-bianco);
    border-bottom: 1px solid var(--ceg-bordo);
}

.ceg-topbar h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #51434b;
}

.ceg-user {
    max-width: 50%;
    padding: 8px 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 20px;
    background: var(--ceg-rosa-chiaro);
    color: #a66e88;
    font-size: 13px;
}

.ceg-toast {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 100;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 11px 20px;
    border-radius: 24px;
    background: #4b3a44;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 6px 20px rgba(60, 35, 50, 0.25);
    transition: opacity 0.4s;
}

.ceg-toast.ceg-toast-via {
    opacity: 0;
    pointer-events: none;
}


/* =========================================================
   PULSANTI E CAMPI
========================================================= */

.ceg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--ceg-bordo);
    border-radius: 9px;
    background: var(--ceg-bianco);
    color: #776a72 !important;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.ceg-btn:hover {
    background: var(--ceg-rosa-chiaro);
}

.ceg-btn-icona {
    min-width: 40px;
    padding: 8px 12px;
    font-size: 20px;
    line-height: 1;
}

.ceg-btn-primario {
    border-color: var(--ceg-rosa);
    background: var(--ceg-rosa);
    color: #fff !important;
}

.ceg-btn-primario:hover {
    background: var(--ceg-rosa-scuro);
}

.ceg-btn-pericolo {
    border-color: #ecc4be;
    color: var(--ceg-errore) !important;
}

.ceg-btn-pericolo:hover {
    background: #fbeceb;
}

.ceg-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

.ceg-link {
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--ceg-rosa-scuro);
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
}

.ceg-campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

.ceg-campo label {
    font-size: 13px;
    font-weight: 600;
    color: #6b5d65;
}

.ceg-campo input,
.ceg-campo select,
.ceg-campo textarea,
.ceg-input-data,
.ceg-ricerca input {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid #e3d3db;
    border-radius: 9px;
    background: #fff;
    font-size: 16px; /* evita lo zoom automatico su iPhone */
}

.ceg-campo textarea {
    resize: vertical;
}

.ceg-campo input:focus,
.ceg-campo select:focus,
.ceg-campo textarea:focus,
.ceg-input-data:focus,
.ceg-ricerca input:focus {
    outline: 2px solid rgba(189, 130, 156, 0.45);
    border-color: var(--ceg-rosa);
}

.ceg-riga-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ceg-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    font-size: 13px;
    color: #776a72;
    cursor: pointer;
}

.ceg-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--ceg-rosa);
}

.ceg-errore {
    margin: 4px 0 0;
    padding: 10px 12px;
    border-radius: 9px;
    background: #fbeceb;
    color: var(--ceg-errore);
    font-size: 14px;
}


/* =========================================================
   AGENDA
========================================================= */

.ceg-agenda {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ceg-agenda-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 12px;
}

.ceg-agenda-titolo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ceg-agenda-titolo h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #51434b;
    text-transform: capitalize;
}

.ceg-badge-oggi {
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--ceg-rosa-chiaro);
    color: var(--ceg-rosa-scuro);
    font-size: 12px;
    font-weight: 600;
}

.ceg-agenda-comandi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ceg-input-data {
    width: auto;
    min-height: 40px;
    font-size: 14px;
}

.ceg-vuoto {
    padding: 40px 20px;
    border: 1px dashed #e3d3db;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    color: var(--ceg-grigio);
}

.ceg-avviso {
    margin: 8px 0 0;
    font-size: 13px;
    color: #9a6a00;
}

/* Contenitore scorrevole: le intestazioni e gli orari restano fissi */

.ceg-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--ceg-bordo);
    border-radius: 12px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.ceg-griglia {
    --ceg-col-orari: 54px;
    --ceg-col-min: 190px;

    display: grid;
    grid-template-columns: var(--ceg-col-orari) repeat(var(--ceg-n), minmax(var(--ceg-col-min), 1fr));
    grid-template-rows: auto var(--ceg-altezza);
    width: max-content;
    min-width: 100%;
}

.ceg-angolo,
.ceg-intest-op {
    position: sticky;
    top: 0;
    z-index: 6;
    background: #fff;
    border-bottom: 1px solid var(--ceg-bordo);
}

.ceg-angolo {
    left: 0;
    z-index: 8;
}

.ceg-intest-op {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 6px 8px;
    border-left: 1px solid var(--ceg-bordo);
    text-align: center;
}

.ceg-intest-op strong {
    color: #a94f75;
    font-size: 15px;
}

.ceg-intest-op small {
    color: var(--ceg-grigio);
    font-size: 11px;
}

.ceg-col-orari {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #fff;
}

.ceg-etichetta-orario {
    position: absolute;
    left: 0;
    width: 100%;
    padding-right: 8px;
    transform: translateY(-50%);
    text-align: right;
    font-size: 12px;
    color: #776a72;
    background: #fff;
}

.ceg-etichetta-orario.ceg-prima {
    transform: translateY(2px);
}

.ceg-col-op {
    position: relative;
    border-left: 1px solid var(--ceg-bordo);
    background-image:
        linear-gradient(to bottom, #e8dbe2 1px, transparent 1px),
        linear-gradient(to bottom, #f6eff3 1px, transparent 1px);
    background-size:
        100% calc(60 * var(--ceg-px-min)),
        100% calc(15 * var(--ceg-px-min));
    cursor: pointer;
}

.ceg-fascia-chiusa {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    background: rgba(120, 100, 110, 0.09);
    pointer-events: none;
}

/* Evidenziatore dello slot sotto il mouse */

.ceg-slot {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    height: calc(15 * var(--ceg-px-min));
    padding: 2px 6px;
    background: rgba(217, 139, 171, 0.2);
    color: #8f4a69;
    font-size: 11px;
    pointer-events: none;
}

/* Linea dell'ora attuale */

.ceg-adesso {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    height: 2px;
    background: #e0526f;
    pointer-events: none;
}

.ceg-adesso::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e0526f;
}


/* =========================================================
   APPUNTAMENTI
========================================================= */

.ceg-app-blocco {
    position: absolute;
    left: 3px;
    right: 3px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 6px;
    overflow: hidden;
    border: 0;
    border-left: 4px solid var(--ceg-rosa);
    border-radius: 6px;
    background: #f8e8f0;
    color: var(--ceg-testo-forte);
    font-size: 12px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.ceg-app-blocco:hover {
    filter: brightness(0.97);
    box-shadow: 0 2px 8px rgba(80, 35, 55, 0.18);
}

.ceg-app-blocco:focus-visible {
    outline: 2px solid var(--ceg-rosa-scuro);
}

.ceg-ab-nome {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ceg-ab-trat {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ceg-ab-ora {
    font-size: 11px;
    opacity: 0.75;
    white-space: nowrap;
}

/* Appuntamenti brevi: poco spazio in altezza */

.ceg-ab-15,
.ceg-ab-30 {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: baseline;
    column-gap: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* 15 minuti: una sola riga "Nome · Trattamento" */

.ceg-ab-15 .ceg-ab-nome {
    flex: 0 1 auto;
    min-width: 0;
}

.ceg-ab-15 .ceg-ab-trat {
    flex: 1 1 0;
    min-width: 0;
}

.ceg-ab-15 .ceg-ab-trat::before {
    content: "· ";
}

.ceg-ab-15 .ceg-ab-ora {
    display: none;
}

/* 30 minuti: due righe, nome sopra e "Trattamento · orario" sotto */

.ceg-ab-30 .ceg-ab-nome {
    flex: 0 0 100%;
    min-width: 0;
}

.ceg-ab-30 .ceg-ab-trat {
    flex: 0 1 auto;
    min-width: 0;
}

.ceg-ab-30 .ceg-ab-ora {
    flex: 0 0 auto;
}

/* Stati */

.ceg-stato-confermato {
    background: #f8e8f0;
    border-left-color: #d98bab;
}

.ceg-stato-da_confermare {
    background: #fff0c2;
    border-left-color: #e5bd58;
}

.ceg-stato-completato {
    background: #e2f1e5;
    border-left-color: #6aa874;
}

.ceg-stato-assente {
    background: #fde3e0;
    border-left-color: #d9776b;
}

.ceg-stato-annullato {
    background: #eeeeee;
    border-left-color: #999999;
    opacity: 0.8;
}

.ceg-stato-annullato .ceg-ab-nome {
    text-decoration: line-through;
}

.ceg-nascondi-annullati .ceg-app-blocco.ceg-stato-annullato {
    display: none;
}

/* Legenda */

.ceg-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--ceg-grigio);
}

.ceg-legenda li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ceg-pallino {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border-left-width: 4px;
    border-left-style: solid;
    opacity: 1;
}


/* =========================================================
   CLIENTI
========================================================= */

.ceg-clienti {
    max-width: 900px;
    width: 100%;
}

.ceg-ricerca {
    display: flex;
    flex: 1;
    gap: 8px;
    min-width: 0;
}

.ceg-ricerca input {
    flex: 1;
    min-width: 0;
}

.ceg-conteggio {
    margin: 4px 0 10px;
    font-size: 13px;
    color: var(--ceg-grigio);
}

.ceg-lista-clienti {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--ceg-bordo);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.ceg-cliente-riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--ceg-bordo);
}

.ceg-cliente-riga:last-child {
    border-bottom: 0;
}

.ceg-cliente-modifica {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.ceg-cliente-modifica:hover {
    background: var(--ceg-rosa-chiaro);
}

.ceg-cliente-nome {
    font-weight: 600;
    color: var(--ceg-testo-forte);
}

.ceg-cliente-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--ceg-grigio);
}

.ceg-cliente-tel {
    flex: 0 0 auto;
    padding: 12px 16px;
    font-size: 14px;
    text-decoration: none;
}

.ceg-cliente-storico,
.ceg-cliente-scheda {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 14px;
}

.ceg-cliente-storico {
    margin-right: 14px;
}

.ceg-paginazione {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 14px 0 4px;
    font-size: 13px;
    color: var(--ceg-grigio);
}


/* =========================================================
   FINESTRE (MODALI)
========================================================= */

.ceg-dialog {
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: var(--ceg-testo);
    box-shadow: 0 18px 50px rgba(60, 35, 50, 0.3);
}

.ceg-dialog::backdrop {
    background: rgba(60, 35, 50, 0.45);
}

.ceg-dialog[open] {
    display: flex;
}

.ceg-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: inherit;
    min-height: 0;
}

.ceg-dialog-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ceg-bordo);
}

.ceg-dialog-testa h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.ceg-chiudi {
    width: 40px;
    height: 40px;
    margin-right: -8px;
    border: 0;
    border-radius: 50%;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #776a72;
    cursor: pointer;
}

.ceg-chiudi:hover {
    background: var(--ceg-rosa-chiaro);
}

.ceg-dialog-corpo {
    flex: 1;
    min-height: 0;
    padding: 18px 20px 6px;
    overflow: auto;
}

.ceg-dialog-piede {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ceg-bordo);
    background: #fff;
}

.ceg-spazio {
    flex: 1;
}

/* Scheda cliente a tab */

.ceg-sc-tabs {
    display: flex;
    gap: 4px;
    padding: 0 14px;
    overflow-x: auto;
    border-bottom: 1px solid var(--ceg-bordo);
    background: #fff;
}

.ceg-sc-tab {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: #776a72;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.ceg-sc-tab:hover {
    color: var(--ceg-rosa-scuro);
}

.ceg-sc-tab[aria-selected="true"] {
    border-bottom-color: var(--ceg-rosa);
    color: var(--ceg-rosa-scuro);
    font-weight: 600;
}

.ceg-sc-tab:focus-visible {
    outline: 2px solid var(--ceg-rosa-scuro);
    outline-offset: -2px;
}

/* Puntino: il tab ha modifiche non salvate */
.ceg-sc-tab-modificata::after {
    content: " •";
    color: #e0526f;
}

.ceg-sc-sezione {
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ceg-bordo);
    font-size: 15px;
    color: var(--ceg-rosa-scuro);
}

.ceg-sc-sezione:first-child {
    margin-top: 0;
}

.ceg-sc-gruppo {
    margin: 0;
    padding: 0;
    border: 0;
}

.ceg-sc-gruppo legend {
    margin-bottom: 4px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #6b5d65;
}

.ceg-sc-aiuto {
    color: var(--ceg-grigio);
    font-size: 12px;
}

.ceg-sc-azioni {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ceg-bordo);
}

.ceg-sc-messaggi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 12px;
    color: var(--ceg-grigio);
}

.ceg-sc-stato {
    color: #3d7a4a;
    font-weight: 600;
}

.ceg-sc-stato-errore {
    color: var(--ceg-errore);
}

/* Cronologia di un appuntamento */

.ceg-cr-lista {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.ceg-cr-voce {
    padding: 12px 0;
    border-bottom: 1px solid var(--ceg-bordo);
}

.ceg-cr-voce:last-child {
    border-bottom: 0;
}

.ceg-cr-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.ceg-cr-quando {
    font-size: 12px;
    color: var(--ceg-grigio);
}

.ceg-cr-modifiche {
    margin: 6px 0 0;
    padding: 0 0 0 4px;
    list-style: none;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.ceg-cr-modifiche li {
    margin-top: 2px;
}

.ceg-cr-campo {
    color: var(--ceg-grigio);
}

.ceg-cr-vecchio {
    color: #8a7a82;
    text-decoration: line-through;
}

.ceg-cr-nuovo {
    font-weight: 600;
    color: var(--ceg-testo-forte);
}

/* Storico appuntamenti di una cliente */

.ceg-dialog-largo {
    width: min(680px, calc(100vw - 24px));
}

.ceg-st-caricamento {
    margin: 4px 0 14px;
    color: var(--ceg-grigio);
}

.ceg-st-riepilogo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.ceg-st-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 76px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--ceg-rosa-chiaro);
}

.ceg-st-chip strong {
    font-size: 20px;
    color: var(--ceg-rosa-scuro);
}

.ceg-st-chip span {
    font-size: 11px;
    color: #776a72;
}

.ceg-st-lista {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.ceg-st-voce {
    padding: 11px 0;
    border-bottom: 1px solid var(--ceg-bordo);
}

.ceg-st-voce:last-child {
    border-bottom: 0;
}

.ceg-st-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
}

.ceg-st-data {
    font-weight: 600;
}

.ceg-st-stato {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #776a72;
}

.ceg-st-trattamento {
    margin-top: 3px;
    color: var(--ceg-testo-forte);
}

.ceg-st-dettagli {
    margin-top: 1px;
    font-size: 12px;
    color: var(--ceg-grigio);
}

.ceg-st-note {
    margin-top: 5px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--ceg-sfondo);
    font-size: 13px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ceg-st-vuoto {
    padding: 20px 0;
    text-align: center;
    color: var(--ceg-grigio);
}

/* Ricerca cliente */

.ceg-cliente-cerca {
    position: relative;
}

.ceg-risultati {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 240px;
    margin: 0;
    padding: 4px;
    overflow: auto;
    list-style: none;
    border: 1px solid #e3d3db;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(80, 35, 55, 0.18);
}

.ceg-risultati li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 7px;
    cursor: pointer;
}

.ceg-risultati li:hover,
.ceg-risultati li[aria-selected="true"] {
    background: var(--ceg-rosa-chiaro);
}

.ceg-risultati small {
    color: var(--ceg-grigio);
}

.ceg-risultati .ceg-nessuno {
    color: var(--ceg-grigio);
    cursor: default;
}

.ceg-nuova-cliente {
    margin-top: 6px;
    padding: 12px 12px 0;
    border: 1px solid var(--ceg-bordo);
    border-radius: 10px;
    background: var(--ceg-sfondo);
}


/* =========================================================
   ACCESSO
========================================================= */

.ceg-accesso {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px;
}

.ceg-accesso-card {
    width: min(380px, 100%);
    padding: 30px 26px;
    border: 1px solid var(--ceg-bordo);
    border-radius: 14px;
    background: #fff;
}

.ceg-accesso-card h1 {
    margin: 0 0 6px;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: normal;
    color: var(--ceg-rosa);
}

.ceg-accesso-card p {
    margin: 0 0 16px;
    text-align: center;
    color: var(--ceg-grigio);
}

.ceg-accesso-card form p {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 14px;
    text-align: left;
}

.ceg-accesso-card label {
    font-size: 13px;
    font-weight: 600;
    color: #6b5d65;
}

.ceg-accesso-card input[type="text"],
.ceg-accesso-card input[type="password"] {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid #e3d3db;
    border-radius: 9px;
    font-size: 16px;
}

.ceg-accesso-card .login-remember label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
}

.ceg-accesso-card input[type="submit"] {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 9px;
    background: var(--ceg-rosa);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}


/* =========================================================
   SMARTPHONE E TABLET
========================================================= */

@media (max-width: 899px) {

    /* Il menu diventa una barra in basso */

    .ceg-app {
        flex-direction: column;
    }

    .ceg-main {
        order: 1;
    }

    .ceg-sidebar {
        order: 2;
        width: 100%;
        flex: 0 0 auto;
        flex-direction: row;
        padding: 0 4px env(safe-area-inset-bottom);
        border-right: 0;
        border-top: 1px solid var(--ceg-bordo);
    }

    .ceg-brand {
        display: none;
    }

    .ceg-navigation,
    .ceg-sidebar-footer {
        display: contents;
    }

    .ceg-nav-link {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-height: var(--ceg-barra-mobile);
        padding: 6px 2px;
        font-size: 11px;
    }

    .ceg-topbar {
        min-height: 52px;
        padding: 0 14px;
    }

    .ceg-topbar h1 {
        font-size: 18px;
    }

    .ceg-content {
        padding: 12px 12px 14px;
    }

    .ceg-agenda-titolo h2 {
        font-size: 18px;
    }

    .ceg-agenda-comandi {
        width: 100%;
    }

    .ceg-input-data {
        flex: 1;
        min-width: 130px;
    }

    .ceg-griglia {
        --ceg-col-orari: 42px;
        --ceg-col-min: 150px;
    }

    .ceg-etichetta-orario {
        padding-right: 5px;
        font-size: 11px;
    }

    /* Pulsante "Nuovo" sempre a portata di pollice */

    .ceg-btn-nuovo {
        position: fixed;
        right: 16px;
        bottom: calc(var(--ceg-barra-mobile) + env(safe-area-inset-bottom) + 14px);
        z-index: 30;
        min-height: 50px;
        padding: 10px 20px;
        border-radius: 26px;
        box-shadow: 0 6px 18px rgba(120, 60, 90, 0.35);
    }

    .ceg-legenda {
        display: none;
    }

    /* Finestre a schermo intero */

    .ceg-dialog {
        width: 100vw;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }

    .ceg-lista-clienti {
        border-radius: 10px;
    }
}

@media (max-width: 560px) {

    /* Nome su una riga, telefono e storico sotto */

    .ceg-cliente-riga {
        flex-wrap: wrap;
    }

    .ceg-cliente-modifica {
        flex: 1 1 100%;
        padding-bottom: 4px;
    }

    .ceg-cliente-tel {
        padding: 4px 16px 12px;
    }

    .ceg-cliente-scheda {
        margin: 0 0 10px auto;
    }

    .ceg-cliente-storico {
        margin: 0 14px 10px 8px;
    }
}

@media (max-width: 420px) {

    .ceg-riga-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ceg-user {
        max-width: 42%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ceg-toast {
        transition: none;
    }
}


/* Pagina "non trovata" */

.ceg-404 {
    text-align: center;
}

.ceg-404-codice {
    margin: 0 0 4px;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--ceg-rosa);
}

.ceg-404-azioni {
    margin-top: 20px;
}

.ceg-404-azioni .ceg-btn {
    display: inline-block;
    text-decoration: none;
}


/* Appuntamenti in parallelo: uno accanto all'altro */

.ceg-app-blocco.ceg-ab-multi {
    right: auto;
    left: calc(3px + var(--corsia, 0) * ((100% - 6px) / var(--corsie, 1)));
    width: calc((100% - 6px) / var(--corsie, 1) - 2px);
    padding: 3px 4px;
    font-size: 11px;
}

/* Segno dell'appuntamento che consente altri appuntamenti in parallelo:
   righe oblique sul colore dello stato, doppio bordo e simbolo. */
.ceg-app-blocco.ceg-ab-par {
    border-left-style: double;
    border-left-width: 6px;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.6) 0,
        rgba(255, 255, 255, 0.6) 5px,
        rgba(255, 255, 255, 0) 5px,
        rgba(255, 255, 255, 0) 10px
    );
}

.ceg-app-blocco.ceg-ab-par::after {
    content: "\2225";
    position: absolute;
    top: 1px;
    right: 4px;
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ceg-rosa-scuro);
}

/* Voce della legenda */
.ceg-pallino.ceg-pallino-parallelo {
    background-color: #f8e8f0;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0,
        rgba(255, 255, 255, 0.9) 2px,
        rgba(255, 255, 255, 0) 2px,
        rgba(255, 255, 255, 0) 4px
    );
    border: 1px solid var(--ceg-rosa);
}

.ceg-aiuto {
    display: block;
    margin-top: 4px;
    color: var(--ceg-grigio);
    font-size: 12px;
}

.ceg-durate-rapide {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.ceg-chip {
    min-width: 44px;
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--ceg-bordo);
    border-radius: 999px;
    background: #fff;
    color: var(--ceg-testo);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.ceg-chip:hover,
.ceg-chip:focus-visible {
    border-color: var(--ceg-rosa);
    background: var(--ceg-rosa-chiaro);
}


/* Pausa */

.ceg-app-blocco.ceg-ab-pausa {
    border-left-color: #8d8590;
    background-color: #ebe8ec;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.55) 0,
        rgba(255, 255, 255, 0.55) 4px,
        rgba(255, 255, 255, 0) 4px,
        rgba(255, 255, 255, 0) 8px
    );
    color: #5c5560;
}

.ceg-app-blocco.ceg-ab-pausa .ceg-ab-trat {
    display: none;
}

.ceg-app-blocco.ceg-ab-pausa::after {
    content: none;
}


/* Assenze (ferie, permessi): fascia grigia, non intercetta i clic */

.ceg-assenza {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
    pointer-events: none;
    background-color: rgba(120, 112, 124, 0.22);
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.35) 0,
        rgba(255, 255, 255, 0.35) 6px,
        rgba(255, 255, 255, 0) 6px,
        rgba(255, 255, 255, 0) 12px
    );
}

.ceg-assenza span {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #5c5560;
    font-size: 12px;
    font-weight: 700;
}