/*
 * Conferma · modello 1.0.0 (dal CRM di Daniel Castorani, 07/10/2026)
 *
 * La finestra che chiede «sei sicuro?». Con il mouse è centrata; al tocco,
 * sul telefono, sale dal basso con i pulsanti larghi.
 */
.comp-conferma{
  box-sizing:border-box;
  width:min(26rem, calc(100vw - 2rem)); margin:auto; padding:0;
  border:1px solid var(--comp-bordo, #d9ddd8); border-radius:var(--comp-raggio-grande, 16px);
  background:var(--comp-superficie, #fff); color:var(--comp-testo, #1f2a2b);
  font-family:var(--comp-carattere, inherit);
  box-shadow:var(--comp-ombra, 0 18px 40px -12px rgba(20,30,30,.25));
}
.comp-conferma::backdrop{background:var(--comp-velo, rgba(20,30,30,.35));}
.comp-conferma-corpo{padding:1.25rem 1.25rem 1rem;}
.comp-conferma-testo{margin:0; font-size:1rem; line-height:1.55; overflow-wrap:anywhere;}
.comp-conferma-piede{display:flex; justify-content:flex-end; gap:.5rem; padding:0 1.25rem 1.25rem;}

.comp-conferma-pulsante{
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 1rem; border-radius:var(--comp-raggio, 10px);
  font:inherit; font-weight:500; cursor:pointer;
  border:1px solid var(--comp-bordo, #d9ddd8); background:var(--comp-superficie, #fff); color:var(--comp-testo, #1f2a2b);
}
.comp-conferma-pulsante:hover{background:var(--comp-superficie-2, #f3f4f2);}
.comp-conferma-si{border-color:var(--comp-accento, #2b5f5a); background:var(--comp-accento, #2b5f5a); color:var(--comp-accento-testo, #fff);}
.comp-conferma-si:hover{background:color-mix(in srgb, var(--comp-accento, #2b5f5a) 88%, #000);}
.comp-conferma-si.comp-conferma-pericolo{border-color:var(--comp-errore, #9b2c2c); background:var(--comp-errore, #9b2c2c); color:#fff;}
.comp-conferma-si.comp-conferma-pericolo:hover{background:color-mix(in srgb, var(--comp-errore, #9b2c2c) 88%, #000);}
.comp-conferma-pulsante:focus-visible{outline:2px solid var(--comp-focus, #2b5f5a); outline-offset:2px;}

@media (pointer: coarse) and (max-width: 40rem){
  .comp-conferma{
    width:100vw; max-width:100vw; margin:auto 0 0;
    border-radius:var(--comp-raggio-grande, 16px) var(--comp-raggio-grande, 16px) 0 0; border-width:1px 0 0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .comp-conferma-piede{flex-direction:column-reverse;}
  .comp-conferma-pulsante{width:100%; min-height:48px;}
}
@media (prefers-reduced-motion: no-preference){
  .comp-conferma[open]{animation:comp-conferma-entra .18s ease-out;}
  @keyframes comp-conferma-entra{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}
}
html:has(.comp-conferma[open]){overflow:hidden;}