/* ====================================================================
   VARIABLES.CSS — THINKCHIP
   Importación de fuentes, Custom Properties globales y etiquetas de marca.
   Carga antes que cualquier otro archivo CSS.
==================================================================== */

/* ====================================================================
   0.0 - IMPORTACIÓN DE FUENTES
==================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Electrolize&family=Fjalla+One&family=Funnel+Display:wght@300..800&family=Inter:wght@400;500;600;700&family=Michroma&family=Rationale&family=Tomorrow:wght@400;500&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* ====================================================================
   1.0 - CONFIGURACIÓN GLOBAL (VARIABLES)
==================================================================== */
:root {
  /* Paleta de colores */
  --color-acento: #6BB6FF; /* azul relajado */
  --color-acento-hover: #4E9AE8;
  --gris-900: #0D131C; /* casi negro profesional */
  --gris-800: #192433;
  --gris-700: #223149;
  --gris-600: #35455f;
  --gris-500: #4d6685;
  --gris-400: #8ea8c0;
  --gris-300: #bed5ea;
  --gris-200: #d6e4f4;

  --color-etiqueta-pro: #a29bff; 
  --color-etiqueta-inteligente: hsl(145, 63%, 49%);
  --color-etiqueta-unico: hsl(207, 70%, 55%);
  --color-etiqueta-popular: hsl(39, 92%, 56%);
  --color-etiqueta-partida: hsl(210, 8%, 65%);

  /* Variables semánticas (mapeo de la paleta) */
  --color-fondo: var(--gris-900);
  --color-superficie: var(--gris-800);
  --color-borde: var(--gris-700);
  --color-texto-principal: var(--gris-200);
  --color-texto-secundario: var(--gris-400);

  /* Variables de tipografía */
  --fuente-principal: 'Inter', 'Segoe UI', sans-serif;
  --fuente-titulos: 'Inter', Helvetica, sans-serif;
  --fuente-logos: 'Michroma', sans-serif;
  --fuente-prueba: 'Audiowide', 'Electrolize', sans-serif;

  /* Paleta de Colores para Marcas */
  --color-marca-apple: hsl(45, 56%, 52%); /* #D4AF37 */
  --color-marca-samsung: hsl(217, 96%, 53%); /* #0d6efd */
  --color-marca-beats: hsl(355, 78%, 46%); /* #dc1a28 */
  --color-marca-google-blue: #4285F4;
  --color-marca-google-red: #EA4335;
  --color-marca-google-yellow: #FBBC05;
  --color-marca-google-green: #34A853;

  /* Colores Funcionales (para pros y contras) */
  --color-exito: hsl(147, 60%, 40%); /* #27ae60 */
  --color-error: hsl(6, 66%, 52%); /* #c0392b */

  /* Paleta de Colores para Ecosistema Beats */
  --color-beats-oscuro: hsl(356, 56%, 15%);        /* #420f12 */
  --color-beats-lila: hsl(266, 92%, 81%);          /* #a073f7 */
  --color-beats-cian: hsl(170, 100%, 50%);         /* #00ffcc */
  --color-beats-cian-oscuro: hsl(170, 100%, 6%);   /* #001f1f */
  --color-beats-morado: hsl(282, 65%, 50%);        /* #7928ca */
  --color-beats-magenta: hsl(330, 100%, 50%);      /* #ff0080 */

  /* Variables sistema TC (componentes editoriales) */
  --bg: #0c111b;
  --bg-2: #101725;
  --text: #e6edf6;
  --muted: #9aa9be;
  --card: #0f1726;
  --border: #1b2740;
  --shadow: 0 10px 24px rgba(0,0,0,.35);
  --brand: #2ea7ff;
  --ok: #2bd07b;
  --warn: #ffd166;
  --danger: #ff6b6b;
  --r: 16px;
  --gap: 1.2rem;
}

/* ====================================================================
   1.0.1 - Clases de Etiqueta de Marca
==================================================================== */
.etiqueta--pro { color: var(--color-etiqueta-pro); }
.etiqueta--inteligente { color: var(--color-etiqueta-inteligente); }
.etiqueta--unico { color: var(--color-etiqueta-unico); }
.etiqueta--popular { color: var(--color-etiqueta-popular); }
.etiqueta--partida { color: var(--color-etiqueta-partida); }

.etiqueta {
  border-radius: 2px;
  padding: 5px 12px;
  border: 1px solid; 
  font-family: 'Tomorrow', monospace;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 1.5px; 
  text-transform: uppercase;
  line-height: 1.3;
  text-shadow: 0 0 6px currentColor;
  background-color: hsla(212, 29%, 11%, 0.5);
  color: currentColor;
}