/* =========================================================
   AtomiQ – CORE THEME CSS VARIABLES
   Estilos base y variables para Theme Skins (interfaz de AtomiQ)
   (Solo branding; sin cambios funcionales)
   ========================================================= */

:root {
  /* 🎨 Colores principales UI */
  --qhi-ui-color-primario: #004080;
  --qhi-ui-color-secundario: #0066cc;
  --qhi-ui-color-acento: #ff9800;

  /* 🎨 Colores de fondo y texto UI */
  --qhi-ui-color-fondo: #f4f6f8;
  --qhi-ui-color-texto: #222222;

  /* 🅰️ Tipografía UI */
  --qhi-ui-font-base: 'Inter', sans-serif;
  --qhi-ui-font-titulos: 'Poppins', sans-serif;
  --qhi-ui-font-size-base: 15px;

  /* 📏 Espaciados y bordes UI */
  --qhi-ui-espaciado-base: 0.8rem;
  --qhi-ui-radius-base: 6px;

  /* 🌫️ Sombras UI */
  --qhi-ui-sombra-base: 0 2px 8px rgba(0,0,0,0.1);
}

/* =========================================================
   BASE SPA
   ========================================================= */

body.qhi-spa {
  font-family: var(--qhi-ui-font-base);
  background-color: var(--qhi-ui-color-fondo);
  color: var(--qhi-ui-color-texto);
  margin: 0;
  padding: 0;
}

/* =========================================================
   ENCABEZADOS UI
   ========================================================= */

.qhi-ui-header {
  background-color: var(--qhi-ui-color-primario);
  color: #fff;
  padding: var(--qhi-ui-espaciado-base);
}

/* =========================================================
   BOTONES UI
   ========================================================= */

.qhi-ui-btn {
  background-color: var(--qhi-ui-color-secundario);
  color: #fff;
  border: none;
  border-radius: var(--qhi-ui-radius-base);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.qhi-ui-btn:hover {
  background-color: var(--qhi-ui-color-primario);
}