/* ---------------------------------------------------------------
   Asteliar — foglio di stile condiviso
   Variabili, tipografia di base e componenti riusabili tra le pagine.
   Ogni pagina aggiunge poi, nel proprio <style>, solo il layout
   specifico che le serve (non colori o componenti già definiti qui).
--------------------------------------------------------------- */

:root{
  --bg-void:#EFE3C8;
  --panel:#E8D9B8;
  --panel-2:#F6EDD6;
  --brass:#9C5A34;
  --brass-dim:#C79868;
  --text:#3B2E22;
  --muted:#8A7860;
  --line:#D6C49B;
  --danger:#9C3B2C;
  --accento:#6E8B7A;
  --avviso-sfondo:#EAD48A;
  --avviso-bordo:#B8912E;
  /* Colore esclusivo dei segnalini-ricordo sulla mappa: deve restare
     distinguibile sia dall'ambra del centratore/ricerca (--brass) sia
     dal verde delle bottiglie (--accento), per non creare nuova
     confusione mentre si risolve quella attuale. */
  --segnalino-ricordo:#3D6A73;
}

*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg-void); color:var(--text); font-family:'Inter',sans-serif; }
.hidden{ display:none !important; }

/* Intestazione con marchio e sottotitolo, comune a tutte le pagine dell'app */
header{ padding:12px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }

/* Pulsante "Accedi"/"Esci" iniettato da auth-shared.js dentro #authBox,
   condiviso da tutte le pagine che includono il modulo. */
#authBox{ display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); }
#authBox button{ background:none; border:1px solid var(--brass-dim); color:var(--brass); padding:5px 10px; border-radius:4px; cursor:pointer; font-size:12px; }
#authBox button:hover{ background:rgba(156,90,52,0.08); }

/* Barra di navigazione tra i moduli (Mappa, Luoghi, Eventi): condivisa tra
   le tre pagine principali, cosi nessuna resta un "vicolo cieco" rispetto
   alle altre. */
.nav-moduli{
  display:flex; gap:20px; padding:9px 18px; border-bottom:1px solid var(--line);
  background:var(--panel-2); font-size:12.5px;
}
.nav-moduli a{ text-decoration:none; color:var(--muted); }
.nav-moduli a:hover{ color:var(--brass); }
.nav-moduli a.attivo{ color:var(--brass); font-weight:600; }

/* Piè di pagina condiviso da tutte le pagine del sito (home, mappa,
   luoghi, eventi, e le pagine di servizio). */
footer.piede-sito{ padding:34px 24px 24px; text-align:center; border-top:1px solid var(--line); margin-top:24px; }
footer.piede-sito .marchio-footer{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:15px; }
footer.piede-sito .nota-footer{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--muted); font-size:13px; margin:2px 0 16px; }
footer.piede-sito .link-footer{ display:flex; justify-content:center; gap:18px; font-size:12.5px; color:var(--muted); }
footer.piede-sito .link-footer a{ text-decoration:none; }
footer.piede-sito .link-footer a:hover{ color:var(--brass); }
footer.piede-sito .copyright-footer{ font-size:11px; color:var(--muted); opacity:0.8; margin:14px 0 0; }
header h1{ margin:0; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:22px; letter-spacing:0.12em; text-transform:uppercase; }
header .sottotitolo{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12.5px; color:var(--muted); margin-top:1px; letter-spacing:0.03em; }
header .sottotitolo::before{ content:'❦  '; color:var(--accento); font-style:normal; }
.logo-sito{ height:48px; width:48px; border-radius:50%; display:block; }

/* Campi di formulario */
input[type="datetime-local"], input[type="text"], input[type="email"], input[type="password"], textarea{
  background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:4px;
  padding:6px 8px; font-family:'Courier Prime',monospace; font-size:12px; color-scheme: light;
}
textarea{ font-family:'Inter',sans-serif; font-size:13px; resize:vertical; }

input[type="datetime-local"]:focus, input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, textarea:focus{
  outline:none; border-color:var(--accento); box-shadow:0 0 0 2px rgba(110,139,122,0.22);
}

input[type="range"]{ -webkit-appearance:none; width:100%; height:4px; background:var(--line); border-radius:2px; }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--brass); cursor:pointer; border:3px solid var(--panel-2); box-shadow:0 0 0 1px var(--brass-dim); }
input[type="range"]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--brass); cursor:pointer; border:3px solid var(--panel-2); box-shadow:0 0 0 1px var(--brass-dim); }

/* Bottoni */
button.action{ background:var(--brass); color:#FBF3E1; border:none; border-radius:4px; padding:8px 16px; font-weight:600; cursor:pointer; font-size:13px; }
button.action:hover{ background:#7E4A2B; }
button.ghost{ background:none; border:1px solid var(--line); color:var(--muted); border-radius:4px; padding:6px 12px; cursor:pointer; font-size:12px; }
button.ghost:hover{ color:var(--text); border-color:var(--brass-dim); }

/* Blocco di controllo generico (etichetta + campo), usato nei form */
.ctrl{ display:flex; flex-direction:column; gap:5px; }
.ctrl label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); }
.ctrl .value{ font-family:'Courier Prime',monospace; font-size:12.5px; color:var(--brass); white-space:nowrap; }

/* Messaggi di stato/errore in fondo a un pannello */
#msg{ font-size:12px; color:var(--muted); margin-top:8px; min-height:14px; }
#msg.err{ color:var(--danger); }

/* Riquadro che segnala il periodo temporale attivo, per non darlo per scontato */
.avviso-periodo{ background:var(--avviso-sfondo); border:1px solid var(--avviso-bordo); border-radius:8px; padding:12px; }
.avviso-periodo-testo{ font-size:11.5px; color:var(--text); font-weight:600; margin:0 0 10px; }

/* Distinzione visiva ricordo/bottiglia: pensata per essere riusata ovunque
   nel sito si elenchino dei post (oggi in mappa.html, in futuro anche
   nella pagina "Luoghi"), non solo nel template corrente. */
/* Card di visualizzazione di un ricordo/bottiglia: nata in mappa.html,
   ora condivisa davvero (non solo in previsione) con il modulo Luoghi,
   che mostra le stesse card nella cronologia di un luogo. */
.post-card{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px; margin-bottom:12px; }
.post-meta{ font-family:'Courier Prime',monospace; font-size:11px; color:var(--muted); margin-bottom:6px; }
.post-titolo{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:18px; margin-bottom:4px; color:var(--brass); }
.post-text{ font-size:14px; line-height:1.5; margin-bottom:10px; font-family:'Cormorant Garamond',serif; }
.post-actions{ display:flex; gap:10px; }

.requisiti-password{ list-style:none; padding:0; margin:0 0 6px; font-size:11.5px; color:var(--muted); }
.requisiti-password li{ padding-left:16px; position:relative; margin-bottom:2px; }
.requisiti-password li::before{ content:"○"; position:absolute; left:0; }
.requisiti-password li.soddisfatto{ color:var(--accento); }
.requisiti-password li.soddisfatto::before{ content:"✓"; }

/* Galleria di miniature, condivisa da mappa/account/luoghi/eventi. */
.galleria-immagini{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.galleria-immagini img{ width:72px; height:72px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }

/* Come .galleria-immagini, ma con un piccolo pulsante di rimozione su ogni
   miniatura — usata solo da chi può gestire le immagini (autore/titolare
   o staff), non nella vista pubblica di sola lettura. */
.miniatura-gestibile{ position:relative; display:inline-block; }
.miniatura-gestibile img{ width:72px; height:72px; object-fit:cover; border-radius:6px; border:1px solid var(--line); display:block; }
.btn-rimuovi-immagine{
  position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  background:var(--danger); color:#FBF3E1; border:2px solid var(--panel-2);
  font-size:13px; line-height:1; cursor:pointer; padding:0;
}

.bottiglia-intro{ font-size:13px; color:var(--muted); max-width:520px; margin-top:0; margin-bottom:14px; font-style:italic; }
.post-card-bottiglia{ border-color:var(--brass-dim); background:linear-gradient(180deg, rgba(156,90,52,0.05), var(--panel)); }
.post-tipo-badge{
  display:inline-block; font-family:'Courier Prime',monospace; font-size:10.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--brass); border:1px solid var(--brass-dim); border-radius:10px;
  padding:2px 8px; margin-bottom:8px;
}

/* Dissolvenza morbida dei segnalini-ricordo sulla mappa: senza questa
   transizione, il cambio di opacità impostato via JS (setStyle) sarebbe
   comunque istantaneo. Il tempo qui deve coincidere con SEGNALINO_FADE_MS
   nello script della pagina che li disegna. */
.segnalino-ricordo{ transition: opacity 400ms ease, fill-opacity 400ms ease; }


/* ---------------------------------------------------------------
   Timeline Asteliar — navigazione temporale zoomabile
   La scala visualizzata cambia dinamicamente; la precisione interna
   arriva fino all'ora senza imporre una scala fissa all'utente.
--------------------------------------------------------------- */
.timeline-panel{
  margin-top:14px;
  padding:12px 12px 10px;
  background:rgba(246,237,214,0.58);
  border:1px solid var(--line);
  border-radius:8px;
}
.timeline-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.timeline-kicker{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text); font-weight:600; }
.timeline-readout{ margin-top:2px; font-family:'Courier Prime',monospace; font-size:15px; color:var(--text); font-weight:600; }
.timeline-tools{ display:flex; gap:5px; flex-shrink:0; }
.timeline-tool{
  min-width:30px; height:28px; padding:0 8px;
  border:1px solid var(--line); border-radius:4px;
  background:var(--panel-2); color:var(--text); cursor:pointer;
  font-family:'Inter',sans-serif; font-size:13px;
}
.timeline-tool:hover{ border-color:var(--brass-dim); color:var(--brass); }
.timeline-reset{ min-width:auto; font-size:11px; }
.timeline-help{ margin:7px 0 9px; font-size:11px; color:var(--text); opacity:.82; }
.timeline-viewport{
  position:relative; height:108px; overflow:hidden; cursor:ew-resize;
  touch-action:none; user-select:none; outline:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.timeline-viewport:focus-visible{ box-shadow:0 0 0 2px rgba(110,139,122,.25); border-radius:4px; }
.timeline-track{ position:absolute; left:0; right:0; top:76px; height:2px; background:var(--line); }
.timeline-tick{ position:absolute; top:0; height:76px; transform:translateX(-50%); pointer-events:none; }
.timeline-tick-mark{ display:block; width:1px; height:14px; margin:0 auto; background:var(--text); opacity:.58; }
.timeline-tick.minor .timeline-tick-mark{ height:7px; margin-top:0; opacity:.34; }
.timeline-tick.major .timeline-tick-mark{ height:17px; opacity:.72; }
.timeline-tick-text{ display:block; position:absolute; top:-30px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:'Courier Prime',monospace; font-size:11px; color:var(--text); font-weight:500; }
.timeline-cursor{
  position:absolute; top:8px; bottom:4px; width:0;
  border-left:1px solid var(--brass);
  transform:translateX(-1px); z-index:3; pointer-events:none;
}
.timeline-handle{
  position:absolute; left:50%; top:57px; width:26px; height:26px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--brass); border:3px solid var(--panel-2);
  box-shadow:0 0 0 1px var(--brass-dim);
}
.timeline-cursor-label{ display:none; }
.timeline-range-labels{ position:absolute; left:0; right:0; top:1px; z-index:4; display:flex; justify-content:space-between; gap:12px; font-family:'Courier Prime',monospace; font-size:11px; color:var(--text); font-weight:500; }

.timeline-range-labels span{ white-space:nowrap; font-size:11px; }
.timeline-range-labels span:last-child{ text-align:right; }
.timeline-tick-text.edge-left{ left:0; transform:none; }
.timeline-tick-text.edge-right{ left:auto; right:0; transform:none; }

.timeline-duration-divider{ margin-top:10px; }

@media (max-width:600px){
  .timeline-panel{ padding:11px 9px 9px; }
  .timeline-readout{ font-size:13.5px; }
  .timeline-help{ font-size:10.5px; }
  .timeline-cursor-label{ font-size:10px; }
  .timeline-tick-text{ font-size:10px; }
  .timeline-viewport{ height:108px; }
}