/* ═══════════════════════════════════════════════════════════════════════════
   Elenco soci UNARMA — "registro istituzionale"

   Uno strumento che i segretari aprono ogni giorno, spesso di fretta, per
   sapere una cosa sola: come sta messo questo socio. Perciò lo stato è
   l'ancora visiva di ogni riga, non un dettaglio in fondo.

   Carta calda, inchiostro navy, un solo accento amaranto (lo stesso rosso
   dello stemma). Serif editoriale per le intestazioni, grottesco per i dati,
   monospaziato per i codici: un CIP dev'essere confrontabile a occhio.

   NESSUN CARATTERE ESTERNO. Caricarli da Google significherebbe trasmettere a
   Google l'indirizzo IP di ogni socio che apre l'elenco — ed è il motivo per
   cui Complianz, attivo su questo sito, li blocca finché non c'è il consenso:
   il foglio di stile resta appeso e la pagina non finisce di caricarsi.
   Georgia è presente ovunque e ha il tono editoriale che serve.
   ═══════════════════════════════════════════════════════════════════════════ */

.usoci{
  --inchiostro:#12233b;
  --inchiostro-tenue:#5a6675;
  --inchiostro-lieve:#8b95a3;
  --carta:#f6f3ee;
  --carta-alta:#fffdfa;
  --linea:#e2ddd4;
  --linea-forte:#cdc5b8;
  --amaranto:#9b2226;

  --verde:#1f6b45;   --verde-fondo:#e7f2eb;
  --ambra:#8a5a00;   --ambra-fondo:#fbf1de;
  --ruggine:#a03d1f; --ruggine-fondo:#fcece5;
  --rosso:#8f1d1d;   --rosso-fondo:#fbe9e9;
  --blu:#1b4f8a;     --blu-fondo:#e8eff7;
  --grigio:#5b6470;  --grigio-fondo:#eeeeea;

  --testo:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --titoli:Georgia,'Iowan Old Style','Palatino Linotype','Times New Roman',serif;
  --codici:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  --raggio:10px;
  --ombra:0 1px 2px rgba(18,35,59,.05), 0 8px 24px -12px rgba(18,35,59,.18);

  font-family:var(--testo);
  font-size:15px; line-height:1.5; color:var(--inchiostro);
  -webkit-font-smoothing:antialiased;
}
.usoci *{box-sizing:border-box}

/* Le media query misurano la FINESTRA, non lo spazio davvero disponibile: con
   la barra laterale del tema questa pagina ha circa 850 px anche su schermo
   grande, e una tabella a sei colonne lì non ci sta. Le container query
   misurano il contenitore, che è la domanda giusta. */
.usoci{container-type:inline-size; container-name:elenco}

/* ── Testata ──────────────────────────────────────────────────────────── */

.usoci-testata{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap; margin-bottom:22px;
  padding-bottom:16px; border-bottom:1px solid var(--linea-forte);
  position:relative;
}
.usoci-testata::after{
  content:""; position:absolute; left:0; bottom:-1px; width:64px; height:3px;
  background:var(--amaranto);
}
.usoci-titolo{
  font-family:var(--titoli); font-weight:500;
  font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.1; margin:0;
  color:var(--inchiostro); letter-spacing:-.01em;
}
.usoci-ambito{
  margin:6px 0 0; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--inchiostro-lieve); font-weight:500;
}

/* ── Cartelle di riepilogo: sono anche filtri ─────────────────────────── */

.usoci-cards{
  display:grid; gap:10px; margin-bottom:20px;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
}
.usoci-card{
  display:block; text-decoration:none; position:relative; overflow:hidden;
  padding:14px 16px 13px; border-radius:var(--raggio);
  background:var(--carta-alta); border:1px solid var(--linea);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation:usoci-entra .5s both;
}
.usoci-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--grigio);
}
.usoci-card:hover{transform:translateY(-2px); box-shadow:var(--ombra); border-color:var(--linea-forte)}
.usoci-card.is-attiva{border-color:var(--inchiostro); box-shadow:var(--ombra)}
.usoci-card-n{
  display:block; font-family:var(--titoli); font-weight:600;
  font-size:1.85rem; line-height:1; color:var(--inchiostro);
  font-variant-numeric:tabular-nums;
}
.usoci-card-e{
  display:block; margin-top:5px; font-size:.76rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--inchiostro-tenue);
}
/* Riga di spiegazione: "congelate" da sola non dice a chi tocca muoversi. */
.usoci-card-sub{
  display:block; margin-top:3px; font-size:.71rem; line-height:1.3;
  color:var(--inchiostro-tenue); opacity:.72; text-transform:none; letter-spacing:0;
}
.usoci-card-tot::before{background:var(--inchiostro)}
.usoci-card-ok::before{background:var(--verde)}
.usoci-card-attesa::before{background:var(--ambra)}
.usoci-card-attenzione::before{background:var(--ruggine)}
.usoci-card-critico::before{background:var(--rosso)}
.usoci-card-nuovo::before{background:var(--blu)}

/* ── Liste di lavoro ──────────────────────────────────────────────────────
   Separate dalle cartelle di stato da una linea e da un'etichetta: non sono
   una porzione del totale, e la stessa persona può stare in entrambe. */

.usoci-lavoro{
  margin:-6px 0 20px; padding-top:16px; border-top:1px dashed var(--linea-forte);
}
.usoci-lavoro-eti{
  display:block; margin-bottom:9px; font-size:.68rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--inchiostro-lieve);
}
.usoci-cards-lavoro{grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-bottom:0}
.usoci-card-lavoro{background:var(--carta)}
.usoci-card-lavoro::before{background:var(--amaranto)}

@keyframes usoci-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.usoci-card:nth-child(1){animation-delay:.02s} .usoci-card:nth-child(2){animation-delay:.06s}
.usoci-card:nth-child(3){animation-delay:.10s} .usoci-card:nth-child(4){animation-delay:.14s}
.usoci-card:nth-child(5){animation-delay:.18s} .usoci-card:nth-child(6){animation-delay:.22s}
.usoci-card:nth-child(7){animation-delay:.26s}

/* ── Filtri ───────────────────────────────────────────────────────────── */

.usoci-filtri{
  display:grid; gap:12px; align-items:end; margin-bottom:18px; padding:16px;
  background:var(--carta); border:1px solid var(--linea); border-radius:var(--raggio);
  grid-template-columns:minmax(210px,1.6fr) repeat(auto-fit,minmax(130px,1fr));
}
.usoci-campo{display:flex; flex-direction:column; gap:5px; min-width:0}
.usoci-campo label{
  font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--inchiostro-lieve);
}
.usoci-campo input[type=search],
.usoci-campo input[type=text],
.usoci-campo select{
  width:100%; padding:9px 11px; font:inherit; font-size:.92rem;
  color:var(--inchiostro); background:var(--carta-alta);
  border:1px solid var(--linea-forte); border-radius:7px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.usoci-campo input:focus, .usoci-campo select:focus{
  outline:none; border-color:var(--inchiostro);
  box-shadow:0 0 0 3px rgba(18,35,59,.09);
}
.usoci-campo-spunta{flex-direction:row; align-items:center; gap:8px; padding-bottom:9px}
.usoci-campo-spunta label{
  text-transform:none; letter-spacing:0; font-size:.9rem; font-weight:450;
  color:var(--inchiostro); cursor:pointer;
}
.usoci-azioni{display:flex; flex-wrap:wrap; gap:7px; grid-column:1/-1; padding-top:2px}

/* ── Bottoni ──────────────────────────────────────────────────────────── */

.usoci-btn{
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px;
  font:inherit; font-size:.88rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; border-radius:7px;
  border:1px solid var(--linea-forte); background:var(--carta-alta); color:var(--inchiostro);
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.usoci-btn:hover{background:var(--carta); border-color:var(--inchiostro-lieve); color:var(--inchiostro)}
.usoci-btn:active{transform:translateY(1px)}
.usoci-btn-primario{background:var(--inchiostro); border-color:var(--inchiostro); color:#fff}
.usoci-btn-primario:hover{background:#0b1829; border-color:#0b1829; color:#fff}
.usoci-btn-tenue{border-style:dashed; color:var(--inchiostro-tenue)}
.usoci-btn-spinta{margin-left:auto}

/* ── Tabella ──────────────────────────────────────────────────────────── */

.usoci-tabella-box{
  border:1px solid var(--linea); border-radius:var(--raggio);
  background:var(--carta-alta); box-shadow:var(--ombra);
}
.usoci-tabella{width:100%; border-collapse:collapse; table-layout:auto}
.usoci-tabella thead th{
  padding:11px 14px; text-align:left; background:var(--carta);
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--inchiostro-tenue); white-space:nowrap;
  border-bottom:1px solid var(--linea-forte);
}
.usoci-tabella thead th a{color:inherit; text-decoration:none; display:inline-flex; gap:4px}
.usoci-tabella thead th a:hover{color:var(--amaranto)}
.usoci-tabella tbody td{padding:12px 14px; border-bottom:1px solid var(--linea); vertical-align:top; overflow-wrap:anywhere}
.usoci-tabella tbody tr{transition:background .12s ease}
.usoci-tabella tbody tr:hover{background:var(--carta)}
.usoci-tabella tbody tr:last-child td{border-bottom:0}

/* La barretta a sinistra dice lo stato senza bisogno di leggere. */
.usoci-riga{position:relative}
.usoci-riga > td:first-child{border-left:3px solid transparent}
.usoci-riga.st-ok       > td:first-child{border-left-color:var(--verde)}
.usoci-riga.st-attesa   > td:first-child{border-left-color:var(--ambra)}
.usoci-riga.st-attenzione> td:first-child{border-left-color:var(--ruggine)}
.usoci-riga.st-critico  > td:first-child{border-left-color:var(--rosso)}
.usoci-riga.st-nuovo    > td:first-child{border-left-color:var(--blu)}
.usoci-riga.st-neutro   > td:first-child{border-left-color:var(--linea-forte)}

.usoci-idx{
  width:1%; white-space:nowrap; text-align:right; padding-right:0!important;
  font-size:.76rem; color:var(--inchiostro-lieve); font-variant-numeric:tabular-nums;
}
.usoci-nome{
  display:block; font-weight:600; font-size:1rem; line-height:1.25;
  color:var(--inchiostro); text-decoration:none;
}
.usoci-nome:hover{color:var(--amaranto); text-decoration:underline; text-underline-offset:3px}
.usoci-cip{
  font-family:var(--codici); font-size:.82rem;
  color:var(--inchiostro-tenue); letter-spacing:.02em;
}
.usoci-meta{
  display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:5px;
  font-size:.78rem; color:var(--inchiostro-lieve);
}
.usoci-meta b{font-weight:600; color:var(--inchiostro-tenue)}
.usoci-secondaria{font-size:.88rem; color:var(--inchiostro-tenue)}
.usoci-secondaria strong{display:block; font-weight:600; color:var(--inchiostro); font-size:.92rem}

/* ── Stato ────────────────────────────────────────────────────────────── */

.usoci-badge{
  display:inline-block; padding:3px 11px; border-radius:100px;
  font-size:.78rem; font-weight:600; letter-spacing:.01em; white-space:nowrap;
}
.usoci-badge-ok{background:var(--verde-fondo); color:var(--verde)}
.usoci-badge-attesa{background:var(--ambra-fondo); color:var(--ambra)}
.usoci-badge-attenzione{background:var(--ruggine-fondo); color:var(--ruggine)}
.usoci-badge-critico{background:var(--rosso-fondo); color:var(--rosso)}
.usoci-badge-nuovo{background:var(--blu-fondo); color:var(--blu)}
.usoci-badge-neutro{background:var(--grigio-fondo); color:var(--grigio)}
.usoci-note{margin-top:6px; display:flex; flex-wrap:wrap; gap:2px 16px}
.usoci-nota{
  font-size:.78rem; color:var(--inchiostro-lieve); line-height:1.35;
  padding-left:11px; position:relative; flex:0 1 auto;
}
.usoci-nota::before{
  content:""; position:absolute; left:0; top:.55em; width:5px; height:5px;
  border-radius:50%; background:var(--linea-forte);
}
.usoci-senza-profilo{
  display:inline-block; margin-left:7px; padding:1px 7px; border-radius:4px;
  background:var(--ambra-fondo); color:var(--ambra);
  font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  vertical-align:middle;
}

/* ── Paginazione ──────────────────────────────────────────────────────── */

.usoci-pag{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:18px}
.usoci-pag a{
  min-width:38px; padding:7px 11px; text-align:center; text-decoration:none;
  font-size:.88rem; font-weight:500; color:var(--inchiostro);
  background:var(--carta-alta); border:1px solid var(--linea-forte); border-radius:7px;
  font-variant-numeric:tabular-nums; transition:background .12s ease;
}
.usoci-pag a:hover{background:var(--carta); color:var(--amaranto)}
.usoci-pag a.is-qui{background:var(--inchiostro); border-color:var(--inchiostro); color:#fff}
.usoci-pag-info{margin-left:auto; font-size:.82rem; color:var(--inchiostro-lieve)}

/* ── Scheda socio ─────────────────────────────────────────────────────── */

.usoci-indietro{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:14px;
  font-size:.86rem; font-weight:600; color:var(--inchiostro-tenue); text-decoration:none;
}
.usoci-indietro:hover{color:var(--amaranto)}
.usoci-scheda-griglia{
  display:grid; gap:10px; margin:18px 0 26px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.usoci-dato{
  padding:12px 14px; background:var(--carta); border:1px solid var(--linea);
  border-radius:var(--raggio);
}
.usoci-dato dt{
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--inchiostro-lieve); margin:0 0 4px;
}
.usoci-dato dd{margin:0; font-size:.95rem; font-weight:500; color:var(--inchiostro); word-break:break-word}
.usoci-dato dd.mono{font-family:var(--codici); font-size:.88rem}

.usoci-sezione{
  font-family:var(--titoli); font-weight:500; font-size:1.3rem;
  margin:30px 0 12px; color:var(--inchiostro);
  display:flex; align-items:baseline; gap:10px;
}
.usoci-sezione small{
  font-family:var(--testo); font-size:.72rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--inchiostro-lieve);
}

.usoci-timeline{list-style:none; margin:0; padding:0 0 0 22px; position:relative}
.usoci-timeline::before{
  content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--linea-forte),var(--linea));
}
.usoci-timeline li{position:relative; padding:9px 0}
.usoci-timeline li::before{
  content:""; position:absolute; left:-22px; top:15px; width:12px; height:12px;
  border-radius:50%; background:var(--carta-alta); border:2px solid var(--inchiostro-lieve);
}
.usoci-timeline li.st-ok::before{border-color:var(--verde)}
.usoci-timeline li.st-critico::before{border-color:var(--rosso)}
.usoci-timeline li.st-attenzione::before{border-color:var(--ruggine)}
.usoci-timeline-date{margin-left:9px; font-size:.84rem; color:var(--inchiostro-lieve)}

.usoci-mesi{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:5px}
.usoci-mese{
  padding:7px 8px; border-radius:7px; text-align:center; line-height:1.25;
  border:1px solid transparent;
}
.usoci-mese b{display:block; font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums}
.usoci-mese span{
  display:block; font-size:.68rem; opacity:.9;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Gate OTP e avvisi ────────────────────────────────────────────────── */

.usoci-gate,.usoci-avviso{
  max-width:600px; margin:34px auto; padding:30px;
  background:var(--carta-alta); border:1px solid var(--linea);
  border-radius:14px; box-shadow:var(--ombra); position:relative; overflow:hidden;
}
.usoci-gate::before,.usoci-avviso::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--amaranto);
}
.usoci-gate h3,.usoci-avviso h3{
  font-family:var(--titoli); font-weight:500; font-size:1.5rem;
  margin:0 0 10px; color:var(--inchiostro);
}
.usoci-gate p,.usoci-avviso p{margin:0 0 14px; color:var(--inchiostro-tenue); font-size:.95rem}
.usoci-gate strong{color:var(--inchiostro)}
.usoci-gate-azioni{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:20px}
.usoci-gate-azioni form{display:flex; gap:8px; align-items:flex-end; margin:0}
.usoci-gate-azioni label{
  display:block; margin-bottom:5px; font-size:.7rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--inchiostro-lieve);
}
.usoci-gate-azioni input[type=text]{
  width:132px; padding:10px; text-align:center; font-size:1.15rem;
  font-family:var(--codici); letter-spacing:.22em;
  border:1px solid var(--linea-forte); border-radius:7px; background:var(--carta-alta);
}
.usoci-msg{
  padding:11px 14px; border-radius:8px; font-size:.9rem;
  background:var(--ambra-fondo); color:var(--ambra); border:1px solid rgba(138,90,0,.2);
}

/* ── Modulo d'accesso ─────────────────────────────────────────────────────
   Il markup lo genera wp_login_form(), quindi le classi non sono nostre e non
   si possono cambiare: si vestono quelle di WordPress con i colori del
   registro, invece di riscrivere un modulo di login a mano. */

.usoci-accesso #loginform{margin:22px 0 0}
.usoci-accesso #loginform p{margin:0 0 14px}
.usoci-accesso #loginform label{
  display:block; margin-bottom:5px; font-size:.7rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--inchiostro-lieve);
}
.usoci-accesso #loginform input[type=text],
.usoci-accesso #loginform input[type=password]{
  width:100%; box-sizing:border-box; padding:11px 12px; font-size:.95rem;
  color:var(--inchiostro); background:var(--carta-alta);
  border:1px solid var(--linea-forte); border-radius:7px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.usoci-accesso #loginform input[type=text]:focus,
.usoci-accesso #loginform input[type=password]:focus{
  outline:none; border-color:var(--inchiostro);
  box-shadow:0 0 0 3px rgba(18,35,59,.08);
}
/* WordPress annida la casella DENTRO l'etichetta: il flex va messo lì,
   altrimenti la spaziatura fra spunta e testo non si governa. */
.usoci-accesso .login-remember label{
  display:flex; align-items:center; gap:8px;
  margin:0; font-size:.85rem; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--inchiostro-tenue);
}
.usoci-accesso .login-remember input{margin:0; flex:0 0 auto}
.usoci-accesso .login-submit{margin:18px 0 0}
.usoci-accesso #wp-submit{
  width:100%; padding:12px 18px; font-size:.95rem; font-weight:600;
  cursor:pointer; border-radius:8px;
  background:var(--inchiostro); border:1px solid var(--inchiostro); color:#fff;
  transition:background .15s ease;
}
.usoci-accesso #wp-submit:hover{background:#0b1829}
.usoci-accesso #wp-submit:active{transform:translateY(1px)}
.usoci-accesso-aiuto{
  margin:18px 0 0 !important; padding-top:16px; border-top:1px solid var(--linea);
  font-size:.85rem; text-align:center;
}
.usoci-accesso-aiuto a{color:var(--inchiostro-tenue); text-decoration:none; border-bottom:1px solid var(--linea-forte)}
.usoci-accesso-aiuto a:hover{color:var(--amaranto); border-color:var(--amaranto)}
.usoci-accesso-aiuto span{margin:0 8px; color:var(--inchiostro-lieve)}
.usoci-vuoto{
  padding:44px 24px; text-align:center; color:var(--inchiostro-lieve);
  background:var(--carta); border:1px dashed var(--linea-forte); border-radius:var(--raggio);
}
.usoci-vuoto strong{display:block; font-family:var(--titoli); font-size:1.2rem;
  color:var(--inchiostro-tenue); margin-bottom:6px}
.usoci-pie{
  margin-top:22px; padding-top:14px; border-top:1px solid var(--linea);
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.usoci-pie small{color:var(--inchiostro-lieve); font-size:.78rem}

/* ── Spazio ridotto: la tabella diventa un elenco di schede ───────────── */

/* Sotto i 1040 px di CONTENITORE le sei colonne non stanno comode: invece di
   stringerle fino a spezzare le parole, ogni socio diventa una scheda che si
   dispone su due colonne fluide. Nessuno scorrimento orizzontale, mai. */
@container elenco (max-width:1040px){
  .usoci-tabella thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .usoci-tabella,.usoci-tabella tbody,.usoci-tabella tr,.usoci-tabella td{display:block; width:100%}
  .usoci-tabella tbody tr{
    position:relative; padding:12px 14px 14px 17px;
    border-bottom:1px solid var(--linea);
    display:grid; gap:2px 18px;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    align-items:start;
  }
  .usoci-tabella tbody tr:last-child{border-bottom:0}
  .usoci-riga > td:first-child{border-left:0}
  .usoci-riga::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
    background:var(--linea-forte);
  }
  .usoci-riga.st-ok::before{background:var(--verde)}
  .usoci-riga.st-attesa::before{background:var(--ambra)}
  .usoci-riga.st-attenzione::before{background:var(--ruggine)}
  .usoci-riga.st-critico::before{background:var(--rosso)}
  .usoci-riga.st-nuovo::before{background:var(--blu)}
  .usoci-tabella tbody td{border:0; padding:2px 0}

  /* Nome e stato occupano tutta la larghezza: sono le due cose che si cercano. */
  .usoci-tabella tbody td:nth-child(2),
  .usoci-tabella tbody td:last-child{grid-column:1/-1}

  .usoci-idx{display:none}
  .usoci-tabella td[data-e]::before{
    content:attr(data-e); display:block; margin-top:7px;
    font-size:.63rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--inchiostro-lieve);
  }
  .usoci-tabella tbody td:nth-child(2)::before,
  .usoci-tabella tbody td:last-child::before{margin-top:2px}
}

/* Ripiego per i browser senza container query: si torna a misurare la finestra. */
@supports not (container-type:inline-size){
  @media (max-width:1240px){
    .usoci-tabella thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
    .usoci-tabella,.usoci-tabella tbody,.usoci-tabella tr,.usoci-tabella td{display:block; width:100%}
    .usoci-tabella tbody tr{
      position:relative; padding:12px 14px 14px 17px; border-bottom:1px solid var(--linea);
      display:grid; gap:2px 18px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    }
    .usoci-riga > td:first-child{border-left:0}
    .usoci-riga::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--linea-forte)}
    .usoci-tabella tbody td{border:0; padding:2px 0}
    .usoci-tabella tbody td:nth-child(2),.usoci-tabella tbody td:last-child{grid-column:1/-1}
    .usoci-idx{display:none}
    .usoci-tabella td[data-e]::before{
      content:attr(data-e); display:block; margin-top:7px; font-size:.63rem; font-weight:700;
      letter-spacing:.09em; text-transform:uppercase; color:var(--inchiostro-lieve);
    }
  }
}

@media (max-width:900px){
  .usoci-tabella thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .usoci-tabella,.usoci-tabella tbody,.usoci-tabella tr,.usoci-tabella td{display:block; width:100%}
  .usoci-tabella tbody tr{
    border-bottom:1px solid var(--linea-forte); padding:6px 0 10px; position:relative;
  }
  .usoci-riga > td:first-child{border-left:0}
  .usoci-riga::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--linea-forte)}
  .usoci-riga.st-ok::before{background:var(--verde)}
  .usoci-riga.st-attesa::before{background:var(--ambra)}
  .usoci-riga.st-attenzione::before{background:var(--ruggine)}
  .usoci-riga.st-critico::before{background:var(--rosso)}
  .usoci-riga.st-nuovo::before{background:var(--blu)}
  .usoci-tabella tbody td{border:0; padding:3px 14px}
  .usoci-idx{display:none}
  .usoci-tabella td[data-e]::before{
    content:attr(data-e) " "; font-size:.66rem; font-weight:700; letter-spacing:.07em;
    text-transform:uppercase; color:var(--inchiostro-lieve); display:block; margin-top:6px;
  }
  .usoci-azioni{justify-content:stretch}
  .usoci-btn{flex:1 1 auto; justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .usoci-card{animation:none}
  .usoci *{transition:none!important}
}

/* Mese dell'elenco CNA da cui risulta lo stato: senza, "attivo" è un fatto
   senza data — e a fine mese cambia. */
.usoci-periodo{
  display:inline-block; margin-left:7px; padding:2px 8px; border-radius:5px;
  background:var(--carta); border:1px solid var(--linea);
  font-family:var(--codici); font-size:.7rem; font-weight:500;
  color:var(--inchiostro-lieve); white-space:nowrap; vertical-align:middle;
}