/* ============================================================================
   SoundPro — ESTILOS DEL NUCLEO
   Se escribe UNA vez y lo usan todas las apps. Cambiar aqui cambia la familia
   entera: no hay copias por app.
   El color de acento lo pone cada app con <body style="--acento:#EF4444">,
   tomado de apps.json. Todo lo demas es igual para todas.
   ========================================================================== */

:root {
  --fondo: #0a0a0f;
  --superficie: #16161d;
  --superficie2: #1f1f28;
  --borde: #2a2a35;

  --acento: #d4af37;
  --acento-suave: rgba(212, 175, 55, 0.14);

  --texto: #ffffff;
  --texto-suave: #8a8f9e;

  --ok: #22c55e;
  --alerta: #ef4444;
  --info: #3b82f6;

  --radio: 14px;
  --radio-chico: 9px;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.45);

  --barra: 54px;
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  overscroll-behavior-y: none;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.4em; font-weight: 700; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Barra superior de la app ------------------------------------------- */
.sp-barra {
  position: sticky; top: 0; z-index: 40;
  height: var(--barra);
  padding-top: var(--seguro-arriba);
  display: flex; align-items: center; gap: 10px;
  padding-left: 14px; padding-right: 14px;
  background: rgba(10, 10, 15, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.sp-barra__logo { height: 26px; width: auto; display: block; }
.sp-barra__titulo { font-weight: 700; letter-spacing: 0.4px; }
.sp-barra__titulo b { color: var(--acento); }
.sp-barra__hueco { flex: 1; }

/* --- Contenido ----------------------------------------------------------- */
.sp-caja {
  max-width: 900px; margin: 0 auto;
  padding: 18px 14px calc(30px + var(--seguro-abajo));
}
.sp-caja--ancha { max-width: 1200px; }

.sp-tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 14px;
}
.sp-tarjeta--plana { background: var(--superficie2); }

.sp-etiqueta {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--texto-suave); font-weight: 600;
}

.sp-suave { color: var(--texto-suave); }
.sp-chico { font-size: 0.82rem; }
.sp-centrado { text-align: center; }
.sp-numeros { font-variant-numeric: tabular-nums; }

/* --- Botones ------------------------------------------------------------- */
.sp-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--radio-chico);
  background: var(--acento); color: #0a0a0f;
  font: inherit; font-weight: 700; cursor: pointer;
  transition: filter 0.15s;
}
.sp-boton:hover { filter: brightness(1.12); }
.sp-boton:active { transform: translateY(1px); }
.sp-boton:disabled { opacity: 0.45; cursor: default; }

.sp-boton--fantasma {
  background: transparent; color: var(--texto);
  border: 1px solid var(--borde);
}
.sp-boton--ancho { width: 100%; }
.sp-boton--chico { min-height: 34px; padding: 0 12px; font-size: 0.85rem; }

/* --- Rejilla ------------------------------------------------------------- */
.sp-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --- Etiquetas de plan --------------------------------------------------- */
.sp-plan {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
}
.sp-plan--gratis { background: rgba(34, 197, 94, 0.16); color: var(--ok); }
.sp-plan--pago { background: var(--acento-suave); color: var(--acento); }

/* --- Aviso de version nueva ---------------------------------------------- */
.sp-aviso {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--seguro-abajo));
  z-index: 90; display: none;
  align-items: center; gap: 12px;
  background: var(--superficie2); border: 1px solid var(--acento);
  border-radius: var(--radio); padding: 12px 14px; box-shadow: var(--sombra);
}
.sp-aviso--visible { display: flex; }
.sp-aviso__texto { flex: 1; font-size: 0.88rem; }

/* ============================================================================
   MOTOR DE AUDIO — controles compartidos por Playback y DJ
   ========================================================================== */

.sp-mando { display: flex; flex-direction: column; gap: 4px; }
.sp-mando__cabecera {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.78rem; color: var(--texto-suave);
}
.sp-mando__valor { color: var(--acento); font-weight: 700; font-variant-numeric: tabular-nums; }

input[type="range"].sp-deslizador {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"].sp-deslizador::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--superficie2);
}
input[type="range"].sp-deslizador::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--acento); border: 2px solid var(--fondo);
}
input[type="range"].sp-deslizador::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--superficie2);
}
input[type="range"].sp-deslizador::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--fondo); background: var(--acento);
}
/* Deslizador vertical: platos del DJ */
input[type="range"].sp-deslizador--vertical {
  writing-mode: vertical-lr; direction: rtl;
  width: 26px; height: 100%;
}

/* --- Onda ---------------------------------------------------------------- */
.sp-onda {
  width: 100%; height: 56px; display: block;
  background: var(--superficie2); border-radius: var(--radio-chico);
}
.sp-onda--grande { height: 90px; }

/* --- Aviso de audio ------------------------------------------------------ */
.sp-audio-aviso {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: var(--radio);
  padding: 12px 14px; margin-bottom: 14px; font-size: 0.88rem;
}

/* --- Estado vacio -------------------------------------------------------- */
.sp-vacio { text-align: center; padding: 40px 16px; color: var(--texto-suave); }

/* --- Utilidades ---------------------------------------------------------- */
.sp-oculto { display: none !important; }
.sp-apagado { opacity: 0.45; pointer-events: none; }
.sp-solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}