/* inpantalla — tokens de diseño. Marca de Overant (overant.com).
   Ningún componente escribe un color a mano: todo sale de aquí, que es lo que
   permite la marca blanca por distribuidor. */

:root {
  /* Marca */
  --naranja-marca:  #EB690E;  /* logotipo: decorativo, nunca texto */
  --naranja:        #FF6600;  /* el naranja de overant.com */
  --naranja-claro:  #FF8533;  /* hover, degradados */
  --naranja-accion: #C74F00;  /* botón con texto blanco — AA 4,6:1 */
  --naranja-texto:  #B34700;  /* enlaces sobre claro — AA 5,5:1 */

  /* Neutros */
  --carbon:      #2C2927;     /* negro cálido del logotipo */
  --tinta:       #333333;
  --gris:        #666666;
  --linea:       #DDDDDD;
  --fondo-suave: #F5F5F5;
  --blanco:      #FFFFFF;

  /* Estado */
  --ok:    #1D7A4C;
  --aviso: #B26A00;
  --error: #B3261E;
  --info:  #235DAB;

  /* Semánticos — son los que usan los componentes */
  --fondo:        var(--fondo-suave);
  --superficie:   var(--blanco);
  --texto:        var(--carbon);
  --texto-suave:  var(--gris);
  --borde:        var(--linea);
  --acento:       var(--naranja-accion);
  --acento-suave: var(--naranja);
  --enlace:       var(--naranja-texto);

  /* Tipografía */
  --fuente: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Forma y ritmo */
  --radio: 6px;
  --radio-grande: 10px;
  --sombra: 0 1px 2px rgba(44, 41, 39, .08), 0 2px 8px rgba(44, 41, 39, .04);
  --fila: 40px;
  --espacio: 8px;
}

/* Oscuro: por preferencia del sistema, salvo que se fuerce claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:       #1A1817;
    --superficie:  #2C2927;
    --texto:       #F2EFED;
    --texto-suave: #A8A29E;
    --borde:       #3D3937;
    --acento:      #FF7A1A;
    --enlace:      #FF8533;
    --sombra: 0 1px 2px rgba(0, 0, 0, .5);
  }
}

/* Oscuro forzado */
:root[data-tema="oscuro"] {
  --fondo:       #1A1817;
  --superficie:  #2C2927;
  --texto:       #F2EFED;
  --texto-suave: #A8A29E;
  --borde:       #3D3937;
  --acento:      #FF7A1A;
  --enlace:      #FF8533;
  --sombra: 0 1px 2px rgba(0, 0, 0, .5);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
}

/* La barra lateral es el único sitio donde el naranja aparece en grande */
.lateral { background: var(--carbon); color: #F2EFED; }
.lateral .activo { background: var(--naranja); color: #fff; }

.boton-principal {
  background: var(--acento); color: #fff; border: 0;
  border-radius: var(--radio); padding: 10px 18px;
  font-family: var(--fuente); font-weight: 600; cursor: pointer;
}
.boton-principal:hover { background: var(--naranja-texto); }

.boton-secundario {
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 9px 17px;
  font-family: var(--fuente); font-weight: 500; cursor: pointer;
}

a { color: var(--enlace); }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
}

/* Las miniaturas van sobre carbón: se ve el contenido como se verá en la pantalla */
.miniatura { background: var(--carbon); border-radius: var(--radio); overflow: hidden; }

.estado-ok    { color: var(--ok); }
.estado-aviso { color: var(--aviso); }
.estado-error { color: var(--error); }
.estado-info  { color: var(--info); }

/* El reproductor: negro puro, no carbón */
.reproductor { background: #000; color: #fff; }