/*
 * Agenda di LUCIDA — aspetto da software professionale: griglia ordinata,
 * orari leggibili, intestazioni fisse, blocchi colorati per categoria.
 * Usa i token di home.css (--text, --line, --font…). Testo mai sotto i 13 px.
 */
.ap { display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; color: var(--text); }

/* barra degli strumenti */
.ap-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.ap-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ap-ic { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff; font-size: 24px; line-height: 1; color: var(--text); }
.ap-ic:hover, .ap-today:hover { border-color: var(--text); }
.ap-today { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff; font: 800 15.5px/1 var(--font); }
.ap-today[aria-current] { background: var(--text); border-color: var(--text); color: #fff; }
.ap-date { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; cursor: pointer; font-size: 17px; font-weight: 800; }
.ap-date:hover { background: var(--cream); }
.ap-date-txt::after { content: ' ▾'; font-size: 13px; color: var(--text-2); }
.ap-date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.ap-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (min-width: 1100px) { .ap-tools { margin-left: auto; } }
.ap-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--cream); }
.ap-seg button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; font: 700 15px/1 var(--font); color: var(--text-2); }
.ap-seg button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(48, 43, 43, .18); }
.ap-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-opt-btn { display: none; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff; font: 800 15px/1 var(--font); }
.ap-opt-btn::after { content: ' ▾'; font-size: 12px; }
.ap-opt-btn[aria-expanded="true"] { background: var(--cream); }
@media (max-width: 899px) { .ap-opt-btn { display: inline-flex; align-items: center; } .ap-opts { display: none; flex-basis: 100%; } .ap.opts-open .ap-opts { display: flex; } .ap-bar { gap: 8px 10px; padding: 10px 12px; } }
.ap-sel { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text-2); }
.ap-sel select { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff; padding: 0 10px; font: 700 15px/1 var(--font); color: var(--text); }

.ap-sum { margin: 0; padding: 10px 16px; font-size: 15.5px; color: var(--text-2); border-bottom: 1px solid var(--line); background: var(--white); }
.ap-sum b { color: var(--text); }
.ap-only { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; background: var(--cipria); font-size: 16px; }
.ap-flash { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; background: var(--salvia); font-size: 15.5px; font-weight: 600; }
.ap-flash button { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1.5px solid rgba(48, 43, 43, .3); background: #fff; font-weight: 800; }

/* griglia giorno: orari fissi a sinistra, intestazioni fisse in alto */
.ap-frame { position: relative; }
.ap-scroll { overflow: auto; height: min(74vh, 760px); overscroll-behavior-x: contain; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; background: #fff; }
.ap-scroll:focus-visible { outline-offset: -3px; }
@media (max-width: 899px) { .ap-scroll { height: max(440px, calc(100svh - 250px)); } }
.ap-compact .ap-scroll { height: 470px; }
.ap-grid { display: grid; grid-template-columns: 60px repeat(var(--cols), minmax(var(--cw), 1fr)); width: max-content; min-width: 100%; }
.ap-corner, .ap-head { position: sticky; top: 0; z-index: 4; background: #fff; border-bottom: 1.5px solid var(--line-2); }
.ap-corner { left: 0; z-index: 6; border-right: 1px solid var(--line); }
.ap-head { display: grid; gap: 2px; align-content: center; min-height: 58px; padding: 8px 12px; text-align: left; border: 0; border-left: 1px solid var(--line); border-bottom: 1.5px solid var(--line-2); font: inherit; color: var(--text); cursor: pointer; }
.ap-head:hover { background: var(--cream); }
.ap-head b { font-size: 16.5px; font-weight: 800; }
.ap-head small { font-size: 13.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.ap-times { position: sticky; left: 0; z-index: 3; background: #fff; border-right: 1px solid var(--line); }
.ap-times span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 13.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ap-times span:first-child { transform: translateY(3px); }
.ap-times span:last-of-type:not(.ap-now-t) { transform: translateY(-100%); }
.ap-now-t { right: 4px !important; z-index: 2; padding: 2px 5px; border-radius: 6px; background: var(--terra-btn); color: #fff !important; font-weight: 800 !important; }
.ap-col { position: relative; border-left: 1px solid var(--line);
  background-image: linear-gradient(rgba(48, 43, 43, .11) 1px, transparent 1px), linear-gradient(rgba(48, 43, 43, .045) 1px, transparent 1px);
  background-size: 100% var(--hh), 100% calc(var(--hh) / 2); }
.ap-past { position: absolute; left: 0; right: 0; top: 0; background: repeating-linear-gradient(135deg, rgba(48, 43, 43, .035) 0 6px, transparent 6px 12px); pointer-events: none; }
.ap-now-l { position: absolute; left: 0; right: 0; height: 2px; margin-top: -1px; background: var(--terra-btn); z-index: 2; pointer-events: none; }

/* spazi liberi: riconoscibili, toccabili */
.ap-free { position: absolute; left: 4px; right: 4px; padding: 6px 0 0; border: 1.5px dashed rgba(61, 106, 76, .32); border-radius: 10px; background: rgba(221, 232, 223, .32); color: var(--salvia-ink); display: flex; justify-content: center; align-items: flex-start; cursor: copy; }
.ap-free span { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 6px; }
.ap-free:hover { background: rgba(221, 232, 223, .75); border-color: var(--salvia-ink); }
.ap-free:hover span::before { content: '+ '; }

/* appuntamenti */
.ap-ev { position: absolute; left: 4px; right: 4px; z-index: 1; display: flex; flex-direction: column; gap: 1px; padding: 5px 8px 5px 9px; overflow: hidden; text-align: left; border: 0; border-left: 4px solid var(--ci); border-radius: 9px; background: var(--c); color: var(--text); font: inherit; line-height: 1.25; box-shadow: 0 1px 2px rgba(48, 43, 43, .1); }
.ap-ev:hover { filter: brightness(.97); box-shadow: 0 4px 12px -4px rgba(48, 43, 43, .28); }
.ev-name { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-sub { font-size: 13.5px; font-weight: 600; color: #3d3535; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ap-ev.m .ev-sub { white-space: nowrap; text-overflow: ellipsis; display: block; }
.ev-time { font-size: 13.5px; font-weight: 700; color: #3d3535; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-1 { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-1 b { font-variant-numeric: tabular-nums; }
.ev-st { align-self: flex-start; margin-top: auto; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ci); font-size: 13px; font-weight: 800; }
.ap-ev.s .ev-st { display: none; }
.ap-ev.st-done { opacity: .66; }
.ap-ev.st-now { box-shadow: 0 0 0 2px var(--ci), 0 4px 12px -6px rgba(48, 43, 43, .4); }
.ap-ev.st-wait { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .45) 0 6px, transparent 6px 12px); }
.ap-ev.is-demo { outline: 2px dashed var(--text); outline-offset: -2px; }

.ap-more { position: absolute; right: 10px; bottom: 14px; z-index: 7; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--text); color: #fff; font: 800 15px/1 var(--font); box-shadow: 0 10px 24px -10px rgba(48, 43, 43, .6); }
.ap-frame:has(.ap-more:not([hidden]))::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 26px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(48, 43, 43, .1)); pointer-events: none; z-index: 5; }

.ap-closed { display: grid; gap: 6px; padding: 48px 20px; text-align: center; font-size: 17px; color: var(--text-2); }
.ap-closed b { color: var(--text); font-size: 20px; }

/* settimana */
.ap-week-wrap { overflow-x: auto; padding: 8px 10px 12px; }
.ap-week { border-collapse: separate; border-spacing: 6px; width: 100%; min-width: 760px; }
.ap-week th { font-size: 15px; font-weight: 800; text-align: left; padding: 4px 6px; white-space: nowrap; }
.ap-week thead th small { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.ap-week thead th.is-today { color: var(--terra-ink); }
.ap-week tbody th { position: sticky; left: 0; background: #fff; z-index: 1; }
.wk-cell { width: 100%; min-height: 56px; display: grid; gap: 6px; padding: 8px 10px; text-align: left; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; }
.wk-cell:hover { border-color: var(--text); }
.wk-cell.is-today { border-color: var(--terra-btn); background: #fffaf8; }
.wk-cell b { font-size: 18px; }
.wk-bar { position: relative; height: 10px; border-radius: 5px; background: var(--cream); overflow: hidden; }
.wk-bar i { position: absolute; top: 0; bottom: 0; background: var(--c); opacity: .8; border-right: 1px solid #fff; }
.wk-closed { color: var(--text-3); font-size: 15px; font-weight: 700; text-align: center; background: repeating-linear-gradient(135deg, var(--cream) 0 8px, #fff 8px 16px); border-radius: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* legenda */
.ap-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.ap-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ap-legend i { width: 16px; height: 16px; border-radius: 4px; background: var(--c); border-left: 4px solid var(--ci); }

/* finestra: dettaglio e nuova prenotazione */
.ap-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(48, 43, 43, .42); }
.ap-modal[hidden] { display: none; }
.ap-dlg { position: relative; width: min(580px, 100%); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 24px 24px 0 0; padding: 22px 18px calc(24px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 30px 60px -20px rgba(48, 43, 43, .5); }
@media (min-width: 700px) { .ap-modal { align-items: center; padding: 20px; } .ap-dlg { border-radius: 24px; padding: 26px 26px 24px; } }
.ap-modal-open, .ap-modal-open body { overflow: hidden; }
.ap-x { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--cream); font-size: 26px; line-height: 1; }
.ap-dlg h3 { margin: 6px 52px 12px 0; font-size: 26px; letter-spacing: -.02em; }
.ap-dlg-kicker { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; padding-right: 52px; }
.ap-chip { padding: 4px 10px; border-radius: 999px; background: var(--c); color: var(--ci); font-size: 13.5px; font-weight: 800; }
.ap-st { padding: 4px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 800; background: var(--cream); color: var(--text-2); }
.ap-st.ok { background: var(--salvia); color: var(--salvia-ink); }
.ap-st.wait { background: #F7EDC6; color: #6B520F; }
.ap-st.now { background: #F8E1DD; color: #8E3A2C; }
.ap-st.sim { background: #fff; border: 1.5px dashed var(--text); color: var(--text); }
.ap-dl { margin: 0; display: grid; }
.ap-dl div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.ap-dl dt { color: var(--text-2); }
.ap-dl dd { margin: 0; font-weight: 700; text-align: right; }
.ap-dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ap-demo-note { margin: 14px 0 0; font-size: 14.5px; color: var(--text-2); }
.ap-form { display: grid; gap: 12px; }
.ap-form label { display: grid; gap: 6px; font-size: 15.5px; font-weight: 800; min-width: 0; }
.ap-form input, .ap-form select { width: 100%; min-height: 48px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff; padding: 10px 12px; font: 600 16.5px/1.2 var(--font); color: var(--text); }
.ap-form input:focus, .ap-form select:focus { outline: 3px solid var(--terra); outline-offset: 0; border-color: transparent; }
.ap-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ap-check { display: grid; gap: 6px; }
.ap-issue { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 15.5px; font-weight: 600; }
.ap-issue.block { background: #F8E1DD; color: #842C1F; }
.ap-issue.warn { background: #F7EDC6; color: #5F4A0E; }
.ap-issue.fine { background: var(--salvia); color: var(--salvia-ink); }
.ap-auto { margin: 0; font-size: 15px; color: var(--text-2); }
.ap-rules { border-radius: 12px; background: var(--cream); padding: 0 14px; }
.ap-rules summary { min-height: 46px; display: flex; align-items: center; font-size: 15.5px; font-weight: 800; cursor: pointer; }
.ap-rules .ap-rule { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-weight: 600 !important; }
.ap-rules .ap-rule select { width: auto; min-height: 44px; }
.ap-rules p { margin: 6px 0 12px; font-size: 14.5px; color: var(--text-2); }
.ap-form button[disabled] { opacity: .55; cursor: not-allowed; }

/* la CTA commerciale si fa da parte mentre si usa l'agenda */
.cta-off .sticky-cta { transform: translateY(170%) !important; }
@media (prefers-reduced-motion: reduce) { .ap-ev, .ap-free { transition: none; } }
/* versione corta accanto al 3D: opzioni sempre raccolte */
.ap-compact .ap-opt-btn { display: inline-flex; align-items: center; }
.ap-compact .ap-opts { display: none; flex-basis: 100%; }
.ap-compact.opts-open .ap-opts { display: flex; }
.ap-compact .ap-hint { display: none; }

/* Telefono: una operatrice (o postazione) alla volta, scelta dalla fila di nomi */
.ap-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 12px 10px; scroll-snap-type: x proximity; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.ap-chips::-webkit-scrollbar { display: none; }
.ap-chips button { flex: none; scroll-snap-align: center; display: grid; gap: 1px; justify-items: start; min-height: 48px; padding: 6px 14px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; font: inherit; color: var(--text); cursor: pointer; }
.ap-chips button b { font-size: 16px; font-weight: 800; }
.ap-chips button small { font-size: 13px; font-weight: 650; color: var(--text-2); }
.ap-chips button[aria-selected="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.ap-chips button[aria-selected="true"] small { color: rgba(255, 255, 255, .78); }
@media (max-width: 640px) {
  .ap .ap-head { cursor: default; }
  .ap .ap-more { display: none; }
}
/* Safari/iPhone: menu a tendina con lo stesso aspetto di Chrome (non il grigio di sistema) */
.ap-form select, .ap select { -webkit-appearance: none; appearance: none; padding-right: 38px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23302B2B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; text-overflow: ellipsis; }