/*
 * Audion — base.css
 * Reset + custom properties. Paleta "Terracota nocturna": oscuro por
 * defecto (uso nocturno con auriculares), con variante clara.
 * Ver temas.css para los overrides de [data-tema="claro"] y prefers-color-scheme.
 */

:root {
  /* Paleta — oscuro (por defecto) */
  --color-fondo: #161311;
  --color-fondo-elevado: #1F1A16;
  --color-fondo-hover: #2A2320;
  --color-borde: #332A24;
  --color-texto: #F5EDE7;
  --color-texto-tenue: #B9AFA6;
  --color-texto-difuso: #8A7F76;

  --color-acento: #FF6B4A;
  --color-acento-hover: #FF8367;
  --color-acento-texto: #1A0E08;

  --color-exito: #4ADE80;
  --color-error: #F87171;
  --color-advertencia: #FBBF24;

  --sombra-elevada: 0 8px 24px rgba(0, 0, 0, 0.35);

  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-lg: 16px;

  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 24px;
  --espacio-6: 32px;
  --espacio-8: 48px;

  --fuente-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Manrope, sans-serif;
  --altura-mini-reproductor: 72px;

  color-scheme: dark;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-base);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Solo reservamos el espacio del mini-reproductor cuando hay audio cargado
   (mini-player.js agrega la clase). */
body.con-mini-reproductor {
  padding-bottom: calc(var(--altura-mini-reproductor) + env(safe-area-inset-bottom, 0px));
}

img, svg {
  max-width: 100%;
  display: block;
}

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

a:hover {
  color: var(--color-acento-hover);
}

h1, h2, h3, h4, p {
  margin: 0 0 var(--espacio-3);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Foco visible siempre — accesibilidad de teclado */
:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.contenedor {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--espacio-4);
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}