/* Gestione Processi - regole proprie. Tailwind 2.2.19 dal CDN: niente classi JIT
   (valori arbitrari, opacita` con la barra), e solo i colori della palette classica.
   Colore del marchio: il verde acqua della versione React di Horizon (agenda.caes.it,
   --primary 174 62% 36% = #23958a), con la sua scala chiara/scura. */

[hidden] { display: none !important; }
#view-app:not([hidden]) { display: flex; }
.min-h-5 { min-height: 1.25rem; }

.etichetta { display: block; font-size: .875rem; font-weight: 500; color: #4b5563; margin-bottom: .25rem; }
.campo { width: 100%; padding: .45rem .7rem; border: 1px solid #d1d5db; border-radius: .5rem; background: #fff; outline: none; }
.campo:focus { border-color: #2fb1a4; box-shadow: 0 0 0 2px #a3e0d8; }
.campo-piccolo { padding: .3rem .5rem; font-size: .875rem; }
textarea.campo { resize: vertical; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .45rem .85rem; border-radius: .5rem;
  font-weight: 600; font-size: .875rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primario { background: #23958a; color: #fff; }
.btn-primario:hover:not(:disabled) { background: #1c7a71; }
.btn-verde { background: #15803d; color: #fff; }
.btn-verde:hover:not(:disabled) { background: #166534; }
.btn-rosso { background: #fff; color: #b91c1c; border-color: #fecaca; }
.btn-rosso:hover:not(:disabled) { background: #fef2f2; }
.btn-chiaro { background: #fff; color: #374151; border-color: #d1d5db; }
.btn-chiaro:hover:not(:disabled) { background: #f9fafb; }
.btn-piccolo { padding: .25rem .55rem; font-size: .8rem; }

.nav-voce { display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem; color: #ccefea; }
.nav-voce:hover { background: #1c7a71; color: #fff; }
.nav-voce.attiva { background: #175f58; color: #fff; box-shadow: inset 3px 0 0 #6cc9bd; }
.nav-voce i { width: 1.1rem; text-align: center; }
.nav-badge { margin-left: auto; background: #dc2626; color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .45rem; }

body.menu-aperto #sidebar { transform: translateX(0); }

.scheda { background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; }
.riga-occ { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; border-bottom: 1px solid #f3f4f6; }
.riga-occ:last-child { border-bottom: 0; }
.riga-occ:hover { background: #f9fafb; }
.pallino { width: .65rem; height: .65rem; border-radius: 999px; margin-top: .4rem; flex-shrink: 0; }

.badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; white-space: nowrap; }
.b-grigio { background: #f3f4f6; color: #4b5563; }
.b-blu { background: #ccefea; color: #1c7a71; }
.b-verde { background: #dcfce7; color: #166534; }
.b-rosso { background: #fee2e2; color: #991b1b; }
.b-giallo { background: #fef9c3; color: #854d0e; }
.b-viola { background: #ede9fe; color: #5b21b6; }

table.tabella { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.tabella th { text-align: left; font-weight: 600; color: #4b5563; background: #f9fafb; padding: .5rem .6rem; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; }
table.tabella td { padding: .5rem .6rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
table.tabella tr.cliccabile:hover td { background: #f9fafb; cursor: pointer; }

.schede-tab { display: flex; gap: .25rem; border-bottom: 1px solid #e5e7eb; overflow-x: auto; }
.schede-tab button { padding: .55rem .9rem; font-size: .875rem; font-weight: 600; color: #6b7280; border-bottom: 2px solid transparent; white-space: nowrap; }
.schede-tab button.attiva { color: #23958a; border-bottom-color: #23958a; }

.modale-sfondo { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }
.modale { background: #fff; border-radius: 1rem; width: 100%; max-width: 34rem; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modale.largo { max-width: 52rem; }
.modale-testa { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb; }
.modale-corpo { padding: 1rem 1.25rem; }
.modale-piede { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; padding: .85rem 1.25rem; border-top: 1px solid #e5e7eb; background: #f9fafb; border-radius: 0 0 1rem 1rem; }

.settimana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.giorno { background: #fff; border: 1px solid #e5e7eb; border-radius: .6rem; min-height: 8rem; }
.giorno.oggi { border-color: #2fb1a4; box-shadow: 0 0 0 1px #2fb1a4; }
.giorno-testa { font-size: .8rem; font-weight: 600; padding: .35rem .5rem; border-bottom: 1px solid #f3f4f6; color: #4b5563; }
.chip { display: block; width: 100%; text-align: left; font-size: .75rem; padding: .2rem .4rem; margin: .2rem 0; border-radius: .35rem; border-left: 3px solid; line-height: 1.25; }
.chip.da_fare { background: #e4f6f4; border-color: #2fb1a4; }
.chip.fatto { background: #f0fdf4; border-color: #16a34a; color: #166534; }
.chip.non_fatto { background: #fef2f2; border-color: #dc2626; color: #991b1b; }
.chip.saltato { background: #f3f4f6; border-color: #9ca3af; color: #6b7280; }
.legenda .chip { display: inline-block; width: auto; margin-right: .5rem; }
/* Una riga sola con i puntini: un nome lungo non allunga la colonna (il testo intero e` nel title). */
.chip-riga { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.giorno, .giorno .p-1, .chip { min-width: 0; }
@media (max-width: 900px) { .settimana { grid-template-columns: 1fr; } .giorno { min-height: 0; } }

.protocollo { white-space: pre-wrap; font-size: .875rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: .5rem; padding: .6rem .75rem; max-height: 16rem; overflow-y: auto; }
.vuoto { text-align: center; color: #9ca3af; padding: 2rem 1rem; }
.toast { background: #111827; color: #fff; padding: .6rem 1rem; border-radius: .6rem; font-size: .875rem; box-shadow: 0 8px 20px rgba(0,0,0,.2); max-width: 22rem; }
.toast.errore { background: #b91c1c; }
.toast.ok { background: #15803d; }

/* Le poche classi "blue" di Tailwind usate nelle pagine, portate sul verde acqua del marchio. */
.bg-blue-700 { background-color: #23958a; }
.bg-blue-800 { background-color: #1c7a71; }
.border-blue-700 { border-color: #23958a; }
.text-blue-50 { color: #e4f6f4; }
.text-blue-200 { color: #a3e0d8; }
.text-blue-300 { color: #6cc9bd; }
.text-blue-700 { color: #23958a; }
.text-blue-800 { color: #1c7a71; }

/* I passi di un protocollo, numerati. */
ol.passi { list-style: decimal; padding-left: 1.4rem; margin: .35rem 0; }
ol.passi li { margin: .15rem 0; }

/* Manuale, vista Sequenza: le fasi in fila, il colore (--c bordo, --s sfondo) = responsabile */
.seq-schede { display: inline-flex; border: 1px solid #d1d5db; border-radius: .5rem; overflow: hidden; }
.seq-tab { font-size: .8rem; padding: .3rem .7rem; color: #4b5563; background: #fff; }
.seq-tab + .seq-tab { border-left: 1px solid #d1d5db; }
.seq-tab.attiva { background: #23958a; color: #fff; }
.seq-fasi { display: flex; align-items: stretch; overflow-x: auto; padding-bottom: .35rem; }
.seq-fase { flex: 0 0 10.5rem; width: 10.5rem; min-width: 0; display: block; position: relative; font-size: .78rem; background: var(--s); border: 1px solid #e5e7eb;
  border-top: 4px solid var(--c); border-radius: .5rem; padding: .45rem .6rem .5rem; }
.seq-fase:hover { box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.seq-num { position: absolute; top: .3rem; right: .45rem; font-size: .7rem; font-weight: 700; color: var(--c); }
.seq-nome { padding-right: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seq-freccia { flex: 0 0 1.4rem; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: .7rem; }
.seq-ruolo { display: inline-flex; align-items: center; padding: .05rem .5rem; border-radius: .35rem; background: var(--s); border: 1px solid #e5e7eb; border-top: 3px solid var(--c); }
/* Manuale, ricerca: fasi trovate cerchiate, le altre sbiadite; la fase aperta da un link evidenziata */
.seq-trovata { box-shadow: 0 0 0 2px #f59e0b; }
.seq-spenta { opacity: .4; }
.seq-spenta:hover { opacity: 1; }
.fase-evidenza { background: #fffbeb; box-shadow: inset 4px 0 0 #f59e0b; }

/* L'occhio dei campi password (core/occhio.js) */
.occhio-box { position: relative; }
.occhio-box input { padding-right: 2.5rem; }
.occhio { position: absolute; top: 0; bottom: 0; right: 0; width: 2.5rem; display: flex; align-items: center; justify-content: center; color: #9ca3af; }
.occhio:hover { color: #374151; }

/* Prova gratuita: il campo trappola per i programmi, fuori dallo schermo */
.pv-trappola { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ORGANIGRAMMA (12/11/2026): albero a liste annidate, linee col CSS */
.org { text-align: center; min-width: max-content; }
.org ul { padding: 22px 0 0; margin: 0; position: relative; display: flex; justify-content: center; }
.org li { list-style: none; position: relative; padding: 22px 6px 0; }
.org li::before, .org li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 2px solid #94a3b8; }
.org li::after { right: auto; left: 50%; border-left: 2px solid #94a3b8; }
.org li:only-child::before, .org li:only-child::after { display: none; }
.org li:only-child { padding-top: 0; }
.org li:first-child::before, .org li:last-child::after { border: 0 none; }
.org li:last-child::before { border-right: 2px solid #94a3b8; border-radius: 0 8px 0 0; }
.org li:first-child::after { border-radius: 8px 0 0 0; }
.org ul ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 22px; border-left: 2px solid #94a3b8; }
.org > ul { padding-top: 0; gap: 24px; }
.org > ul > li { padding-top: 0; }
.org > ul > li::before, .org > ul > li::after { display: none; }
.org-card { display: inline-block; width: 150px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 8px 6px; background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06); vertical-align: top; text-align: center; }
.org-card[data-key^='p'] { cursor: pointer; }
.org-mobile { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.org-mobile:hover { border-color: #2fb1a4; }
.org-foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 4px; pointer-events: none; }
.org-foto-gr { width: 72px; height: 72px; margin: 0; }
.org-ini { background: #e0f2f1; color: #1d6f67; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.org-foto-gr.org-ini { font-size: 22px; }
.org-nome { font-weight: 600; font-size: 13px; line-height: 1.2; }
.org-funz { color: #6b7280; font-size: 11px; line-height: 1.2; margin-top: 2px; }
.org-inc { margin-top: 4px; }
.org-sig { display: inline-block; border: 1px solid #1d6f67; color: #1d6f67; border-radius: 4px; padding: 0 4px; font-size: 10px; font-weight: 700; margin: 1px; line-height: 15px; }
.org-area { width: 150px; border-width: 2px; border-color: currentColor; padding: 10px 6px; }
.org-card.b-viola { background: #ede9fe; } .org-card.b-verde { background: #dcfce7; } .org-card.b-blu { background: #ccefea; }
.org-card.b-giallo { background: #fef9c3; } .org-card.b-rosso { background: #fee2e2; } .org-card.b-grigio { background: #f3f4f6; }
.org-area-nome { font-weight: 700; font-size: 14px; line-height: 1.2; }
.org-area-cod { font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.org-area-sotto { font-size: 11px; line-height: 1.2; margin-top: 2px; opacity: .85; }
.org-sorgente { opacity: .35; }
.org-bersaglio { border-color: #2fb1a4 !important; box-shadow: 0 0 0 3px rgba(47, 177, 164, .35); background: #f0fdfa; }
.org-fantasma { position: fixed; z-index: 1000; pointer-events: none; opacity: .9; transform: rotate(2deg); box-shadow: 0 8px 20px rgba(15, 23, 42, .25); }
.org-testa { position: relative; min-height: 40px; }
.org-cima { position: absolute; inset: 0; border: 2px dashed #94a3b8; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #6b7280; font-size: 13px; background: #fff; }
.org-cima[hidden] { display: none; }