/* Licensing: quello che non c'e' gia' in style.css (comune alle app MC2). */

/* ── Riquadri con i numeri: come i KPI del cruscotto di MC2 Suite ── */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.tile { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px; min-width: 0 }
.tile .l { font-size: 11.5px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .05em }
.tile .v { font-size: 28px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis }
.tile .s { font-size: 12px; color: #6b7280; margin-top: 2px }
.tile.avviso { background: #fffbeb; border-color: #fde68a } .tile.avviso .v { color: #92400e }
.tile.errore { background: #fef2f2; border-color: #fecaca } .tile.errore .v { color: #b91c1c }
.tile.buono { background: #f0fdf4; border-color: #bbf7d0 } .tile.buono .v { color: #15803d }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) } .tile .v { font-size: 22px } }

/* ── La griglia dei bottoni, come la pagina Collaborazioni del sito ── */
.bottoni { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px }
.bottone { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08);
           display: flex; flex-direction: column; transition: transform .12s, box-shadow .12s; color: inherit }
.bottone:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(22, 41, 75, .35) }
.bottone:focus-visible { outline: 2px solid #1877f2; outline-offset: 2px }
/* L'immagine sta sempre tutta nel riquadro quadrato, qualunque forma abbia:
   un logo largo (AC/DC) si riduce, un banner quadrato del sito lo riempie. */
.bottone .foto { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; padding: 14px; background: #fff;
                 border-bottom: 1px solid #f3f4f6; display: block }
.bottone .corpo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 }
.bottone .nome { font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2 }
.bottone .chi { font-size: 12px; color: #6b7280; min-height: 1em }
.bottone .righe { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #374151;
                  border-top: 1px solid #f3f4f6; padding-top: 8px; margin-top: auto }
.bottone .righe b { font-variant-numeric: tabular-nums }
.bottone .prossima { font-size: 11.5px; font-weight: 600; border-radius: 8px; padding: 4px 8px }
.segnaposto { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e7f0fe, #f1eafe);
              color: #1877f2; font-weight: 800; font-size: 34px; letter-spacing: .05em }
.bottone .foto.segnaposto { display: flex; aspect-ratio: 1 / 1; padding: 0 }

/* ── La scheda della licenza ── */
.scheda-testa { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: center }
.scheda-testa .foto { width: 160px; height: 160px; border-radius: 16px; object-fit: contain; padding: 10px; background: #fff;
                      border: 1px solid #e5e7eb }
@media (max-width: 640px) { .scheda-testa { grid-template-columns: 96px minmax(0, 1fr) } .scheda-testa .foto { width: 96px; height: 96px } }
.linguette { display: flex; gap: 6px; flex-wrap: wrap }
.linguette a { padding: 8px 14px; border-radius: 9999px; font-size: 14px; font-weight: 600; background: #fff; color: #374151;
               box-shadow: 0 1px 2px rgba(0,0,0,.06); display: inline-flex; align-items: center; gap: 8px }
.linguette a:hover { background: #f3f4f6 }
.linguette a[aria-current="page"] { background: #1877f2; color: #fff }
.linguette a .conta { font-size: 11px; background: rgba(0,0,0,.08); border-radius: 9999px; padding: 1px 7px }
.linguette a[aria-current="page"] .conta { background: rgba(255,255,255,.25) }

.campi-vista { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; font-size: 14px }
.campi-vista dt { color: #6b7280 }
.campi-vista dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere }

.canali { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.canale { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px }
.canale .t { font-size: 11.5px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .05em }
.canale .p { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums }
@media (max-width: 640px) { .canali { grid-template-columns: minmax(0, 1fr) } }

.paesi { display: flex; flex-wrap: wrap; gap: 4px }
.paesi .pezzo { background: #e6f7ef; color: #047857 }

/* Scelta dei territori: una casella per nazione, in colonne. */
.territori { columns: 4 170px; column-gap: 16px; max-height: 280px; overflow: auto; border: 1px solid #e5e7eb;
             border-radius: 10px; padding: 10px 12px; font-size: 13px }
.territori label { display: flex; gap: 6px; align-items: center; padding: 2px 0; break-inside: avoid }
.territori input { accent-color: #1877f2 }

/* Barre del venduto per trimestre. */
.barre { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 8px; align-items: end; height: 170px }
.barra { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; min-width: 0 }
.barra i { display: block; width: 100%; max-width: 44px; background: #1877f2; border-radius: 6px 6px 0 0; min-height: 2px }
.barra i.prec { background: #c3d6f5 }
.barra .val { font-size: 11px; font-weight: 700; color: #374151; font-variant-numeric: tabular-nums; white-space: nowrap }
.barra .lab { font-size: 11px; color: #6b7280; white-space: nowrap }

/* Il percorso di approvazione: un pallino per fase. */
.pista { display: inline-flex; align-items: center }
.pista span { width: 13px; height: 13px; border-radius: 9999px; background: #e5e7eb; flex: none }
.pista span.ok { background: #059669 }
.pista span.ora { background: #fff; box-shadow: inset 0 0 0 3px #d97706 }
.pista span.ko { background: #e11d48 }
.pista b { width: 12px; height: 2px; background: #e5e7eb }
.pista b.ok { background: #059669 }

.fasi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px }
@media (max-width: 900px) { .fasi { grid-template-columns: repeat(3, minmax(0, 1fr)) } }

/* I controlli prima dell'invio del report. */
.controllo { display: flex; gap: 14px; align-items: flex-start; padding: 14px 20px; border-bottom: 1px solid #f3f4f6 }
.controllo:last-child { border-bottom: 0 }
.controllo .ic { width: 34px; height: 34px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex: none }
.controllo .tx { flex: 1; min-width: 0; font-size: 14px }
.controllo .tx b { display: block; color: #1b2733 }
.controllo .tx span { color: #6b7280 }
.controllo details { margin-top: 6px }
.controllo summary { cursor: pointer; color: #1877f2; font-weight: 600; font-size: 13px }

.barra-mg { height: 8px; border-radius: 9999px; background: #f3f4f6; overflow: hidden; min-width: 90px }
.barra-mg i { display: block; height: 100%; background: #059669 }
.barra-mg i.sotto { background: #d97706 }

.vuoto { text-align: center; color: #6b7280; padding: 36px 16px; font-size: 14px }
.vuoto i { font-size: 32px; color: #c3ccd6; display: block; margin-bottom: 10px }

.riquadro { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06) }
.riquadro-titolo { padding: 14px 20px; border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.riquadro-titolo h2 { font-size: 15px; font-weight: 700; color: #1b2733 }
.riquadro-titolo .a-destra { margin-left: auto; font-size: 12px; color: #6b7280 }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px }
.grid-campi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px }
.sezione-modulo { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #9aa4b2;
                  margin: 18px 0 10px; display: flex; align-items: center; gap: 10px }
.sezione-modulo:after { content: ""; flex: 1; height: 1px; background: #e4e8ee }

/* ── Presentazioni di stagione: una scheda per versione, la finale in verde ── */
.versioni { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px }
.versione { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 16px }
.versione.finale { border-color: #86efac; background: #f0fdf4 }
.versione .testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.versione .numero { font-weight: 800; font-size: 16px; color: #1b2733; min-width: 28px }
.rettifiche { margin-top: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; border-radius: 10px;
              padding: 10px 12px; font-size: 13.5px }
.rettifiche b { display: block; margin-bottom: 2px }
.files-pres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px }
.file-pres { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden; min-width: 0 }
.file-pres .anteprima { display: block; aspect-ratio: 4 / 3; background: #f7f9fc }
.file-pres .anteprima img { width: 100%; height: 100%; object-fit: contain; display: block }
.file-pres .pdf { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
                  color: #e11d48; font-size: 30px }
.file-pres .pdf b { font-size: 11px; letter-spacing: .1em; color: #9f1239 }
.file-pres .nome { font-size: 12px; font-weight: 600; padding: 6px 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.file-pres .azioni { display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding: 0 4px 4px 8px }
.file-pres .azioni span { margin-right: auto }

/* ── Foto dei prodotti (cartella CRM) ── */
.foto-art { width: 56px; height: 56px; border-radius: 8px; background: #fff; border: 1px solid #e4e8ee; flex: none;
            display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative }
.foto-art img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; background: #fff }
.foto-art i { position: absolute; color: #c3ccd6; font-size: 20px }
.foto-art.senza { background: #f7f9fc }
.foto-art.grande { width: 260px; height: 260px; border-radius: 14px }
.foto-art.grande i { font-size: 48px }
.foto-art:hover { border-color: #1877f2 }

/* Lo zoom al passaggio del mouse: la foto grande accanto al puntatore. */
.zoom-foto { position: fixed; z-index: 50; width: 340px; background: #fff; border-radius: 14px; padding: 10px;
             box-shadow: 0 24px 60px -12px rgba(22, 41, 75, .45); pointer-events: none; display: none }
.zoom-foto.visibile { display: block }
.zoom-foto img { width: 320px; height: 320px; object-fit: contain; display: block; background: #fff }
.zoom-foto div { font-size: 12px; font-weight: 600; color: #374151; padding: 6px 2px 0; text-align: center }
@media (hover: none) { .zoom-foto { display: none !important } }

/* I campi compilati dalla lettura del contratto: da controllare prima di salvare. */
.campo.letto, .territori.letto { background: #fefce8; border-color: #facc15; box-shadow: 0 0 0 2px #fef08a }