/*
 * MODULO AVATAR - thankyoujill
 * File: css/avatar.css
 *
 * Tutte le classi iniziano con "avt-" per non scontrarsi con il CSS del sito.
 * I colori principali si cambiano dalle variabili in .avt-editor.
 */

/* ---------- Avatar rotondo (vale per visualizzazione, editor e miniature) ---------- */
.avt-tondo {
  display: inline-block;
  flex: none;
  border-radius: 50%;
  overflow: hidden;          /* il ritaglio rotondo e' fatto qui, non nell'SVG */
  line-height: 0;
  vertical-align: middle;
  background: #e2e8f0;
}
.avt-tondo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Editor ---------- */
.avt-editor {
  --avt-accento: #2e7d32;
  --avt-accento-chiaro: #dcefdd;
  --avt-bordo: #d5dbe3;
  --avt-testo: #1f2937;
  --avt-sfondo: #ffffff;
  --avt-sfondo-soft: #f6f8fa;

  box-sizing: border-box;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "anteprima"
    "pannello";
  color: var(--avt-testo);
}
.avt-editor *,
.avt-editor *::before,
.avt-editor *::after { box-sizing: border-box; }

/* Anteprima grande */
.avt-anteprima {
  grid-area: anteprima;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.avt-titolo {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}
.avt-grande {
  width: min(260px, 64vw);
  height: min(260px, 64vw);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
}

/* Messaggio "ti mancano N ambasciatori" */
.avt-blocco {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 360px;
  margin: 0;
  padding: 10px 14px;
  font-size: .92rem;
  text-align: left;
  background: var(--avt-sfondo-soft);
  border: 1px dashed var(--avt-bordo);
  border-radius: 12px;
}
.avt-blocco svg { flex: none; width: 20px; height: 20px; }

/* Pulsanti */
.avt-btn {
  min-height: 44px;
  padding: 0 20px;
  font: inherit;
  font-weight: 600;
  color: var(--avt-testo);
  background: var(--avt-sfondo);
  border: 1px solid var(--avt-bordo);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, opacity .15s;
}
.avt-btn:hover:not(:disabled) { background: var(--avt-sfondo-soft); border-color: #aab4c0; }
.avt-btn:disabled { opacity: .5; cursor: not-allowed; }
.avt-btn-primario {
  color: #fff;
  background: var(--avt-accento);
  border-color: var(--avt-accento);
}
.avt-btn-primario:hover:not(:disabled) { background: #256628; border-color: #256628; }

/* Pannello opzioni */
.avt-pannello {
  grid-area: pannello;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.avt-pannello[hidden] { display: none; }

/* Categorie: scorrimento ORIZZONTALE */
.avt-schede {
  display: flex;
  gap: 8px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.avt-schede::-webkit-scrollbar { display: none; }
.avt-scheda {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
  font-weight: 600;
  color: var(--avt-testo);
  background: var(--avt-sfondo-soft);
  border: 1px solid var(--avt-bordo);
  border-radius: 999px;
  cursor: pointer;
  scroll-snap-align: center;
  white-space: nowrap;
}
.avt-scheda[aria-selected="true"] {
  color: #fff;
  background: var(--avt-accento);
  border-color: var(--avt-accento);
}

/* Opzioni della categoria: scorrimento VERTICALE */
.avt-opzioni {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px;
  max-height: 42vh;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--avt-sfondo-soft);
  border: 1px solid var(--avt-bordo);
  border-radius: 14px;
}
.avt-opz {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 3px;
  background: var(--avt-sfondo);
  border: 3px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.avt-opz:hover { border-color: #aab4c0; }
.avt-opz[aria-pressed="true"] {
  border-color: var(--avt-accento);
  box-shadow: 0 0 0 3px var(--avt-accento-chiaro);
}
.avt-mini {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}
.avt-mini svg { height: auto; aspect-ratio: 1 / 1; }

/* Barra azioni e messaggi */
.avt-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.avt-msg {
  min-height: 1.4em;
  margin: 0;
  font-size: .92rem;
}
.avt-msg-ok { color: #166534; }
.avt-msg-errore { color: #b91c1c; }
.avt-msg-avviso { color: #92400e; }

/* Accessibilita': evidenzia il focus da tastiera */
.avt-editor button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

/* ---------- Schermi larghi: opzioni a sinistra, avatar a destra ---------- */
@media (min-width: 820px) {
  .avt-editor.avt-aperto {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas: "pannello anteprima";
    align-items: start;
  }
  .avt-editor.avt-aperto .avt-anteprima {
    position: sticky;
    top: 16px;
  }
  .avt-editor.avt-aperto .avt-opzioni {
    max-height: min(52vh, 460px);
  }
  /* Su schermi larghi le categorie vanno a capo: tutte visibili, niente
     scorrimento (con il mouse lo scorrimento orizzontale non era usabile) */
  .avt-editor.avt-aperto .avt-schede {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* ---------- Modalita' pagina (AvtEditorPagina): pulsante Salva in evidenza ---------- */
.avt-pagina [data-avt-salva] {
  min-width: 200px;
  font-weight: 600;
}
.avt-pagina .avt-msg { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .avt-btn, .avt-opz { transition: none; }
}