/* ==========================================================================
   IL TACCUINO DELL'ANTEPRIMA
   Foglio separato apposta: il taccuino e' uno strumento di lavorazione, non
   parte del sito. Quando non servira' piu' si toglie il collegamento e qui non
   resta niente da potare dentro nppk.css.
   Vale solo per chi ha superato l'accesso di /anteprima: senza il cookie
   `anteprima_chi` taccuino.js non costruisce niente e queste regole non
   incontrano mai un elemento.
   I colori sono quelli del marchio, ripresi da nppk.css.
   ========================================================================== */

.tacc-avvio{
  position:fixed; z-index:9000; left:1rem; bottom:1rem;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.05rem; border:0; border-radius:999px; cursor:pointer;
  font-family:var(--display, system-ui); font-size:.86rem; font-weight:700;
  letter-spacing:.02em; color:var(--nero, #17110d);
  background:linear-gradient(180deg, var(--ambra, #de971b), var(--fiamma, #d0681c));
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.tacc-avvio:hover{filter:brightness(1.06)}
.tacc-avvio:focus-visible{outline:3px solid #fff; outline-offset:2px}
.tacc-avvio--attivo{background:var(--nero, #17110d); color:#fff}
.tacc-avvio__ico{font-size:1.05rem; line-height:1}
.tacc-conto{
  min-width:1.35rem; padding:.05rem .3rem; border-radius:999px;
  background:rgba(0,0,0,.28); color:#fff; font-size:.76rem; text-align:center;
}
.tacc-avvio--attivo .tacc-conto{background:rgba(255,255,255,.22)}

/* Sotto gli 820px c'e' gia' la barra di chiamata incollata in fondo: il
   taccuino sale sopra di lei invece di coprirla. */
@media (max-width:820px){
  .tacc-avvio{bottom:4.6rem; padding:.62rem .9rem; font-size:.8rem}
}

/* --- puntamento ----------------------------------------------------------- */

body.tacc-punta, body.tacc-punta *{cursor:crosshair !important}
body.tacc-punta{user-select:none}

.tacc-mirino{
  position:absolute; z-index:8990; pointer-events:none;
  border:2px solid var(--fiamma, #d0681c); border-radius:6px;
  background:rgba(208,104,28,.12);
  transition:top .06s linear, left .06s linear, width .06s linear, height .06s linear;
}
.tacc-guida{
  position:fixed; z-index:9001; left:50%; top:1rem; transform:translateX(-50%);
  padding:.55rem 1rem; border-radius:999px;
  background:var(--nero, #17110d); color:#fff;
  font-size:.84rem; box-shadow:0 6px 18px rgba(0,0,0,.3);
}

/* --- il foglio ------------------------------------------------------------ */

body.tacc-fermo{overflow:hidden}

.tacc-velo{
  position:fixed; z-index:9100; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
  padding:1rem; background:rgba(10,7,5,.62);
}
@media (min-width:700px){ .tacc-velo{align-items:center} }

.tacc-foglio{
  width:min(37rem, 100%); max-height:min(86vh, 44rem); overflow:auto;
  padding:1.5rem 1.5rem 1.25rem; border-radius:16px;
  background:#fff; color:var(--testo-scuro, #241a13);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  font-family:var(--testo, system-ui); font-size:.95rem; line-height:1.5;
}
.tacc-dove{
  margin:0 0 .2rem; font-family:var(--display, system-ui); font-size:.76rem;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fiamma, #d0681c);
}
.tacc-foglio h2{
  margin:0 0 .9rem; font-family:var(--display, system-ui);
  font-size:1.32rem; line-height:1.2;
}
.tacc-citazione{
  margin:0 0 1.1rem; padding:.6rem .85rem;
  border-left:3px solid var(--ambra, #de971b); border-radius:0 8px 8px 0;
  background:var(--panna, #f6f1e9); font-size:.88rem; color:#4a3a2e;
}

.tacc-tipi{margin:0 0 1.1rem; padding:0; border:0}
.tacc-tipi legend{
  padding:0 0 .5rem; font-weight:700; font-size:.9rem;
}
.tacc-tipo{
  display:grid; grid-template-columns:auto 1fr; gap:.15rem .6rem;
  align-items:start; padding:.5rem .7rem; margin-bottom:.35rem;
  border:1px solid #e3dbd0; border-radius:10px; cursor:pointer;
}
.tacc-tipo:hover{border-color:var(--ambra, #de971b); background:#fffaf2}
.tacc-tipo input{grid-row:1 / span 2; margin-top:.25rem; accent-color:var(--fiamma, #d0681c)}
.tacc-tipo b{font-size:.92rem}
.tacc-tipo span{font-size:.82rem; color:#6b5a4c}
.tacc-tipo:has(input:checked){border-color:var(--fiamma, #d0681c); background:#fff6ec}

.tacc-campo{display:block; margin:0 0 1rem}
.tacc-campo > span{display:block; margin-bottom:.35rem; font-weight:700; font-size:.9rem}
.tacc-campo textarea{
  width:100%; padding:.6rem .7rem; border:1px solid #cfc4b6; border-radius:10px;
  font:inherit; resize:vertical; background:#fff; color:inherit;
}
.tacc-campo textarea:focus{
  outline:0; border-color:var(--fiamma, #d0681c);
  box-shadow:0 0 0 3px rgba(208,104,28,.18);
}

/* Il piede: errori E pulsanti insieme, incollati in fondo al foglio.
   Due difetti veri, tutti e due del 27/08 sera:
   (1) con cinque scelte piu' due campi il pulsante finiva sotto la piega su uno
       schermo da 1000px, e un pulsante che non si vede non si preme;
   (2) poi l'errore e' finito SOPRA la parte incollata, cioe' fuori dallo
       schermo: il server rifiutava, il modulo restava aperto e chi premeva non
       leggeva da nessuna parte il perche'. Otto tentativi di fila.
   Stanno insieme perche' il messaggio deve stare dove sta il pulsante che lo
   ha provocato. */
.tacc-piede{
  position:sticky; bottom:-1.25rem; z-index:1;
  margin:0 -1.5rem -1.25rem; padding:.85rem 1.5rem 1.1rem;
  background:#fff; border-top:1px solid #ece5db;
}
.tacc-errori{
  margin:0 0 .7rem; padding:.6rem .8rem; border-radius:10px;
  background:#fdecea; border:1px solid #f0b8b1; color:#8d2318; font-size:.88rem;
}
.tacc-errori p{margin:.1rem 0}

.tacc-azioni{display:flex; gap:.6rem; flex-wrap:wrap}

/* Il campo che ha fatto fallire il salvataggio si segna, e taccuino.js ci porta
   sopra il cursore: dire «c'e' un errore» senza dire dove non serve a niente. */
.tacc-campo textarea.tacc-sbagliato{
  border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.16);
}
.tacc-btn{
  padding:.65rem 1.15rem; border-radius:999px; border:1px solid #cfc4b6;
  background:#fff; color:inherit; cursor:pointer;
  font-family:var(--display, system-ui); font-size:.86rem; font-weight:700;
}
.tacc-btn:hover{background:var(--panna, #f6f1e9)}
.tacc-btn--primo{
  border-color:transparent; color:var(--nero, #17110d);
  background:linear-gradient(180deg, var(--ambra, #de971b), var(--fiamma, #d0681c));
}
.tacc-btn[disabled]{opacity:.6; cursor:default}

/* Annulla al primo colpo non butta via niente: avverte e cambia faccia, cosi'
   il secondo colpo e' una scelta e non l'inerzia del dito. Sta appiccicato a
   «Salva la nota», ed e' il pulsante sbagliato da premere per sbaglio. */
.tacc-btn--attenzione{
  border-color:#c0392b; background:#fdecea; color:#8d2318;
}
.tacc-btn--attenzione:hover{background:#fbdbd7}

/* --- conferma ------------------------------------------------------------- */

.tacc-fatto{
  position:fixed; z-index:9200; left:1rem; bottom:5rem;
  display:grid; gap:.15rem; max-width:min(22rem, calc(100vw - 2rem));
  padding:.8rem 1rem; border-radius:12px;
  background:var(--nero, #17110d); color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  font-size:.86rem; line-height:1.4;
  transition:opacity .6s ease, transform .6s ease;
}
.tacc-fatto b{font-size:.95rem; color:var(--ambra, #de971b)}
.tacc-fatto--via{opacity:0; transform:translateY(8px)}
@media (max-width:820px){ .tacc-fatto{bottom:8.4rem} }

@media (prefers-reduced-motion:reduce){
  .tacc-mirino, .tacc-fatto{transition:none}
}

/* ==========================================================================
   IL MENU E GLI ELENCHI  (il taccuino a due vie, 17/09/2026, TASK-026)
   Il pulsante non apre piu' il puntamento, apre un menu con quattro voci.
   Sta sopra il pulsante e non al centro dello schermo di proposito: aprire
   un menu non deve coprire la pagina che si sta guardando.
   ========================================================================== */

.tacc-menu{
  position:fixed; z-index:9001; left:1rem; bottom:4.4rem;
  display:flex; flex-direction:column; min-width:16rem; max-width:calc(100vw - 2rem);
  padding:.35rem; border-radius:14px; background:#fff;
  box-shadow:0 14px 38px rgba(0,0,0,.3);
  font-family:var(--testo, system-ui);
}
.tacc-menu__voce{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:.1rem .6rem;
  padding:.6rem .7rem; border:0; border-radius:10px; background:none;
  text-align:left; cursor:pointer; color:var(--testo-scuro, #241a13);
}
.tacc-menu__voce:hover{background:var(--panna, #f6f1e9)}
.tacc-menu__voce:focus-visible{outline:3px solid var(--fiamma, #d0681c); outline-offset:-2px}
/* Le tre celle vanno messe a mano: lasciate all'automatismo, il numero finiva
   nella prima colonna e spingeva l'etichetta a destra. */
.tacc-menu__eti{grid-column:1; grid-row:1; font-family:var(--display, system-ui); font-weight:700; font-size:.95rem}
.tacc-menu__spiega{grid-column:1; grid-row:2; font-size:.8rem; color:#6b5a4c; line-height:1.35}
/* Il numero si mostra anche a zero: «0 da rivedere» dice che si e' guardato,
   la sua assenza no. */
.tacc-menu__n{
  grid-column:2; grid-row:1 / span 2; justify-self:end; align-self:center;
  min-width:1.9rem; padding:.16rem .45rem; border-radius:999px;
  background:var(--panna, #f6f1e9); color:#6b5a4c;
  font-family:var(--display, system-ui); font-weight:700; font-size:.82rem; text-align:center;
}
/* Solo «da rivedere» si accende, ed e' l'unico gruppo che chiede un suo gesto. */
.tacc-menu__n--sveglia{
  background:linear-gradient(180deg, var(--ambra, #de971b), var(--fiamma, #d0681c));
  color:var(--nero, #17110d);
}

/* --- gli elenchi dentro il foglio ----------------------------------------- */

.tacc-elenco{display:flex; flex-direction:column; gap:.8rem; max-height:58vh; overflow-y:auto; margin-bottom:.9rem}
.tacc-attesa, .tacc-vuoto{margin:.6rem 0; color:#6b5a4c; font-size:.9rem}

.tacc-riga{padding:.75rem .85rem; border:1px solid #e7ded2; border-radius:12px; background:#fff}
/* Una nota annullata resta e si vede: barrata, non sparita. Il 17/09 la
   cronologia delle note ha chiarito due letture che una cancellazione vera
   avrebbe portato via con se'. */
.tacc-riga--ritirata{opacity:.62}
.tacc-riga--ritirata .tacc-riga__tuo{text-decoration:line-through}

.tacc-riga__dove{margin:0 0 .35rem; font-family:var(--display, system-ui);
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fiamma, #d0681c)}
.tacc-riga__tuo{margin:.35rem 0; font-size:.9rem; white-space:pre-wrap}
.tacc-riga__prop{margin:.3rem 0; font-size:.88rem; color:#4a3a2e; white-space:pre-wrap}
.tacc-riga__nota{margin:.4rem 0 0; font-size:.83rem; color:#6b5a4c; font-style:italic}
.tacc-riga__domanda{
  margin:.5rem 0 0; padding:.5rem .6rem; border-radius:8px;
  background:#fff6e6; border-left:3px solid var(--ambra, #de971b);
  font-size:.87rem; color:#4a3a2e; white-space:pre-wrap;
}
.tacc-riga__esito{
  margin:.5rem 0 0; padding:.5rem .6rem; border-radius:8px;
  background:#eef6ee; border-left:3px solid #4a7a4a;
  font-size:.87rem; color:#2f4a2f; white-space:pre-wrap;
}
.tacc-riga__azioni{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.65rem}

.tacc-btn--min{padding:.4rem .7rem; font-size:.82rem}
.tacc-btn--rischio{color:#8a2b1c}

/* La riga che dice cosa e' questo strumento: il contratto (art. 15) fa
   produrre effetti solo alla posta elettronica, e lo strumento lo dichiara da
   se' invece di lasciarlo capire. */
.tacc-legale{
  margin:.9rem 0 .2rem; padding-top:.6rem; border-top:1px solid #efe6da;
  font-size:.78rem; color:#7a6a5c; line-height:1.4;
}

@media (max-width:560px){
  .tacc-menu{left:.6rem; right:.6rem; bottom:4rem; min-width:0}
  .tacc-elenco{max-height:50vh}
}

/* --- «vai a vedere»: il riquadro che circonda la cosa di cui parla la nota ---
   Diverso dal mirino del puntamento, e non per vezzo: quello segue il dito e
   dice «stai per scegliere questo», questo resta fermo qualche secondo e dice
   «e' di questo che parlavi». Se fossero uguali, arrivando su una pagina si
   crederebbe di essere in modalita' puntamento. */
.tacc-mirino--vedi{
  border:3px solid var(--fiamma, #d0681c);
  border-radius:8px;
  box-shadow:0 0 0 9999px rgba(23,17,13,.34);
  transition:opacity .25s;
  animation:tacc-pulsa 1.1s ease-in-out 3;
}
@keyframes tacc-pulsa{
  0%,100%{border-color:var(--fiamma, #d0681c)}
  50%    {border-color:var(--ambra, #de971b)}
}
/* Chi ha chiesto meno animazioni non la vede lampeggiare: il riquadro resta,
   fermo. L'informazione non sta nel movimento. */
@media (prefers-reduced-motion:reduce){
  .tacc-mirino--vedi{animation:none}
}

/* --- la linguetta del foglio ridotto ---------------------------------------
   Premendo «Vai a vedere» il foglio non si chiude: si accuccia qui. Sta in
   basso a destra e non a sinistra perche' a sinistra c'e' gia' «Segnala», e i
   due gesti sono diversi: uno apre una cosa nuova, l'altro torna dove si era. */
.tacc-ridotto{
  position:fixed; z-index:9000; right:1rem; bottom:1rem;
  display:inline-flex; align-items:center; gap:.45rem;
  max-width:calc(100vw - 2rem);
  padding:.62rem .95rem; border:0; border-radius:999px; cursor:pointer;
  font-family:var(--display, system-ui); font-size:.82rem; font-weight:700;
  color:#fff; background:var(--nero, #17110d);
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tacc-ridotto:hover{filter:brightness(1.25)}
.tacc-ridotto:focus-visible{outline:3px solid var(--ambra, #de971b); outline-offset:2px}
.tacc-ridotto__ico{color:var(--ambra, #de971b); font-size:.7rem; line-height:1}

@media (max-width:560px){
  /* Su schermo stretto i due pulsanti si darebbero fastidio: la linguetta sale
     sopra «Segnala» invece di stargli accanto. */
  .tacc-ridotto{right:.6rem; bottom:4rem; font-size:.78rem}
}