/* protezione-demo/console.css — la console comune delle demo della protezione (1/11/2026). Variabili del kit (software-demo/kit.css). */
.app { flex-direction: column; overflow: auto; }
.pc-testa { display: flex; gap: 16px; align-items: center; padding: 26px clamp(16px, 4vw, 44px) 70px; color: #fff; background: radial-gradient(600px 260px at 85% 0%, rgba(255,255,255,.2), transparent), linear-gradient(135deg, var(--acc-2), var(--acc)); }
.pc-ic { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.pc-ic .msr { font-size: 32px; }
.pc-tit h1 { margin: 0; font-size: clamp(22px, 4vw, 34px); letter-spacing: -.01em; }
.pc-tit p { margin: 4px 0 0; opacity: .9; }
.pc-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; max-width: 1040px; width: 100%; margin: -46px auto 18px; padding: 0 14px; }
.pc-sx, .pc-dx { background: var(--bg-1); border-radius: 22px; box-shadow: var(--ombra-2); padding: clamp(14px, 3vw, 24px); min-width: 0; }
.pc-dx h2 { margin: 0 0 10px; font-size: 16px; }
.pc-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pc-stat div { background: var(--bg-0); border-radius: 14px; padding: 10px 12px; }
.pc-stat small { display: block; color: var(--ink-2); font-size: 12px; }
.pc-stat b { font-size: 18px; }
.pc-btn { border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 750; display: inline-flex; gap: 8px; align-items: center; color: #fff; background: linear-gradient(135deg, var(--acc), var(--acc-2)); box-shadow: 0 8px 20px rgba(0,0,0,.18); cursor: pointer; }
.pc-btn:disabled { opacity: .5; box-shadow: none; }
.pc-btn.sec { background: var(--bg-2); color: var(--ink-0); box-shadow: none; }
.pc-passi { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.pc-passi li { display: flex; gap: 8px; align-items: center; color: var(--ink-1); font-size: 14px; }
.pc-passi li .msr { animation: pc-gira 1s linear infinite; color: var(--acc); }
.pc-passi li.fatto .msr { animation: none; }
.pc-passi li.fatto .msr { color: #10b981; }
@keyframes pc-gira { to { transform: rotate(360deg); } }
.pc-voci { display: grid; gap: 8px; margin-top: 14px; }
.pc-voce { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--bg-0); border: 1px solid var(--line); animation: pc-entra .45s var(--ease) both; }
.pc-voce > .msr { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); color: var(--ink-1); }
.pc-voce b { display: block; font-size: 14.5px; }
.pc-voce small { color: var(--ink-2); font-size: 12.5px; }
.pc-eti { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.pc-eti .msr { font-size: 16px; }
.pc-v-ok .pc-eti { background: rgba(16,185,129,.14); color: #047857; }
.pc-v-att .pc-eti { background: rgba(245,158,11,.16); color: #b45309; }
.pc-v-anom { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.05); }
.pc-v-anom .pc-eti { background: rgba(239,68,68,.14); color: #b91c1c; }
@keyframes pc-entra { from { opacity: 0; transform: translateY(8px); } }
div.pc-anom { margin-top: 16px; border: 2px solid rgba(239,68,68,.35); border-radius: 18px; padding: 16px; background: linear-gradient(180deg, rgba(239,68,68,.06), transparent); animation: pc-entra .5s var(--ease) both; }
.pc-anom-t { display: flex; gap: 8px; align-items: center; color: #b91c1c; }
.pc-anom h3 { margin: 12px 0 8px; font-size: 15px; }
.pc-cfr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-cfr div { background: var(--bg-1); border-radius: 12px; padding: 10px 12px; border: 1px solid var(--line); }
.pc-cfr .no { border-color: rgba(239,68,68,.35); }
.pc-cfr small { color: var(--ink-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pc-cfr p { margin: 4px 0 0; font-size: 14px; }
.pc-tg { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-1); font-size: 13.5px; margin: 12px 0; }
.pc-az { display: flex; gap: 10px; flex-wrap: wrap; }
.pc-esito { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 12px; border-radius: 14px; background: rgba(16,185,129,.12); color: var(--ink-0); }
.pc-esito.neutro { background: var(--bg-2); }
.pc-esito p { margin: 4px 0 0; }
.pc-ev { display: grid; grid-template-columns: 44px 1fr; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.pc-ev time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pc-nota { display: flex; gap: 6px; align-items: center; justify-content: center; color: var(--ink-2); font-size: 12.5px; margin: 0 14px 22px; text-align: center; }
@media (max-width: 760px) { .pc-corpo { grid-template-columns: minmax(0, 1fr); } .pc-cfr { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pc-voce, div.pc-anom { animation: none; } .pc-passi li .msr { animation: none; } }