/*
 * ╔═══════════════════════════════════════════════════════════╗
 * ║  GALAPPXY — Design Tokens                                ║
 * ║  v2.0 · Febrero 2026                                     ║
 * ║                                                          ║
 * ║  Estos tokens son el "contrato" de diseño.               ║
 * ║  BRAND.theme_config_json sobrescribe estas variables      ║
 * ║  por tenant vía [data-tenant="ID"] o inline.             ║
 * ╚═══════════════════════════════════════════════════════════╝
 */
 
 @import 'components/actions-modal.css';
 @import 'components/date-config.css';

:root {
  /* ─── BRAND COLORS ─────────────────────────────────── */
  --gx-primary:          #7B2CBF;
  --gx-primary-hover:    #5a189a;
  --gx-primary-light:    #e0aaff;
  --gx-primary-dark:     #3c096c;
  --gx-primary-rgb:      123, 44, 191;   /* Para usar con rgba() */

  --gx-secondary:        #FF6D9F;
  --gx-secondary-hover:  #e04577;
  --gx-secondary-light:  #ffd6e5;
  --gx-secondary-rgb:    255, 109, 159;

  --gx-accent:           #00D4AA;
  --gx-accent-hover:     #00b894;
  --gx-accent-light:     #b8f5e6;

  /* ─── SEMANTIC COLORS ──────────────────────────────── */
  --gx-success:          #10B981;
  --gx-success-light:    #D1FAE5;
  --gx-danger:           #EF4444;
  --gx-danger-light:     #FEE2E2;
  --gx-warning:          #F59E0B;
  --gx-warning-light:    #FEF3C7;
  --gx-info:             #3B82F6;
  --gx-info-light:       #DBEAFE;

  /* ─── SURFACE & BACKGROUND ─────────────────────────── */
  --gx-bg-body:          #F5F3FF;
  --gx-bg-surface:       #FFFFFF;
  --gx-bg-surface-hover: #F9F7FF;
  --gx-bg-surface-alt:   #F0ECFF;
  --gx-bg-elevated:      #FFFFFF;
  --gx-bg-overlay:       rgba(0, 0, 0, 0.45);
  --gx-bg-scrim:         rgba(0, 0, 0, 0.15);

  /* ─── SIDEBAR ──────────────────────────────────────── */
  --gx-sidebar-bg:           #1A0038;
  --gx-sidebar-bg-hover:     rgba(255, 255, 255, 0.08);
  --gx-sidebar-bg-active:    rgba(255, 255, 255, 0.14);
  --gx-sidebar-text:         rgba(255, 255, 255, 0.65);
  --gx-sidebar-text-active:  #FFFFFF;
  --gx-sidebar-icon:         rgba(255, 255, 255, 0.5);
  --gx-sidebar-icon-active:  #FFFFFF;
  --gx-sidebar-accent:       var(--gx-secondary);
  --gx-sidebar-divider:      rgba(255, 255, 255, 0.08);

  /* ─── CHILD SIDEBAR ────────────────────────────────── */
  --gx-childsidebar-bg:      #2D0060;
  --gx-childsidebar-text:    rgba(255, 255, 255, 0.75);
  --gx-childsidebar-hover:   rgba(255, 255, 255, 0.06);

  /* ─── TOPBAR ───────────────────────────────────────── */
  --gx-topbar-bg:            #FFFFFF;
  --gx-topbar-text:          #374151;
  --gx-topbar-border:        #E5E7EB;
  --gx-topbar-icon:          #6B7280;
  --gx-topbar-icon-hover:    var(--gx-primary);

  /* ─── RIGHT PANEL ──────────────────────────────────── */
  --gx-panel-bg:             #FFFFFF;
  --gx-panel-header-bg:      var(--gx-primary);
  --gx-panel-header-text:    #FFFFFF;
  --gx-panel-trigger-bg:     var(--gx-primary-dark);
  --gx-panel-trigger-icon:   rgba(255, 255, 255, 0.7);

  /* ─── TEXT ─────────────────────────────────────────── */
  --gx-text-primary:     #111827;
  --gx-text-secondary:   #6B7280;
  --gx-text-muted:       #9CA3AF;
  --gx-text-disabled:    #D1D5DB;
  --gx-text-inverse:     #FFFFFF;
  --gx-text-link:        var(--gx-primary);
  --gx-text-link-hover:  var(--gx-primary-hover);

  /* ─── BORDERS ──────────────────────────────────────── */
  --gx-border-color:     #E5E7EB;
  --gx-border-light:     #F3F4F6;
  --gx-border-strong:    #D1D5DB;
  --gx-border-focus:     var(--gx-primary);
  --gx-radius-xs:        0.25rem;    /* 4px */
  --gx-radius-sm:        0.375rem;   /* 6px */
  --gx-radius-md:        0.5rem;     /* 8px */
  --gx-radius-lg:        0.75rem;    /* 12px */
  --gx-radius-xl:        1rem;       /* 16px */
  --gx-radius-2xl:       1.5rem;     /* 24px */
  --gx-radius-full:      9999px;

  /* ─── SHADOWS ──────────────────────────────────────── */
  --gx-shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.04);
  --gx-shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --gx-shadow-md:        0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --gx-shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --gx-shadow-xl:        0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --gx-shadow-float:     0 25px 50px -12px rgba(0, 0, 0, 0.18);
  --gx-shadow-inner:     inset 0 2px 4px rgba(0, 0, 0, 0.04);
  --gx-shadow-glow:      0 0 20px rgba(var(--gx-primary-rgb), 0.25);
  --gx-shadow-colored:   0 4px 14px rgba(var(--gx-primary-rgb), 0.3);

  /* ─── SPACING SCALE ────────────────────────────────── */
  --gx-sp-0:   0;
  --gx-sp-1:   0.25rem;   /* 4px  */
  --gx-sp-2:   0.5rem;    /* 8px  */
  --gx-sp-3:   0.75rem;   /* 12px */
  --gx-sp-4:   1rem;      /* 16px */
  --gx-sp-5:   1.25rem;   /* 20px */
  --gx-sp-6:   1.5rem;    /* 24px */
  --gx-sp-8:   2rem;      /* 32px */
  --gx-sp-10:  2.5rem;    /* 40px */
  --gx-sp-12:  3rem;      /* 48px */
  --gx-sp-16:  4rem;      /* 64px */
  --gx-sp-20:  5rem;      /* 80px */

  /* ─── TYPOGRAPHY ───────────────────────────────────── */
  --gx-font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gx-font-display: 'DM Sans', var(--gx-font-sans);
  --gx-font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --gx-text-xs:   0.75rem;    /* 12px */
  --gx-text-sm:   0.8125rem;  /* 13px */
  --gx-text-base: 0.875rem;   /* 14px — base más compacto para dashboards */
  --gx-text-md:   1rem;       /* 16px */
  --gx-text-lg:   1.125rem;   /* 18px */
  --gx-text-xl:   1.25rem;    /* 20px */
  --gx-text-2xl:  1.5rem;     /* 24px */
  --gx-text-3xl:  1.875rem;   /* 30px */
  --gx-text-4xl:  2.25rem;    /* 36px */

  --gx-weight-normal:   400;
  --gx-weight-medium:   500;
  --gx-weight-semibold: 600;
  --gx-weight-bold:     700;

  --gx-leading-tight:   1.25;
  --gx-leading-snug:    1.375;
  --gx-leading-normal:  1.5;
  --gx-leading-relaxed: 1.625;

  --gx-tracking-tight:  -0.015em;
  --gx-tracking-normal: 0;
  --gx-tracking-wide:   0.025em;

  /* ─── LAYOUT DIMENSIONS ────────────────────────────── */
  --gx-sidebar-width:           72px;
  --gx-childsidebar-width:      260px;
  --gx-topbar-height:           60px;
  --gx-right-trigger-width:     40px;
  --gx-right-panel-width:       360px;
  --gx-content-max-width:       1400px;

  /* ─── Z-INDEX SCALE ────────────────────────────────── */
  --gx-z-base:      0;
  --gx-z-raised:    1;
  --gx-z-dropdown:  100;
  --gx-z-sticky:    200;
  --gx-z-sidebar:   300;
  --gx-z-panel:     400;
  --gx-z-overlay:   500;
  --gx-z-modal:     600;
  --gx-z-popover:   700;
  --gx-z-toast:     800;
  --gx-z-tooltip:   900;
  --gx-z-loader:    1000;

  /* ─── ANIMATION & MOTION ───────────────────────────── */
  --gx-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --gx-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --gx-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --gx-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --gx-duration-fast:    120ms;
  --gx-duration-base:    200ms;
  --gx-duration-medium:  300ms;
  --gx-duration-slow:    400ms;
  --gx-duration-slower:  600ms;

  /* ─── COMPONENT-SPECIFIC TOKENS ────────────────────── */
  --gx-btn-radius:       var(--gx-radius-md);
  --gx-card-radius:      var(--gx-radius-lg);
  --gx-input-radius:     var(--gx-radius-md);
  --gx-input-height:     40px;
  --gx-input-height-sm:  32px;
  --gx-input-height-lg:  48px;
  --gx-badge-size:       8px;
  --gx-avatar-size:      36px;
  --gx-avatar-size-sm:   28px;
  --gx-avatar-size-lg:   48px;
  --gx-avatar-size-xl:   64px;
  --gx-dropdown-min-w:   220px;
  --gx-dropdown-max-h:   360px;
}


/* ══════════════════════════════════════════════════════════
   DARK MODE
   Activado con data-theme="dark" en <html>
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --gx-bg-body:           #0F0A1A;
  --gx-bg-surface:        #1A1228;
  --gx-bg-surface-hover:  #241B35;
  --gx-bg-surface-alt:    #1E1530;
  --gx-bg-elevated:       #241B35;
  --gx-bg-overlay:        rgba(0, 0, 0, 0.7);

  --gx-sidebar-bg:        #0D0718;
  --gx-childsidebar-bg:   #150E24;

  --gx-topbar-bg:         #1A1228;
  --gx-topbar-text:       #E5E7EB;
  --gx-topbar-border:     #2D2240;
  --gx-topbar-icon:       #9CA3AF;

  --gx-panel-bg:          #1A1228;

  --gx-text-primary:      #F3F4F6;
  --gx-text-secondary:    #9CA3AF;
  --gx-text-muted:        #6B7280;
  --gx-text-disabled:     #4B5563;

  --gx-border-color:      #2D2240;
  --gx-border-light:      #241B35;
  --gx-border-strong:     #3D3255;

  --gx-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.2);
  --gx-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.25);
  --gx-shadow-md:         0 4px 6px rgba(0, 0, 0, 0.3);
  --gx-shadow-lg:         0 10px 15px rgba(0, 0, 0, 0.35);
  --gx-shadow-xl:         0 20px 25px rgba(0, 0, 0, 0.4);
  --gx-shadow-inner:      inset 0 2px 4px rgba(0, 0, 0, 0.15);

  --gx-success-light:     rgba(16, 185, 129, 0.15);
  --gx-danger-light:      rgba(239, 68, 68, 0.15);
  --gx-warning-light:     rgba(245, 158, 11, 0.15);
  --gx-info-light:        rgba(59, 130, 246, 0.15);
}
/*
 * ╔═══════════════════════════════════════════════════════════╗
 * ║  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; }
}
/*
 * ╔═══════════════════════════════════════════════════════════╗
 * ║  GALAPPXY — Layout System                                 ║
 * ║  App Shell · Sidebar · Topbar · Panels                    ║
 * ╚═══════════════════════════════════════════════════════════╝
 *
 * ESTRUCTURA:
 * ┌───┬──────────────────────────────────────────┬───┐
 * │ S │  Topbar                                   │ R │
 * │ I ├──────────────────────────────────────────┤ I │
 * │ D │                                           │ G │
 * │ E │  Content Area                             │ H │
 * │ B │                                           │ T │
 * │ A │                                           │   │
 * │ R │                                           │ P │
 * │   │                                           │ A │
 * └───┴──────────────────────────────────────────┴───┘
 */

/* ─── APP SHELL ──────────────────────────────────────────── */
.gx-app {
  display: grid;
  grid-template-columns: var(--gx-sidebar-width) 1fr;
  grid-template-rows: var(--gx-topbar-height) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  min-height: 100vh;
  width: 100%;
}

/* Estado: child sidebar abierto */
.gx-app.gx-child-open {
  grid-template-columns: var(--gx-sidebar-width) var(--gx-childsidebar-width) 1fr;
  grid-template-areas:
    "sidebar childsidebar topbar"
    "sidebar childsidebar content";
}


/* ─── MAIN SIDEBAR (Izquierdo, íconos) ──────────────────── */
.gx-sidebar {
  grid-area: sidebar;
  background: var(--gx-sidebar-bg);
  width: var(--gx-sidebar-width);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--gx-z-sidebar);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--gx-sp-3) 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.gx-sidebar::-webkit-scrollbar { width: 0; }

/* Logo */
.gx-sidebar__logo {
  width: 44px;
  height: 44px;
  margin-bottom: var(--gx-sp-4);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gx-sidebar__logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--gx-radius-md);
}

/* Nav items */
.gx-sidebar__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gx-sp-1);
  width: 100%;
  flex-grow: 1;
}

.gx-sidebar__item {
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--gx-sp-2) 0;
  border-radius: var(--gx-radius-md);
  color: var(--gx-sidebar-text);
  cursor: pointer;
  transition: all var(--gx-duration-base) var(--gx-ease-default);
  position: relative;
  text-decoration: none;
}

.gx-sidebar__item:hover {
  background: var(--gx-sidebar-bg-hover);
  color: var(--gx-sidebar-text-active);
}

.gx-sidebar__item.is-active {
  background: var(--gx-sidebar-bg-active);
  color: var(--gx-sidebar-text-active);
}

.gx-sidebar__item.is-active::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: var(--gx-sidebar-accent);
  border-radius: 0 var(--gx-radius-full) var(--gx-radius-full) 0;
}

.gx-sidebar__icon {
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
}

.gx-sidebar__item:hover .gx-sidebar__icon,
.gx-sidebar__item.is-active .gx-sidebar__icon {
  opacity: 1;
}

.gx-sidebar__label {
  font-size: 10px;
  font-weight: var(--gx-weight-medium);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
  opacity: 0.7;
}

.gx-sidebar__item:hover .gx-sidebar__label,
.gx-sidebar__item.is-active .gx-sidebar__label {
  opacity: 1;
}

/* Sidebar divider */
.gx-sidebar__divider {
  width: 32px;
  height: 1px;
  background: var(--gx-sidebar-divider);
  margin: var(--gx-sp-2) 0;
  flex-shrink: 0;
}

/* Sidebar footer section (bottom items) */
.gx-sidebar__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gx-sp-1);
  padding-bottom: var(--gx-sp-2);
}


/* ─── CHILD SIDEBAR (Submenú expandible) ─────────────────── */
.gx-childsidebar {
  grid-area: childsidebar;
  background: var(--gx-childsidebar-bg);
  width: var(--gx-childsidebar-width);
  height: 100vh;
  position: fixed;
  top: 0;
  left: var(--gx-sidebar-width);
  z-index: calc(var(--gx-z-sidebar) - 1);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--gx-duration-medium) var(--gx-ease-default);
  overflow-y: auto;
}

.gx-childsidebar.is-open {
  transform: translateX(0);
}

.gx-childsidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gx-sp-4) var(--gx-sp-4) var(--gx-sp-3);
  flex-shrink: 0;
}

.gx-childsidebar__title {
  font-size: var(--gx-text-md);
  font-weight: var(--gx-weight-semibold);
  color: var(--gx-sidebar-text-active);
}

.gx-childsidebar__close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gx-sidebar-text);
  background: none;
  border: none;
  border-radius: var(--gx-radius-sm);
  cursor: pointer;
  transition: all var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-childsidebar__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--gx-sidebar-text-active);
}

/* Child sidebar menu */
.gx-childsidebar__menu {
  padding: 0 var(--gx-sp-2);
  flex-grow: 1;
}

.gx-childsidebar__group {
  margin-bottom: var(--gx-sp-1);
}

.gx-childsidebar__group-title {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-3);
  padding: var(--gx-sp-3) var(--gx-sp-3);
  color: var(--gx-childsidebar-text);
  border-radius: var(--gx-radius-md);
  cursor: pointer;
  transition: all var(--gx-duration-fast) var(--gx-ease-default);
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-medium);
}

.gx-childsidebar__group-title:hover {
  background: var(--gx-childsidebar-hover);
  color: var(--gx-sidebar-text-active);
}

.gx-childsidebar__group-title .gx-icon {
  font-size: 18px;
  opacity: 0.65;
  width: 20px;
  text-align: center;
}

.gx-childsidebar__subitems {
  padding-left: calc(var(--gx-sp-3) + 20px + var(--gx-sp-3));
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--gx-duration-medium) var(--gx-ease-default);
}

.gx-childsidebar__group.is-expanded .gx-childsidebar__subitems {
  max-height: 300px;
}

.gx-childsidebar__subitem {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-2);
  padding: var(--gx-sp-2) var(--gx-sp-3);
  color: var(--gx-childsidebar-text);
  font-size: var(--gx-text-sm);
  border-radius: var(--gx-radius-sm);
  cursor: pointer;
  transition: all var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-childsidebar__subitem:hover {
  background: var(--gx-childsidebar-hover);
  color: var(--gx-sidebar-text-active);
}

.gx-childsidebar__subitem.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.gx-childsidebar__subitem.is-locked .gx-icon-lock {
  font-size: 12px;
  margin-left: var(--gx-sp-2);
  color: var(--gx-warning);
}


/* ─── TOPBAR ─────────────────────────────────────────────── */
.gx-topbar {
  grid-area: topbar;
  background: var(--gx-topbar-bg);
  height: var(--gx-topbar-height);
  position: sticky;
  top: 0;
  z-index: var(--gx-z-sticky);
  display: flex;
  align-items: center;
  padding: 0 var(--gx-sp-4);
  border-bottom: 1px solid var(--gx-topbar-border);
  gap: var(--gx-sp-3);
}

/* Hamburger toggle para child sidebar */
.gx-topbar__toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gx-topbar-icon);
  border-radius: var(--gx-radius-md);
  cursor: pointer;
  transition: all var(--gx-duration-fast) var(--gx-ease-default);
  flex-shrink: 0;
}

.gx-topbar__toggle:hover {
  background: var(--gx-bg-surface-hover);
  color: var(--gx-topbar-icon-hover);
}

/* Logo mobile */
.gx-topbar__logo {
  display: none; /* Solo mobile */
  width: 32px;
  height: 32px;
}

.gx-topbar__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Search */
.gx-topbar__search {
  flex-grow: 1;
  max-width: 420px;
  position: relative;
}

.gx-topbar__search-input {
  width: 100%;
  height: var(--gx-input-height);
  padding: 0 var(--gx-sp-4) 0 var(--gx-sp-10);
  background: var(--gx-bg-surface-alt);
  border: 1px solid transparent;
  border-radius: var(--gx-radius-full);
  font-size: var(--gx-text-sm);
  color: var(--gx-text-primary);
  transition: all var(--gx-duration-base) var(--gx-ease-default);
  outline: none;
}

.gx-topbar__search-input::placeholder {
  color: var(--gx-text-muted);
}

.gx-topbar__search-input:focus {
  background: var(--gx-bg-surface);
  border-color: var(--gx-border-focus);
  box-shadow: 0 0 0 3px rgba(var(--gx-primary-rgb), 0.1);
}

.gx-topbar__search-icon {
  position: absolute;
  left: var(--gx-sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gx-text-muted);
  font-size: 16px;
  pointer-events: none;
}

/* Right actions */
.gx-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-1);
  margin-left: auto;
}

.gx-topbar__action {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gx-topbar-icon);
  border-radius: var(--gx-radius-md);
  cursor: pointer;
  transition: all var(--gx-duration-fast) var(--gx-ease-default);
  position: relative;
  border: none;
  background: none;
}

.gx-topbar__action:hover {
  background: var(--gx-bg-surface-hover);
  color: var(--gx-topbar-icon-hover);
}

.gx-topbar__action .gx-icon {
  font-size: 20px;
}


/* ─── CONTENT AREA ───────────────────────────────────────── */
.gx-content {
  grid-area: content;
  padding: var(--gx-sp-6);
  overflow-y: auto;
  min-height: 0;
  max-width: 100%;
}

.gx-content__inner {
  max-width: var(--gx-content-max-width);
  margin: 0 auto;
}


/* ─── RIGHT PANEL SYSTEM ─────────────────────────────────── */

/* Trigger strip (botones pegados al borde derecho) */
.gx-right-trigger {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--gx-z-panel);
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--gx-panel-trigger-bg);
  border-radius: var(--gx-radius-lg) 0 0 var(--gx-radius-lg);
  padding: var(--gx-sp-2) var(--gx-sp-1);
  box-shadow: var(--gx-shadow-lg);
}

.gx-right-trigger__btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gx-panel-trigger-icon);
  cursor: pointer;
  border-radius: var(--gx-radius-sm);
  transition: all var(--gx-duration-fast) var(--gx-ease-default);
  border: none;
  background: none;
}

.gx-right-trigger__btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.gx-right-trigger__btn .gx-icon {
  font-size: 18px;
}

/* Right panel (quickview) */
.gx-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--gx-right-panel-width);
  height: 100vh;
  background: var(--gx-panel-bg);
  z-index: var(--gx-z-panel);
  box-shadow: var(--gx-shadow-float);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--gx-duration-medium) var(--gx-ease-default);
}

.gx-panel.is-open {
  transform: translateX(0);
}

.gx-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gx-sp-4) var(--gx-sp-4);
  background: var(--gx-panel-header-bg);
  color: var(--gx-panel-header-text);
  flex-shrink: 0;
}

.gx-panel__title {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-2);
  font-size: var(--gx-text-md);
  font-weight: var(--gx-weight-semibold);
}

.gx-panel__title .gx-icon {
  font-size: 18px;
  opacity: 0.85;
}

.gx-panel__subtitle {
  font-size: var(--gx-text-xs);
  opacity: 0.65;
  margin-top: 2px;
}

.gx-panel__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--gx-radius-sm);
  transition: background var(--gx-duration-fast) var(--gx-ease-default);
  border: none;
  background: none;
  color: inherit;
}

.gx-panel__close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.gx-panel__body {
  flex-grow: 1;
  overflow-y: auto;
  padding: var(--gx-sp-4);
}

.gx-panel__footer {
  padding: var(--gx-sp-3) var(--gx-sp-4);
  border-top: 1px solid var(--gx-border-color);
  flex-shrink: 0;
}

/* Panel overlay backdrop */
.gx-panel-backdrop {
  position: fixed;
  inset: 0;
  background: var(--gx-bg-overlay);
  z-index: calc(var(--gx-z-panel) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gx-duration-medium) var(--gx-ease-default);
}

.gx-panel-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}


/* ─── PAGE LOADER ────────────────────────────────────────── */
.gx-pageloader {
  position: fixed;
  inset: 0;
  z-index: var(--gx-z-loader);
  background: var(--gx-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--gx-duration-slow) var(--gx-ease-out),
              visibility 0s var(--gx-duration-slow);
}

.gx-pageloader.is-hidden {
  opacity: 0;
  visibility: hidden;
}


/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .gx-app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }

  .gx-app.gx-child-open {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }

  .gx-sidebar {
    transform: translateX(-100%);
    transition: transform var(--gx-duration-medium) var(--gx-ease-default);
  }

  .gx-sidebar.is-mobile-open {
    transform: translateX(0);
  }

  .gx-childsidebar {
    left: 0;
    width: 100%;
    max-width: 300px;
  }

  .gx-topbar__logo { display: flex; }
  .gx-topbar__search { max-width: none; }

  .gx-content {
    padding: var(--gx-sp-4);
  }

  .gx-panel {
    width: 100%;
    max-width: 360px;
  }

  .gx-right-trigger {
    display: none;
  }
}

@media (max-width: 480px) {
  .gx-content { padding: var(--gx-sp-3); }
  .gx-panel { max-width: 100%; }
}
/*
 * GALAPPXY — Buttons
 * .gx-btn + variantes
 */

.gx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gx-sp-2);
  height: var(--gx-input-height);
  padding: 0 var(--gx-sp-4);
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-medium);
  font-family: var(--gx-font-sans);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--gx-btn-radius);
  cursor: pointer;
  transition: all var(--gx-duration-base) var(--gx-ease-default);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.gx-btn:active { transform: scale(0.97); }

/* Variantes */
.gx-btn--primary {
  background: var(--gx-primary);
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(var(--gx-primary-rgb), 0.3);
}
.gx-btn--primary:hover {
  background: var(--gx-primary-hover);
  box-shadow: var(--gx-shadow-colored);
}

.gx-btn--secondary {
  background: var(--gx-secondary);
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(var(--gx-secondary-rgb), 0.3);
}
.gx-btn--secondary:hover { background: var(--gx-secondary-hover); }

.gx-btn--outline {
  background: transparent;
  border-color: var(--gx-border-strong);
  color: var(--gx-text-primary);
}
.gx-btn--outline:hover {
  border-color: var(--gx-primary);
  color: var(--gx-primary);
  background: rgba(var(--gx-primary-rgb), 0.04);
}

.gx-btn--ghost {
  background: transparent;
  color: var(--gx-text-secondary);
}
.gx-btn--ghost:hover {
  background: var(--gx-bg-surface-hover);
  color: var(--gx-text-primary);
}

.gx-btn--danger {
  background: var(--gx-danger);
  color: #FFFFFF;
}
.gx-btn--danger:hover { background: #DC2626; }

.gx-btn--success {
  background: var(--gx-success);
  color: #FFFFFF;
}
.gx-btn--success:hover { background: #059669; }

/* Soft variants */
.gx-btn--soft {
  background: rgba(var(--gx-primary-rgb), 0.1);
  color: var(--gx-primary);
}
.gx-btn--soft:hover {
  background: rgba(var(--gx-primary-rgb), 0.18);
}

/* Tamaños */
.gx-btn--sm {
  height: var(--gx-input-height-sm);
  padding: 0 var(--gx-sp-3);
  font-size: var(--gx-text-xs);
}

.gx-btn--lg {
  height: var(--gx-input-height-lg);
  padding: 0 var(--gx-sp-6);
  font-size: var(--gx-text-md);
}

/* Formas */
.gx-btn--pill { border-radius: var(--gx-radius-full); }
.gx-btn--square { border-radius: 0; }

/* Icon button */
.gx-btn--icon {
  width: var(--gx-input-height);
  padding: 0;
}
.gx-btn--icon.gx-btn--sm { width: var(--gx-input-height-sm); }
.gx-btn--icon.gx-btn--lg { width: var(--gx-input-height-lg); }

/* Full width */
.gx-btn--block { width: 100%; }

/* Disabled */
.gx-btn:disabled,
.gx-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading state */
.gx-btn.is-loading {
  color: transparent;
  pointer-events: none;
}
.gx-btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gx-spin 0.6s linear infinite;
  color: #fff;
}

@keyframes gx-spin {
  to { transform: rotate(360deg); }
}

/* Button group */
.gx-btn-group {
  display: inline-flex;
}
.gx-btn-group .gx-btn { border-radius: 0; }
.gx-btn-group .gx-btn:first-child { border-radius: var(--gx-btn-radius) 0 0 var(--gx-btn-radius); }
.gx-btn-group .gx-btn:last-child { border-radius: 0 var(--gx-btn-radius) var(--gx-btn-radius) 0; }
.gx-btn-group .gx-btn + .gx-btn { margin-left: -1px; }
/*
 * GALAPPXY — Cards
 * .gx-card + stat tiles
 */

/* ─── BASE CARD ──────────────────────────────────────────── */
.gx-card {
  background: var(--gx-bg-surface);
  border-radius: var(--gx-card-radius);
  border: 1px solid var(--gx-border-light);
  box-shadow: var(--gx-shadow-xs);
  transition: box-shadow var(--gx-duration-base) var(--gx-ease-default);
  overflow: hidden;
}

.gx-card:hover {
  box-shadow: var(--gx-shadow-sm);
}

.gx-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gx-sp-4) var(--gx-sp-4) var(--gx-sp-3);
}

.gx-card__title {
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-semibold);
  color: var(--gx-text-primary);
}

.gx-card__subtitle {
  font-size: var(--gx-text-xs);
  color: var(--gx-text-muted);
  margin-top: 2px;
}

.gx-card__body {
  padding: var(--gx-sp-4);
}

.gx-card__header + .gx-card__body {
  padding-top: 0;
}

.gx-card__footer {
  padding: var(--gx-sp-3) var(--gx-sp-4);
  border-top: 1px solid var(--gx-border-light);
}

/* Card sin borde */
.gx-card--flat {
  border: none;
  box-shadow: var(--gx-shadow-sm);
}

/* Card clickable */
.gx-card--clickable {
  cursor: pointer;
}
.gx-card--clickable:hover {
  box-shadow: var(--gx-shadow-md);
  border-color: var(--gx-border-strong);
}


/* ─── STAT TILE (Dashboard KPI Cards) ────────────────────── */
.gx-stat {
  background: var(--gx-bg-surface);
  border-radius: var(--gx-card-radius);
  border: 1px solid var(--gx-border-light);
  box-shadow: var(--gx-shadow-xs);
  padding: var(--gx-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--gx-sp-3);
  transition: all var(--gx-duration-base) var(--gx-ease-default);
  position: relative;
  overflow: hidden;
}

.gx-stat:hover {
  box-shadow: var(--gx-shadow-md);
  transform: translateY(-2px);
}

/* Accent bar en la parte superior */
.gx-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gx-stat-color, var(--gx-primary));
  border-radius: var(--gx-card-radius) var(--gx-card-radius) 0 0;
}

.gx-stat__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.gx-stat__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--gx-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--gx-primary-rgb), 0.1);
  color: var(--gx-primary);
  font-size: 20px;
  flex-shrink: 0;
}

.gx-stat--secondary .gx-stat__icon {
  background: rgba(var(--gx-secondary-rgb), 0.1);
  color: var(--gx-secondary);
}

.gx-stat--secondary::before {
  --gx-stat-color: var(--gx-secondary);
}

.gx-stat__label {
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-medium);
  color: var(--gx-text-secondary);
}

.gx-stat__value {
  font-size: var(--gx-text-2xl);
  font-weight: var(--gx-weight-bold);
  color: var(--gx-text-primary);
  letter-spacing: var(--gx-tracking-tight);
  line-height: 1.2;
}

.gx-stat__desc {
  font-size: var(--gx-text-xs);
  color: var(--gx-text-muted);
}

.gx-stat__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: var(--gx-sp-2);
  border-top: 1px solid var(--gx-border-light);
}

.gx-stat__link {
  font-size: var(--gx-text-xs);
  font-weight: var(--gx-weight-medium);
  color: var(--gx-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--gx-sp-1);
  transition: color var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-stat__link:hover { color: var(--gx-primary-hover); }

.gx-stat--secondary .gx-stat__link { color: var(--gx-secondary); }
.gx-stat--secondary .gx-stat__link:hover { color: var(--gx-secondary-hover); }


/* ─── STAT GRID ──────────────────────────────────────────── */
.gx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gx-sp-4);
}

@media (min-width: 1200px) {
  .gx-stats-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/*
 * GALAPPXY — Dropdowns
 * .gx-dropdown + notification/module/profile variants
 */

/* ─── BASE DROPDOWN ──────────────────────────────────────── */
.gx-dropdown {
  position: relative;
  display: inline-flex;
}

.gx-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--gx-sp-2));
  right: 0;
  min-width: var(--gx-dropdown-min-w);
  max-height: var(--gx-dropdown-max-h);
  background: var(--gx-bg-elevated);
  border: 1px solid var(--gx-border-light);
  border-radius: var(--gx-radius-lg);
  box-shadow: var(--gx-shadow-xl);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transition: all var(--gx-duration-base) var(--gx-ease-default);
  z-index: var(--gx-z-dropdown);
}

.gx-dropdown.is-open .gx-dropdown__menu,
.gx-dropdown__menu.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Arrow */
.gx-dropdown__menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: var(--gx-bg-elevated);
  border: 1px solid var(--gx-border-light);
  border-bottom: none;
  border-right: none;
  transform: rotate(45deg);
  z-index: 1;
}

.gx-dropdown__header {
  padding: var(--gx-sp-3) var(--gx-sp-4);
  border-bottom: 1px solid var(--gx-border-light);
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-semibold);
  color: var(--gx-text-primary);
}

.gx-dropdown__body {
  overflow-y: auto;
  max-height: 300px;
}

.gx-dropdown__footer {
  padding: var(--gx-sp-3) var(--gx-sp-4);
  border-top: 1px solid var(--gx-border-light);
  text-align: center;
}

/* Menu item */
.gx-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-3);
  padding: var(--gx-sp-3) var(--gx-sp-4);
  font-size: var(--gx-text-sm);
  color: var(--gx-text-primary);
  cursor: pointer;
  transition: background var(--gx-duration-fast) var(--gx-ease-default);
}

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

.gx-dropdown__item .gx-icon {
  color: var(--gx-text-muted);
  font-size: 18px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.gx-dropdown__item--danger { color: var(--gx-danger); }
.gx-dropdown__item--danger .gx-icon { color: var(--gx-danger); }

.gx-dropdown__divider {
  height: 1px;
  background: var(--gx-border-light);
  margin: var(--gx-sp-1) 0;
}


/* ─── NOTIFICATION DROPDOWN ──────────────────────────────── */
.gx-dropdown--notifications .gx-dropdown__menu {
  width: 360px;
}

.gx-notif-item {
  display: flex;
  gap: var(--gx-sp-3);
  padding: var(--gx-sp-3) var(--gx-sp-4);
  cursor: pointer;
  transition: background var(--gx-duration-fast) var(--gx-ease-default);
  border-bottom: 1px solid var(--gx-border-light);
}

.gx-notif-item:last-child { border-bottom: none; }
.gx-notif-item:hover { background: var(--gx-bg-surface-hover); }

.gx-notif-item.is-unread {
  background: rgba(var(--gx-primary-rgb), 0.03);
}

.gx-notif-item__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--gx-radius-full);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gx-notif-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gx-notif-item__body {
  flex-grow: 1;
  min-width: 0;
}

.gx-notif-item__text {
  font-size: var(--gx-text-sm);
  color: var(--gx-text-primary);
  line-height: var(--gx-leading-snug);
}

.gx-notif-item__text strong {
  font-weight: var(--gx-weight-semibold);
}

.gx-notif-item__time {
  font-size: var(--gx-text-xs);
  color: var(--gx-text-muted);
  margin-top: 2px;
}

.gx-notif-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gx-primary);
  flex-shrink: 0;
  margin-top: var(--gx-sp-2);
}


/* ─── MODULES DROPDOWN ───────────────────────────────────── */
.gx-dropdown--modules .gx-dropdown__menu {
  width: 280px;
}

.gx-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gx-sp-1);
  padding: var(--gx-sp-3);
}

.gx-module-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gx-sp-2);
  padding: var(--gx-sp-3) var(--gx-sp-2);
  border-radius: var(--gx-radius-md);
  cursor: pointer;
  transition: all var(--gx-duration-fast) var(--gx-ease-default);
  text-align: center;
}

.gx-module-item:hover {
  background: var(--gx-bg-surface-hover);
  transform: translateY(-1px);
}

.gx-module-item__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gx-module-item__icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.gx-module-item__label {
  font-size: var(--gx-text-xs);
  font-weight: var(--gx-weight-medium);
  color: var(--gx-text-secondary);
  line-height: var(--gx-leading-tight);
}


/* ─── PROFILE DROPDOWN ───────────────────────────────────── */
.gx-dropdown--profile .gx-dropdown__menu {
  width: 300px;
  max-height: 85vh;
  overflow-y: auto;
}

.gx-profile-header {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-3);
  padding: var(--gx-sp-4);
  border-bottom: 1px solid var(--gx-border-light);
}

.gx-profile-header__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--gx-radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.gx-profile-header__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gx-profile-header__info {
  min-width: 0;
  flex-grow: 1;
}

.gx-profile-header__name {
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-semibold);
  color: var(--gx-text-primary);
}

.gx-profile-header__email {
  font-size: var(--gx-text-xs);
  color: var(--gx-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*
 * GALAPPXY — Forms
 * .gx-input · .gx-select · .gx-search · .gx-checkbox · .gx-switch
 */

/* ─── TEXT INPUT ──────────────────────────────────────────── */
.gx-input {
  width: 100%;
  height: var(--gx-input-height);
  padding: 0 var(--gx-sp-3);
  font-size: var(--gx-text-sm);
  font-family: var(--gx-font-sans);
  color: var(--gx-text-primary);
  background: var(--gx-bg-surface);
  border: 1px solid var(--gx-border-color);
  border-radius: var(--gx-input-radius);
  transition: all var(--gx-duration-base) var(--gx-ease-default);
  outline: none;
}

.gx-input::placeholder { color: var(--gx-text-muted); }

.gx-input:hover { border-color: var(--gx-border-strong); }

.gx-input:focus {
  border-color: var(--gx-primary);
  box-shadow: 0 0 0 3px rgba(var(--gx-primary-rgb), 0.1);
}

.gx-input:disabled {
  background: var(--gx-bg-surface-alt);
  color: var(--gx-text-disabled);
  cursor: not-allowed;
}

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

/* Error state */
.gx-input--error { border-color: var(--gx-danger); }
.gx-input--error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); }

/* Success state */
.gx-input--success { border-color: var(--gx-success); }


/* ─── INPUT GROUP (icon inside input) ────────────────────── */
.gx-input-group {
  position: relative;
  width: 100%;
}

.gx-input-group .gx-input {
  padding-left: var(--gx-sp-10);
}

.gx-input-group--right .gx-input {
  padding-left: var(--gx-sp-3);
  padding-right: var(--gx-sp-10);
}

.gx-input-group__icon {
  position: absolute;
  top: 50%;
  left: var(--gx-sp-3);
  transform: translateY(-50%);
  color: var(--gx-text-muted);
  font-size: 16px;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.gx-input-group--right .gx-input-group__icon {
  left: auto;
  right: var(--gx-sp-3);
}


/* ─── TEXTAREA ───────────────────────────────────────────── */
.gx-textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--gx-sp-3);
  font-size: var(--gx-text-sm);
  font-family: var(--gx-font-sans);
  color: var(--gx-text-primary);
  background: var(--gx-bg-surface);
  border: 1px solid var(--gx-border-color);
  border-radius: var(--gx-input-radius);
  transition: all var(--gx-duration-base) var(--gx-ease-default);
  outline: none;
  resize: vertical;
}

.gx-textarea:focus {
  border-color: var(--gx-primary);
  box-shadow: 0 0 0 3px rgba(var(--gx-primary-rgb), 0.1);
}


/* ─── SELECT ─────────────────────────────────────────────── */
.gx-select {
  width: 100%;
  height: var(--gx-input-height);
  padding: 0 var(--gx-sp-8) 0 var(--gx-sp-3);
  font-size: var(--gx-text-sm);
  font-family: var(--gx-font-sans);
  color: var(--gx-text-primary);
  background: var(--gx-bg-surface);
  border: 1px solid var(--gx-border-color);
  border-radius: var(--gx-input-radius);
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--gx-sp-3) center;
  transition: all var(--gx-duration-base) var(--gx-ease-default);
}

.gx-select:hover { border-color: var(--gx-border-strong); }
.gx-select:focus {
  border-color: var(--gx-primary);
  box-shadow: 0 0 0 3px rgba(var(--gx-primary-rgb), 0.1);
}

.gx-select--sm { height: var(--gx-input-height-sm); font-size: var(--gx-text-xs); }


/* ─── FORM FIELD ─────────────────────────────────────────── */
.gx-field {
  margin-bottom: var(--gx-sp-4);
}

.gx-field__label {
  display: block;
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-medium);
  color: var(--gx-text-primary);
  margin-bottom: var(--gx-sp-1);
}

.gx-field__label--required::after {
  content: ' *';
  color: var(--gx-danger);
}

.gx-field__hint {
  font-size: var(--gx-text-xs);
  color: var(--gx-text-muted);
  margin-top: var(--gx-sp-1);
}

.gx-field__error {
  font-size: var(--gx-text-xs);
  color: var(--gx-danger);
  margin-top: var(--gx-sp-1);
}


/* ─── CHECKBOX ───────────────────────────────────────────── */
.gx-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--gx-sp-2);
  cursor: pointer;
  font-size: var(--gx-text-sm);
  color: var(--gx-text-primary);
}

.gx-checkbox__input {
  width: 18px;
  height: 18px;
  accent-color: var(--gx-primary);
  cursor: pointer;
}


/* ─── TOGGLE SWITCH ──────────────────────────────────────── */
.gx-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--gx-sp-2);
  cursor: pointer;
}

.gx-switch__track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--gx-border-strong);
  border-radius: var(--gx-radius-full);
  transition: background var(--gx-duration-base) var(--gx-ease-default);
}

.gx-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: var(--gx-shadow-sm);
  transition: transform var(--gx-duration-base) var(--gx-ease-bounce);
}

.gx-switch input { display: none; }

.gx-switch input:checked + .gx-switch__track {
  background: var(--gx-primary);
}

.gx-switch input:checked + .gx-switch__track .gx-switch__thumb {
  transform: translateX(18px);
}

.gx-switch__label {
  font-size: var(--gx-text-sm);
  color: var(--gx-text-primary);
}
/*
 * GALAPPXY — Tabs
 * .gx-tabs
 */

.gx-tabs {
  display: flex;
  border-bottom: 1px solid var(--gx-border-color);
  gap: 0;
}

.gx-tabs__item {
  padding: var(--gx-sp-3) var(--gx-sp-4);
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-medium);
  color: var(--gx-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--gx-duration-base) var(--gx-ease-default);
  white-space: nowrap;
  margin-bottom: -1px;
}

.gx-tabs__item:hover {
  color: var(--gx-text-primary);
}

.gx-tabs__item.is-active {
  color: var(--gx-primary);
  border-bottom-color: var(--gx-primary);
}

/* Pill tabs */
.gx-tabs--pills {
  border-bottom: none;
  gap: var(--gx-sp-1);
  background: var(--gx-bg-surface-alt);
  border-radius: var(--gx-radius-md);
  padding: 3px;
}

.gx-tabs--pills .gx-tabs__item {
  border-bottom: none;
  border-radius: var(--gx-radius-sm);
  padding: var(--gx-sp-2) var(--gx-sp-3);
  margin-bottom: 0;
}

.gx-tabs--pills .gx-tabs__item.is-active {
  background: var(--gx-bg-surface);
  color: var(--gx-text-primary);
  box-shadow: var(--gx-shadow-xs);
}

/* Tab content */
.gx-tab-content {
  display: none;
}

.gx-tab-content.is-active {
  display: block;
}
/*
 * GALAPPXY — Badges & Avatars
 */

/* ─── BADGE ──────────────────────────────────────────────── */
.gx-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--gx-sp-2);
  font-size: var(--gx-text-xs);
  font-weight: var(--gx-weight-semibold);
  line-height: 1;
  border-radius: var(--gx-radius-full);
  white-space: nowrap;
}

.gx-badge--primary   { background: rgba(var(--gx-primary-rgb), 0.1); color: var(--gx-primary); }
.gx-badge--secondary { background: rgba(var(--gx-secondary-rgb), 0.1); color: var(--gx-secondary); }
.gx-badge--success   { background: var(--gx-success-light); color: var(--gx-success); }
.gx-badge--danger    { background: var(--gx-danger-light); color: var(--gx-danger); }
.gx-badge--warning   { background: var(--gx-warning-light); color: var(--gx-warning); }
.gx-badge--info      { background: var(--gx-info-light); color: var(--gx-info); }
.gx-badge--neutral   { background: var(--gx-bg-surface-alt); color: var(--gx-text-secondary); }

/* Solid variants */
.gx-badge--solid { color: #FFFFFF; }
.gx-badge--solid.gx-badge--primary { background: var(--gx-primary); }
.gx-badge--solid.gx-badge--success { background: var(--gx-success); }
.gx-badge--solid.gx-badge--danger  { background: var(--gx-danger); }

/* Dot badge (notification indicator) */
.gx-dot {
  display: inline-block;
  width: var(--gx-badge-size);
  height: var(--gx-badge-size);
  border-radius: 50%;
  background: var(--gx-danger);
  flex-shrink: 0;
}

.gx-dot--primary { background: var(--gx-primary); }
.gx-dot--success { background: var(--gx-success); }
.gx-dot--warning { background: var(--gx-warning); }

/* Dot con animación de pulsación */
.gx-dot--pulse {
  position: relative;
}

.gx-dot--pulse::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
  animation: gx-pulse 2s ease-out infinite;
}

@keyframes gx-pulse {
  0% { opacity: 0.6; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* Count badge (número) */
.gx-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: var(--gx-weight-bold);
  color: #FFFFFF;
  background: var(--gx-danger);
  border-radius: var(--gx-radius-full);
  line-height: 1;
}

/* Posicionar badge sobre un ícono */
.gx-badge-wrapper {
  position: relative;
  display: inline-flex;
}

.gx-badge-wrapper .gx-dot,
.gx-badge-wrapper .gx-count-badge {
  position: absolute;
  top: -2px;
  right: -2px;
}


/* ─── AVATAR ─────────────────────────────────────────────── */
.gx-avatar {
  width: var(--gx-avatar-size);
  height: var(--gx-avatar-size);
  border-radius: var(--gx-radius-full);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gx-bg-surface-alt);
  color: var(--gx-text-muted);
  font-weight: var(--gx-weight-semibold);
  font-size: var(--gx-text-sm);
}

.gx-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

/* Avatar con status (online indicator) */
.gx-avatar--status::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gx-success);
  border: 2px solid var(--gx-bg-surface);
}

.gx-avatar--offline::after { background: var(--gx-text-muted); }
.gx-avatar--busy::after { background: var(--gx-danger); }

/* Avatar group */
.gx-avatar-group {
  display: flex;
}
.gx-avatar-group .gx-avatar {
  border: 2px solid var(--gx-bg-surface);
  margin-left: -8px;
}
.gx-avatar-group .gx-avatar:first-child { margin-left: 0; }
/*
 * GALAPPXY — Tables
 * .gx-table
 */

.gx-table {
  width: 100%;
  font-size: var(--gx-text-sm);
  border-collapse: collapse;
}

.gx-table thead {
  border-bottom: 1px solid var(--gx-border-color);
}

.gx-table th {
  padding: var(--gx-sp-3) var(--gx-sp-4);
  text-align: left;
  font-weight: var(--gx-weight-semibold);
  font-size: var(--gx-text-xs);
  color: var(--gx-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--gx-tracking-wide);
  white-space: nowrap;
}

.gx-table td {
  padding: var(--gx-sp-3) var(--gx-sp-4);
  color: var(--gx-text-primary);
  border-bottom: 1px solid var(--gx-border-light);
  vertical-align: middle;
}

.gx-table tbody tr {
  transition: background var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-table tbody tr:hover {
  background: var(--gx-bg-surface-hover);
}

.gx-table tbody tr:last-child td {
  border-bottom: none;
}

/* Striped */
.gx-table--striped tbody tr:nth-child(even) {
  background: var(--gx-bg-surface-alt);
}

/* Compact */
.gx-table--compact th,
.gx-table--compact td {
  padding: var(--gx-sp-2) var(--gx-sp-3);
}

/* Inside card */
.gx-card .gx-table th:first-child,
.gx-card .gx-table td:first-child { padding-left: var(--gx-sp-4); }
.gx-card .gx-table th:last-child,
.gx-card .gx-table td:last-child { padding-right: var(--gx-sp-4); }

/* Sortable column */
.gx-table__sortable {
  cursor: pointer;
  user-select: none;
}
.gx-table__sortable:hover { color: var(--gx-primary); }


/* ─── EMPTY STATE ────────────────────────────────────────── */
.gx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gx-sp-12) var(--gx-sp-4);
  text-align: center;
}

.gx-empty__icon {
  font-size: 48px;
  color: var(--gx-text-disabled);
  margin-bottom: var(--gx-sp-4);
}

.gx-empty__title {
  font-size: var(--gx-text-md);
  font-weight: var(--gx-weight-semibold);
  color: var(--gx-text-primary);
  margin-bottom: var(--gx-sp-1);
}

.gx-empty__desc {
  font-size: var(--gx-text-sm);
  color: var(--gx-text-muted);
  max-width: 320px;
}
/*
 * GALAPPXY — Modals & Loaders & Toasts
 */

/* ─── MODAL ──────────────────────────────────────────────── */
.gx-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--gx-bg-overlay);
  z-index: var(--gx-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gx-sp-4);
  opacity: 0;
  visibility: hidden;
  transition: all var(--gx-duration-base) var(--gx-ease-default);
}

.gx-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.gx-modal {
  background: var(--gx-bg-surface);
  border-radius: var(--gx-radius-xl);
  box-shadow: var(--gx-shadow-float);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.96);
  transition: transform var(--gx-duration-medium) var(--gx-ease-bounce);
  overflow: hidden;
}

.gx-modal-backdrop.is-open .gx-modal {
  transform: translateY(0) scale(1);
}

.gx-modal--sm { max-width: 400px; }
.gx-modal--lg { max-width: 680px; }
.gx-modal--xl { max-width: 900px; }

.gx-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gx-sp-4) var(--gx-sp-5);
  border-bottom: 1px solid var(--gx-border-light);
  flex-shrink: 0;
}

.gx-modal__title {
  font-size: var(--gx-text-lg);
  font-weight: var(--gx-weight-semibold);
}

.gx-modal__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gx-radius-md);
  border: none;
  background: none;
  color: var(--gx-text-muted);
  cursor: pointer;
  transition: all var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-modal__close:hover {
  background: var(--gx-bg-surface-alt);
  color: var(--gx-text-primary);
}

.gx-modal__body {
  padding: var(--gx-sp-5);
  overflow-y: auto;
  flex-grow: 1;
}

.gx-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gx-sp-3);
  padding: var(--gx-sp-4) var(--gx-sp-5);
  border-top: 1px solid var(--gx-border-light);
  flex-shrink: 0;
}


/* ─── LOADERS ────────────────────────────────────────────── */

/* Spinner */
.gx-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--gx-border-color);
  border-top-color: var(--gx-primary);
  border-radius: 50%;
  animation: gx-spin 0.7s linear infinite;
}

.gx-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.gx-spinner--lg { width: 36px; height: 36px; border-width: 3px; }
.gx-spinner--xl { width: 48px; height: 48px; border-width: 3.5px; }

.gx-spinner--light {
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: #FFFFFF;
}

/* Progress bar */
.gx-progress {
  width: 100%;
  height: 6px;
  background: var(--gx-bg-surface-alt);
  border-radius: var(--gx-radius-full);
  overflow: hidden;
}

.gx-progress__bar {
  height: 100%;
  background: var(--gx-primary);
  border-radius: var(--gx-radius-full);
  transition: width var(--gx-duration-slow) var(--gx-ease-default);
}

.gx-progress__bar--success { background: var(--gx-success); }
.gx-progress__bar--danger  { background: var(--gx-danger); }

/* Indeterminate progress */
.gx-progress--indeterminate .gx-progress__bar {
  width: 30% !important;
  animation: gx-indeterminate 1.5s ease-in-out infinite;
}

@keyframes gx-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Skeleton loader */
.gx-skeleton {
  background: linear-gradient(
    90deg,
    var(--gx-bg-surface-alt) 25%,
    var(--gx-bg-surface-hover) 50%,
    var(--gx-bg-surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: gx-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--gx-radius-sm);
}

.gx-skeleton--text { height: 14px; margin-bottom: var(--gx-sp-2); }
.gx-skeleton--title { height: 20px; width: 60%; margin-bottom: var(--gx-sp-3); }
.gx-skeleton--circle { border-radius: 50%; }
.gx-skeleton--card { height: 120px; border-radius: var(--gx-card-radius); }

@keyframes gx-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Full page loader */
.gx-page-loader {
  position: fixed;
  inset: 0;
  z-index: var(--gx-z-loader);
  background: var(--gx-bg-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gx-sp-4);
  transition: opacity var(--gx-duration-slow) var(--gx-ease-out);
}

.gx-page-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}


/* ─── TOASTS ─────────────────────────────────────────────── */
.gx-toast-container {
  position: fixed;
  bottom: var(--gx-sp-6);
  right: var(--gx-sp-6);
  z-index: var(--gx-z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--gx-sp-3);
}

.gx-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--gx-sp-3);
  padding: var(--gx-sp-3) var(--gx-sp-4);
  background: var(--gx-bg-elevated);
  border: 1px solid var(--gx-border-light);
  border-radius: var(--gx-radius-lg);
  box-shadow: var(--gx-shadow-lg);
  min-width: 300px;
  max-width: 420px;
  animation: gx-slide-in 0.3s var(--gx-ease-bounce);
}

.gx-toast--success { border-left: 3px solid var(--gx-success); }
.gx-toast--danger  { border-left: 3px solid var(--gx-danger); }
.gx-toast--warning { border-left: 3px solid var(--gx-warning); }
.gx-toast--info    { border-left: 3px solid var(--gx-info); }

.gx-toast__icon { font-size: 18px; margin-top: 1px; flex-shrink: 0; }
.gx-toast--success .gx-toast__icon { color: var(--gx-success); }
.gx-toast--danger  .gx-toast__icon { color: var(--gx-danger); }

.gx-toast__body { flex-grow: 1; }

.gx-toast__title {
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-semibold);
  color: var(--gx-text-primary);
}

.gx-toast__message {
  font-size: var(--gx-text-xs);
  color: var(--gx-text-secondary);
  margin-top: 2px;
}

.gx-toast__close {
  border: none;
  background: none;
  color: var(--gx-text-muted);
  cursor: pointer;
  padding: 2px;
  font-size: 16px;
}

@keyframes gx-slide-in {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
/*
 * GALAPPXY — Animations
 * Reusable animation classes
 */

/* ─── ENTRY ANIMATIONS ───────────────────────────────────── */
.gx-fade-in {
  animation: gx-fade-in var(--gx-duration-base) var(--gx-ease-default) forwards;
}

.gx-fade-in-up {
  animation: gx-fade-in-up var(--gx-duration-medium) var(--gx-ease-out) forwards;
}

.gx-fade-in-down {
  animation: gx-fade-in-down var(--gx-duration-medium) var(--gx-ease-out) forwards;
}

.gx-slide-in-right {
  animation: gx-slide-in-right var(--gx-duration-medium) var(--gx-ease-out) forwards;
}

.gx-slide-in-left {
  animation: gx-slide-in-left var(--gx-duration-medium) var(--gx-ease-out) forwards;
}

.gx-scale-in {
  animation: gx-scale-in var(--gx-duration-medium) var(--gx-ease-bounce) forwards;
}

/* Staggered delays for lists */
.gx-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.gx-stagger > *:nth-child(2)  { animation-delay: 50ms; }
.gx-stagger > *:nth-child(3)  { animation-delay: 100ms; }
.gx-stagger > *:nth-child(4)  { animation-delay: 150ms; }
.gx-stagger > *:nth-child(5)  { animation-delay: 200ms; }
.gx-stagger > *:nth-child(6)  { animation-delay: 250ms; }
.gx-stagger > *:nth-child(7)  { animation-delay: 300ms; }
.gx-stagger > *:nth-child(8)  { animation-delay: 350ms; }
.gx-stagger > *:nth-child(9)  { animation-delay: 400ms; }
.gx-stagger > *:nth-child(10) { animation-delay: 450ms; }

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes gx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gx-fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gx-fade-in-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gx-slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes gx-slide-in-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes gx-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── MICRO-INTERACTIONS ─────────────────────────────────── */

/* Gelatine bounce (para notification dot) */
.gx-gelatine {
  animation: gx-gelatine 0.6s ease-out;
}

@keyframes gx-gelatine {
  0%, 100% { transform: scale(1); }
  25%  { transform: scale(0.8, 1.2); }
  50%  { transform: scale(1.15, 0.85); }
  75%  { transform: scale(0.95, 1.05); }
}

/* Shake (para errores) */
.gx-shake {
  animation: gx-shake 0.5s ease-out;
}

@keyframes gx-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

@keyframes gx-spin {
  to { transform: rotate(360deg); }
}
/*
 * ╔═══════════════════════════════════════════════════════════╗
 * ║  GALAPPXY — Extensions                                    ║
 * ║  v2.1 · Febrero 2026                                      ║
 * ║                                                          ║
 * ║  Extensiones del framework core:                          ║
 * ║  - Smart child sidebar menu (chevrons + direct nav)       ║
 * ║  - Right trigger mobile toggle                            ║
 * ║  - Mobile dropdown overrides (full-width)                 ║
 * ║  - Impersonation banner                                   ║
 * ║  - Profile switcher                                       ║
 * ║  - Topbar profile ID                                      ║
 * ║  - Embed mode                                             ║
 * ╚═══════════════════════════════════════════════════════════╝
 */


/* ─── SMART MENU (Chevron + Direct Navigate) ─────────────── */

.gx-childsidebar__chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  opacity: 0.4;
  transition: transform var(--gx-duration-base) var(--gx-ease-default),
              opacity var(--gx-duration-base) var(--gx-ease-default);
  flex-shrink: 0;
}

.gx-childsidebar__group-title:hover .gx-childsidebar__chevron {
  opacity: 0.7;
}

.gx-childsidebar__group--expandable.is-expanded .gx-childsidebar__chevron {
  transform: rotate(90deg);
  opacity: 0.8;
}

.gx-childsidebar__group--direct .gx-childsidebar__chevron {
  display: none;
}

.gx-childsidebar__group.is-active > .gx-childsidebar__group-title {
  background: var(--gx-childsidebar-hover);
  color: var(--gx-sidebar-text-active);
}

.gx-childsidebar__group-title {
  position: relative;
}

.gx-childsidebar__group.is-active > .gx-childsidebar__group-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--gx-sidebar-accent);
  border-radius: 0 var(--gx-radius-full) var(--gx-radius-full) 0;
}

.gx-childsidebar__subitem.is-active {
  background: var(--gx-childsidebar-hover);
  color: var(--gx-sidebar-text-active);
  font-weight: var(--gx-weight-medium);
}


/* ─── RIGHT TRIGGER: Mobile toggle button ────────────────── */

.gx-right-trigger__toggle {
  display: none;
}

@media (max-width: 768px) {
  .gx-right-trigger__toggle {
    display: flex;
  }

  .gx-right-trigger__toggle .gx-icon {
    transition: transform var(--gx-duration-base) var(--gx-ease-default);
  }

  .gx-right-trigger.is-mobile-expanded .gx-right-trigger__toggle .gx-icon {
    transform: rotate(180deg);
  }
}


/* ─── MOBILE: Full-width dropdowns override (final) ──────── 
   These must come AFTER component-level dropdown widths
   to win the CSS specificity battle on mobile.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .gx-dropdown--notifications .gx-dropdown__menu,
  .gx-dropdown--modules .gx-dropdown__menu,
  .gx-dropdown--profile .gx-dropdown__menu {
    position: fixed;
    top: var(--gx-topbar-height);
    left: var(--gx-sp-3);
    right: var(--gx-sp-3);
    width: auto;
    min-width: unset;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .gx-dropdown--notifications .gx-dropdown__menu,
  .gx-dropdown--modules .gx-dropdown__menu,
  .gx-dropdown--profile .gx-dropdown__menu {
    left: var(--gx-sp-2);
    right: var(--gx-sp-2);
  }
}


/* ─── IMPERSONATION BANNER ───────────────────────────────── */

.gx-impersonate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gx-sp-3);
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #FFF;
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-medium);
  z-index: calc(var(--gx-z-toast) + 10);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
  padding: 0 var(--gx-sp-4);
}

.gx-impersonate__badge {
  background: rgba(255,255,255,0.2);
  padding: 1px 8px;
  border-radius: var(--gx-radius-full);
  font-size: 10px;
  font-weight: var(--gx-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gx-impersonate__btn {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: #FFF;
  padding: 2px 12px;
  border-radius: var(--gx-radius-full);
  font-size: var(--gx-text-xs);
  font-weight: var(--gx-weight-semibold);
  cursor: pointer;
  transition: all var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-impersonate__btn:hover {
  background: rgba(255,255,255,0.35);
}

/* Push everything down when impersonating */
body.gx-impersonating .gx-sidebar,
body.gx-impersonating .gx-topbar,
body.gx-impersonating .gx-childsidebar,
body.gx-impersonating .gx-right-trigger,
body.gx-impersonating .gx-panel {
  top: 36px;
}

@media (max-width: 768px) {
  .gx-impersonate {
    height: 60px;
    flex-wrap: wrap;
    gap: var(--gx-sp-2);
    padding: var(--gx-sp-2) var(--gx-sp-3);
    font-size: var(--gx-text-xs);
  }

  body.gx-impersonating .gx-sidebar,
  body.gx-impersonating .gx-topbar,
  body.gx-impersonating .gx-childsidebar,
  body.gx-impersonating .gx-right-trigger,
  body.gx-impersonating .gx-panel {
    top: 60px;
  }
}


/* ─── PROFILE SWITCHER ───────────────────────────────────── */

.gx-profile-switch {
  padding: var(--gx-sp-2) var(--gx-sp-3);
}

.gx-profile-switch__label {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-2);
  font-size: var(--gx-text-xs);
  font-weight: var(--gx-weight-semibold);
  color: var(--gx-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--gx-tracking-wide);
  padding: var(--gx-sp-2);
  border-radius: var(--gx-radius-md);
  cursor: pointer;
  transition: all var(--gx-duration-fast) var(--gx-ease-default);
  user-select: none;
}

.gx-profile-switch__label:hover {
  background: var(--gx-bg-surface-hover);
  color: var(--gx-text-primary);
}

.gx-profile-switch__arrow {
  transition: transform var(--gx-duration-base) var(--gx-ease-default);
}

.gx-profile-switch.is-expanded .gx-profile-switch__arrow {
  transform: rotate(180deg);
}

/* Collapsible list */
.gx-profile-switch__list {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--gx-duration-medium) var(--gx-ease-default);
}

.gx-profile-switch.is-expanded .gx-profile-switch__list {
  max-height: 300px;
}

.gx-profile-switch__item {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-3);
  padding: var(--gx-sp-2) var(--gx-sp-2);
  border-radius: var(--gx-radius-md);
  cursor: pointer;
  transition: all var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-profile-switch__item:hover {
  background: var(--gx-bg-surface-hover);
}

.gx-profile-switch__item.is-active {
  background: rgba(var(--gx-primary-rgb), 0.06);
}

.gx-profile-switch__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gx-profile-switch__name {
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-medium);
  color: var(--gx-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gx-profile-switch__role {
  font-size: var(--gx-text-xs);
  color: var(--gx-text-muted);
}

.gx-profile-switch__check {
  visibility: hidden;
  flex-shrink: 0;
}

.gx-profile-switch__item.is-active .gx-profile-switch__check {
  visibility: visible;
}


/* ─── TOPBAR PROFILE ID ──────────────────────────────────── */

.gx-topbar__profile-id {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--gx-bg-surface);
  border: 1px solid var(--gx-border-light);
  border-radius: var(--gx-radius-full);
  font-size: 11px;
  font-weight: var(--gx-weight-bold);
  color: var(--gx-text-primary);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  letter-spacing: 0.02em;
  cursor: default;
  user-select: all;
  white-space: nowrap;
}

.gx-topbar__profile-id:hover {
  background: var(--gx-bg-surface-hover);
}


/* ─── EMBED MODE ─────────────────────────────────────────── */

.gx-app.gx-app--embed {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "content";
}

.gx-app.gx-app--embed .gx-sidebar,
.gx-app.gx-app--embed .gx-childsidebar,
.gx-app.gx-app--embed .gx-topbar {
  display: none !important;
}

body.gx-embed .gx-right-trigger,
body.gx-embed .gx-impersonate {
  display: none !important;
}

.gx-app.gx-app--embed .gx-content {
  grid-area: content;
  padding: var(--gx-sp-4);
  max-height: 100vh;
  overflow-y: auto;
}