/*
 * ╔═══════════════════════════════════════════════════════════╗
 * ║  GALAPPXY — Base Styles                                   ║
 * ║  Reset · Typography · Utilities                           ║
 * ╚═══════════════════════════════════════════════════════════╝
 */

/* ─── MODERN RESET ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--gx-font-sans);
  font-size: var(--gx-text-base);
  font-weight: var(--gx-weight-normal);
  line-height: var(--gx-leading-normal);
  color: var(--gx-text-primary);
  background-color: var(--gx-bg-body);
  min-height: 100vh;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }
table { border-collapse: collapse; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--gx-weight-semibold); line-height: var(--gx-leading-tight); }

::selection {
  background: rgba(var(--gx-primary-rgb), 0.2);
  color: var(--gx-primary-dark);
}

/* Scrollbar personalizado */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gx-border-strong);
  border-radius: var(--gx-radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--gx-text-muted); }


/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
.gx-h1 { font-size: var(--gx-text-4xl); font-weight: var(--gx-weight-bold); letter-spacing: var(--gx-tracking-tight); }
.gx-h2 { font-size: var(--gx-text-3xl); font-weight: var(--gx-weight-bold); letter-spacing: var(--gx-tracking-tight); }
.gx-h3 { font-size: var(--gx-text-2xl); font-weight: var(--gx-weight-semibold); }
.gx-h4 { font-size: var(--gx-text-xl);  font-weight: var(--gx-weight-semibold); }
.gx-h5 { font-size: var(--gx-text-lg);  font-weight: var(--gx-weight-medium); }
.gx-h6 { font-size: var(--gx-text-md);  font-weight: var(--gx-weight-medium); }

.gx-text-xs    { font-size: var(--gx-text-xs); }
.gx-text-sm    { font-size: var(--gx-text-sm); }
.gx-text-base  { font-size: var(--gx-text-base); }
.gx-text-md    { font-size: var(--gx-text-md); }
.gx-text-lg    { font-size: var(--gx-text-lg); }
.gx-text-xl    { font-size: var(--gx-text-xl); }

.gx-font-normal   { font-weight: var(--gx-weight-normal); }
.gx-font-medium   { font-weight: var(--gx-weight-medium); }
.gx-font-semibold { font-weight: var(--gx-weight-semibold); }
.gx-font-bold     { font-weight: var(--gx-weight-bold); }

.gx-text-primary   { color: var(--gx-text-primary); }
.gx-text-secondary { color: var(--gx-text-secondary); }
.gx-text-muted     { color: var(--gx-text-muted); }
.gx-text-inverse   { color: var(--gx-text-inverse); }
.gx-color-primary  { color: var(--gx-primary); }
.gx-color-success  { color: var(--gx-success); }
.gx-color-danger   { color: var(--gx-danger); }
.gx-color-warning  { color: var(--gx-warning); }
.gx-color-info     { color: var(--gx-info); }

.gx-mono { font-family: var(--gx-font-mono); }
.gx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-break-word { word-wrap: break-word; overflow-wrap: break-word; }
.gx-uppercase { text-transform: uppercase; letter-spacing: var(--gx-tracking-wide); }


/* ─── FLEXBOX UTILITIES ──────────────────────────────────── */
.gx-flex     { display: flex; }
.gx-iflex    { display: inline-flex; }
.gx-col      { flex-direction: column; }
.gx-row      { flex-direction: row; }
.gx-wrap     { flex-wrap: wrap; }
.gx-nowrap   { flex-wrap: nowrap; }
.gx-grow     { flex-grow: 1; }
.gx-shrink-0 { flex-shrink: 0; }

.gx-items-center    { align-items: center; }
.gx-items-start     { align-items: flex-start; }
.gx-items-end       { align-items: flex-end; }
.gx-items-stretch   { align-items: stretch; }

.gx-justify-center  { justify-content: center; }
.gx-justify-between { justify-content: space-between; }
.gx-justify-end     { justify-content: flex-end; }
.gx-justify-start   { justify-content: flex-start; }

.gx-center { display: flex; align-items: center; justify-content: center; }
.gx-between { display: flex; align-items: center; justify-content: space-between; }
.gx-stack { display: flex; flex-direction: column; }

.gx-gap-1  { gap: var(--gx-sp-1); }
.gx-gap-2  { gap: var(--gx-sp-2); }
.gx-gap-3  { gap: var(--gx-sp-3); }
.gx-gap-4  { gap: var(--gx-sp-4); }
.gx-gap-6  { gap: var(--gx-sp-6); }
.gx-gap-8  { gap: var(--gx-sp-8); }


/* ─── GRID UTILITIES ─────────────────────────────────────── */
.gx-grid       { display: grid; }
.gx-grid-2     { grid-template-columns: repeat(2, 1fr); }
.gx-grid-3     { grid-template-columns: repeat(3, 1fr); }
.gx-grid-4     { grid-template-columns: repeat(4, 1fr); }
.gx-grid-auto  { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }


/* ─── SPACING UTILITIES ──────────────────────────────────── */
.gx-p-0  { padding: 0; }
.gx-p-1  { padding: var(--gx-sp-1); }
.gx-p-2  { padding: var(--gx-sp-2); }
.gx-p-3  { padding: var(--gx-sp-3); }
.gx-p-4  { padding: var(--gx-sp-4); }
.gx-p-6  { padding: var(--gx-sp-6); }
.gx-p-8  { padding: var(--gx-sp-8); }

.gx-px-2 { padding-left: var(--gx-sp-2); padding-right: var(--gx-sp-2); }
.gx-px-3 { padding-left: var(--gx-sp-3); padding-right: var(--gx-sp-3); }
.gx-px-4 { padding-left: var(--gx-sp-4); padding-right: var(--gx-sp-4); }
.gx-px-6 { padding-left: var(--gx-sp-6); padding-right: var(--gx-sp-6); }

.gx-py-2 { padding-top: var(--gx-sp-2); padding-bottom: var(--gx-sp-2); }
.gx-py-3 { padding-top: var(--gx-sp-3); padding-bottom: var(--gx-sp-3); }
.gx-py-4 { padding-top: var(--gx-sp-4); padding-bottom: var(--gx-sp-4); }

.gx-m-0  { margin: 0; }
.gx-m-auto { margin: auto; }
.gx-mx-auto { margin-left: auto; margin-right: auto; }
.gx-mb-1 { margin-bottom: var(--gx-sp-1); }
.gx-mb-2 { margin-bottom: var(--gx-sp-2); }
.gx-mb-3 { margin-bottom: var(--gx-sp-3); }
.gx-mb-4 { margin-bottom: var(--gx-sp-4); }
.gx-mb-6 { margin-bottom: var(--gx-sp-6); }
.gx-mt-4 { margin-top: var(--gx-sp-4); }
.gx-mt-6 { margin-top: var(--gx-sp-6); }
.gx-ml-auto { margin-left: auto; }
.gx-mr-2 { margin-right: var(--gx-sp-2); }


/* ─── SIZING ─────────────────────────────────────────────── */
.gx-w-full   { width: 100%; }
.gx-h-full   { height: 100%; }
.gx-min-h-screen { min-height: 100vh; }


/* ─── VISUAL UTILITIES ───────────────────────────────────── */
.gx-rounded-sm  { border-radius: var(--gx-radius-sm); }
.gx-rounded     { border-radius: var(--gx-radius-md); }
.gx-rounded-lg  { border-radius: var(--gx-radius-lg); }
.gx-rounded-xl  { border-radius: var(--gx-radius-xl); }
.gx-rounded-full { border-radius: var(--gx-radius-full); }

.gx-shadow-sm   { box-shadow: var(--gx-shadow-sm); }
.gx-shadow       { box-shadow: var(--gx-shadow-md); }
.gx-shadow-lg   { box-shadow: var(--gx-shadow-lg); }

.gx-border     { border: 1px solid var(--gx-border-color); }
.gx-border-b   { border-bottom: 1px solid var(--gx-border-color); }
.gx-border-t   { border-top: 1px solid var(--gx-border-color); }

.gx-bg-surface { background: var(--gx-bg-surface); }
.gx-bg-alt     { background: var(--gx-bg-surface-alt); }

.gx-overflow-hidden { overflow: hidden; }
.gx-overflow-auto   { overflow: auto; }
.gx-overflow-y-auto { overflow-y: auto; overflow-x: hidden; }

.gx-relative { position: relative; }
.gx-absolute { position: absolute; }
.gx-fixed    { position: fixed; }
.gx-sticky   { position: sticky; }

.gx-hidden      { display: none; }
.gx-block       { display: block; }
.gx-inline      { display: inline; }
.gx-inline-block { display: inline-block; }

.gx-pointer     { cursor: pointer; }
.gx-select-none { user-select: none; }
.gx-no-drag     { -webkit-user-drag: none; }


/* ─── TEXT ALIGNMENT ─────────────────────────────────────── */
.gx-text-left   { text-align: left; }
.gx-text-center { text-align: center; }
.gx-text-right  { text-align: right; }


/* ─── TRANSITIONS ────────────────────────────────────────── */
.gx-transition {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--gx-duration-base);
  transition-timing-function: var(--gx-ease-default);
}

.gx-transition-fast {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--gx-duration-fast);
  transition-timing-function: var(--gx-ease-default);
}


/* ─── DIVIDER ────────────────────────────────────────────── */
.gx-divider {
  height: 1px;
  background: var(--gx-border-color);
  border: none;
  margin: var(--gx-sp-3) 0;
}


/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .gx-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .gx-hide-desktop { display: none !important; }
}
@media (max-width: 1024px) {
  .gx-hide-tablet { display: none !important; }
}