/* Accesso al Cruscotto (js/accesso.js): stessa pagina di login di Console, Dashboard e
   Spazio (sfondo del colore della barra laterale, logo, nome del portale, scheda con
   Email, Password, "Rimani collegato" e Accedi). Finché non si è entrati l'app resta nascosta. */
body.fuori #shell, body.fuori .mtop, body.fuori .mnav { display: none; }
.accesso { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--side); font-family: var(--f-body); }
.accesso[hidden] { display: none; }
.acc-wrap { width: 100%; max-width: 448px; }
.acc-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; text-align: center; }
.acc-logo { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 16px; overflow: hidden; background: var(--accent); color: #fff; }
.acc-logo img { width: 100%; height: 100%; object-fit: cover; }
.acc-logo svg { width: 30px; height: 30px; }
.acc-head h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; color: #fff; }
.acc-head p { margin: 4px 0 0; font-size: 15px; color: rgba(255, 255, 255, .7); }
.acc-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); color: var(--ink); }
.acc-card form { display: flex; flex-direction: column; gap: 20px; }
.acc-campo { display: flex; flex-direction: column; gap: 8px; }
.acc-campo label { font-size: 14px; font-weight: 500; line-height: 1; }
.acc-input { position: relative; }
.acc-input > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.acc-input svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acc-input input { box-sizing: border-box; width: 100%; height: 40px; padding: 8px 40px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.acc-input input::placeholder { color: var(--muted); }
.acc-input input:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.acc-occhio { all: unset; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; cursor: pointer; color: var(--muted); }
.acc-occhio:hover { color: var(--ink); }
.acc-occhio svg { width: 16px; height: 16px; }
.acc-ricorda { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; }
.acc-ricorda input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.acc-check { flex: none; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid var(--accent); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.acc-ricorda input:checked + .acc-check { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.acc-ricorda input:focus-visible + .acc-check { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.acc-btn { all: unset; box-sizing: border-box; width: 100%; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
.acc-btn:hover { opacity: .9; }
.acc-btn:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.acc-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acc-btn[disabled] { opacity: .5; cursor: default; }
.acc-btn.carica { font-size: 0; }
.acc-btn.carica svg { display: none; }
.acc-btn.carica::after { content: ""; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: acc-giro .7s linear infinite; }
@keyframes acc-giro { to { transform: rotate(360deg); } }
.acc-toast { position: fixed; z-index: 200; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100vw - 32px); box-sizing: border-box; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 14px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .15); }

/* Focus: con tocco e mouse nessun bordo sui pulsanti, link e voci di menu appena
   toccati. Chi usa la tastiera (Tab, classe "tastiera" su <html> da index.html)
   continua a vederlo. I campi di testo restano invariati. */
html:not(.tastiera) :is(button, a, summary, [role="button"], [role="tab"], [role="menuitem"], [role="option"], [role="checkbox"], [role="switch"], [role="radio"]):focus {
  outline: none !important;
}