/* Stile volutamente neutro: eredita font e colori dal tema del sito. Anche i controlli
   (che i temi spesso ridefiniscono) e i titoli riprendono il carattere del widget. */
.cia-widget, .cia-widget * { font-family: inherit; }
.cia-form { display: grid; gap: 14px; max-width: 760px; }
.cia-field { display: grid; gap: 4px; }
.cia-field label { font-weight: 600; }
.cia-field input, .cia-field select, .cia-field textarea {
	width: 100%; box-sizing: border-box; padding: 9px 10px;
	font: inherit; color: inherit; background: transparent;
	border: 1px solid currentColor; border-radius: 4px;
}
.cia-field input:focus-visible, .cia-field select:focus-visible, .cia-field textarea:focus-visible,
.cia-submit:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cia-submit { justify-self: start; padding: 10px 20px; font: inherit; font-weight: 600; cursor: pointer; }
.cia-submit[disabled] { opacity: .6; cursor: progress; }
.cia-message { min-height: 1.4em; margin: 0; }
.cia-message--ok { font-weight: 600; }
.cia-message--ko { font-weight: 600; text-decoration: underline; }
/* Campo trappola: fuori schermo ma non display:none (i bot lo riempiono). */
.cia-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cia-mode { border: 0; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.cia-mode legend { font-weight: 600; padding: 0; margin-right: 6px; float: left; }
.cia-choice { white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.cia-choice input:disabled + * , .cia-choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.cia-hint { flex-basis: 100%; }
.cia-mode input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Finestra con nome ed email. */
.cia-widget .cia-dialog { width: min(92vw, 460px); max-height: 92vh; overflow: auto; padding: 22px; border: 1px solid currentColor; border-radius: 8px; box-sizing: border-box; background: Canvas; color: CanvasText; }
.cia-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.cia-dialog__form { display: grid; gap: 12px; margin: 0; }
.cia-dialog__title { margin: 0; font-size: 1.25em; }
.cia-dialog__summary { margin: 0; font-weight: 600; }
.cia-dialog__timer { margin: 0; font-variant-numeric: tabular-nums; }
.cia-dialog__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.cia-secondary { padding: 10px 16px; font: inherit; cursor: pointer; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 4px; }
.cia-secondary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cia-dialog[hidden], .cia-dialog__form[hidden], .cia-dialog__done[hidden], .cia-field[hidden] { display: none; }
.cia-editor-placeholder { padding: 16px; border: 1px dashed currentColor; }

/* ----- Calendario degli orari: settimana e mese ----- */
.cia-widget { --cia-accent: #1d4ed8; --cia-on-accent: #fff; --cia-line: color-mix(in srgb, currentColor 28%, transparent);
	--cia-high-bg: #d4efdc; --cia-high-fg: #14532d; --cia-mid-bg: #fbeebb; --cia-mid-fg: #6b3d06;
	--cia-low-bg: #fcd9c2; --cia-low-fg: #7c2d12; --cia-off-bg: color-mix(in srgb, currentColor 8%, transparent); }
.cia-cal { display: grid; gap: 12px; }
.cia-cal__bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.cia-seg { display: inline-flex; border: 1px solid var(--cia-line); border-radius: 8px; overflow: hidden; }
.cia-seg__btn, .cia-nav__btn, .cia-nav__today, .cia-slot, .cia-day { font: inherit; color: inherit; cursor: pointer; }
.cia-seg__btn { padding: 8px 16px; background: transparent; border: 0; }
.cia-seg__btn[aria-pressed="true"] { background: var(--cia-accent); color: var(--cia-on-accent); font-weight: 600; }
.cia-nav { display: flex; align-items: center; gap: 8px; }
.cia-nav__label { min-width: 11em; text-align: center; text-transform: capitalize; font-variant-numeric: tabular-nums; }
.cia-nav__btn, .cia-nav__today { min-width: 40px; height: 40px; padding: 0 12px; background: transparent; border: 1px solid var(--cia-line); border-radius: 8px; }
.cia-nav__btn { font-size: 1.4em; line-height: 1; padding: 0; }
.cia-nav__btn[disabled] { opacity: .35; cursor: not-allowed; }
.cia-seg__btn:focus-visible, .cia-nav__btn:focus-visible, .cia-nav__today:focus-visible,
.cia-slot:focus-visible, .cia-day:focus-visible { outline: 2px solid var(--cia-accent); outline-offset: 2px; }

.cia-grid[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
.cia-grid > .cia-empty { grid-column: 1 / -1; }
.cia-empty { margin: 0; padding: 18px 12px; text-align: center; border: 1px dashed var(--cia-line); border-radius: 8px; }

/* Settimana: una colonna per giorno, gli orari sono bottoni. */
.cia-grid--week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cia-col { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--cia-line); border-radius: 8px; min-width: 0; }
.cia-col--today { border-color: var(--cia-accent); box-shadow: 0 0 0 1px var(--cia-accent); }
.cia-col--empty { background: var(--cia-off-bg); border-style: dashed; }
.cia-col__head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cia-col__dow { text-transform: uppercase; font-size: .75em; letter-spacing: .06em; opacity: .75; }
.cia-col__num { font-size: 1.35em; font-weight: 700; line-height: 1.1; }
.cia-col__free { font-size: .75em; font-weight: 600; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.cia-col__none { text-align: center; opacity: .5; }
.cia-col__slots { display: grid; gap: 6px; }
.cia-col__slots--row { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
.cia-slot { min-height: 38px; padding: 4px 6px; background: transparent; border: 1px solid var(--cia-line); border-radius: 6px; font-variant-numeric: tabular-nums; }
.cia-slot:hover { border-color: var(--cia-accent); }
.cia-slot[aria-pressed="true"] { background: var(--cia-accent); border-color: var(--cia-accent); color: var(--cia-on-accent); font-weight: 700; }

/* Mese: ogni giorno è colorato in base alla percentuale di orari liberi. */
.cia-grid--month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cia-dow { text-align: center; text-transform: uppercase; font-size: .75em; letter-spacing: .06em; opacity: .75; padding-bottom: 2px; }
.cia-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 66px; padding: 6px 2px; border: 1px solid transparent; border-radius: 8px; background: transparent; }
.cia-day__num { font-size: .8em; opacity: .85; align-self: flex-start; margin-left: 6px; }
.cia-day__pct { font-size: 1.15em; font-weight: 700; font-variant-numeric: tabular-nums; }
.cia-day__sub { font-size: .7em; }
.cia-day--off { background: var(--cia-off-bg); cursor: default; opacity: .55; }
.cia-day--out { opacity: .25; }
.cia-day--today { box-shadow: inset 0 0 0 2px var(--cia-accent); }
.cia-day[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--cia-accent); }
.cia-day[disabled] { cursor: default; }

.cia-lv--high { background: var(--cia-high-bg); color: var(--cia-high-fg); }
.cia-lv--mid { background: var(--cia-mid-bg); color: var(--cia-mid-fg); }
.cia-lv--low { background: var(--cia-low-bg); color: var(--cia-low-fg); }
.cia-lv--full { background: var(--cia-off-bg); color: inherit; opacity: .75; }
.cia-day.cia-lv--high:hover, .cia-day.cia-lv--mid:hover, .cia-day.cia-lv--low:hover { border-color: currentColor; }

.cia-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: .85em; }
.cia-legend[hidden] { display: none; }
.cia-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; border: 1px solid var(--cia-line); }
.cia-dot--high { background: var(--cia-high-bg); } .cia-dot--mid { background: var(--cia-mid-bg); }
.cia-dot--low { background: var(--cia-low-bg); } .cia-dot--full { background: var(--cia-off-bg); }
.cia-daypanel { padding: 12px; border: 1px solid var(--cia-line); border-radius: 8px; display: grid; gap: 10px; }
.cia-daypanel[hidden] { display: none; }
.cia-daypanel__title { margin: 0; font-size: 1em; }
.cia-hint--block { display: block; margin: 0; }
.cia-picked { margin: 0; font-weight: 600; min-height: 1.4em; }
.cia-submit[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 680px) {
	/* Telefono: la settimana diventa un elenco di giorni, gli orari vanno a capo. */
	.cia-grid--week { grid-template-columns: 1fr; }
	.cia-col { flex-direction: row; align-items: flex-start; gap: 12px; }
	.cia-col__head { min-width: 64px; }
	.cia-col__slots { flex: 1; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
	.cia-col__none { align-self: center; }
	.cia-col--empty { display: none; }
	.cia-nav { width: 100%; justify-content: space-between; }
	.cia-nav__label { min-width: 0; flex: 1; }
	.cia-day { min-height: 54px; }
	.cia-day__sub { display: none; }
	.cia-day__num { align-self: center; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .cia-grid[aria-busy="true"] { transition: none; } }