/* =====================================================================
   La mappa

   In un file a parte come periodo.css, e per lo stesso motivo: la usano il
   sito (site.css) e il gestionale con l'area cliente (admin.css), che non
   condividono un foglio di stile. Le variabili di colore hanno gli stessi
   nomi e gli stessi valori nei due, quindi qui si usano e non si dichiarano.

   Si carica solo dove serve, con @section Head / @section Stili.
   ===================================================================== */

.mappa { display: grid; gap: 6px; }

/* La tela ha un'altezza sua: le tessere sono in posizione assoluta e non la
   spingerebbero, quindi senza questo la mappa sarebbe alta zero. */
.mappa__tela {
    position: relative;
    height: 320px;
    overflow: hidden;
    border-radius: 10px;
    background: #dfe7dc;          /* il verdino delle tessere, mentre arrivano */
    cursor: grab;
    touch-action: none;           /* il trascinamento e' nostro, non dello scorrimento */
    user-select: none;
}
.mappa__tela:active { cursor: grabbing; }

.mappa__tessere { position: absolute; inset: 0; }
.mappa__tessera { position: absolute; width: 256px; height: 256px; display: block; }

/* Il segnaposto: la punta sta sul punto, non il centro del disegno — quindi si
   sposta di mezza larghezza e di tutta l'altezza. E' un cerchio con una punta,
   fatto in CSS: un'immagine in piu' da scaricare per un triangolo non vale. */
.mappa__segno {
    position: absolute;
    width: 22px;
    height: 22px;
    margin: -28px 0 0 -11px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--verde-scuro);
    border: 2px solid var(--bianco);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    pointer-events: none;          /* in sola lettura non si prende: si trascina la mappa sotto */
}
.mappa__segno[hidden] { display: none; }

/* In modifica il segnaposto si prende e si porta dove serve. L'area sensibile e' piu' larga del
   disegno (::after): 22 px di cerchio sono pochi per un dito, e un segnaposto che sfugge al dito
   fa spostare la mappa invece di lui. */
.mappa__tela--modifica .mappa__segno {
    pointer-events: auto;
    cursor: grab;
}
.mappa__tela--modifica .mappa__segno::after {
    content: "";
    position: absolute;
    inset: -11px;
    border-radius: 50%;
}
.mappa__segno--preso {
    cursor: grabbing;
    /* Si alza di poco mentre lo si porta: si vede che e' in mano, e la punta resta sul punto. */
    box-shadow: 0 6px 12px rgba(0, 0, 0, .45);
}

.mappa__comandi { position: absolute; top: 10px; right: 10px; display: grid; gap: 4px; }
.mappa__tasto {
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    width: 32px;
    height: 32px;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    background: var(--bianco);
    color: var(--verde-scuro);
    cursor: pointer;
}
.mappa__tasto:hover { background: var(--verde-chiaro); }

.mappa__firma {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 2px 6px;
    font-size: .7rem;
    background: rgba(255, 255, 255, .8);
    border-radius: 6px 0 0 0;
}
.mappa__firma a { color: inherit; }

.mappa__aiuto { margin: 0; font-size: .85rem; color: var(--grigio); }

/* Il pulsante "trova dall'indirizzo" e l'esito accanto: su schermo stretto l'esito va a capo. */
.mappa__cerca { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin: 8px 0 0; }
.mappa__esito { font-size: .85rem; color: var(--grigio); }

@media (max-width: 640px) {
    .mappa__tela { height: 260px; }
}