/* ──────────────────────────────────────────────────────────────────────────
   Holaglow Design System — adaptación a CSS plano para los dashboards estáticos.
   Tokens copiados 1:1 de tailwind.config.js (hg-*). No añadir hex fuera de paleta.
   Fuentes: Poppres (body) + GT Ultra (títulos), servidas desde /fonts.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Fuentes de marca ─────────────────────────────────────────────────────── */
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT Ultra";
  src: url("/fonts/gtultramedian-light.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT Ultra";
  src: url("/fonts/gtultramedian-bold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ── Tokens de color (fuente de verdad: tailwind.config.js) ───────────────── */
:root {
  /* marca */
  --hg-primary: #EBFF0D;      /* lima — accent */
  --hg-primary300: #F9FFB6;
  --hg-primary100: #FDFFE7;
  --hg-secondary: #A96FE7;    /* morado — primario marca */
  --hg-secondary700: #c39bee; /* hover */
  --hg-secondary500: #d4b7f3;
  --hg-secondary300: #e6d4f8;
  --hg-secondary100: #f6f1fd;
  /* neutros */
  --hg-black: #101828;        /* texto cuerpo */
  --hg-black700: #344054;
  --hg-black500: #667085;     /* texto secundario */
  --hg-black400: #98A2B3;
  --hg-black300: #D0D5DD;     /* deshabilitado / borde */
  --hg-black100: #F2F4F7;     /* fills suaves / divisores */
  --hg-black50: #F9FAFB;      /* fondo página */
  /* semánticos */
  --hg-error: #E81E61;
  --hg-error100: #fde8ef;
  --hg-green: #73BC6D;
  --hg-green100: #EAF5E9;
  --hg-orange: #FF7514;       /* estrellas / valoración */
  --hg-cream100: #FBFAF3;

  /* alias semánticos del dashboard → tokens hg-* */
  --bg: var(--hg-black50);
  --panel: #ffffff;
  --panel2: var(--hg-black50);
  --border: var(--hg-black300);
  --divider: var(--hg-black100);
  --text: var(--hg-black);
  --muted: var(--hg-black500);
  --accent: var(--hg-secondary);

  /* sombra de marca (boxShadow.centered-black-sm) */
  --shadow-sm: 0 0 8px 5px rgba(0, 0, 0, 0.05);

  /* gradiente animado de marca */
  --gradient-animated: linear-gradient(
    -45deg, #e6d4f8 0%, #F9FFB6 8.333%, #BCC4E1 16.666%, #B9DDB6 25%,
    #F5FF86 33.333%, #FFC7C7 41.666%, #c39bee 50%, #A2ADD6 58.333%,
    #FED6B9 66.666%, #E87BCC 75%, #BAF9F9 83.333%, #F8CBCB 91.666%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;        /* text-sm */
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

/* ── Tipografía de marca ──────────────────────────────────────────────────── */
.hg-title {
  font-family: "GT Ultra", "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: -0.038em;   /* .font-gtUltra de globals.css */
  color: var(--hg-secondary);
}

/* ── Franja de gradiente de marca (header) ────────────────────────────────── */
.hg-gradient-bar {
  height: 4px;
  width: 100%;
  background: var(--gradient-animated);
  background-size: 300% 300%;
  animation: hgAnimateBG 24s ease infinite;
}
@keyframes hgAnimateBG {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Botones (rounded-full; mapea Buttons.tsx) ────────────────────────────── */
.hg-btn {
  font-family: inherit;
  font-size: 12px;            /* text-xs */
  font-weight: 500;           /* font-medium (size sm/md) */
  height: 40px;
  padding: 0 16px;
  border-radius: 9999px;      /* rounded-full */
  border: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.hg-btn-sm { height: 32px; }
/* primary = bg-hg-secondary text-white hover:bg-hg-secondary700 */
.hg-btn-primary { background: var(--hg-secondary); color: #fff; }
.hg-btn-primary:hover { background: var(--hg-secondary700); }
/* tertiary = bg-hg-primary text-hg-black border border-hg-black (CTA destacado) */
.hg-btn-tertiary {
  background: var(--hg-primary); color: var(--hg-black);
  border: 1px solid var(--hg-black);
}
.hg-btn-tertiary:hover { background: var(--hg-primary300); }
/* white = bg-white text-hg-black border border-hg-black hover:bg-hg-secondary100 */
.hg-btn-white {
  background: #fff; color: var(--hg-black);
  border: 1px solid var(--hg-black);
}
.hg-btn-white:hover { background: var(--hg-secondary100); }

/* ── Campos de formulario ─────────────────────────────────────────────────── */
.hg-input {
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--hg-black300);
  color: var(--hg-black);
  border-radius: 9999px;
  padding: 8px 14px;
  outline: none;
}
.hg-input:focus { border-color: var(--hg-secondary); }

/* ── Tarjetas (rounded-2xl) ───────────────────────────────────────────────── */
.hg-card {
  background: var(--panel);
  border: 1px solid var(--divider);
  border-radius: 16px;       /* rounded-2xl */
  box-shadow: var(--shadow-sm);
}

/* ── Pills / chips (rounded-full) ─────────────────────────────────────────── */
.hg-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 9999px;
}

.muted { color: var(--muted); }