/* ============================================================
   TEMA WINAMP MODERNO — l'anima del classico (scuro, verde LCD,
   oro) con finiture da app di oggi: angoli morbidi, ombre vere,
   mono pulito. CSS originale. Carica dopo style.css e vince.
   ============================================================ */

/* la tavolozza sta in tema.css, che va caricato prima di questo file */

body.admin {
  background:
    radial-gradient(1000px 500px at 50% -10%, rgba(46, 229, 107, .05), transparent 60%),
    linear-gradient(180deg, var(--wm-fondo1), var(--wm-fondo0));
  color: var(--wm-testo);
  font-family: "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--wm-carta-su); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* carte: profondità morbida al posto degli smussi duri */
.pannello, .player, .admin-login {
  background: linear-gradient(180deg, var(--wm-carta-su), var(--wm-carta));
  border: 1px solid var(--wm-linea);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}
.pannello h2 {
  background: none;
  color: var(--wm-muto);
  font-size: .78rem !important;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-bottom: .6rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--wm-linea);
}

/* testata */
.musica-testata .hero-nomi {
  font-family: var(--wm-mono) !important;
  color: var(--wm-verde-lcd) !important;
  /* niente alone: sul chiaro sporcava */
  letter-spacing: .02em;
}
.musica-testata .hero-nomi .amp { color: var(--wm-oro); }
.momenti-sotto { color: var(--wm-muto); }

/* pulsanti: pillole scure con bordo che si accende */
.btn, .chips button, .eq-preset button, .pl-scelta button, .cerca-riga button, .viste button {
  background: var(--wm-carta-su) !important;
  color: var(--wm-testo) !important;
  border: 1px solid var(--wm-linea) !important;
  border-radius: 12px !important;
  box-shadow: none;
  text-transform: none;
  letter-spacing: .02em;
  font-family: inherit;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover, .chips button:hover, .eq-preset button:hover, .pl-scelta button:hover, .cerca-riga button:hover, .viste button:hover {
  background: var(--wm-carta-su) !important;
  border-color: var(--wm-verde) !important;
  color: var(--wm-testo) !important;
  box-shadow: 0 0 0 3px rgba(46, 229, 107, .12);
  transform: none;
}
.btn-oro { color: var(--wm-oro) !important; }
.btn-oro:hover { border-color: var(--wm-oro) !important; box-shadow: 0 0 0 3px rgba(240, 181, 69, .15); }
.btn[disabled], .btn-spento { opacity: .38; }

/* player: la console */
.player { padding: 1.1rem 1.3rem; }
.player button {
  background: transparent;
  border: 1px solid var(--wm-linea);
  border-radius: 50%;
  color: var(--wm-testo);
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.player button:hover { background: transparent; border-color: var(--wm-verde); color: var(--wm-verde); box-shadow: 0 0 0 3px rgba(46,229,107,.12); }
.player button.acceso { background: rgba(46, 229, 107, .14); border-color: var(--wm-verde); color: var(--wm-verde); }
#ora-suona {
  font-family: var(--wm-mono);
  font-style: normal;
  font-size: 1.1rem;
  background: var(--wm-lcd-fondo);
  color: var(--wm-lcd-testo);
  text-shadow: none;
  padding: .5rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--wm-lcd-bordo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tempo-mini {
  font-family: var(--wm-mono);
  font-size: .95rem;
  background: var(--wm-lcd-fondo);
  color: var(--wm-verde);
  padding: .35rem .6rem;
  border-radius: 8px;
  border: 1px solid var(--wm-lcd-bordo);
  opacity: 1;
}
.avanzamento { height: .5rem; background: var(--wm-traccia); border-radius: 99px; }
.avanzamento div { background: linear-gradient(90deg, var(--wm-ok), var(--wm-verde)); border-radius: 99px; }
.manopole { color: var(--wm-muto); }
.manopole input[type=range], .eqpro-vol input { accent-color: var(--wm-verde); }
.manopole b { color: var(--wm-testo); }
.eq summary { color: var(--wm-oro); }
.eq-nota { color: var(--wm-muto); }

/* barra delle 10 ore */
.budget-barra { background: var(--wm-traccia); border-radius: 99px; }
.budget-barra div { background: linear-gradient(90deg, var(--wm-ok) 60%, var(--wm-oro) 85%, var(--wm-no)); border-radius: 99px; }
.budget p { color: var(--wm-muto); }

/* playlist: righe morbide, selezione blu moderna */
.pl-scelta select {
  background: var(--wm-fondo1); color: var(--wm-testo);
  border: 1px solid var(--wm-linea); border-radius: 12px;
  font-family: inherit; font-size: 1rem;
}
.lista-brani { background: transparent; box-shadow: none; }
.lista-brani li {
  border-bottom: none; border-radius: 10px;
  padding: .5rem .6rem; margin-bottom: 2px;
  color: var(--wm-testo);
  transition: background .12s;
}
.lista-brani li:hover { background: rgba(255, 255, 255, .045); }
.lista-brani li.suona-ora {
  background: linear-gradient(90deg, rgba(91, 140, 255, .22), rgba(91, 140, 255, .05));
  box-shadow: inset 3px 0 0 var(--wm-blu);
}
.lista-brani .titolo { color: var(--wm-testo); font-family: inherit; }
.lista-brani .titolo:hover { color: var(--wm-verde); }
.lista-brani li.suona-ora .titolo { color: var(--wm-testo); }
.lista-brani .durata-b { color: var(--wm-verde); font-family: var(--wm-mono); font-size: .9rem; opacity: .9; }
.lista-brani button { color: var(--wm-muto); border-radius: 8px; }
.lista-brani button:hover { color: var(--wm-oro); }
.etichetta.et-upload { background: rgba(240, 181, 69, .14); color: var(--wm-oro); }
.etichetta.et-nas { background: rgba(91, 140, 255, .14); color: var(--wm-blu); }

/* ricerca e archivio */
.cerca-riga input {
  background: var(--wm-lcd-fondo); color: var(--wm-lcd-testo);
  border: 1px solid var(--wm-lcd-bordo); border-radius: 12px;
  font-family: var(--wm-mono); font-size: 1.05rem;
  transition: box-shadow .15s;
}
.cerca-riga input:focus { outline: none; box-shadow: 0 0 0 3px rgba(46, 229, 107, .15); }
.cerca-riga input::placeholder { color: var(--wm-lcd-testo); opacity: .55; }
.archivio, #consigli { background: transparent; box-shadow: none; padding: 0; }
.arch-cartella, .arch-brano {
  border-bottom: none; border-radius: 10px;
  padding: .45rem .55rem; margin-bottom: 1px;
  transition: background .12s;
}
.arch-cartella:hover, .arch-brano:hover { background: rgba(255, 255, 255, .045); }
.arch-cartella { color: var(--wm-oro); }
.arch-cartella:hover { color: var(--wm-oro); }
.arch-brano .nome { color: var(--wm-testo); }
.arch-brano b { color: var(--wm-verde); font-weight: 700; }
.ris-percorso { color: var(--wm-muto); opacity: 1; }
.motivo { color: var(--wm-oro); }
.durata-b { color: var(--wm-muto); font-family: var(--wm-mono); font-size: .85rem; }
.consigli-titolo { color: var(--wm-oro); letter-spacing: .06em; }
.nav-archivio button { color: var(--wm-oro); }
.chips button { border-radius: 999px !important; font-size: .82rem; color: var(--wm-muto) !important; }
.chips button:hover { color: var(--wm-testo) !important; }
.btn-piu {
  border: 1px solid rgba(240, 181, 69, .5) !important; color: var(--wm-oro) !important;
  background: none !important; border-radius: 999px; box-shadow: none;
  transition: box-shadow .15s, border-color .15s;
}
.btn-piu:hover { border-color: var(--wm-oro) !important; box-shadow: 0 0 0 3px rgba(240, 181, 69, .14); }
.btn-antep {
  border: 1px solid rgba(46, 229, 107, .5) !important; color: var(--wm-verde) !important;
  background: none !important;
}
.btn-antep:hover { border-color: var(--wm-verde) !important; box-shadow: 0 0 0 3px rgba(46, 229, 107, .14); }
.indice-nota, .indice-nota a { color: var(--wm-muto); }
.viste button.attiva { border-color: var(--wm-oro) !important; color: var(--wm-oro) !important;
  box-shadow: 0 0 0 3px rgba(255, 200, 97, .18); background: rgba(255,200,97,.08) !important; }
.lib-riga .nome { color: var(--wm-testo); }
/* riga brano leggibile al sole: titolo chiaro, sottotitolo comunque distinguibile */
.arch-brano .tit { color: var(--wm-testo); }
.arch-brano .ris-percorso, .arch-brano .motivo { color: #cfa85f; }
.arch-brano .btn-antep { border-color: var(--wm-verde) !important; color: var(--wm-verde) !important; }
.arch-brano .btn-piu { border-color: var(--wm-oro) !important; color: var(--wm-oro) !important; font-weight: 700; }
.arch-brano:hover { background: rgba(255,255,255,.06); }
.chips button { color: var(--wm-testo) !important; }

/* caricamento e bacheca */
.dropzone {
  background: rgba(255, 255, 255, .02);
  border: 1.5px dashed rgba(46, 229, 107, .35);
  border-radius: 16px; color: var(--wm-testo);
}
.dropzone:hover, .dropzone.trascina { background: rgba(46, 229, 107, .06); border-color: var(--wm-verde); }
.dz-testo small { color: var(--wm-muto); }
.lista-file { background: var(--wm-fondo1); border-color: var(--wm-linea); color: var(--wm-testo); border-radius: 12px; }
.barra { background: var(--wm-traccia); border-radius: 99px; }
.barra-riempi { background: linear-gradient(90deg, var(--wm-ok), var(--wm-verde)); border-radius: 99px; }
.esito-musica.ok { color: var(--wm-verde); }
.esito-musica.errore { color: var(--wm-no); }
.bacheca-titolo { color: var(--wm-oro); letter-spacing: .06em; }
.bacheca-riga { border-bottom: 1px solid var(--wm-linea); color: var(--wm-testo); border-radius: 0; }
.bacheca-riga small { color: var(--wm-muto); }

/* login */
.campo span { color: var(--wm-testo); }
.campo small { color: var(--wm-muto); }
.campo input {
  background: var(--wm-fondo1); color: var(--wm-testo);
  border: 1px solid var(--wm-linea); border-radius: 12px;
}
.campo input:focus { outline: none; border-color: var(--wm-verde); box-shadow: 0 0 0 3px rgba(46,229,107,.12); }
.admin-login h1 { color: var(--wm-testo); font-weight: 500; }
.admin-login .hero-nomi { font-family: var(--wm-mono) !important;
  color: var(--wm-verde-lcd) !important; }
.fondo-mini a { color: var(--wm-muto); }
.errore { color: var(--wm-no); }

/* EQ Pro */
#eqpro { background: linear-gradient(180deg, var(--wm-carta), var(--wm-fondo0)); }
.eqpro-testa { color: var(--wm-testo); letter-spacing: .1em; font-size: 1.05rem; }
.eqpro-testa button { border: 1px solid var(--wm-linea); color: var(--wm-testo); background: var(--wm-carta-su); }
.eqpro-testa button:hover { border-color: var(--wm-oro); color: var(--wm-oro); }
#eqpro-spettro { background: var(--wm-lcd-fondo); border-radius: 14px; border: 1px solid var(--wm-lcd-bordo); box-shadow: none; }
.eqpro-banda input[type=range] { accent-color: var(--wm-verde); }
.eqpro-banda .hz { color: var(--wm-muto); }
.eqpro-banda .db { color: var(--wm-verde); font-family: var(--wm-mono); font-size: .9rem; }
.eqpro-preset button { border: 1px solid var(--wm-linea); color: var(--wm-testo); background: var(--wm-carta-su); border-radius: 999px; }
.eqpro-preset button:hover { border-color: var(--wm-oro); color: var(--wm-oro); background: var(--wm-carta-su); }
.eqpro-vol { color: var(--wm-muto); }

/* momenti (per completezza) */
.momento { background: var(--wm-carta); border: 1px solid var(--wm-linea); border-radius: 14px; }
.momento-suona { background: rgba(46, 229, 107, .12); color: var(--wm-verde); border-radius: 10px; }
.momento-suona:hover { background: rgba(240, 181, 69, .16); color: var(--wm-oro); }
.momento-brano, .momento-azioni button { color: var(--wm-muto); }
.assegna-banda { background: var(--wm-oro); color: var(--wm-su-oro); border-radius: 12px; }


/* ============================================================
   1. GIORNO E NOTTE
   Gli stessi disegni, due tavolozze. Il tema si sceglie col
   pallino sole/luna e resta in memoria sul telefono.
   Le tinte chiare non sono le scure schiarite: sul bianco il
   verde #4dff8f fa 1,4 di contrasto (illeggibile), quindi in
   chiaro diventa un verde bosco che di contrasto ne fa 5,3.
   ============================================================ */
html[data-tema="chiaro"] body.admin {
  background:
    radial-gradient(1000px 500px at 50% -10%, rgba(15, 122, 61, .05), transparent 60%),
    linear-gradient(180deg, var(--wm-fondo1), var(--wm-fondo0));
  color: var(--wm-testo);
}
html[data-tema="chiaro"] .pannello,
html[data-tema="chiaro"] .player,
html[data-tema="chiaro"] .admin-login { box-shadow: var(--wm-ombra); }
html[data-tema="chiaro"] .campo input,
html[data-tema="chiaro"] #eqpro { background: var(--wm-carta); }
html[data-tema="chiaro"] #eqpro-spettro { background: #0d1a12; }  /* lo spettro resta al buio: si vede meglio */
html[data-tema="chiaro"] .musica-testata .hero-nomi { text-shadow: none; }
html[data-tema="chiaro"] .assegna-banda { color: var(--wm-su-oro); }


/* ============================================================
   2. LARGHEZZA UTILE SUL TELEFONO
   Prima: finestra 375 -> testo 267 px. Un terzo se ne andava in
   bordi dentro bordi. Sul telefono il riquadro dei pannelli
   sparisce e al suo posto resta una riga di divisione: si
   capisce lo stesso dove finisce una sezione, e il testo si
   riprende oltre due centimetri.
   ============================================================ */
@media (max-width: 760px) {
  body.admin { padding: 0; }
  /* la barra dei comandi copre il fondo: la pagina si allunga per non finirci sotto */
  /* lo spazio in fondo segue l'altezza vera della barra, cassetto compreso */
  body.con-barra { padding-bottom: calc(var(--barra-alta, 5.6rem) + .6rem); }
  .admin { padding: .1rem 0 1.2rem; }
  .musica-corpo { padding: .45rem; }
  .pannello {
    background: none; border: 0; border-radius: 0; box-shadow: none;
    padding: .9rem .1rem 1.1rem;
    border-top: 1px solid var(--wm-linea);   /* il divisore che resta */
  }
  .colonne > .pannello:first-child { border-top: 0; }
  .pannello h2 { margin-bottom: .6rem; padding-bottom: .45rem; }
  /* il lettore invece il suo riquadro se lo tiene: è la cosa che
     deve saltare all'occhio mentre si guida o si cucina */
  .player { padding: .8rem .75rem; }
  .lista-brani li, .arch-brano, .arch-cartella { padding-left: .1rem; padding-right: .1rem; }
  .testo-canzone { padding: .7rem .6rem; }

  /* ---- misura dei testi ----
     Il corpo scende da 1,15rem a 0,95: su 6 pollici entra una riga in
     più per ogni tre, e i titoli lunghi smettono di andare a capo.
     I TASTI restano come sono: si toccano col pollice, e un pollice
     non rimpicciolisce. */
  body.admin { font-size: .95rem; }
  .musica-testata h1, .musica-testata .hero-nomi { font-size: 1.35rem; }
  .pannello h2 { font-size: .7rem !important; letter-spacing: .16em; }
  #ora-suona { font-size: .98rem; }
  .lista-brani li, .arch-brano { font-size: .9rem; }
  .pl-corrente, .budget, .momenti-sotto, .dz-dett summary { font-size: .8rem; }
  .btn { font-size: .88rem; }
}

/* la riga "playlist attiva": è un promemoria, non un titolo — deve
   leggersi senza rubare l'occhio al resto */
.pl-corrente { color: var(--wm-muto); opacity: 1; }