/* ---------------------------------------------------------------
   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;
}

*{ 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; }
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:14px; height:14px; border-radius:50%; background:var(--brass); cursor:pointer; border:2px solid var(--panel-2); }

/* 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; }