/* Richieste: il pannello della richiesta nuova (sale dal basso, sopra il calendario) e i pezzi
   che usa il calendario. Nel pannello tutto in maiuscolo, tranne il testo di esempio delle note. */

.r-velo { position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, .3); animation: r-velo .3s ease both; }
.r-velo.via { animation: r-velo-via .28s ease both; }
@keyframes r-velo { from { opacity: 0; } }
@keyframes r-velo-via { to { opacity: 0; } }
.r-foglio {
  position: fixed; z-index: 26; left: 0; right: 0; bottom: 0; margin-inline: auto; width: 100%; max-width: 560px;
  background: var(--bg); color: var(--ink); border-radius: 22px 22px 0 0;
  padding: 6px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  text-transform: uppercase; animation: r-sale .38s var(--spring) both; transition: transform .3s var(--spring);
  /* col telefono in orizzontale non ci sta: non esce dallo schermo, scorre (7/10/2026) */
  max-height: calc(100svh - env(safe-area-inset-top, 0px) - 8px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.r-foglio::-webkit-scrollbar { display: none; }
.r-foglio.via { animation: r-scende .28s ease-in both; }
@keyframes r-sale { from { transform: translateY(100%); } }
@keyframes r-scende { to { transform: translateY(100%); } }
.r-testa { padding-bottom: 12px; touch-action: none; }
.r-maniglia { display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--line); margin: 2px auto 10px; }
.r-titolo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.r-titolo h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.r-chiudi { width: 34px; height: 34px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; flex: none; }
.r-chiudi svg { width: 16px; height: 16px; }
.r-data { margin: 3px 0 0; font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
/* Il corpo ha sempre l'altezza del caso piu' alto (ferie con "piu' di un giorno" + motivazione):
   il pannello non cambia misura cambiando tipo o mettendo la spunta. */
.r-corpo { margin-top: 18px; display: flex; flex-direction: column; gap: 20px; } /* l'altezza segue il contenuto: il pannello cresce e cala scivolando (morbido() in richieste.js) */
.r-blocco, .r-gruppo { display: flex; flex-direction: column; gap: 8px; }

.r-sez { margin: 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .05em; }

/* l'elenco di tutte le richieste (dalla busta in alto): pagina intera */
.ric {
  position: fixed; inset: 0; z-index: 20; background: var(--bg); color: var(--ink);
  /* in alto lo stesso margine del calendario: il titolo RICHIESTE sta alla stessa altezza del mese */
  padding: calc(env(safe-area-inset-top, 0px) + 4px) calc(env(safe-area-inset-right, 0px) + 16px) 0 calc(env(safe-area-inset-left, 0px) + 16px);
  display: flex; flex-direction: column; animation: r-entra .35s var(--spring);
}
@keyframes r-entra { from { opacity: 0; transform: translateY(14px); } }
.ric > * { width: 100%; max-width: 560px; margin-inline: auto; }
.r-top { flex: none; display: flex; align-items: center; justify-content: space-between; height: 40px; }
.r-top h1 { margin: 0; line-height: 1; white-space: nowrap; font-size: clamp(20px, 5.8vw, 30px); /* come il mese */ font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
@media (display-mode: browser) and (orientation: portrait) { .ric { padding-top: calc(env(safe-area-inset-top, 0px) + 30px); } }
@media (orientation: landscape) and (min-width: 560px) { .ric { padding-top: calc(env(safe-area-inset-top, 0px) + 28px); } .r-top h1 { font-size: 40px; } }
@media (orientation: landscape) and (min-width: 560px) and (max-height: 560px) { .ric { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); } .r-top h1 { font-size: clamp(20px, 5.8vmin, 30px); } }
.r-filtro { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; margin: 12px auto 10px; border-radius: 12px; background: var(--fill); } /* auto: resta centrato come l elenco quando lo schermo e largo */
.r-filtro button { height: 34px; border-radius: 9px; font-size: 13px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; transition: background-color .2s, box-shadow .2s; }
.r-filtro button[aria-pressed="true"] { background: var(--surface); }
.r-scorre { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
.r-scorre::-webkit-scrollbar { display: none; }
.r-scorre .r-sez { margin: 18px 4px 6px; text-transform: uppercase; }
.r-lista { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.r-vuoto { margin: 18px 4px; color: var(--muted); font-size: 15px; display: flex; gap: 8px; align-items: center; }

/* una richiesta: cerchietto (nero se e' la mia), nome, simbolo, cosa */
.r-riga { display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-height: 44px; }
.r-riga + .r-riga { border-top: 1px solid var(--line); }
.r-ico { width: 38px; height: 30px; flex: none; display: grid; place-items: center; } /* il simbolo della richiesta, dove prima c'era il cerchietto con le iniziali */
.r-ico svg { width: 21px; height: 21px; }
.r-ico .r-tag { height: 22px; padding: 0 6px; font-size: 10.5px; vertical-align: 0; }
.r-cosa { text-transform: uppercase; letter-spacing: .02em; } /* tutto in maiuscolo tranne il nome (7/10/2026) */
.r-ok { flex: none; width: 22px; height: 22px; display: grid; } /* spunta verde: gia' approvata o comunicata sul sito */
.r-ok svg { width: 100%; height: 100%; }
.r-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--fill); font-size: 11px; font-weight: 650; letter-spacing: .02em; }
.r-av.me { background: var(--ink); color: var(--bg); }
.r-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* 9/10/2026: una riga per cosa (nome e data, cosa vuole, motivazione), caratteri un po' piu' piccoli */
.r-testa-riga { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.r-chi { font-size: 13.5px; font-weight: 650; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-cosa { display: flex; align-items: flex-start; gap: 6px; min-width: 0; font-size: 12.5px; line-height: 18px; color: var(--ink); }
.r-nota { font-size: 12px; line-height: 16px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.r-cosa > span:last-child { min-width: 0; overflow-wrap: anywhere; } /* se non ci sta va a capo: la riga si allunga quanto serve */
.r-cosa .r-sim { margin-top: 2.5px; }
.r-err { font-size: 13px; color: var(--danger); }
.r-cosa small { font-size: 13px; color: var(--muted); }
.r-quando { flex: none; font-size: 11.5px; color: var(--muted); } /* quando e' stata fatta, accanto al nome (9/10/2026) */
.r-sim { flex: none; width: 15px; height: 15px; display: grid; color: var(--ink); }
.r-sim svg { width: 100%; height: 100%; }
.r-tag { display: inline-grid; place-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--sbg); color: var(--sfg); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; vertical-align: 1px; }
.r-via { flex: none; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; background: var(--fill); color: var(--muted);
  font-size: 13px; font-weight: 700; transition: background-color .2s, color .2s; }
.r-via svg { width: 12px; height: 12px; }
.r-via.conferma { background: var(--danger); color: #fff; padding: 0 12px; }
.r-via .giro { width: 14px; height: 14px; }

/* richiesta nuova */
.r-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* quattro tipi dal 7/10/2026 (+ malattia) */ gap: 3px; padding: 3px; border-radius: 13px; background: var(--fill); }
.r-seg button { height: 76px; padding: 13px 4px 6px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; /* icone e prima riga allineate */
  font-size: 11.5px; font-weight: 750; letter-spacing: .03em; line-height: 1.15; text-transform: uppercase; transition: background-color .2s, box-shadow .2s; }
.r-seg button[aria-pressed="true"] { background: var(--surface); }
.r-segi { width: 22px; height: 22px; display: grid; flex: none; }
.r-segi svg { width: 100%; height: 100%; }
.r-campo { display: block; background: var(--surface); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); text-transform: none; }
.r-campo textarea, .r-voce input { display: block; width: 100%; border: 0; padding: 0; background: none; color: var(--ink); font: 400 17px var(--sans); outline: none; resize: none; -webkit-appearance: none; appearance: none; text-transform: none; }
.r-campo textarea::placeholder { color: var(--muted); opacity: .7; }
.r-due { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* fare / non fare e i turni (7/10/2026): niente piu' sbiaditi (sembravano spenti). Da scegliere:
   fare / non fare bianchi col bordino, i turni bianchi con la sigla colorata (senza bordino);
   scelto: fare / non fare col bordo nero, il turno pieno del suo colore. */
.r-due button { height: 48px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; transition: box-shadow .2s, transform .15s var(--spring); }
.r-due button svg { width: 17px; height: 17px; flex: none; }
.r-due button[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--ink); }
.r-due button:active { transform: scale(.97); }
.r-turni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.r-turni button { height: 50px; border-radius: 12px; background: var(--surface); color: var(--sbg); font-size: 14px; font-weight: 800; letter-spacing: .04em; transition: background-color .2s, color .2s, transform .15s var(--spring); }
.r-turni button[aria-pressed="true"] { background: var(--sbg); color: var(--sfg); }
.r-turni button:active { transform: scale(.95); }
.r-voce { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow);
  font-size: 15px; font-weight: 650; letter-spacing: .02em; text-align: left; text-transform: uppercase; }
.r-voce input { width: auto; text-align: right; color: var(--ink); }
.r-spunta { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line); }
.r-spunta.su { background: var(--ink); color: var(--bg); box-shadow: none; }
.r-spunta svg { width: 16px; height: 16px; }
.r-deciso { margin: -2px 4px 0; font-size: 14px; color: var(--danger); text-transform: none; }
.r-errore { margin: -8px 4px -8px; font-size: 14px; color: var(--danger); text-transform: none; }
.r-grande { margin-top: 18px; width: 100%; height: 52px; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .15s var(--spring), opacity .2s; }
.r-grande:active { transform: scale(.98); }
.r-grande[disabled] { opacity: .3; }


/* ── nel calendario ── */
/* la busta, col pallino rosso del responsabile */
.busta { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--ink); flex: none; }
.busta svg { width: 18px; height: 18px; }
.busta .pall { position: absolute; top: -4px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: #FF3B30; color: #fff;
  font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
/* la busta sulle caselle future senza turno comunicato: scura se c'e' una mia richiesta,
   sbiadita se ci sono solo quelle dei colleghi */
.cell .cbusta { position: absolute; top: 7.5px; right: 6px; /* +2 px dal bordo (7/10/2026) */ width: 16px; height: 16px; } /* centrata sul numero del giorno */
.cell .cbusta.altrui { opacity: .4; }
/* sulle caselle colorate (un mio turno gia' comunicato in un giorno non ancora programmato) il fumetto e'
   bianco coi puntini del colore del turno, se no blu su blu non si vedrebbe */
.cell.t-mat .cbusta path, .cell.t-pom .cbusta path, .cell.t-int .cbusta path, .cell.t-ser .cbusta path { fill: #fff; }
.cell.t-mat .cbusta circle, .cell.t-pom .cbusta circle, .cell.t-int .cbusta circle, .cell.t-ser .cbusta circle { fill: var(--sbg); }
.cell.out .cbusta { display: none; }
/* giornata senza turni comunicati: senza richieste attive, solo la scritta */
.team.vuoto { min-height: 200px; display: grid; place-items: center; }
.team.vuoto > p { margin: 0; color: var(--muted); font-size: 15px; font-weight: 600; }
/* le richieste di tutti per quel giorno, nello stesso riquadro della tabella dei turni (stessa
   misura, stesso posto): se sono tante scorre e sfuma in fondo */
.team.rich { height: 200px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.team.rich::-webkit-scrollbar { display: none; }
/* in cima alla pagina richieste: chi ha gia' un turno o un'assenza comunicati quel giorno */
.r-gia { padding: 14px 12px 10px; } /* senza titoli (7/10/2026): le pillole in alto, sotto le richieste */ /* niente linea tra le due sezioni: le separano i titoli e l'aria (proposta A, 7/10/2026) */
.r-tit { padding: 10px 12px 0; }
.r-gia + .r-tit { padding-top: 8px; }
.r-gia-t, .r-tit { display: block; font-size: 11px; font-weight: 750; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.r-gia-t { margin-bottom: 10px; }
.r-gia-p { display: flex; flex-wrap: wrap; gap: 8px; }
.r-gia .p { padding: 0 12px 0 4px; gap: 6px; } /* stessa misura delle pillole dei turni */
.r-gia .tag { width: auto; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 10.5px; }
.team.rich.con-gia .r-niente { height: auto; padding: 18px 0; }
.r-niente { margin: 0; height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 14.5px; font-weight: 600; }
/* tablet in verticale: il fumetto alla stessa altezza del numero del giorno (7/10/2026) */
@media (orientation: portrait) and (min-width: 700px) {
  .cell .cbusta { top: 12.5px; right: 9px; width: 19px; height: 19px; }
}
@media (orientation: landscape) and (min-width: 560px) {
  .cell .cbusta { top: 12.5px; right: 9px; width: 19px; height: 19px; }
  .team.rich { height: 320px; } /* come la tabella dei turni su tablet e in orizzontale */
}
@media (orientation: landscape) and (min-width: 560px) and (max-height: 560px) {
  .cell .cbusta { top: 5px; right: 5px; width: 14px; height: 14px; }
  .team.vuoto { min-height: 160px; }
  .team.rich { height: 236px; }
}

/* conferma prima di eliminare una richiesta (7/10/2026): riquadro al centro, Annulla ed Elimina in rosso */
.r-conf-velo { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .3); animation: r-velo .2s ease both; }
.r-conf {
  position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(300px, calc(100vw - 48px));
  background: var(--surface); color: var(--ink); border-radius: 18px; padding: 20px 16px 14px; text-align: center;
  animation: r-conf-apre .22s cubic-bezier(.25, .8, .3, 1) both;
}
@keyframes r-conf-apre { from { opacity: 0; transform: translate(-50%, -50%) scale(1.08); } }
.r-conf p { margin: 0 4px 18px; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.r-conf-tasti { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.r-conf-tasti button { height: 44px; border-radius: 12px; background: var(--fill); font-size: 15px; font-weight: 700; }
.r-conf-tasti button.rosso { background: var(--danger); color: #fff; }

/* tablet in verticale: il titolo RICHIESTE alto e grande come il mese (7/10/2026) */
@media (orientation: portrait) and (min-width: 700px) {
  .ric { padding-top: calc(env(safe-area-inset-top, 0px) + 20px); }
  .r-top h1 { font-size: 40px; }
}
@media (orientation: portrait) and (max-width: 380px) {
  .cell .cbusta { width: 14px; height: 14px; top: 8.5px; right: 5px; }
}
@media (orientation: landscape) and (max-width: 700px) and (max-height: 560px) {
  .cell .cbusta { width: 11px; height: 11px; top: 6.5px; right: 5px; }
  .cell .ico { width: 11px; height: 11px; top: 6.5px; right: 5px; }
}


/* schermi grandi: la richiesta nuova e' una finestra al centro, non un foglio che sale dal basso (9/10/2026) */
@media (min-width: 700px) and (min-height: 600px) {
  .r-foglio { top: 50%; bottom: auto !important; left: 50%; right: auto; width: min(480px, calc(100vw - 64px)); max-height: min(720px, calc(100vh - 64px));
    border-radius: 22px; padding: 18px 20px 20px; transform: translate(-50%, -50%); animation: r-appare .26s var(--spring) both; }
  .r-foglio.via { animation: r-sparisce .18s ease-in both; }
  .r-foglio .r-maniglia { display: none; }
}
@keyframes r-appare { from { opacity: 0; transform: translate(-50%, -50%) scale(.94); } }
@keyframes r-sparisce { to { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }