/* ============================================================
   contenido.css — lo que va DENTRO de las ventanas:
   el reproductor, la lista de demos, el diario y la galería.
   ============================================================ */

/* ------------------------------------------------------------
   1. TEXTO CORRIENTE
------------------------------------------------------------ */
.cuerpo p { margin: 0 0 .8em; }
.cuerpo p:last-child { margin-bottom: 0; }

.cuerpo h2 {
  margin: 0 0 .6em;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: lowercase;
}

.cuerpo h3 {
  margin: 1.2em 0 .4em;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
}

.cuerpo a {
  color: var(--acento);
  text-underline-offset: 2px;
}

.cuerpo a:hover { background: var(--seleccion); color: var(--seleccion-txt); }

.cuerpo hr {
  height: 2px;
  margin: 1em 0;
  border: 0;
  box-shadow: inset 0 1px 0 0 var(--chrome-sombra), inset 0 2px 0 0 var(--chrome-luz);
}

.cuerpo ul.simple { margin: 0 0 .8em; padding-left: 1.2em; }

.mono { font-family: var(--fuente-mono); }
.tenue { color: var(--texto-suave); }

/* Aviso de "sin contenido todavía". */
.vacio {
  padding: 14px;
  font-family: var(--fuente-mono);
  font-size: 11px;
  text-align: center;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------
   2. CONTROLES RETRO (botones y deslizadores)
------------------------------------------------------------ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 12px;
  border: 0;
  font: inherit;
  font-size: 11px;
  color: var(--texto);
  cursor: pointer;
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-negro),
    inset  1px  1px 0 0 var(--chrome-luz),
    inset -2px -2px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-medio);
}

.boton:active,
.boton[aria-pressed="true"] {
  box-shadow:
    inset  1px  1px 0 0 var(--chrome-negro),
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  2px  2px 0 0 var(--chrome-sombra),
    inset -2px -2px 0 0 var(--chrome-medio);
}

.boton[disabled] { color: var(--chrome-sombra); text-shadow: 1px 1px 0 var(--chrome-luz); cursor: default; }

/* Deslizador estilo Windows 98: canal hundido + tirador en relieve. */
.deslizador {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}

.deslizador::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  1px  1px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-negro);
}

.deslizador::-moz-range-track {
  height: 4px;
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  1px  1px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-negro);
}

.deslizador::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 20px;
  margin-top: -8px;
  border: 0;
  border-radius: 0;
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-negro),
    inset  1px  1px 0 0 var(--chrome-luz),
    inset -2px -2px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-medio);
}

.deslizador::-moz-range-thumb {
  width: 11px;
  height: 20px;
  border: 0;
  border-radius: 0;
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-negro),
    inset  1px  1px 0 0 var(--chrome-luz),
    inset -2px -2px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-medio);
}

/* ------------------------------------------------------------
   3. REPRODUCTOR
------------------------------------------------------------ */
.reproductor { display: grid; gap: 8px; }

.repro-cabecera {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: start;
}

.repro-portada {
  width: 64px;
  height: 64px;
  padding: 2px;
  background: var(--campo);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  1px  1px 0 0 var(--chrome-sombra),
    inset -2px -2px 0 0 var(--chrome-medio),
    inset  2px  2px 0 0 var(--chrome-negro);
}

.repro-portada img { width: 100%; height: 100%; object-fit: cover; }

.repro-info { min-width: 0; display: grid; gap: 6px; align-content: start; }

/* Marquesina: solo se desplaza si el texto no cabe (lo decide el JS). */
.repro-titulo {
  overflow: hidden;
  padding: 3px 5px;
  font-family: var(--fuente-mono);
  font-size: 12px;
  white-space: nowrap;
  background: var(--campo);
  color: var(--campo-texto);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  1px  1px 0 0 var(--chrome-sombra),
    inset -2px -2px 0 0 var(--chrome-medio),
    inset  2px  2px 0 0 var(--chrome-negro);
}

.repro-titulo > span { display: inline-block; will-change: transform; }

.repro-titulo.desplaza > span {
  animation: marquesina var(--dur, 12s) linear infinite;
}

@keyframes marquesina {
  0%, 6%   { transform: translateX(0); }
  94%, 100%{ transform: translateX(var(--desp, -100%)); }
}

.repro-titulo.error { color: #b00020; }
:root[data-tema="nocturno"] .repro-titulo.error { color: #ff6b6b; }

/* El visualizador: dibujado con datos reales del AnalyserNode. */
.repro-visual {
  padding: 2px;
  background: #000;
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  1px  1px 0 0 var(--chrome-sombra),
    inset -2px -2px 0 0 var(--chrome-medio),
    inset  2px  2px 0 0 var(--chrome-negro);
}

.repro-visual canvas {
  display: block;
  width: 100%;
  height: 44px;
}

.repro-tiempos {
  display: flex;
  justify-content: space-between;
  font-family: var(--fuente-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
}

.repro-transporte {
  display: flex;
  gap: 4px;
}

.repro-transporte .boton {
  flex: 1 1 auto;
  min-height: 30px;
  font-family: var(--fuente-mono);
  font-size: 13px;
}

.repro-transporte .boton.principal { flex: 1.6 1 auto; }

.repro-fila {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}

.repro-fila label { color: var(--texto-suave); font-family: var(--fuente-mono); }

/* ------------------------------------------------------------
   4. LISTA DE DEMOS
------------------------------------------------------------ */
.lista-pistas {
  margin: 0;
  padding: 2px;
  list-style: none;
  background: var(--campo);
  color: var(--campo-texto);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  1px  1px 0 0 var(--chrome-sombra),
    inset -2px -2px 0 0 var(--chrome-medio),
    inset  2px  2px 0 0 var(--chrome-negro);
}

.pista {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 8px;
  align-items: baseline;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: var(--fuente-mono);
}

.pista:hover { background: color-mix(in srgb, var(--seleccion) 18%, transparent); }

.pista[aria-current="true"] {
  background: var(--seleccion);
  color: var(--seleccion-txt);
}

.pista .num { color: var(--texto-suave); }
.pista[aria-current="true"] .num { color: inherit; }

.pista .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pista .dur { font-variant-numeric: tabular-nums; opacity: .8; }

.pista.sin-audio { cursor: default; opacity: .55; }

/* Ficha desplegable de cada demo: notas + imágenes adjuntas. */
.ficha { margin: 0; padding: 0 8px 10px 42px; font-size: 11px; }
.ficha[hidden] { display: none; }
.ficha .adjuntos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ficha .adjuntos img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  cursor: pointer;
  padding: 2px;
  background: var(--campo);
  box-shadow: inset 0 0 0 1px var(--chrome-sombra);
}

/* ------------------------------------------------------------
   5. DIARIO
------------------------------------------------------------ */
.entrada + .entrada {
  margin-top: 16px;
  padding-top: 16px;
  box-shadow: inset 0 1px 0 0 var(--chrome-sombra), inset 0 2px 0 0 var(--chrome-luz);
}

.entrada .fecha {
  margin: 0 0 4px;
  font-family: var(--fuente-mono);
  font-size: 11px;
  color: var(--texto-suave);
}

.entrada h3 {
  margin: 0 0 .5em;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto);
}

.entrada .texto { font-size: 12px; }

.entrada .adjuntos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.entrada .adjuntos img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  cursor: pointer;
  padding: 2px;
  background: var(--campo);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  1px  1px 0 0 var(--chrome-sombra);
}

/* ------------------------------------------------------------
   6. GALERÍA DE DIBUJOS
------------------------------------------------------------ */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}

.galeria figure { margin: 0; }

.galeria button {
  display: block;
  width: 100%;
  padding: 3px;
  border: 0;
  cursor: pointer;
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-negro),
    inset  1px  1px 0 0 var(--chrome-luz),
    inset -2px -2px 0 0 var(--chrome-sombra),
    inset  2px  2px 0 0 var(--chrome-medio);
}

.galeria button:active {
  box-shadow:
    inset  1px  1px 0 0 var(--chrome-negro),
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  2px  2px 0 0 var(--chrome-sombra),
    inset -2px -2px 0 0 var(--chrome-medio);
}

.galeria img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.galeria figcaption {
  padding: 4px 2px 0;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  color: var(--texto-suave);
  word-break: break-word;
}

/* Visor de imagen a tamaño completo. */
#v-visor .cuerpo { padding: 6px; background: #000; }
#v-visor img { margin: 0 auto; max-height: 68vh; object-fit: contain; }
#v-visor .pie {
  padding: 8px 4px 2px;
  font-size: 11px;
  text-align: center;
  color: #9a9a9a;
}

/* ------------------------------------------------------------
   7. PANEL DE CONTROL
------------------------------------------------------------ */
.campo-grupo {
  margin: 0 0 12px;
  padding: 12px 10px 10px;
  border: 0;
  position: relative;
  box-shadow:
    inset -1px -1px 0 0 var(--chrome-luz),
    inset  1px  1px 0 0 var(--chrome-sombra),
    inset -2px -2px 0 0 var(--chrome-medio),
    inset  2px  2px 0 0 var(--chrome-luz);
}

.campo-grupo legend {
  padding: 0 5px;
  font-size: 11px;
  color: var(--texto-suave);
  /* Sin fondo, el borde del recuadro atraviesa el texto. */
  background: var(--chrome);
}

.opciones { display: grid; gap: 8px; }

.opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
}

.opcion input { width: 14px; height: 14px; accent-color: var(--acento); }

.muestra-tema {
  width: 34px;
  height: 18px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px var(--chrome-sombra);
}

/* ------------------------------------------------------------
   8. MINI-REPRODUCTOR (solo móvil)
   Barra fija sobre la barra de tareas para que la música siga
   a mano aunque estés leyendo el diario.
------------------------------------------------------------ */
#mini-repro { display: none; }

@media (max-width: 760px) {
  #mini-repro {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--barra-alto) + env(safe-area-inset-bottom, 0px));
    z-index: 8500;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: var(--chrome);
    box-shadow:
      inset  0  1px 0 0 var(--chrome-luz),
      inset  0  2px 0 0 var(--chrome-medio),
      0 -2px 6px rgba(0,0,0,.3);
  }

  #mini-repro[hidden] { display: none; }

  #mini-repro .mini-play {
    flex: 0 0 auto;
    width: 38px;
    height: 32px;
    font-size: 14px;
    font-family: var(--fuente-mono);
  }

  #mini-repro .mini-info {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  #mini-repro .mini-titulo {
    font-family: var(--fuente-mono);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #mini-repro .mini-barra {
    height: 5px;
    background: var(--chrome);
    box-shadow:
      inset  1px  1px 0 0 var(--chrome-sombra),
      inset -1px -1px 0 0 var(--chrome-luz);
  }

  #mini-repro .mini-progreso {
    height: 100%;
    width: 0;
    background: var(--acento);
  }

  #mini-repro .mini-abrir {
    flex: 0 0 auto;
    width: 34px;
    height: 32px;
    font-family: var(--fuente-mono);
  }
}

/* ------------------------------------------------------------
   9. FILA DE PISTA
   La fila es el botón de reproducir; el "▾" de al lado abre la
   ficha con la nota y los dibujos adjuntos.
------------------------------------------------------------ */
.fila-pista {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.fila-pista .ficha { grid-column: 1 / -1; }

.mas {
  align-self: stretch;
  min-width: 30px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.mas:hover,
.mas[aria-expanded="true"] {
  background: color-mix(in srgb, var(--seleccion) 18%, transparent);
  color: var(--campo-texto);
}

@media (max-width: 760px) {
  .mas { min-width: 44px; }
  .pista { padding: 10px 8px; }
}