:root {
  /* Paleta principal (estilo teal profesional) */
  --color-primary: #009688;     /* Teal principal (botones, acentos, logo) */
  --color-secondary: #212121;   /* Header / fondo oscuro */
  --color-accent: #4DB6AC;      /* Versión más clara del teal para hover */
  --color-soft: #E0F2F1;        /* Fondo suave o secciones resaltadas */
  --color-bg: #F5F5F5;          /* Fondo general gris claro */

  /* Texto y contraste */
  --color-text: #333333;        /* Texto principal */
  --color-muted: rgba(51, 51, 51, 0.7); /* Texto secundario */
  --surface: rgba(255, 255, 255, 0.9);  /* Superficies claras */
  --stroke: rgba(0, 0, 0, 0.1);         /* Bordes suaves */

  /* Header */
  --header-h: 56px;
}



* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header fijo (compartible con otros players) */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-primary);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 0 14px;
  z-index: 9999;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.brand img {
  width: 50px; height: 50px; object-fit: contain;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.6));
}

.nav-actions { margin-left: auto; display: flex; gap: 8px; }

.btn {  
  color: #fff;
  background: var(--color-secondary);
  border: 2px solid var(--color-primary);

  text-decoration: none;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 14px;
}
.btn:hover {
  border-color:var(--stroke);
  background: var(--color-bg);
  color: var(--color-text) ;
}

/* Adaptación móvil */
@media (max-width: 480px) {
  :root { --header-h: 50px; }
  .brand span { display: none; }
}