/* ===== Agenda interattiva: ricreazione fedele della vista "Giorno" del gestionale (jckite/src/stili/agenda_pagina.css) =====
   Stessi colori, stesse misure, stessi blocchi. Qui si può trascinare una lezione e premere Autoplan. */
.ag { --ag-riga: 36px; --ag-righe: 12; --ag-da: 16; --ag-navy: #163459; --ag-navy-2: #1b4b7a; --ag-muted: #5d6e86; --ag-text-2: #2f4566; --ag-border: #d9edf6;
    --ag-warn-ink: #b45309; --ag-neg-ink: #b42318; --ag-pos-deep: #047857;
    position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px; background: #fcfcfc; color: var(--ag-navy);
    font: 400 14px/1.4 var(--sans); user-select: none; -webkit-user-select: none; }

/* fascia navy della giornata */
.ag-hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 18px; border-radius: 14px;
    background: linear-gradient(120deg, var(--ag-navy) 0%, var(--ag-navy-2) 70%, var(--lp-azzurro-ink) 100%); color: #fff; box-shadow: 0 10px 30px rgba(22, 52, 89, .22); }
.ag-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(7, 188, 231, .35), transparent 70%); pointer-events: none; }
.ag-hero > * { position: relative; z-index: 1; }
.ag-hero-date { display: flex; flex-direction: column; min-width: 0; }
.ag-hero-date small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-azzurrino); }
.ag-hero-date b { font-size: 18px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.ag-hero-chips { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; }
.ag-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14); font: inherit; font-size: 12.5px; color: #e2eef7; white-space: nowrap; }
.ag-chip b { color: #fff; font-size: 14px; font-weight: 700; }
.ag-chip svg { width: 12px; height: 12px; fill: var(--lp-azzurrino); }
.ag-chip.is-warn { background: rgba(245, 158, 11, .2); border-color: rgba(245, 158, 11, .4); }
.ag-chip.is-warn svg { fill: #fcd34d; }
.ag-chip.is-ok { background: rgba(16, 185, 129, .18); border-color: rgba(16, 185, 129, .35); }
.ag-chip.is-ok svg { fill: #6ee7b7; }
.ag-chip.is-pulse svg { animation: ag-pulse 1.4s infinite; }
@keyframes ag-pulse { 50% { opacity: .5; } }
.ag-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-hbtn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600;
    transition: background .15s, transform .05s, box-shadow .15s; }
.ag-hbtn svg { width: 15px; height: 15px; fill: currentColor; }
.ag-hbtn:hover { background: rgba(255, 255, 255, .2); }
.ag-hbtn:active { transform: translateY(1px); }
.ag-hbtn.is-primary { background: var(--lp-azzurro); border-color: var(--lp-azzurro); font-weight: 700; box-shadow: 0 6px 16px rgba(7, 188, 231, .35); }
.ag-hbtn.is-primary:hover { background: var(--lp-azzurro-hover); }
.ag-hbtn.is-primary.is-suggerito { animation: ag-anello 1.6s infinite; }
@keyframes ag-anello { 0% { box-shadow: 0 6px 16px rgba(7, 188, 231, .35), 0 0 0 0 rgba(145, 220, 245, .7); } 100% { box-shadow: 0 6px 16px rgba(7, 188, 231, .35), 0 0 0 14px rgba(145, 220, 245, 0); } }

/* vento del giorno */
.ag-meteo { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 4px; }
.ag-meteo::-webkit-scrollbar { display: none; }
.ag-meteo-h { flex: 1 0 58px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px 6px; min-width: 58px;
    border: 1px solid var(--ag-border); border-radius: 12px; background: #fff; transition: transform .15s, box-shadow .15s; }
.ag-meteo-h:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(22, 52, 89, .1); }
.ag-meteo-h small { font-size: 10.5px; font-weight: 700; color: var(--ag-muted); }
.ag-meteo-h b { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 700; line-height: 1.1; color: var(--ag-pos-deep); }
.ag-meteo-h b i { font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--ag-muted); margin-left: 1px; }
.ag-meteo-h b::before { content: "\2198"; font-size: 11px; color: var(--lp-azzurro-ink); margin-right: 1px; }
.ag-meteo-h em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--ag-warn-ink); }
.ag-meteo-h em.is-strong { color: var(--ag-neg-ink); }

/* calendario: ore a sinistra, una colonna per istruttore */
.ag-sched { position: relative; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--lp-azzurrino) transparent;
    border-top: 3px solid var(--lp-azzurro); border-radius: 12px; background: #fff;
    box-shadow: 0 1px 2px rgba(22, 52, 89, .05), 0 4px 14px rgba(22, 52, 89, .06); }
.ag-griglia { display: grid; grid-template-columns: 52px repeat(3, minmax(150px, 1fr)); min-width: 100%; }
.ag-tempi { display: grid; grid-template-rows: 56px repeat(var(--ag-righe), var(--ag-riga)); border-right: 1px solid #e9f3f8; }
.ag-tempi span { display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--ag-text-2); font-variant-numeric: tabular-nums; }
.ag-tempi span:first-child { background: #f6fbfd; }
.ag-col { position: relative; border-right: 1px solid #e9f3f8; }
.ag-col:last-child { border-right: 0; }
.ag-res { display: flex; align-items: center; justify-content: center; gap: 9px; height: 56px; padding: 4px 6px; background: #f6fbfd; border-bottom: 1px solid #e9f3f8; }
.ag-res-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c) 14%, white); color: var(--c); font-size: 12.5px; font-weight: 700; box-shadow: 0 0 0 2px var(--c); }
.ag-res-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ag-res-txt b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ag-res-txt small { font-size: 11px; font-weight: 500; color: var(--ag-muted); white-space: nowrap; }
.ag-celle { position: relative; height: calc(var(--ag-righe) * var(--ag-riga)); transition: background .2s; }
.ag-celle::before { content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(to bottom, #fff 0, #fff var(--ag-riga), #f5fbfe var(--ag-riga), #f5fbfe calc(2 * var(--ag-riga))); }
.ag-celle::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--ag-riga) - 1px), #e9f3f8 calc(var(--ag-riga) - 1px), #e9f3f8 var(--ag-riga)); }
.ag-col.is-meta .ag-celle { background: rgba(14, 165, 233, .1); }
.ag-col.is-meta .ag-celle::before { opacity: 0; }

/* blocco lezione: azzurro = programmata, tratteggiato = proposta dell'Autoplan */
.ag-ap { position: absolute; left: 3px; right: 3px; top: calc((var(--inizio) - var(--ag-da)) * var(--ag-riga) + 2px); height: calc(var(--durata) * var(--ag-riga) - 4px); z-index: 2;
    display: flex; flex-direction: column; gap: 2px; padding: 6px 9px; border-radius: 10px; overflow: hidden; color: #fff; text-align: left;
    background: var(--lp-azzurro); box-shadow: 0 2px 6px rgba(22, 52, 89, .16); cursor: grab; touch-action: none;
    transition: filter .15s, box-shadow .15s, transform .35s var(--uscita); }
.ag-ap:hover { filter: brightness(1.06); box-shadow: 0 8px 18px rgba(22, 52, 89, .22); }
/* mentre si trascina: l'originale resta sbiadito al suo posto, un clone segue il mouse sopra tutto (fuori dal riquadro
   che scorre, così non viene tagliato), un segnaposto tratteggiato mostra dove finirà (rosso se sopra un'altra lezione) */
.ag-ap.is-origine { opacity: .35; box-shadow: none; filter: none; cursor: grabbing; }
.ag-ap.is-clone { position: absolute; right: auto; z-index: 60; cursor: grabbing; pointer-events: none; transition: none;
    filter: brightness(1.06); box-shadow: 0 18px 36px rgba(22, 52, 89, .32); rotate: 1.2deg; scale: 1.03; }
.ag-ghost { position: absolute; left: 3px; right: 3px; top: calc((var(--inizio) - var(--ag-da)) * var(--ag-riga) + 2px); height: calc(var(--durata) * var(--ag-riga) - 4px);
    z-index: 1; border-radius: 10px; border: 2px dashed var(--lp-azzurro); background: rgba(7, 188, 231, .12); pointer-events: none; transition: top .1s, border-color .15s, background .15s; }
.ag-ghost.is-conflitto { border-color: #e05a4e; background: rgba(224, 90, 78, .12); }
.ag-ap.is-cambiata { animation: ag-lampo .9s ease-out; }
@keyframes ag-lampo { 0% { box-shadow: 0 2px 6px rgba(22, 52, 89, .16), 0 0 0 0 rgba(7, 188, 231, .7); } 100% { box-shadow: 0 2px 6px rgba(22, 52, 89, .16), 0 0 0 12px rgba(7, 188, 231, 0); } }
.ag-ap.is-proposta { outline: 2px dashed rgba(255, 255, 255, .9); outline-offset: -4px; }
.ag-ap.is-nuova { animation: ag-arriva .55s var(--uscita) both; }
@keyframes ag-arriva { from { transform: scale(.7); opacity: 0; } }
.ag-ap b { font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ap-time { font-size: 11.5px; font-weight: 600; opacity: .95; font-variant-numeric: tabular-nums; }
.ag-ap-sub { font-size: 10.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ap-badge { align-self: flex-start; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 10px; font-weight: 600; white-space: nowrap; }
/* il suggerimento sul blocco: un anello che respira */
.ag-ap.is-suggerita::after { content: ""; position: absolute; inset: 0; border-radius: 10px; animation: ag-anello 1.6s infinite; pointer-events: none; }

/* suggerimento guidato e messaggi */
.ag-guida { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: 12px; background: var(--lp-tenue); color: var(--ag-navy); font-size: 13.5px; }
.ag-guida-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--lp-azzurro); color: var(--lp-navy-profondo); font-size: 12px; font-weight: 700; }
.ag-guida p { margin: 0; flex: 1; }
.ag-guida b { font-weight: 600; }
.ag-guida button, .ag-guida a { flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 600; color: var(--lp-azzurro-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ag-guida.is-fine { background: var(--ag-navy); color: #fff; }
.ag-guida.is-fine .ag-guida-n { background: #6ee7b7; color: #05603a; }
.ag-guida.is-fine a, .ag-guida.is-fine button { color: var(--lp-azzurrino); }
.ag-toast { position: absolute; left: 50%; bottom: 74px; z-index: 40; translate: -50% 12px; max-width: min(92%, 440px); padding: 10px 14px; border-radius: 10px;
    background: var(--ag-navy); color: #fff; font-size: 13px; line-height: 1.4; box-shadow: 0 12px 30px rgba(22, 52, 89, .3); opacity: 0; pointer-events: none;
    transition: opacity .25s, translate .25s var(--uscita); }
.ag-toast.is-neg { background: #fef2f2; color: var(--ag-neg-ink); box-shadow: 0 12px 30px rgba(180, 35, 24, .18), inset 0 0 0 1px #fecaca; }
.ag-toast.is-visibile { opacity: 1; translate: -50% 0; }

/* finestra di scelta quando una lezione finisce sopra un'altra: stessa finestra dell'app (agenda_pagina.css .ag-modal), sopra l'agenda */
.ag-scelta { position: absolute; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; padding: 16px; border-radius: 14px;
    background: rgba(22, 52, 89, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: ag-velo .15s ease both; }
.ag-scelta.is-aperta { display: flex; }
@keyframes ag-velo { from { opacity: 0; } }
.ag-modal { width: min(480px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border-radius: 16px; background: var(--lp-perla); color: var(--ag-navy);
    box-shadow: 0 30px 70px rgba(22, 52, 89, .35); animation: ag-sale .2s var(--uscita) both; }
@keyframes ag-sale { from { transform: translateY(14px); opacity: 0; } }
.ag-modal-head { display: flex; align-items: flex-start; gap: 12px; }
.ag-modal-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-modal-head b { font-size: 15.5px; line-height: 1.3; }
.ag-modal-head small { font-size: 12.5px; color: var(--ag-muted); font-variant-numeric: tabular-nums; }
.ag-modal-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--lp-tenue); }
.ag-modal-ico svg { width: 18px; height: 18px; fill: var(--lp-azzurro-ink); }
.ag-modal-txt { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ag-text-2); }
.ag-opts { display: flex; flex-direction: column; gap: 6px; }
.ag-opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--ag-border); background: #fff;
    font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.ag-opt:hover, .ag-opt:focus-visible { border-color: var(--lp-azzurro); background: var(--lp-tenue); box-shadow: 0 0 0 3px rgba(7, 188, 231, .15); outline: none; }
.ag-opt > svg { flex: 0 0 auto; width: 18px; height: 18px; fill: var(--lp-azzurro-ink); }
.ag-opt span { display: flex; flex-direction: column; min-width: 0; }
.ag-opt b { font-size: 14px; }
.ag-opt small { font-size: 12px; color: var(--ag-muted); }
.ag-modal-foot { display: flex; justify-content: flex-end; }
.ag-btn { font: inherit; font-size: 13px; font-weight: 600; color: var(--ag-navy); background: none; border: 1.5px solid var(--ag-border); border-radius: 10px; padding: 8px 14px; cursor: pointer; transition: background .15s; }
.ag-btn:hover { background: var(--lp-tenue); }

.momento__schermata--viva { overflow: visible; background: #fcfcfc; }

/* ----- l'agenda nella hero: più compatta, con la riga di testa della pagina vera; la scena gira da sola ----- */
.ag--hero { --ag-riga: 30px; padding: 12px 14px 14px; gap: 10px; }
.ag--hero .ag-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 2px 2px 2px; }
.ag-top-titolo { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.ag-top-dx { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ag-top-data { display: flex; align-items: center; gap: 16px; padding: 5px 12px; border-radius: 9px; background: #f3f8fb; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ag-top-data span { color: var(--ag-muted); }
.ag-top-data i { display: inline-flex; margin-left: -6px; }
.ag-top-data i svg { width: 14px; height: 14px; fill: var(--lp-azzurro); }
.ag-top-viste { display: flex; align-items: center; gap: 4px; }
.ag-top-chip { padding: 4px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 600; color: var(--ag-text-2); background: #f3f8fb; }
.ag-top-chip.is-on { background: #fff; color: var(--ag-navy); box-shadow: 0 1px 3px rgba(22, 52, 89, .14); }
.ag-top-sep { width: 1px; height: 16px; background: var(--ag-border); margin: 0 4px; }
.ag--hero .ag-toast { left: 16px; right: auto; bottom: auto; top: 152px; translate: 0 10px; max-width: 420px; }
.ag--hero .ag-toast.is-visibile { translate: 0 0; }
.ag--hero.is-scena .ag-ap { cursor: grab; }
.ag--hero .ag-meteo-h { flex-basis: 52px; min-width: 52px; padding: 5px 4px 4px; }

@media (max-width: 760px) {
    .ag { --ag-riga: 32px; padding: 10px; gap: 10px; }
    .ag-modal { padding: 14px; border-radius: 14px; }
    .ag-hero { padding: 12px 14px; }
    .ag-hero-date b { font-size: 16px; }
    .ag-griglia { grid-template-columns: 44px repeat(3, 150px); }
    .ag-res-txt b { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
    .ag-guida { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .ag-ap.is-suggerita::after, .ag-hbtn.is-primary.is-suggerito, .ag-chip.is-pulse svg { animation: none; }
    .ag-ap.is-nuova, .ag-ap.is-cambiata, .ag-scelta, .ag-modal { animation: none; }
    .ag-ap, .ag-ghost { transition: none; }
}