@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;600;800&display=swap');@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;600;800&display=swap');

/* ========================================================
   DASHBOARD
======================================================== */

/* ----------------------------------------------------
   TEMA DEL DASHBOARD CLARO
---------------------------------------------------- */
.admin-theme {
  --color-primary: #000000; /* Negro Puro */
  --color-primary-text: #ffffff;       /* Azul principal */
  --color-primary-hover: #333333;
  --color-secondary: #f3f4f6; /* Gris muy suave */     /* Botones secundarios / nav */
  --color-danger: #ef4444;        /* Rojo eliminar/error */
  --color-danger-hover: #dc2626;
  --color-warning: #f59e0b;       /* Naranja advertencia */
  --color-warning-hover: #d97706;
  --color-success: #10b981;       /* Verde xito */
  
  --bg-main: #ffffff;             /* Fondo gris super claro */
  --bg-card: #ffffff;             /* Fondo de tarjetas */
  --bg-input: #f9fafb;            /* Fondo de inputs */
  
  --text-main: #000000;           /* Texto oscuro principal */
  --text-muted: #000000; /* Gris plomo */          /* Texto secundario gris */
  
  --border-color: #c9c9c9;        /* Bordes sutiles */
  --border-focus: rgba(37, 99, 235, 0.4);
  --bg-overlay: rgba(0, 0, 0, 0.05); /* Transparencia clara */
  color-scheme: light;

}

/* ----------------------------------------------------
   TEMA DEL DASHBOARD OSCURO
---------------------------------------------------- */
.admin-theme-dark {
  --color-primary: #ffffff;
  --color-primary-text: #000000;       
  --color-primary-hover: #ffffff;
  --color-secondary: #1f2937;     
  --color-danger: #ef4444;        
  --color-danger-hover: #dc2626;
  --color-warning: #f59e0b;       
  --color-warning-hover: #d97706;
  --color-success: #10b981;       
  
  --bg-main: #000000;             /* Fondo principal negro */
  --bg-card: #000000;             /* Fondo de sidebar y cards */
  --bg-input: #000000;            /* Fondo de inputs */
  
  --text-main: #ffffff;           /* Texto blanco principal */
  --text-muted: #9ca3af; /* Texto secundario */
  
  --border-color: rgba(255, 255, 255, 0.06); /* Bordes sutiles oscuros */
  --border-focus: rgba(37, 99, 235, 0.4);
  --bg-overlay: rgba(255, 255, 255, 0.05); /* Transparencia oscura */
  color-scheme: dark;
}



/* ========================================================
   PAGINAS PBLICAS
======================================================== */
.home-theme {
  --color-primary: #c9a227;       /* Dorado premium */
  --color-primary-hover: #e6c65c;
  --color-secondary: #1a1a1a;
  --color-danger: #ff5252;
  --color-warning: #ffb142;
  --color-success: #33d9b2;
  
  --bg-main: #0d0d0d;             /* Fondo principal muy oscuro */
  --bg-card: rgba(15, 15, 15, 0.65); /* Fondo glassmorphism */
  --bg-input: rgba(20, 20, 20, 0.6);
  
  --text-main: #ffffff;           /* Texto claro principal */
  --text-muted: #a0a0a0;          /* Texto gris sutil */
  
  --border-color: rgba(255, 255, 255, 0.08); /* Bordes sutiles claros */
  --border-focus: rgba(201, 162, 39, 0.5);   /* Foco dorado */
  color-scheme: dark;
}


/* ========================================================
   MODULO POS
======================================================== */
/* ----------------------------------------------------
   TEMA DEL POS CLARO
---------------------------------------------------- */
.pos-theme {
  --color-primary: #000000;       /* Negro puro */
  --color-primary-text: #ffffff;
  --color-primary-hover: #333333;
  --color-secondary: #e5e7eb;     
  --color-danger: #ef4444;        
  --color-danger-hover: #dc2626;
  --color-warning: #f59e0b;       
  --color-success: #10b981;       
  
  --bg-main: #ffffff;             /* Fondo blanco puro */
  --bg-card: #ffffff;             
  --bg-input: #ffffff;            
  
  --text-main: #000000;           /* Texto negro puro */
  --text-muted: #6b7280;          
  
  --border-color: #000000;        /* Bordes negros */
  --border-focus: #000000;
  --bg-overlay: rgba(0, 0, 0, 0.05);
  color-scheme: light;
}

/* ----------------------------------------------------
   TEMA DEL POS OSCURO
---------------------------------------------------- */
.pos-theme-dark {
  --color-primary: #ffffff;       /* Blanco puro */
  --color-primary-text: #000000;       
  --color-primary-hover: #e5e7eb;
  --color-secondary: #1f2937;     
  --color-danger: #ef4444;        
  --color-danger-hover: #dc2626;
  --color-warning: #fbbf24;       
  --color-success: #34d399;       
  
  --bg-main: #0a0a0a;             /* Fondo casi negro puro (muy oscuro) */
  --bg-card: #0a0a0a;             
  --bg-input: #0a0a0a;            
  
  --text-main: #ffffff;           /* Texto blanco puro */
  --text-muted: #9ca3af; 
  
  --border-color: #ffffff;        /* Bordes blancos */
  --border-focus: #ffffff;
  --bg-overlay: rgba(255, 255, 255, 0.05);
  color-scheme: dark;
}

/* ========================================================
   MODULO SHOP (TIENDA ONLINE)
======================================================== */
/* ----------------------------------------------------
   TEMA DEL SHOP CLARO
---------------------------------------------------- */
.shop-theme {
  --color-primary: #000000;       /* Negro elegante */
  --color-primary-text: #ffffff;
  --color-primary-hover: #333333;
  --color-secondary: #f3f4f6;     
  --color-danger: #ef4444;        
  --color-danger-hover: #dc2626;
  --color-warning: #f59e0b;       
  --color-success: #10b981;       
  
  --bg-main: #ffffff;             /* Blanco puro premium */
  --bg-card: #ffffff;             
  --bg-input: #f9fafb;            
  
  --text-main: #111827;           /* Texto muy oscuro */
  --text-muted: #6b7280;          
  
  --border-color: #e5e7eb;        /* Bordes sutiles */
  --border-focus: #000000;
  --bg-overlay: rgba(0, 0, 0, 0.05);
  color-scheme: light;
}

/* ----------------------------------------------------
   TEMA DEL SHOP OSCURO
---------------------------------------------------- */
.shop-theme-dark {
  --color-primary: #ffffff;       
  --color-primary-text: #000000;       
  --color-primary-hover: #e5e7eb;
  --color-secondary: #1f2937;     
  --color-danger: #ef4444;        
  --color-danger-hover: #dc2626;
  --color-warning: #fbbf24;       
  --color-success: #34d399;       
  
  --bg-main: #0f172a;             /* Fondo slate oscuro elegante */
  --bg-card: #1e293b;             
  --bg-input: #334155;            
  
  --text-main: #f8fafc;           
  --text-muted: #94a3b8; 
  
  --border-color: #334155;        
  --border-focus: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}





/* ========================================================
   MODULO PROFILE (PERFIL DE USUARIO)
======================================================== */
/* ----------------------------------------------------
   TEMA DEL PROFILE CLARO
---------------------------------------------------- */
.profile-theme {
  --color-primary: #000000;       /* Negro elegante */
  --color-primary-text: #ffffff;
  --color-primary-hover: #333333;
  --color-secondary: #f3f4f6;     
  --color-danger: #ef4444;        
  --color-danger-hover: #dc2626;
  --color-warning: #f59e0b;       
  --color-success: #10b981;       
  
  --bg-main: #ffffff;             /* Blanco puro premium */
  --bg-card: #ffffff;             
  --bg-input: #f9fafb;            
  
  --text-main: #111827;           /* Texto muy oscuro */
  --text-muted: #6b7280;          
  
  --border-color: #e5e7eb;        /* Bordes sutiles */
  --border-focus: #000000;
  --bg-overlay: rgba(0, 0, 0, 0.05);
  color-scheme: light;
}

/* ----------------------------------------------------
   TEMA DEL PROFILE OSCURO
---------------------------------------------------- */
.profile-theme-dark {
  --color-primary: #ffffff;       
  --color-primary-text: #000000;       
  --color-primary-hover: #cccccc;
  --color-secondary: #1a1a1a;     
  --color-danger: #ef4444;        
  --color-danger-hover: #dc2626;
  --color-warning: #fbbf24;       
  --color-success: #34d399;       
  
  --bg-main: #000000;             /* Fondo negro puro */
  --bg-card: #0a0a0a;             /* Fondo tarjeta casi negro */
  --bg-input: #111111;            /* Fondo input oscuro */
  
  --text-main: #ffffff;           
  --text-muted: #a3a3a3; 
  
  --border-color: #262626;        
  --border-focus: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;

}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;

}
/* ! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
.container{
  width: 100%;

}
@media (min-width: 640px){
  .container{
    max-width: 640px;

  }

}
@media (min-width: 768px){
  .container{
    max-width: 768px;

  }

}
@media (min-width: 1024px){
  .container{
    max-width: 1024px;

  }

}
@media (min-width: 1280px){
  .container{
    max-width: 1280px;

  }

}
@media (min-width: 1536px){
  .container{
    max-width: 1536px;

  }

}
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;

}
.pointer-events-none{
  pointer-events: none;

}
.visible{
  visibility: visible;

}
.invisible{
  visibility: hidden;

}
.collapse{
  visibility: collapse;

}
.fixed{
  position: fixed;

}
.absolute{
  position: absolute;

}
.relative{
  position: relative;

}
.sticky{
  position: sticky;

}
.inset-0{
  inset: 0px;

}
.-bottom-8{
  bottom: -2rem;

}
.bottom-0{
  bottom: 0px;

}
.bottom-3\.5{
  bottom: 0.875rem;

}
.left-0{
  left: 0px;

}
.right-0{
  right: 0px;

}
.right-3{
  right: 0.75rem;

}
.right-3\.5{
  right: 0.875rem;

}
.right-4{
  right: 1rem;

}
.top-1\/2{
  top: 50%;

}
.top-3\.5{
  top: 0.875rem;

}
.top-4{
  top: 1rem;

}
.top-full{
  top: 100%;

}
.z-10{
  z-index: 10;

}
.z-20{
  z-index: 20;

}
.z-40{
  z-index: 40;

}
.z-50{
  z-index: 50;

}
.mx-auto{
  margin-left: auto;
  margin-right: auto;

}
.my-5{
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;

}
.mb-0\.5{
  margin-bottom: 0.125rem;

}
.mb-1{
  margin-bottom: 0.25rem;

}
.mb-10{
  margin-bottom: 2.5rem;

}
.mb-2{
  margin-bottom: 0.5rem;

}
.mb-3{
  margin-bottom: 0.75rem;

}
.mb-4{
  margin-bottom: 1rem;

}
.mb-5{
  margin-bottom: 1.25rem;

}
.mb-6{
  margin-bottom: 1.5rem;

}
.mb-8{
  margin-bottom: 2rem;

}
.ml-12{
  margin-left: 3rem;

}
.ml-2{
  margin-left: 0.5rem;

}
.ml-4{
  margin-left: 1rem;

}
.mr-2{
  margin-right: 0.5rem;

}
.mr-4{
  margin-right: 1rem;

}
.mt-1{
  margin-top: 0.25rem;

}
.mt-1\.5{
  margin-top: 0.375rem;

}
.mt-12{
  margin-top: 3rem;

}
.mt-2{
  margin-top: 0.5rem;

}
.mt-3{
  margin-top: 0.75rem;

}
.mt-4{
  margin-top: 1rem;

}
.mt-6{
  margin-top: 1.5rem;

}
.mt-8{
  margin-top: 2rem;

}
.block{
  display: block;

}
.inline-block{
  display: inline-block;

}
.inline{
  display: inline;

}
.flex{
  display: flex;

}
.inline-flex{
  display: inline-flex;

}
.table{
  display: table;

}
.table-cell{
  display: table-cell;

}
.grid{
  display: grid;

}
.hidden{
  display: none;

}
.aspect-\[2\/1\]{
  aspect-ratio: 2/1;

}
.aspect-square{
  aspect-ratio: 1 / 1;

}
.h-1\.5{
  height: 0.375rem;

}
.h-10{
  height: 2.5rem;

}
.h-12{
  height: 3rem;

}
.h-14{
  height: 3.5rem;

}
.h-2{
  height: 0.5rem;

}
.h-24{
  height: 6rem;

}
.h-28{
  height: 7rem;

}
.h-3\.5{
  height: 0.875rem;

}
.h-4{
  height: 1rem;

}
.h-5{
  height: 1.25rem;

}
.h-6{
  height: 1.5rem;

}
.h-64{
  height: 16rem;

}
.h-7{
  height: 1.75rem;

}
.h-8{
  height: 2rem;

}
.h-9{
  height: 2.25rem;

}
.h-\[1px\]{
  height: 1px;

}
.h-\[50px\]{
  height: 50px;

}
.h-full{
  height: 100%;

}
.h-px{
  height: 1px;

}
.max-h-\[60vh\]{
  max-height: 60vh;

}
.max-h-\[90vh\]{
  max-height: 90vh;

}
.w-1\.5{
  width: 0.375rem;

}
.w-1\/4{
  width: 25%;

}
.w-10{
  width: 2.5rem;

}
.w-11{
  width: 2.75rem;

}
.w-14{
  width: 3.5rem;

}
.w-16{
  width: 4rem;

}
.w-2{
  width: 0.5rem;

}
.w-20{
  width: 5rem;

}
.w-24{
  width: 6rem;

}
.w-3\.5{
  width: 0.875rem;

}
.w-3\/4{
  width: 75%;

}
.w-4{
  width: 1rem;

}
.w-48{
  width: 12rem;

}
.w-5{
  width: 1.25rem;

}
.w-56{
  width: 14rem;

}
.w-6{
  width: 1.5rem;

}
.w-7{
  width: 1.75rem;

}
.w-8{
  width: 2rem;

}
.w-9{
  width: 2.25rem;

}
.w-\[70px\]{
  width: 70px;

}
.w-\[85vw\]{
  width: 85vw;

}
.w-full{
  width: 100%;

}
.min-w-0{
  min-width: 0px;

}
.min-w-\[300px\]{
  min-width: 300px;

}
.max-w-4xl{
  max-width: 56rem;

}
.max-w-7xl{
  max-width: 80rem;

}
.max-w-\[100px\]{
  max-width: 100px;

}
.max-w-lg{
  max-width: 32rem;

}
.max-w-md{
  max-width: 28rem;

}
.flex-1{
  flex: 1 1 0%;

}
.flex-shrink-0{
  flex-shrink: 0;

}
.shrink-0{
  flex-shrink: 0;

}
.border-collapse{
  border-collapse: collapse;

}
.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}
.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}
.scale-\[1\.02\]{
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}
@keyframes pulse{
  50%{
    opacity: .5;

  }

}
.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

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

  }

}
.animate-spin{
  animation: spin 1s linear infinite;

}
.cursor-not-allowed{
  cursor: not-allowed;

}
.cursor-pointer{
  cursor: pointer;

}
.resize{
  resize: both;

}
.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));

}
.flex-col{
  flex-direction: column;

}
.flex-wrap{
  flex-wrap: wrap;

}
.items-start{
  align-items: flex-start;

}
.items-center{
  align-items: center;

}
.items-baseline{
  align-items: baseline;

}
.justify-end{
  justify-content: flex-end;

}
.justify-center{
  justify-content: center;

}
.justify-between{
  justify-content: space-between;

}
.gap-1{
  gap: 0.25rem;

}
.gap-1\.5{
  gap: 0.375rem;

}
.gap-2{
  gap: 0.5rem;

}
.gap-2\.5{
  gap: 0.625rem;

}
.gap-3{
  gap: 0.75rem;

}
.gap-4{
  gap: 1rem;

}
.gap-6{
  gap: 1.5rem;

}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));

}
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));

}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));

}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));

}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity));

}
.overflow-hidden{
  overflow: hidden;

}
.overflow-x-auto{
  overflow-x: auto;

}
.overflow-y-auto{
  overflow-y: auto;

}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}
.whitespace-nowrap{
  white-space: nowrap;

}
.break-all{
  word-break: break-all;

}
.rounded{
  border-radius: 0.25rem;

}
.rounded-2xl{
  border-radius: 1rem;

}
.rounded-3xl{
  border-radius: 1.5rem;

}
.rounded-\[2rem\]{
  border-radius: 2rem;

}
.rounded-full{
  border-radius: 9999px;

}
.rounded-lg{
  border-radius: 0.5rem;

}
.rounded-md{
  border-radius: 0.375rem;

}
.rounded-none{
  border-radius: 0px;

}
.rounded-xl{
  border-radius: 0.75rem;

}
.border{
  border-width: 1px;

}
.border-2{
  border-width: 2px;

}
.border-x{
  border-left-width: 1px;
  border-right-width: 1px;

}
.border-b{
  border-bottom-width: 1px;

}
.border-l-0{
  border-left-width: 0px;

}
.border-r-0{
  border-right-width: 0px;

}
.border-t{
  border-top-width: 1px;

}
.border-t-0{
  border-top-width: 0px;

}
.border-\[\#333\]{
  --tw-border-opacity: 1;
  border-color: rgb(51 51 51 / var(--tw-border-opacity));

}
.border-\[var\(--color-primary\)\]{
  border-color: var(--color-primary);

}
.border-amber-200\/60{
  border-color: rgb(253 230 138 / 0.6);

}
.border-black{
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));

}
.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity));

}
.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));

}
.border-gray-200\/70{
  border-color: rgb(229 231 235 / 0.7);

}
.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));

}
.border-red-600{
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));

}
.border-white\/30{
  border-color: rgb(255 255 255 / 0.3);

}
.border-white\/40{
  border-color: rgb(255 255 255 / 0.4);

}
.border-t-transparent{
  border-top-color: transparent;

}
.border-t-white{
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity));

}
.bg-\[\#1a1a1a\]{
  --tw-bg-opacity: 1;
  background-color: rgb(26 26 26 / var(--tw-bg-opacity));

}
.bg-\[var\(--bg-card\)\]{
  background-color: var(--bg-card);

}
.bg-\[var\(--bg-main\)\]{
  background-color: var(--bg-main);

}
.bg-\[var\(--color-primary\)\]{
  background-color: var(--color-primary);

}
.bg-amber-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity));

}
.bg-amber-500{
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity));

}
.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));

}
.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);

}
.bg-black\/80{
  background-color: rgb(0 0 0 / 0.8);

}
.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));

}
.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));

}
.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));

}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));

}
.bg-gray-50\/80{
  background-color: rgb(249 250 251 / 0.8);

}
.bg-gray-800{
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));

}
.bg-gray-900{
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));

}
.bg-orange-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity));

}
.bg-transparent{
  background-color: transparent;

}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));

}
.bg-white\/55{
  background-color: rgb(255 255 255 / 0.55);

}
.bg-white\/70{
  background-color: rgb(255 255 255 / 0.7);

}
.bg-white\/85{
  background-color: rgb(255 255 255 / 0.85);

}
.fill-red-500{
  fill: #ef4444;

}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;

}
.object-center{
  -o-object-position: center;
     object-position: center;

}
.p-2{
  padding: 0.5rem;

}
.p-2\.5{
  padding: 0.625rem;

}
.p-4{
  padding: 1rem;

}
.p-5{
  padding: 1.25rem;

}
.p-6{
  padding: 1.5rem;

}
.p-8{
  padding: 2rem;

}
.px-0{
  padding-left: 0px;
  padding-right: 0px;

}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;

}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;

}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;

}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;

}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;

}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;

}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;

}
.px-8{
  padding-left: 2rem;
  padding-right: 2rem;

}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;

}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;

}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;

}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;

}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;

}
.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;

}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;

}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;

}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;

}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;

}
.pb-28{
  padding-bottom: 7rem;

}
.pb-4{
  padding-bottom: 1rem;

}
.pt-0\.5{
  padding-top: 0.125rem;

}
.pt-2{
  padding-top: 0.5rem;

}
.pt-4{
  padding-top: 1rem;

}
.pt-5{
  padding-top: 1.25rem;

}
.text-left{
  text-align: left;

}
.text-center{
  text-align: center;

}
.text-right{
  text-align: right;

}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;

}
.text-\[10px\]{
  font-size: 10px;

}
.text-\[11px\]{
  font-size: 11px;

}
.text-\[12px\]{
  font-size: 12px;

}
.text-\[13px\]{
  font-size: 13px;

}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;

}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;

}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;

}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;

}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;

}
.font-bold{
  font-weight: 700;

}
.font-medium{
  font-weight: 500;

}
.font-semibold{
  font-weight: 600;

}
.uppercase{
  text-transform: uppercase;

}
.lowercase{
  text-transform: lowercase;

}
.capitalize{
  text-transform: capitalize;

}
.italic{
  font-style: italic;

}
.leading-relaxed{
  line-height: 1.625;

}
.tracking-\[0\.2em\]{
  letter-spacing: 0.2em;

}
.tracking-tight{
  letter-spacing: -0.025em;

}
.tracking-wide{
  letter-spacing: 0.025em;

}
.tracking-wider{
  letter-spacing: 0.05em;

}
.tracking-widest{
  letter-spacing: 0.1em;

}
.text-\[var\(--color-primary-text\)\]{
  color: var(--color-primary-text);

}
.text-\[var\(--text-main\)\]{
  color: var(--text-main);

}
.text-amber-800{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity));

}
.text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));

}
.text-blue-700{
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));

}
.text-current{
  color: currentColor;

}
.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity));

}
.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));

}
.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));

}
.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));

}
.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));

}
.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));

}
.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));

}
.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));

}
.text-orange-600{
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity));

}
.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));

}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));

}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));

}
.underline{
  text-decoration-line: underline;

}
.line-through{
  text-decoration-line: line-through;

}
.opacity-20{
  opacity: 0.2;

}
.opacity-60{
  opacity: 0.6;

}
.opacity-70{
  opacity: 0.7;

}
.opacity-75{
  opacity: 0.75;

}
.opacity-80{
  opacity: 0.8;

}
.opacity-90{
  opacity: 0.9;

}
.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}
.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}
.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;

}
.outline{
  outline-style: solid;

}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

}
.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

}
.drop-shadow-md{
  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

}
.backdrop-blur-md{
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

}
.backdrop-blur-sm{
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;

}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;

}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;

}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;

}
.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;

}
.duration-200{
  transition-duration: 200ms;

}
.duration-300{
  transition-duration: 300ms;

}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}
.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

}

/* -------------------------------------
   ANIMACIONES GLOBALES DEL CARRITO 
   (Usadas en ProductDetail, BundleDetail, Catalog)
   ------------------------------------- */

.btn-added-animate {
  animation: successPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes successPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); background-color: #10b981; border-color: #10b981; }
  100% { transform: scale(1); background-color: #10b981; border-color: #10b981; }
}

.btn-added-animate svg {
  animation: popCheck 0.4s ease forwards;
}

@keyframes popCheck {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

#root {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
}

/* Ocultar barra de desplazamiento para todo el sistema */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html, body {
  -ms-overflow-style: none; /* IE y Edge */
  scrollbar-width: none; /* Firefox */
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  /* These fallback to basic values if no theme wrapper is present */
  background-color: var(--bg-main, #f9fafb);
  color: var(--text-main, #111827);
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2 {
  font-weight: 500;
  color: var(--text-main);
}

h1 {
  font-size: 56px;
  letter-spacing: -1.68px;
  margin: 32px 0;
  @media (max-width: 1024px) {
    font-size: 36px;
    margin: 20px 0;
  }
}

h2 {
  font-size: 24px;
  line-height: 118%;
  letter-spacing: -0.24px;
  margin: 0 0 8px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
}

p {
  margin: 0;
}


@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
  
  /* NORMALIZAR TODOS LOS MODALES A 95% EN CELULARES */
  .modal-content, 
  [class*="modal-content"] {
    width: 95% !important;
    max-width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* FIX: NORMALIZAR ALTURA DE LOS MODALES PARA EVITAR ESPACIOS EN BLANCO */
.modal-content, .modal {
  height: auto !important;
  max-height: 90vh !important;
}

/* Fix global para dropdowns (options heredan el color del select para evitar bug en Chromium) */
select option {
  background-color: inherit;
  color: inherit;
}
.pulse-anim { animation: pulseAnim 1.5s infinite; }
@keyframes pulseAnim { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } }

.products-header-actions { display: flex; gap: 10px; align-items: center; } 
 @media (max-width: 768px) { .products-header .products-header-actions { width: 100%; justify-content: center !important; align-self: center !important; } .products-header-actions > * { flex: none !important; width: -moz-max-content !important; width: max-content !important; } .carts-header-actions { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px; } .carts-header-actions button { width: 100% !important; max-width: none !important; }
  .metric-card { display: grid !important; grid-template-columns: auto 1fr !important; gap: 8px 12px !important; padding: 12px !important; }
  .metric-content { display: contents !important; }
  .metric-icon-wrapper { grid-column: 1 !important; grid-row: 1 !important; width: 32px !important; height: 32px !important; }
  .metric-icon-wrapper svg { width: 16px !important; height: 16px !important; }
  .metric-label { grid-column: 2 !important; grid-row: 1 !important; margin-bottom: 0 !important; align-self: center !important; line-height: 1.2 !important; }
  .metric-value { grid-column: 1 / -1 !important; grid-row: 2 !important; font-size: 20px !important; } }

/* Fix global horizontal scroll */
html, body, #root { overflow-x: clip; max-width: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
.last\:border-0:last-child{
  border-width: 0px;

}
.hover\:scale-\[1\.02\]:hover{
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}
.hover\:bg-\[\#333\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity));

}
.hover\:bg-\[var\(--bg-card\)\]:hover{
  background-color: var(--bg-card);

}
.hover\:bg-\[var\(--color-primary\)\]:hover{
  background-color: var(--color-primary);

}
.hover\:bg-black:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));

}
.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));

}
.hover\:bg-gray-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));

}
.hover\:bg-red-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));

}
.hover\:bg-red-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));

}
.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));

}
.hover\:text-\[var\(--color-primary-text\)\]:hover{
  color: var(--color-primary-text);

}
.hover\:text-black:hover{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));

}
.hover\:text-gray-800:hover{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));

}
.hover\:text-gray-900:hover{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));

}
.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));

}
.hover\:underline:hover{
  text-decoration-line: underline;

}
.hover\:opacity-70:hover{
  opacity: 0.7;

}
.hover\:opacity-80:hover{
  opacity: 0.8;

}
.hover\:opacity-90:hover{
  opacity: 0.9;

}
.focus\:border-black:focus{
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));

}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;

}
.focus\:ring-0:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);

}
.active\:scale-90:active{
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}
.active\:scale-\[0\.99\]:active{
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;

}
.disabled\:border-gray-300:disabled{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));

}
.disabled\:text-gray-400:disabled{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));

}
.disabled\:opacity-50:disabled{
  opacity: 0.5;

}
.disabled\:hover\:bg-transparent:hover:disabled{
  background-color: transparent;

}
.group:hover .group-hover\:translate-x-1\.5{
  --tw-translate-x: 0.375rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}
.group:hover .group-hover\:opacity-90{
  opacity: 0.9;

}
@media (min-width: 640px){
  .sm\:ml-6{
    margin-left: 1.5rem;

  }
  .sm\:block{
    display: block;

  }
  .sm\:h-36{
    height: 9rem;

  }
  .sm\:w-28{
    width: 7rem;

  }
  .sm\:w-\[52\%\]{
    width: 52%;

  }
  .sm\:max-w-\[200px\]{
    max-width: 200px;

  }
  .sm\:flex-row{
    flex-direction: row;

  }
  .sm\:items-center{
    align-items: center;

  }
  .sm\:gap-3{
    gap: 0.75rem;

  }
  .sm\:p-6{
    padding: 1.5rem;

  }
  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;

  }
  .sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;

  }

}
@media (min-width: 768px){
  .md\:block{
    display: block;

  }
  .md\:inline-block{
    display: inline-block;

  }
  .md\:grid{
    display: grid;

  }
  .md\:w-full{
    width: 100%;

  }
  .md\:rounded-xl{
    border-radius: 0.75rem;

  }
  .md\:p-8{
    padding: 2rem;

  }
  .md\:px-0{
    padding-left: 0px;
    padding-right: 0px;

  }
  .md\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;

  }
  .md\:pt-0{
    padding-top: 0px;

  }

}
@media (min-width: 1024px){
  .lg\:col-span-5{
    grid-column: span 5 / span 5;

  }
  .lg\:col-span-7{
    grid-column: span 7 / span 7;

  }
  .lg\:mt-0{
    margin-top: 0px;

  }
  .lg\:grid{
    display: grid;

  }
  .lg\:hidden{
    display: none;

  }
  .lg\:grid-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));

  }
  .lg\:items-start{
    align-items: flex-start;

  }
  .lg\:gap-x-12{
    -moz-column-gap: 3rem;
         column-gap: 3rem;

  }
  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;

  }

}
@media (prefers-color-scheme: dark){
  .dark\:bg-blue-900{
    --tw-bg-opacity: 1;
    background-color: rgb(30 58 138 / var(--tw-bg-opacity));

  }
  .dark\:text-blue-300{
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity));

  }

}
/* ========================================================
   CONFIRM MODAL STYLES (MOBILE-FIRST & DESKTOP)
   Theme adaptive: strictly mirrors active page/dashboard theme.
   ======================================================== */

/* BASE SHARED STYLES */
.confirm-modal-backdrop {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 16px;
  animation: confirmFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.confirm-modal-card {
  border-radius: 20px;
  width: 100%;
  max-width: 400px;
  overflow: hidden;
  animation: confirmSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.confirm-modal-body {
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.confirm-modal-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.confirm-modal-title {
  margin: 0 0 10px 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.confirm-modal-message {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 320px;
}

.confirm-modal-footer {
  padding: 16px 24px 20px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.confirm-modal-btn {
  flex: 1;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

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

/* Confirm Action Button Styles */
.confirm-modal-btn-confirm.warning {
  background: #f59e0b;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

.confirm-modal-btn-confirm.warning:hover {
  background: #d97706;
}

.confirm-modal-btn-confirm.danger {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

.confirm-modal-btn-confirm.danger:hover {
  background: #dc2626;
}

.confirm-modal-btn-confirm.success {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

.confirm-modal-btn-confirm.success:hover {
  background: #059669;
}

.confirm-modal-btn-confirm.info {
  background: #09090b;
  color: #ffffff;
  border: 1px solid #09090b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.confirm-modal-btn-confirm.info:hover {
  background: #27272a;
  border-color: #27272a;
}


/* ========================================================
   1. MODO CLARO (LIGHT THEME - BLANCO MONOCROMÁTICO)
   ======================================================== */

.confirm-modal-backdrop.confirm-theme-light,
.profile-light-mode .confirm-modal-backdrop:not(.confirm-theme-dark),
.profile-theme:not(.profile-theme-dark) .confirm-modal-backdrop:not(.confirm-theme-dark),
.admin-theme:not(.admin-theme-dark) .confirm-modal-backdrop:not(.confirm-theme-dark):not(.confirm-theme-light),
.shop-theme:not(.shop-theme-dark) .confirm-modal-backdrop:not(.confirm-theme-dark):not(.confirm-theme-light) {
  background: rgba(0, 0, 0, 0.5);
}

.confirm-modal-card.confirm-card-light,
.confirm-theme-light .confirm-modal-card,
.profile-light-mode .confirm-modal-card:not(.confirm-card-dark),
.profile-theme:not(.profile-theme-dark) .confirm-modal-card:not(.confirm-card-dark),
.admin-theme:not(.admin-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light),
.shop-theme:not(.shop-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) {
  background: #ffffff;
  border: 1px solid #e4e4e7;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Light Title & Message */
.confirm-card-light .confirm-modal-title,
.confirm-theme-light .confirm-modal-title,
.profile-light-mode .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-title,
.profile-theme:not(.profile-theme-dark) .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-title,
.admin-theme:not(.admin-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-title,
.shop-theme:not(.shop-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-title {
  color: #09090b;
}

.confirm-card-light .confirm-modal-message,
.confirm-theme-light .confirm-modal-message,
.profile-light-mode .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-message,
.profile-theme:not(.profile-theme-dark) .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-message,
.admin-theme:not(.admin-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-message,
.shop-theme:not(.shop-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-message {
  color: #52525b;
}

/* Light Icon Wrappers */
.confirm-card-light .confirm-modal-icon-wrapper.warning,
.confirm-theme-light .confirm-modal-icon-wrapper.warning,
.profile-light-mode .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-icon-wrapper.warning,
.profile-theme:not(.profile-theme-dark) .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-icon-wrapper.warning,
.admin-theme:not(.admin-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-icon-wrapper.warning,
.shop-theme:not(.shop-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-icon-wrapper.warning {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #d97706;
}

.confirm-card-light .confirm-modal-icon-wrapper.danger,
.confirm-theme-light .confirm-modal-icon-wrapper.danger,
.profile-light-mode .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-icon-wrapper.danger,
.profile-theme:not(.profile-theme-dark) .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-icon-wrapper.danger,
.admin-theme:not(.admin-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-icon-wrapper.danger,
.shop-theme:not(.shop-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-icon-wrapper.danger {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

.confirm-card-light .confirm-modal-icon-wrapper.success,
.confirm-theme-light .confirm-modal-icon-wrapper.success,
.profile-light-mode .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-icon-wrapper.success,
.profile-theme:not(.profile-theme-dark) .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-icon-wrapper.success,
.admin-theme:not(.admin-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-icon-wrapper.success,
.shop-theme:not(.shop-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-icon-wrapper.success {
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  color: #059669;
}

.confirm-card-light .confirm-modal-icon-wrapper.info,
.confirm-theme-light .confirm-modal-icon-wrapper.info,
.profile-light-mode .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-icon-wrapper.info,
.profile-theme:not(.profile-theme-dark) .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-icon-wrapper.info,
.admin-theme:not(.admin-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-icon-wrapper.info,
.shop-theme:not(.shop-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-icon-wrapper.info {
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  color: #09090b;
  box-shadow: none;
}

/* Light Footer & Buttons */
.confirm-card-light .confirm-modal-footer,
.confirm-theme-light .confirm-modal-footer,
.profile-light-mode .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-footer,
.profile-theme:not(.profile-theme-dark) .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-footer,
.admin-theme:not(.admin-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-footer,
.shop-theme:not(.shop-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-footer {
  background: #fafafa;
  border-top: 1px solid #e4e4e7;
}

.confirm-card-light .confirm-modal-btn-cancel,
.confirm-theme-light .confirm-modal-btn-cancel,
.profile-light-mode .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-btn-cancel,
.profile-theme:not(.profile-theme-dark) .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-btn-cancel,
.admin-theme:not(.admin-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-btn-cancel,
.shop-theme:not(.shop-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-btn-cancel {
  background: #ffffff;
  border: 1px solid #e4e4e7;
  color: #09090b;
}

.confirm-card-light .confirm-modal-btn-cancel:hover,
.confirm-theme-light .confirm-modal-btn-cancel:hover,
.profile-light-mode .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-btn-cancel:hover,
.profile-theme:not(.profile-theme-dark) .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-btn-cancel:hover,
.admin-theme:not(.admin-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-btn-cancel:hover,
.shop-theme:not(.shop-theme-dark) .confirm-modal-card:not(.confirm-card-dark):not(.confirm-card-light) .confirm-modal-btn-cancel:hover {
  background: #f4f4f5;
  border-color: #d4d4d8;
  color: #09090b;
}

.confirm-card-light .confirm-modal-btn-confirm.info,
.confirm-theme-light .confirm-modal-btn-confirm.info,
.profile-light-mode .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-btn-confirm.info {
  background: #09090b;
  color: #ffffff;
  border: 1px solid #09090b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.confirm-card-light .confirm-modal-btn-confirm.info:hover,
.confirm-theme-light .confirm-modal-btn-confirm.info:hover,
.profile-light-mode .confirm-modal-card:not(.confirm-card-dark) .confirm-modal-btn-confirm.info:hover {
  background: #27272a;
  border-color: #27272a;
}


/* ========================================================
   2. MODO OSCURO (DARK THEME - NEGRO MONOCROMÁTICO)
   ======================================================== */

.confirm-modal-backdrop.confirm-theme-dark,
.profile-dark-mode .confirm-modal-backdrop:not(.confirm-theme-light),
.profile-theme-dark .confirm-modal-backdrop:not(.confirm-theme-light),
.admin-theme-dark .confirm-modal-backdrop:not(.confirm-theme-light) {
  background: rgba(0, 0, 0, 0.78);
}

.confirm-modal-card.confirm-card-dark,
.confirm-theme-dark .confirm-modal-card,
.profile-dark-mode .confirm-modal-card:not(.confirm-card-light),
.profile-theme-dark .confirm-modal-card:not(.confirm-card-light),
.admin-theme-dark .confirm-modal-card:not(.confirm-card-light) {
  background: #09090b;
  border: 1px solid #27272a;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.confirm-card-dark .confirm-modal-title,
.confirm-theme-dark .confirm-modal-title,
.profile-dark-mode .confirm-modal-card:not(.confirm-card-light) .confirm-modal-title,
.profile-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-title,
.admin-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-title {
  color: #ffffff;
}

.confirm-card-dark .confirm-modal-message,
.confirm-theme-dark .confirm-modal-message,
.profile-dark-mode .confirm-modal-card:not(.confirm-card-light) .confirm-modal-message,
.profile-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-message,
.admin-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-message {
  color: #a1a1aa;
}

.confirm-card-dark .confirm-modal-footer,
.confirm-theme-dark .confirm-modal-footer,
.profile-dark-mode .confirm-modal-card:not(.confirm-card-light) .confirm-modal-footer,
.profile-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-footer,
.admin-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-footer {
  background: #000000;
  border-top: 1px solid #18181b;
}

.confirm-card-dark .confirm-modal-btn-cancel,
.confirm-theme-dark .confirm-modal-btn-cancel,
.profile-dark-mode .confirm-modal-card:not(.confirm-card-light) .confirm-modal-btn-cancel,
.profile-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-btn-cancel,
.admin-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-btn-cancel {
  background: #18181b;
  border: 1px solid #27272a;
  color: #e4e4e7;
}

.confirm-card-dark .confirm-modal-btn-cancel:hover,
.confirm-theme-dark .confirm-modal-btn-cancel:hover,
.profile-dark-mode .confirm-modal-card:not(.confirm-card-light) .confirm-modal-btn-cancel:hover,
.profile-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-btn-cancel:hover,
.admin-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-btn-cancel:hover {
  background: #27272a;
  border-color: #3f3f46;
  color: #ffffff;
}

/* Dark Icon Wrappers */
.confirm-card-dark .confirm-modal-icon-wrapper.warning,
.confirm-theme-dark .confirm-modal-icon-wrapper.warning,
.profile-dark-mode .confirm-modal-card:not(.confirm-card-light) .confirm-modal-icon-wrapper.warning,
.profile-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-icon-wrapper.warning,
.admin-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-icon-wrapper.warning {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}

.confirm-card-dark .confirm-modal-icon-wrapper.danger,
.confirm-theme-dark .confirm-modal-icon-wrapper.danger,
.profile-dark-mode .confirm-modal-card:not(.confirm-card-light) .confirm-modal-icon-wrapper.danger,
.profile-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-icon-wrapper.danger,
.admin-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-icon-wrapper.danger {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.confirm-card-dark .confirm-modal-icon-wrapper.success,
.confirm-theme-dark .confirm-modal-icon-wrapper.success,
.profile-dark-mode .confirm-modal-card:not(.confirm-card-light) .confirm-modal-icon-wrapper.success,
.profile-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-icon-wrapper.success,
.admin-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-icon-wrapper.success {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.confirm-card-dark .confirm-modal-icon-wrapper.info,
.confirm-theme-dark .confirm-modal-icon-wrapper.info,
.profile-dark-mode .confirm-modal-card:not(.confirm-card-light) .confirm-modal-icon-wrapper.info,
.profile-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-icon-wrapper.info,
.admin-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-icon-wrapper.info {
  background: #18181b;
  border: 1px solid #27272a;
  color: #ffffff;
  box-shadow: none;
}

.confirm-card-dark .confirm-modal-btn-confirm.info,
.confirm-theme-dark .confirm-modal-btn-confirm.info,
.profile-dark-mode .confirm-modal-card:not(.confirm-card-light) .confirm-modal-btn-confirm.info,
.profile-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-btn-confirm.info,
.admin-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-btn-confirm.info {
  background: #ffffff;
  color: #09090b;
  border: 1px solid #ffffff;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.1);
}

.confirm-card-dark .confirm-modal-btn-confirm.info:hover,
.confirm-theme-dark .confirm-modal-btn-confirm.info:hover,
.profile-dark-mode .confirm-modal-card:not(.confirm-card-light) .confirm-modal-btn-confirm.info:hover,
.profile-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-btn-confirm.info:hover,
.admin-theme-dark .confirm-modal-card:not(.confirm-card-light) .confirm-modal-btn-confirm.info:hover {
  background: #e4e4e7;
  border-color: #e4e4e7;
}

/* Animations */
@keyframes confirmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes confirmSlideUp {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
/* ========================================================
   NAVBAR COMPONENT STYLES
   Minimalista, elegante y limpio
======================================================== */

.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1000;
  transition: all 0.3s ease;
}

.nav-container {
  height: 100%;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO */
.nav-logo a {
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: center;
}

/* MENU ÚNICO */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-menu a {
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
  transition: color 0.3s ease;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 1px;
  background: var(--color-primary, #c9a227);
  transition: 0.25s;
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
  width: 100%;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--color-primary, #c9a227);
}

/* ACCIONES */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* BOTONES AUTH */
.nav-desktop-auth {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-btn {
  position: relative;
  overflow: hidden;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* LOGIN */
.nav-btn-outline {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
}

.nav-btn-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

/* REGISTER */
.nav-btn-solid {
  color: #000;
  background: #fff;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
}

.nav-btn-solid:hover {
  transform: translateY(-2px);
  background: #f0f0f0;
}

.nav-btn-solid:active,
.nav-btn-outline:active {
  transform: scale(0.97);
}

/* USER */
.nav-user {
  position: relative;
}

.nav-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.nav-avatar-btn:hover {
  transform: scale(1.05);
}

.nav-avatar,
.nav-avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.nav-avatar {
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-avatar-fallback {
  background: #18181b;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* DROPDOWN USER (NEGRO PURO, MINIMALISTA Y ELEGANTE) */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 240px;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.06);
  z-index: 2500;
  animation: navDropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top right;
  box-sizing: border-box;
}

@keyframes navDropdownFade {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* CABECERA DEL DROPDOWN (SIN MARCO NI FONDO GRIS, PLANO) */
.nav-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 12px;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  margin-bottom: 2px;
}

.nav-dropdown-avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.nav-dropdown-avatar-sm img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.nav-dropdown-user-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  text-align: left;
}

.nav-dropdown-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-dropdown-email {
  font-size: 11.5px;
  color: #888888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* DIVIDER */
.nav-dropdown-divider {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255, 255, 255, 0.08);
}

/* MENU CONTAINER */
.nav-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ITEMS */
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #e4e4e7;
  text-decoration: none;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  min-height: 40px;
  box-sizing: border-box;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  transform: translateX(2px);
}

/* ICONOS: SIN FONDO, SIN BORDE, COMPLETAMENTE PLANOS */
.nav-dropdown-icon {
  width: 20px;
  height: 20px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  color: #999999;
  flex-shrink: 0;
  transition: all 0.18s ease;
  margin: 0;
  padding: 0;
}

.nav-dropdown-item:hover .nav-dropdown-icon {
  background: transparent !important;
  border: none !important;
  color: #ffffff;
}

.nav-dropdown-text {
  flex: 1;
  letter-spacing: -0.01em;
}

.nav-dropdown-arrow {
  color: #555555;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.nav-dropdown-item:hover .nav-dropdown-arrow {
  color: #ffffff;
  transform: translateX(3px);
}

/* LOGOUT BUTTON */
.nav-dropdown-item-logout {
  color: #f87171;
  margin-top: 2px;
}

.nav-dropdown-icon-danger {
  background: transparent !important;
  border: none !important;
  color: #ef4444;
}

.nav-dropdown-item-logout:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
  transform: translateX(2px);
}

.nav-dropdown-item-logout:hover .nav-dropdown-icon-danger {
  background: transparent !important;
  border: none !important;
  color: #fca5a5;
}

/* MOBILE AUTH */
.nav-mobile-auth,
.nav-mobile-user {
  display: none;
}

.nav-mobile-auth-icon {
  display: none;
}

/* HAMBURGER */
.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.hamburger span {
  width: 20px;
  height: 2px;
  background: #fff;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .nav-container {
    padding: 0 20px;
  }

  .hamburger {
    display: flex;
    z-index: 2000;
  }

  .nav-desktop-auth {
    display: none;
  }

  .nav-mobile-auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-mobile-overlay {
    display: block;
    position: fixed;
    inset: 70px 0 0 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 900;
  }

  .nav-menu {
    position: fixed;
    z-index: 901;
    top: 70px;
    right: -100%;
    width: 75%;
    max-width: 350px;
    height: calc(100vh - 70px);
    background: #000000;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 20px;
    transition: 0.3s ease;
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-mobile-auth,
  .nav-mobile-user {
    width: 100%;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .nav-mobile-user button {
    background: none;
    border: none;
    color: #fff;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
  }
}

/* ========================================================
   PROFILE CONTEXT & TEMA MODOS
======================================================== */
.profile-theme .nav-header,
.profile-theme-dark .nav-header {
  background: var(--bg-main, #000);
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.profile-theme .nav-menu a,
.profile-theme-dark .nav-menu a {
  color: var(--text-main, #fff);
}

.profile-theme .nav-menu a::after,
.profile-theme-dark .nav-menu a::after {
  background: var(--color-primary, #c9a227);
}

.profile-theme .nav-menu a:hover,
.profile-theme .nav-menu a.active,
.profile-theme-dark .nav-menu a:hover,
.profile-theme-dark .nav-menu a.active {
  color: var(--color-primary, #c9a227);
}

.profile-theme .hamburger span,
.profile-theme-dark .hamburger span {
  background: var(--text-main, #fff);
}

.profile-theme-dark .nav-dropdown,
.nav-dark-mode .nav-dropdown {
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.profile-theme-dark .nav-dropdown-header,
.nav-dark-mode .nav-dropdown-header {
  background: transparent !important;
  border: none !important;
}

.profile-theme-dark .nav-dropdown-icon,
.nav-dark-mode .nav-dropdown-icon {
  background: transparent !important;
  border: none !important;
  color: #999999;
}

.profile-theme-dark .nav-dropdown-item:hover .nav-dropdown-icon,
.nav-dark-mode .nav-dropdown-item:hover .nav-dropdown-icon {
  background: transparent !important;
  border: none !important;
  color: #ffffff;
}

.profile-theme-dark .nav-dropdown-icon-danger,
.nav-dark-mode .nav-dropdown-icon-danger {
  background: transparent !important;
  border: none !important;
  color: #ef4444;
}

.profile-theme-dark .nav-dropdown-item-logout:hover .nav-dropdown-icon-danger,
.nav-dark-mode .nav-dropdown-item-logout:hover .nav-dropdown-icon-danger {
  background: transparent !important;
  border: none !important;
  color: #fca5a5;
}

@media (max-width: 1024px) {
  .profile-theme .nav-menu,
  .profile-theme-dark .nav-menu {
    background: var(--bg-main, #000);
    border-left: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  }
  .profile-theme .nav-mobile-user button,
  .profile-theme-dark .nav-mobile-user button {
    color: var(--text-main, #fff);
  }
  .profile-theme .nav-mobile-auth,
  .profile-theme .nav-mobile-user,
  .profile-theme-dark .nav-mobile-auth,
  .profile-theme-dark .nav-mobile-user {
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  }
}
.footer {
  background: var(--bg-card, #000);
  color: var(--text-main, #fff);
  padding: 60px 20px 20px;
  border-top: 1px solid var(--border-color, #222);
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: auto;
}

.footer-column h2.logo {
  font-size: 28px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  color: var(--text-main, #fff);
}

.footer-column h3 {
  margin-bottom: 12px;
  font-size: 16px;
  color: var(--text-muted, #aaa);
  text-transform: uppercase;
}

.footer-column p {
  font-size: 14px;
  color: var(--text-muted, #ccc);
  line-height: 1.5;
}

.footer-column a {
  display: block;
  color: var(--text-muted, #ccc);
  text-decoration: none;
  margin: 6px 0;
  font-size: 14px;
  transition: 0.3s;
}

.footer-column a:hover {
  color: var(--color-primary, #fff);
  transform: translateX(4px);
}

/* Newsletter */
.newsletter {
  display: flex;
  margin-top: 10px;
}

.newsletter input {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border-color, #333);
  background: var(--bg-input, #111);
  color: var(--text-main, #fff);
  outline: none;
}

.newsletter button {
  padding: 10px 14px;
  border: none;
  background: var(--color-primary, #fff);
  color: var(--color-primary-text, #000);
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
  white-space: nowrap;
  flex-shrink: 0;
}

.newsletter button:hover {
  background: var(--color-primary-hover, #ccc);
}

/* Social */
.socials {
  margin-top: 10px;
}

.socials a {
  display: inline-block;
  margin-right: 10px;
  font-size: 13px;
  color: var(--text-muted, #aaa);
}

.socials a:hover {
  color: var(--color-primary, #fff);
}

/* Bottom */
.footer-bottom {
  border-top: 1px solid var(--border-color, #222);
  margin-top: 40px;
  padding-top: 15px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, #777);
}

.hero {
  position: relative;
  height: calc(100svh - 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview-mode .hero {
  height: 450px !important;
  min-height: 450px !important;
}

/* Blend the bottom of the hero with the next section */
.hero::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
  background: linear-gradient(to bottom, transparent, #000);
  pointer-events: none;
  z-index: 5;
}



.hero h1 {
  font-size: 64px;
  font-family: "Bodoni Moda", serif;
}

.hero p {
  margin-top: 15px;
  color: #000000;
}

.hero-split {
  position: absolute;
  inset: 0;
  display: flex;
}

.hero-col {
  flex: 1;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.hero-col img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  inset: 0;
}

/* CLIP SHAPES */
.hero-col:nth-child(2) {
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
}

.hero-col:nth-child(3),
.hero-col:nth-child(4) {
  clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
}

.hero-col:nth-child(5) {
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}

.hero-col {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.hero.has-hover::after {
  opacity: 0;
}


.hero-tag {
  display: none;
  /* 👈 oculto por defecto */
}


/* BOTONES */
.btn {
  padding: 12px 24px;
  margin: 10px;
}

.primary {
  background: #c9a227;
  color: #000;
}

.secondary {
  border: 1px solid #fff;
  color: #fff;
}



.hero h1 {
  font-size: 80px;
  font-weight: 800;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  line-height: 1;
  text-shadow:
    0 5px 20px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(0, 0, 0, 0.6);

  opacity: 0;
  animation: slideUpFade 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, glowPulse 4s ease-in-out infinite alternate 1s;
}

.hero p {
  margin: 15px 0 0 0;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 1px;
  opacity: 0;
  animation: slideUpFade 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.3s;
}

.hero-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  animation: slideUpFade 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.6s;
}

@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glowPulse {
  0% {
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.6);
  }

  100% {
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.8), 0 0 60px rgba(255, 255, 255, 0.4);
  }
}

.btn {
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.primary {
  background: linear-gradient(135deg, #c9a227, #e6c65c);
  color: #000;
  padding: 14px 30px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 1px;
  border: none;
  box-shadow: 0 8px 25px rgba(201, 162, 39, 0.4);
  transition: all 0.3s ease;
  z-index: 1;
}

.primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: all 0.5s ease;
  z-index: -1;
}

.primary:hover::before {
  left: 100%;
}

.primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(201, 162, 39, 0.6);
}

.secondary {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 14px 30px;
  color: #fff;
  border-radius: 3px;
  letter-spacing: 1px;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.secondary:hover {
  background: #fff;
  color: #000000;
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(255, 255, 255, 0.3);
}

.hero-col {
  flex: 1;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  opacity: 1;
  transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease, transform 1.5s ease, filter 0.5s ease;
  filter: brightness(1) grayscale(0%);
}

.hero-content {
  position: relative;
  z-index: 6;
  /* Ensures it sits above .hero::before (z-index 5) gradient shadow */
  text-align: center;
  max-width: 700px;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
  pointer-events: none;
}

.hero-content>* {
  pointer-events: auto;
}

@media (min-width: 1025px) {
  .hero-col img {
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* Efectos controlados por las clases del estado de React con timeout */
  .hero.has-hover .hero-split .hero-col {
    filter: brightness(0.4) grayscale(50%);
  }

  .hero.has-hover .hero-split .hero-col.is-hovered {
    filter: brightness(1.15) grayscale(0%);
    flex: 2;
    /* Resalta haciéndose más ancha */
    z-index: 1;
  }

  .hero.has-hover .hero-split .hero-col.is-hovered img {
    transform: scale(1.08);
    /* Se muestra de cerca / zoom */
  }
}


@media (max-width: 1024px) and (min-width: 769px) {
  .hero {
    height: calc(100svh - 70px);
    display: flex;
    flex-direction: column;
    padding: 30px;
    background-image: url("https://pub-17cc16459862449d8dcc55ee775a8a3f.r2.dev/system/funds/fondo_grafito.png");
    background-size: cover;
    background-position: center;
  }

  .hero::after {
    display: none;
  }

  .hero-split {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
  }

  .hero-col {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    border-left: none;
  }

  .hero-split::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 65%);
    z-index: 1;
    pointer-events: none;
  }

  .hero-content {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: none;
  }

  .hero-content>* {
    pointer-events: auto;
  }

  .hero h1 {
    font-family: "Bodoni Moda", serif;
    font-size: 110px !important;
    letter-spacing: 12px;
    text-shadow: 0 10px 40px rgba(0, 0, 0, 1);
    transform: translateY(0);
    margin: 0;
  }

  .hero p {
    font-size: 15px;
    letter-spacing: 3px;
    opacity: 0.9;
    transform: translateY(0);
    margin: 15px 0 0 0;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
  }

  .hero-buttons {
    position: relative;
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .hero-buttons .primary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 16px 40px;
    backdrop-filter: blur(8px);
    box-shadow: none;
    transition: all 0.3s ease;
  }

  .hero-buttons .primary::before {
    display: none;
  }

  .hero-buttons .primary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    transform: none;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
  }

  .hero-buttons .secondary {
    display: none;
  }

  .hero-tag {
    display: flex;
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 20px;
    z-index: 3;
    flex-direction: column;
    align-items: flex-end;
    font-family: "Bodoni Moda", serif;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }
}

@media (max-width: 768px) {
  .hero {
    height: calc(100svh - 70px);
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-image: url("https://pub-17cc16459862449d8dcc55ee775a8a3f.r2.dev/system/funds/fondo_grafito.png");
    background-size: cover;
    background-position: center;
  }

  .hero-split {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .hero-col {
    position: absolute;
    inset: 0;
    clip-path: none !important;
    opacity: 0;
    transform: scale(1.05);
    transition: all 1s ease;
  }

  .hero-col.active {
    opacity: 1;
    transform: scale(1);
  }

  .hero-split::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }

  .hero-content {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: none;
  }

  .hero-content>* {
    pointer-events: auto;
  }

  .hero h1 {
    font-family: "Bodoni Moda", serif;
    font-size: 70px !important;
    letter-spacing: 6px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    text-transform: uppercase;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    transform: translateY(0);
    margin: 0;
    padding-left: 6px;
    /* Compensate for letter-spacing to perfectly center */
  }

  .hero p {
    font-size: 10px;
    letter-spacing: 1px;
    opacity: 0.6;
    margin: 15px 0 0 0;
  }

  .hero-buttons {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    width: auto;
    display: flex;
    justify-content: center;
  }

  .hero-buttons .primary {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 15px 18px;
    backdrop-filter: blur(6px);
    transition: all 0.3s ease;
  }

  .hero-buttons .primary::before {
    display: none;
  }

  .hero-buttons .primary:hover {
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }

  .hero-buttons .secondary {
    display: none;
  }

  .hero-tag {
    display: flex;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 17px;
    z-index: 3;
    flex-direction: column;
    align-items: flex-end;
    font-family: "Bodoni Moda", serif;
    letter-spacing: 3px;
  }

  .hero-tag span:last-child {
    font-size: 20px;
  }

  .hero::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 60px !important;
    letter-spacing: 5px;
  }

  .hero p {
    font-size: 11px;
  }
}.home {
  background: #0d0d0d;
  color: #fff;
}

/* REUTILIZABLE */
.container {
  max-width: 1200px;
  margin: auto;
}

.section {
  padding: 80px 60px;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.card {
  padding: 40px;
  border: 1px solid #333;
  background: #1a1a1a;
}

.product {
  background: #000;
  padding: 20px;
  border: 1px solid #333;
}

.destacados {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

.destacados::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.destacados .container {
  position: relative;
  z-index: 2;
}
.card {
  padding: 50px 30px;
  border: 1px solid #333;
  background: #1a1a1a;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;

  transition: all 0.3s ease;
}

/* 🔥 HOVER */
.card:hover {
  border-color: #c9a227;
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.destacados {
  background-size: cover;
  background-position: center;
  position: relative;
}

/* overlay oscuro elegante */
.destacados::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0,0,0,0.7),
    rgba(0,0,0,0.9)
  );
}

/* contenido encima */
.destacados .container {
  position: relative;
  z-index: 2;
}

.product {
  background: #111;
  padding: 20px;
  border: 1px solid #333;
  text-align: left;

  transition: all 0.3s ease;
}

/* hover elegante */
.product:hover {
  border-color: #c9a227;
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.product .img {
  height: 220px;
  background: #222;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
}

/* efecto hover imagen */
.product:hover .img {
  transform: scale(1.05);
  transition: 0.4s;
}

.product p {
  font-size: 16px;
  margin-bottom: 8px;
}

.product span {
  color: #c9a227;
  font-weight: bold;
  font-size: 18px;
}

.section h2 {
  font-size: 34px;
  margin-bottom: 50px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* =========================================================
   VOXMAN "NOSOTROS" PAGE - PREMIUM REDESIGN
========================================================= */

.vox-nosotros-page {
  background-color: #000000;
  color: #ffffff;
  font-family: "Inter", "Outfit", sans-serif;
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.vox-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */
.vox-overline {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #888;
  margin-bottom: 12px;
  font-weight: 500;
}

.vox-section-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-family: 'Bodoni Moda', 'Playfair Display', serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  line-height: 1.1;
}

.vox-section-subtitle {
  font-size: 1.1rem;
  color: #aaa;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.vox-section-header {
  text-align: center;
  margin-bottom: 80px;
}

/* =========================================================
   ANIMATIONS
========================================================= */

.vox-reveal, .vox-reveal-left, .vox-reveal-right {
  opacity: 0;
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.vox-reveal { transform: translateY(40px); }
.vox-reveal-left { transform: translateX(-40px); }
.vox-reveal-right { transform: translateX(40px); }

.vox-reveal.active, .vox-reveal-left.active, .vox-reveal-right.active {
  opacity: 1;
  transform: translate(0);
}

.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }

/* =========================================================
   HERO SECTION
========================================================= */

.vox-nosotros-hero {
  position: relative;
  height: calc(100svh - 70px);
  margin-top: 70px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

.vox-hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(30,30,40,0.4) 0%, #000 70%);
  z-index: 1;
}

.vox-hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  width: 100%;
  max-width: 1000px;
  padding: 0 20px;
}

.vox-hero-logo-container {
  margin-bottom: 3rem;
  display: flex;
  justify-content: center;
}

.vox-hero-logo {
  height: auto;
  width: 100%;
  max-width: 180px;
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.15));
}

.vox-hero-title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-family: 'Bodoni Moda', serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.vox-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #a0a0a0;
  letter-spacing: 1px;
  font-weight: 300;
  max-width: 600px;
  margin: 0 auto;
}

/* Scroll Indicator */
.vox-scroll-indicator {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0.6;
}
.mouse {
  width: 26px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 20px;
  position: relative;
}
.mouse::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: #fff;
  border-radius: 4px;
  animation: scrollMouse 2s infinite cubic-bezier(0.15, 0.41, 0.69, 0.94);
}
@keyframes scrollMouse {
  0% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, 15px); opacity: 0; }
}

/* =========================================================
   STORY SECTION
========================================================= */
.vox-story-section {
  padding: 120px 0;
  background: #050505;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.vox-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.vox-story-paragraphs {
  color: #aaa;
  font-size: 1.1rem;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-weight: 300;
}
.vox-story-paragraphs strong {
  color: #fff;
  font-weight: 500;
}

.vox-story-image-wrapper {
  position: relative;
  height: 100%;
  min-height: 500px;
  border-radius: 4px;
  background: linear-gradient(145deg, #111, #0a0a0a);
  border: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vox-story-image-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.05) 0%, transparent 60%);
}

.vox-story-image-glass {
  text-align: center;
  padding: 50px;
  position: relative;
  z-index: 2;
}

.vox-heart-icon {
  margin: 0 auto 24px auto;
  display: block;
  color: #fff;
  opacity: 0.8;
}

.vox-story-image-glass h3 {
  font-size: 1.8rem;
  font-family: 'Bodoni Moda', serif;
  margin-bottom: 16px;
  font-weight: 400;
}
.vox-story-image-glass p {
  color: #888;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
}

/* =========================================================
   FOUNDERS SECTION
========================================================= */
.vox-founders-section {
  padding: 120px 0;
  background: #000;
}

.vox-founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.vox-founder-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.vox-founder-image-box {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 4px;
  background: #111;
}

.vox-founder-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(100%) contrast(1.1);
  transition: filter 0.8s ease, transform 1s ease;
}

.vox-founder-card:hover .vox-founder-img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.03);
}

.vox-founder-info h3 {
  font-size: 2rem;
  font-family: 'Bodoni Moda', serif;
  margin-bottom: 8px;
  font-weight: 500;
}

.vox-founder-role {
  display: block;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #888;
  margin-bottom: 20px;
}

.vox-founder-info p {
  color: #999;
  line-height: 1.7;
  font-weight: 300;
}

/* =========================================================
   MISSION & VISION SECTION
========================================================= */
.vox-mv-section {
  padding: 120px 0;
  background: #050505;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.vox-mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.vox-mv-card {
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.05);
  padding: 60px 50px;
  border-radius: 4px;
  transition: transform 0.4s ease, border-color 0.4s ease;
}

.vox-mv-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.15);
}

.vox-mv-icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  border: 1px solid rgba(255,255,255,0.1);
}

.vox-mv-card h3 {
  font-size: 1.8rem;
  font-family: 'Bodoni Moda', serif;
  margin-bottom: 20px;
  font-weight: 400;
}

.vox-mv-card p {
  color: #999;
  line-height: 1.7;
  font-weight: 300;
}

/* =========================================================
   VALUES SECTION
========================================================= */
.vox-values-section {
  padding: 120px 0 160px;
  background: #000;
}

.vox-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}

.vox-value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vox-val-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.05) 0%, transparent 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: transform 0.4s ease, background 0.4s ease;
}

.vox-value-item:hover .vox-val-icon-wrapper {
  transform: scale(1.1);
  background: rgba(255,255,255,0.1);
}

.vox-val-icon {
  color: #fff;
  opacity: 0.9;
}

.vox-value-item h4 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  font-family: 'Bodoni Moda', serif;
  font-weight: 400;
}

.vox-value-item p {
  color: #888;
  line-height: 1.6;
  font-size: 0.95rem;
  font-weight: 300;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 992px) {
  .vox-story-grid,
  .vox-founders-grid,
  .vox-mv-grid,
  .vox-values-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  
  .vox-story-image-wrapper {
    min-height: 400px;
  }
  
  .vox-mv-card {
    padding: 40px 30px;
  }
}

@media (max-width: 768px) {
  .vox-section-title {
    font-size: 2.2rem;
  }
  
  .vox-nosotros-hero {
    min-height: 80svh;
  }
  
  .vox-story-section, .vox-founders-section, .vox-mv-section, .vox-values-section {
    padding: 80px 0;
  }
}
/* =========================================================
   VOXMAN "ENTREGAS" PAGE - PREMIUM STYLING
========================================================= */

.vox-entregas-page {
  background-color: #000000;
  color: #ffffff;
  font-family: "Inter", "Outfit", sans-serif;
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   HERO SECTION
========================================================= */
.vox-entregas-hero {
  position: relative;
  width: 100%;
  height: calc(100svh - 70px);
  margin-top: 70px;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #050505; /* Fallback puro negro/oscuro */
  overflow: hidden;
}

.vox-hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
}

.vox-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(5,5,5,0.3) 0%, rgba(5,5,5,0.8) 100%);
  z-index: 2;
}

.vox-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #fff;
  padding: 0 20px;
}

.vox-icon-container {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  color: #fff;
  opacity: 0.9;
}

/* Reusing utility classes from Nosotros.css conceptually */
.vox-hero-title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-family: 'Bodoni Moda', serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  text-align: center;
}

.vox-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #a0a0a0;
  letter-spacing: 1px;
  font-weight: 300;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Scroll Indicator */
.vox-scroll-indicator {
  position: absolute;
  z-index: 10;
  opacity: 0.8;
  transition: all 0.3s ease;
  /* El color será inyectado por React via --scroll-color */
}

/* 1. MOUSE */
.vox-scroll-mouse {
  width: 26px;
  height: 42px;
  border: 2px solid var(--scroll-color, #fff);
  border-radius: 20px;
  position: relative;
}
.vox-scroll-mouse::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: var(--scroll-color, #fff);
  border-radius: 4px;
  animation: scrollMouse 2s infinite cubic-bezier(0.15, 0.41, 0.69, 0.94);
}
@keyframes scrollMouse {
  0% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, 15px); opacity: 0; }
}

/* 2. ARROW BOUNCE */
.vox-scroll-arrow {
  width: 24px;
  height: 24px;
  border-right: 3px solid var(--scroll-color, #fff);
  border-bottom: 3px solid var(--scroll-color, #fff);
  transform: rotate(45deg);
  animation: scrollArrow 2s infinite ease-in-out;
}
@keyframes scrollArrow {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50% { transform: translateY(10px) rotate(45deg); }
}

/* 3. PULSE DOT */
.vox-scroll-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--scroll-color, #fff);
  animation: scrollDot 1.5s infinite ease-in-out;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
}
@keyframes scrollDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--scroll-color, #fff); opacity: 0.7; }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255,255,255,0); opacity: 1; }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255,255,255,0); opacity: 0.7; }
}
/* If necessary, we can duplicate the reveal animations here or ensure they are global, 
   but since they are module specific, we define them here. */

.vox-reveal, .vox-reveal-left, .vox-reveal-right {
  opacity: 0;
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.vox-reveal { transform: translateY(40px); }
.vox-reveal-left { transform: translateX(-40px); }
.vox-reveal-right { transform: translateX(40px); }

.vox-reveal.active, .vox-reveal-left.active, .vox-reveal-right.active {
  opacity: 1;
  transform: translate(0);
}

.delay-1 { transition-delay: 0.15s; }

/* =========================================================
   DELIVERY METHODS
========================================================= */
.vox-delivery-methods {
  padding: 120px 0;
  background: #050505;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.vox-delivery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.vox-delivery-card {
  background: linear-gradient(145deg, #111, #0a0a0a);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 30px 25px;
  border-radius: 4px;
  transition: transform 0.4s ease, border-color 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.vox-delivery-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.15);
}

.vox-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
}

.vox-delivery-card h3 {
  font-size: 1.8rem;
  font-family: 'Bodoni Moda', serif;
  margin-bottom: 20px;
  font-weight: 400;
}

.vox-card-desc {
  color: #999;
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 30px;
}

.vox-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.vox-card-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ccc;
  font-size: 0.95rem;
  font-weight: 300;
}

.vox-card-list li svg {
  color: #888;
}

/* =========================================================
   HOW IT WORKS
========================================================= */
.vox-how-it-works {
  padding: 120px 0;
  background: #000;
}

.vox-how-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: 0 auto;
}

.vox-how-grid.layout-cards {
  max-width: 1200px;
}

.vox-steps {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.vox-process-cards {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.vox-step {
  display: flex;
  gap: 30px;
}

.vox-process-cards .vox-step {
  flex-direction: column;
  background: linear-gradient(145deg, #111, #0a0a0a);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 40px 30px;
  border-radius: 4px;
  gap: 20px;
  transition: transform 0.4s ease, border-color 0.4s ease;
}

.vox-process-cards .vox-step:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.15);
}

.vox-step-number {
  font-family: 'Bodoni Moda', serif;
  font-size: 2.5rem;
  color: rgba(255,255,255,0.2);
  line-height: 1;
}

.vox-process-cards .vox-step-number {
  font-size: 3.5rem;
  color: rgba(255,255,255,0.1);
}

.vox-step-info h4 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  font-family: 'Bodoni Moda', serif;
}

.vox-step-info p {
  color: #a0a0a0;
  line-height: 1.6;
}

.vox-step-link {
  display: inline-block;
  margin-top: 15px;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 2px;
  transition: all 0.3s ease;
}

.vox-step-link:hover {
  border-bottom-color: #fff;
  color: #ccc;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 768px) {
  .vox-delivery-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .vox-delivery-card {
    padding: 30px 20px;
  }
  
  .vox-step {
    flex-direction: column;
    gap: 15px;
  }

  .vox-process-cards {
    grid-template-columns: 1fr;
  }
}
.tracking-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #f3f4f6;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #111827;
  background-image: radial-gradient(circle at top right, rgba(99, 102, 241, 0.05), transparent 40%),
                    radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.05), transparent 40%);
}

.tracking-card {
  background: #ffffff;
  width: 100%;
  max-width: 1000px;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  position: relative;
  border: 1px solid #e5e7eb;
}

.tracking-header {
  padding: 30px;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

.tracking-header h1 {
  margin: 0 0 8px 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #111827;
}

.tracking-ref {
  margin: 0;
  color: #6b7280;
  font-size: 15px;
}

.tracking-ref strong {
  color: #4f46e5;
  background: rgba(79, 70, 229, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 14px;
}

/* ==========================================================================
   Status Color Themes & Step Widths
   ========================================================================== */
.theme-slate {
  --status-color: #64748b;
  --status-color-light: rgba(100, 116, 139, 0.1);
}
.theme-blue {
  --status-color: #3b82f6;
  --status-color-light: rgba(59, 130, 246, 0.1);
}
.theme-orange {
  --status-color: #f97316;
  --status-color-light: rgba(249, 115, 22, 0.1);
}
.theme-purple {
  --status-color: #8b5cf6;
  --status-color-light: rgba(139, 92, 246, 0.1);
}
.theme-emerald {
  --status-color: #10b981;
  --status-color-light: rgba(16, 185, 129, 0.1);
}
.theme-red {
  --status-color: #ef4444;
  --status-color-light: rgba(239, 68, 68, 0.1);
}
.theme-indigo {
  --status-color: #4f46e5;
  --status-color-light: rgba(79, 70, 229, 0.1);
}
.theme-sky {
  --status-color: #0ea5e9;
  --status-color-light: rgba(14, 165, 233, 0.1);
}
.theme-gray {
  --status-color: #6b7280;
  --status-color-light: rgba(107, 114, 128, 0.1);
}

.timeline-progress.progress-step-0,
.timeline-progress.progress-step-1 {
  width: 0%;
}
.timeline-progress.progress-step-2 {
  width: 25%;
}
.timeline-progress.progress-step-3 {
  width: 50%;
}
.timeline-progress.progress-step-4 {
  width: 75%;
}
.timeline-progress.progress-step-5 {
  width: 100%;
}

.tracking-status-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  margin: 24px 30px;
  border-radius: 16px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--status-color, #4f46e5);
  background: linear-gradient(135deg, var(--status-color-light, rgba(79, 70, 229, 0.08)) 0%, transparent 100%);
}

.status-icon {
  background: white;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  color: var(--status-color, #4f46e5);
}

.status-text {
  z-index: 2;
  position: relative;
}

.status-text h2 {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--status-color, #4f46e5);
}

.status-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #374151;
}

.tracking-timeline {
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  margin: 40px 0;
  position: relative;
}

.tracking-timeline::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 60px;
  right: 60px;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  z-index: 1;
}

.timeline-progress {
  position: absolute;
  top: 14px;
  left: 60px;
  height: 4px;
  width: var(--progress-width, 0%);
  background: var(--status-color, #4f46e5);
  border-radius: 2px;
  z-index: 1;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
  width: 60px;
}

.step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  border: 3px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-step.active .step-icon {
  border-color: #4f46e5;
  background: #4f46e5;
  color: white;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2);
  transform: scale(1.1);
}

.timeline-step.current .step-icon {
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

.timeline-step p {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.timeline-step.active p {
  color: #111827;
}

.tracking-section {
  padding: 0 30px 30px 30px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.detail-item {
  background: #f8fafc;
  padding: 14px 16px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  min-width: 0;
}

.detail-item:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.detail-item.span-2 {
  grid-column: 1 / -1;
}

.detail-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-icon {
  color: #475569;
  flex-shrink: 0;
}

.detail-value {
  font-size: 14.5px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.45;
}

.driver-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px rgba(0,0,0,0.02);
  margin-top: 16px;
}

.driver-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.driver-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 20px;
  font-weight: 600;
}

.driver-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.driver-details h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.driver-details p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.whatsapp-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: white;
  padding: 10px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: 0.2s;
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
}

.whatsapp-btn:hover {
  background: #128C7E;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(37, 211, 102, 0.4);
}

.products-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 12px 14px;
  border-radius: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: all 0.2s ease;
}

.product-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.product-item.is-bundle-item {
  border-left: 3px solid #6366f1;
}

.product-item.item-deleted {
  opacity: 0.6;
  filter: grayscale(100%);
  background: #f8fafc;
}

.product-thumb-box {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}

.product-image-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.product-image-link:hover {
  transform: scale(1.04);
}

.product-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: block;
}

.product-image-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  border: 1px solid #e2e8f0;
}

.product-item-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  gap: 5px;
}

.product-row-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.product-name {
  font-weight: 700;
  color: #0f172a;
  font-size: 13.5px;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.15s ease;
  flex: 1;
  min-width: 0;
}

.product-name:hover {
  color: #4f46e5;
}

.product-name.is-deleted {
  text-decoration: line-through;
  color: #94a3b8;
}

.product-subtotal-wrap {
  text-align: right;
  flex-shrink: 0;
}

.product-subtotal {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  display: block;
  line-height: 1.3;
}

.product-subtotal.is-deleted {
  text-decoration: line-through;
  color: #94a3b8;
}

.product-rejected-tag {
  font-size: 10.5px;
  color: #ef4444;
  font-weight: 600;
  display: block;
}

.product-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

.product-bundle-tag {
  background: #f1f5f9;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}

.product-attrs-inline {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 400;
}

.product-row-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.product-simple-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #4f46e5;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.product-simple-link:hover {
  color: #3730a3;
  text-decoration: underline;
}

.product-pricing-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.product-qty-tag {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}

.product-price-original {
  text-decoration: line-through;
  font-size: 11.5px;
  color: #94a3b8;
}

.product-discount-pill {
  font-size: 11px;
  color: #059669;
  font-weight: 600;
  background: #d1fae5;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.financial-summary {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #4b5563;
}

.summary-row.total {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.tracking-footer {
  text-align: center;
  padding: 24px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.tracking-container.loading, .tracking-container.error {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: #4b5563;
  font-family: 'Inter', system-ui, sans-serif;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(79, 70, 229, 0.2);
  border-left-color: #4f46e5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

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

.error-icon {
  color: #ef4444;
  margin-bottom: 20px;
}

.tracking-container.error h2 {
  color: #111827;
  margin: 0 0 12px 0;
  font-size: 24px;
}

/* ==========================================================================
   Grid & Section Layout
   ========================================================================== */
.tracking-main-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: start;
}

.tracking-section.no-margin {
  margin: 0;
}

/* ==========================================================================
   Interactive Map
   ========================================================================== */
.tracking-map-container {
  margin-top: 20px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  height: 250px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  position: relative;
}

.tracking-map-canvas {
  width: 100%;
  height: 100%;
}

.tracking-map-full-link {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
  border: 1px solid #cbd5e1;
  transition: all 0.2s ease;
  z-index: 10;
}

.tracking-map-full-link:hover {
  background: #ffffff;
  color: #4f46e5;
  border-color: #818cf8;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
  transform: translateY(-1px);
}

/* ==========================================================================
   Recipient Card & Form (Envío Externo)
   ========================================================================== */
.tracking-recipient-card {
  margin-top: 20px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.tracking-recipient-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tracking-recipient-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
}

.tracking-recipient-icon {
  color: #0ea5e9;
  flex-shrink: 0;
}

.tracking-recipient-edit-btn {
  background: #f0f9ff;
  color: #0ea5e9;
  border: 1px solid #bae6fd;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.tracking-recipient-edit-btn:hover {
  background: #e0f2fe;
}

.tracking-recipient-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tracking-form-group {
  display: flex;
  flex-direction: column;
}

.tracking-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}

.tracking-form-input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 14px;
  background: #ffffff;
  color: #1e293b;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tracking-form-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.tracking-phone-inputs {
  display: flex;
  gap: 8px;
}

.tracking-phone-code {
  width: 80px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 14px;
  background: #ffffff;
  color: #1e293b;
  text-align: center;
  box-sizing: border-box;
  font-family: inherit;
}

.tracking-phone-number {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 14px;
  background: #ffffff;
  color: #1e293b;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.2s;
}

.tracking-phone-number:focus,
.tracking-phone-code:focus {
  outline: none;
  border-color: #0ea5e9;
}

.tracking-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-end;
}

.tracking-btn-cancel {
  padding: 10px 16px;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  border: 1px solid #cbd5e1;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.tracking-btn-cancel:hover {
  background: #f1f5f9;
  color: #334155;
}

.tracking-btn-save {
  padding: 10px 16px;
  border-radius: 8px;
  background: #0ea5e9;
  color: #ffffff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, opacity 0.2s;
}

.tracking-btn-save:hover:not(:disabled) {
  background: #0284c7;
}

.tracking-btn-save:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.tracking-info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tracking-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.tracking-info-label {
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
}

.tracking-info-value {
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}

.tracking-info-value.unspecified {
  color: #94a3b8;
  font-weight: 400;
  font-style: italic;
}

/* ==========================================================================
   Transportadora Info & History (isExternal)
   ========================================================================== */
.tracking-agency-card {
  margin-top: 20px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.tracking-agency-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
}

.tracking-agency-icon {
  color: #0ea5e9;
  flex-shrink: 0;
}

.tracking-guide-badge {
  color: #0ea5e9;
  font-size: 15px;
  font-weight: 800;
  background: #e0f2fe;
  padding: 4px 10px;
  border-radius: 6px;
}

.tracking-guide-badge.is-pending {
  color: #64748b;
  background: #f1f5f9;
}

.tracking-agency-val {
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
}

.tracking-agency-alert {
  margin-top: 8px;
  padding: 10px;
  background: #fffbeb;
  color: #b45309;
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #fef3c7;
}

.tracking-agency-alert-icon {
  flex-shrink: 0;
}

.tracking-agency-alert p {
  margin: 0;
  line-height: 1.4;
}

.tracking-history-card {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.tracking-history-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  color: #1f2937;
  font-size: 15px;
  font-weight: 700;
}

.tracking-history-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.tracking-history-spine {
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #e5e7eb;
}

.tracking-history-step {
  display: flex;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.tracking-history-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #9ca3af;
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 1px #e5e7eb;
  flex-shrink: 0;
  margin-top: 2px;
}

.tracking-history-dot.latest {
  background: #4f46e5;
}

.tracking-history-desc {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #111827;
  font-weight: 500;
  line-height: 1.4;
}

.tracking-history-date {
  font-size: 12px;
  color: #6b7280;
}

/* ==========================================================================
   Delivery Notes (Notas de Entrega - Minimalista y Elegante)
   ========================================================================== */
.tracking-notes-box {
  margin-top: 20px;
  padding: 18px 20px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.tracking-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 6px;
}

.tracking-notes-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #0f172a;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.tracking-notes-icon {
  color: #475569;
  flex-shrink: 0;
}

.tracking-notes-hint {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.tracking-notes-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tracking-notes-textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tracking-notes-textarea::-moz-placeholder {
  color: #94a3b8;
}

.tracking-notes-textarea::placeholder {
  color: #94a3b8;
}

.tracking-notes-textarea:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05);
}

.tracking-notes-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.tracking-notes-saved-badge {
  font-size: 12px;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tracking-notes-btn-save {
  padding: 9px 18px;
  border-radius: 8px;
  border: none;
  background: #0f172a;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background 0.2s, transform 0.15s, opacity 0.2s;
}

.tracking-notes-btn-save:hover:not(:disabled) {
  background: #1e293b;
  transform: translateY(-1px);
}

.tracking-notes-btn-save:active:not(:disabled) {
  transform: translateY(0);
}

.tracking-notes-btn-save:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* ==========================================================================
   Financial Summary Rows
   ========================================================================== */
.summary-row.discount-row {
  color: #10b981;
  font-weight: 600;
}

.summary-row.advance-row {
  color: #4f46e5;
  font-weight: 600;
}

.summary-row.adjustment-row {
  color: #f59e0b;
  font-weight: 600;
}

.summary-row.total-row {
  border-top: 2px solid #e5e7eb;
  padding-top: 16px;
  margin-top: 8px;
  text-transform: uppercase;
}

.summary-total-label {
  font-size: 18px;
}

.summary-total-value {
  font-size: 22px;
  color: #111827;
}

.summary-total-value.highlighted {
  color: #4f46e5;
}

/* ==========================================================================
   Checkout Session & Payment QR
   ========================================================================== */
.checkout-session-card {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #e5e7eb;
}

.checkout-session-header {
  text-align: center;
  margin-bottom: 16px;
}

.checkout-session-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  background: #dcfce7;
  color: #166534;
}

.checkout-session-badge.advance {
  background: #e0e7ff;
  color: #4338ca;
}

.checkout-session-amount {
  margin-top: 12px;
  font-size: 24px;
  font-weight: 800;
  color: #166534;
}

.checkout-session-amount.advance {
  color: #4338ca;
}

.checkout-split-methods {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 15px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.checkout-split-method-item {
  color: #4b5563;
  font-weight: 600;
}

.checkout-qr-container {
  text-align: center;
  margin-bottom: 24px;
  background: #f8fafc;
  padding: 22px 20px;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
}

.checkout-qr-header {
  margin-bottom: 14px;
}

.checkout-qr-title {
  margin: 0 0 4px 0;
  font-weight: 700;
  color: #0f172a;
  font-size: 15.5px;
  letter-spacing: -0.2px;
}

.checkout-qr-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.4;
}

.checkout-qr-card {
  display: inline-flex;
  padding: 12px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.checkout-qr-image {
  width: 190px;
  height: 190px;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
  -o-object-fit: contain;
     object-fit: contain;
}

.checkout-qr-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}

.checkout-qr-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 9px;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.checkout-qr-action-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
}

.checkout-qr-action-btn:active {
  transform: translateY(0);
}

/* ==========================================================================
   Coupon & Discount Card (Minimalista y Elegante)
   ========================================================================== */
.checkout-discount-wrapper {
  background: #f8fafc;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  position: relative;
}

.checkout-discount-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(3px);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 20;
  color: #0f172a;
  font-weight: 600;
  font-size: 13px;
}

.checkout-discount-loading-overlay.removing {
  color: #b91c1c;
}

.checkout-discount-success-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.checkout-discount-success-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checkout-discount-success-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: #047857;
}

.checkout-discount-success-sub {
  font-size: 12px;
  color: #64748b;
}

.checkout-discount-btn-remove {
  padding: 6px 12px;
  border-radius: 7px;
  background: #ffffff;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.18s ease;
}

.checkout-discount-btn-remove:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #f87171;
}

.checkout-discount-btn-remove:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.checkout-discount-form-title {
  margin: 0 0 10px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.2px;
}

.checkout-discount-input-row {
  display: flex;
  gap: 8px;
}

.checkout-discount-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.checkout-discount-input::-moz-placeholder {
  text-transform: none;
  color: #94a3b8;
  font-weight: 400;
  letter-spacing: normal;
}

.checkout-discount-input::placeholder {
  text-transform: none;
  color: #94a3b8;
  font-weight: 400;
  letter-spacing: normal;
}

.checkout-discount-input:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05);
}

.checkout-discount-btn-apply {
  padding: 10px 18px;
  border-radius: 9px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 90px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, opacity 0.2s;
}

.checkout-discount-btn-apply:hover:not(:disabled) {
  background: #1e293b;
  transform: translateY(-1px);
}

.checkout-discount-btn-apply:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.checkout-discount-feedback {
  margin: 10px 0 0 0;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 7px;
}

.checkout-discount-feedback.error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fee2e2;
}

.checkout-discount-feedback.success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #dcfce7;
}

/* ==========================================================================
   Compact Floating Pill Alert (Conforme a la página)
   ========================================================================== */
.tracking-payment-floating-pill {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 10px;
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.38), 0 2px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  outline: none;
  animation: pillSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1), pillPulseGlow 2.5s infinite ease-in-out;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, filter 0.2s ease;
  white-space: nowrap;
}

.tracking-payment-floating-pill:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.52), 0 3px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(1.06);
}

.tracking-payment-floating-pill:active {
  transform: translateX(-50%) translateY(0);
}

.payment-pill-icon-wrap {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.payment-pill-arrow {
  color: #ffffff;
  animation: pillBounceArrow 1.5s infinite ease-in-out;
}

.payment-pill-text {
  color: #ffffff;
  line-height: 1;
}

@keyframes pillSlideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes pillPulseGlow {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.38), 0 0 0 0 rgba(99, 102, 241, 0.4);
  }
  50% {
    box-shadow: 0 6px 22px rgba(79, 70, 229, 0.55), 0 0 0 8px rgba(99, 102, 241, 0);
  }
}

@keyframes pillBounceArrow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

@media (max-width: 768px) {
  .tracking-wrapper {
    padding: 12px;
  }
  
  .tracking-header, .tracking-status-hero {
    padding: 16px;
    margin: 16px 12px;
  }
  
  .tracking-timeline {
    padding: 0 12px;
  }
  
  .tracking-timeline::before, .timeline-progress {
    left: 20px;
    right: 20px;
    top: 12px;
  }
  
  .timeline-step {
    flex: 1;
    width: auto;
  }
  
  .timeline-step p {
    font-size: 10px;
    letter-spacing: -0.3px;
    white-space: normal;
    line-height: 1.1;
  }
  
  .step-icon {
    width: 24px;
    height: 24px;
  }
  
  .step-icon svg {
    width: 12px !important;
    height: 12px !important;
  }
  
  .status-icon {
    width: 40px;
    height: 40px;
  }
  
  .status-text h2 {
    font-size: 20px;
  }
  
  .tracking-section {
    padding: 0 16px 20px 16px;
  }
  
  .driver-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .whatsapp-btn {
    width: 100%;
    justify-content: center;
  }

  .tracking-main-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .detail-item {
    padding: 12px 10px;
  }

  .detail-item.span-2 {
    grid-column: 1 / -1;
  }

  .checkout-qr-actions {
    flex-direction: column;
    width: 100%;
  }

  .checkout-qr-action-btn {
    width: 100%;
    min-height: 44px;
  }

  .tracking-notes-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tracking-notes-btn-save {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .checkout-discount-input-row {
    flex-direction: column;
  }

  .checkout-discount-btn-apply {
    width: 100%;
    min-height: 44px;
  }

  .product-item {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 12px;
  }

  .product-thumb-box {
    width: 58px;
    height: 58px;
  }

  .product-name {
    font-size: 13px;
  }

  .product-subtotal {
    font-size: 14px;
  }

  .product-attrs-inline {
    font-size: 11px;
  }

  .product-bundle-tag {
    font-size: 10.5px;
  }

  .product-simple-link {
    font-size: 11px;
  }

  .tracking-recipient-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .tracking-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .tracking-info-value {
    text-align: left;
  }

  .tracking-payment-floating-pill {
    bottom: 20px;
    padding: 7px 14px 7px 8px;
    font-size: 12.5px;
    gap: 7px;
  }

  .payment-pill-icon-wrap {
    width: 22px;
    height: 22px;
  }
}
/* ========================================================
   MODULO PROFILE - ESTILOS ELEGANTES Y MINIMALISTAS
   Utiliza variables definidas en theme.css (.profile-theme / .profile-theme-dark)
   ======================================================== */

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes profileSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* On small screens, hide the text label inside the geolocate button */
@media (max-width: 480px) {
  .map-geolocate-label { display: none; }
}

/* Ensure all elements within profile use border-box to prevent overflow */
.profile-page-wrapper,
.profile-page-wrapper *,
.profile-page-wrapper *::before,
.profile-page-wrapper *::after {
  box-sizing: border-box;
}

.profile-page-wrapper {
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Poppins", "Inter", sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden; /* Fix horizontal shift */
  width: 100%;
}

.profile-main-container {
  flex: 1;
  max-width: 1280px;
  width: 100%;
  min-width: 0; /* Prevent flex blowout */
  margin: 0 auto;
  padding: 90px 24px 60px 24px;
  box-sizing: border-box; /* Crucial for responsive padding */
  overflow-x: hidden;
}


/* =========================================
   RECUADRO DE VERIFICACIÓN DE CORREO (E-MAIL BANNER)
   ========================================= */
.profile-email-verify-card {
  position: relative;
  margin-bottom: 28px;
  padding: 18px 24px;
  border-radius: 16px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid #c9a227;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.profile-theme-dark .profile-email-verify-card {
  background: linear-gradient(135deg, #0d0d0d 0%, #050505 100%);
  border-color: rgba(201, 162, 39, 0.25);
  border-left: 4px solid #c9a227;
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.95), 0 0 25px -6px rgba(201, 162, 39, 0.12);
}

.profile-theme .profile-email-verify-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #c9a227;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

/* Área de contenido informativo */
.profile-email-verify-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 340px;
  min-width: 0;
}

.profile-email-verify-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(201, 162, 39, 0.12);
  border: 1px solid rgba(201, 162, 39, 0.28);
  color: #c9a227;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.15);
}

.profile-theme .profile-email-verify-icon {
  background: rgba(201, 162, 39, 0.1);
  border-color: rgba(201, 162, 39, 0.3);
  color: #b48c1e;
}

.profile-email-verify-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.profile-email-verify-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-email-verify-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.profile-theme .profile-email-verify-title {
  color: #111827;
}

.profile-email-verify-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(201, 162, 39, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(201, 162, 39, 0.3);
  letter-spacing: 0.02em;
}

.profile-theme .profile-email-verify-badge {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.profile-email-verify-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #a1a1aa;
}

.profile-theme .profile-email-verify-desc {
  color: #4b5563;
}

.profile-email-target {
  color: #ffffff;
  font-weight: 600;
}

.profile-theme .profile-email-target {
  color: #111827;
}

/* Formulario interactivo */
.profile-email-verify-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-email-verify-input-wrapper {
  position: relative;
}

.profile-email-verify-input {
  width: 175px;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.profile-email-verify-input:focus {
  border-color: #c9a227;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}

.profile-email-verify-input::-moz-placeholder {
  color: #71717a;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

.profile-email-verify-input::placeholder {
  color: #71717a;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

.profile-theme .profile-email-verify-input {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}

.profile-theme .profile-email-verify-input:focus {
  border-color: #c9a227;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

/* Botón Confirmar */
.profile-email-verify-btn-confirm {
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #f4d76b 0%, #c9a227 100%);
  color: #000000;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.32);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  box-sizing: border-box;
}

.profile-email-verify-btn-confirm:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.48);
  background: linear-gradient(135deg, #fae082 0%, #d4ad2d 100%);
}

.profile-email-verify-btn-confirm:active:not(:disabled) {
  transform: scale(0.98);
}

.profile-email-verify-btn-confirm:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Botón Reenviar */
.profile-email-verify-btn-resend {
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #d4d4d8;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.profile-email-verify-btn-resend:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.profile-email-verify-btn-resend:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.profile-theme .profile-email-verify-btn-resend {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #374151;
}

.profile-theme .profile-email-verify-btn-resend:hover:not(:disabled) {
  background: #e5e7eb;
  color: #111827;
}

.profile-email-spin {
  animation: profileSpin 0.9s linear infinite;
}

/* Adaptación responsiva (Mobile & Tablet) */
@media (max-width: 900px) {
  .profile-email-verify-card {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 20px;
    gap: 16px;
  }
  
  .profile-email-verify-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .profile-email-verify-input-wrapper {
    width: 100%;
  }

  .profile-email-verify-input {
    width: 100%;
  }

  .profile-email-verify-btn-confirm {
    width: 100%;
  }

  .profile-email-verify-btn-resend {
    width: 100%;
  }
}

/* =========================================
   HERO / BANNER DE BIENVENIDA
   ========================================= */
.profile-hero-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  padding: 16px 0 32px 0;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  box-shadow: none;
  position: relative;
}

.profile-user-identity {
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.profile-avatar-img,
.profile-avatar-fallback {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.profile-avatar-fallback {
  background: #e4e4e7;
  color: #18181b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.profile-online-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background-color: var(--color-success, #10b981);
  border: 2px solid var(--bg-card);
  border-radius: 50%;
}

.profile-user-meta h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: -0.5px;
}

.profile-user-meta p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
}

.profile-badges-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.profile-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.tag-vip {
  background: var(--text-main);
  color: var(--bg-main);
  border: 1px solid var(--border-color);
}

.tag-code {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border-color);
  font-family: "Courier New", monospace;
}

/* Quick Stats - Modern Cards */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 580px;
}

.profile-stat-box {
  background: var(--bg-card, #18181b);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.profile-stat-box:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.profile-stat-icon-wrapper {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-stat-icon-wrapper.purchases {
  background: rgba(255, 255, 255, 0.08);
  color: #f4f4f5;
  border-color: rgba(255, 255, 255, 0.15);
}

.profile-stat-icon-wrapper.addresses {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.25);
}

.profile-stat-icon-wrapper.status {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.25);
}

.profile-stat-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile-stat-value {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-stat-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status Pill */
.profile-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

.profile-status-pill.active {
  color: #10b981;
}

.profile-status-pill.inactive {
  color: var(--text-muted);
}

.profile-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  display: inline-block;
}

.profile-status-pill.inactive .profile-status-dot {
  background: #71717a;
  box-shadow: none;
}

/* =========================================
   CUSTOM MOBILE TAB SELECTOR (DROPDOWN)
   ========================================= */
.profile-mobile-tab-selector {
  display: none; /* Only visible on mobile */
  margin-bottom: 24px;
  position: relative;
  width: 100%;
}

.profile-selector-meta-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 0 4px;
}

.profile-selector-meta-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.profile-selector-trigger {
  width: 100%;
  min-height: 54px;
  padding: 10px 14px;
  background: var(--bg-card, #18181b);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.profile-selector-trigger:hover,
.profile-selector-trigger.open {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.profile-selector-trigger-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: left;
}

.profile-selector-trigger-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.profile-selector-trigger-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile-selector-trigger-label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.25;
}

.profile-selector-trigger-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-selector-trigger-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 8px;
}

.profile-selector-trigger-arrow {
  color: var(--text-muted);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.profile-selector-trigger-arrow.rotated {
  transform: rotate(180deg);
  color: var(--text-main, #ffffff);
}

/* DROPDOWN MENU */
.profile-selector-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-card, #18181b);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  z-index: 2000;
  animation: profileSelectorFade 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 70vh;
  overflow-y: auto;
  box-sizing: border-box;
}

@keyframes profileSelectorFade {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.profile-selector-group {
  margin-bottom: 8px;
}

.profile-selector-group:last-child {
  margin-bottom: 0;
}

.profile-selector-group-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 10px 4px 10px;
}

.profile-selector-group-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.profile-selector-item {
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.16s ease;
  text-align: left;
  box-sizing: border-box;
}

.profile-selector-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.profile-selector-item.selected {
  background: rgba(255, 255, 255, 0.1);
}

.profile-selector-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all 0.16s ease;
}

.profile-selector-item.selected .profile-selector-item-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.profile-selector-item-icon.logout {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.profile-selector-item-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.profile-selector-item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.25;
}

.profile-selector-item.selected .profile-selector-item-title {
  color: #ffffff;
}

.profile-selector-item-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-selector-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.profile-selector-check-icon {
  color: #ffffff;
}

.profile-selector-divider {
  height: 1px;
  background: var(--border-color, rgba(255, 255, 255, 0.08));
  margin: 6px 4px;
}

.profile-selector-logout {
  color: #ef4444;
  margin-top: 2px;
}

.profile-selector-logout:hover {
  background: rgba(239, 68, 68, 0.1);
}

.profile-selector-logout .profile-selector-item-title {
  color: #ef4444;
}

.profile-nav-badge-count {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================================
   LAYOUT PRINCIPAL: SIDEBAR + CONTENIDO
   ========================================= */
.profile-body-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: flex-start;
}

/* SIDEBAR DE NAVEGACION */
.profile-sidebar {
  background: transparent;
  padding: 0;
  position: sticky;
  top: 90px;
}

.profile-nav-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 12px 8px 12px;
  margin-top: 8px;
}

.profile-nav-group-title:first-child {
  margin-top: 0;
}

.profile-nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-align: left;
  margin-bottom: 2px;
}

.profile-nav-btn-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile-nav-btn-left svg {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.profile-nav-btn:hover {
  background: var(--bg-card);
}
.profile-nav-btn:hover .profile-nav-btn-left svg {
  color: var(--text-main);
}

.profile-nav-btn.active {
  background: var(--bg-card);
  font-weight: 600;
  color: var(--text-main);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.profile-nav-btn.active .profile-nav-btn-left svg {
  color: var(--text-main);
}

.profile-nav-badge-new {
  background: var(--text-main);
  color: var(--bg-main);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
}

.profile-sidebar-divider {
  height: 1px;
  background: var(--border-color);
  margin: 12px 0;
}

.profile-logout-btn {
  color: var(--color-danger) !important;
}

.profile-logout-btn:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}

/* =========================================
   CONTENIDO CENTRAL (CARDS)
   ========================================= */
.profile-content-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
  animation: profileFadeIn 0.3s ease-out;
}

@keyframes profileFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-card-title-group h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-card-title-group p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================
   FORMULARIOS Y CAMPOS
   ========================================= */
.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.profile-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-form-group.full-width {
  grid-column: 1 / -1;
}

.profile-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.profile-input,
.profile-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.profile-input:focus,
.profile-select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--bg-main);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); /* Adjust dynamically based on theme if needed */
}

.profile-input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  background: var(--bg-input);
}

.profile-input-help {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* BOTONES DE ACCION */
.profile-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.profile-btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.profile-btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.profile-btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}

.profile-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.profile-btn-outline {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.profile-btn-outline:hover {
  background: var(--bg-input);
  border-color: var(--text-main);
}

.profile-btn-outline:active {
  transform: scale(0.98);
}

.profile-btn-danger {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.profile-btn-danger:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--color-danger);
}

/* =========================================
   DIRECCIONES (CARDS Y CRUD)
   ========================================= */
.profile-addresses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.profile-address-card {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  transition: all 0.2s ease;
}

.profile-address-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.profile-address-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-main);
  font-weight: 600;
  font-size: 14px;
}

.profile-address-street {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  margin: 0 0 4px 0;
}

.profile-address-details {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.profile-address-ref {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}

.profile-address-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  margin-top: 4px;
}

.profile-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  color: var(--text-muted);
  background: var(--bg-main);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
}

.profile-empty-state svg {
  margin-bottom: 12px;
  color: var(--text-muted);
  opacity: 0.6;
}

.profile-empty-state h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 6px 0;
}

.profile-empty-state p {
  font-size: 13px;
  margin: 0 0 16px 0;
}

/* =========================================
   MEMBERSHIP BLACK CARD (PUNTOS Y FIDELIDAD)
   ========================================= */
.profile-membership-card {
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 50%, #050505 100%);
  color: #ffffff;
  border-radius: 20px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 24px;
}

.profile-membership-card::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.membership-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
}

.membership-brand {
  font-family: "Bodoni Moda", serif;
  font-size: 24px;
  letter-spacing: 4px;
  font-weight: 800;
  text-transform: uppercase;
}

.membership-tier-badge {
  background: linear-gradient(135deg, #d4d4d8, #e4e4e7);
  color: #000;
  font-weight: 800;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.membership-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.membership-holder-label {
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.membership-holder-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
}

.membership-points-large {
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}

/* =========================================
   LISTA DE BENEFICIOS / MOCKS
   ========================================= */
.profile-benefits-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.profile-benefit-item {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-benefit-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--color-secondary);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-benefit-info h4 {
  margin: 0 0 2px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.profile-benefit-info p {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}

/* =========================================
   ORDERS / PEDIDOS MOCK
   ========================================= */
.profile-orders-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 14px;
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}

.profile-orders-tabs::-webkit-scrollbar {
  display: none;
}

.profile-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input, #f4f4f5);
  border: 1px solid var(--border-color, #e4e4e7);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-tab-pill:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-main);
  border-color: rgba(0, 0, 0, 0.15);
}

.profile-dark-mode .profile-tab-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-main);
}

.profile-tab-pill.active {
  background: var(--text-main, #18181b);
  color: var(--bg-main, #ffffff);
  border-color: var(--text-main, #18181b);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.profile-dark-mode .profile-tab-pill.active {
  background: #ffffff;
  color: #09090b;
  border-color: #ffffff;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.12);
}

.profile-order-card {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.profile-order-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.order-meta-group h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--text-main);
}

.order-meta-group p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.order-status-badge {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-delivered {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.status-pending {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

/* =========================================
   RESPONSIVE DESIGN
   ========================================= */
@media (max-width: 1024px) {
  .profile-body-layout {
    grid-template-columns: 240px 1fr;
    gap: 20px;
  }
  
  .profile-main-container {
    padding: 80px 16px 40px 16px;
  }
}

@media (max-width: 768px) {
  .profile-main-container {
    padding: 80px 16px 40px 16px;
  }
  
  .profile-hero-card {
    padding: 16px 0 24px 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    margin-bottom: 24px;
  }
  
  .profile-user-identity {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .profile-user-meta h1 {
    justify-content: center;
    font-size: 24px;
  }

  .profile-badges-row {
    justify-content: center;
  }

  .profile-stats-grid {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 100%;
  }

  .profile-stat-box {
    padding: 10px 6px;
    flex-direction: column;
    text-align: center;
    gap: 6px;
    border-radius: 12px;
    min-width: 0;
  }

  .profile-stat-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .profile-stat-icon-wrapper svg {
    width: 15px;
    height: 15px;
  }

  .profile-stat-content {
    align-items: center;
    width: 100%;
  }

  .profile-stat-value {
    font-size: 13px;
    justify-content: center;
  }

  .profile-stat-label {
    font-size: 9px;
    letter-spacing: 0.3px;
    margin-top: 2px;
  }

  .profile-body-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 100vw;
  }

  /* Ocultar barra horizontal móvil antigua */
  .profile-sidebar {
    display: none !important;
  }

  /* Mostrar selector personalizado móvil */
  .profile-mobile-tab-selector {
    display: block;
  }

  .profile-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
  }

  .profile-content-card {
    padding: 20px;
    border-radius: 16px;
  }
  
  .profile-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .profile-card-header button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .profile-main-container {
    padding: 70px 12px 30px 12px;
  }
  
  .profile-hero-card {
    padding: 16px 0 24px 0;
  }
  
  .profile-content-card {
    padding: 16px;
  }
  
  .profile-form-actions {
    flex-direction: column;
  }
  
  .profile-btn-primary, .profile-btn-secondary {
    width: 100%;
    justify-content: center;
  }
  
  .profile-stat-value {
    font-size: 18px;
  }
  
  .profile-stat-label {
    font-size: 10px;
  }
}

/* =========================================
   LISTA DE DESEOS — TARJETAS VISUALES
   ========================================= */

.profile-wishlist-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.profile-wishlist-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* Image wrapper */
.profile-wishlist-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bg-input);
  overflow: hidden;
}
.profile-wishlist-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
.profile-wishlist-card:hover .profile-wishlist-img {
  transform: scale(1.04);
}
.profile-wishlist-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

/* Overlay badges */
.profile-wishlist-discount-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-danger, #ef4444);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.profile-wishlist-bundle-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Info section */
.profile-wishlist-info {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.profile-wishlist-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.profile-wishlist-name:hover {
  color: var(--color-primary, #6366f1);
}

/* Variant tags (color + size) */
.profile-wishlist-variant {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.profile-wishlist-tag {
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

/* Price row */
.profile-wishlist-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.profile-wishlist-price-sale {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}
.profile-wishlist-price-original {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Footer: date + remove */
.profile-wishlist-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}
.profile-wishlist-remove-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #ef4444;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.profile-wishlist-remove-btn:hover {
  background: rgba(239,68,68,0.08);
}

.profile-wishlist-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 8px 12px;
  min-height: 38px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--text-main, #18181b);
  color: var(--bg-main, #ffffff) !important;
  border: 1px solid var(--text-main, #18181b);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-top: 2px;
  margin-bottom: 2px;
}

.profile-wishlist-add-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.profile-wishlist-add-btn:active:not(:disabled) {
  transform: translateY(0);
}

.profile-wishlist-add-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.profile-dark-mode .profile-wishlist-add-btn {
  background: #ffffff;
  color: #09090b !important;
  border-color: #ffffff;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.08);
}

.profile-dark-mode .profile-wishlist-add-btn:hover:not(:disabled) {
  background: #f4f4f5;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.16);
}

/* =========================================
   REGISTERED CARTS (TAB "CARRITOS" EN MIS PEDIDOS)
   ========================================= */
.profile-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  min-width: 18px;
  height: 18px;
  line-height: 1;
}

.profile-tab-pill.active .profile-pill-badge {
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.profile-dark-mode .profile-tab-pill.active .profile-pill-badge {
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
}

.profile-cart-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.profile-cart-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.profile-dark-mode .profile-cart-card {
  background: var(--bg-card, #18181b);
  border-color: var(--border-color, rgba(255, 255, 255, 0.1));
  box-shadow: none;
}

.profile-dark-mode .profile-cart-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.profile-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.profile-cart-header-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-cart-ref-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main, #09090b);
}

.profile-cart-meta-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.profile-cart-source-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-input, #f1f5f9);
  color: var(--text-muted, #64748b);
  border: 1px solid var(--border-color, #e2e8f0);
}

.profile-cart-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Status Badges with crisp contrast in light & dark */
.profile-cart-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-cart-status-badge.active {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.profile-dark-mode .profile-cart-status-badge.active {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}

.profile-cart-status-badge.proforma {
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.profile-dark-mode .profile-cart-status-badge.proforma {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border-color: rgba(99, 102, 241, 0.3);
}

.profile-cart-status-badge.converted {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.profile-dark-mode .profile-cart-status-badge.converted {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.3);
}

.profile-cart-status-badge.expired {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.profile-dark-mode .profile-cart-status-badge.expired {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.25);
}

.profile-cart-status-badge.default {
  background: #f4f4f5;
  color: #52525b;
  border: 1px solid #e4e4e7;
}

.profile-dark-mode .profile-cart-status-badge.default {
  background: rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
  border-color: rgba(255, 255, 255, 0.12);
}

.profile-cart-total-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.profile-cart-total-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main, #09090b);
}

.profile-cart-discount-val {
  font-size: 11px;
  font-weight: 600;
  color: #ef4444;
}

.profile-cart-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color, #e2e8f0);
}

.profile-cart-thumbnails {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-cart-thumb {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  border: 1px solid var(--border-color, #e2e8f0);
  overflow: hidden;
  background: var(--bg-input, #f8fafc);
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-cart-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.profile-cart-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #94a3b8);
  background: var(--bg-input, #f1f5f9);
}

.profile-cart-thumb-qty {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.78);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1.1;
}

.profile-cart-thumb-more {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  border: 1px dashed var(--border-color, #cbd5e1);
  background: var(--bg-input, #f8fafc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  flex-shrink: 0;
}

.profile-cart-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.profile-cart-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input, #f1f5f9);
  border: 1px solid var(--border-color, #e2e8f0);
  color: var(--text-main, #09090b);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-cart-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.16);
}

.profile-dark-mode .profile-cart-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.profile-cart-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-cart-delete-btn:hover {
  background: #fee2e2;
  border-color: #f87171;
  transform: translateY(-1px);
}

.profile-dark-mode .profile-cart-delete-btn {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.profile-dark-mode .profile-cart-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}

/* Expanded body */
.profile-cart-expanded-body {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-color, #e2e8f0);
  animation: profileCartSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes profileCartSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-cart-item-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-input, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  transition: border-color 0.15s ease;
}

.profile-cart-item-row:hover {
  border-color: rgba(0, 0, 0, 0.16);
}

.profile-dark-mode .profile-cart-item-row {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.profile-dark-mode .profile-cart-item-row:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.profile-cart-item-img-wrap {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-dark-mode .profile-cart-item-img-wrap {
  background: var(--bg-card, #1c1c1f);
  border-color: rgba(255, 255, 255, 0.08);
}

.profile-cart-item-img-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.profile-cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-cart-item-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.profile-cart-item-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main, #09090b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-cart-item-subtotal {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main, #09090b);
  white-space: nowrap;
}

.profile-cart-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.profile-cart-pill {
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-card, #ffffff);
  color: var(--text-muted, #64748b);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color, #e2e8f0);
}

.profile-dark-mode .profile-cart-pill {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted, #a1a1aa);
  border-color: rgba(255, 255, 255, 0.08);
}

.profile-cart-pill-sku {
  font-size: 10.5px;
  font-family: monospace;
  color: var(--text-muted, #64748b);
  opacity: 0.85;
}

.profile-cart-item-pricing {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.profile-cart-item-discount-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: #047857;
  background: #ecfdf5;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid #a7f3d0;
}

.profile-dark-mode .profile-cart-item-discount-tag {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
}

.profile-cart-delivery-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-muted, #71717a);
  padding: 10px 0 0 0;
  margin-top: 12px;
  border-top: 1px dashed var(--border-color, #e4e4e7);
  background: transparent;
  border-radius: 0;
}

.profile-cart-delivery-note svg {
  color: var(--text-muted, #71717a);
  flex-shrink: 0;
}

.profile-cart-delivery-note strong {
  font-weight: 600;
  color: var(--text-main, #18181b);
}

.profile-dark-mode .profile-cart-delivery-note {
  color: var(--text-muted, #a1a1aa);
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
}

.profile-dark-mode .profile-cart-delivery-note strong {
  color: #f4f4f5;
}

.profile-cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color, #e2e8f0);
}

.profile-cart-checkout-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #18181b;
  color: #ffffff;
  border: 1px solid #18181b;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 9px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-cart-checkout-btn:hover {
  background: #27272a;
  transform: translateY(-1px);
}

.profile-dark-mode .profile-cart-checkout-btn {
  background: #ffffff;
  color: #09090b;
  border-color: #ffffff;
}

.profile-dark-mode .profile-cart-checkout-btn:hover {
  background: #f4f4f5;
}

.profile-cart-footer-totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
  min-width: 180px;
}

.profile-cart-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
  color: var(--text-muted, #64748b);
}

.profile-cart-summary-line.discount {
  color: #ef4444;
}

.profile-cart-summary-line.total {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main, #09090b);
  border-top: 1px solid var(--border-color, #e2e8f0);
  padding-top: 4px;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .profile-cart-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-cart-header-right {
    width: 100%;
    justify-content: space-between;
  }

  .profile-cart-preview-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .profile-cart-actions {
    width: 100%;
    justify-content: space-between;
  }

  .profile-cart-toggle-btn {
    flex: 1;
    justify-content: center;
  }

  .profile-cart-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-cart-footer-totals {
    width: 100%;
    margin-left: 0;
  }
}

/* ========================================================
   MINIMALIST CART EXPIRATION & COUNTDOWN (COMPACT INLINE PILL)
   ======================================================== */

.profile-cart-countdown-bar {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  gap: 6px;
  padding: 4px 10px;
  margin: 10px 0 0;
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  border: 1px solid var(--border-color, #e4e4e7);
  background: var(--bg-input, #f4f4f5);
  color: var(--text-muted, #71717a);
  transition: all 0.2s ease;
}

.profile-dark-mode .profile-cart-countdown-bar {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
  color: #a1a1aa;
}

.profile-cart-countdown-bar.active {
  background: var(--bg-input, #f4f4f5);
  border-color: var(--border-color, #e4e4e7);
  color: var(--text-muted, #52525b);
}

.profile-dark-mode .profile-cart-countdown-bar.active {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
  color: #a1a1aa;
}

.profile-cart-countdown-bar.urgent {
  background: var(--bg-input, #f4f4f5);
  border-color: var(--border-color, #e4e4e7);
  color: var(--text-main, #18181b);
}

.profile-dark-mode .profile-cart-countdown-bar.urgent {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e4e4e7;
}

.profile-cart-countdown-bar.expired {
  background: var(--bg-input, #f4f4f5);
  border-color: var(--border-color, #e4e4e7);
  color: var(--text-muted, #52525b);
}

.profile-dark-mode .profile-cart-countdown-bar.expired {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
  color: #a1a1aa;
}

.countdown-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.countdown-status-dot.active {
  background: #10b981;
}

.countdown-status-dot.urgent {
  background: #f59e0b;
}

.countdown-status-dot.expired {
  background: #ef4444;
}

.countdown-bar-label {
  font-weight: 600;
  color: var(--text-main, #18181b);
}

.profile-dark-mode .countdown-bar-label {
  color: #e4e4e7;
}

.countdown-bar-sep {
  color: var(--text-muted, #a1a1aa);
  font-weight: 600;
}

.countdown-timer-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  color: var(--text-main, #09090b);
}

.profile-dark-mode .countdown-timer-val {
  color: #ffffff;
}

.countdown-bar-hint {
  font-size: 11px;
  color: var(--text-muted, #71717a);
}

.profile-dark-mode .countdown-bar-hint {
  color: #a1a1aa;
}

/* WhatsApp Action Button */
.profile-cart-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25D366;
  color: #ffffff !important;
  border: 1px solid #1ebe5d;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 9px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.profile-cart-wa-btn:hover:not(:disabled):not(.disabled) {
  background: #20ba5a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.28);
}

.profile-cart-wa-btn:active:not(:disabled):not(.disabled) {
  transform: translateY(0);
}

.profile-cart-wa-btn:disabled,
.profile-cart-wa-btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-input, #f4f4f5) !important;
  border-color: var(--border-color, #e4e4e7) !important;
  color: var(--text-muted, #71717a) !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none;
}

.profile-dark-mode .profile-cart-wa-btn:disabled,
.profile-dark-mode .profile-cart-wa-btn.disabled {
  background: #18181b !important;
  border-color: #27272a !important;
  color: #52525b !important;
}

/* Reminder / Reactivate Action Button */
.profile-cart-remind-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card, #ffffff);
  color: var(--text-main, #18181b);
  border: 1px solid var(--border-color, #e4e4e7);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.profile-cart-remind-btn:hover:not(:disabled) {
  background: var(--bg-hover, #f4f4f5);
  border-color: var(--color-primary, #18181b);
  transform: translateY(-1px);
}

.profile-cart-remind-btn.expired-mode {
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef4444;
}

.profile-cart-remind-btn.expired-mode:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.08);
  border-color: #ef4444;
  color: #dc2626;
}

.profile-cart-remind-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-input, #f4f4f5);
  border-color: var(--border-color, #e4e4e7);
  color: var(--text-muted, #71717a);
}

.profile-dark-mode .profile-cart-remind-btn {
  background: #27272a;
  color: #f4f4f5;
  border-color: #3f3f46;
}

.profile-dark-mode .profile-cart-remind-btn:hover:not(:disabled) {
  background: #3f3f46;
  border-color: #71717a;
}

.profile-dark-mode .profile-cart-remind-btn.expired-mode {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.profile-dark-mode .profile-cart-remind-btn:disabled {
  background: #18181b;
  border-color: #27272a;
  color: #52525b;
}

.profile-cart-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .profile-cart-countdown-bar {
    margin: 8px 0 0;
    padding: 4px 9px;
    font-size: 11px;
    gap: 5px;
  }

  .profile-cart-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .profile-cart-wa-btn,
  .profile-cart-remind-btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    padding: 9px 8px;
    min-height: 42px;
    font-size: 12px;
  }

  .profile-cart-footer-left {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .profile-cart-footer-left .profile-cart-checkout-btn,
  .profile-cart-footer-left .profile-cart-wa-btn,
  .profile-cart-footer-left .profile-cart-remind-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}

/* ========================================================
   REAL-TIME STOCK & DISCOUNT VALIDATION STYLES
   ======================================================== */

.profile-cart-alert-bar {
  display: inline-flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  gap: 7px;
  padding: 5px 11px;
  margin: 8px 0 0;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  transition: all 0.2s ease;
}

.profile-cart-alert-bar svg {
  flex-shrink: 0;
}

.profile-cart-alert-bar.stock-warning {
  background: var(--bg-input, #f4f4f5);
  border: 1px solid #fde68a;
  color: #a16207;
}

.profile-dark-mode .profile-cart-alert-bar.stock-warning {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
}

.profile-cart-alert-bar.discount-expired {
  background: var(--bg-input, #f4f4f5);
  border: 1px solid var(--border-color, #e4e4e7);
  color: var(--text-muted, #52525b);
}

.profile-dark-mode .profile-cart-alert-bar.discount-expired {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
}

.profile-cart-thumb.has-stock-issue {
  border-color: #ef4444 !important;
}

.profile-cart-thumb-issue-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ef4444;
  border: 1.5px solid var(--bg-card, #ffffff);
}

.profile-dark-mode .profile-cart-thumb-issue-dot {
  border-color: #18181b;
}

/* Stock Badges */
.profile-cart-stock-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1.5px 7px;
  border-radius: 4px;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.profile-cart-stock-badge.out-of-stock {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.profile-dark-mode .profile-cart-stock-badge.out-of-stock {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}

.profile-cart-stock-badge.insufficient {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.profile-dark-mode .profile-cart-stock-badge.insufficient {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.25);
}

.profile-cart-stock-badge.in-stock {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.profile-dark-mode .profile-cart-stock-badge.in-stock {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.25);
}

/* Subtotal with discount struck-through */
.profile-cart-item-subtotal-box {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.profile-cart-item-orig-subtotal {
  font-size: 11.5px;
  text-decoration: line-through;
  color: var(--text-muted, #71717a);
  font-weight: 500;
}

.profile-dark-mode .profile-cart-item-orig-subtotal {
  color: #71717a;
}

/* Pricing Row Details */
.profile-cart-price-block {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.profile-cart-item-old-price {
  font-size: 11px;
  text-decoration: line-through;
  color: var(--text-muted, #71717a);
  font-weight: 500;
  margin-right: 2px;
}

.profile-dark-mode .profile-cart-item-old-price {
  color: #71717a;
}

.profile-cart-item-current-price {
  color: var(--text-main, #18181b);
  font-weight: 700;
}

.profile-dark-mode .profile-cart-item-current-price {
  color: #f4f4f5;
}

.profile-cart-item-discount-expired-tag {
  font-size: 10px;
  font-weight: 600;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 1px 6px;
  border-radius: 4px;
}

.profile-dark-mode .profile-cart-item-discount-expired-tag {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
}

.profile-cart-summary-line.discount-expired-notice {
  color: #ef4444;
  font-size: 11.5px;
  font-style: italic;
}

@media (max-width: 640px) {
  .profile-cart-alert-bar {
    margin: 8px 12px 0;
    padding: 6px 12px;
    font-size: 11.5px;
  }
}

/* ========================================================
   ORDERS STYLING (MATCHING CARTS ARCHITECTURE & LOGIC)
   ======================================================== */

.profile-order-header-paid-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: #10b981;
  margin-top: 2px;
  letter-spacing: 0.3px;
}

.profile-order-header-pending-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: #f59e0b;
  margin-top: 2px;
  letter-spacing: 0.3px;
}

.profile-order-track-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card, #ffffff);
  color: var(--text-main, #18181b);
  border: 1px solid var(--border-color, #e4e4e7);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.profile-order-track-btn:hover {
  background: var(--bg-hover, #f4f4f5);
  border-color: var(--color-primary, #18181b);
  transform: translateY(-1px);
}

.profile-dark-mode .profile-order-track-btn {
  background: #27272a;
  color: #f4f4f5;
  border-color: #3f3f46;
}

.profile-dark-mode .profile-order-track-btn:hover {
  background: #3f3f46;
  border-color: #71717a;
}

.profile-order-payment-status-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.profile-order-paid-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 3px 8px;
  border-radius: 5px;
}

.profile-dark-mode .profile-order-paid-badge {
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.28);
}

.profile-order-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #d97706;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 3px 8px;
  border-radius: 5px;
}

.profile-dark-mode .profile-order-pending-badge {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
}

@media (max-width: 640px) {
  .profile-order-track-btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    padding: 9px 8px;
    min-height: 42px;
    font-size: 12px;
  }
}

/* =========================================
   COMING SOON BANNER (CLUB VIP / PUNTOS)
   ========================================= */
.profile-coming-soon-banner {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.08) 0%, rgba(0, 0, 0, 0.02) 100%);
  border: 1px dashed rgba(201, 162, 39, 0.35);
  border-radius: 18px;
  padding: 36px 24px;
  margin-bottom: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

.profile-dark-mode .profile-coming-soon-banner {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.12) 0%, rgba(10, 10, 10, 0.6) 100%);
  border-color: rgba(201, 162, 39, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.profile-coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #c9a227;
  background: rgba(201, 162, 39, 0.12);
  border: 1px solid rgba(201, 162, 39, 0.28);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.profile-coming-soon-title {
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--text-main, #18181b);
  text-transform: uppercase;
  line-height: 1.1;
}

.profile-dark-mode .profile-coming-soon-title {
  color: #ffffff;
  text-shadow: 0 0 24px rgba(201, 162, 39, 0.25);
}

.profile-coming-soon-desc {
  font-size: 14px;
  color: var(--text-muted, #71717a);
  max-width: 520px;
  line-height: 1.6;
  margin: 12px auto 16px auto;
}

.profile-coming-soon-desc strong {
  color: var(--text-main, #18181b);
}

.profile-dark-mode .profile-coming-soon-desc strong {
  color: #ffffff;
}

.profile-coming-soon-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #71717a);
  background: var(--bg-input, #f4f4f5);
  border: 1px solid var(--border-color, #e4e4e7);
  padding: 6px 14px;
  border-radius: 999px;
}

.profile-dark-mode .profile-coming-soon-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
}

@media (max-width: 640px) {
  .profile-coming-soon-banner {
    padding: 28px 16px;
    margin-bottom: 20px;
  }

  .profile-coming-soon-title {
    font-size: 26px;
    letter-spacing: 2.5px;
  }

  .profile-coming-soon-desc {
    font-size: 13px;
  }
}




.contacto-page {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 60px;
  background: var(--bg-main, #0d0d0d);
  color: var(--text-main, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contacto-header {
  text-align: center;
  max-width: 680px;
  margin-bottom: 40px;
  padding: 0 20px;
}

.contacto-header h1 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--color-primary, #fff);
  background: linear-gradient(90deg, #fff, #bbb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contacto-header p {
  color: var(--text-muted, #a0a0a0);
  font-size: 1rem;
  line-height: 1.6;
}

.contacto-options {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
  width: 100%;
  max-width: 860px;
  padding: 0 20px;
}

.contacto-card {
  flex: 1;
  min-width: 280px;
  background: var(--bg-card, rgba(18,18,18,0.85));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.contacto-card-link {
  text-decoration: none;
  color: inherit;
}

.contacto-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.contacto-card.active {
  border-color: var(--color-primary, #fff);
  background: rgba(255, 255, 255, 0.04);
}

.contacto-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 6px;
}

.contacto-icon.whatsapp {
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
}

.contacto-icon.email {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.contacto-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.contacto-card p {
  color: var(--text-muted, #a0a0a0);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 10px 0;
}

.contacto-btn {
  padding: 10px 22px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  background: transparent;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
  margin-top: auto;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.contacto-email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
  margin-top: auto;
}

.contacto-btn-link:hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

.contacto-btn-secondary {
  border-color: rgba(255, 255, 255, 0.18);
  color: #ccc;
}

.contacto-card-link:hover .contacto-btn,
.contacto-card.active .contacto-btn {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* FORM SECTION */
.contacto-form-container {
  width: 100%;
  max-width: 680px;
  background: var(--bg-card, rgba(18,18,18,0.95));
  border: 1px solid var(--border-color, rgba(255,255,255,0.09));
  border-radius: 14px;
  padding: 34px 32px;
  animation: slideUp 0.35s ease forwards;
  margin-bottom: 50px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.35);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.contacto-form-header {
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contacto-form-header h2 {
  font-size: 1.45rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.contacto-form-header p {
  color: var(--text-muted, #aaa);
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.5;
}

.contacto-form-group {
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.contacto-form-group label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted, #ccc);
}

.contacto-form-group input,
.contacto-form-group textarea,
.contacto-form-group select {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-input, rgba(10,10,10,0.85));
  border: 1px solid var(--border-color, rgba(255,255,255,0.12));
  border-radius: 8px;
  color: var(--text-main, #fff);
  font-family: inherit;
  font-size: 0.92rem;
  transition: all 0.2s ease;
}

.contacto-form-group input:focus,
.contacto-form-group textarea:focus,
.contacto-form-group select:focus {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.contacto-form-group textarea {
  resize: vertical;
  min-height: 160px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* Selector de Asunto */
.contacto-select {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px !important;
}

.contacto-select option {
  background: #1a1a1c;
  color: #fff;
  padding: 10px;
}

.contacto-select optgroup {
  background: #121214;
  color: #e5e5e5;
  font-weight: 700;
  font-size: 0.9rem;
}

.select-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted, #888);
  margin-top: 2px;
}

/* Email Container & Status */
.email-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.email-input-container input.input-verified {
  border-color: rgba(34, 197, 94, 0.4);
}

.email-input-container input.input-error {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.04);
}

.account-status-pill {
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
}

.account-status-pill.verified {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.account-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  margin-top: 4px;
}

.account-notice.success {
  color: #4ade80;
}

.account-notice.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
  color: #f87171;
  margin-top: 6px;
}

/* Submit Button */
.contacto-submit {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  background: var(--color-primary, #fff);
  color: #000;
  border: none;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  margin-top: 10px;
}

.contacto-submit:hover:not(:disabled) {
  background: #e0e0e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.15);
}

.contacto-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .contacto-page {
    padding-top: 75px;
    padding-bottom: 40px;
  }

  .contacto-header h1 {
    font-size: 1.85rem;
  }

  .contacto-header {
    margin-bottom: 25px;
    padding: 0 16px;
  }

  .contacto-options {
    flex-direction: column;
    padding: 0 16px;
    gap: 16px;
  }

  .contacto-form-container {
    padding: 22px 16px;
    margin: 0 16px 40px 16px;
    width: auto;
  }
}
.shop-error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  padding: 2rem;
  background-color: transparent;
}

.shop-error-content {
  text-align: center;
  max-width: 500px;
  padding: 3rem 1rem;
  animation: errorFadeIn 0.5s ease-out;
}

.shop-error-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  color: var(--accent-gold, var(--text-main));
}

.shop-error-title {
  font-family: var(--font-primary, inherit);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-primary, var(--text-main));
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.shop-error-message {
  font-family: var(--font-secondary, inherit);
  font-size: 0.95rem;
  color: var(--text-secondary, var(--text-muted));
  line-height: 1.6;
  margin-bottom: 2rem;
}

.shop-error-retry-btn {
  background-color: transparent;
  color: var(--accent-gold, var(--text-main));
  border: 1px solid var(--accent-gold, var(--text-main));
  padding: 0.75rem 2rem;
  font-family: var(--font-primary, inherit);
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: var(--radius-sm, 0px);
}

.shop-error-retry-btn:hover {
  background-color: var(--accent-gold, var(--text-main));
  color: var(--bg-dark, var(--bg-main));
}

@keyframes errorFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.devoluciones-page {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 60px;
  background: var(--bg-main, #0d0d0d);
  color: var(--text-main, #fff);
  font-family: 'Inter', 'Poppins', sans-serif;
}

.devoluciones-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

.devoluciones-header h1 {
  font-size: 2.3rem;
  font-weight: 700;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #fff, #aaa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.devoluciones-header p {
  color: var(--text-muted, #aaa);
  line-height: 1.6;
  font-size: 0.95rem;
}

.devoluciones-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Guest Options */
.guest-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
}

@media (min-width: 768px) {
  .guest-options {
    grid-template-columns: 3fr 2fr;
  }
}

/* Las cajas de Guest y Formulario mantienen su tarjeta, pero AuthReturns es transparente */
.guest-lookup-container, .guest-auth-prompt, .return-request-container {
  background: var(--bg-card, rgba(20, 20, 20, 0.85));
  border: 1px solid var(--border-color, #222);
  border-radius: 12px;
  padding: 26px;
  backdrop-filter: blur(10px);
}

/* Auth Returns Container: Sin caja ni marco exterior como pidió el usuario */
.auth-returns-container {
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
}

.auth-returns-header {
  margin-bottom: 20px;
}

.auth-returns-header h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.auth-returns-header p {
  color: var(--text-muted, #aaa);
  font-size: 0.92rem;
  margin: 0;
}

/* Banner de políticas destacadas (1 día, sin uso y etiqueta, 75% reembolso) */
.return-policy-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 25px;
}

.policy-badge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}

.policy-badge-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.policy-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-primary, #fff);
  flex-shrink: 0;
}

.policy-item-text {
  display: flex;
  flex-direction: column;
}

.policy-item-text strong {
  font-size: 0.82rem;
  color: #fff;
}

.policy-item-text span {
  font-size: 0.72rem;
  color: var(--text-muted, #aaa);
}

/* Tarjetas de compras (Orders List) */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.order-card {
  background: rgba(18, 18, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
}

.order-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Header de la tarjeta */
.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.order-main-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.order-code-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 10px;
}

.order-code-prefix {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #888);
}

.order-code-value {
  font-size: 0.92rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #fff;
}

.order-date-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--text-muted, #888);
}

.order-status-badge-container {
  flex-shrink: 0;
}

/* Badges sin rotura de línea fea */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap !important;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.badge.badge-success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge.badge-warning {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.badge.badge-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge.badge-secondary {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* Lista de ítems dentro de la orden */
.order-items-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.order-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

.order-item-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 170px;
  flex: 1;
}

.order-item-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #eee;
}

.order-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.item-tag {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted, #bbb);
}

.item-tag.tag-size {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.item-tag.tag-fit {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.item-tag.tag-novariant {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  font-style: italic;
}

.order-item-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.order-item-price {
  font-size: 0.85rem;
  color: var(--text-muted, #aaa);
}

.order-item-refund {
  font-size: 0.76rem;
  font-weight: 600;
  color: #4ade80;
}

/* Notas de elegibilidad */
.order-eligibility-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.4;
  margin-bottom: 16px;
}

.order-eligibility-note.warning {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.25);
  color: #facc15;
}

.order-eligibility-note.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #4ade80;
}

.note-icon {
  flex-shrink: 0;
}

/* Botón de orden */
.btn-select-order {
  width: 100%;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--color-primary, #fff);
  background: var(--color-primary, #fff);
  color: var(--color-primary-text, #000);
}

.btn-select-order:hover:not(:disabled) {
  background: var(--color-primary-hover, #e0e0e0);
  transform: translateY(-1px);
}

.btn-select-order:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #777;
  transform: none;
}

/* Form Styles */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted, #aaa);
  margin-bottom: 8px;
  font-weight: 500;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 12px 15px;
  background: var(--bg-input, #111);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  color: var(--text-main, #fff);
  outline: none;
  transition: all 0.2s;
  font-family: inherit;
}

.form-group input:focus, .form-group textarea:focus {
  border-color: var(--color-primary, #fff);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qty-btn {
  background: var(--bg-input, #111);
  color: var(--text-main, #fff);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.qty-btn:hover:not(:disabled) {
  background: var(--color-primary, #fff);
  color: var(--color-primary-text, #000);
  border-color: var(--color-primary, #fff);
}

.qty-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.qty-input {
  text-align: center;
  flex: 1;
}

.reason-textarea {
  resize: vertical;
  min-height: 100px;
}

.btn-lookup, .btn-submit-return {
  width: 100%;
  padding: 14px;
  background: var(--color-primary, #fff);
  color: var(--color-primary-text, #000);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: 0.2s;
}

.btn-lookup:hover:not(:disabled), .btn-submit-return:hover:not(:disabled) {
  background: var(--color-primary-hover, #ccc);
  transform: translateY(-2px);
}

.btn-lookup:disabled, .btn-submit-return:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Guest prompt */
.guest-auth-prompt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px dashed var(--border-color, #333);
}

.btn-login-prompt {
  margin-top: 15px;
  padding: 10px 24px;
  border: 1px solid var(--color-primary, #fff);
  color: var(--color-primary, #fff);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: 0.2s;
}

.btn-login-prompt:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Return Request Page / Component */
.btn-back {
  background: transparent;
  border: none;
  color: var(--text-muted, #aaa);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-bottom: 20px;
  padding: 0;
  font-size: 0.9rem;
  transition: 0.2s;
}

.btn-back:hover {
  color: var(--color-primary, #fff);
}

.items-list {
  display: grid;
  gap: 15px;
}

.item-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: var(--bg-input, #111);
  border: 1px solid var(--border-color, #222);
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.item-card:hover {
  border-color: var(--color-primary, #fff);
  background: rgba(255, 255, 255, 0.02);
}

.item-image img, .item-image .placeholder-img {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  -o-object-fit: cover;
     object-fit: cover;
  background: #222;
}

.item-details {
  flex: 1;
}

.item-details h4 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.item-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.item-price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.item-original-price {
  font-size: 0.88rem;
  color: var(--text-muted, #aaa);
}

.item-refund-badge {
  font-size: 0.8rem;
  font-weight: 600;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
}

.btn-select {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  transition: 0.2s;
  white-space: nowrap;
}

.item-card:hover .btn-select {
  background: var(--color-primary, #fff);
  color: var(--color-primary-text, #000);
}

.selected-item-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  margin-bottom: 20px;
}

.summary-info h4 {
  font-size: 0.95rem;
  margin-bottom: 3px;
}

.summary-info p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted, #aaa);
}

.btn-change-item {
  background: transparent;
  border: 1px solid var(--border-color, #444);
  color: var(--text-muted, #ccc);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: 0.2s;
}

.btn-change-item:hover {
  border-color: #fff;
  color: #fff;
}

/* Desglose de Reembolso */
.refund-breakdown-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.breakdown-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted, #aaa);
  margin-bottom: 6px;
}

.breakdown-row.fee {
  color: #f87171;
}

.breakdown-row.total-refund {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  font-weight: 700;
  color: #fff;
  font-size: 0.92rem;
}

.refund-highlight {
  color: #4ade80;
  font-size: 1.05rem;
}

/* Checkboxes de condiciones obligatorias */
.conditions-check-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 25px;
  padding: 14px;
  background: rgba(234, 179, 8, 0.05);
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: 10px;
}

.checkbox-condition-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.checkbox-condition-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #facc15;
  cursor: pointer;
  flex-shrink: 0;
}

.checkbox-text {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #ccc;
}

.checkbox-text strong {
  color: #fff;
}

.checkbox-text u {
  color: #facc15;
  text-decoration: underline;
}

.email-verification-required {
  background: rgba(20, 20, 20, 0.9);
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: 0 4px 25px rgba(239, 68, 68, 0.05);
  border-radius: 12px;
  padding: 30px;
}

.auth-returns-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  gap: 15px;
  color: var(--text-muted, #aaa);
}

.no-items-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted, #aaa);
}

.no-items-message svg {
  margin-bottom: 15px;
  opacity: 0.5;
}

.no-items-message h3 {
  color: var(--text-main, #fff);
  margin-bottom: 8px;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* Adaptación responsive para dispositivos móviles */
@media (max-width: 640px) {
  .devoluciones-page {
    padding-top: 75px;
    padding-bottom: 40px;
  }

  .devoluciones-header {
    margin-bottom: 25px;
    padding: 0 14px;
  }

  .devoluciones-header h1 {
    font-size: 1.75rem;
  }

  .devoluciones-content {
    padding: 0 14px;
  }

  .return-policy-banner {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .guest-lookup-container, .guest-auth-prompt, .return-request-container {
    padding: 18px 14px;
  }

  .order-card {
    padding: 16px 14px;
  }

  .order-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .order-status-badge-container {
    width: 100%;
  }

  .order-item-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .order-item-pricing {
    align-items: flex-start;
    margin-top: 4px;
  }

  .item-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .item-action {
    width: 100%;
  }

  .item-action .btn-select {
    width: 100%;
    text-align: center;
  }
}
/* GUIA TALLAS PAGE STYLES */
.guia-tallas-page {
  background-color: #ffffff;
  min-height: 100vh;
  color: #111;
}

.guia-tallas-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
}

.guia-tallas-loader {
  width: 32px;
  height: 32px;
  border: 2px solid #e5e7eb;
  border-top-color: #111827;
  border-radius: 50%;
  animation: guiaSpin 0.7s linear infinite;
}

@keyframes guiaSpin {
  to { transform: rotate(360deg); }
}

/* CONTENT SECTION */
.guia-content-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 20px 80px;
}

/* HEADER */
.guia-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.main-title {
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: 4px;
  margin-bottom: 16px;
  text-transform: uppercase;
  color: #111827;
}

.main-subtitle {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: #6b7280;
}

/* COMO MEDIR SECTION */
.como-medir-section {
  text-align: center;
  margin-top: 20px;
}

.medicion-grid {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
}

.medicion-card {
  background: transparent;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.medicion-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 30px;
  text-transform: uppercase;
  color: #000;
  letter-spacing: 1.5px;
}

.medicion-img-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-bottom: 25px;
}

.medicion-img-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* LABELS POSITIONING */
.medida-label {
  position: absolute;
  font-size: 0.85rem;
  font-weight: 600;
  color: #000;
  background: rgba(255,255,255,0.8);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.2;
}

/* TOPS MANGA LARGA */
.label-largo-top { top: 40%; left: 10%; transform: translateX(-50%); }
.label-ancho-top { top: 45%; left: 50%; transform: translate(-50%, -50%); }
.label-manga-top { top: 35%; right: -5%; }

/* TOPS MANGA CORTA */
.label-hombro-short { top: 20%; left: 50%; transform: translate(-50%, -50%); }
.label-ancho-short { top: 45%; left: 50%; transform: translate(-50%, -50%); }
.label-largo-short { top: 50%; left: 10%; transform: translateX(-50%); }
.label-manga-short { top: 30%; right: 5%; }

/* BOTTOMS */
.label-cintura-bot { top: 8%; left: 50%; transform: translateX(-50%); }
.label-tiro-bot { top: 25%; right: 15%; }
.label-largo-bot { top: 50%; left: 10%; }

/* HATS */
.label-circ-hat { top: 55%; left: 15%; }
.label-alto-hat { top: 40%; right: 5%; }

/* WATCHES */
.label-diametro-watch { top: 15%; left: 50%; transform: translateX(-50%); }
.label-largo-watch { top: 70%; left: 30%; transform: translateX(-50%); }

.medicion-desc {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
  margin-top: 15px;
}

/* ANIMACIONES */
.vox-reveal, .vox-reveal-left, .vox-reveal-right {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.vox-reveal { transform: translateY(30px); }
.vox-reveal-left { transform: translateX(-30px); }
.vox-reveal-right { transform: translateX(30px); }

.vox-reveal.active, .vox-reveal-left.active, .vox-reveal-right.active {
  opacity: 1;
  transform: translate(0, 0);
}
/* =========================
   RESET BASE & VARIABLES
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background: var(--bg-main);
  color: #fff;
}

/* =========================
   LAYOUT & BACKGROUND
========================= */
.auth-page-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('/assets/premium_fashion_bg--MwMyJ0-.png') no-repeat center center/cover;
  padding: 20px;
  position: relative;
}

.auth-page-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1;
}

.auth-split-container {
  display: flex;
  width: 100%;
  max-width: 1000px;
  min-height: 600px;
  background: var(--bg-card, #fff);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
  animation: modalEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
}

.auth-image-side {
  flex: 1;
  background-size: cover;
  background-position: center;
  position: relative;
  display: none;
}

.auth-image-side::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
}

@media (min-width: 800px) {
  .auth-image-side {
    display: block;
  }
}

.auth-form-side {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(15, 15, 15, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255,255,255,0.05);
  width: 100%;
}

@media (max-width: 600px) {
  .auth-form-side {
    padding: 24px 20px;
  }
  .auth-page-wrapper {
    padding: 16px;
  }
  .auth-split-container {
    min-height: auto;
  }
}

@keyframes modalEnter {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================
   TEXTOS Y LOGO
========================= */
.auth-logo-container {
  margin-bottom: 24px;
}

.auth-logo-container img {
  height: 45px;
  -o-object-fit: contain;
     object-fit: contain;
}

.auth-subtitle {
  margin: 0 0 30px;
  font-size: 15px;
  letter-spacing: 1px;
  color: #a0a0a0;
  font-weight: 400;
  text-align: center;
}

/* =========================
   FORM & FLOATING INPUTS
========================= */
.auth-form-side form {
  width: 100%;
  max-width: 380px;
}

.floating-input-group {
  position: relative;
  margin-bottom: 20px;
}

.floating-input-group .input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #777;
  pointer-events: none;
  transition: color 0.3s ease;
  z-index: 1;
}

.floating-input-group:focus-within .input-icon {
  color: var(--color-primary-hover, #c9a227);
}

.auth-form-side .floating-input {
  width: 100%;
  padding: 24px 16px 12px 48px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff !important;
  font-size: 15px;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-form-side .floating-input:focus {
  border-color: var(--color-primary, #c9a227);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.15);
}

.auth-form-side .floating-label {
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  font-size: 15px;
  pointer-events: none;
  transition: all 0.2s ease-out;
}

.auth-form-side .floating-input:not(:-moz-placeholder) ~ .floating-label {
  top: 14px;
  font-size: 11px;
  color: var(--color-primary, #c9a227);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.auth-form-side .floating-input:focus ~ .floating-label,
.auth-form-side .floating-input:not(:placeholder-shown) ~ .floating-label {
  top: 14px;
  font-size: 11px;
  color: var(--color-primary, #c9a227);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* TOGGLE PASSWORD */
.toggle-password-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #777;
  cursor: pointer;
  padding: 4px;
  display: flex;
  transition: color 0.2s;
}

.toggle-password-btn:hover {
  color: #aaa;
}

/* =========================
   BUTTONS
========================= */
.auth-btn-primary {
  width: 100%;
  padding: 16px;
  background: var(--color-primary, #c9a227);
  color: var(--color-primary-text, #111);
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 10px;
  box-shadow: 0 4px 15px rgba(201, 162, 39, 0.2);
}

.auth-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(201, 162, 39, 0.4);
}

.auth-btn-primary:active {
  transform: scale(0.98);
}

.auth-btn-google {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s ease;
}

.auth-btn-google:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.3);
}

/* =========================
   MISC
========================= */
.auth-back-btn {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 10px 16px;
  border-radius: 24px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
}

.auth-back-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(-4px);
}

@media (max-width: 600px) {
  .auth-back-btn {
    top: 16px;
    left: 16px;
    padding: 8px 12px;
    font-size: 13px;
  }
}

.auth-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: #aaa;
}

.auth-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  margin-left: 5px;
  transition: color 0.3s ease;
}

.auth-link:hover {
  color: #fff;
}

.success-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #33d9b2;
  font-size: 18px;
  font-weight: bold;
}
html, body {
  height: 100%;
  margin: 0;
}

/* ===== DASHBOARD WRAPPER ===== */
.dashboard {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-main);
  color: var(--text-main);
}

/* ===== SIDEBAR ===== */
.sidebar {
  width: 260px;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-input);
  border-right: 1px solid var(--border-color);
  padding: 24px;
  display: flex;
  flex-direction: column;
}

/* LOGO */
.sidebar-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.sidebar-logo img {
  width: 120px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* NAV */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;

  overflow-y: auto;
  max-height: calc(100vh - 120px);
}

/* SECCIONES */
.nav-section {
  margin-top: 10px;
}

.section-title {
  font-size: 11px;
  color: var(--text-muted);
  margin: 10px 0 5px 10px;
  letter-spacing: 1px;
}

/* LINKS */
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: 0.2s;
}

.sidebar-nav a svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
  flex-shrink: 0;
}

.sidebar-nav a:hover {
  background: var(--bg-overlay);
  color: var(--text-main);
}

.sidebar-nav a:hover svg {
  opacity: 1;
}

/* FOOTER */
.sidebar-footer {
  margin-top: auto;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
}

/* ===== MAIN LAYOUT ===== */
.main {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* TOPBAR */
.topbar {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.topbar small {
  color: rgba(255, 255, 255, 0.5);
}

/* CONTENT WRAPPER (IMPORTANTE: SOLO LAYOUT) */
.content {
  padding: 24px;
  overflow-y: auto;
}

/* ===== SCROLL MODERNO ===== */
.sidebar,
.main {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.sidebar::-webkit-scrollbar,
.main::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb {
  background: var(--bg-overlay);
  border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.main::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.sidebar::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track {
  background: transparent;
}

/* ===== COLLAPSED SIDEBAR ===== */
.sidebar.collapsed {
  width: 70px;
  padding: 20px 10px;
}

.sidebar.collapsed .sidebar-nav a {
  justify-content: center;
  font-size: 0;
}

.sidebar.collapsed .sidebar-nav a svg {
  margin: 0;
}

.sidebar.collapsed .sidebar-logo img {
  display: none;
}

.sidebar.collapsed .sidebar-footer {
  display: none;
}

/* ===== TOGGLE BUTTON ===== */
.toggle-btn {
  background: transparent;
  border: none;
  position: absolute;
  top: 19px;
  left: 18px;

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;

  color: var(--text-main);
  font-size: 18px;
  cursor: pointer;
  transition: 0.2s;
}

.toggle-btn:hover {
  background: var(--bg-overlay);
}

@media (max-width: 1024px) {

  .dashboard {
    position: relative;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* SIDEBAR MOBILE */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;

    width: 260px;
    height: 100vh;

    z-index: 999;

    transition: transform 0.3s ease;

    /* oculto por defecto */
    transform: translateX(-100%);
  }

  /* cuando est abierto */
  .sidebar:not(.collapsed) {
    transform: translateX(0);
  }

  /* colapsado = oculto completo */
  .sidebar.collapsed {
    transform: translateX(-100%);
    width: 260px;
    padding: 24px;
    display: none !important; /* Force hide the entire sidebar so icons cannot show */
  }

  /* MAIN ocupa todo */
  .main {
    width: 100%;
    margin-left: 0;
    height: auto;
    overflow-y: visible;
  }

  /* BOTN HAMBURGUESA */
  .toggle-btn {
    position: fixed;
    top: 9px;
    left: 14px;
    z-index: 1001;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }

  .topbar {
    padding-left: 70px !important;
  }
}


.topbar {
  position: sticky;
  top: 0;
  z-index: 990;
  height: 70px;
  min-height: 70px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}

.topbar-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.topbar-left h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;


  border-radius: 12px;
}

.topbar-user svg {
  color: var(--color-primary);
}

.topbar-user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.user-email {
  font-size: 11px;
  color: var( --text-main) !important;
}

/* BUTTONS */
.topbar-btn {
  height: 42px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 0 14px;

  border-radius: 10px;

  border: none;
  cursor: pointer;

  font-size: 13px;
  font-weight: 500;

  transition: 0.2s ease;

  text-decoration: none;
}

/* HOME */
.home-btn {
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: var(--color-primary);
}

.home-btn:hover {
  background: rgba(37, 99, 235, 0.25);
  transform: translateY(-1px);
}

/* LOGOUT */
.logout-btn {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--color-danger);
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.2s ease;
}

.nav-link:hover {
  background: var(--bg-overlay);
}

.nav-link.active {
  background: var(--bg-overlay);
  color: var(--color-primary);
  font-weight: 600;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
}

.nav-link.active svg {
  stroke: var(--color-primary);
}


@media (max-width: 1024px) {

  .topbar {
    height: 60px;
    min-height: 60px;
    padding: 0 14px 0 60px;

    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
  }

  .topbar-left h3 {
    font-size: 15px;
  }

  .topbar-right {
    gap: 8px;
  }

  .topbar-user {
    padding: 0;
    gap: 6px;
  }

  .topbar-user svg {
    width: 28px;
    height: 28px;
  }

  .topbar-user-info {
    display: flex;
  }

  .user-email {
    display: none;
  }

  .user-name {
    font-size: 12px;
    max-width: 90px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-btn {
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  .topbar-btn span {
    display: none;
  }

}

@media (max-width: 600px) {

    .topbar-left h3 {
    display: none;
  }
  
  .topbar-user-info {
    overflow: hidden;
  }

  .user-email {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

    .topbar-user {
    background: rgba(255,255,255,0.04);
    padding: 4px 8px;
    border-radius: 10px;
  }

  .user-name {
    max-width: 70px;
    font-size: 11px;
  }

  

}


.logout-modal {
  width: 90%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 30px 25px;
  text-align: center;
  color: var(--text-main);
  animation: modalFade 0.2s ease;
}

.logout-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

.logout-modal h2 {
  margin-bottom: 10px;
  font-size: 24px;
}

.logout-modal p {
  color: rgba(255,255,255,0.7);
  margin-bottom: 25px;
  line-height: 1.5;
}

.logout-actions {
  display: flex;
  gap: 12px;
}

.logout-actions button {
  flex: 1;
  padding: 12px;

  border: none;
  border-radius: 10px;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
  transition: 0.2s ease;
}

/* cancelar */
.cancel-btn {
  background: rgba(255,255,255,0.06);
  color: var(--text-main);
}

.cancel-btn:hover {
  background: var(--bg-overlay);
}

/* confirmar */
.confirm-btn {
  background: var(--color-danger);
  color: var(--text-main);
}

.confirm-btn:hover {
  background: var(--color-danger-hover);
  transform: translateY(-1px);
}

/* FORCE ALL MODAL OVERLAYS ABOVE MOBILE TOGGLE BTN */
.modal-overlay,
.branch-modal-overlay,
.settings-modal-overlay,
.selector-modal-overlay {
  z-index: 10000 !important;
}

/* Estilos base del POS */
.pos-layout {
    min-height: 100vh;
    width: 100%;
    background-color: var(--bg-main);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
}

/* Botones del Menú Principal */
.pos-menu-btn {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    background-color: transparent;
    opacity: 0.8;
}

.pos-menu-btn:hover {
    opacity: 1;
    background-color: var(--color-primary);
    color: var(--color-primary-text);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
 /* =============================================
   DASHBOARD HOME - Home.css
   Sistema ERP/POS VOXman
============================================= */

.hd-container {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1400px;
  animation: fadeIn 0.3s ease;
}

/* ── HEADER ─────────────────────────────── */
.hd-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.hd-greeting-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 4px 0;
}

.hd-greeting-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  text-transform: capitalize;
}

.hd-actions-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hd-date-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-main);
}

.hd-filter-icon {
  color: var(--text-muted);
}



.hd-refresh-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.hd-refresh-btn:hover {
  background: var(--bg-overlay);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── CHARTS SECTION ─────────────────────── */
.hd-charts-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.hd-chart-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 0 12px 0;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

.hd-chart-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 14px 0;
}

.hd-chart-wrapper {
  flex: 1;
  min-height: 260px;
  width: 100%;
}

/* ── KPI GRID ───────────────────────────── */
.hd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.hd-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px 16px 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.hd-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3.5px;
  border-radius: 14px 0 0 14px;
}

.hd-kpi-card.kpi-green::before  { background: #10b981; }
.hd-kpi-card.kpi-blue::before   { background: #3b82f6; }
.hd-kpi-card.kpi-red::before    { background: #ef4444; }
.hd-kpi-card.kpi-purple::before { background: #8b5cf6; }
.hd-kpi-card.kpi-orange::before { background: #f97316; }
.hd-kpi-card.kpi-teal::before   { background: #14b8a6; }
.hd-kpi-card.kpi-indigo::before { background: #6366f1; }
.hd-kpi-card.kpi-rose::before   { background: #f43f5e; }
.hd-kpi-card.kpi-amber::before  { background: #f59e0b; }

.hd-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.hd-kpi-top {
  width: 100%;
  min-width: 0;
}

.hd-kpi-value {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  letter-spacing: -0.4px;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.hd-kpi-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hd-kpi-icon-mini {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-green  .hd-kpi-icon-mini { background: rgba(16,185,129,0.14);  color: #10b981; }
.kpi-blue   .hd-kpi-icon-mini { background: rgba(59,130,246,0.14);  color: #3b82f6; }
.kpi-red    .hd-kpi-icon-mini { background: rgba(239,68,68,0.14);   color: #ef4444; }
.kpi-purple .hd-kpi-icon-mini { background: rgba(139,92,246,0.14); color: #8b5cf6; }
.kpi-orange .hd-kpi-icon-mini { background: rgba(249,115,22,0.14); color: #f97316; }
.kpi-teal   .hd-kpi-icon-mini { background: rgba(20,184,166,0.14);  color: #14b8a6; }
.kpi-indigo .hd-kpi-icon-mini { background: rgba(99,102,241,0.14); color: #6366f1; }
.kpi-rose   .hd-kpi-icon-mini { background: rgba(244,63,94,0.14);   color: #f43f5e; }
.kpi-amber  .hd-kpi-icon-mini { background: rgba(245,158,11,0.14);  color: #f59e0b; }

.hd-kpi-label {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  font-weight: 500;
  line-height: 1.25;
}

.hd-kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
  opacity: 0.75;
  line-height: 1.2;
}

/* ── SECTION TITLE ──────────────────────── */
.hd-section-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 14px 0;
}

/* ── QUICK LINKS ────────────────────────── */
.hd-quick-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.hd-ql-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  text-decoration: none;
  transition: all 0.2s;
  color: var(--text-main);
}

.hd-ql-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.hd-ql-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.hd-ql-card:hover .hd-ql-icon {
  transform: scale(1.1);
}

.ql-green   .hd-ql-icon { background: rgba(16,185,129,0.1);  color: #10b981; }
.ql-blue    .hd-ql-icon { background: rgba(59,130,246,0.1);  color: #3b82f6; }
.ql-purple  .hd-ql-icon { background: rgba(139,92,246,0.1);  color: #8b5cf6; }
.ql-teal    .hd-ql-icon { background: rgba(20,184,166,0.1);  color: #14b8a6; }
.ql-orange  .hd-ql-icon { background: rgba(249,115,22,0.1);  color: #f97316; }
.ql-indigo  .hd-ql-icon { background: rgba(99,102,241,0.1);  color: #6366f1; }
.ql-rose    .hd-ql-icon { background: rgba(244,63,94,0.1);   color: #f43f5e; }
.ql-amber   .hd-ql-icon { background: rgba(245,158,11,0.1);  color: #f59e0b; }
.ql-pink    .hd-ql-icon { background: rgba(236,72,153,0.1);  color: #ec4899; }
.ql-emerald .hd-ql-icon { background: rgba(16,185,129,0.1);  color: #059669; }
.ql-sky     .hd-ql-icon { background: rgba(14,165,233,0.1);  color: #0ea5e9; }
.ql-slate   .hd-ql-icon { background: rgba(100,116,139,0.1); color: #64748b; }

.hd-ql-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hd-ql-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hd-ql-sub {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hd-ql-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.hd-ql-card:hover .hd-ql-arrow {
  transform: translateX(4px);
  color: var(--color-primary);
}

/* ── TABLES GRID ────────────────────────── */
.hd-tables-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.hd-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hd-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.hd-table-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hd-table-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 0.2s;
}

.hd-table-link:hover {
  opacity: 0.7;
}

.hd-table-scroll {
  overflow-x: auto;
}

.hd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.hd-table th {
  background: var(--bg-main);
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.hd-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  vertical-align: middle;
}

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

.hd-table tbody tr:hover {
  background: var(--bg-overlay);
}

.hd-mono   { font-family: monospace; font-size: 12px; color: var(--text-muted); }
.hd-bold   { font-weight: 600; }
.hd-muted  { color: var(--text-muted); font-size: 12px; }

.hd-table-loading {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hd-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

/* ── BADGES ─────────────────────────────── */
.hd-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-success { background: rgba(16,185,129,0.1); color: #10b981; }
.badge-warning { background: rgba(245,158,11,0.1); color: #f59e0b; }
.badge-danger  { background: rgba(239,68,68,0.1);  color: #ef4444; }
.badge-info    { background: rgba(59,130,246,0.1); color: #3b82f6; }
.badge-default { background: var(--bg-overlay);    color: var(--text-muted); }

/* Delivery Types */
.hd-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
}
.type-home   { background: rgba(255,107,107,0.1); color: #ff6b6b; border: 1px solid rgba(255,107,107,0.2); }
.type-ext    { background: rgba(14,165,233,0.1); color: #0ea5e9; border: 1px solid rgba(14,165,233,0.2); }
.type-pickup { background: rgba(139,92,246,0.1); color: #8b5cf6; border: 1px solid rgba(139,92,246,0.2); }
.type-point  { background: rgba(100,116,139,0.1); color: #64748b; border: 1px solid rgba(100,116,139,0.2); }

/* ── SKELETON ───────────────────────────── */
.hd-skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-overlay) 25%, var(--bg-input) 50%, var(--bg-overlay) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

.hd-skeleton-lg  { height: 28px; width: 80%; }
.hd-skeleton-row { height: 36px; width: 100%; }

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

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── FOOTER ─────────────────────────────── */
.hd-last-refresh {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  padding-bottom: 8px;
}

/* ── RESPONSIVE ─────────────────────────── */
@media (max-width: 1200px) {
  .hd-kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .hd-quick-links { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .hd-tables-grid { grid-template-columns: 1fr 1fr; }
  .hd-tables-grid .hd-table-card:last-child { grid-column: 1 / -1; }
  .hd-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .hd-charts-section { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hd-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .hd-quick-links { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .hd-container { padding: 12px 10px; gap: 16px; }
  .hd-top { flex-direction: column; align-items: stretch; gap: 12px; }
  .hd-actions-group { justify-content: space-between; gap: 8px; }
  .hd-date-filter { flex: 1; }
  .hd-refresh-btn { justify-content: center; }
  .hd-greeting-title { font-size: 19px; }
  .hd-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hd-kpi-card { padding: 12px 10px 10px 12px; gap: 6px; }
  .hd-kpi-value { font-size: 15.5px; line-height: 1.2; word-break: break-word; overflow-wrap: break-word; }
  .hd-kpi-bottom { gap: 6px; }
  .hd-kpi-icon-mini { width: 20px; height: 20px; border-radius: 5px; }
  .hd-kpi-icon-mini svg { width: 12px; height: 12px; }
  .hd-kpi-label { font-size: 11px; line-height: 1.2; }
  .hd-kpi-sub { display: none; }
  .hd-charts-section { gap: 20px; }
  .hd-chart-card { padding: 0; }
  .hd-chart-wrapper { min-height: 230px; }
  .hd-quick-links { grid-template-columns: 1fr; gap: 10px; }
  .hd-tables-grid { grid-template-columns: 1fr; }
  .hd-tables-grid .hd-table-card:last-child { grid-column: auto; }
}
/*  CONTENEDOR */
.users-container {
  padding: 20px;
  font-family: "Segoe UI", sans-serif;
  color: var(--text-main);
}

/*  HEADER */
/* =========================
   HEADER MEJORADO
========================= */
.users-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 20px;
  padding: 12px 16px;

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;

  backdrop-filter: blur(8px);
}

/* ttulo ms limpio */
.users-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.3px;
}

/* contenedor de botones */
.users-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* =========================
   BOTN PRIMARY (CREAR)
========================= */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);

  border: none;
  padding: 10px 14px;
  border-radius: 8px;

  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
  transition: 0.2s ease;

  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* =========================
   BOTN SECONDARY (EXPORTAR)
========================= */
.btn-secondary {
  background: var(--bg-overlay);
  color: #e5e7eb;

  border: 1px solid var(--border-color);
  padding: 10px 14px;

  border-radius: 8px;

  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
  transition: 0.2s ease;

  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-secondary:hover {
  background: var(--bg-overlay);
  transform: translateY(-1px);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 600px) {
  .users-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .users-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }

  .users-actions > * {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 14px;
    box-sizing: border-box;
    white-space: nowrap;
  }

  .hide-on-mobile {
    display: none;
  }
}

/*  BOTN PRINCIPAL (ORIGINAL RESTAURADO) */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

/*  TABLA */
.users-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.users-table th {
  background: var(--bg-card);
  text-align: left;
  padding: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.users-table td {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
}

.users-table tr:hover {
  background: var(--bg-overlay);
}


/*  BADGES */
.badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

.badge-owner {
  background: var(--bg-overlay);
  color: var(--color-primary);
}

.badge-customer {
  background: rgba(34,197,94,0.15);
  color: var(--color-success);
}

/*  BOTONES ACCIN (ORIGINALES RESTAURADOS) */
/*  BOTONES ACCIN (EDITAR / ELIMINAR) RESTAURADOS */


/* =========================
    VER
========================= */
.btn-view {
  background: var(--bg-overlay);
  border: 1px solid  var(--border-color);
  color: var(--color-primary);

  padding: 6px 10px;
  margin-right: 5px;

  border-radius: 6px;
  font-size: 13px;

  cursor: pointer;
  transition: 0.2s ease;

  font-weight: 500;
}

.btn-view:hover {
  background: var(--bg-overlay);
  transform: translateY(-1px);
}

.btn-view:active {
  transform: translateY(0px);
}

.btn-view:focus {
  outline: 2px solid rgba(59, 130, 246, 0.4);
  outline-offset: 2px;
}

/* EDITAR */
.btn-edit {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 6px 10px;
  margin-right: 5px;
  border-radius: 6px;
  color: var(--color-warning);
  cursor: pointer;
  transition: 0.2s ease;
  font-size: 13px;
}

.btn-edit:hover {
  background: rgba(245, 158, 11, 0.25);
  transform: translateY(-1px);
}

.btn-edit:active {
  transform: translateY(0px);
}

/* =========================
    PDF / REPORTE
========================= */
.btn-report {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: var(--color-success);

  padding: 6px 10px;
  margin-right: 5px;

  border-radius: 6px;
  font-size: 13px;

  cursor: pointer;
  transition: 0.2s ease;

  font-weight: 500;
}

.btn-report:hover {
  background: rgba(16, 185, 129, 0.25);
  transform: translateY(-1px);
}

.btn-report:active {
  transform: translateY(0px);
}

.btn-report:focus {
  outline: 2px solid rgba(16, 185, 129, 0.4);
  outline-offset: 2px;
}

/* ELIMINAR */
.btn-delete {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--color-danger);
  cursor: pointer;
  transition: 0.2s ease;
  font-size: 13px;
}

.btn-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}

.btn-delete:active {
  transform: translateY(0px);
}

/*  mejora UX: focus accesible */
.btn-edit:focus,
.btn-delete:focus {
  outline: 2px solid rgba(255,255,255,0.2);
  outline-offset: 2px;
}


/*  MODAL */
/*  OVERLAY */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0; bottom: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  z-index: 10000;
  box-sizing: border-box;
}

/*  MODAL */
.modal {
  background: var(--bg-card);
  color: var(--text-main);

  width: 95vw;
  max-width: 900px;
  max-height: 90vh; /* changed from height: 90vh */

  border-radius: 14px;
  border: 1px solid var(--border-color);

  display: flex;
  flex-direction: column;

  overflow: hidden; /* we want form to scroll, not modal itself */
}
form.modal {
  padding: 20px 25px;
  display: flex;
  flex-direction: column;
  gap: 25px;

  overflow-y: auto; /*  scroll interno */
  flex: 1; /* fills remaining space */
}



/*  HEADER */
.modal h2 {
  padding: 20px 25px;
  font-size: 20px;
  border-bottom: 1px solid var(--border-color);
}


.modal > * {
  width: 100%; /*  fuerza a ocupar todo el ancho */
}



/*  SECCIONES */
.form-section {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 15px;
}

.form-section h3 {
  font-size: 15px;
  color: var(--color-primary);
  border-left: 3px solid var(--color-primary);
  padding-left: 10px;
}

/*  GRID MEJORADO */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /*  3 COLUMNAS */
  gap: 16px;
}

.form-group {
  width: 100%; /*  ESTO FALTABA */
}


.form-group label {
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--text-muted);
}



.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--bg-main);
}

form.modal {
  width: 100% !important;
  max-width: 900px !important;
}
.form-group input,
.form-group select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;

  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}


.form-group input::-moz-placeholder {
  color: var(--text-muted);
}


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

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border: 1px solid var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary)33;
}

/*  FULL WIDTH */
.form-group.full-width {
  grid-column: span 3;
}

/*  CHECKBOX */
.checkbox-group {
  display: flex;
  align-items: center;
  height: 100%;
}

/*  ROLES */
.roles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.role-item {
  background: var(--bg-card);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s ease;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-item input {
  display: none;
}

.role-item.active {
  background: rgba(99,102,241,0.1);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.role-item:hover {
  background: var(--bg-overlay);
}

.role-item.active:hover {
  background: rgba(99,102,241,0.15);
}

/* TOGGLE SWITCH */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--bg-overlay);
  transition: .3s;
  border-radius: 24px;
  border: 1px solid var(--border-color);
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-muted);
  transition: .3s;
  border-radius: 50%;
}
input:checked + .toggle-slider {
  background-color: var(--color-success);
  border-color: var(--color-success);
}
input:checked + .toggle-slider:before {
  background-color: white;
  transform: translateX(20px);
}

/*  FOOTER */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}

/*  BOTONES */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  padding: 10px 18px;
  border-radius: 8px;
}

.btn-secondary {
  background: var(--color-secondary);
  padding: 10px 18px;
  border-radius: 8px;
  color: var(--text-main);
}


/*  FILTROS (nuevo agregado sin romper tu diseo) */
.filters-panel {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
  padding: 10px;
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.filters-panel input,
.filters-panel select {
  padding: 8px;
  border-radius: 6px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

/*  GROUPING */
.group-section {
  margin-bottom: 20px;
}

.group-title {
  font-size: 14px;
  color: var(--color-primary-hover);
  margin-bottom: 8px;
}



.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: var(--text-main);
  gap: 12px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,255,255,0.2);
  border-top: 4px solid #4f46e5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}




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


/* =========================
    USER VIEW MODAL (DARK)
========================= */

/* overlay ya lo tienes, pero lo mejoramos un poco */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px); /*  efecto pro */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

/* contenedor principal */
.modal {
  background: var(--bg-main);
  color: var(--text-main);

  width: 95%;
  max-width: 900px;

  border-radius: 14px;
  border: 1px solid var(--border-color);

  box-shadow: 0 20px 60px rgba(0,0,0,0.6);

  overflow: hidden;

  display: flex;
  flex-direction: column;

  animation: modalFade 0.2s ease-in-out;
}

/* animacin suave */
@keyframes modalFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* header */
.modal h2 {
  padding: 18px 22px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-color);
  color: var(--color-primary);
}

/* grid de informacin */
.user-view-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;

  padding: 20px;
}

/* cada bloque */
.user-view-grid div {
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);

  padding: 12px;
  border-radius: 10px;

  transition: 0.2s;
}

.user-view-grid div:hover {
  background: var(--bg-overlay);
  transform: translateY(-1px);
}

/* labels */
.user-view-grid strong {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 5px;
  letter-spacing: 0.3px;
}

/* valores */
.user-view-grid p {
  margin: 0;
  font-size: 14px;
  color: var(--text-main);
  word-break: break-word;
}

/* footer */
.modal-actions {
  display: flex;
  justify-content: flex-end;

  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
}

/* botn cerrar */
.modal-actions .btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  padding: 10px 16px;
  border-radius: 8px;
  transition: 0.2s;
}

.modal-actions .btn-primary:hover {
  background: var(--color-primary-hover);
}



.error {
  color: var(--color-danger);
  font-size: 12px;
  margin-top: 4px;
  display: block;
  animation: fadeIn 0.2s ease-in-out;
}

/* input con error */
.input-error {
  border: 1px solid var(--color-danger) !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25);
}

/* Contenedor general */
.suggestions {
  margin-top: 6px;
  width: 100%;
  position: relative;
}

/* Ttulo pequeo */
.suggestions small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 6px;
}

/* Lista */
.suggestion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Item individual */
.suggestion-item {
  background: var(--bg-card);
  border: 1px solid #333;
  color: var(--text-main);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Hover */
.suggestion-item:hover {
  background: var(--bg-card);
  border-color: var(--border-color);
  transform: translateY(-1px);
}

/* Click feedback */
.suggestion-item:active {
  transform: scale(0.95);
}

/* Animacin suave de entrada */
.suggestions {
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modo error (opcional si quieres integrarlo visualmente) */
.input-error + .suggestions small {
  color: var(--color-danger);
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================
    RESPONSIVE
========================= */

@media (max-width: 768px) {
  .user-view-grid {
    grid-template-columns: 1fr;
  }

  .modal {
    width: 95%;
  }
}


/*  RESPONSIVE */
@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .roles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-group.full-width {
    grid-column: span 2;
  }
}

/* =========================
    MODAL CONFIRM & UTILS
========================= */
.modal-confirm {
  background: var(--bg-card);
  color: var(--text-main);
  width: 95%;
  max-width: 450px;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  animation: modalFade 0.2s ease-in-out;
}
.modal-confirm h3 {
  font-size: 18px;
  color: var(--color-danger);
  margin: 0;
}
.modal-confirm p {
  font-size: 14px;
  color: var(--text-main);
  margin: 0;
}

.btn-danger {
  background: var(--color-danger);
  color: var(--text-main);
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: 0.2s;
  font-weight: 500;
}
.btn-danger:hover {
  background: var(--color-danger-hover);
}
.btn-cancel {
  background: var(--bg-overlay);
  color: var(--text-main);
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: 0.2s;
}
.btn-cancel:hover {
  background: var(--bg-overlay);
}
.btn-warning {
  background: var(--color-warning);
  color: var(--text-main);
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: 0.2s;
}
.btn-warning:hover {
  background: var(--color-warning-hover);
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .roles-grid {
    grid-template-columns: 1fr;
  }

  .form-group.full-width {
    grid-column: span 1;
  }
}


/* =========================
    TYPES SELECTOR (PRO)
========================= */

.types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* CARD */
.type-card {
  position: relative;
  cursor: pointer;

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);

  border-radius: 12px;
  padding: 14px;

  transition: all 0.2s ease;

  display: flex;
  align-items: center;
}

/* ocultar checkbox */
.type-card input {
  display: none;
}

/* contenido */
.type-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ttulo */
.type-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

/* descripcin */
.type-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* hover */
.type-card:hover {
  background: var(--bg-overlay);
  border-color: var(--border-color);
  transform: translateY(-1px);
}

/* ACTIVO */
.type-card.active {
  border: 1px solid var(--color-primary);
  background: rgba(37, 99, 235, 0.15);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.4);
}

/* efecto glow */
.type-card.active:hover {
  background: rgba(37, 99, 235, 0.2);
}

/* indicador visual */
.type-card.active::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;

  font-size: 12px;
  color: var(--color-primary);
  font-weight: bold;
}

/* =========================
    RESPONSIVE
========================= */
@media (max-width: 600px) {
  .types-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================
    RESPONSIVE USERS TABLE
========================= */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
}

/* scroll bonito */
.table-wrapper::-webkit-scrollbar {
  height: 6px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--bg-overlay);
  border-radius: 999px;
}

/* tabla */
.users-table {
  min-width: 1200px;
}

/* =========================
   TABLET
========================= */
@media (max-width: 1024px) {

  .filters-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .filters-panel input,
  .filters-panel select {
    width: 100%;
    box-sizing: border-box;
  }

}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {

  .users-container {
    padding: 12px;
  }

  /* filtros */
  .filters-panel {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .filters-panel input,
  .filters-panel select {
    width: 100%;
    font-size: 14px;
  }

  /* tabla */
  .users-table {
    min-width: 900px;
  }

  .users-table th,
  .users-table td {
    padding: 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* botones */
  .btn-view,
  .btn-edit,
  .btn-report,
  .btn-delete {
    padding: 5px 8px;
    font-size: 11px;
    margin-bottom: 4px;
  }

  /* modal */
  .modal {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  form.modal {
    padding: 15px;
  }

  .modal h2 {
    font-size: 18px;
    padding: 15px;
  }

  /* acciones modal */
  .form-actions {
    flex-direction: column;
  }

  .form-actions button {
    width: 100%;
  }

}

/* =========================
   EXTRA SMALL
========================= */
@media (max-width: 480px) {

  .users-header {
    padding: 10px;
  }

  .users-title {
    font-size: 18px;
  }

  /* ocultar columnas menos importantes */
  .users-table th:nth-child(7),
  .users-table td:nth-child(7),
  .users-table th:nth-child(8),
  .users-table td:nth-child(8),
  .users-table th:nth-child(9),
  .users-table td:nth-child(9) {
    display: none;
  }

}

/* =========================
   KPI CARDS FOR USERS
========================= */
.users-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.users-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.users-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.users-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3.5px;
    background: var(--color-primary);
}

.users-kpi-card.kpi-total::before { background: #6366f1; }
.users-kpi-card.kpi-active::before { background: #10b981; }
.users-kpi-card.kpi-inactive::before { background: #ef4444; }
.users-kpi-card.kpi-customers::before { background: #3b82f6; }

.users-kpi-top {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.users-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    word-break: break-word;
    white-space: normal;
}

.users-kpi-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.users-kpi-icon-mini {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.users-kpi-card.kpi-total .users-kpi-icon-mini {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.users-kpi-card.kpi-active .users-kpi-icon-mini {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.users-kpi-card.kpi-inactive .users-kpi-icon-mini {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.users-kpi-card.kpi-verified::before {
    background: #0ea5e9;
}

.users-kpi-card.kpi-verified .users-kpi-icon-mini {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
}

.users-kpi-card.kpi-customers .users-kpi-icon-mini {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.users-kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   BARRA DE INDICADORES RÁPIDOS (MINIMALISTA & ELEGANTE)
   ========================================================================== */
.users-quick-indicators {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.users-indicator-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-main);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.users-indicator-chip:hover {
    border-color: rgba(99, 102, 241, 0.35);
}

.indicator-icon-verified {
    color: #10b981;
}

.indicator-icon-web {
    color: #6366f1;
}

.indicator-icon-staff {
    color: #0ea5e9;
}

.indicator-label {
    color: var(--text-muted);
    font-weight: 500;
}

.indicator-highlight {
    font-weight: 600;
    color: var(--text-main);
}

.indicator-divider {
    color: var(--border-color);
    margin: 0 1px;
}

.indicator-sub {
    color: var(--text-muted);
    font-size: 11px;
}

.indicator-google-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   TABLA DE USUARIOS MEJORADA (UX / UI ELEGANTE)
   ========================================================================== */
.table-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.table-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-overlay);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
    overflow: hidden;
}

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

.table-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.table-user-email-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.table-user-email {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-main);
}

.table-user-username {
    font-size: 11px;
    color: var(--text-muted);
}

.table-user-fullname {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
}

.table-badge-verify {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
}

.table-badge-verify.verified {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

.table-badge-verify.pending {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.table-badge-verify.guest {
    background: rgba(107, 114, 128, 0.12);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.25);
}

.user-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.user-status-pill.active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.user-status-pill.inactive {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.user-status-pill .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.user-status-pill.active .status-dot {
    background: #10b981;
}

.user-status-pill.inactive .status-dot {
    background: #ef4444;
}

.user-origin-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

.user-origin-pill.google {
    background: rgba(66, 133, 244, 0.1);
    color: var(--text-main);
    border: 1px solid rgba(66, 133, 244, 0.25);
}

.user-origin-pill.web {
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.user-origin-pill.pos {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.user-origin-pill.system {
    background: rgba(107, 114, 128, 0.12);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.25);
}

.user-types-cell {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.user-type-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.user-type-tag.owner {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.25);
}

.user-type-tag.customer {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.user-type-tag.employee {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.user-roles-cell {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.user-role-badge {
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    background: var(--bg-overlay);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.user-customer-cell,
.user-employee-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-code-badge {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
}

.user-points-badge {
    font-size: 10px;
    color: #10b981;
    font-weight: 600;
}

.user-role-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.table-date {
    font-size: 12px;
    color: var(--text-muted);
}

.table-muted-text {
    color: var(--text-muted);
    font-size: 13px;
}

.group-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.group-count-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

/* ==========================================================================
   REMASTERED USER VIEW MODAL (UX / UI ELEGANTE)
   ========================================================================== */
.user-view-modal-card {
    width: 95vw;
    max-width: 760px;
    max-height: 90vh;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: userModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes userModalPop {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.user-view-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    background: var(--bg-overlay);
}

.user-view-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.user-view-avatar-wrap {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}

.user-view-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
}

.user-view-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 700;
    color: var(--color-primary);
}

.user-view-status-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2.5px solid var(--bg-card);
}

.user-view-status-dot.dot-active {
    background: #10b981;
}

.user-view-status-dot.dot-inactive {
    background: #ef4444;
}

.user-view-identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.user-view-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-view-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    line-height: 1.25;
}

.user-view-id-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.user-view-username {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.user-view-badges-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.user-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.user-pill.pill-success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

.user-pill.pill-muted {
    background: rgba(107, 114, 128, 0.12);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.28);
}

.user-pill .pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.user-pill .dot-success {
    background: #10b981;
}

.user-pill .dot-muted {
    background: #9ca3af;
}

.user-pill.pill-origin-google {
    background: rgba(66, 133, 244, 0.1);
    color: var(--text-main);
    border: 1px solid rgba(66, 133, 244, 0.3);
}

.user-pill.pill-origin-web {
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.user-pill.pill-origin-pos {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.user-pill.pill-origin-system {
    background: rgba(107, 114, 128, 0.12);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.user-pill.pill-verify-verified {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.user-pill.pill-verify-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.user-pill.pill-verify-guest {
    background: rgba(107, 114, 128, 0.12);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.user-pill.pill-role {
    font-size: 10px;
    letter-spacing: 0.2px;
}

.user-pill.pill-owner {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.28);
}

.user-pill.pill-customer {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

.user-pill.pill-employee {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.28);
}

.user-view-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s ease;
}

.user-view-close-btn:hover {
    background: var(--bg-card);
    color: var(--text-main);
}

.user-view-body {
    padding: 20px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.user-section-card {
    background: var(--bg-overlay);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.user-section-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-section-icon {
    color: var(--color-primary);
}

.user-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0;
}

.user-section-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

/* Verificación */
.user-verify-banner {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 10px;
}

.user-verify-banner.verified {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.user-verify-banner.guest {
    background: rgba(107, 114, 128, 0.08);
    border: 1px solid rgba(107, 114, 128, 0.25);
}

.user-verify-banner.pending {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.user-verify-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-verify-icon-wrap.verified {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.user-verify-icon-wrap.guest {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}

.user-verify-icon-wrap.pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.user-verify-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.user-verify-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.user-verify-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.user-verify-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

.user-verify-deadline-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.2);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.user-verify-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.btn-send-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s ease;
}

.btn-send-code:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.2);
}

.btn-send-code:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.user-verify-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-code-input {
    width: 120px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
    outline: none;
    transition: border-color 0.15s ease;
}

.user-code-input:focus {
    border-color: #10b981;
}

.btn-confirm-code {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: #10b981;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s ease;
}

.btn-confirm-code:hover:not(:disabled) {
    background: #059669;
}

.btn-confirm-code:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Detalles de Cuenta */
.user-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.user-detail-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-detail-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.user-copy-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s ease;
}

.user-copy-btn:hover {
    background: var(--bg-overlay);
    color: var(--text-main);
}

.user-detail-value-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.user-detail-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    word-break: break-all;
}

/* Roles */
.user-roles-container {
    padding: 2px 0;
}

.user-roles-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.user-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
}

.user-role-chip-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

.user-empty-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

/* Métricas Comercial / Laboral */
.user-metrics-triplet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.user-metrics-four {
    grid-template-columns: repeat(4, 1fr);
}

.user-metric-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-metric-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.user-metric-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.user-metric-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.user-metric-value.code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}

.user-metric-value.highlight {
    color: #10b981;
}

.user-metric-icon-highlight {
    color: #10b981;
}

.user-metric-icon-currency {
    color: var(--text-muted);
}

/* Footer Modal */
.user-view-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-overlay);
}

.user-footer-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.btn-user-view-close {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.15s ease;
}

.btn-user-view-close:hover {
    background: var(--bg-overlay);
    border-color: rgba(99, 102, 241, 0.4);
}

/* ==========================================================================
   RESPONSIVE DESIGN (MÓVIL <= 768px Y <= 480px)
   ========================================================================== */
@media (max-width: 768px) {
    .users-container {
        padding: 12px;
    }

    .users-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .users-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 12px;
    }

    .users-kpi-card {
        padding: 12px 10px 10px 12px;
        gap: 6px;
        border-radius: 10px;
    }

    .users-kpi-value {
        font-size: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .users-kpi-bottom {
        gap: 6px;
    }

    .users-kpi-icon-mini {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .users-kpi-icon-mini svg {
        width: 12px;
        height: 12px;
    }

    .users-kpi-label {
        font-size: 11px;
    }

    .users-quick-indicators {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 16px;
    }

    .users-indicator-chip {
        font-size: 11px;
        padding: 6px 10px;
        justify-content: flex-start;
    }

    /* Modal Mobile */
    .user-view-modal-card {
        max-height: 94vh;
        width: 96vw;
        border-radius: 12px;
    }

    .user-view-header {
        padding: 14px 16px;
    }

    .user-view-avatar-wrap {
        width: 48px;
        height: 48px;
    }

    .user-view-avatar-fallback {
        font-size: 16px;
    }

    .user-view-name {
        font-size: 16px;
    }

    .user-view-body {
        padding: 14px 16px;
        gap: 12px;
    }

    .user-details-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .user-metrics-triplet,
    .user-metrics-four {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .user-view-footer {
        padding: 12px 16px;
    }

    .user-verify-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .user-verify-form {
        width: 100%;
    }

    .user-code-input {
        flex: 1;
        width: 100%;
    }

    .btn-confirm-code {
        flex: 1;
        justify-content: center;
    }

    .btn-send-code {
        width: 100%;
        justify-content: center;
    }
}

/* ── USERS FILTERS STYLES ── */
.users-filters-container {
  margin-bottom: 20px;
}

.users-search-bar-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 0;
}

.users-search-bar-row.open {
  margin-bottom: 12px;
}

.users-search-input-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
}

.users-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.users-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px 10px 38px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  font-size: 14px;
  height: 42px;
  transition: border-color 0.2s ease;
}

.users-search-input:focus {
  border-color: var(--color-primary);
}

.users-filter-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: 0.2s;
  font-weight: 500;
  height: 42px;
  box-sizing: border-box;
  font-size: 14px;
  flex-shrink: 0;
}

.users-filter-toggle-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.users-filter-badge {
  background: #3b82f6;
  color: #fff;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.users-filter-toggle-btn.active .users-filter-badge {
  background: #ffffff;
  color: var(--color-primary);
}

.users-filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  background: var(--bg-card);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  margin-top: 10px;
  animation: fadeIn 0.2s ease;
}

.users-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.users-filter-group label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.users-filter-group select,
.users-filter-group input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  font-size: 13.5px;
  height: 40px;
  transition: border-color 0.2s;
}

.users-filter-actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.users-filter-clear-btn {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: 0.2s;
  font-weight: 500;
  font-size: 13px;
  box-sizing: border-box;
}

.users-filter-clear-btn:hover {
  color: var(--color-danger);
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.05);
}

@media (max-width: 580px) {
  .users-filters-panel {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 12px !important;
  }
}


/* 🔥 modal */
.modal-confirm {
  background: var(--bg-card);
  padding: 20px;
  border-radius: 12px;
  width: 320px;
  border: 1px solid var(--border-color);
  text-align: center;
  animation: pop 0.2s ease;
}

.modal-confirm h3 {
  margin-bottom: 10px;
}

.modal-confirm p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 15px;
}

/* 🔥 botones */
.modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.btn-cancel {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.btn-danger {
  background: var(--color-danger);
  border: none;
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

/* 🔥 animaciones */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}


/* Fix Dropdown Clipping for all tables */
.table-wrapper:focus-within {
  overflow: visible !important;
}
.table-responsive:focus-within {
  overflow: visible !important;
}

.bundles-table:focus-within {
  overflow: visible !important;
}
table:focus-within {
  overflow: visible !important;
}
/*  CONTENEDOR */
.roles-container {
  padding: 20px;
  font-family: "Segoe UI", sans-serif;
  color: var(--text-main);
}

/*  HEADER */
.roles-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.roles-title {
  font-size: 24px;
  font-weight: 600;
}

/*  BOTN PRINCIPAL */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

/*  TABLA */
.roles-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.roles-table th {
  background: var(--bg-card);
  text-align: left;
  padding: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 13px;
}

.roles-table td {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-main);
}

.roles-table tr:hover {
  background: var(--bg-overlay);
}

/*  BADGE PARA ROLES */
.badge-role {
  background: rgba(168,85,247,0.15);
  color: #c084fc;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

/*  BOTONES */
.btn-edit {
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.3);
  padding: 6px 10px;
  margin-right: 5px;
  border-radius: 6px;
  color: var(--color-warning);
  cursor: pointer;
}

.btn-edit:hover {
  background: rgba(245,158,11,0.25);
}

.btn-delete {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--color-danger);
  cursor: pointer;
}

.btn-delete:hover {
  background: rgba(239,68,68,0.25);
}

/*  MODAL (MISMO) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.7);

  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: var(--bg-card);
  color: var(--text-main);
  padding: 25px;
  border-radius: 12px;
  width: 400px;
  border: 1px solid var(--border-color);
}

/*  FORM */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.form-group label {
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--text-muted);
}

.form-group input {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-main);
  color: var(--text-main);
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/*  ACTIONS */
.form-actions {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-main);
}

/*  GRID MS LIMPIO */
.permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 5px;
}

/*  CARD DE PERMISO */
.permission-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.permission-card:hover {
  background: var(--bg-overlay);
  transform: translateY(-1px);
}

/*  ACTIVO */
.permission-card.active {
  border-color: var(--color-primary);
  background: rgba(37, 99, 235, 0.15);
}

/*  TEXTO */
.permission-name {
  font-size: 13px;
  color: var(--text-main);
}

/*  SWITCH BASE */
.switch {
  width: 38px;
  height: 20px;
  background: var(--bg-card);
  border-radius: 999px;
  position: relative;
  transition: background 0.25s ease;
}

/*  CRCULO */
.switch-circle {
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.25s ease;
}

/*  ESTADO ON */
.switch.on {
  background: var(--color-primary);
}

.switch.on .switch-circle {
  transform: translateX(18px);
}






/* =========================================
   ROLES HEADER
========================================= */
.roles-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.roles-header-title-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.roles-header-icon-box {
  color: var(--color-primary);
  display: flex;
  justify-content: center;
  align-items: center;
}

.roles-header-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text-main);
}

.roles-header-subtitle {
  color: var(--text-muted);
  margin: 4px 0 0 0;
  font-size: 14px;
}

.roles-header-actions .btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .roles-header-container {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .roles-header-title-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .roles-header-actions .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================
   ROLES GRID & CARDS
========================================= */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.role-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.role-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.role-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  text-transform: capitalize;
}

.role-card-badge-container {
  margin-top: 8px;
}

.role-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.role-badge-employee {
  background: var(--color-primary);
  color: white;
}

.role-badge-customer {
  background: #10b981;
  color: white;
}

.role-badge-general {
  background: var(--bg-input);
  color: var(--text-muted);
}

.role-card-actions {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 10;
}

.role-action-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  transition: 0.2s;
}

.role-action-btn.edit:hover {
  color: var(--color-primary);
}

.role-action-btn.delete:hover {
  color: #ef4444;
}

.role-card-stats {
  display: flex;
  gap: 12px;
  margin-top: auto;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  position: relative;
  z-index: 2;
}

.role-stat-box {
  flex: 1;
  background: var(--bg-input);
  padding: 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.role-stat-icon {
  padding: 8px;
  border-radius: 8px;
  display: flex;
}

.role-stat-icon.users {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.role-stat-icon.perms {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.role-stat-number {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1;
}

.role-stat-label {
  font-size: 12px;
  color: var(--text-muted);
}

.role-card-bg-blob {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 40px;
  opacity: 0.1;
  border-radius: 50%;
  transform: scale(5);
  pointer-events: none;
}

.role-card-bg-blob.employee {
  background: var(--color-primary);
}

.role-card-bg-blob.customer {
  background: #10b981;
}

.role-card-bg-blob.general {
  background: var(--border-color);
}

/* =========================================
   CONFIRM DELETE MODAL
========================================= */
.modal-confirm-overlay {
  z-index: 1000;
}

.modal-confirm {
  background: var(--bg-card);
  padding: 32px;
  border-radius: 24px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--border-color);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: scaleIn 0.3s ease;
}

.modal-confirm-icon-box {
  background: #fef2f2;
  color: #ef4444;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
}

.modal-confirm-title {
  margin: 0 0 12px 0;
  color: var(--text-main);
  font-size: 24px;
  font-weight: 700;
}

.modal-confirm-text {
  margin: 0 0 24px 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.modal-confirm-actions {
  display: flex;
  gap: 12px;
}

.modal-confirm-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.modal-confirm-btn.cancel {
  background: var(--bg-input);
  color: var(--text-main);
}

.modal-confirm-btn.cancel:hover {
  background: var(--border-color);
}

.modal-confirm-btn.confirm {
  background: #ef4444;
  color: white;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.modal-confirm-btn.confirm:hover {
  transform: translateY(-2px);
}

/* =========================================
   ROLE FORM MODAL
========================================= */
.role-form-overlay {
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
}

.role-form-modal {
  background: var(--bg-card);
  border-radius: 24px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: scaleIn 0.3s ease;
}

.role-form-header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.role-form-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
}

.role-form-close-btn {
  background: var(--bg-input);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: 0.2s;
}

.role-form-close-btn:hover {
  background: #ef4444;
  color: white;
}

.role-form-body {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
}

.role-form-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.role-form-group {
  margin: 0;
}

.role-form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-main);
  font-size: 14px;
}

.role-form-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}

.role-form-input:focus {
  border-color: var(--color-primary);
}

.role-form-perms-section {
  border-top: 1px solid var(--border-color);
  padding-top: 32px;
}

.role-form-perms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.role-form-perms-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.role-form-perms-count {
  background: var(--color-primary);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.role-form-perms-groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.role-perm-group-card {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.role-perm-group-header {
  background: var(--bg-input);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.role-perm-group-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.role-perm-group-toggle {
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.role-perm-group-toggle.select {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.role-perm-group-toggle.select:hover {
  background: rgba(16, 185, 129, 0.2);
}

.role-perm-group-toggle.deselect {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.role-perm-group-toggle.deselect:hover {
  background: rgba(239, 68, 68, 0.2);
}

.role-perm-items-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.role-perm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.role-perm-item:hover {
  border-color: #94a3b8;
}

.role-perm-item.selected {
  background: rgba(59, 130, 246, 0.05);
  border-color: var(--color-primary);
}

.role-perm-item.selected:hover {
  border-color: var(--color-primary);
}

.role-perm-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--text-muted);
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
}

.role-perm-item.selected .role-perm-checkbox {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.role-perm-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
  transition: all 0.2s;
}

.role-perm-item.selected .role-perm-label {
  color: var(--text-main);
  font-weight: 600;
}

.role-form-footer {
  padding: 24px 32px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  background: var(--bg-input);
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

.role-form-btn {
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-form-btn.cancel {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.role-form-btn.cancel:hover {
  background: var(--border-color);
}

.role-form-btn.submit {
  padding: 12px 32px;
  background: var(--color-primary);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.role-form-btn.submit:hover {
  transform: translateY(-2px);
}

/* Modal Responsiveness */
@media (max-width: 768px) {
  .role-form-inputs-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .role-form-modal {
    max-height: 95vh;
  }

  .role-form-header {
    padding: 16px 20px;
  }

  .role-form-body {
    padding: 16px 20px;
  }

  .role-form-perms-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .role-form-perms-section {
    padding-top: 24px;
  }

  .role-form-perms-groups {
    gap: 16px;
  }

  .role-perm-group-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .role-form-footer {
    padding: 16px 20px;
    flex-direction: column-reverse;
    gap: 12px;
  }

  .role-form-btn {
    width: 100%;
    justify-content: center;
  }

  .role-perm-items-grid {
    grid-template-columns: 1fr;
  }
}


.permissions-container {
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease;
  font-family: "Segoe UI", sans-serif;
  color: var(--text-main);
}

.permissions-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.permissions-header-title-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.permissions-header-icon-box {
  color: var(--color-primary);
  display: flex;
  justify-content: center;
  align-items: center;
}

.permissions-header-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.5px;
}

.permissions-header-subtitle {
  margin: 4px 0 0 0;
  color: var(--text-muted);
  font-size: 15px;
}

.permissions-loading {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.permissions-groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.perm-group-card {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.perm-group-header {
  background: var(--bg-input);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.perm-group-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.perm-group-count {
  background: var(--color-primary);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.perm-items-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.perm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: transparent;
  transition: all 0.2s;
}

.perm-item:hover {
  background: var(--bg-overlay);
  border-color: var(--color-primary);
}

.perm-item-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.perm-item-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
}

@media (max-width: 768px) {
  .permissions-container {
    padding: 16px;
  }

  .permissions-header-container {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .permissions-header-title-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .perm-group-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .perm-items-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================
    PRODUCTS CONTAINER
========================= */

.products-container {
  padding: 20px;
  font-family: "Segoe UI", sans-serif;
  color: var(--text-main);
}

/* =========================
   HEADER
========================= */
 
.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 20px;
  padding: 12px 16px;

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;

  backdrop-filter: blur(8px);
}

.products-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-main);
}

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

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);

  border: none;
  padding: 10px 14px;
  border-radius: 8px;

  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
  transition: 0.2s ease;

  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* =========================
   TABLA PRODUCTS
========================= */

.products-table {
  width: 100%;
  border-collapse: collapse;

  background: var(--bg-card);
  border-radius: 10px;

  overflow: hidden;
  border: 1px solid var(--border-color);
}

.products-table th {
  background: var(--bg-card);
  text-align: left;
  padding: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.products-table td {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
}

.products-table tr:hover {
  background: var(--bg-overlay);
}

/* =========================
   IMAGEN PRODUCTO
========================= */

.product-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;

  -o-object-fit: cover;

     object-fit: cover;
  border: 1px solid var(--border-color);
}

/* =========================
   BOTONES ACCIN
========================= */

.btn-edit {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);

  padding: 6px 10px;
  margin-right: 5px;

  border-radius: 6px;
  color: var(--color-warning);

  cursor: pointer;
  font-size: 13px;
  transition: 0.2s ease;
}

.btn-edit:hover {
  background: rgba(245, 158, 11, 0.25);
  transform: translateY(-1px);
}

.btn-delete {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);

  padding: 6px 10px;
  border-radius: 6px;

  color: var(--color-danger);
  cursor: pointer;
  font-size: 13px;

  transition: 0.2s ease;
}

.btn-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}

/* =========================
   MODAL (REUTILIZA USERS STYLE)
========================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  padding: 20px;
  box-sizing: border-box;
}

.modal {
  background: var(--bg-card);
  color: var(--text-main);
  width: 95%;
  max-width: 1000px;
  max-height: 90vh;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 var(--border-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal h2 {
  padding: 24px 30px;
  font-size: 24px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  background: transparent;
  margin: 0;
  letter-spacing: 0.5px;
}

/* =========================
   FORM GRID
========================= */

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;

  padding: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {

  margin-bottom: 8px;

  font-size: 11px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.6px;

  color: var(--text-muted);
}

.variant-card .form-grid {
  padding: 0;
  margin-top: 18px;
}

.variant-card + .variant-card {
  margin-top: 24px;
}



.simple-card,
.variant-card {

  position: relative;
  overflow: visible;
}

.simple-card::before,
.variant-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;
  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--border-color),
      transparent
    );
}



.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  box-sizing: border-box;
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.form-group textarea {
  min-height: 120px;
  padding: 16px;
  resize: vertical;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  background: var(--bg-overlay);
  border-color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: var(--bg-overlay);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* =========================
   MODAL ACTIONS
========================= */

.modal-actions {
  display: flex;
  justify-content: flex-end;

  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
  gap: 10px;
}

.modal-actions button {
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.modal-actions .btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.modal-actions .btn-secondary {
  background: var(--color-secondary);
  color: var(--text-main);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .products-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* =========================
    FILTERS PANEL (ESTILO USERS STYLE)
========================= */

.filters-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;

  margin-bottom: 15px;
  padding: 12px;

  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border-color);

  backdrop-filter: blur(8px);
}

/* inputs y selects consistentes */
.filters-bar input,
.filters-bar select {
  padding: 9px 12px;
  border-radius: 8px;
  box-sizing: border-box;

  background: var(--bg-main);
  border: 1px solid var(--border-color);

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

/* focus igual que users */
.filters-bar input:focus,
.filters-bar select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

/* hover suave */
.filters-bar input:hover,
.filters-bar select:hover {
  border-color: var(--text-muted);
}

/* =========================
    FILTROS EN GRUPO (opcional PRO)
========================= */

.filters-group {
  display: flex;
  gap: 8px;
  align-items: center;

  padding: 6px 10px;
  background: var(--bg-overlay);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

/* labels opcionales si agregas filtros avanzados */
.filters-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 4px;
}

/* =========================
    BOTN RESET FILTROS (recomendado)
========================= */

.btn-filter-reset {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);

  color: var(--color-danger);
  padding: 8px 12px;
  border-radius: 8px;

  font-size: 12px;
  cursor: pointer;

  transition: 0.2s ease;
}

.btn-filter-reset:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}

/* =========================
    RESPONSIVE
========================= */

@media (max-width: 768px) {
  .filters-bar {
    flex-direction: column;
    gap: 8px;
  }

  .filters-bar input,
  .filters-bar select {
    width: 100%;
  }
}

/* =========================
    BULK ACTIONS BAR
========================= */

.bulk-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-secondary, var(--bg-card));
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid var(--border-color);
  gap: 15px;
  flex-wrap: wrap;
}

.bulk-actions-left {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.bulk-actions-count {
  font-weight: 600;
  color: var(--color-primary);
}

.bulk-actions-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
}

.bulk-actions-right {
  display: flex;
}

.btn-danger-bulk {
  background: #ff4d4f;
  color: var(--text-main);
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: 0.2s ease;
}

.btn-danger-bulk:hover {
  background: #ff7875;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .bulk-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .bulk-actions-left {
    justify-content: center;
  }

  .bulk-actions-divider {
    display: none;
  }
  
  .bulk-actions-right {
    justify-content: center;
  }

  .btn-danger-bulk {
    width: 100%;
  }
}

.product-thumb {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumb img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* =========================
   LAYOUT PRINCIPAL
========================= */
.product-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

/* =========================
   IMAGEN
========================= */
.product-image-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================
   UPLOAD BOX 1:1
========================= */
.image-upload-box {
  width: 100%;
  aspect-ratio: 1 / 1;

  border: 2px dashed var(--border-color);
  border-radius: 16px;

  background: var(--bg-overlay);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  overflow: hidden;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3);
}

.image-upload-box:hover {
  border-color: var(--color-primary);
  background: var(--bg-overlay);
  transform: translateY(-2px);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(96, 165, 250, 0.15);
}

.image-upload-box input {
  display: none;
}

.image-upload-box span {
  color: var(--text-muted);
}

.image-upload-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* =========================
   FORM RIGHT
========================= */
.product-form-right {
  background: transparent;
}






/* =========================================================
    VARIANT MODE SELECTOR
========================================================= */

.variant-mode-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variant-mode-selector label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.variant-mode-selector select {
  min-width: 180px;

  padding: 10px 12px;

  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

.variant-mode-selector select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}


/* =========================================================
   SHARED FORM CONTAINERS
========================================================= */

.simple-mode-container,
.variant-card {

  background: var(--bg-overlay);

  border: 1px solid var(--border-color);
  border-radius: 18px;

  padding: 24px;

  backdrop-filter: blur(10px);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.25);

  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;

  animation: fadeIn 0.2s ease;
}

.simple-mode-container:hover,
.variant-card:hover {

  border-color: var(--border-color);

  box-shadow:
    0 14px 40px rgba(0,0,0,0.32);
}
/* =========================================================
   HEADER
========================================================= */

.simple-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 24px;
}

.simple-mode-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);

  margin-bottom: 4px;
}

.simple-mode-description {
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================
   GRID
========================================================= */

.simple-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;

  margin-bottom: 20px;
}

/* =========================================================
   CARD
========================================================= */

.simple-card {

  background: var(--bg-card);

  border: 1px solid var(--border-color);
  border-radius: 14px;

  padding: 20px;

  transition: 0.2s ease;
}

.simple-card:hover {
  border-color: var(--border-color);
}

.simple-card h4 {
  margin: 0 0 18px 0;

  font-size: 15px;
  font-weight: 600;

  color: var(--color-primary);
}

.simple-card label {
  display: block;

  margin-bottom: 8px;

  font-size: 12px;
  color: var(--text-muted);
}

/* =========================================================
   SELECTS
========================================================= */

.simple-card select,
.simple-card input,
.simple-card textarea {

  width: 100%;

  padding: 11px 12px;

  background: var(--bg-main);

  border: 1px solid var(--border-color);
  border-radius: 10px;

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

.simple-card select:focus,
.simple-card input:focus,
.simple-card textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}

/* =========================================================
   MULTISELECT
========================================================= */

.simple-multiselect {
  min-height: 180px;

  padding: 10px !important;

  overflow-y: auto;
}

.simple-multiselect option {

  padding: 10px;
  margin-bottom: 4px;

  border-radius: 8px;

  background: transparent;
  color: var(--text-main);

  transition: 0.15s ease;
}

.simple-multiselect option:checked {
  background: var(--color-primary);
  color: var(--color-primary-text);
}


/* =========================
   SELECTOR CHIPS
========================= */

.selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.selector-chip {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;

  border-radius: 14px;
  border: 1px solid var(--border-color);

  background: var(--bg-input);
  color: var(--text-main);

  cursor: pointer;
  transition: .18s ease;

  font-size: 13px;
  font-weight: 500;
}

.selector-chip:hover {
  transform: translateY(-1px);

  background: var(--bg-overlay);
  border-color: var(--border-color);
}

.selector-chip.active {
  background:
    var(--bg-overlay);

  border-color:
    var(--bg-overlay);

  color: var(--color-primary-hover);

  box-shadow:
    0 0 0 1px var(--bg-overlay);
}

.selector-dot {
  width: 14px;
  height: 14px;

  border-radius: 999px;

  border: 2px solid
    var(--border-color);

  flex-shrink: 0;
}

/* =========================================================
   GLOBAL ATTRIBUTES GRID
========================================================= */

.simple-attributes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}


/* =========================================================
   GLOBAL CONFIG FIELDS
========================================================= */

.simple-global-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.simple-global-field label {

  font-size: 11px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.6px;

  color: var(--text-muted);
}

.simple-global-field select,
.simple-global-field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.simple-global-field select:hover,
.simple-global-field input:hover {
  border-color: var(--border-color);
}

.simple-global-field select:focus,
.simple-global-field input:focus {

  border-color: var(--color-primary);

  box-shadow:
    0 0 0 3px rgba(37,99,235,0.16),
    0 10px 24px rgba(37,99,235,0.12);

  transform: translateY(-1px);
}






/* =========================================================
   SUMMARY
========================================================= */

.simple-summary {
  margin-top: 24px;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 14px;
  padding: 22px;
}

.simple-summary h4 {
  margin: 0 0 20px 0;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 600;
}

.simple-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.simple-summary-item {

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.simple-summary-label {

  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.simple-summary-value {

  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  word-break: break-word;
}

/* =========================================================
   GENERATE BUTTON
========================================================= */

.simple-generate-btn {

  margin-top: 24px;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-hover)
  );

  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.simple-generate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(37,99,235,0.35);
}

/* =========================================================
   GENERATED COUNT
========================================================= */

.generated-count {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================
   ADVANCED VARIANT CARD
========================================================= */


.simple-card h4,
.variant-card h4 {

  margin: 0 0 18px 0;

  font-size: 15px;
  font-weight: 600;

  color: var(--color-primary);

  letter-spacing: 0.2px;
}

/* =========================================================
   TEXTAREA
========================================================= */

.form-group textarea {
  width: 100%;
  padding: 12px;
  resize: vertical;
  border-radius: 10px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-family: inherit;
}

.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* =========================================================
   FORM ACTIONS
========================================================= */

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 25px;
  margin-top: 30px;
  border-top: 1px solid var(--border-color);
}

.btn-secondary {

  background: var(--color-secondary);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s ease;
}

.btn-secondary:hover {
  background: var(--color-secondary);
}

/* =========================================================
   SCROLLBAR
========================================================= */

.simple-multiselect::-webkit-scrollbar,
.modal::-webkit-scrollbar {
  width: 8px;
}

.simple-multiselect::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track {
  background: transparent;
}

.simple-multiselect::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {

  background: var(--bg-overlay);
  border-radius: 20px;
}

.simple-multiselect::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover {
  background: var(--border-color);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .simple-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .simple-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .product-layout {
    grid-template-columns: 1fr;
  }

  .simple-summary-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .simple-mode-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary,
  .simple-generate-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   VARIANT TABS
========================= */

.variant-tabs {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  backdrop-filter: blur(8px);
}

.variant-tab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.variant-tab:hover {
  background: var(--bg-overlay);
  color: var(--text-main);
}

.variant-tab.active {
  background: var(--color-primary);
  color: var(--color-primary-text);
  box-shadow:
    0 0 0 1px var(--border-color),
    0 8px 20px rgba(37,99,235,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
  .variant-tabs {
    width: 100%;
  }
  .variant-tab {
    flex: 1;
    text-align: center;
  }

}

/* =========================================================
   VARIANTS HEADER
========================================================= */

.variants-header {

  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  gap: 24px;

  margin-bottom: 28px;
  padding-bottom: 20px;

  border-bottom: 1px solid var(--border-color);
}

.variants-header-left {

  display: flex;
  flex-direction: column;
  gap: 18px;
}

.variants-header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variants-section-label {

  font-size: 22px;
  font-weight: 700;

  color: var(--text-main);

  letter-spacing: -0.3px;
}

.variants-section-description {

  font-size: 13px;
  color: var(--text-muted);

  max-width: 600px;
}


/* =========================================================
   VARIANTS HEADER
========================================================= */

.variants-header {

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;
  flex-wrap: wrap;

  margin-bottom: 24px;
}

.variants-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.variants-title {

  font-size: 22px;
  font-weight: 700;

  color: var(--text-main);
}

.variants-description {

  font-size: 13px;
  color: var(--text-muted);
}

.variants-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* =========================================================
   VARIANT CARD HEADER
========================================================= */

.variant-card-header {

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 24px;
}

.variant-card-title {

  font-size: 18px;
  font-weight: 600;

  color: var(--text-main);

  margin-bottom: 4px;
}

.variant-card-subtitle {

  font-size: 13px;
  color: var(--text-muted);
}

.variant-badge {

  min-width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,0.25),
      rgba(37,99,235,0.1)
    );

  border: 1px solid rgba(37,99,235,0.25);

  color: var(--color-primary);

  font-size: 13px;
  font-weight: 700;
}

/* =========================================================
   SECTION TITLE
========================================================= */

.variant-section-title {

  margin-top: 28px;
  margin-bottom: 18px;

  font-size: 14px;
  font-weight: 600;

  color: var(--color-primary);

  padding-bottom: 10px;

  border-bottom:
    1px solid var(--border-color);
}







/* =========================================================
    MOBILE FIXES PRODUCT FORM
========================================================= */

@media (max-width: 768px) {

  /* =========================
     MODAL
  ========================= */

  .modal {
    right: 0; bottom: 0;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* =========================
     TITLES
  ========================= */

  .modal h2 {
    font-size: 20px;
    padding: 18px;
  
  color: var(--text-main);}

  .variants-title {
    font-size: 18px;
  }

  .variants-description {
    font-size: 12px;
    line-height: 1.5;
  }

  /* =========================
     VARIANTS HEADER
  ========================= */

  .variants-header {

    flex-direction: column;
    align-items: stretch;

    gap: 18px;

    padding-bottom: 18px;
  }

  .variants-header-info {
    width: 100%;
  }

  /* CONTENEDOR DERECHO */
  .variants-header-actions {

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 12px;
  }

  /* =========================
     BOTN AGREGAR VARIANTE
  ========================= */

  .variants-header-actions .btn-primary {

    width: 100%;
    height: 46px;

    justify-content: center;

    flex-shrink: 0;
  }

  /* =========================
     TABS
  ========================= */

  .variant-tabs {

    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;

    padding: 4px;
    gap: 4px;

    flex-shrink: 0;
  }

  .variant-tab {

    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    font-size: 13px;
    text-align: center;

    white-space: nowrap;
  }

  /* =========================
     FIX MOVIMIENTO FEO
  ========================= */

  .variants-header-actions:has(.variant-tabs) {
    min-height: 104px;
  }

  /* =========================
     FORM ACTIONS
  ========================= */

  .form-actions {

    flex-direction: column-reverse;
    gap: 10px;
  }

  .form-actions button {
    width: 100%;
    height: 46px;
  }

  /* =========================
     VARIANT CARDS
  ========================= */

  .variant-card,
  .simple-mode-container,
  .simple-card {
    padding: 18px;
  }

  /* =========================
     INPUTS
  ========================= */

  .form-group input,
  .form-group select,
  .form-group textarea,
  .simple-global-field input,
  .simple-global-field select {

    height: 48px;
    font-size: 14px;
  }

  .form-group textarea {
    min-height: 100px;
  }

  /* =========================
     SUMMARY
  ========================= */

  .simple-summary {
    padding: 18px;
  }

  .simple-summary-item {
    padding: 14px;
  }

  /* =========================
     IMAGE
  ========================= */

  .product-image-box {
    width: 100%;
  }

  .image-upload-box {
    max-width: 100%;
  }
}





/* =========================================================
    MOBILE COMPACT UI
========================================================= */

@media (max-width: 768px) {

  /* =========================
     MODAL
  ========================= */

  .modal {
    right: 0; bottom: 0;
    border-radius: 0;
  }

  .modal h2 {
    padding: 14px 16px;
    font-size: 17px;
  
  color: var(--text-main);}

  /* =========================
     GENERAL PADDINGS
  ========================= */

  .form-grid {
    padding: 14px;
    gap: 12px;
  }

  .variant-card,
  .simple-mode-container,
  .simple-card,
  .simple-summary {
    padding: 14px;
  }

  /* =========================
     LABELS
  ========================= */

  .form-group label,
  .simple-global-field label,
  .simple-card label,
  .simple-summary-label {

    font-size: 10px;
    margin-bottom: 6px;
  }

  /* =========================
     INPUTS
  ========================= */

  .form-group input,
  .form-group select,
  .form-group textarea,
  .simple-global-field input,
  .simple-global-field select,
  .simple-card input,
  .simple-card select {

    height: 40px;

    padding: 0 12px;

    font-size: 12px;
    border-radius: 10px;
  }

  .form-group textarea {
    min-height: 90px;
    padding: 12px;
  }

  /* =========================
     BUTTONS
  ========================= */

  .btn-primary,
  .btn-secondary,
  .btn-delete,
  .simple-generate-btn {

    height: 40px;

    padding: 0 12px;

    font-size: 12px;
    border-radius: 10px;
  }

  /* =========================
     VARIANT TABS
  ========================= */

  .variant-tabs {
    padding: 3px;
    gap: 3px;
    border-radius: 10px;
  }

  .variant-tab {

    min-height: 38px;

    padding: 0 10px;

    font-size: 11px;
    border-radius: 8px;
  }

  /* =========================
     TITLES
  ========================= */

  .variants-title,
  .simple-mode-title,
  .variant-card-title {

    font-size: 16px;
  }

  .variants-description,
  .simple-mode-description,
  .variant-card-subtitle {

    font-size: 11px;
  }

  .variant-section-title {
    font-size: 13px;
    margin-top: 20px;
    margin-bottom: 14px;
  }

  /* =========================
     SUMMARY
  ========================= */

  .simple-summary-value {
    font-size: 12px;
  }

  /* =========================
     BADGE
  ========================= */

  .variant-badge {

    min-width: 34px;
    height: 34px;

    font-size: 11px;
    border-radius: 10px;
  }

  /* =========================
     IMAGE
  ========================= */

  .image-upload-box {
    border-radius: 10px;
  }

  /* =========================
     ACTIONS
  ========================= */

  .form-actions {
    margin-top: 20px;
    padding-top: 18px;
    gap: 8px;
  }

  /* =========================
     MULTISELECT
  ========================= */

 
}








/* =========================================================
    VARIANTS TABLE REDESIGN (COMPACT PRO)
========================================================= */

.variants-preview-container {
  margin-bottom: 24px;

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 18px;

  overflow: hidden;
  backdrop-filter: blur(12px);
}

/* =========================================================
   HEADER
========================================================= */

.variants-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 18px;

  border-bottom: 1px solid var(--border-color);

  background:
    linear-gradient(
      180deg,
      var(--border-color),
      transparent
    );
}

.variants-preview-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.variants-preview-description {
  font-size: 12px;
  color: var(--text-muted);
}

.variants-preview-count {
  min-width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: var(--bg-overlay);
  border: 1px solid var(--bg-overlay);

  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

/* =========================================================
   TABLE WRAPPER
========================================================= */

.variants-preview-table-wrapper {
  overflow: auto;
  max-height: 420px;
}

/* scrollbar dark */
.variants-preview-table-wrapper::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.variants-preview-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 999px;
}

/* =========================================================
   TABLE
========================================================= */

.variants-preview-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

/* sticky header */
.variants-preview-table thead {
  position: sticky;
  top: 0;
  z-index: 10;

  background: var(--bg-card);
  backdrop-filter: blur(20px);
}

/* =========================================================
   HEADERS
========================================================= */

.variants-preview-table th {
  text-align: left;

  padding: 12px 14px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--text-muted);

  border-bottom:
    1px solid var(--border-color);

  white-space: nowrap;
}

/* =========================================================
   CELLS
========================================================= */

.variants-preview-table td {
  padding: 10px 14px;

  font-size: 12px;
  color: var(--text-main);

  border-bottom:
    1px solid var(--border-color);

  vertical-align: middle;
}

/* zebra */
.variants-preview-table tbody tr:nth-child(even) {
  background: var(--border-color);
}

.variants-preview-table tbody tr {
  transition: .18s ease;
}

.variants-preview-table tbody tr:hover {
  background: rgba(96,165,250,0.06);
}

/* =========================================================
   FIRST COLUMN (#)
========================================================= */

.variants-preview-table td:first-child {
  width: 50px;
  color: var(--text-muted);
  font-weight: 700;
}

/* =========================================================
   SKU STYLE
========================================================= */

.variants-preview-table td:nth-child(2) {
  font-family: monospace;
  font-size: 12px;
  color: var(--color-primary-hover);
  font-weight: 600;
}

/* =========================================================
   PRICE
========================================================= */

.variants-preview-table td:nth-child(6) {
  font-weight: 700;
  color: var(--color-success);
}

/* =========================================================
   ATTRIBUTES CELL
========================================================= */

.variant-attributes-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  max-width: 260px;
}

/* =========================================================
   ATTRIBUTE CHIP
========================================================= */

.variant-attribute-tag {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  padding: 4px 8px;

  border-radius: 999px;

  background: var(--bg-overlay);

  border: 1px solid var(--border-color);

  transition: .15s ease;
}

.variant-attribute-tag:hover {
  background: var(--bg-overlay);
}

.variant-attribute-name {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;

  color: var(--text-muted);
}

.variant-attribute-value {
  font-size: 11px;
  color: var(--text-main);
  font-weight: 600;
}

/* =========================================================
   STATUS
========================================================= */

.variant-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 90px;

  padding: 5px 10px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
}

.variant-status.active {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.22);
  color: var(--color-success);
}

.variant-status.inactive {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.22);
  color: var(--color-danger);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .variants-preview-table-wrapper {
    max-height: 360px;
  }

  .variants-preview-table {
    min-width: 720px;
  }

  .variants-preview-table th,
  .variants-preview-table td {
    padding: 10px;
    font-size: 11px;
  }

  .variant-attributes-cell {
    max-width: 180px;
  }
}



















/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .variants-preview-header {

    padding: 16px;

    align-items: flex-start;
    gap: 12px;
  }

  .variants-preview-title {
    font-size: 16px;
  }

  .variants-preview-description {
    font-size: 11px;
  }
  .variants-preview-table th,
  .variants-preview-table td {
    padding: 12px 14px;
    font-size: 12px;
  }
}

/* =========================================================
    DARK SELECT OPTIONS FIX
========================================================= */

/* Select base */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}

/* Opciones del dropdown */
select option {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  padding: 10px;
}

/* Opcin seleccionada */
select option:checked {
  background: var(--color-primary) !important;
  color: var(--text-main) !important;
}

/* Hover/focus en algunos navegadores */
select option:hover,
select option:focus {
  background: var(--color-secondary) !important;
  color: var(--text-main) !important;
}

/* Fix especfico para tus clases */
.form-group select,
.simple-card select,
.simple-global-field select,
.filters-bar select,
.variant-mode-selector select {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color);
}

/* Flecha del select ms limpia */
.form-group select,
.simple-card select,
.simple-global-field select,
.filters-bar select,
.variant-mode-selector select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px;
  background-repeat: no-repeat;

  padding-right: 40px;
}




/* ==========================================
   SELECTOR HEADER
========================================== */

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.selected-counter {
  padding: 6px 12px;
  border-radius: 999px;

  background: var(--bg-overlay);
  border: 1px solid var(--bg-overlay);

  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

/* ==========================================
   COLORES
========================================== */

.color-selector-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(110px, 1fr));

  gap: 14px;
}

.color-circle {
  border: 1px solid var(--border-color);
  background: var(--bg-input);

  border-radius: 18px;
  padding: 14px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  cursor: pointer;
  transition: .18s ease;
}

.color-circle:hover {
  transform: translateY(-2px);
  background: var(--bg-overlay);
}

.color-circle.active {
  border: 2px solid var(--color-primary);
  background:
    var(--bg-overlay);
}

.color-circle-preview {
  width: 52px;
  height: 52px;

  border-radius: 999px;

  border:
    3px solid var(--border-color);

  box-shadow:
    inset 0 0 0 1px var(--border-color),
    0 8px 20px rgba(0,0,0,.25);
}

.color-circle span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

/* ==========================================
   TALLAS
========================================== */

.size-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.size-chip {
  min-width: 70px;
  height: 46px;

  border-radius: 14px;

  border: 1px solid
    var(--border-color);

  background:
    var(--bg-input);

  color: var(--text-main);
  font-weight: 700;
  font-size: 14px;

  cursor: pointer;
  transition: .18s ease;
}

.size-chip:hover {
  transform: translateY(-2px);
}

.size-chip.active {
  background:
    var(--bg-overlay);

  border: 2px solid var(--color-primary);

  color: var(--color-primary-hover);
}
/* =========================================================
   MOBILE - COLOR SELECTOR COMPACT
========================================================= */

@media (max-width: 768px) {

  /* grid ms compacto */
  .color-selector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* tarjeta pequea */
  .color-circle {
    width: auto;
    min-width: unset;

    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    padding: 8px 10px;
    border-radius: 999px;

    min-height: unset;
  }

  /* sin hover raro en mobile */
  .color-circle:hover {
    transform: none;
  }

  /* crculo pequeo */
  .color-circle-preview {
    width: 18px;
    height: 18px;
    border-width: 2px;
    flex-shrink: 0;

    box-shadow: none;
  }

  /* texto ms pequeo */
  .color-circle span {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* activo ms limpio */
  .color-circle.active {
    border: 1px solid var(--color-primary);
    background: var(--bg-overlay);
  }

  /* contador ms chico */
  .selected-counter {
    padding: 4px 10px;
    font-size: 11px;
  }

  /* tallas tambin compactas */
  .size-selector {
    gap: 8px;
  }

  .size-chip {
    min-width: 52px;
    height: 38px;

    border-radius: 12px;
    font-size: 13px;
    padding: 0 12px;
  }
}











/* ==========================================
   VER MS BUTTON
========================================== */

.see-more-btn {
  width: 100%;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: var(--bg-overlay);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  transition: .2s ease;
}

.see-more-btn:hover {
  background: var(--bg-overlay);
}

/* ==========================================
   MODAL SELECTOR
========================================== */

.selector-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.75);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.selector-modal {
  width: min(850px, 95vw);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  padding: 28px;
}

.selector-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.selector-modal-header button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: var(--bg-overlay);
  color: var(--text-main);
  cursor: pointer;
}

.modal-grid {
  grid-template-columns:
    repeat(auto-fill, minmax(110px, 1fr));
}

.modal-size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.modal-ready-btn {
  margin-top: 24px;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 16px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

/* MOBILE */

@media (max-width: 768px) {
  .selector-modal {
    border-radius: 22px;
    padding: 18px;
  }

  .modal-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .modal-ready-btn {
    position: sticky;
    bottom: 0;
  }
}


.advanced-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.advanced-color-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  cursor: pointer;
  transition: .2s;
  min-width: 180px;
}

.advanced-color-item:hover {
  transform: translateY(-2px);
}

.advanced-color-item.active {
  border: 2px solid var(--color-primary);
  background: rgba(79,140,255,.15);
}

.advanced-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid var(--border-color);
  flex-shrink: 0;
}

.advanced-color-item small {
  opacity: .65;
  font-size: 11px;
}

.advanced-selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


.add-mini-btn{
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border-color);
  border-radius: 12px;

  background:
    linear-gradient(
      180deg,
      var(--bg-overlay),
      var(--bg-overlay)
    );

  color: var(--color-primary-hover);

  cursor: pointer;
  transition: .22s ease;

  flex-shrink: 0;
}

.add-mini-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(96,165,250,.35);

  background:
    linear-gradient(
      180deg,
      var(--bg-overlay),
      var(--bg-overlay)
    );

  box-shadow:
    0 8px 18px var(--bg-overlay);
}

.add-mini-btn:active{
  transform: scale(.96);
}

.create-color-modal{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.create-color-modal input[type="color"]{
  width: 100%;
  height: 70px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
}

/* ==========================================
   PREMIUM CREATE MODALS
========================================== */

.create-modal{
  width: min(560px, 95vw);
  background:
    linear-gradient(
      180deg,
      var(--bg-card),
      var(--bg-main)
    );
  border:
    1px solid var(--border-color);
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,.45);
  animation:
    modalPop .22s ease;
}

@keyframes modalPop{
  from{
    opacity: 0;
    transform:
      translateY(20px)
      scale(.96);
  }
  to{
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

/* HEADER */

.create-modal-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding: 26px 28px;

  border-bottom:
    1px solid var(--bg-overlay);
}

.create-modal-header h2{
  margin: 0;
  color: var(--text-main);
  font-size: 24px;
  font-weight: 800;
}

.create-modal-header p{
  margin-top: 8px;

  color:
    var(--text-muted);

  font-size: 13px;
}

.close-modal-btn{
  width: 42px;
  height: 42px;

  border: none;
  border-radius: 14px;

  background:
    var(--bg-overlay);

  color: var(--text-main);
  cursor: pointer;

  transition: .2s;
}

.close-modal-btn:hover{
  background:
    var(--border-color);

  transform: rotate(90deg);
}

/* BODY */
.create-modal-body{
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* FORM */

.form-field-modern{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field-modern label{
  font-size: 12px;
  font-weight: 700;

  color:
    var(--text-muted);
}

.form-field-modern input,
.form-field-modern textarea{
  height: 54px;
  padding: 0 18px;
  border-radius: 18px;
  border:
    1px solid var(--border-color);
  background:
    var(--bg-input);
  color: var(--text-main);
  font-size: 14px;
  transition: .2s;
}

.form-field-modern textarea{
  height: auto;
  padding: 16px;
  resize: none;
}

.form-field-modern input:focus,
.form-field-modern textarea:focus{
  outline: none;

  border-color:
    var(--bg-overlay);
  box-shadow:
    0 0 0 4px
    var(--bg-overlay);
}

/* COLOR PREVIEW */
.color-preview-card{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 24px;
  background:
    var(--bg-input);
  border:
    1px solid var(--bg-overlay);
}

.color-preview-circle{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border:
    4px solid var(--border-color);
  box-shadow:
    0 12px 30px rgba(0,0,0,.25);
}

.color-preview-info{
  display: flex;
  flex-direction: column;
}

.color-preview-name{
  color: var(--text-main);
  font-size: 20px;
  font-weight: 700;
}

.color-preview-hex{
  color:
    var(--text-muted);

  font-size: 13px;
}

/* COLOR PICKER */

.premium-color-picker{
  width: 100%;
  height: 80px !important;
  border-radius: 20px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
}

/* SIZE */

.size-preview-card{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 24px;
  background:
    var(--bg-input);
  border:
    1px solid var(--bg-overlay);
}

.size-preview-chip{
  min-width: 90px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background:
    var(--bg-overlay);
  border:
    1px solid var(--bg-overlay);
  color: var(--color-primary-hover);
  font-weight: 800;
  font-size: 22px;
}

.size-preview-title{
  color: var(--text-main);
  font-weight: 700;
}

.size-preview-description{
  color:
    var(--border-color);

  font-size: 13px;
}

/* FOOTER */

.create-modal-footer{
  display: flex;
  gap: 12px;

  padding: 24px 28px;

  border-top:
    1px solid var(--bg-overlay);
}

.cancel-btn{
  flex: 1;
  height: 56px;

  border-radius: 18px;
  border: none;

  background:
    var(--bg-overlay);

  color: var(--text-main);
  font-weight: 700;
  cursor: pointer;
}

.save-btn{
  flex: 1;
  height: 56px;

  border-radius: 18px;
  border: none;

  background:
    linear-gradient(
      135deg,
      var(--color-primary),
      var(--color-primary)
    );

  color: var(--color-primary-text);
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 12px 24px
    var(--bg-overlay);

  transition: .2s;
}

.save-btn:hover{
  transform: translateY(-2px);
}

/* MOBILE */

@media(max-width:768px){

  .create-modal{
    border-radius: 26px;
  }

  .create-modal-header{
    padding: 20px;
  }

  .create-modal-body{
    padding: 20px;
  }

  .create-modal-footer{
    padding: 20px;
    flex-direction: column;
  }

  .color-preview-circle{
    width: 58px;
    height: 58px;
  }

  .color-preview-name{
    font-size: 17px;
  }
}

.modal-title-group{
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title-group h3{
  margin: 0;
}




/* ==========================================
   COLOR + TALLA LADO A LADO
========================================== */

.variant-main-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* color ocupa su espacio */
.variant-color-group{
  min-width: 0;
}

/* talla ms compacta */
.variant-size-group{
  display: flex;
  flex-direction: column;
}

/* grid de colores ms ordenado */
.variant-color-group .advanced-color-grid{
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(180px, 1fr));

  gap: 10px;
}

/* tallas ms compactas */
.variant-size-group .advanced-selector-grid{
  gap: 8px;
}

/* mobile: uno debajo del otro */
@media(max-width:768px){

  .variant-main-grid{
    grid-template-columns: 1fr;
  }
}





/* ==========================
   ADD VARIANT CARD
========================== */

.add-variant-card {
  width: 100%;
  border: 2px dashed var(--border-color);
  background: var(--bg-overlay);

  border-radius: 18px;
  padding: 18px 24px;

  margin-top: 18px;

  display: flex;
  align-items: center;
  gap: 18px;

  cursor: pointer;
  transition: all 0.25s ease;

  color: var(--text-main);
}

.add-variant-card:hover {
  border-color: var(--color-primary);
  background: rgba(91, 140, 255, 0.08);

  transform: translateY(-2px);
}

.add-variant-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;

  border-radius: 14px;

  background: rgba(91, 140, 255, 0.15);
  border: 1px solid rgba(91, 140, 255, 0.25);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
  font-weight: 600;

  color: var(--color-primary-hover);
}

.add-variant-content {
  text-align: left;
}

.add-variant-title {
  font-size: 15px;
  font-weight: 600;
}

.add-variant-subtitle {
  font-size: 13px;
  opacity: 0.65;
  margin-top: 2px;
}
/* =========================
   TABLE WRAPPER (MOBILE SCROLL)
========================= */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
}
.table-wrapper::-webkit-scrollbar {
  height: 6px;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--bg-overlay);
  border-radius: 999px;
}

/* =========================================================
   IMAGE GALLERY MODAL
========================================================= */

.modal-overlay.gallery-overlay {
  z-index: 10001;
}

.modal.gallery-modal {
  max-width: 800px;
  width: 90%;
}

.image-dropzone {
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  padding: min(40px, 5vw);
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
  background: var(--bg-overlay);
  transition: all 0.2s ease;
}

.image-dropzone:hover {
  background: var(--bg-overlay);
}

.image-dropzone-icon {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.image-dropzone-text {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-main);
}

.image-dropzone-subtext {
  margin: 5px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  max-height: 300px;
  overflow-y: auto;
}

.gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.gallery-item.main-item {
  border: 2px solid var(--color-primary);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.gallery-item-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.gallery-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: space-between;
  padding: 5px;
}

.gallery-item-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
}

.gallery-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}

/* =========================================================
   WARNING MODAL
========================================================= */

.warning-modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-color);
  overflow: hidden;
  animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.warning-modal-header {
  padding: 24px 24px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.warning-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-danger);
  flex-shrink: 0;
}

.warning-icon-wrapper.warning-yellow {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.warning-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-main);
  font-weight: 600;
}

.warning-modal-body {
  padding: 0 24px 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.warning-modal-footer {
  padding: 16px 24px;
  background: var(--bg-overlay);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--border-color);
}

.warning-btn-cancel {
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.warning-btn-cancel:hover {
  background: var(--bg-overlay);
}

.warning-btn-confirm {
  background: var(--color-danger);
  border: none;
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.warning-btn-confirm:hover {
  background: var(--color-danger-hover);
}

.warning-btn-confirm.btn-yellow {
  background: var(--color-warning);
}

.warning-btn-confirm.btn-yellow:hover {
  background: var(--color-warning-hover);
}












/* =========================
   PRODUCT VIEW MODAL RESPONSIVE
========================= */
.pvm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.pvm-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pvm-tabs {
  display: flex;
  gap: 24px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  overflow-x: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

.pvm-content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.pvm-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pvm-table-container {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow-x: auto;
}

@media (max-width: 768px) {
  .pvm-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
  }
  
  .pvm-header .close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .pvm-header-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }

  .pvm-header-info .pvm-title {
    background: none !important;
    -webkit-text-fill-color: var(--text-main) !important;
    color: var(--text-main) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    white-space: normal !important;
  }

  .pvm-tabs {
    padding: 0 16px;
    gap: 16px;
  }

  .pvm-content-grid {
    grid-template-columns: 1fr;
  }

  .pvm-details-grid {
    grid-template-columns: 1fr;
  }
  
  .pvm-header .pvm-title {
    font-size: 18px;
  }
  
  .products-table-responsive {
    min-width: 800px; /* Prevent squishing on mobile */
  }

  .modal-content {
    padding: 16px !important;
  }

  .modal-actions {
    padding: 16px !important;
  }
}
.pvm-container {
  /* OVERRIDE THEME VARIABLES FOR THIS MODAL AS REQUESTED */
  --color-primary: #000000;
  --color-primary-text: #ffffff;
  --color-primary-hover: #333333;
  --color-secondary: #f3f4f6;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-success: #10b981;
  
  --bg-main: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f9fafb;
  
  --text-main: #000000;
  --text-muted: #000000;
  
  --border-color: #c9c9c9;
  --border-focus: rgba(37, 99, 235, 0.4);
  --bg-overlay: rgba(0, 0, 0, 0.05);
  
  --color-primary-alpha: rgba(0, 0, 0, 0.1); /* Override hardcoded indigo */
  color-scheme: light;

  max-width: 1000px;
  width: 95%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
}

.admin-theme-dark .pvm-container {
  --color-primary: #ffffff;
  --color-primary-text: #000000;       
  --color-primary-hover: #ffffff;
  --color-secondary: #1f2937;     
  --color-danger: #ef4444;        
  --color-danger-hover: #dc2626;
  --color-warning: #f59e0b;       
  --color-warning-hover: #d97706;
  --color-success: #10b981;       
  
  --bg-main: #000000;
  --bg-card: #000000;
  --bg-input: #000000;
  
  --text-main: #ffffff;
  --text-muted: #9ca3af;
  
  --border-color: rgba(255, 255, 255, 0.06);
  --border-focus: rgba(37, 99, 235, 0.4);
  --bg-overlay: rgba(255, 255, 255, 0.05);
  
  --color-primary-alpha: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
}

/* STRIP GRADIENTS AND ENFORCE FLAT COLORS */
.pvm-container .btn-primary,
.pvm-container button.btn-primary,
.pvm-container .btn-secondary,
.pvm-container button.btn-secondary,
.pvm-container [class*="btn-"],
.pvm-container button {
  background-image: none !important;
}

.pvm-container .btn-primary,
.pvm-container button.btn-primary {
  background: var(--color-primary) !important;
  color: var(--color-primary-text) !important;
  border: none !important;
}

.pvm-container .btn-primary:hover,
.pvm-container button.btn-primary:hover {
  background: var(--color-primary-hover) !important;
}

.pvm-image-container {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg-overlay);
  overflow: hidden;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.pvm-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.pvm-title {
  margin: 0 0 4px 0;
  font-size: 24px;
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.2;
}

.pvm-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.pvm-sku {
  font-size: 14px;
  color: var(--text-muted);
}

.pvm-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-color);
}

.pvm-stock {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

/* =========================================
   CUSTOM DROPDOWN (ADD ATTRIBUTE)
   ========================================= */
.custom-dropdown-container {
  position: relative;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 10px;
}

.custom-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px dashed var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.custom-dropdown-trigger:hover {
  background: var(--bg-overlay);
  border-color: var(--color-primary);
}

.dropdown-arrow {
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 100;
  animation: dropdownFadeIn 0.2s ease forwards;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.custom-dropdown-group {
  margin-bottom: 8px;
}

.custom-dropdown-group:last-child {
  margin-bottom: 0;
}

.custom-dropdown-label {
  padding: 4px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.custom-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-main);
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, padding-left 0.15s ease;
}

.custom-dropdown-item:hover {
  background: var(--bg-overlay);
  padding-left: 20px;
}
 
.custom-table-checkbox {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--bg-main);
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color); /* Usamos el borde del tema por defecto */
  border-radius: 4px;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Efecto hover para notar interactividad */
.custom-table-checkbox:hover {
  border-color: var(--color-primary);
}

.custom-table-checkbox::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  /* El fondo del gancho toma el color de texto contrastante */
  background-color: var(--color-primary-text);
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.custom-table-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.custom-table-checkbox:checked::before {
  transform: scale(1);
}
/* =========================
   MODAL RESPONSIVE FIXES
========================= */
.pvm-tabs {
  white-space: nowrap;
}

.pvm-tabs::-webkit-scrollbar {
  height: 6px;
}
.pvm-tabs::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.pvm-tabs button {
  flex-shrink: 0;
  white-space: nowrap;
}

.pvm-modal-body {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  background: var(--bg-main);
}

.pvm-modal-footer {
  background: var(--bg-card);
  padding: 24px 32px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 768px) {
  .pvm-modal-body {
    padding: 16px;
  }
  .pvm-modal-footer {
    padding: 16px;
    flex-direction: column;
  }
  .pvm-modal-footer button {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   PVM UTILITIES
========================= */
.pvm-card {
  background: var(--bg-card);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
}

.pvm-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (max-width: 768px) {
  .pvm-card {
    padding: 16px;
    border-radius: 12px;
  }
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px dashed var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.custom-dropdown-trigger:hover {
  background: var(--bg-overlay);
  border-color: var(--color-primary);
}

.dropdown-arrow {
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 100;
  animation: dropdownFadeIn 0.2s ease forwards;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.custom-dropdown-group {
  margin-bottom: 8px;
}

.custom-dropdown-group:last-child {
  margin-bottom: 0;
}

.custom-dropdown-label {
  padding: 4px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.custom-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-main);
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, padding-left 0.15s ease;
}

.custom-dropdown-item:hover {
  background: var(--bg-overlay);
  padding-left: 20px;
}
 
.custom-table-checkbox {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--bg-main);
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color); /* Usamos el borde del tema por defecto */
  border-radius: 4px;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Efecto hover para notar interactividad */
.custom-table-checkbox:hover {
  border-color: var(--color-primary);
}

.custom-table-checkbox::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  /* El fondo del gancho toma el color de texto contrastante */
  background-color: var(--color-primary-text);
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.custom-table-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.custom-table-checkbox:checked::before {
  transform: scale(1);
}
/* =========================
   MODAL RESPONSIVE FIXES
========================= */
.pvm-tabs {
  white-space: nowrap;
}

.pvm-tabs::-webkit-scrollbar {
  height: 6px;
}
.pvm-tabs::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.pvm-tabs button {
  flex-shrink: 0;
  white-space: nowrap;
}

.pvm-modal-body {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  background: var(--bg-main);
}

.pvm-modal-footer {
  background: var(--bg-card);
  padding: 24px 32px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 768px) {
  .pvm-modal-body {
    padding: 16px;
  }
  .pvm-modal-footer {
    padding: 16px;
    flex-direction: column;
  }
  .pvm-modal-footer button {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   PVM UTILITIES
========================= */
.pvm-card {
  background: var(--bg-card);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
}

.pvm-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (max-width: 768px) {
  .pvm-card {
    padding: 20px 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    box-shadow: none;
  }
  .pvm-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .pvm-stack {
    gap: 0;
  }
  .pvm-content-grid {
    gap: 0;
  }
  .modal.pvm-container {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
  }
  .modal-overlay.pvm-overlay {
    padding: 0 !important;
  }
  .pvm-header {
    padding: 16px 20px;
  }
  .pvm-tabs {
    padding: 0 20px;
  }
  .pvm-modal-body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 20px 24px 20px;
    background: var(--bg-card) !important;
  }
}

/* =========================
   QR PRINT TAB RESPONSIVE
========================= */
.qr-print-container {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.qr-print-config {
  flex: 0 0 340px;
  border-right: 1px solid var(--border-color);
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qr-print-preview {
  flex: 1;
  background: var(--bg-body);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  height: 60vh;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .qr-print-container {
    flex-direction: column;
  }
  .qr-print-config {
    flex: 1 1 auto;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding-right: 0;
    padding-bottom: 20px;
  }
  .qr-print-preview {
    height: 400px;
  }
}

/* MOBILE TABLE ACTIONS DROPDOWN */
@media (max-width: 768px) {
  .actions-col {
    display: none !important;
  }
  
  .hide-on-pc {
    display: inline-block !important;
  }
  .hide-on-mobile {
    display: none !important;
  }
}

/* DESKTOP HIDE ACTIONS DROPDOWN */
@media (min-width: 769px) {
  .hide-on-pc {
    display: none !important;
  }
}

/* DROPDOWN STYLING */
.mobile-actions-dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-toggle {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 50;
  min-width: 160px;
  padding: 4px;
}
.mobile-actions-dropdown:focus-within .dropdown-content,
.mobile-actions-dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}
.dropdown-item:hover {
  background: var(--bg-input);
  color: var(--color-primary);
}





.products-table:focus-within { overflow: visible !important; }

/* ==========================================================================
   PRODUCTS KPI GRID (ESTÁNDAR NORMALIZADO)
   ========================================================================== */
.products-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.products-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.products-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.products-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
}

.products-kpi-card.kpi-total::before { background: #6366f1; }
.products-kpi-card.kpi-active::before { background: #10b981; }
.products-kpi-card.kpi-warning::before { background: #f59e0b; }
.products-kpi-card.kpi-stock::before { background: #3b82f6; }

.products-kpi-top {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.products-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    word-break: break-word;
    white-space: normal;
}

.products-kpi-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.products-kpi-icon-mini {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.products-kpi-card.kpi-total .products-kpi-icon-mini { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.products-kpi-card.kpi-active .products-kpi-icon-mini { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.products-kpi-card.kpi-warning .products-kpi-icon-mini { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.products-kpi-card.kpi-stock .products-kpi-icon-mini { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }

.products-kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 768px) {
    .products-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 16px;
    }

    .products-kpi-card {
        padding: 12px 10px 10px 12px;
        gap: 6px;
        border-radius: 10px;
    }

    .products-kpi-value {
        font-size: 16px;
    }

    .products-kpi-bottom {
        gap: 6px;
    }

    .products-kpi-icon-mini {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .products-kpi-icon-mini svg {
        width: 12px;
        height: 12px;
    }

    .products-kpi-label {
        font-size: 11px;
    }
}



.vox-spinner {
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* =========================
    BUNDLES CONTAINER
========================= */

.bundles-container {
  padding: 20px;
  font-family: "Segoe UI", sans-serif;
  color: var(--text-main);
}

/* =========================
   HEADER
========================= */
 
.bundles-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 20px;
  padding: 12px 16px;

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;

  backdrop-filter: blur(8px);
}

.bundles-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);

  border: none;
  padding: 10px 14px;
  border-radius: 8px;

  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
  transition: 0.2s ease;

  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* =========================
   TABLA BUNDLES
========================= */

.bundles-table {
  width: 100%;
  border-collapse: collapse;

  background: var(--bg-card);
  border-radius: 10px;

  overflow: hidden;
  border: 1px solid var(--border-color);
}

.bundles-table th {
  background: var(--bg-card);
  text-align: left;
  padding: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.bundles-table td {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
}

.bundles-table tr:hover {
  background: var(--bg-overlay);
}

/* =========================
   BOTONES ACCIÓN
========================= */

.btn-edit {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--color-warning);

  padding: 6px 10px;
  margin-right: 5px;

  border-radius: 6px;

  cursor: pointer;
  font-size: 13px;
  transition: 0.2s ease;
}

.btn-edit:hover {
  background: rgba(245, 158, 11, 0.25);
  transform: translateY(-1px);
}

.btn-delete {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--color-danger);

  padding: 6px 10px;
  border-radius: 6px;

  cursor: pointer;
  font-size: 13px;

  transition: 0.2s ease;
}

.btn-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}


.bundle-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 5px;
}

.bundle-item-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--bg-secondary);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.bundle-item-field {
  flex: 1;
}

.bundle-item-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 500;
}

.bundle-item-select {
  width: 100%;
}

.bundle-item-quantity {
  width: 80px;
}

.bundle-item-quantity input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
}

.btn-remove-item {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: none;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-remove-item:hover {
  background: #ef4444;
  color: white;
}

.btn-add-item {
  margin-top: 15px;
  background: var(--bg-secondary);
  color: var(--text-main);
  border: 1px dashed var(--border-color);
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  width: 100%;
  transition: all 0.2s;
  font-weight: 500;
}

.btn-add-item:hover {
  background: var(--bg-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.bundle-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
}


/* =========================
   RESPONSIVE FIXES
========================= */

.hide-on-mobile {
  display: inline;
}

@media (max-width: 768px) {
  .bundles-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  
  .bundles-header-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  
  .bundles-header-actions > * {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .bundles-header-actions button.bundles-create-btn,
  .bundles-header-actions .bundles-refresh-btn,
  .bundles-header-actions button {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  .hide-on-mobile {
    display: none !important;
  }

  .filters-container-inner {
    flex-direction: column;
    gap: 8px !important;
  }

  .filters-container-inner input,
  .filters-container-inner button {
    width: 100%;
    justify-content: center;
  }

  .bulk-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .bulk-actions-left {
    justify-content: center;
  }

  .bulk-actions-divider {
    display: none;
  }
  
  .bulk-actions-right {
    justify-content: center;
  }

  .btn-danger-bulk {
    width: 100%;
  }

  .bundles-table-wrapper {
    overflow-x: auto;
  }
}


/* =========================
   MODAL RESPONSIVE
========================= */

@media (max-width: 768px) {
  .filters-panel {
    grid-template-columns: 1fr !important;
  }
  .filters-panel > div {
    grid-column: span 1 !important;
  }
  
  .bundle-modal-grid {
    grid-template-columns: 1fr !important;
  }

  .bundle-view-summary-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .bundle-view-items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .bundle-view-summary-grid,
  .bundle-view-items-grid {
    grid-template-columns: 1fr !important;
  }
  .bundle-item-details-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================
   BUNDLE MODALS
========================= */

.bundle-modal-content {
  max-width: 1100px;
  width: 95%;
}

#bundle-form-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center !important;
  padding: 24px 32px 24px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: var(--bg-card);
  border-radius: 20px 20px 0 0;
  flex-shrink: 0;
}

#bundle-form-modal .modal-title {
  margin: 0 !important;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  text-align: left;
  line-height: 1 !important;
  display: flex;
  align-items: center;
}

#bundle-form-modal .modal-close-btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  margin-right: -16px; /* Move further right */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#bundle-form-modal .modal-close-btn:hover {
  color: var(--color-danger);
  background: transparent !important;
}

.bundle-view-modal {
  max-width: 800px;
  width: 90%;
}

.flex-wrap-mobile {
  display: flex;
}

/* ========================================
   RESPONSIVE MODAL & BFM CARDS
======================================== */

@media (max-width: 768px) {
  /* #id beats any class/attribute selector from index.css or Carts.css */
  #bundle-form-modal {
    width: 95% !important;
    max-width: 600px !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 12px !important;
    margin: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  
  #bundle-form-modal .bundle-modal-footer {
    width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    align-items: stretch !important;
  }

  #bundle-form-modal .bfm-footer-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
  }

  #bundle-form-modal .bfm-footer-btn {
    flex: 1 !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }
  
  .bundle-form-row-grid {
    grid-template-columns: 1fr !important;
  }
  
  .bundle-modal-overlay {
    padding: 16px !important;
  }

  .flex-wrap-mobile {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .stack-mobile {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #bundle-form-modal .modal-body {
    padding: 16px !important;
    box-sizing: border-box !important;
    flex: 1;
    overflow-y: auto !important;
    width: 100% !important;
  }
  
  #bundle-form-modal * {
    box-sizing: border-box !important;
  }
  
  .form-control {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  
  .bundle-view-items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

}

/* ========================================
   BUNDLE VIEW MODAL - Redesigned
======================================== */

.bundle-view-modal {
  max-width: 850px;
  width: 90%;
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}

/* Header */
.bvm-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--bg-card);
  gap: 12px;
}

.bvm-header-info {
  display: flex;
  gap: 16px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.bvm-header-img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--bg-overlay);
}

.bvm-header-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.bvm-header-text {
  min-width: 0;
  flex: 1;
}

.bvm-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.bvm-name {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--text-main);
  word-break: break-word;
}

.bvm-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.bvm-category {
  margin: 0 0 6px 0;
  color: var(--text-muted);
  font-size: 13px;
}

.bvm-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-main);
}

.bvm-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.2s;
}
.bvm-close-btn:hover {
  color: var(--color-danger);
}

/* Body */
.bvm-body {
  padding: 24px;
  background: var(--bg-body);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

/* KPI Grid */
.bvm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.bvm-kpi-card {
  background: var(--bg-card);
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.bvm-kpi-savings {
  background: var(--color-success-alpha);
  border-color: rgba(16, 185, 129, 0.2);
}

.bvm-kpi-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 6px;
  font-weight: 500;
}

.bvm-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
}

/* Section title */
.bvm-section-title {
  margin: 0 0 14px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

/* Items list - NO wrapper border */
.bvm-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.bvm-item-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: transform 0.2s, box-shadow 0.2s;
}
.bvm-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.bvm-item-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

.bvm-item-img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-overlay);
  flex-shrink: 0;
  border: 1px solid var(--border-color);
}

.bvm-item-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.bvm-item-info {
  flex: 1;
  min-width: 0;
}

.bvm-item-name {
  font-weight: 600;
  color: var(--text-main);
  font-size: 14px;
  margin-bottom: 4px;
  word-break: break-word;
}

.bvm-item-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
}

.bvm-item-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.bvm-item-qty-badge {
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-alpha, rgba(99, 102, 241, 0.1));
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

.bvm-item-financials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-color);
  background: var(--bg-input);
}

.bvm-item-financials > div {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bvm-item-financials > div:not(:last-child) {
  border-right: 1px solid var(--border-color);
}

.bvm-fin-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.bvm-fin-value {
  font-weight: 600;
  color: var(--text-main);
  font-size: 13px;
}

/* Settlement section */
.bvm-settlement-section {
  margin-top: 24px;
}

.bvm-settlement-table-wrap {
  overflow-x: auto;
}

.bvm-settlement-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.bvm-settlement-table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
}

.bvm-settlement-table td {
  padding: 12px;
  font-size: 14px;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
}

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

/* Mobile settlement cards - hidden on desktop */
.bvm-settlement-cards {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.bvm-settlement-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px;
}

.bvm-settlement-card-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text-main);
  font-size: 14px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.bvm-settlement-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.bvm-settlement-card-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ========================================
   RESPONSIVE - BundleViewModal
======================================== */

@media (max-width: 768px) {
  .bundle-view-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh;
    max-height: 100dvh;
    border-radius: 0 !important;
    border: none;
  }

  .bvm-header {
    padding: 16px;
  }

  .bvm-header-img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
  }

  .bvm-name {
    font-size: 16px;
  }

  .bvm-body {
    padding: 16px;
    max-height: calc(100vh - 120px);
  }

  .bvm-kpi-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  .bvm-kpi-value {
    font-size: 17px;
  }

  .bvm-kpi-label {
    font-size: 11px;
  }

  .bvm-item-financials {
    grid-template-columns: repeat(2, 1fr);
  }

  .bvm-item-financials > div:nth-child(2) {
    border-right: none;
  }

  .bvm-item-financials > div:nth-child(1),
  .bvm-item-financials > div:nth-child(2) {
    border-bottom: 1px solid var(--border-color);
  }

  /* Settlement: show cards, hide table */
  .bvm-settlement-table-wrap {
    display: none;
  }

  .bvm-settlement-cards {
    display: flex;
  }
}

@media (max-width: 480px) {
  .bvm-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 16px;
    position: relative;
  }

  .bvm-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--bg-input);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bvm-kpi-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .bvm-kpi-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
  }

  .bvm-kpi-label {
    margin-bottom: 0;
    font-size: 13px;
  }

  .bvm-kpi-value {
    font-size: 18px;
  }

  .bvm-item-top {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
    position: relative;
  }

  .bvm-item-img {
    width: 60px;
    height: 60px;
  }

  .bvm-item-qty-badge {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .bvm-item-meta {
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
  }

  .bvm-item-financials {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 16px;
    background: transparent;
    border-top: 1px dashed var(--border-color);
  }

  .bvm-item-financials > div {
    padding: 0;
    border: none !important;
  }

  .bvm-settlement-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
/* =========================
   BUNDLES TABLE REFACTOR
========================= */
.bt-col-check { width: 40px; }
.bt-col-img { width: 50px; }
.bt-clickable-td { cursor: pointer; }
.bt-cell-name { font-weight: 500; color: var(--text-main); }
.bt-cell-slug { font-size: 12px; color: var(--text-muted); }
.bt-cell-price { display: flex; flex-direction: column; gap: 2px; }
.bt-price-main { font-weight: 600; }
.bt-price-regular { font-size: 11px; color: var(--text-muted); text-decoration: line-through; }
.bt-stock { font-weight: 500; }
.bt-stock-ok { color: var(--color-success); }
.bt-stock-low { color: var(--color-danger); }

/* =========================
   BUNDLES.JSX REFACTOR
========================= */
.bundles-header-actions { display: flex; gap: 10px; }
.bundles-create-btn { padding: 10px 14px; border-radius: 8px; display: flex; align-items: center; gap: 8px; border: none; cursor: pointer; font-weight: 600; }
.bundles-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
  width: 100%;
}

.bundles-kpi-card {
  background: var(--bg-card);
  padding: 16px 16px 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bundles-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3.5px;
  border-radius: 14px 0 0 14px;
}

.bundles-kpi-card.kpi-total::before   { background: #6366f1; }
.bundles-kpi-card.kpi-active::before  { background: #10b981; }
.bundles-kpi-card.kpi-stock::before   { background: #f59e0b; }
.bundles-kpi-card.kpi-revenue::before { background: #8b5cf6; }

.bundles-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.bundles-kpi-top {
  width: 100%;
  min-width: 0;
}

.bundles-kpi-value {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
  letter-spacing: -0.3px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.bundles-kpi-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bundles-kpi-icon-mini {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bundles-kpi-card.kpi-total .bundles-kpi-icon-mini   { background: rgba(99, 102, 241, 0.14); color: #6366f1; }
.bundles-kpi-card.kpi-active .bundles-kpi-icon-mini  { background: rgba(16, 185, 129, 0.14); color: #10b981; }
.bundles-kpi-card.kpi-stock .bundles-kpi-icon-mini   { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }
.bundles-kpi-card.kpi-revenue .bundles-kpi-icon-mini { background: rgba(139, 92, 246, 0.14); color: #8b5cf6; }

.bundles-kpi-title {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.25;
}
.bundles-filters { margin-bottom: 20px; }
.filters-expanded { margin-bottom: 15px; }
.bundles-search-wrapper { flex: 1; position: relative; }
.bundles-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.bundles-search-input { width: 100%; padding: 10px 10px 10px 36px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-main); outline: none; }
.bundles-filter-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border-color); cursor: pointer; transition: 0.2s; font-weight: 500; }
.bundles-filter-toggle:not(.active) { background: var(--bg-card); color: var(--text-main); }
.bundles-filter-toggle.active { background: var(--color-primary); color: #fff; }
.filters-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; background: var(--bg-card); padding: 16px; border-radius: 12px; border: 1px solid var(--border-color); animation: fadeIn 0.2s ease; }
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.filter-select { width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-main); outline: none; }
.filter-group-span-2 { grid-column: span 2; }
.filter-range-inputs { display: flex; gap: 8px; }
.filter-input { width: 50%; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-main); outline: none; }
/* =========================
.bfm-checkbox { width: 22px; height: 22px; cursor: pointer; accent-color: var(--color-primary); margin: 0; }
.bfm-checkbox-label { margin: 0; cursor: pointer; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
.bfm-footer-actions { display: flex; gap: 16px; width: 100%; }
.bfm-footer-btn { flex: 1; padding: 18px; border-radius: 12px; font-weight: 600; font-size: 16px; transition: 0.2s; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.btn-secondary.bfm-footer-btn { border: 2px solid var(--border-color); background: transparent; color: var(--text-main); }
.bfm-submit-btn { border: none; background: var(--color-primary); color: var(--color-primary-text); gap: 8px; }
/* =========================
   BUNDLE VIEW MODAL REFACTOR
========================= */
.status-active { background: var(--color-success-alpha); color: var(--color-success); }
.status-inactive { background: var(--color-danger-alpha); color: var(--color-danger); }
.bvm-container { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.bvm-val-regular { text-decoration: line-through; color: var(--text-muted); }
.bvm-val-success { color: var(--color-success) !important; }
.bvm-empty-msg { color: var(--text-muted); font-size: 14px; margin: 0; }
.bvm-fin-primary { color: var(--color-primary); }
.bvm-fin-danger { color: var(--color-danger); }
.bvm-fin-value-bold { font-weight: 700; }
.bvm-owner-cell { display: flex; align-items: center; gap: 6px; }
.bvm-td-primary { font-weight: 600; color: var(--color-primary); }
.bvm-td-danger { font-weight: 600; color: var(--color-danger); }
.bvm-td-bold { font-weight: 700; }


/* ========================================
   BUNDLE FORM REFACTOR (PREMIUM UX)
======================================== */

.bundle-modal-content, #bundle-form-modal {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  background: var(--bg-card); /* FIXED: use bg-card instead of bg-body */
  width: 95% !important;
  max-width: 1100px !important;
  overflow: hidden !important; /* Keep outer modal hidden, scroll inner body */
}

/* ========================================
   FORM INPUTS STYLES
======================================== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.form-control, .form-group input, .form-group textarea {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}

.form-control:focus, .form-group input:focus, .form-group textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

#bundle-form-modal .bundle-modal-grid {
  display: grid !important; /* Override .modal-body's display: flex */
  grid-template-columns: 1fr 1.2fr !important;
  gap: 32px;
  padding: 32px;
  align-items: start;
  flex: 1;
  overflow-y: auto;
}

.bundle-form-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.bfm-section-title {
  margin: 0 0 24px 0;
  font-size: 18px;
  color: var(--text-main);
  border-bottom: 2px solid var(--bg-overlay);
  padding-bottom: 12px;
  font-weight: 600;
}

.bfm-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.bfm-price-group { position: relative; }
.bfm-price-label { display: flex; justify-content: space-between; width: 100%; margin-bottom: 8px; }
.bfm-savings-text { font-size: 12px; color: var(--color-success); font-weight: 600; background: var(--color-success-alpha); padding: 2px 8px; border-radius: 12px; }

.bfm-price-input-wrapper { position: relative; }
.bfm-reg-price-tag { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-muted); font-weight: 500; }
.bfm-reg-price-tag span { text-decoration: line-through; }

.bfm-margin-box {
  margin-top: 12px;
  padding: 16px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}
.margin-positive { background: var(--color-success-alpha); border: 1px solid rgba(16, 185, 129, 0.2); }
.margin-negative { background: var(--color-danger-alpha); border: 1px solid rgba(239, 68, 68, 0.2); }

.bfm-margin-col { display: flex; flex-direction: column; gap: 4px; }
.bfm-margin-col-right { align-items: flex-end; }
.bfm-margin-lbl { font-size: 12px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.bfm-margin-val { font-size: 14px; font-weight: 600; color: var(--text-main); }
.bfm-margin-val-big { font-size: 18px; font-weight: 700; }

.bfm-optional-label { color: var(--text-muted); font-size: 11px; font-weight: normal; margin-left: 4px; }
.bfm-file-input { padding: 8px; cursor: pointer; border: 2px dashed var(--border-color); background: var(--bg-overlay); transition: all 0.2s; }
.bfm-file-input:hover { border-color: var(--color-primary); background: rgba(99, 102, 241, 0.05); }

/* CUSTOM IMAGE UPLOAD ZONE */
.bfm-custom-upload-zone {
  width: 100%;
  margin-top: 8px;
}
.bfm-hidden-file-input {
  display: none !important;
}

.bfm-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  border: 2px dashed var(--border-color);
  border-radius: 16px;
  background-color: var(--bg-overlay);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-align: center;
  gap: 12px;
}
.bfm-upload-placeholder:hover {
  background-color: rgba(99, 102, 241, 0.05);
  border-color: var(--color-primary);
}
.bfm-upload-icon-wrapper {
  color: var(--text-muted);
  background: var(--bg-body);
  padding: 12px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: all 0.2s;
}
.bfm-upload-placeholder:hover .bfm-upload-icon-wrapper {
  color: var(--color-primary);
  transform: scale(1.1);
}
.bfm-upload-text {
  font-weight: 600;
  color: var(--text-main);
  font-size: 15px;
}
.bfm-upload-subtext {
  font-size: 13px;
  color: var(--text-muted);
}

.bfm-single-image-preview {
  position: relative;
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  aspect-ratio: 1/1; /* 1:1 Square relationship */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: transform 0.2s;
}

.bfm-single-image-preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.bfm-preview-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.2s;
  gap: 8px;
}
.bfm-preview-overlay span {
  font-weight: 600;
  font-size: 14px;
}

.bfm-single-image-preview:hover {
  transform: scale(1.02);
}
.bfm-single-image-preview:hover .bfm-preview-overlay {
  opacity: 1;
}

.bfm-section-desc { font-size: 14px; color: var(--text-muted); margin: 0 0 24px 0; line-height: 1.5; }

/* ITEM CARDS */
.bundle-items-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 550px;
  overflow-y: auto;
  padding-right: 10px;
}
.bundle-items-cards::-webkit-scrollbar { width: 6px; }
.bundle-items-cards::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }

.bfm-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Removed overflow: hidden to prevent dropdown clipping */
}
.bfm-item-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border-color: rgba(99, 102, 241, 0.3);
  /* Removed transform to prevent breaking fixed positioned portals */
}
.bfm-item-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary, #8b5cf6));
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 16px 16px 0 0;
}
.bfm-item-card:hover::before { opacity: 1; }

.bfm-item-remove-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--bg-overlay);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10;
}
.bfm-item-remove-btn:hover {
  background: var(--color-danger);
  color: white;
  border-color: var(--color-danger);
  transform: scale(1.1) rotate(90deg);
}

.bfm-item-header { padding-right: 40px; text-align: left; }
.bfm-item-label {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
}

.bfm-item-body {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.bfm-item-image {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bfm-item-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.bfm-item-image span { font-size: 12px; color: var(--text-muted); }

.bfm-item-details-container {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bfm-item-details-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bfm-item-details-grid {
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.bfm-item-details-grid > div { display: flex; flex-direction: column; gap: 4px; }
.bfm-item-details-grid span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; font-weight: 500; }
.bfm-item-details-grid strong { font-size: 13px; color: var(--text-main); white-space: normal; word-wrap: break-word; font-weight: 600; line-height: 1.3; }
.bfm-item-details-grid strong.text-success { color: var(--color-success); }

.bfm-item-cost {
  background: var(--bg-overlay);
  border: 1px dashed rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bfm-item-cost span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; font-weight: 500; }
.bfm-item-cost strong { font-size: 14px; color: var(--color-danger); font-weight: 700; }

.bfm-item-quantity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed var(--border-color);
  padding-top: 16px;
  margin-top: 4px;
}
.bfm-item-quantity-row label { font-size: 14px; color: var(--text-main); font-weight: 600; margin: 0; }
.bfm-item-quantity-row label span { font-size: 11px; color: var(--text-muted); font-weight: normal; margin-left: 6px; }
.bfm-item-quantity-row input {
  width: 90px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.2s;
}
.bfm-item-quantity-row input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); }
.bfm-item-quantity-row input:disabled { background: var(--bg-overlay); color: var(--text-muted); cursor: not-allowed; border-color: var(--border-color); }

/* ACTIONS */
.bfm-add-actions { display: flex; gap: 12px; margin-top: 12px; align-items: stretch; }
.bfm-add-btn {
  flex: 1;
  margin-top: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 14px;
  border-radius: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.bfm-add-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: rgba(99, 102, 241, 0.05); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.08); }

.bfm-scanner-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--color-primary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.bfm-scanner-btn:hover { border-color: var(--color-primary); background: rgba(99,102,241,0.05); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.1); }

/* FOOTER */
.bundle-modal-footer {
  flex-shrink: 0;
  padding: 16px 12px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.02);
  align-items: stretch;
}

.bfm-checkbox-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: transparent;
  padding: 8px 16px;
  border-radius: 8px;
  margin: 0 auto;
  cursor: pointer;
  transition: all 0.2s;
}
.bfm-checkbox-group:hover { background: rgba(99, 102, 241, 0.05); }
.bfm-checkbox { width: 18px !important; height: 18px !important; cursor: pointer; accent-color: var(--color-primary); margin: 0; transform: scale(1); }
.bfm-checkbox-label { margin: 0; cursor: pointer; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-main); }

.bfm-footer-actions { display: flex; gap: 8px; width: 100%; align-self: stretch; margin: 0; padding: 0; }
.bfm-footer-btn {
  flex: 1 1 0%;
  width: 50%;
  padding: 16px 8px !important;
  height: auto !important;
  min-height: 52px !important;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  letter-spacing: 0.3px;
  line-height: normal;
  margin: 0;
}
.btn-secondary.bfm-footer-btn {
  border: 1px solid var(--border-color) !important;
  background: var(--bg-body) !important;
  color: var(--text-main);
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.btn-secondary.bfm-footer-btn:hover {
  background: var(--bg-overlay) !important;
  border-color: var(--text-muted) !important;
}
.bfm-submit-btn {
  border: none;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, #6366f1));
  color: #fff;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
}
.bfm-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(99, 102, 241, 0.35);
}
.bfm-submit-btn:active {
  transform: translateY(0);
}

/* MODAL RESPONSIVE - BFM cards */
@media (max-width: 768px) {
  #bundle-form-modal {
    width: 95% !important;
    max-width: 600px !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 12px !important;
    margin: auto !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  #bundle-form-modal .bundle-modal-grid { grid-template-columns: 1fr !important; padding: 16px !important; gap: 20px !important; width: 100% !important; box-sizing: border-box !important; }
  #bundle-form-modal .bundle-modal-footer { padding: 16px !important; border-radius: 0 !important; width: 100% !important; box-sizing: border-box !important; align-items: stretch !important; }
  #bundle-form-modal .bfm-footer-actions { width: 100% !important; display: flex !important; flex-direction: row !important; gap: 12px !important; }
  #bundle-form-modal .bfm-footer-btn { flex: 1 !important; min-height: 48px !important; font-size: 15px !important; }
  .bfm-item-card { padding: 12px; }
  
  /* Keep image and details side by side on mobile */
  .bfm-item-body { flex-direction: row; align-items: flex-start; text-align: left; gap: 12px; }
  .bfm-item-header { text-align: left; padding-right: 40px; }
  
  /* Keep X button at the top right properly sized */
  .bfm-item-remove-btn { top: 12px; right: 12px; width: 28px; height: 28px; }
  
  .bfm-item-image { width: 80px; height: 80px; }
  
  /* Make grid 1 column so text has room to wrap */
  .bfm-item-details-grid { grid-template-columns: 1fr; padding: 10px 12px; gap: 8px; }
  .bfm-item-details-grid > div:last-child { grid-column: span 1; }
  
  /* Fix cost box overflow */
  .bfm-item-cost { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; }
}

/* MOBILE TWO COLUMNS KPI */
@media (max-width: 768px) {
  .bundles-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .bundles-kpi-card {
    padding: 12px 10px 10px 12px !important;
    gap: 6px !important;
  }
  .bundles-kpi-value {
    font-size: 16.5px !important;
  }
  .bundles-kpi-bottom {
    gap: 6px !important;
  }
  .bundles-kpi-icon-mini {
    width: 20px !important;
    height: 20px !important;
    border-radius: 5px !important;
  }
  .bundles-kpi-icon-mini svg {
    width: 12px !important;
    height: 12px !important;
  }
  .bundles-kpi-title {
    font-size: 11px !important;
  }
}

/* MOBILE TABLE ACTIONS DROPDOWN */
@media (max-width: 768px) {
  .actions-col {
    display: none !important;
  }
  .hide-on-pc {
    display: inline-block !important;
  }
  .hide-on-mobile {
    display: none !important;
  }
}

/* DESKTOP HIDE ACTIONS DROPDOWN */
@media (min-width: 769px) {
  .hide-on-pc {
    display: none !important;
  }
}

/* DROPDOWN STYLING */
.mobile-actions-dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-toggle {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 50;
  min-width: 160px;
  padding: 4px;
}
.mobile-actions-dropdown:focus-within .dropdown-content,
.mobile-actions-dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}
.dropdown-item:hover {
  background: var(--bg-input);
  color: var(--color-primary);
}



/* Fix Dropdown Clipping */
.table-wrapper:focus-within {
  overflow: visible !important;
}
.bundles-table tr:nth-child(n+3):last-child .dropdown-content,
.bundles-table tr:nth-child(n+3):nth-last-child(2) .dropdown-content,
.bundles-table tr:nth-child(n+3):nth-last-child(3) .dropdown-content {
  top: auto;
  bottom: 100%;
  margin-bottom: 4px;
}


.bundles-table:focus-within {
  overflow: visible !important;
}

/* ==========================================================================
   BUNDLES FILTERS PANEL & RESPONSIVE UX
   ========================================================================== */

.bundles-filters-container {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.bundles-filters-container-inner {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}

.bundles-search-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
}

.bundles-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.bundles-search-input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  font-size: 14px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.bundles-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

.bundles-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.bundles-filter-toggle-btn:hover {
  background: var(--bg-input);
  border-color: var(--border-color);
}

.bundles-filter-toggle-btn.active {
  background: var(--color-primary);
  color: var(--color-primary-text, #ffffff);
  border-color: var(--color-primary);
}

.bundles-filter-badge {
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.bundles-filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  background: var(--bg-card);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  animation: fadeIn 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.bundles-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.bundles-filter-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.bundles-price-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.bundles-filter-price-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  font-size: 13.5px;
  height: 42px;
  transition: all 0.2s ease;
}

.bundles-filter-price-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

.bundles-price-separator {
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}

.bundles-filter-actions {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.bundles-filter-clear-btn {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
  color: var(--color-danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 13.5px;
  box-sizing: border-box;
}

.bundles-filter-clear-btn:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: var(--color-danger, #ef4444);
}

@media (max-width: 860px) {
  .bundles-filters-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
  }

  .bundles-filter-price-group {
    grid-column: 1 / -1;
  }

  .bundles-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .bundles-filters-container-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .bundles-filter-toggle-btn {
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
  }

  .bundles-filters-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 12px;
  }

  .bundles-filter-price-group {
    grid-column: 1 / -1;
  }

  .bundles-filter-actions {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  .bundles-filter-clear-btn {
    width: 100%;
  }
}


/* =========================================
   PROMOTIONS STYLES
========================================= */

/* Header layout fixes for mobile overflow */
.products-header {
  box-sizing: border-box;
  width: 100%;
}

.promo-search-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.promo-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.promo-search-input {
  width: 100%;
  height: 42px;
  padding: 10px 10px 10px 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  box-sizing: border-box;
}

.promo-status-select {
  width: 100%;
  box-sizing: border-box;
}

.promo-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  text-decoration: none;
}

.promo-action-btn.secondary {
  border: 1px solid var(--border-color);
  background: var(--bg-overlay);
  color: var(--text-main);
}

/* Table elements */
.promo-table-loading {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
}

.promo-empty-text {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.promo-name {
  font-weight: 500;
  color: var(--text-main);
  display: block;
  min-width: 200px;
}

.promo-automatic-label {
  color: var(--text-muted);
}

.promo-code-badge {
  font-weight: 600;
  letter-spacing: 1px;
  background: var(--bg-overlay);
  padding: 4px 8px;
  border-radius: 4px;
}

.promo-value-cell {
  font-weight: 600;
}

.promo-value-wrapper {
  display: flex;
  flex-direction: column;
}

.promo-max-discount {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: normal;
}

.promo-targets-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 150px;
}

.promo-target-badge {
  font-size: 11px;
  background: var(--bg-overlay);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.promo-target-badge.overflow {
  border: none;
}

.promo-target-badge.global {
  font-size: 12px;
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.1);
  border: none;
}

.promo-limits-text {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 130px;
}

.promo-dates-text {
  font-size: 13px;
  min-width: 150px;
}

.promo-actions-cell {
  padding-left: 10px;
  text-align: center;
}

.promo-actions-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  flex-direction: row;
}

.promo-actions-wrapper button,
.promo-actions-wrapper a {
  width: auto !important;
  flex: initial !important;
  height: 36px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.promo-history-btn {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: var(--color-primary, #6366f1);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.promo-history-btn:hover {
  background: rgba(99, 102, 241, 0.25);
  border-color: var(--color-primary, #6366f1);
  transform: translateY(-1px);
}

.promo-ticket-btn {
  padding: 6px 10px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.promo-ticket-btn:hover {
  background: rgba(16, 185, 129, 0.22);
  transform: translateY(-1px);
}

.promo-actions-wrapper .btn-edit {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--color-warning, #f59e0b);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.promo-actions-wrapper .btn-edit:hover {
  background: rgba(245, 158, 11, 0.25);
  transform: translateY(-1px);
}

.promo-actions-wrapper .btn-delete {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--color-danger, #ef4444);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.promo-actions-wrapper .btn-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}

.promo-restore-btn {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.promo-force-delete-btn {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Coupon Modal */
.promo-coupon-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 9999;
}

.promo-coupon-content {
  background: var(--bg-main);
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  position: relative;
}

.promo-coupon-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}

.promo-coupon-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-main);
}

.promo-coupon-print-area {
  background: #0a0a0a;
  border-radius: 20px;
  padding: 30px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 2px dashed #333;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  margin-bottom: 24px;
}

.promo-coupon-circle {
  position: absolute;
  top: -20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-main);
}
.promo-coupon-circle.left { left: -20px; }
.promo-coupon-circle.right { right: -20px; }

.promo-coupon-logo {
  height: 60px;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 20px;
}

.promo-coupon-header {
  text-align: center;
  margin-bottom: 20px;
}
.promo-coupon-discount {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 5px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.promo-coupon-name {
  margin: 0;
  font-size: 14px;
  color: #aaaaaa;
}

.promo-coupon-qr {
  background: white;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 15px;
}

.promo-coupon-code-box {
  background: #222;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 15px;
}

.promo-coupon-footer {
  font-size: 12px;
  color: #888;
  text-align: center;
  border-top: 1px dashed #444;
  padding-top: 15px;
  width: 100%;
}
.promo-coupon-footer strong {
  color: #fff;
}

.promo-coupon-print-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
}

/* Proveedores-style Header */
.promo-header-container {
  margin-bottom: 24px;
}

.promo-header-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.promo-header-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-header-icon-box svg {
  color: var(--text-main);
}

.promo-header-title {
  margin: 0;
  font-size: 20px;
}

.promo-header-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.promo-header-actions-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.promo-header-action-col {
  flex: 1;
  display: flex;
}

.promo-header-action-btn {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  margin: 0;
  min-width: -moz-max-content;
  min-width: max-content;
}

.promo-header-action-btn span {
  font-size: 13px;
  font-weight: 500;
}

.promo-filters-row {
  display: flex;
  gap: 12px;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .promo-filters-row {
    flex-direction: column;
  }
}

/* Table layout overriding products-table card view */
.promo-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.promo-table th {
  padding: 16px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.promo-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  color: var(--text-main);
  font-size: 14px;
}

.promo-table tbody tr {
  transition: background-color 0.2s;
}

.promo-table tbody tr:hover {
  background-color: var(--bg-input);
}

/* =========================================
   PROMOTION MODAL REFACTOR
========================================= */

.promo-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 24px 30px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 20px;
  font-weight: 600;
}

.promo-modal-close-btn {
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: 0.2s;
}

.promo-modal-close-btn:hover {
  background: var(--bg-input);
}

.promo-modal-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.promo-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.promo-section-title {
  margin: 24px 0 16px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.promo-section-title:first-child {
  margin-top: 0;
}

.promo-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.promo-toggle-label {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin: 0;
}

.promo-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.promo-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: 0.4s;
  border-radius: 34px;
}

.promo-toggle-input:checked + .promo-toggle-slider {
  background-color: var(--color-primary);
}

.promo-toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: var(--bg-main);
  transition: 0.4s;
  border-radius: 50%;
}

.promo-toggle-input:checked + .promo-toggle-slider:before {
  transform: translateX(20px);
}

.promo-toggle-text {
  font-weight: 500;
  color: var(--text-main);
  font-size: 14px;
}

.promo-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: var(--bg-card);
}

.promo-btn-cancel {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  transition: background-color 0.2s;
}

.promo-btn-cancel:hover {
  background: var(--bg-input);
}

.promo-btn-submit {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
}

.promo-form-group-full {
  grid-column: 1 / -1;
}

.promo-helper-text {
  color: var(--text-muted);
  margin-top: 6px;
  display: block;
  font-size: 12px;
}

/* Modal Form Mobile Tweaks */
@media (max-width: 768px) {
  .promo-modal-header {
    padding: 16px 20px;
    font-size: 18px;
  }
  
  .promo-modal-body {
    padding: 16px 20px;
  }
  
  .promo-modal-footer {
    padding: 16px 20px;
    flex-direction: column-reverse;
  }
  
  .promo-modal-footer button {
    width: 100%;
  }

  .promo-section-title {
    font-size: 14px;
  }
}

/* ==========================================================================
   PROMOTIONS KPI GRID (ESTÁNDAR NORMALIZADO)
   ========================================================================== */
.promotions-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.promotions-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.promotions-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.promotions-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
}

.promotions-kpi-card.kpi-total::before { background: #6366f1; }
.promotions-kpi-card.kpi-active::before { background: #10b981; }
.promotions-kpi-card.kpi-uses::before { background: #f59e0b; }
.promotions-kpi-card.kpi-discount::before { background: #ec4899; }

.promotions-kpi-top {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.promotions-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    word-break: break-word;
    white-space: normal;
}

.promotions-kpi-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.promotions-kpi-icon-mini {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.promotions-kpi-card.kpi-total .promotions-kpi-icon-mini { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.promotions-kpi-card.kpi-active .promotions-kpi-icon-mini { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.promotions-kpi-card.kpi-uses .promotions-kpi-icon-mini { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.promotions-kpi-card.kpi-discount .promotions-kpi-icon-mini { background: rgba(236, 72, 153, 0.12); color: #ec4899; }

.promotions-kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 768px) {
    .promotions-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 16px;
    }

    .promotions-kpi-card {
        padding: 12px 10px 10px 12px;
        gap: 6px;
        border-radius: 10px;
    }

    .promotions-kpi-value {
        font-size: 16px;
    }

    .promotions-kpi-bottom {
        gap: 6px;
    }

    .promotions-kpi-icon-mini {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .promotions-kpi-icon-mini svg {
        width: 12px;
        height: 12px;
    }

    .promotions-kpi-label {
        font-size: 11px;
    }
}

/* ========================================================
   MODAL HISTORIAL DE USOS DE PROMOCIONES (PROMOTION USAGE MODAL)
   Diseño UX/UI Minimalista, Elegante, Espacioso y Responsivo
   ======================================================== */
.promo-usage-modal {
  max-width: 1400px !important;
  width: 95vw !important;
  height: 92vh !important;
  max-height: 94vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
  .promo-usage-modal {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
}

/* Header Minimalista */
.promo-usage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  flex-shrink: 0;
  gap: 16px;
}

.promo-usage-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.promo-usage-title-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.promo-usage-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promo-usage-subtitle {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promo-usage-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.promo-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.promo-btn-ghost:hover {
  background: var(--bg-input);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.promo-btn-ghost.active {
  background: rgba(99, 102, 241, 0.12);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .promo-usage-header {
    padding: 12px 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .promo-usage-header-left {
    justify-content: flex-start;
  }

  .promo-usage-title {
    font-size: 15px;
  }

  .promo-usage-subtitle {
    display: none;
  }

  .promo-usage-header-actions {
    display: flex;
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
  }

  .promo-usage-header-actions .promo-btn-ghost {
    flex: 1;
    justify-content: center;
    padding: 7px 6px;
    font-size: 11.5px;
  }
}

/* Body: Flujo correlativo y scroll fluido */
.promo-usage-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--bg-card);
}

@media (max-width: 768px) {
  .promo-usage-body {
    padding: 12px;
    gap: 12px;
  }
}

/* KPIs Minimalistas (sin marcos pesados ni fondos grises de iconos) */
.promo-usage-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.promo-usage-kpi-card {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}

.promo-usage-kpi-card:hover {
  border-color: var(--color-primary);
}

.promo-usage-kpi-card::before {
  display: none !important;
}

.promo-usage-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.promo-usage-kpi-icon {
  flex-shrink: 0;
}
.promo-usage-kpi-card.kpi-blue .promo-usage-kpi-icon { color: #3b82f6; }
.promo-usage-kpi-card.kpi-green .promo-usage-kpi-icon { color: #10b981; }
.promo-usage-kpi-card.kpi-purple .promo-usage-kpi-icon { color: #8b5cf6; }
.promo-usage-kpi-card.kpi-amber .promo-usage-kpi-icon { color: #f59e0b; }

.promo-usage-kpi-main {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1.2;
}

.promo-usage-kpi-submain {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.promo-usage-kpi-foot {
  font-size: 11px;
  color: var(--text-muted);
}

.promo-usage-kpi-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.promo-actor-Interactive-pill {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.promo-actor-Interactive-pill:hover,
.promo-actor-Interactive-pill.active {
  border-color: var(--color-primary);
  background: rgba(99, 102, 241, 0.1);
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .promo-usage-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .promo-usage-kpi-card {
    padding: 10px 12px;
    gap: 4px;
  }

  .promo-usage-kpi-main {
    font-size: 16px;
  }
}

/* Promotions breakdown strip */
.promo-breakdown-strip-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.promo-breakdown-strip-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.promo-breakdown-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.promo-breakdown-chip {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 150px;
  flex-shrink: 0;
  text-align: left;
  transition: all 0.15s ease;
}

.promo-breakdown-chip:hover {
  border-color: var(--color-primary);
}

.promo-breakdown-chip.active {
  border-color: var(--color-primary);
  background: rgba(99, 102, 241, 0.08);
}

.promo-breakdown-chip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.promo-breakdown-chip-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.promo-breakdown-chip-badge,
.promo-breakdown-chip-val {
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  font-weight: 700;
}

.promo-breakdown-chip-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-muted);
}

/* Filters bar */
.promo-usage-filters-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.promo-search-clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.promo-usage-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  width: 100%;
}

.promo-usage-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 12.5px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.promo-usage-select:focus {
  border-color: var(--color-primary);
}

/* Table Desktop: Espacioso, Correlativo */
.promo-usage-table-container {
  overflow-x: auto;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-main);
}

.promo-usage-table {
  width: 100%;
  border-collapse: collapse;
}

.promo-usage-table th {
  padding: 12px 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  white-space: nowrap;
}

.promo-usage-table td {
  padding: 14px;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  vertical-align: middle;
}

.promo-usage-row:hover {
  background: rgba(99, 102, 241, 0.03);
}

.promo-usage-row.is-expanded {
  background: rgba(99, 102, 241, 0.05);
}

.promo-usage-row.is-cancelled {
  opacity: 0.55;
}

.promo-value-pill {
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  font-weight: 700;
  font-size: 11.5px;
}

.promo-how-badge {
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(99, 102, 241, 0.08);
  color: var(--color-primary);
}

.promo-scope-badge {
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.promo-actor-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.promo-channel-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-main);
}

.promo-invoice-badge {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.08);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 12px;
  font-family: monospace;
}

.promo-sale-status-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.promo-mini-tag {
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  padding: 1px 4px;
  border-radius: 4px;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
}

.promo-expand-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.promo-expand-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(99, 102, 241, 0.08);
}

/* Expanded Detail Row (Espacioso, correlativo a todo el modal) */
.promo-usage-expanded-row {
  background: rgba(99, 102, 241, 0.02) !important;
}

.promo-usage-expanded-row > td {
  padding: 0 !important;
  border-bottom: 2px solid var(--color-primary) !important;
}

.promo-usage-expanded-box {
  padding: 24px 28px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.promo-usage-expanded-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
}

.promo-usage-detail-card {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.promo-card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.promo-card-heading h4,
.promo-card-heading h5 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
}

.promo-card-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.promo-detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
}

.promo-detail-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
}

.promo-detail-list span {
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.promo-detail-list strong {
  color: var(--text-main);
  text-align: right;
  word-break: break-word;
  font-weight: 600;
}

.promo-detail-total-line {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
  font-size: 13.5px !important;
}

.promo-detail-total-line strong {
  font-size: 15px;
  color: var(--color-primary) !important;
  font-weight: 700;
}

/* Items in sale */
.promo-usage-items-section {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.promo-usage-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.promo-usage-item-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}

.promo-usage-item-chip:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.promo-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.promo-item-name {
  font-size: 13px;
  color: var(--text-main);
  font-weight: 600;
}

.promo-item-qty {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 7px;
  border-radius: 6px;
  flex-shrink: 0;
}

.promo-item-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.promo-item-pricing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 12px;
}

.promo-item-price-unit {
  display: flex;
  align-items: center;
  gap: 6px;
}

.promo-item-price-unit del {
  color: var(--text-muted);
}

.promo-item-discount-tag {
  color: #10b981;
  font-weight: 700;
}

.promo-item-subtotal {
  font-weight: 600;
  color: var(--text-main);
}

/* ========================================================
   VISTA MÓVIL: Tarjetas Responsivas UX/UI
   ======================================================== */
.promo-mobile-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.promo-mobile-card {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.promo-mobile-card.is-expanded {
  border-color: var(--color-primary);
}

.promo-mobile-card.is-cancelled {
  opacity: 0.6;
}

.promo-mobile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}

.promo-mobile-card-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.promo-mobile-card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}

.promo-mobile-card-promo-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.promo-mobile-promo-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.promo-mobile-promo-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.promo-mobile-savings {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.promo-mobile-savings-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.promo-mobile-savings-val {
  font-size: 14px;
  font-weight: 700;
  color: #10b981;
}

.promo-mobile-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-color);
  font-size: 12px;
}

.promo-mobile-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.promo-mobile-meta-label {
  color: var(--text-muted);
  margin-right: 4px;
}

.promo-mobile-meta-val {
  color: var(--text-main);
}

.promo-mobile-expand-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  background: var(--bg-card);
  border: none;
  border-top: 1px solid var(--border-color);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.promo-mobile-expand-trigger:hover {
  background: var(--bg-input);
}

.promo-mobile-expanded-wrapper {
  border-top: 1px solid var(--border-color);
}

.promo-mobile-expanded-wrapper .promo-usage-expanded-box {
  padding: 14px;
}

.promo-mobile-expanded-wrapper .promo-usage-expanded-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.promo-mobile-expanded-wrapper .promo-usage-items-grid {
  grid-template-columns: 1fr;
}

/* Modal Footer */
.promo-usage-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
  flex-shrink: 0;
}

.promo-usage-footer-count {
  font-size: 12.5px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .promo-usage-footer {
    padding: 10px 14px;
  }
}




/* =========================================================
   SETTINGS LAYOUT & TABS
========================================================= */

.settings-page {
  padding: 30px;
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: calc(100vh - 70px); /* Asumiendo header de 70px */
}

.settings-header {
  margin-bottom: 30px;
}

.settings-header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--text-main) 0%, var(--text-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.settings-header p {
  color: var(--text-muted);
  font-size: 1rem;
}

/* TABS CONTAINER */
.settings-tabs {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  overflow-x: auto;
}

.settings-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.settings-tab:hover {
  color: var(--text-main);
  background: var(--bg-overlay);
}

.settings-tab.active {
  color: var(--text-main);
  background: var(--bg-overlay);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.settings-tab svg {
  width: 18px;
  height: 18px;
}

/* CONTENT CARD */
.settings-content-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
}

.settings-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.settings-section-header h2 {
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-add {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
}

.btn-add:hover {
  background: var(--color-primary-hover);
}

/* TABLES */
.settings-table-wrapper {
  overflow-x: auto;
}

.settings-table {
  width: 100%;
  border-collapse: collapse;
}

.settings-table th,
.settings-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.settings-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-table td {
  font-size: 14px;
  color: var(--text-main);
}

.settings-table tr:hover td {
  background: var(--bg-overlay);
}

/* ACTION BUTTONS IN TABLE */
.action-btns {
  display: flex;
  gap: 8px;
}

.btn-icon {
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: var(--bg-overlay);
  color: var(--text-main);
}

.btn-icon.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: var(--color-danger);
  border-color: rgba(239, 68, 68, 0.3);
}

/* FORMS / MODALS (Reusing stylesCruds structure but custom for Settings) */
.settings-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.settings-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.settings-modal h3 {
  margin-bottom: 20px;
  font-size: 1.3rem;
  font-weight: 600;
}

.settings-page .form-group {
  margin-bottom: 20px;
}

.settings-page .form-group label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.settings-page .form-control {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.settings-page .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
}

.settings-page .form-control::-moz-placeholder {
  color: var(--text-muted);
}

.settings-page .form-control::placeholder {
  color: var(--text-muted);
}

.color-preview-box {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  display: inline-block;
  vertical-align: middle;
}

/* Master-Detail / Split view for Attributes */
.attribute-split-view {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 20px;
}

.attr-list {
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.attr-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s ease;
}

.attr-item:hover {
  background: var(--bg-overlay);
}

.attr-item.active {
  background: var(--bg-overlay);
  border-left: 3px solid var(--color-primary);
}

/* Badges */
.badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.badge.gray {
  background: var(--bg-overlay);
  color: var(--text-main);
}

/* =========================================================
   RESPONSIVE DESIGN
========================================================= */

@media (max-width: 768px) {
  .settings-page {
    padding: 15px;
  }

  .settings-header h1 {
    font-size: 1.5rem;
  }

  .settings-tabs {
    gap: 8px;
    padding-bottom: 5px;
  }

  .settings-tab {
    padding: 8px 12px;
    font-size: 13px;
  }

  .settings-content-card {
    padding: 15px;
  }

  .settings-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .settings-section-header .btn-add {
    width: 100%;
    justify-content: center;
  }

  .attribute-split-view {
    grid-template-columns: 1fr;
  }

  .settings-modal {
    padding: 20px;
    margin: 15px;
    max-height: 90vh;
    overflow-y: auto;
  }
}









.branches-container {
  padding: 24px;
  background: var(--bg-main);
  min-height: 100vh;
  color: var(--text-main);
}

.branches-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

.branches-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.3px;
  margin: 0;
}

.branches-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* filters container handled in inline styles and global classes */

.branches-table-container {
  width: 100%;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.table th {
  background: var(--bg-card);
  text-align: left;
  padding: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.table td {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
}

.table tr:hover {
  background: var(--bg-overlay);
}

.status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

.status-badge.active {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
}

.status-badge.inactive {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

/* Modals */
.branch-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.branch-modal {
  background: var(--bg-card);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.branch-modal-header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.branch-modal-header h2 {
  margin: 0;
  font-size: 22px;
  color: var(--text-main);
}

.close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.2s;
}

.close-btn:hover {
  background: var(--bg-overlay);
  color: var(--text-main);
}

.branch-modal-content {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.form-group input,
.form-group select {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  font-size: 15px;
  transition: 0.2s;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--border-focus);
}

/* Branch Images */
.image-upload-section {
  margin-top: 24px;
}

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.image-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--border-color);
  cursor: pointer;
  transition: 0.2s;
}

.image-preview-item.primary {
  border-color: var(--color-primary);
}

.image-preview-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.image-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
}

.primary-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.image-upload-btn {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px dashed var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: 0.2s;
  background: transparent;
}

.image-upload-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--bg-overlay);
}

.branch-modal-footer {
  padding: 24px 32px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.btn-secondary {
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.btn-secondary:hover {
  background: var(--bg-overlay);
}

/* =========================
   BOTONES ACCIÓN TABLA
========================= */

.btn-edit {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--color-warning);
  padding: 6px 10px;
  margin-right: 5px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: 0.2s ease;
}

.btn-edit:hover {
  background: rgba(245, 158, 11, 0.25);
  transform: translateY(-1px);
}

.btn-delete {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--color-danger);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: 0.2s ease;
}

.btn-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}
/* View Toggle */
.filters-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  max-width: 400px;
}

.view-toggle {
  display: flex;
  gap: 8px;
  background: var(--bg-card);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-btn:hover {
  color: var(--text-main);
  background: var(--bg-overlay);
}

.toggle-btn.active {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Grid Layout */
.branches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  width: 100%;
}

.branch-card {
  background: var(--bg-card);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 6px -1px var(--bg-overlay);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.branch-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.branch-card-image {
  width: 100%;
  height: 160px;
  position: relative;
  overflow: hidden;
  background: var(--bg-overlay);
}

.branch-card-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}

.branch-card:hover .branch-card-image img {
  transform: scale(1.05);
}

.branch-status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.branch-status-badge.active {
  background: rgba(16, 185, 129, 0.9);
  color: white;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.branch-status-badge.inactive {
  background: rgba(239, 68, 68, 0.9);
  color: white;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.branch-card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.branch-card-title {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.branch-card-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  flex: 1;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-muted);
  font-size: 14px;
}

.info-item svg {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.info-item span {
  line-height: 1.4;
}

.branch-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}


.btn-primary:hover{
  background: var(--color-primary-text) !important;
  color: var(--color-primary) !important;
}

.btn-icon {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary-text);
  transform: translateY(-2px);
  color: var(--color-primary-text)
}

.btn-icon.delete:hover {
  background: var(--color-danger);
  color: white;
  border-color: var(--color-danger);
}

/* States */
.loading-state,
.empty-state {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 16px;
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
}
/* =========================
   MOBILE RESPONSIVENESS
========================= */
@media (max-width: 768px) {
  .branches-container {
    padding: 16px;
  }

  .branches-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .branches-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }

  .branches-actions > * {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 14px;
    box-sizing: border-box;
    white-space: nowrap;
  }

  .filters-bar {
    flex-direction: column;
    width: 100%;
  }

  .filters-bar input,
  .filters-bar select {
    width: 100%;
    min-width: unset;
  }

  .branches-grid {
    grid-template-columns: 1fr;
  }

  .branch-modal {
    width: 95%;
    max-height: 95vh;
  }

  .branch-modal-header {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .branch-modal-header h2 {
    font-size: 20px;
  }

  .branch-modal-header .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .branch-modal-content {
    padding: 20px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .modal-actions {
    padding: 20px;
    flex-direction: column;
    gap: 12px;
  }

  .modal-actions button {
    width: 100%;
    margin: 0;
  }

  .table th, .table td {
    padding: 10px 8px;
    font-size: 13px;
  }
  
  .view-toggle {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   BRANCHES KPI GRID (ESTÁNDAR NORMALIZADO)
   ========================================================================== */
.branches-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.branches-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.branches-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.branches-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
}

.branches-kpi-card.kpi-top-branch::before { background: #f59e0b; }
.branches-kpi-card.kpi-invested::before { background: #10b981; }
.branches-kpi-card.kpi-stock::before { background: #3b82f6; }
.branches-kpi-card.kpi-active::before { background: #8b5cf6; }

.branches-kpi-top {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.branches-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    word-break: break-word;
    white-space: normal;
}

.branches-kpi-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.branches-kpi-icon-mini {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.branches-kpi-card.kpi-top-branch .branches-kpi-icon-mini { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.branches-kpi-card.kpi-invested .branches-kpi-icon-mini { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.branches-kpi-card.kpi-stock .branches-kpi-icon-mini { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.branches-kpi-card.kpi-active .branches-kpi-icon-mini { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }

.branches-kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 768px) {
    .branches-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 16px;
    }

    .branches-kpi-card {
        padding: 12px 10px 10px 12px;
        gap: 6px;
        border-radius: 10px;
    }

    .branches-kpi-value {
        font-size: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .branches-kpi-bottom {
        gap: 6px;
    }

    .branches-kpi-icon-mini {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .branches-kpi-icon-mini svg {
        width: 12px;
        height: 12px;
    }

    .branches-kpi-label {
        font-size: 11px;
    }
}

/* ── BRANCHES FILTERS STYLES ── */
.branches-filters-container {
  margin-bottom: 20px;
}

.branches-search-bar-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 0;
}

.branches-search-bar-row.open {
  margin-bottom: 12px;
}

.branches-search-input-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
}

.branches-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.branches-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px 10px 38px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  font-size: 14px;
  height: 42px;
  transition: border-color 0.2s ease;
}

.branches-search-input:focus {
  border-color: var(--color-primary);
}

.branches-filter-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: 0.2s;
  font-weight: 500;
  height: 42px;
  box-sizing: border-box;
  font-size: 14px;
  flex-shrink: 0;
}

.branches-filter-toggle-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.branches-filter-badge {
  background: #3b82f6;
  color: #fff;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.branches-filter-toggle-btn.active .branches-filter-badge {
  background: #ffffff;
  color: var(--color-primary);
}

.branches-filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  background: var(--bg-card);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  margin-top: 10px;
  animation: fadeIn 0.2s ease;
}

.branches-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.branches-filter-group label {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.branches-filter-group select,
.branches-filter-group input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  font-size: 13.5px;
  height: 40px;
  transition: border-color 0.2s;
}

.branches-filter-actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.branches-filter-clear-btn {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: 0.2s;
  font-weight: 500;
  font-size: 13px;
  box-sizing: border-box;
}

.branches-filter-clear-btn:hover {
  color: var(--color-danger);
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.05);
}

@media (max-width: 580px) {
  .branches-filters-panel {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 12px !important;
  }
}


/* src/pages/dashboard/pages/inventory/Inventory.css */

.inventory-container {
    padding: 20px;
    animation: fadeIn 0.3s ease;
  }
  
  .inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }
  
  .inventory-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-main);
  }
  
  .inventory-actions {
    display: flex;
    gap: 12px;
  }
  
  .inventory-table {
    width: 100%;
    min-width: 900px; /* Increased to give plenty of room */
    table-layout: auto !important; /* Ensure it's not fixed */
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px var(--shadow-color);
  }
  
  .inventory-table th,
  .inventory-table td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
  }
  
  .inventory-table th {
    background: var(--bg-header);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
  }
  
  .inventory-table tr:hover td {
    background: var(--bg-hover);
  }
  
  .product-img {
    box-shadow: 0 2px 5px var(--shadow-color);
  }
  
  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
  }
  
  .status-badge.success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
  }
  
  .status-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
  }
  
  .status-badge.danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
  }
  
  .table-actions {
    display: flex;
    gap: 8px;
  }
  
  .btn-edit {
    background: var(--color-warning);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
  }
  
  .btn-edit:hover {
    filter: brightness(1.1);
  }
  
  .btn-secondary {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
  }
  
  .btn-secondary:hover {
    background: var(--bg-hover);
  }
  
  .hide-on-mobile {
    display: inline;
  }
  
  @media (max-width: 600px) {
    .inventory-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
    
    .audit-modal-footer {
      flex-direction: column;
      align-items: stretch !important;
      gap: 15px;
    }
    .audit-modal-footer > div:last-child {
      width: 100%;
    }
    .audit-modal-footer > div:last-child > button {
      flex: 1;
      justify-content: center;
    }
  }

  @media (max-width: 768px) {
    .hide-on-mobile {
      display: none !important;
    }

    .filters-container > div:first-child {
      flex-wrap: wrap !important;
    }
    
    .filters-container > div:first-child > div {
      flex-basis: 100% !important;
    }
    
    .filters-container > div:first-child > button {
      flex: 1;
      justify-content: center;
    }

    /* Make camera button strict size again */
    .filters-container > div:first-child > button[title="Escanear con Cámara"] {
      flex: 0 0 42px !important;
      padding: 0 !important;
    }

    .filters-panel {
      grid-template-columns: 1fr 1fr !important;
    }

    .inventory-actions {
      flex-direction: row !important;
      flex-wrap: wrap;
    }
    
    .header-actions {
      width: 100%;
      flex-wrap: wrap;
    }
    
    /* Make the branch selector flex appropriately */
    .header-actions > div:first-child {
      flex-basis: 100%;
    }
    .header-actions > div:first-child > button {
      width: 100%;
      justify-content: space-between;
    }
    
    /* Historial full width */
    .header-actions > a {
      justify-content: center;
    }
    
    /* Auditar and Ingresar 50% each */
    .header-actions > button {
      flex: 1 1 calc(50% - 8px);
      max-width: calc(50% - 7px);
      justify-content: center;
      padding: 10px !important;
    }

    .filters-header {
      flex-direction: column !important;
      align-items: stretch !important;
    }
    
    .filters-header .search-bar {
      max-width: 100% !important;
    }
    
    .filters-header .filter-toggle-btn {
      width: 100%;
      justify-content: center;
    }

    .table-wrapper {
      overflow-x: auto;
    }
  }

  @media (max-width: 480px) {
    .filters-panel {
      grid-template-columns: 1fr !important;
    }
    .filters-panel > div {
      grid-column: span 1 !important;
    }

    .inventory-table th,
    .inventory-table td {
      padding: 12px 8px;
      font-size: 13px;
    }
  }

/* Ocultar flechas del input number */
.no-spinners::-webkit-inner-spin-button,
.no-spinners::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-spinners {
  -moz-appearance: textfield; /* Firefox */
}

/* ── INVENTORY KPI CARDS ── */
.inventory-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
  width: 100%;
}

.inventory-kpi-card {
  background: var(--bg-card);
  padding: 16px 16px 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inventory-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3.5px;
  border-radius: 14px 0 0 14px;
}

.inventory-kpi-card.kpi-stock::before  { background: #8b5cf6; }
.inventory-kpi-card.kpi-cost::before   { background: #ef4444; }
.inventory-kpi-card.kpi-retail::before { background: #10b981; }
.inventory-kpi-card.kpi-alert::before  { background: #f59e0b; }

.inventory-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.inventory-kpi-top {
  width: 100%;
  min-width: 0;
}

.inventory-kpi-value {
  color: var(--text-main);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.3px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.inventory-kpi-value.text-warning {
  color: #f59e0b;
}

.inventory-kpi-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.inventory-kpi-icon-mini {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inventory-kpi-card.kpi-stock .inventory-kpi-icon-mini  { background: rgba(139, 92, 246, 0.14); color: #8b5cf6; }
.inventory-kpi-card.kpi-cost .inventory-kpi-icon-mini   { background: rgba(239, 68, 68, 0.14);   color: #ef4444; }
.inventory-kpi-card.kpi-retail .inventory-kpi-icon-mini { background: rgba(16, 185, 129, 0.14);  color: #10b981; }
.inventory-kpi-card.kpi-alert .inventory-kpi-icon-mini  { background: rgba(245, 158, 11, 0.14);  color: #f59e0b; }

.inventory-kpi-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

@media (max-width: 768px) {
  .header-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  .header-actions > div:first-child {
    width: 100%;
  }
  .header-actions > div:first-child button {
    width: 100%;
    justify-content: space-between;
  }
  .inventory-action-buttons {
    width: 100%;
  }
  .inventory-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .inventory-kpi-card {
    padding: 12px 10px 10px 12px !important;
    gap: 6px !important;
  }
  .inventory-kpi-value {
    font-size: 16px !important;
  }
  .inventory-kpi-bottom {
    gap: 6px !important;
  }
  .inventory-kpi-icon-mini {
    width: 20px !important;
    height: 20px !important;
    border-radius: 5px !important;
  }
  .inventory-kpi-icon-mini svg {
    width: 12px !important;
    height: 12px !important;
  }
  .inventory-kpi-label {
    font-size: 10.5px !important;
  }
  .audit-table-wrapper {
    overflow-x: hidden !important;
    border: none !important;
  }
  .audit-table {
    min-width: 100% !important;
    width: 100% !important;
    display: block;
  }
  .audit-table thead {
    display: none;
  }
  .audit-table tbody {
    display: block;
    width: 100%;
  }
  .audit-table tr.audit-product-row {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
  }
  .audit-table tr.audit-product-row td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border-color) !important;
    padding: 12px 16px !important;
  }
  .audit-table tr.audit-variant-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: 
      "name name name"
      "sku sku sku"
      "teo fis dif";
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-top: none;
    background: var(--bg-main) !important;
  }
  .audit-table tr.audit-variant-row:last-child {
    border-radius: 0 0 8px 8px;
  }
  .audit-table tr.audit-variant-row.is-audited {
    background: var(--bg-input) !important;
  }
  .audit-table tr.audit-variant-row td {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    border: none !important;
  }
  .audit-table tr.audit-variant-row td:nth-child(1) { 
    grid-area: name; 
    align-items: flex-start;
  }
  .audit-table tr.audit-variant-row td:nth-child(2) { 
    grid-area: sku; 
    align-items: flex-start;
    margin-bottom: 8px;
  }
  .audit-table tr.audit-variant-row td:nth-child(3) { grid-area: teo; }
  .audit-table tr.audit-variant-row td:nth-child(4) { grid-area: fis; }
  .audit-table tr.audit-variant-row td:nth-child(5) { grid-area: dif; }
  
  .audit-table tr.audit-variant-row td:nth-child(3)::before,
  .audit-table tr.audit-variant-row td:nth-child(4)::before,
  .audit-table tr.audit-variant-row td:nth-child(5)::before {
    content: attr(data-label);
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
  }
  .audit-table tr.audit-variant-row td:nth-child(3),
  .audit-table tr.audit-variant-row td:nth-child(4),
  .audit-table tr.audit-variant-row td:nth-child(5) {
    background: var(--bg-card);
    padding: 10px 4px !important;
    border-radius: 8px;
    border: 1px solid var(--border-color) !important;
    justify-content: center;
    align-items: center;
  }
  .audit-table tr.audit-variant-row input {
    width: 100% !important;
    max-width: 60px;
    padding: 6px !important;
  }
}

/* ── INVENTORY FILTERS STYLES ── */
.inventory-filters-container {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inventory-search-and-camera-row {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.inventory-search-input-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
}

.inventory-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.inventory-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px 10px 38px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  font-size: 14px;
  height: 42px;
  transition: border-color 0.2s ease;
}

.inventory-search-input:focus {
  border-color: var(--primary-color);
}

.inventory-scanner-btn {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: 0.2s;
  box-sizing: border-box;
}

.inventory-scanner-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.inventory-filter-btn-row {
  display: flex;
  width: 100%;
}

.inventory-filter-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  height: 42px;
  box-sizing: border-box;
  font-size: 14px;
  width: 100%;
}

.inventory-filter-toggle-btn svg {
  color: inherit;
  stroke: currentColor;
  transition: all 0.2s ease;
}

.inventory-filter-toggle-btn:hover {
  border-color: var(--text-main);
}

/* CUANDO ESTÁ ACTIVO: Color negro con icono blanco y texto blanco */
.inventory-filter-toggle-btn.active {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.inventory-filter-toggle-btn.active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.inventory-filter-badge {
  background: #3b82f6;
  color: #fff;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.inventory-filter-toggle-btn.active .inventory-filter-badge {
  background: #ffffff !important;
  color: #000000 !important;
}

.inventory-filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  background: var(--bg-card);
  padding: 18px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  animation: fadeIn 0.2s ease;
  box-sizing: border-box;
  margin-top: 4px;
}

.inventory-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.inventory-filter-group label {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.inventory-filter-group input,
.inventory-filter-group select {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  font-size: 13.5px;
  height: 40px;
  transition: border-color 0.2s;
}

.inventory-filter-group input:focus,
.inventory-filter-group select:focus {
  border-color: var(--primary-color);
}

.inventory-filter-actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.inventory-filter-clear-btn {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: 0.2s;
  font-weight: 500;
  font-size: 13px;
  box-sizing: border-box;
}

.inventory-filter-clear-btn:hover {
  color: var(--color-danger);
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.05);
}

@media (min-width: 769px) {
  .inventory-filter-toggle-btn {
    width: auto;
    min-width: 140px;
  }
}

@media (max-width: 768px) {
  .inventory-filter-toggle-btn {
    width: 100%;
  }
  .inventory-filters-panel {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
    gap: 12px !important;
  }
}

/* =========================================
   PROMOTIONS STYLES
========================================= */

/* Header layout fixes for mobile overflow */
.products-header {
  box-sizing: border-box;
  width: 100%;
}

.gift-search-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.gift-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.gift-search-input {
  width: 100%;
  height: 42px;
  padding: 10px 10px 10px 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  box-sizing: border-box;
}

.gift-status-select {
  width: 100%;
  box-sizing: border-box;
}

.gift-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  text-decoration: none;
}

.gift-action-btn.secondary {
  border: 1px solid var(--border-color);
  background: var(--bg-overlay);
  color: var(--text-main);
}

/* Table elements */
.gift-table-loading {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
}

.gift-empty-text {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
}

.gift-name {
  font-weight: 500;
  color: var(--text-main);
  display: block;
  min-width: 200px;
}

.gift-automatic-label {
  color: var(--text-muted);
}

.gift-code-badge {
  font-weight: 600;
  letter-spacing: 1px;
  background: var(--bg-overlay);
  padding: 4px 8px;
  border-radius: 4px;
}

.gift-value-cell {
  font-weight: 600;
}

.gift-value-wrapper {
  display: flex;
  flex-direction: column;
}

.gift-max-discount {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: normal;
}

.gift-targets-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 150px;
}

.gift-target-badge {
  font-size: 11px;
  background: var(--bg-overlay);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.gift-target-badge.overflow {
  border: none;
}

.gift-target-badge.global {
  font-size: 12px;
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.1);
  border: none;
}

.gift-limits-text {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 130px;
}

.gift-dates-text {
  font-size: 13px;
  min-width: 150px;
}

.gift-actions-cell {
  padding-left: 10px;
  text-align: center;
}

.gift-actions-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  flex-direction: row;
}

.gift-actions-wrapper button,
.gift-actions-wrapper a {
  width: auto !important;
  flex: initial !important;
  height: 36px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gift-ticket-btn {
  padding: 6px;
}

.gift-restore-btn {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.gift-force-delete-btn {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Coupon Modal */
.gift-coupon-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 9999;
}

.gift-coupon-content {
  background: var(--bg-main);
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  position: relative;
}

.gift-coupon-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}

.gift-coupon-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-main);
}

.gift-coupon-print-area {
  background: #0a0a0a;
  border-radius: 20px;
  padding: 30px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 2px dashed #333;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  margin-bottom: 24px;
}

.gift-coupon-circle {
  position: absolute;
  top: -20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-main);
}
.gift-coupon-circle.left { left: -20px; }
.gift-coupon-circle.right { right: -20px; }

.gift-coupon-logo {
  height: 60px;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 20px;
}

.gift-coupon-header {
  text-align: center;
  margin-bottom: 20px;
}
.gift-coupon-discount {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 5px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.gift-coupon-name {
  margin: 0;
  font-size: 14px;
  color: #aaaaaa;
}

.gift-coupon-qr {
  background: white;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 15px;
}

.gift-coupon-code-box {
  background: #222;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 15px;
}

.gift-coupon-footer {
  font-size: 12px;
  color: #888;
  text-align: center;
  border-top: 1px dashed #444;
  padding-top: 15px;
  width: 100%;
}
.gift-coupon-footer strong {
  color: #fff;
}

.gift-coupon-print-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
}

/* Proveedores-style Header */
.gift-header-container {
  margin-bottom: 24px;
}

.gift-header-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.gift-header-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gift-header-icon-box svg {
  color: var(--text-main);
}

.gift-header-title {
  margin: 0;
  font-size: 20px;
}

.gift-header-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.gift-header-actions-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.gift-header-action-col {
  flex: 1;
  display: flex;
}

.gift-header-action-btn {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  margin: 0;
  min-width: -moz-max-content;
  min-width: max-content;
}

.gift-header-action-btn span {
  font-size: 13px;
  font-weight: 500;
}

.gift-filters-row {
  display: flex;
  gap: 12px;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .gift-filters-row {
    flex-direction: column;
  }
}

/* Table layout overriding products-table card view */
.gift-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.gift-table th {
  padding: 16px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.gift-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  color: var(--text-main);
  font-size: 14px;
}

.gift-table tbody tr {
  transition: background-color 0.2s;
}

.gift-table tbody tr:hover {
  background-color: var(--bg-input);
}

/* =========================================
   PROMOTION MODAL REFACTOR
========================================= */

.gift-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 24px 30px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 20px;
  font-weight: 600;
}

.gift-modal-close-btn {
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: 0.2s;
}

.gift-modal-close-btn:hover {
  background: var(--bg-input);
}

.gift-modal-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.gift-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.gift-section-title {
  margin: 24px 0 16px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.gift-section-title:first-child {
  margin-top: 0;
}

.gift-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gift-toggle-label {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin: 0;
}

.gift-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.gift-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: 0.4s;
  border-radius: 34px;
}

.gift-toggle-input:checked + .gift-toggle-slider {
  background-color: var(--color-primary);
}

.gift-toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: var(--bg-main);
  transition: 0.4s;
  border-radius: 50%;
}

.gift-toggle-input:checked + .gift-toggle-slider:before {
  transform: translateX(20px);
}

.gift-toggle-text {
  font-weight: 500;
  color: var(--text-main);
  font-size: 14px;
}

.gift-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: var(--bg-card);
}

.gift-btn-cancel {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  transition: background-color 0.2s;
}

.gift-btn-cancel:hover {
  background: var(--bg-input);
}

.gift-btn-submit {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
}

.gift-form-group-full {
  grid-column: 1 / -1;
}

.gift-helper-text {
  color: var(--text-muted);
  margin-top: 6px;
  display: block;
  font-size: 12px;
}

/* Modal Form Mobile Tweaks */
@media (max-width: 768px) {
  .gift-modal-header {
    padding: 16px 20px;
    font-size: 18px;
  }
  
  .gift-modal-body {
    padding: 16px 20px;
  }
  
  .gift-modal-footer {
    padding: 16px 20px;
    flex-direction: column-reverse;
  }
  
  .gift-modal-footer button {
    width: 100%;
  }

  .gift-section-title {
    font-size: 14px;
  }
}


/* =========================================
   GIFTCARD HISTORY & DIGITALIZE MODALS
========================================= */
.gift-modal-history {
  max-width: 600px;
  width: 100%;
}

.gift-history-subtitle {
  display: flex;
  gap: 15px;
  color: var(--text-muted);
  font-size: 14px;
}

.gift-code-text {
  font-weight: 600;
  color: var(--text-main);
  font-family: monospace;
}

.gift-history-owner {
  font-size: 13px;
  margin-top: 8px;
  color: var(--text-muted);
}

.gift-history-owner .divider {
  margin: 0 8px;
}

.gift-history-body {
  max-height: 400px;
  overflow-y: auto;
  padding: 20px 0;
}

.gift-timeline-item {
  display: flex;
  gap: 16px;
  padding: 0 20px 20px 20px;
}

.gift-timeline-icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gift-timeline-line {
  width: 2px;
  flex-grow: 1;
  background: var(--border-color);
  margin: 4px 0 0 0;
}

.gift-timeline-content {
  flex: 1;
  background: var(--bg-overlay);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.gift-timeline-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.gift-timeline-desc {
  color: var(--text-main);
  font-size: 13px;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.gift-timeline-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: var(--text-muted);
}

.gift-timeline-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gift-timeline-meta-item.primary {
  color: var(--primary-color);
  font-weight: 500;
}

.gift-history-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}

/* Digitalize Modal specific */
.gift-modal-digitalize {
  max-width: 500px;
}

.gift-modal-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gift-alert-box {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-overlay);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.gift-alert-text {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--text-muted);
}

.gift-alert-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 13px;
}

/* Mobile Tweaks */
@media (max-width: 768px) {
  .gift-alert-meta {
    flex-direction: column;
    gap: 8px;
  }
}

/* =========================================
   GIFTCARD SPECIFIC TABLE STYLES
========================================= */

.gift-code-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
}

.gift-code-text {
  font-weight: 600;
  letter-spacing: 1px;
  background: var(--bg-overlay);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
  white-space: nowrap;
}

.gift-visibility-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.gift-visibility-btn:hover {
  background-color: var(--bg-input);
  color: var(--text-main);
}

.gift-owner-info {
  display: flex;
  flex-direction: column;
}

.gift-owner-name {
  font-weight: 500;
}

.gift-owner-role {
  font-size: 11px;
}

.gift-owner-role.primary {
  color: var(--primary-color);
}

.gift-owner-role.muted {
  color: var(--text-muted);
}

.gift-unassigned-text {
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
}

.gift-balance-muted {
  color: var(--text-muted);
}

.gift-balance-active {
  font-weight: 600;
  color: var(--primary-color);
}

.gift-history-header {
  align-items: flex-start;
}

.gift-text-primary {
  color: var(--primary-color);
}
/* =========================
    PRODUCTS CONTAINER
========================= */

.suppliers-container {
  padding: 20px;
  font-family: "Segoe UI", sans-serif;
  color: var(--text-main);
}

/* =========================
   SUPPLIERS KPI CARDS
========================= */
.suppliers-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
  width: 100%;
}

.suppliers-kpi-card {
  background: var(--bg-card);
  padding: 16px 16px 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.suppliers-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3.5px;
  border-radius: 14px 0 0 14px;
}

.suppliers-kpi-card.kpi-total::before     { background: #3b82f6; }
.suppliers-kpi-card.kpi-active::before    { background: #10b981; }
.suppliers-kpi-card.kpi-purchases::before { background: #f59e0b; }

.suppliers-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.suppliers-kpi-top {
  width: 100%;
  min-width: 0;
}

.suppliers-kpi-value {
  color: var(--text-main);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.3px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.suppliers-kpi-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.suppliers-kpi-icon-mini {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.suppliers-kpi-card.kpi-total .suppliers-kpi-icon-mini     { background: rgba(59, 130, 246, 0.14); color: #3b82f6; }
.suppliers-kpi-card.kpi-active .suppliers-kpi-icon-mini    { background: rgba(16, 185, 129, 0.14); color: #10b981; }
.suppliers-kpi-card.kpi-purchases .suppliers-kpi-icon-mini { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }

.suppliers-kpi-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

@media (max-width: 768px) {
  .suppliers-container {
    padding: 14px 12px;
  }
  .suppliers-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .suppliers-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .suppliers-kpi-card {
    padding: 12px 10px 10px 12px !important;
    gap: 6px !important;
  }
  .suppliers-kpi-card.kpi-purchases {
    grid-column: 1 / -1 !important;
  }
  .suppliers-kpi-value {
    font-size: 16.5px !important;
  }
  .suppliers-kpi-bottom {
    gap: 6px !important;
  }
  .suppliers-kpi-icon-mini {
    width: 20px !important;
    height: 20px !important;
    border-radius: 5px !important;
  }
  .suppliers-kpi-icon-mini svg {
    width: 12px !important;
    height: 12px !important;
  }
  .suppliers-kpi-label {
    font-size: 10.5px !important;
  }
}

/* =========================
   HEADER
========================= */
 
.suppliers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 20px;
  padding: 12px 16px;

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;

  backdrop-filter: blur(8px);
}

.suppliers-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-main);
}

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

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);

  border: none;
  padding: 10px 14px;
  border-radius: 8px;

  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
  transition: 0.2s ease;

  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* =========================
   TABLA PRODUCTS
========================= */

.suppliers-table {
  width: 100%;
  border-collapse: collapse;

  background: var(--bg-card);
  border-radius: 10px;

  overflow: hidden;
  border: 1px solid var(--border-color);
}

.suppliers-table th {
  background: var(--bg-card);
  text-align: left;
  padding: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.suppliers-table td {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
}

.suppliers-table tr:hover {
  background: var(--bg-overlay);
}

/* =========================
   IMAGEN PRODUCTO
========================= */

.product-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;

  -o-object-fit: cover;

     object-fit: cover;
  border: 1px solid var(--border-color);
}

/* =========================
   BOTONES ACCIN
========================= */

.btn-edit {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);

  padding: 6px 10px;
  margin-right: 5px;

  border-radius: 6px;
  color: var(--color-warning);

  cursor: pointer;
  font-size: 13px;
  transition: 0.2s ease;
}

.btn-edit:hover {
  background: rgba(245, 158, 11, 0.25);
  transform: translateY(-1px);
}

.btn-delete {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);

  padding: 6px 10px;
  border-radius: 6px;

  color: var(--color-danger);
  cursor: pointer;
  font-size: 13px;

  transition: 0.2s ease;
}

.btn-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}

/* =========================
   MODAL (REUTILIZA USERS STYLE)
========================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  padding: 20px;
  box-sizing: border-box;
}

.modal {
  background: var(--bg-card);
  color: var(--text-main);
  width: 95%;
  max-width: 1000px;
  max-height: 90vh;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), inset 0 1px 0 var(--border-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal h2 {
  padding: 24px 30px;
  font-size: 24px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-main);
  
  
  margin: 0;
  letter-spacing: 0.5px;
}

/* =========================
   FORM GRID
========================= */

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;

  padding: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {

  margin-bottom: 8px;

  font-size: 11px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.6px;

  color: var(--text-muted);
}

.variant-card .form-grid {
  padding: 0;
  margin-top: 18px;
}

.variant-card + .variant-card {
  margin-top: 24px;
}



.simple-card,
.variant-card {

  position: relative;
  overflow: visible;
}

.simple-card::before,
.variant-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;
  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--border-color),
      transparent
    );
}



.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  box-sizing: border-box;
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.form-group textarea {
  min-height: 120px;
  padding: 16px;
  resize: vertical;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  background: var(--bg-overlay);
  border-color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: var(--bg-overlay);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* =========================
   MODAL ACTIONS
========================= */

.modal-actions {
  display: flex;
  justify-content: flex-end;

  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
  gap: 10px;
}

.modal-actions button {
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.modal-actions .btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.modal-actions .btn-secondary {
  background: var(--color-secondary);
  color: var(--text-main);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .suppliers-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* =========================
    FILTERS PANEL (ESTILO USERS STYLE)
========================= */

.filters-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;

  margin-bottom: 15px;
  padding: 12px;

  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border-color);

  backdrop-filter: blur(8px);
}

/* inputs y selects consistentes */
.filters-bar input,
.filters-bar select {
  padding: 9px 12px;
  border-radius: 8px;
  box-sizing: border-box;

  background: var(--bg-main);
  border: 1px solid var(--border-color);

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

/* focus igual que users */
.filters-bar input:focus,
.filters-bar select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

/* hover suave */
.filters-bar input:hover,
.filters-bar select:hover {
  border-color: var(--text-muted);
}

/* =========================
    FILTROS EN GRUPO (opcional PRO)
========================= */

.filters-group {
  display: flex;
  gap: 8px;
  align-items: center;

  padding: 6px 10px;
  background: var(--bg-overlay);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

/* labels opcionales si agregas filtros avanzados */
.filters-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 4px;
}

/* =========================
    BOTN RESET FILTROS (recomendado)
========================= */

.btn-filter-reset {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);

  color: var(--color-danger);
  padding: 8px 12px;
  border-radius: 8px;

  font-size: 12px;
  cursor: pointer;

  transition: 0.2s ease;
}

.btn-filter-reset:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}

/* =========================
    RESPONSIVE
========================= */

@media (max-width: 768px) {
  .filters-bar {
    flex-direction: column;
    gap: 8px;
  }

  .filters-bar input,
  .filters-bar select {
    width: 100%;
  }
}

/* =========================
    BULK ACTIONS BAR
========================= */

.bulk-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-secondary, var(--bg-card));
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid var(--border-color);
  gap: 15px;
  flex-wrap: wrap;
}

.bulk-actions-left {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.bulk-actions-count {
  font-weight: 600;
  color: var(--color-primary);
}

.bulk-actions-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
}

.bulk-actions-right {
  display: flex;
}

.btn-danger-bulk {
  background: #ff4d4f;
  color: var(--text-main);
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: 0.2s ease;
}

.btn-danger-bulk:hover {
  background: #ff7875;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .bulk-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .bulk-actions-left {
    justify-content: center;
  }

  .bulk-actions-divider {
    display: none;
  }
  
  .bulk-actions-right {
    justify-content: center;
  }

  .btn-danger-bulk {
    width: 100%;
  }
}

.product-thumb {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumb img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* =========================
   LAYOUT PRINCIPAL
========================= */
.product-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

/* =========================
   IMAGEN
========================= */
.product-image-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================
   UPLOAD BOX 1:1
========================= */
.image-upload-box {
  width: 100%;
  aspect-ratio: 1 / 1;

  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 16px;

  background: var(--bg-overlay);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  overflow: hidden;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3);
}

.image-upload-box:hover {
  border-color: var(--color-primary);
  background: var(--bg-overlay);
  transform: translateY(-2px);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(96, 165, 250, 0.15);
}

.image-upload-box input {
  display: none;
}

.image-upload-box span {
  color: var(--text-muted);
}

.image-upload-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* =========================
   FORM RIGHT
========================= */
.product-form-right {
  background: transparent;
}






/* =========================================================
    VARIANT MODE SELECTOR
========================================================= */

.variant-mode-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variant-mode-selector label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.variant-mode-selector select {
  min-width: 180px;

  padding: 10px 12px;

  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

.variant-mode-selector select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}


/* =========================================================
   SHARED FORM CONTAINERS
========================================================= */

.simple-mode-container,
.variant-card {

  background: var(--bg-overlay);

  border: 1px solid var(--border-color);
  border-radius: 18px;

  padding: 24px;

  backdrop-filter: blur(10px);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.25);

  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;

  animation: fadeIn 0.2s ease;
}

.link-modal-content {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  max-width: 700px;
  width: 100%;
  animation: fadeIn 0.2s ease;
  overflow: hidden;
  color: var(--text-main);
}

.simple-mode-container:hover,
.variant-card:hover {

  border-color: rgba(255,255,255,0.12);

  box-shadow:
    0 14px 40px rgba(0,0,0,0.32);
}
/* =========================================================
   HEADER
========================================================= */

.simple-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 24px;
}

.simple-mode-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);

  margin-bottom: 4px;
}

.simple-mode-description {
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================
   GRID
========================================================= */

.simple-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;

  margin-bottom: 20px;
}

/* =========================================================
   CARD
========================================================= */

.simple-card {

  background: var(--bg-card);

  border: 1px solid var(--border-color);
  border-radius: 14px;

  padding: 20px;

  transition: 0.2s ease;
}

.simple-card:hover {
  border-color: rgba(255,255,255,0.12);
}

.simple-card h4 {
  margin: 0 0 18px 0;

  font-size: 15px;
  font-weight: 600;

  color: var(--color-primary);
}

.simple-card label {
  display: block;

  margin-bottom: 8px;

  font-size: 12px;
  color: var(--text-muted);
}

/* =========================================================
   SELECTS
========================================================= */

.simple-card select,
.simple-card input,
.simple-card textarea {

  width: 100%;

  padding: 11px 12px;

  background: var(--bg-main);

  border: 1px solid var(--border-color);
  border-radius: 10px;

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

.simple-card select:focus,
.simple-card input:focus,
.simple-card textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}

/* =========================================================
   MULTISELECT
========================================================= */

.simple-multiselect {
  min-height: 180px;

  padding: 10px !important;

  overflow-y: auto;
}

.simple-multiselect option {

  padding: 10px;
  margin-bottom: 4px;

  border-radius: 8px;

  background: transparent;
  color: var(--text-main);

  transition: 0.15s ease;
}

.simple-multiselect option:checked {
  background: var(--color-primary);
  color: var(--color-primary-text);
}


/* =========================
   SELECTOR CHIPS
========================= */

.selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.selector-chip {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;

  border-radius: 14px;
  border: 1px solid var(--border-color);

  background: var(--bg-input);
  color: var(--text-main);

  cursor: pointer;
  transition: .18s ease;

  font-size: 13px;
  font-weight: 500;
}

.selector-chip:hover {
  transform: translateY(-1px);

  background: var(--bg-overlay);
  border-color: var(--border-color);
}

.selector-chip.active {
  background:
    var(--bg-overlay);

  border-color:
    var(--bg-overlay);

  color: var(--color-primary-hover);

  box-shadow:
    0 0 0 1px var(--bg-overlay);
}

.selector-dot {
  width: 14px;
  height: 14px;

  border-radius: 999px;

  border: 2px solid
    rgba(255,255,255,.2);

  flex-shrink: 0;
}

/* =========================================================
   GLOBAL ATTRIBUTES GRID
========================================================= */

.simple-attributes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}


/* =========================================================
   GLOBAL CONFIG FIELDS
========================================================= */

.simple-global-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.simple-global-field label {

  font-size: 11px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.6px;

  color: var(--text-muted);
}

.simple-global-field select,
.simple-global-field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.simple-global-field select:hover,
.simple-global-field input:hover {
  border-color: rgba(255,255,255,0.14);
}

.simple-global-field select:focus,
.simple-global-field input:focus {

  border-color: var(--color-primary);

  box-shadow:
    0 0 0 3px rgba(37,99,235,0.16),
    0 10px 24px rgba(37,99,235,0.12);

  transform: translateY(-1px);
}






/* =========================================================
   SUMMARY
========================================================= */

.simple-summary {
  margin-top: 24px;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 14px;
  padding: 22px;
}

.simple-summary h4 {
  margin: 0 0 20px 0;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 600;
}

.simple-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.simple-summary-item {

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.simple-summary-label {

  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.simple-summary-value {

  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  word-break: break-word;
}

/* =========================================================
   GENERATE BUTTON
========================================================= */

.simple-generate-btn {

  margin-top: 24px;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-hover)
  );

  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.simple-generate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(37,99,235,0.35);
}

/* =========================================================
   GENERATED COUNT
========================================================= */

.generated-count {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================
   ADVANCED VARIANT CARD
========================================================= */


.simple-card h4,
.variant-card h4 {

  margin: 0 0 18px 0;

  font-size: 15px;
  font-weight: 600;

  color: var(--color-primary);

  letter-spacing: 0.2px;
}

/* =========================================================
   TEXTAREA
========================================================= */

.form-group textarea {
  width: 100%;
  padding: 12px;
  resize: vertical;
  border-radius: 10px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-family: inherit;
}

.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* =========================================================
   FORM ACTIONS
========================================================= */

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 25px;
  margin-top: 30px;
  border-top: 1px solid var(--border-color);
}

.btn-secondary {

  background: var(--color-secondary);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s ease;
}

.btn-secondary:hover {
  background: var(--color-secondary);
}

/* =========================================================
   SCROLLBAR
========================================================= */

.simple-multiselect::-webkit-scrollbar,
.modal::-webkit-scrollbar {
  width: 8px;
}

.simple-multiselect::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track {
  background: transparent;
}

.simple-multiselect::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {

  background: var(--bg-overlay);
  border-radius: 20px;
}

.simple-multiselect::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .simple-summary-grid,
  .simple-attributes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .simple-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .product-layout {
    grid-template-columns: 1fr;
  }

  .simple-summary-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .simple-mode-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary,
  .simple-generate-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   VARIANT TABS
========================= */

.variant-tabs {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  backdrop-filter: blur(8px);
}

.variant-tab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.variant-tab:hover {
  background: var(--bg-overlay);
  color: var(--text-main);
}

.variant-tab.active {
  background: var(--color-primary);
  color: var(--color-primary-text);
  box-shadow:
    0 0 0 1px var(--border-color),
    0 8px 20px rgba(37,99,235,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
  .variant-tabs {
    width: 100%;
  }
  .variant-tab {
    flex: 1;
    text-align: center;
  }

}

/* =========================================================
   VARIANTS HEADER
========================================================= */

.variants-header {

  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  gap: 24px;

  margin-bottom: 28px;
  padding-bottom: 20px;

  border-bottom: 1px solid var(--border-color);
}

.variants-header-left {

  display: flex;
  flex-direction: column;
  gap: 18px;
}

.variants-header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variants-section-label {

  font-size: 22px;
  font-weight: 700;

  color: var(--text-main);

  letter-spacing: -0.3px;
}

.variants-section-description {

  font-size: 13px;
  color: var(--text-muted);

  max-width: 600px;
}


/* =========================================================
   VARIANTS HEADER
========================================================= */

.variants-header {

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;
  flex-wrap: wrap;

  margin-bottom: 24px;
}

.variants-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.variants-title {

  font-size: 22px;
  font-weight: 700;

  color: var(--text-main);
}

.variants-description {

  font-size: 13px;
  color: var(--text-muted);
}

.variants-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* =========================================================
   VARIANT CARD HEADER
========================================================= */

.variant-card-header {

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 24px;
}

.variant-card-title {

  font-size: 18px;
  font-weight: 600;

  color: var(--text-main);

  margin-bottom: 4px;
}

.variant-card-subtitle {

  font-size: 13px;
  color: var(--text-muted);
}

.variant-badge {

  min-width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,0.25),
      rgba(37,99,235,0.1)
    );

  border: 1px solid rgba(37,99,235,0.25);

  color: var(--color-primary);

  font-size: 13px;
  font-weight: 700;
}

/* =========================================================
   SECTION TITLE
========================================================= */

.variant-section-title {

  margin-top: 28px;
  margin-bottom: 18px;

  font-size: 14px;
  font-weight: 600;

  color: var(--color-primary);

  padding-bottom: 10px;

  border-bottom:
    1px solid var(--border-color);
}







/* =========================================================
    MOBILE FIXES PRODUCT FORM
========================================================= */

@media (max-width: 768px) {

  /* =========================
     MODAL
  ========================= */

  .modal {
    right: 0; bottom: 0;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* =========================
     TITLES
  ========================= */

  .modal h2 {
    font-size: 20px;
    padding: 18px;
  
  color: var(--text-main);}

  .variants-title {
    font-size: 18px;
  }

  .variants-description {
    font-size: 12px;
    line-height: 1.5;
  }

  /* =========================
     VARIANTS HEADER
  ========================= */

  .variants-header {

    flex-direction: column;
    align-items: stretch;

    gap: 18px;

    padding-bottom: 18px;
  }

  .variants-header-info {
    width: 100%;
  }

  /* CONTENEDOR DERECHO */
  .variants-header-actions {

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 12px;
  }

  /* =========================
     BOTN AGREGAR VARIANTE
  ========================= */

  .variants-header-actions .btn-primary {

    width: 100%;
    height: 46px;

    justify-content: center;

    flex-shrink: 0;
  }

  /* =========================
     TABS
  ========================= */

  .variant-tabs {

    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;

    padding: 4px;
    gap: 4px;

    flex-shrink: 0;
  }

  .variant-tab {

    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    font-size: 13px;
    text-align: center;

    white-space: nowrap;
  }

  /* =========================
     FIX MOVIMIENTO FEO
  ========================= */

  .variants-header-actions:has(.variant-tabs) {
    min-height: 104px;
  }

  /* =========================
     FORM ACTIONS
  ========================= */

  .form-actions {

    flex-direction: column-reverse;
    gap: 10px;
  }

  .form-actions button {
    width: 100%;
    height: 46px;
  }

  /* =========================
     VARIANT CARDS
  ========================= */

  .variant-card,
  .simple-mode-container,
  .simple-card {
    padding: 18px;
  }

  /* =========================
     INPUTS
  ========================= */

  .form-group input,
  .form-group select,
  .form-group textarea,
  .simple-global-field input,
  .simple-global-field select {

    height: 48px;
    font-size: 14px;
  }

  .form-group textarea {
    min-height: 100px;
  }

  /* =========================
     SUMMARY
  ========================= */

  .simple-summary {
    padding: 18px;
  }

  .simple-summary-item {
    padding: 14px;
  }

  /* =========================
     IMAGE
  ========================= */

  .product-image-box {
    width: 100%;
  }

  .image-upload-box {
    max-width: 100%;
  }
}





/* =========================================================
    MOBILE COMPACT UI
========================================================= */

@media (max-width: 768px) {

  /* =========================
     MODAL
  ========================= */

  .modal {
    right: 0; bottom: 0;
    border-radius: 0;
  }

  .modal h2 {
    padding: 14px 16px;
    font-size: 17px;
  
  color: var(--text-main);}

  /* =========================
     GENERAL PADDINGS
  ========================= */

  .form-grid {
    padding: 14px;
    gap: 12px;
  }

  .variant-card,
  .simple-mode-container,
  .simple-card,
  .simple-summary {
    padding: 14px;
  }

  /* =========================
     LABELS
  ========================= */

  .form-group label,
  .simple-global-field label,
  .simple-card label,
  .simple-summary-label {

    font-size: 10px;
    margin-bottom: 6px;
  }

  /* =========================
     INPUTS
  ========================= */

  .form-group input,
  .form-group select,
  .form-group textarea,
  .simple-global-field input,
  .simple-global-field select,
  .simple-card input,
  .simple-card select {

    height: 40px;

    padding: 0 12px;

    font-size: 12px;
    border-radius: 10px;
  }

  .form-group textarea {
    min-height: 90px;
    padding: 12px;
  }

  /* =========================
     BUTTONS
  ========================= */

  .btn-primary,
  .btn-secondary,
  .btn-delete,
  .simple-generate-btn {

    height: 40px;

    padding: 0 12px;

    font-size: 12px;
    border-radius: 10px;
  }

  /* =========================
     VARIANT TABS
  ========================= */

  .variant-tabs {
    padding: 3px;
    gap: 3px;
    border-radius: 10px;
  }

  .variant-tab {

    min-height: 38px;

    padding: 0 10px;

    font-size: 11px;
    border-radius: 8px;
  }

  /* =========================
     TITLES
  ========================= */

  .variants-title,
  .simple-mode-title,
  .variant-card-title {

    font-size: 16px;
  }

  .variants-description,
  .simple-mode-description,
  .variant-card-subtitle {

    font-size: 11px;
  }

  .variant-section-title {
    font-size: 13px;
    margin-top: 20px;
    margin-bottom: 14px;
  }

  /* =========================
     SUMMARY
  ========================= */

  .simple-summary-value {
    font-size: 12px;
  }

  /* =========================
     BADGE
  ========================= */

  .variant-badge {

    min-width: 34px;
    height: 34px;

    font-size: 11px;
    border-radius: 10px;
  }

  /* =========================
     IMAGE
  ========================= */

  .image-upload-box {
    border-radius: 10px;
  }

  /* =========================
     ACTIONS
  ========================= */

  .form-actions {
    margin-top: 20px;
    padding-top: 18px;
    gap: 8px;
  }

  /* =========================
     MULTISELECT
  ========================= */

 
}








/* =========================================================
    VARIANTS TABLE REDESIGN (COMPACT PRO)
========================================================= */

.variants-preview-container {
  margin-bottom: 24px;

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 18px;

  overflow: hidden;
  backdrop-filter: blur(12px);
}

/* =========================================================
   HEADER
========================================================= */

.variants-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 18px;

  border-bottom: 1px solid var(--border-color);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.02),
      transparent
    );
}

.variants-preview-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.variants-preview-description {
  font-size: 12px;
  color: var(--text-muted);
}

.variants-preview-count {
  min-width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: var(--bg-overlay);
  border: 1px solid var(--bg-overlay);

  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

/* =========================================================
   TABLE WRAPPER
========================================================= */

.variants-preview-table-wrapper {
  overflow: auto;
  max-height: 420px;
}

/* scrollbar dark */
.variants-preview-table-wrapper::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.variants-preview-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 999px;
}

/* =========================================================
   TABLE
========================================================= */

.variants-preview-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

/* sticky header */
.variants-preview-table thead {
  position: sticky;
  top: 0;
  z-index: 10;

  background: var(--bg-card);
  backdrop-filter: blur(20px);
}

/* =========================================================
   HEADERS
========================================================= */

.variants-preview-table th {
  text-align: left;

  padding: 12px 14px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--text-muted);

  border-bottom:
    1px solid var(--border-color);

  white-space: nowrap;
}

/* =========================================================
   CELLS
========================================================= */

.variants-preview-table td {
  padding: 10px 14px;

  font-size: 12px;
  color: var(--text-main);

  border-bottom:
    1px solid rgba(255,255,255,0.04);

  vertical-align: middle;
}

/* zebra */
.variants-preview-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.015);
}

.variants-preview-table tbody tr {
  transition: .18s ease;
}

.variants-preview-table tbody tr:hover {
  background: rgba(96,165,250,0.06);
}

/* =========================================================
   FIRST COLUMN (#)
========================================================= */

.variants-preview-table td:first-child {
  width: 50px;
  color: var(--text-muted);
  font-weight: 700;
}

/* =========================================================
   SKU STYLE
========================================================= */

.variants-preview-table td:nth-child(2) {
  font-family: monospace;
  font-size: 12px;
  color: var(--color-primary-hover);
  font-weight: 600;
}

/* =========================================================
   PRICE
========================================================= */

.variants-preview-table td:nth-child(6) {
  font-weight: 700;
  color: var(--color-success);
}

/* =========================================================
   ATTRIBUTES CELL
========================================================= */

.variant-attributes-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  max-width: 260px;
}

/* =========================================================
   ATTRIBUTE CHIP
========================================================= */

.variant-attribute-tag {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  padding: 4px 8px;

  border-radius: 999px;

  background: var(--bg-overlay);

  border: 1px solid var(--border-color);

  transition: .15s ease;
}

.variant-attribute-tag:hover {
  background: var(--bg-overlay);
}

.variant-attribute-name {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;

  color: var(--text-muted);
}

.variant-attribute-value {
  font-size: 11px;
  color: var(--text-main);
  font-weight: 600;
}

/* =========================================================
   STATUS
========================================================= */

.variant-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 90px;

  padding: 5px 10px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
}

.variant-status.active {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.22);
  color: var(--color-success);
}

.variant-status.inactive {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.22);
  color: var(--color-danger);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .variants-preview-table-wrapper {
    max-height: 360px;
  }

  .variants-preview-table {
    min-width: 720px;
  }

  .variants-preview-table th,
  .variants-preview-table td {
    padding: 10px;
    font-size: 11px;
  }

  .variant-attributes-cell {
    max-width: 180px;
  }
}



















/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .variants-preview-header {

    padding: 16px;

    align-items: flex-start;
    gap: 12px;
  }

  .variants-preview-title {
    font-size: 16px;
  }

  .variants-preview-description {
    font-size: 11px;
  }
  .variants-preview-table th,
  .variants-preview-table td {
    padding: 12px 14px;
    font-size: 12px;
  }
}

/* =========================================================
    DARK SELECT OPTIONS FIX
========================================================= */

/* Select base */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}

/* Opciones del dropdown */
select option {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  padding: 10px;
}

/* Opcin seleccionada */
select option:checked {
  background: var(--color-primary) !important;
  color: var(--text-main) !important;
}

/* Hover/focus en algunos navegadores */
select option:hover,
select option:focus {
  background: var(--color-secondary) !important;
  color: var(--text-main) !important;
}

/* Fix especfico para tus clases */
.form-group select,
.simple-card select,
.simple-global-field select,
.filters-bar select,
.variant-mode-selector select {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color);
}

/* Flecha del select ms limpia */
.form-group select,
.simple-card select,
.simple-global-field select,
.filters-bar select,
.variant-mode-selector select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px;
  background-repeat: no-repeat;

  padding-right: 40px;
}




/* ==========================================
   SELECTOR HEADER
========================================== */

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.selected-counter {
  padding: 6px 12px;
  border-radius: 999px;

  background: var(--bg-overlay);
  border: 1px solid var(--bg-overlay);

  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

/* ==========================================
   COLORES
========================================== */

.color-selector-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(110px, 1fr));

  gap: 14px;
}

.color-circle {
  border: 1px solid var(--border-color);
  background: var(--bg-input);

  border-radius: 18px;
  padding: 14px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  cursor: pointer;
  transition: .18s ease;
}

.color-circle:hover {
  transform: translateY(-2px);
  background: var(--bg-overlay);
}

.color-circle.active {
  border: 2px solid var(--color-primary);
  background:
    var(--bg-overlay);
}

.color-circle-preview {
  width: 52px;
  height: 52px;

  border-radius: 999px;

  border:
    3px solid rgba(255,255,255,.18);

  box-shadow:
    inset 0 0 0 1px var(--border-color),
    0 8px 20px rgba(0,0,0,.25);
}

.color-circle span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

/* ==========================================
   TALLAS
========================================== */

.size-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.size-chip {
  min-width: 70px;
  height: 46px;

  border-radius: 14px;

  border: 1px solid
    var(--border-color);

  background:
    var(--bg-input);

  color: var(--text-main);
  font-weight: 700;
  font-size: 14px;

  cursor: pointer;
  transition: .18s ease;
}

.size-chip:hover {
  transform: translateY(-2px);
}

.size-chip.active {
  background:
    var(--bg-overlay);

  border: 2px solid var(--color-primary);

  color: var(--color-primary-hover);
}
/* =========================================================
   MOBILE - COLOR SELECTOR COMPACT
========================================================= */

@media (max-width: 768px) {

  /* grid ms compacto */
  .color-selector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* tarjeta pequea */
  .color-circle {
    width: auto;
    min-width: unset;

    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    padding: 8px 10px;
    border-radius: 999px;

    min-height: unset;
  }

  /* sin hover raro en mobile */
  .color-circle:hover {
    transform: none;
  }

  /* crculo pequeo */
  .color-circle-preview {
    width: 18px;
    height: 18px;
    border-width: 2px;
    flex-shrink: 0;

    box-shadow: none;
  }

  /* texto ms pequeo */
  .color-circle span {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* activo ms limpio */
  .color-circle.active {
    border: 1px solid var(--color-primary);
    background: var(--bg-overlay);
  }

  /* contador ms chico */
  .selected-counter {
    padding: 4px 10px;
    font-size: 11px;
  }

  /* tallas tambin compactas */
  .size-selector {
    gap: 8px;
  }

  .size-chip {
    min-width: 52px;
    height: 38px;

    border-radius: 12px;
    font-size: 13px;
    padding: 0 12px;
  }
}











/* ==========================================
   VER MS BUTTON
========================================== */

.see-more-btn {
  width: 100%;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: var(--bg-overlay);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  transition: .2s ease;
}

.see-more-btn:hover {
  background: var(--bg-overlay);
}

/* ==========================================
   MODAL SELECTOR
========================================== */

.selector-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.75);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.selector-modal {
  width: min(850px, 95vw);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  padding: 28px;
}

.selector-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.selector-modal-header button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: var(--bg-overlay);
  color: var(--text-main);
  cursor: pointer;
}

.modal-grid {
  grid-template-columns:
    repeat(auto-fill, minmax(110px, 1fr));
}

.modal-size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.modal-ready-btn {
  margin-top: 24px;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 16px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

/* MOBILE */

@media (max-width: 768px) {
  .selector-modal {
    border-radius: 22px;
    padding: 18px;
  }

  .modal-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .modal-ready-btn {
    position: sticky;
    bottom: 0;
  }
}


.advanced-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.advanced-color-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  cursor: pointer;
  transition: .2s;
  min-width: 180px;
}

.advanced-color-item:hover {
  transform: translateY(-2px);
}

.advanced-color-item.active {
  border: 2px solid var(--color-primary);
  background: rgba(79,140,255,.15);
}

.advanced-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.25);
  flex-shrink: 0;
}

.advanced-color-item small {
  opacity: .65;
  font-size: 11px;
}

.advanced-selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


.add-mini-btn{
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border-color);
  border-radius: 12px;

  background:
    linear-gradient(
      180deg,
      var(--bg-overlay),
      var(--bg-overlay)
    );

  color: var(--color-primary-hover);

  cursor: pointer;
  transition: .22s ease;

  flex-shrink: 0;
}

.add-mini-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(96,165,250,.35);

  background:
    linear-gradient(
      180deg,
      var(--bg-overlay),
      var(--bg-overlay)
    );

  box-shadow:
    0 8px 18px var(--bg-overlay);
}

.add-mini-btn:active{
  transform: scale(.96);
}

.create-color-modal{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.create-color-modal input[type="color"]{
  width: 100%;
  height: 70px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
}

/* ==========================================
   PREMIUM CREATE MODALS
========================================== */

.create-modal{
  width: min(560px, 95vw);
  background:
    linear-gradient(
      180deg,
      var(--bg-card),
      var(--bg-main)
    );
  border:
    1px solid var(--border-color);
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,.45);
  animation:
    modalPop .22s ease;
}

@keyframes modalPop{
  from{
    opacity: 0;
    transform:
      translateY(20px)
      scale(.96);
  }
  to{
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

/* HEADER */

.create-modal-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding: 26px 28px;

  border-bottom:
    1px solid var(--bg-overlay);
}

.create-modal-header h2{
  margin: 0;
  color: var(--text-main);
  font-size: 24px;
  font-weight: 800;
}

.create-modal-header p{
  margin-top: 8px;

  color:
    var(--text-muted);

  font-size: 13px;
}

.close-modal-btn{
  width: 42px;
  height: 42px;

  border: none;
  border-radius: 14px;

  background:
    var(--bg-overlay);

  color: var(--text-main);
  cursor: pointer;

  transition: .2s;
}

.close-modal-btn:hover{
  background:
    var(--border-color);

  transform: rotate(90deg);
}

/* BODY */
.create-modal-body{
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* FORM */

.form-field-modern{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field-modern label{
  font-size: 12px;
  font-weight: 700;

  color:
    var(--text-muted);
}

.form-field-modern input,
.form-field-modern textarea{
  height: 54px;
  padding: 0 18px;
  border-radius: 18px;
  border:
    1px solid var(--border-color);
  background:
    var(--bg-input);
  color: var(--text-main);
  font-size: 14px;
  transition: .2s;
}

.form-field-modern textarea{
  height: auto;
  padding: 16px;
  resize: none;
}

.form-field-modern input:focus,
.form-field-modern textarea:focus{
  outline: none;

  border-color:
    var(--bg-overlay);
  box-shadow:
    0 0 0 4px
    var(--bg-overlay);
}

/* COLOR PREVIEW */
.color-preview-card{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 24px;
  background:
    var(--bg-input);
  border:
    1px solid var(--bg-overlay);
}

.color-preview-circle{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border:
    4px solid rgba(255,255,255,.15);
  box-shadow:
    0 12px 30px rgba(0,0,0,.25);
}

.color-preview-info{
  display: flex;
  flex-direction: column;
}

.color-preview-name{
  color: var(--text-main);
  font-size: 20px;
  font-weight: 700;
}

.color-preview-hex{
  color:
    var(--text-muted);

  font-size: 13px;
}

/* COLOR PICKER */

.premium-color-picker{
  width: 100%;
  height: 80px !important;
  border-radius: 20px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
}

/* SIZE */

.size-preview-card{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 24px;
  background:
    var(--bg-input);
  border:
    1px solid var(--bg-overlay);
}

.size-preview-chip{
  min-width: 90px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background:
    var(--bg-overlay);
  border:
    1px solid var(--bg-overlay);
  color: var(--color-primary-hover);
  font-weight: 800;
  font-size: 22px;
}

.size-preview-title{
  color: var(--text-main);
  font-weight: 700;
}

.size-preview-description{
  color:
    rgba(255,255,255,.45);

  font-size: 13px;
}

/* FOOTER */

.create-modal-footer{
  display: flex;
  gap: 12px;

  padding: 24px 28px;

  border-top:
    1px solid var(--bg-overlay);
}

.cancel-btn{
  flex: 1;
  height: 56px;

  border-radius: 18px;
  border: none;

  background:
    var(--bg-overlay);

  color: var(--text-main);
  font-weight: 700;
  cursor: pointer;
}

.save-btn{
  flex: 1;
  height: 56px;

  border-radius: 18px;
  border: none;

  background:
    linear-gradient(
      135deg,
      var(--color-primary),
      var(--color-primary)
    );

  color: var(--color-primary-text);
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 12px 24px
    var(--bg-overlay);

  transition: .2s;
}

.save-btn:hover{
  transform: translateY(-2px);
}

/* MOBILE */

@media(max-width:768px){

  .create-modal{
    border-radius: 26px;
  }

  .create-modal-header{
    padding: 20px;
  }

  .create-modal-body{
    padding: 20px;
  }

  .create-modal-footer{
    padding: 20px;
    flex-direction: column;
  }

  .color-preview-circle{
    width: 58px;
    height: 58px;
  }

  .color-preview-name{
    font-size: 17px;
  }
}

.modal-title-group{
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title-group h3{
  margin: 0;
}




/* ==========================================
   COLOR + TALLA LADO A LADO
========================================== */

.variant-main-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* color ocupa su espacio */
.variant-color-group{
  min-width: 0;
}

/* talla ms compacta */
.variant-size-group{
  display: flex;
  flex-direction: column;
}

/* grid de colores ms ordenado */
.variant-color-group .advanced-color-grid{
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(180px, 1fr));

  gap: 10px;
}

/* tallas ms compactas */
.variant-size-group .advanced-selector-grid{
  gap: 8px;
}

/* mobile: uno debajo del otro */
@media(max-width:768px){

  .variant-main-grid{
    grid-template-columns: 1fr;
  }
}





/* ==========================
   ADD VARIANT CARD
========================== */

.add-variant-card {
  width: 100%;
  border: 2px dashed rgba(255,255,255,0.15);
  background: var(--bg-overlay);

  border-radius: 18px;
  padding: 18px 24px;

  margin-top: 18px;

  display: flex;
  align-items: center;
  gap: 18px;

  cursor: pointer;
  transition: all 0.25s ease;

  color: var(--text-main);
}

.add-variant-card:hover {
  border-color: var(--color-primary);
  background: rgba(91, 140, 255, 0.08);

  transform: translateY(-2px);
}

.add-variant-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;

  border-radius: 14px;

  background: rgba(91, 140, 255, 0.15);
  border: 1px solid rgba(91, 140, 255, 0.25);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
  font-weight: 600;

  color: var(--color-primary-hover);
}

.add-variant-content {
  text-align: left;
}

.add-variant-title {
  font-size: 15px;
  font-weight: 600;
}

.add-variant-subtitle {
  font-size: 13px;
  opacity: 0.65;
  margin-top: 2px;
}
/* =========================
   TABLE WRAPPER (MOBILE SCROLL)
========================= */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
}
.table-wrapper::-webkit-scrollbar {
  height: 6px;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--bg-overlay);
  border-radius: 999px;
}

/* =========================================================
   IMAGE GALLERY MODAL
========================================================= */

.modal-overlay.gallery-overlay {
  z-index: 10001;
}

.modal.gallery-modal {
  max-width: 800px;
  width: 90%;
}

.image-dropzone {
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: min(40px, 5vw);
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
  background: var(--bg-overlay);
  transition: all 0.2s ease;
}

.image-dropzone:hover {
  background: var(--bg-overlay);
}

.image-dropzone-icon {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.image-dropzone-text {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-main);
}

.image-dropzone-subtext {
  margin: 5px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  max-height: 300px;
  overflow-y: auto;
}

.gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.gallery-item.main-item {
  border: 2px solid var(--color-primary);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.gallery-item-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.gallery-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: space-between;
  padding: 5px;
}

.gallery-item-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
}

.gallery-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}

/* =========================================================
   WARNING MODAL
========================================================= */

.warning-modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-color);
  overflow: hidden;
  animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.warning-modal-header {
  padding: 24px 24px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.warning-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-danger);
  flex-shrink: 0;
}

.warning-icon-wrapper.warning-yellow {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.warning-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-main);
  font-weight: 600;
}

.warning-modal-body {
  padding: 0 24px 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.warning-modal-footer {
  padding: 16px 24px;
  background: var(--bg-overlay);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--border-color);
}

.warning-btn-cancel {
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.warning-btn-cancel:hover {
  background: var(--bg-overlay);
}

.warning-btn-confirm {
  background: var(--color-danger);
  border: none;
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.warning-btn-confirm:hover {
  background: var(--color-danger-hover);
}

.warning-btn-confirm.btn-yellow {
  background: var(--color-warning);
}

.warning-btn-confirm.btn-yellow:hover {
  background: var(--color-warning-hover);
}












/* =========================
   PRODUCT VIEW MODAL RESPONSIVE
========================= */
.pvm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-color);
}

.pvm-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pvm-tabs {
  display: flex;
  gap: 24px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  overflow-x: auto;
  white-space: nowrap;
}

.pvm-content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.pvm-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pvm-table-container {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow-x: auto;
}

@media (max-width: 768px) {
  .pvm-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
  }
  
  .pvm-header .close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .pvm-header-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .pvm-tabs {
    padding: 0 16px;
    gap: 16px;
  }

  .pvm-content-grid {
    grid-template-columns: 1fr;
  }

  .pvm-details-grid {
    grid-template-columns: 1fr;
  }

  .modal-content {
    padding: 16px !important;
  }

  .modal-actions {
    padding: 16px !important;
  }
}
.pvm-container {
  max-width: 1000px;
  width: 95%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.pvm-image-container {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg-overlay);
  overflow: hidden;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.pvm-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.pvm-title {
  margin: 0 0 4px 0;
  font-size: 24px;
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.2;
}

.pvm-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.pvm-sku {
  font-size: 14px;
  color: var(--text-muted);
}

.pvm-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-color);
}

.pvm-stock {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

/* =========================================
   CUSTOM DROPDOWN (ADD ATTRIBUTE)
   ========================================= */
.custom-dropdown-container {
  position: relative;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 10px;
}

.custom-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.custom-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.dropdown-arrow {
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 100;
  animation: dropdownFadeIn 0.2s ease forwards;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.custom-dropdown-group {
  margin-bottom: 8px;
}

.custom-dropdown-group:last-child {
  margin-bottom: 0;
}

.custom-dropdown-label {
  padding: 4px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.custom-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-main);
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, padding-left 0.15s ease;
}

.custom-dropdown-item:hover {
  background: var(--bg-overlay);
  padding-left: 20px;
}
 
.custom-table-checkbox {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--bg-main);
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color); /* Usamos el borde del tema por defecto */
  border-radius: 4px;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Efecto hover para notar interactividad */
.custom-table-checkbox:hover {
  border-color: var(--color-primary);
}

.custom-table-checkbox::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  /* El fondo del gancho toma el color de texto contrastante */
  background-color: var(--color-primary-text);
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.custom-table-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.custom-table-checkbox:checked::before {
  transform: scale(1);
}
/* =========================
   MODAL RESPONSIVE FIXES
========================= */
.pvm-tabs {
  white-space: nowrap;
}

.pvm-tabs::-webkit-scrollbar {
  height: 6px;
}
.pvm-tabs::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.pvm-tabs button {
  flex-shrink: 0;
  white-space: nowrap;
}

.pvm-modal-body {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  background: var(--bg-main);
}

.pvm-modal-footer {
  background: var(--bg-card);
  padding: 24px 32px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 768px) {
  .pvm-modal-body {
    padding: 16px;
  }
  .pvm-modal-footer {
    padding: 16px;
    flex-direction: column;
  }
  .pvm-modal-footer button {
    width: 100%;
    justify-content: center;
  }
}


/* Animations */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }



/* RESPONSIVE CUSTOMER DETAILS MODAL */
.customer-modal-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.customer-modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.customer-modal-sale-details { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
.customer-modal-tabs { display: flex; padding: 0 40px; border-bottom: 1px solid var(--border-color); background: var(--bg-card);  overflow-x: auto; white-space: nowrap; }
.customer-modal-tabs::-webkit-scrollbar { display: none; }
.customer-modal-header-content { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }

@media (max-width: 768px) {
  .customer-modal-grid-3 { 
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    gap: 12px; 
    padding-bottom: 8px; 
    -webkit-overflow-scrolling: touch; 
  }
  .customer-modal-grid-3 > div { 
    flex: 0 0 auto; 
    min-width: 200px; 
  }
  .customer-modal-grid-3::-webkit-scrollbar { display: none; }
  .customer-modal-grid-2 { grid-template-columns: 1fr; }
  .customer-modal-sale-details { grid-template-columns: 1fr; gap: 20px; }
  .customer-modal-tabs { padding: 0 16px; }
  .customer-modal-header-content { flex-direction: column; align-items: flex-start; gap: 10px; }
  .customer-modal-container { padding: 16px !important; }
}



/* RESPONSIVE TABLE & GENERAL PAGE */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; border-radius: 10px; border: 1px solid var(--border-color); }
.suppliers-table { width: 100%; min-width: 800px; border: none; }
.modal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.filters-container-inner { display: flex; gap: 10px; align-items: center; }

@media (max-width: 768px) {
  .suppliers-header { flex-direction: column; align-items: stretch !important; gap: 16px; width: 100%; }
  .suppliers-header > div { width: 100%; justify-content: stretch !important; }
  
  .header-actions {
    width: 100%;
    flex-wrap: nowrap !important;
    justify-content: stretch !important;
    gap: 12px !important;
  }
  .header-actions a, .header-actions button {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    padding: 12px !important;
    justify-content: center !important;
    width: 100%;
  }

  .modal-form-grid { grid-template-columns: 1fr; }
  .filters-container-inner { flex-direction: column; align-items: stretch; }
  .filters-container-inner > div { width: 100%; }
  .filters-container-inner > button { width: 100%; justify-content: center; }
}


.suppliers-container { width: 100%; max-width: 100%; overflow-x: hidden; }
.table-container { max-width: 100%; }


/* Removed card table layout to enable horizontal scroll */
@media (max-width: 768px) { 
  .customer-modal-tabs { flex-shrink: 0 !important; } 
  .customer-modal-container { padding: 20px !important; }
  .customer-modal-header-content h2 { font-size: 1.5rem !important; }
  .customer-modal-grid-3 > div { padding: 14px !important; gap: 12px !important; }
  .customer-modal-grid-3 h3 { font-size: 20px !important; }
  .customer-modal-grid-3 svg { width: 20px; height: 20px; } 
}



/* =========================
   CUSTOMERS PREMIUM TABLE
========================= */

.customers-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-top: -8px;
}

.customers-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.customer-row {
  background: var(--bg-card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.customer-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  background: var(--bg-overlay);
}

.customer-row td {
  padding: 16px;
  vertical-align: middle;
}

.customer-row td:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.customer-row td:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.code-badge {
  font-family: monospace;
  font-weight: 600;
  font-size: 13px;
  background: rgba(255,255,255,0.05);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.customer-info-cell {
  display: flex;
  align-items: center;
  gap: 14px;
}

.customer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.customer-name-group {
  display: flex;
  flex-direction: column;
}

.customer-fullname {
  font-weight: 600;
  color: var(--text-main);
  font-size: 15px;
}

.customer-email {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.vip-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: inset 0 0 0 1px currentColor;
}

.purchases-cell {
  display: flex;
  flex-direction: column;
}

.purchases-amount {
  font-weight: 700;
  color: var(--text-main);
  font-size: 15px;
}

.purchases-points {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 600;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.status-badge.active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.status-badge.inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-view {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}
.btn-view:hover {
  background: #3b82f6;
  color: white;
  transform: translateY(-2px);
}

.btn-edit {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}
.btn-edit:hover {
  background: #f59e0b;
  color: white;
  transform: translateY(-2px);
}

.btn-delete {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.btn-delete:hover {
  background: #ef4444;
  color: white;
  transform: translateY(-2px);
}

/* =========================
   LINK CUSTOMER MODAL
========================= */
.link-modal-content {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  max-width: 700px;
  width: 100%;
  animation: fadeIn 0.2s ease;
  overflow: hidden;
  color: var(--text-main);
}
.link-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.link-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-main);
}
.link-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
}
.link-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.link-modal-error {
  padding: 12px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.link-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.link-search-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.link-search-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}
.link-search-input-wrapper {
  position: relative;
}
.link-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}
.link-search-input {
  width: 100%;
  padding: 10px 10px 10px 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  box-sizing: border-box;
}
.link-search-loading {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-muted);
}
.link-results-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.link-result-item {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.link-result-item:hover {
  background: var(--bg-overlay);
}
.link-result-item-main {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
}
.link-result-item-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.link-selected-card {
  border-radius: 8px;
  padding: 16px;
  position: relative;
}
.link-selected-user {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.link-selected-pos {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.link-selected-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
}
.link-selected-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.link-selected-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
}
.link-selected-avatar-user {
  background: #3b82f6;
}
.link-selected-avatar-pos {
  background: #8b5cf6;
}
.link-selected-info {
  display: flex;
  flex-direction: column;
}
.link-selected-name {
  font-weight: 600;
  color: var(--text-main);
}
.link-selected-desc {
  font-size: 12px;
  color: var(--text-muted);
}
.link-modal-note {
  margin-top: 10px;
  padding: 16px;
  background: var(--bg-overlay);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.link-modal-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.link-submit-btn {
  display: flex;
  align-items: center;
  gap: 8px;
}


.products-container {
    padding: 20px;
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.products-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* KPI Cards */
.purchases-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.purchases-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.purchases-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.purchases-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3.5px;
    background: var(--color-primary);
}

.purchases-kpi-card.kpi-total::before { background: #6366f1; }
.purchases-kpi-card.kpi-debt::before { background: #ef4444; }
.purchases-kpi-card.kpi-paid::before { background: #10b981; }
.purchases-kpi-card.kpi-received::before { background: #3b82f6; }

.purchases-kpi-top {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.purchases-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    word-break: break-word;
    white-space: normal;
}

.purchases-kpi-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.purchases-kpi-icon-mini {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.purchases-kpi-card.kpi-total .purchases-kpi-icon-mini {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.purchases-kpi-card.kpi-debt .purchases-kpi-icon-mini {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.purchases-kpi-card.kpi-paid .purchases-kpi-icon-mini {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.purchases-kpi-card.kpi-received .purchases-kpi-icon-mini {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.purchases-kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metrics-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.metric-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-content {
    flex: 1;
}

.metric-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
}

.filters-container {
    margin-bottom: 20px;
}

.filters-container-inner {
    display: flex;
    gap: 12px;
    transition: margin-bottom 0.2s ease;
}

.filters-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    background: var(--bg-card);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    animation: fadeIn 0.2s ease;
}

.table-container {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow-x: auto;
}

.products-table {
    width: 100%;
    border-collapse: collapse;
}

.products-table th {
    background: var(--bg-input);
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.products-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 14px;
}

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

.products-table tbody tr:hover {
    background: var(--bg-input);
}

.status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-active {
    background: rgba(255, 193, 7, 0.1);
    color: #ffb300;
}

.status-abandoned {
    background: rgba(244, 67, 54, 0.1);
    color: #e53935;
}

.status-proforma {
    background: rgba(33, 150, 243, 0.1);
    color: #1e88e5;
}

.status-converted {
    background: rgba(76, 175, 80, 0.1);
    color: #43a047;
}

.source-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.btn-convert {
    background: transparent;
    border: none;
    color: #43a047;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: 0.2s;
}

.btn-convert:hover {
    background: rgba(76, 175, 80, 0.1);
}

.btn-reminder {
    background: transparent;
    border: none;
    color: #ff9800;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: 0.2s;
}

.btn-reminder:hover {
    background: rgba(255, 152, 0, 0.1);
}

.btn-view {
    background: transparent;
    border: none;
    color: #2196f3;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: 0.2s;
}

.btn-view:hover {
    background: rgba(33, 150, 243, 0.1);
}

.btn-delete {
    background: transparent;
    border: none;
    color: #f44336;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: 0.2s;
}

.btn-delete:hover {
    background: rgba(244, 67, 54, 0.1);
}

.loading-state {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modal Base Styles for Carts */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-overlay, rgba(0, 0, 0, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal-content {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border-color);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--color-danger);
}

/* Cart Form Modal specific */
.cart-form-modal-container {
  max-width: 1000px;
  width: 95%;
}
.cart-form-title {
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: bold;
}
.cart-form-group {
  margin-bottom: 15px;
}
.cart-form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-main);
}
.cart-form-dropdown-wrapper {
  position: relative;
  margin-bottom: 80px;
}
.cart-form-input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-input);
  color: var(--text-main);
}
.cart-form-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  z-index: 100;
  max-height: 600px;
  overflow-y: auto;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.cart-form-dropdown-item {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
}
.cart-form-dropdown-item:hover {
  background-color: var(--color-secondary);
}
.cart-form-clear-btn {
  margin-top: 8px;
  font-size: 12px;
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
}
.cart-form-dropdown-group {
  border-bottom: 2px solid var(--border-color);
}
.cart-form-group-title {
  padding: 8px 10px;
  font-weight: 600;
  background-color: var(--color-secondary);
  color: var(--text-main);
}
.cart-form-variant-item {
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
}
.cart-form-variant-item:hover {
  background-color: var(--color-secondary);
}
.cart-form-items-section {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}
.cart-form-text-center {
  text-align: center;
}
.cart-form-empty-td {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}
.cart-form-font-bold {
  font-weight: 600;
  color: var(--text-main);
}
.cart-form-sku-td {
  font-size: 0.85em;
  color: var(--text-muted);
}
.cart-form-quantity-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-main);
}
.cart-form-qty-btn {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-input);
  color: var(--text-main);
  cursor: pointer;
}
.cart-form-qty-btn:hover {
  background-color: var(--color-secondary);
}
.cart-form-delete-btn {
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
}
.cart-form-footer-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
}
.cart-form-total-title {
  margin: 0;
  font-size: 1.2rem;
  color: var(--color-success);
}
.cart-form-actions-box {
  display: flex;
  gap: 10px;
}
.cart-form-btn-cancel {
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  cursor: pointer;
}
.cart-form-btn-cancel:hover {
  background: var(--color-secondary);
}
.cart-form-btn-save {
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  background-color: var(--color-primary);
  color: var(--color-primary-text);
  cursor: pointer;
  font-weight: 600;
}
.cart-form-btn-save:hover {
  background-color: var(--color-primary-hover);
}

.modal-product-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-product-image {
  width: 48px;
  height: 48px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.modal-product-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--bg-input);
  border: 1px dashed var(--border-color);
}
.modal-variant-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

/* CartDetailsModal Styles */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}
.modal-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  color: var(--text-main);
}
.modal-body-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.purchase-modal-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  padding: 16px;
}
.modal-info-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 4px;
}
.modal-info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}
.modal-section-title {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}
.modal-empty-state {
  padding: 30px;
  color: var(--text-muted);
}
.modal-footer-label {
  font-size: 14px;
  padding: 16px;
}
.modal-footer-value {
  font-size: 1.15rem;
  padding: 16px;
  color: var(--color-success);
}

.modal-payment-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.modal-totals-section {
    width: 250px;
}
.text-right {
  text-align: right;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}

/* Responsive & Layout Updates */
.purchases-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.purchases-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.purchases-header-actions {
    display: flex;
    gap: 10px;
}

.purchases-header-actions button,
.purchases-header-actions a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {
    .purchases-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    
    .purchases-title {
        font-size: 22px;
        line-height: 1.2;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .purchases-header-actions {
        width: 100%;
        align-self: stretch;
        display: flex;
        gap: 10px;
    }

    .purchases-header-actions button,
    .purchases-header-actions a {
        flex: 1;
        width: 100%;
        justify-content: center;
        margin: 0 !important;
    }
    
    .filters-container-inner {
        flex-direction: column;
    }

    .table-container {
        border-radius: 8px;
    }
    
    .metric-card {
        padding: 16px;
    }
}

/* --- Create Purchase Page Styles --- */
.purchase-create-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 992px) {
    .purchase-create-grid {
        grid-template-columns: 1fr;
    }
}

.purchase-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.purchase-panel-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

/* Search Box */
.purchases-search-box {
    position: relative;
    margin-bottom: 20px;
}

.purchases-search-box > svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.purchases-search-input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-main);
    outline: none;
    transition: 0.2s;
    font-size: 14px;
}

.purchases-search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.search-results-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 400px;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--bg-input);
}

.search-result-item img {
    width: 40px;
    height: 40px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.search-result-details {
    flex: 1;
}

.search-result-title {
    font-weight: 600;
    color: var(--text-main);
    font-size: 14px;
}

.search-result-sku {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Cart Items */
.purchase-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.purchase-cart-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.purchase-cart-img {
    width: 56px;
    height: 56px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.purchase-cart-img-placeholder {
    width: 56px;
    height: 56px;
    background: var(--bg-overlay);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-color);
}

.purchase-cart-info {
    flex: 1;
    min-width: 150px;
}

.purchase-cart-name {
    font-weight: 600;
    color: var(--text-main);
    font-size: 15px;
    margin-bottom: 4px;
}

.purchase-cart-sku {
    font-size: 12px;
    color: var(--text-muted);
}

.purchase-cart-attributes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.purchase-cart-attr-badge {
    font-size: 11px;
    padding: 3px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    font-weight: 500;
}

.purchase-cart-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.purchase-cart-subtotal {
    font-weight: 800;
    color: var(--text-main);
    font-size: 18px;
    min-width: 90px;
    text-align: right;
}

.btn-remove-item {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid transparent;
    color: var(--color-danger);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

.btn-remove-item:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Form Styles */
.purchase-form-group {
    margin-bottom: 20px;
}

.purchase-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.purchase-form-input,
.purchase-form-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-main);
    outline: none;
    font-size: 14px;
    transition: 0.2s;
    font-family: inherit;
}

.purchase-form-input:focus,
.purchase-form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

textarea.purchase-form-input {
    resize: vertical;
    min-height: 80px;
}

/* Totals */
.purchase-totals {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.purchase-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    color: var(--text-muted);
    font-weight: 500;
}

.purchase-totals-row.grand-total {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* Responsive specific fixes for the grid/cart */
@media (max-width: 600px) {
    .purchase-cart-item {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .purchase-cart-info {
        width: 100%;
    }
    .purchase-cart-controls {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 12px;
        align-items: flex-end;
    }
    .purchase-cart-subtotal {
        text-align: right;
        padding-bottom: 8px; /* align with input text */
    }
    .purchase-cart-controls .btn-remove-item {
        grid-column: 1 / -1;
        width: 100%;
        height: 40px;
        margin-top: 4px;
        background: rgba(239, 68, 68, 0.05);
    }
    .purchase-panel {
        padding: 16px;
    }

    .modal-payment-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .modal-payment-form .form-group {
        width: 100%;
    }
    
    .modal-payment-form button {
        width: 100%;
    }
    
    .modal-totals-section {
        width: 100%;
    }
}

/* ==================================
   MOBILE / RESPONSIVE (CELULAR)
   ================================== */
@media (max-width: 768px) {
    .products-container {
        padding: 12px;
    }

    .products-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .purchases-header-actions {
        display: flex;
        width: 100%;
        gap: 8px;
    }

    .purchases-header-actions > * {
        flex: 1;
        justify-content: center;
        text-align: center;
    }

    .purchases-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 16px;
    }

    .purchases-kpi-card {
        padding: 12px 10px 10px 12px;
        gap: 6px;
        border-radius: 10px;
    }

    .purchases-kpi-value {
        font-size: 16px;
    }

    .purchases-kpi-bottom {
        gap: 6px;
    }

    .purchases-kpi-icon-mini {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .purchases-kpi-icon-mini svg {
        width: 12px;
        height: 12px;
    }

    .purchases-kpi-label {
        font-size: 11px;
    }
}
/* AccountsPayable.css */
.accounts-payable-container {
    padding: 20px;
}

/* KPI Cards */
.accounts-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.accounts-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.accounts-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.accounts-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3.5px;
    background: var(--color-primary);
}

.accounts-kpi-card.kpi-total::before { background: #6366f1; }
.accounts-kpi-card.kpi-debt::before { background: #ef4444; }
.accounts-kpi-card.kpi-paid::before { background: #10b981; }
.accounts-kpi-card.kpi-overdue::before { background: #f59e0b; }

.accounts-kpi-top {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.accounts-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    word-break: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.accounts-kpi-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.accounts-kpi-icon-mini {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.accounts-kpi-card.kpi-total .accounts-kpi-icon-mini {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.accounts-kpi-card.kpi-debt .accounts-kpi-icon-mini {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.accounts-kpi-card.kpi-paid .accounts-kpi-icon-mini {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.accounts-kpi-card.kpi-overdue .accounts-kpi-icon-mini {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.accounts-kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-overdue {
    background: rgba(239, 68, 68, 0.02) !important;
}

.account-action-btn {
    padding: 6px 12px;
}

/* ── ACCOUNTS PAYABLE FILTERS ── */
.accounts-filters-container {
    margin-bottom: 20px;
}

.accounts-search-bar-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 0;
}

.accounts-search-bar-row.open {
    margin-bottom: 12px;
}

.accounts-search-input-wrapper {
    flex: 1;
    position: relative;
    min-width: 0;
}

.accounts-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.accounts-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px 10px 38px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    outline: none;
    font-size: 14px;
    height: 42px;
    transition: border-color 0.2s ease;
}

.accounts-search-input:focus {
    border-color: var(--color-primary);
}

.accounts-filter-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: 0.2s;
    font-weight: 500;
    height: 42px;
    box-sizing: border-box;
    font-size: 14px;
    flex-shrink: 0;
}

.accounts-filter-toggle-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.accounts-filter-badge {
    background: #3b82f6;
    color: #fff;
    border-radius: 10px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.accounts-filter-toggle-btn.active .accounts-filter-badge {
    background: #ffffff;
    color: var(--color-primary);
}

.accounts-filters-panel {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
    background: var(--bg-card);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    margin-top: 10px;
    animation: fadeIn 0.2s ease;
}

.accounts-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 220px;
}

.accounts-filter-group label {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.accounts-filter-actions-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.accounts-filter-clear-btn {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: 0.2s;
    font-weight: 500;
    font-size: 13px;
    box-sizing: border-box;
}

.accounts-filter-clear-btn:hover {
    color: var(--color-danger);
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.05);
}

.accounts-filter-refresh-btn {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: 0.2s;
    font-weight: 500;
    font-size: 13px;
    box-sizing: border-box;
}

.accounts-filter-refresh-btn:hover {
    border-color: var(--color-primary);
}

/* ==================================
   MOBILE / RESPONSIVE (CELULAR)
   ================================== */
@media (max-width: 768px) {
    .purchases-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .purchases-header-actions {
        width: 100%;
    }

    .purchases-header-actions a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .accounts-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 16px;
    }

    .accounts-kpi-card {
        padding: 12px 10px 10px 12px;
        gap: 6px;
        border-radius: 10px;
    }

    .accounts-kpi-value {
        font-size: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .accounts-kpi-bottom {
        gap: 6px;
    }

    .accounts-kpi-icon-mini {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .accounts-kpi-icon-mini svg {
        width: 12px;
        height: 12px;
    }

    .accounts-kpi-label {
        font-size: 11px;
    }

    .accounts-filters-panel {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 12px;
    }

    .accounts-filter-group {
        min-width: 0;
        width: 100%;
    }

    .accounts-filter-actions-row {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .accounts-filter-clear-btn,
    .accounts-filter-refresh-btn {
        width: 100%;
    }
}

.shorts-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.shorts-header-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.shorts-header-icon-box {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  padding: 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shorts-header-title {
  font-size: 24px;
  margin: 0;
}

.shorts-header-subtitle {
  color: var(--text-muted);
  margin: 4px 0 0 0;
  font-size: 14px;
}

.shorts-header-actions-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.shorts-video-preview {
  width: 48px; 
  height: 64px; 
  border-radius: 6px; 
  overflow: hidden; 
  background-color: #000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.shorts-video-preview video {
  width: 100%; 
  height: 100%; 
  -o-object-fit: cover; 
     object-fit: cover;
  transition: transform 0.3s ease;
}

.shorts-video-preview:hover video {
  transform: scale(1.05);
}

.shorts-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background-color: var(--bg-card);
  border-radius: 12px;
  border: 1px dashed var(--border-color);
  text-align: center;
}

.shorts-empty-icon {
  color: var(--text-muted);
  margin-bottom: 16px;
  opacity: 0.5;
}

.shorts-upload-zone {
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  position: relative;
  background-color: var(--bg-input);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.shorts-upload-zone:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.shorts-upload-zone input[type="file"] {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  opacity: 0; 
  cursor: pointer;
}

.shorts-upload-icon {
  color: var(--text-muted);
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.shorts-upload-zone:hover .shorts-upload-icon {
  color: var(--color-primary);
}

.shorts-upload-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.shorts-upload-filename {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
}

.shorts-video-preview-large {
  margin-top: 16px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.shorts-video-preview-large video {
  width: 100%;
  max-height: 250px;
  display: block;
}
.hc-style-1 { background: var(--bg-main); min-height: 100%; display: flex; align-items: center; justify-content: center; }
.hc-style-2 { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text-muted); }
.hc-style-3 { border-color: var(--color-primary); border-top-color: transparent; }
.hc-style-4 { font-size: 14px; }
.hc-style-5 { background: var(--bg-main); min-height: 100%; color: var(--text-main); }
.hc-style-6 { max-width: 900px; margin: 0 auto; padding: 32px 24px 120px; }
.hc-style-7 { margin-bottom: 28px; }
.hc-style-8 { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.hc-style-9 { width: 36px; height: 36px; border-radius: 10px; background: var(--color-primary); color: var(--color-primary-text); display: flex; align-items: center; justify-content: center; }
.hc-style-10 { font-size: 20px; font-weight: 600; color: var(--text-main); line-height: 1px; padding-top: 2px; }
.hc-style-11 { font-size: 13px; color: var(--text-muted); margin-left: 48px; }
.hc-style-12 { display: flex; gap: 6px; margin-bottom: 24px; border-bottom: 1px solid var(--border-color); padding-bottom: 0px; }
.hc-style-13 { line-height: 1px; padding-top: 2px; }
.hc-style-14 { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.hc-style-15 { font-size: 14px; font-weight: 600; margin-bottom: 16px; color: var(--text-main); }
.hc-style-16 { display: flex; flex-direction: column; gap: 14px; }
.hc-style-17 { display: flex; flex-direction: column; gap: 6px; }
.hc-style-18 { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.hc-style-19 { padding: 8px 12px; border-radius: 8px; font-size: 14px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); outline: none; }
.hc-style-20 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hc-style-21 { font-size: 14px; font-weight: 600; color: var(--text-main); }
.hc-style-22 { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.hc-style-23 { text-align: center; padding: 32px 0; color: var(--text-muted); font-size: 13px; border: 2px dashed var(--border-color); border-radius: 10px; }
.hc-style-24 { opacity: 0.3; margin: 0 auto 8px auto; display: block; }
.hc-style-25 { font-size: 12px; margin-top: 4px; }
.hc-style-26 { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.hc-style-27 { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; pointer-events: none; }
.hc-style-28 { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.55); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 0 0 8px 0; }
.hc-style-29 { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.7); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; }
.hc-style-30 { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; }
.hc-style-31 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.hc-style-32 { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--bg-overlay); border: 1px solid var(--border-color); color: var(--text-muted); cursor: pointer; }
.hc-style-33 { width: 100%; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); outline: none; margin-bottom: 14px; box-sizing: border-box; }
.hc-style-34 { text-align: center; padding: 48px 0; color: var(--text-muted); }
.hc-style-35 { border-color: var(--color-primary); border-top-color: transparent; margin: 0 auto 10px; }
.hc-style-36 { font-size: 13px; }
.hc-style-37 { text-align: center; padding: 32px 0; color: var(--text-muted); font-size: 13px; }
.hc-style-38 { max-height: 480px; overflow-y: auto; padding-right: 4px; }
.hc-style-39 { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.hc-style-40 { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.hc-style-41 { position: absolute; inset: 0px; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; }
.hc-style-42 { width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); display: flex; align-items: center; justify-content: center; }
.hc-style-43 { text-align: center; margin-top: 16px; }
.hc-style-44 { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; pointer-events: none; filter: brightness(0.7); }
.hc-style-45 { width: 100%; height: 100%; background: var(--bg-overlay); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); }
.hc-style-46 { opacity: 0.5; margin-bottom: 8px; }
.hc-style-47 { font-size: 11px; text-align: center; padding: 0 10px; }
.hc-style-48 { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.55); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 0 0 8px 0; pointer-events: none; }
.hc-style-49 { position: absolute; bottom: 0px; left: 0px; width: 100%; background: rgba(0,0,0,0.7); color: #fff; font-size: 12px; font-weight: 600; padding: 8px 4px; text-align: center; pointer-events: none; }
.hc-style-50 { padding: 20px; text-align: center; color: var(--text-muted); }
.hc-style-51 { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
.hc-style-52 { font-size: 13px; font-weight: 600; color: var(--text-main); z-index: 2; }
.hc-style-53 { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-primary); display: flex; align-items: center; justify-content: center; z-index: 2; }
.hc-style-54 { position: fixed; inset: 0px; z-index: 9999; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; padding: 20px; }
.hc-style-55 { background: var(--bg-card); border-radius: 12px; width: 100%; max-width: 800px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color); }
.hc-style-56 { padding: 16px 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; }
.hc-style-57 { font-size: 16px; font-weight: 600; color: var(--text-main); margin: 0px; }
.hc-style-58 { color: var(--color-primary); }
.hc-style-59 { background: var(--bg-overlay); border: none; color: var(--text-main); cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hc-style-60 { display: flex; border-bottom: 1px solid var(--border-color); background: var(--bg-main); }
.hc-style-61 { padding: 24px; flex: 1; overflow-y: auto; min-height: 400px; }
.hc-style-62 { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hc-style-63 { border: 2px dashed var(--border-color); border-radius: 12px; padding: 40px 20px; width: 100%; max-width: 400px; text-align: center; }
.hc-style-64 { color: var(--text-muted); margin: 0 auto 16px auto; display: block; }
.hc-style-65 { font-size: 15px; font-weight: 600; color: var(--text-main); margin: 0 0 8px; }
.hc-style-66 { font-size: 12px; color: var(--text-muted); margin: 0 0 24px; }
.hc-style-67 { display: none; }
.hc-style-68 { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hc-style-69 { width: 100%; max-width: 500px; }
.hc-style-70 { display: block; font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 8px; }
.hc-style-71 { display: flex; gap: 8px; }
.hc-style-72 { flex: 1; padding: 10px 14px; border-radius: 8px; font-size: 14px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); outline: none; }
.hc-style-73 { margin-top: 20px; text-align: center; }
.hc-style-74 { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.hc-style-75 { width: 200px; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); margin: 0 auto; }
.hc-style-76 { width: 100%; padding: 10px 14px; border-radius: 8px; font-size: 13px; background: var(--bg-input); border: 1px solid var(--border-color); outline: none; margin-bottom: 20px; color: var(--text-main); }
.hc-style-77 { text-align: center; padding: 40px 0; color: var(--text-muted); }
.hc-style-78 { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.hc-style-79 { aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s; }
.hc-style-80 { text-align: center; margin-top: 24px; }
.hc-style-81 { min-height: 36px; padding: 8px 12px; border-radius: 8px; font-size: 14px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); }
.hc-style-82 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hc-style-83 { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--color-primary); color: var(--color-primary-text); border: none; cursor: pointer; }
.hc-style-84 { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.hc-style-85 { font-size: 13px; font-weight: 600; color: var(--text-main); }
.hc-style-86 { font-size: 12px; color: var(--text-muted); margin: 0px; }
.hc-style-87 { opacity: 0.5; margin-bottom: 8px; color: var(--text-muted); }
.hc-style-88 { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.hc-style-89 { position: absolute; inset: 0px; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.hc-style-90 { color: #fff; font-size: 13px; font-weight: 600; background: rgba(0,0,0,0.7); padding: 6px 12px; border-radius: 20px; }
.hc-style-91 { align-self: flex-start; margin-top: 4px; background: none; border: none; color: var(--color-danger, #e53e3e); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0px; }
.hc-style-92 { display: flex; flex-direction: column; gap: 16px; }
.hc-style-93 { display: flex; gap: 12px; padding: 16px; background: var(--bg-overlay); border: 1px solid var(--border-color); border-radius: 8px; position: relative; }
.hc-style-94 { display: flex; flex-direction: column; gap: 6px; width: 140px; }
.hc-style-95 { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.hc-style-96 { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 13px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); cursor: pointer; justify-content: flex-start; }
.hc-style-97 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-style-98 { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hc-style-99 { padding: 8px; border-radius: 6px; font-size: 13px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); }
.hc-style-100 { display: flex; flex-direction: column; gap: 6px; flex: 2; }
.hc-style-101 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hc-style-102 { font-size: 15px; font-weight: 600; color: var(--text-main); margin: 0px; }
.hc-style-103 { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.hc-style-104 { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--color-primary); color: var(--color-primary-text); border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0px; }
.hc-style-105 { text-align: center; padding: 48px 24px; border: 2px dashed var(--border-color); border-radius: 12px; color: var(--text-muted); font-size: 13px; }
.hc-style-106 { opacity: 0.25; display: block; margin: 0 auto 12px; }
.hc-style-107 { font-weight: 600; margin-bottom: 4px; }
.hc-style-108 { font-size: 12px; }
.hc-style-109 { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.hc-style-110 { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.hc-style-111 { display: flex; align-items: center; gap: 16px; flex: 1; }
.hc-style-112 { display: flex; align-items: center; gap: 8px; }
.hc-style-113 { font-size: 13px; color: var(--text-main); font-weight: 600; }
.hc-style-114 { flex: 1; max-width: 300px; }
.hc-style-115 { min-height: 36px; font-size: 13px; }
.hc-style-116 { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--color-danger-light, #fee2e2); color: var(--color-danger, #dc2626); border: 1px solid var(--color-danger-border, #fca5a5); cursor: pointer; }
.hc-style-117 { border-top: 1px solid var(--border-color); }
.hc-style-118 { display: flex; gap: 16px; flex-wrap: wrap; }
.hc-style-119 { flex: 2; min-width: 250px; }
.hc-style-120 { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.hc-style-121 { width: 100%; padding: 9px 12px; border-radius: 8px; font-size: 13px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); outline: none; box-sizing: border-box; }
.hc-style-122 { flex: 1; min-width: 200px; }
.hc-style-123 { flex: 1; min-width: 150px; }
.hc-style-124 { flex: 1; min-width: 180px; }
.hc-style-125 { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; font-size: 13px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); cursor: pointer; justify-content: flex-start; height: 36px; }
.hc-style-126 { font-size: 11px; color: var(--color-danger, #e53e3e); background: none; border: none; margin-top: 4px; cursor: pointer; padding: 0px; font-weight: 600; }
.hc-style-127 { flex: 2; min-width: 200px; }
.hc-style-128 { background: var(--bg-main); border-radius: 8px; padding: 16px; border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 16px; }
.hc-style-129 { font-size: 13px; font-weight: 600; color: var(--text-main); display: block; }
.hc-style-130 { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.hc-style-131 { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 140px; }
.hc-style-132 { display: flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; padding: 4px; }
.hc-style-133 { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; }
.hc-style-134 { flex: 1; padding: 4px 8px; font-size: 13px; background: transparent; border: none; color: var(--text-main); outline: none; font-family: monospace; min-width: 60px; }
.hc-style-135 { display: flex; gap: 14px; flex-wrap: wrap; }
.hc-style-136 { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 110px; }
.hc-style-137 { display: flex; flex-direction: column; gap: 6px; flex: 2; min-width: 220px; }
.hc-style-138 { display: flex; gap: 16px; flex: 1; min-width: 200px; padding-bottom: 8px; }
.hc-style-139 { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.hc-style-140 { width: 18px; height: 18px; cursor: pointer; }
.hc-style-141 { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.hc-style-142 { flex: 1; }
.hc-style-143 { color: var(--color-success, #48bb78); }
.hc-style-144 { color: var(--text-muted); }
.hc-style-145 { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: #dbeafe; color: #1d4ed8; }
.hc-style-146 { font-size: 12px; color: var(--text-muted); margin-top: 3px; margin-left: 23px; }
.hc-style-147 { position: fixed; bottom: 0px; left: 0px; right: 0px; padding: 14px 24px; border-top: 1px solid var(--border-color); background: var(--bg-card); box-shadow: 0 -4px 16px rgba(0,0,0,0.07); display: flex; justify-content: center; z-index: 50; }
.hc-style-148 { width: 100%; max-width: 900px; display: flex; align-items: center; justify-content: space-between; }
.hc-style-149 { display: flex; gap: 10px; }
.hc-style-150 { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--bg-overlay); border: 1px solid var(--border-color); color: var(--text-main); cursor: pointer; }
.hc-style-151 { border-color: var(--text-muted); border-top-color: transparent; }
.hc-style-152 { margin-top: 20px; text-align: center; width: 100%; }
.hc-style-153 { width: 100%; height: 200px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); margin: 0 auto; }
.hc-style-154 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.hc-style-155 { height: 120px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s; }
.hc-style-156 { position: fixed; inset: 0px; z-index: 99999; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }
.hc-style-157 { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #ccc); border-radius: 16px; width: 100%; max-width: 500px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
.hc-style-158 { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.hc-style-159 { margin: 0px; font-size: 16px; font-weight: 600; color: var(--text-main, #000); }
.hc-style-160 { background: transparent; border: none; cursor: pointer; color: var(--text-muted); display: flex; padding: 4px; }
.hc-style-161 { padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.hc-style-162 { position: relative; }
.hc-style-163 { position: absolute; left: 12px; top: 10px; color: var(--text-muted, #888); }
.hc-style-164 { width: 100%; padding: 8px 12px 8px 36px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-input, #f9f9f9); color: var(--text-main); outline: none; box-sizing: border-box; font-size: 14px; }
.hc-style-165 { padding: 20px; overflow-y: auto; flex: 1; }
.hc-style-166 { text-align: center; color: var(--text-muted); padding: 40px 0; }
.hc-style-167 { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px; }
.hc-style-168 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 10px; background: var(--bg-overlay, #f5f5f5); border: 1px solid var(--border-color); cursor: pointer; color: var(--text-main); transition: all 0.2s; aspect-ratio: 1/1; }

/* Responsive Styles for Mobile */
@media (max-width: 768px) {
  .hc-style-6 { padding: 16px 12px 100px !important; }
  .hc-style-14, .hc-style-30, .hc-style-128 { padding: 16px !important; }
  .hc-style-12, .hc-style-60 { overflow-x: auto; white-space: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .hc-style-12::-webkit-scrollbar, .hc-style-60::-webkit-scrollbar { height: 4px; }
  .hc-style-12::-webkit-scrollbar-thumb, .hc-style-60::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
  .hc-style-54, .hc-style-156 { padding: 10px !important; }
  .hc-style-55, .hc-style-157 { max-height: 95vh !important; border-radius: 12px !important; margin: 0 !important; }
  .hc-style-16, .hc-style-17, .hc-style-131, .hc-style-136, .hc-style-137, .hc-style-122, .hc-style-123, .hc-style-124, .hc-style-114 { width: 100% !important; max-width: 100% !important; }
  .hc-style-110, .hc-style-111, .hc-style-130, .hc-style-135, .hc-style-138 { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
  .hc-style-148 { flex-direction: column !important; gap: 12px !important; }
  .hc-style-147 { padding: 12px !important; }
  .hc-style-149 { width: 100% !important; display: flex !important; gap: 8px !important; }
  .hc-style-149 button, .hc-style-150 { flex: 1 !important; justify-content: center !important; }
  .hc-style-26, .hc-style-39, .hc-style-51, .hc-style-154, .hc-style-167 { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; gap: 8px !important; }
  .hc-style-20, .hc-style-31 { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .hc-style-32, .hc-style-83 { width: 100% !important; justify-content: center !important; }
}

/* Additional Mobile Fixes */
@media (max-width: 768px) {
  .hc-style-93 { flex-direction: column !important; align-items: stretch !important; }
  .hc-style-93 .hc-style-94, .hc-style-93 .hc-style-98, .hc-style-93 .hc-style-100 { width: 100% !important; max-width: 100% !important; }
  .hc-style-60 button, .hc-style-12 button { flex: 0 0 auto !important; white-space: nowrap !important; padding-left: 16px !important; padding-right: 16px !important; }
  .hc-style-33 { box-sizing: border-box !important; width: 100% !important; }
  .hc-style-61, .hc-style-165 { padding: 12px !important; overflow-x: hidden !important; }
  .hc-style-162 { width: 100% !important; }
}
/* =========================
    PRODUCTS CONTAINER
========================= */

.products-container {
  padding: 20px;
  font-family: "Segoe UI", sans-serif;
  color: var(--text-main);
}

/* =========================
   HEADER
========================= */
 
.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 20px;
  padding: 12px 16px;

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;

  backdrop-filter: blur(8px);
}

.products-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-main);
}

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

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);

  border: none;
  padding: 10px 14px;
  border-radius: 8px;

  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
  transition: 0.2s ease;

  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* =========================
   TABLA PRODUCTS
========================= */

.products-table {
  width: 100%;
  border-collapse: collapse;

  background: var(--bg-card);
  border-radius: 10px;

  overflow: hidden;
  border: 1px solid var(--border-color);
}

.products-table th {
  background: var(--bg-card);
  text-align: left;
  padding: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.products-table td {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
}

.products-table tr:hover {
  background: var(--bg-overlay);
}

/* =========================
   IMAGEN PRODUCTO
========================= */

.product-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;

  -o-object-fit: cover;

     object-fit: cover;
  border: 1px solid var(--border-color);
}

/* =========================
   BOTONES ACCIN
========================= */

.btn-edit {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);

  padding: 6px 10px;
  margin-right: 5px;

  border-radius: 6px;
  color: var(--color-warning);

  cursor: pointer;
  font-size: 13px;
  transition: 0.2s ease;
}

.btn-edit:hover {
  background: rgba(245, 158, 11, 0.25);
  transform: translateY(-1px);
}

.btn-delete {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);

  padding: 6px 10px;
  border-radius: 6px;

  color: var(--color-danger);
  cursor: pointer;
  font-size: 13px;

  transition: 0.2s ease;
}

.btn-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}

/* =========================
   MODAL (REUTILIZA USERS STYLE)
========================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  padding: 20px;
  box-sizing: border-box;
}

.modal {
  background: var(--bg-card);
  color: var(--text-main);
  width: 95%;
  max-width: 1000px;
  max-height: 90vh;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), inset 0 1px 0 var(--border-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal h2 {
  padding: 24px 30px;
  font-size: 24px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-main);
  
  
  margin: 0;
  letter-spacing: 0.5px;
}

/* =========================
   FORM GRID
========================= */

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;

  padding: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {

  margin-bottom: 8px;

  font-size: 11px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.6px;

  color: var(--text-muted);
}

.variant-card .form-grid {
  padding: 0;
  margin-top: 18px;
}

.variant-card + .variant-card {
  margin-top: 24px;
}



.simple-card,
.variant-card {

  position: relative;
  overflow: visible;
}

.simple-card::before,
.variant-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;
  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--border-color),
      transparent
    );
}



.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  box-sizing: border-box;
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.form-group textarea {
  min-height: 120px;
  padding: 16px;
  resize: vertical;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  background: var(--bg-overlay);
  border-color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: var(--bg-overlay);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* =========================
   MODAL ACTIONS
========================= */

.modal-actions {
  display: flex;
  justify-content: flex-end;

  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
  gap: 10px;
}

.modal-actions button {
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.modal-actions .btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.modal-actions .btn-secondary {
  background: var(--color-secondary);
  color: var(--text-main);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .products-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* =========================
    FILTERS PANEL (ESTILO USERS STYLE)
========================= */

.filters-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;

  margin-bottom: 15px;
  padding: 12px;

  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border-color);

  backdrop-filter: blur(8px);
}

/* inputs y selects consistentes */
.filters-bar input,
.filters-bar select {
  padding: 9px 12px;
  border-radius: 8px;
  box-sizing: border-box;

  background: var(--bg-main);
  border: 1px solid var(--border-color);

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

/* focus igual que users */
.filters-bar input:focus,
.filters-bar select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

/* hover suave */
.filters-bar input:hover,
.filters-bar select:hover {
  border-color: var(--text-muted);
}

/* =========================
    FILTROS EN GRUPO (opcional PRO)
========================= */

.filters-group {
  display: flex;
  gap: 8px;
  align-items: center;

  padding: 6px 10px;
  background: var(--bg-overlay);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

/* labels opcionales si agregas filtros avanzados */
.filters-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 4px;
}

/* =========================
    BOTN RESET FILTROS (recomendado)
========================= */

.btn-filter-reset {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);

  color: var(--color-danger);
  padding: 8px 12px;
  border-radius: 8px;

  font-size: 12px;
  cursor: pointer;

  transition: 0.2s ease;
}

.btn-filter-reset:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}

/* =========================
    RESPONSIVE
========================= */

@media (max-width: 768px) {
  .filters-bar {
    flex-direction: column;
    gap: 8px;
  }

  .filters-bar input,
  .filters-bar select {
    width: 100%;
  }
}

/* =========================
    BULK ACTIONS BAR
========================= */

.bulk-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-secondary, var(--bg-card));
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid var(--border-color);
  gap: 15px;
  flex-wrap: wrap;
}

.bulk-actions-left {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.bulk-actions-count {
  font-weight: 600;
  color: var(--color-primary);
}

.bulk-actions-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
}

.bulk-actions-right {
  display: flex;
}

.btn-danger-bulk {
  background: #ff4d4f;
  color: var(--text-main);
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: 0.2s ease;
}

.btn-danger-bulk:hover {
  background: #ff7875;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .bulk-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .bulk-actions-left {
    justify-content: center;
  }

  .bulk-actions-divider {
    display: none;
  }
  
  .bulk-actions-right {
    justify-content: center;
  }

  .btn-danger-bulk {
    width: 100%;
  }
}

.product-thumb {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumb img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* =========================
   LAYOUT PRINCIPAL
========================= */
.product-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

/* =========================
   IMAGEN
========================= */
.product-image-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================
   UPLOAD BOX 1:1
========================= */
.image-upload-box {
  width: 100%;
  aspect-ratio: 1 / 1;

  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 16px;

  background: var(--bg-overlay);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  overflow: hidden;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3);
}

.image-upload-box:hover {
  border-color: var(--color-primary);
  background: var(--bg-overlay);
  transform: translateY(-2px);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(96, 165, 250, 0.15);
}

.image-upload-box input {
  display: none;
}

.image-upload-box span {
  color: var(--text-muted);
}

.image-upload-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* =========================
   FORM RIGHT
========================= */
.product-form-right {
  background: transparent;
}






/* =========================================================
    VARIANT MODE SELECTOR
========================================================= */

.variant-mode-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variant-mode-selector label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.variant-mode-selector select {
  min-width: 180px;

  padding: 10px 12px;

  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

.variant-mode-selector select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}


/* =========================================================
   SHARED FORM CONTAINERS
========================================================= */

.simple-mode-container,
.variant-card {

  background: var(--bg-overlay);

  border: 1px solid var(--border-color);
  border-radius: 18px;

  padding: 24px;

  backdrop-filter: blur(10px);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.25);

  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;

  animation: fadeIn 0.2s ease;
}

.link-modal-content {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  max-width: 700px;
  width: 100%;
  animation: fadeIn 0.2s ease;
  overflow: hidden;
  color: var(--text-main);
}

.simple-mode-container:hover,
.variant-card:hover {

  border-color: rgba(255,255,255,0.12);

  box-shadow:
    0 14px 40px rgba(0,0,0,0.32);
}
/* =========================================================
   HEADER
========================================================= */

.simple-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 24px;
}

.simple-mode-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);

  margin-bottom: 4px;
}

.simple-mode-description {
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================
   GRID
========================================================= */

.simple-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;

  margin-bottom: 20px;
}

/* =========================================================
   CARD
========================================================= */

.simple-card {

  background: var(--bg-card);

  border: 1px solid var(--border-color);
  border-radius: 14px;

  padding: 20px;

  transition: 0.2s ease;
}

.simple-card:hover {
  border-color: rgba(255,255,255,0.12);
}

.simple-card h4 {
  margin: 0 0 18px 0;

  font-size: 15px;
  font-weight: 600;

  color: var(--color-primary);
}

.simple-card label {
  display: block;

  margin-bottom: 8px;

  font-size: 12px;
  color: var(--text-muted);
}

/* =========================================================
   SELECTS
========================================================= */

.simple-card select,
.simple-card input,
.simple-card textarea {

  width: 100%;

  padding: 11px 12px;

  background: var(--bg-main);

  border: 1px solid var(--border-color);
  border-radius: 10px;

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

.simple-card select:focus,
.simple-card input:focus,
.simple-card textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}

/* =========================================================
   MULTISELECT
========================================================= */

.simple-multiselect {
  min-height: 180px;

  padding: 10px !important;

  overflow-y: auto;
}

.simple-multiselect option {

  padding: 10px;
  margin-bottom: 4px;

  border-radius: 8px;

  background: transparent;
  color: var(--text-main);

  transition: 0.15s ease;
}

.simple-multiselect option:checked {
  background: var(--color-primary);
  color: var(--color-primary-text);
}


/* =========================
   SELECTOR CHIPS
========================= */

.selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.selector-chip {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;

  border-radius: 14px;
  border: 1px solid var(--border-color);

  background: var(--bg-input);
  color: var(--text-main);

  cursor: pointer;
  transition: .18s ease;

  font-size: 13px;
  font-weight: 500;
}

.selector-chip:hover {
  transform: translateY(-1px);

  background: var(--bg-overlay);
  border-color: var(--border-color);
}

.selector-chip.active {
  background:
    var(--bg-overlay);

  border-color:
    var(--bg-overlay);

  color: var(--color-primary-hover);

  box-shadow:
    0 0 0 1px var(--bg-overlay);
}

.selector-dot {
  width: 14px;
  height: 14px;

  border-radius: 999px;

  border: 2px solid
    rgba(255,255,255,.2);

  flex-shrink: 0;
}

/* =========================================================
   GLOBAL ATTRIBUTES GRID
========================================================= */

.simple-attributes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}


/* =========================================================
   GLOBAL CONFIG FIELDS
========================================================= */

.simple-global-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.simple-global-field label {

  font-size: 11px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.6px;

  color: var(--text-muted);
}

.simple-global-field select,
.simple-global-field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.simple-global-field select:hover,
.simple-global-field input:hover {
  border-color: rgba(255,255,255,0.14);
}

.simple-global-field select:focus,
.simple-global-field input:focus {

  border-color: var(--color-primary);

  box-shadow:
    0 0 0 3px rgba(37,99,235,0.16),
    0 10px 24px rgba(37,99,235,0.12);

  transform: translateY(-1px);
}






/* =========================================================
   SUMMARY
========================================================= */

.simple-summary {
  margin-top: 24px;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 14px;
  padding: 22px;
}

.simple-summary h4 {
  margin: 0 0 20px 0;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 600;
}

.simple-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.simple-summary-item {

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.simple-summary-label {

  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.simple-summary-value {

  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  word-break: break-word;
}

/* =========================================================
   GENERATE BUTTON
========================================================= */

.simple-generate-btn {

  margin-top: 24px;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-hover)
  );

  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.simple-generate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(37,99,235,0.35);
}

/* =========================================================
   GENERATED COUNT
========================================================= */

.generated-count {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================
   ADVANCED VARIANT CARD
========================================================= */


.simple-card h4,
.variant-card h4 {

  margin: 0 0 18px 0;

  font-size: 15px;
  font-weight: 600;

  color: var(--color-primary);

  letter-spacing: 0.2px;
}

/* =========================================================
   TEXTAREA
========================================================= */

.form-group textarea {
  width: 100%;
  padding: 12px;
  resize: vertical;
  border-radius: 10px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-family: inherit;
}

.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* =========================================================
   FORM ACTIONS
========================================================= */

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 25px;
  margin-top: 30px;
  border-top: 1px solid var(--border-color);
}

.btn-secondary {

  background: var(--color-secondary);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s ease;
}

.btn-secondary:hover {
  background: var(--color-secondary);
}

/* =========================================================
   SCROLLBAR
========================================================= */

.simple-multiselect::-webkit-scrollbar,
.modal::-webkit-scrollbar {
  width: 8px;
}

.simple-multiselect::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track {
  background: transparent;
}

.simple-multiselect::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {

  background: var(--bg-overlay);
  border-radius: 20px;
}

.simple-multiselect::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .simple-summary-grid,
  .simple-attributes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .simple-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .product-layout {
    grid-template-columns: 1fr;
  }

  .simple-summary-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .simple-mode-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary,
  .simple-generate-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   VARIANT TABS
========================= */

.variant-tabs {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  backdrop-filter: blur(8px);
}

.variant-tab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.variant-tab:hover {
  background: var(--bg-overlay);
  color: var(--text-main);
}

.variant-tab.active {
  background: var(--color-primary);
  color: var(--color-primary-text);
  box-shadow:
    0 0 0 1px var(--border-color),
    0 8px 20px rgba(37,99,235,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
  .variant-tabs {
    width: 100%;
  }
  .variant-tab {
    flex: 1;
    text-align: center;
  }

}

/* =========================================================
   VARIANTS HEADER
========================================================= */

.variants-header {

  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  gap: 24px;

  margin-bottom: 28px;
  padding-bottom: 20px;

  border-bottom: 1px solid var(--border-color);
}

.variants-header-left {

  display: flex;
  flex-direction: column;
  gap: 18px;
}

.variants-header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variants-section-label {

  font-size: 22px;
  font-weight: 700;

  color: var(--text-main);

  letter-spacing: -0.3px;
}

.variants-section-description {

  font-size: 13px;
  color: var(--text-muted);

  max-width: 600px;
}


/* =========================================================
   VARIANTS HEADER
========================================================= */

.variants-header {

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;
  flex-wrap: wrap;

  margin-bottom: 24px;
}

.variants-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.variants-title {

  font-size: 22px;
  font-weight: 700;

  color: var(--text-main);
}

.variants-description {

  font-size: 13px;
  color: var(--text-muted);
}

.variants-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* =========================================================
   VARIANT CARD HEADER
========================================================= */

.variant-card-header {

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 24px;
}

.variant-card-title {

  font-size: 18px;
  font-weight: 600;

  color: var(--text-main);

  margin-bottom: 4px;
}

.variant-card-subtitle {

  font-size: 13px;
  color: var(--text-muted);
}

.variant-badge {

  min-width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,0.25),
      rgba(37,99,235,0.1)
    );

  border: 1px solid rgba(37,99,235,0.25);

  color: var(--color-primary);

  font-size: 13px;
  font-weight: 700;
}

/* =========================================================
   SECTION TITLE
========================================================= */

.variant-section-title {

  margin-top: 28px;
  margin-bottom: 18px;

  font-size: 14px;
  font-weight: 600;

  color: var(--color-primary);

  padding-bottom: 10px;

  border-bottom:
    1px solid var(--border-color);
}







/* =========================================================
    MOBILE FIXES PRODUCT FORM
========================================================= */

@media (max-width: 768px) {

  /* =========================
     MODAL
  ========================= */

  .modal {
    right: 0; bottom: 0;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* =========================
     TITLES
  ========================= */

  .modal h2 {
    font-size: 20px;
    padding: 18px;
  
  color: var(--text-main);}

  .variants-title {
    font-size: 18px;
  }

  .variants-description {
    font-size: 12px;
    line-height: 1.5;
  }

  /* =========================
     VARIANTS HEADER
  ========================= */

  .variants-header {

    flex-direction: column;
    align-items: stretch;

    gap: 18px;

    padding-bottom: 18px;
  }

  .variants-header-info {
    width: 100%;
  }

  /* CONTENEDOR DERECHO */
  .variants-header-actions {

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 12px;
  }

  /* =========================
     BOTN AGREGAR VARIANTE
  ========================= */

  .variants-header-actions .btn-primary {

    width: 100%;
    height: 46px;

    justify-content: center;

    flex-shrink: 0;
  }

  /* =========================
     TABS
  ========================= */

  .variant-tabs {

    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;

    padding: 4px;
    gap: 4px;

    flex-shrink: 0;
  }

  .variant-tab {

    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    font-size: 13px;
    text-align: center;

    white-space: nowrap;
  }

  /* =========================
     FIX MOVIMIENTO FEO
  ========================= */

  .variants-header-actions:has(.variant-tabs) {
    min-height: 104px;
  }

  /* =========================
     FORM ACTIONS
  ========================= */

  .form-actions {

    flex-direction: column-reverse;
    gap: 10px;
  }

  .form-actions button {
    width: 100%;
    height: 46px;
  }

  /* =========================
     VARIANT CARDS
  ========================= */

  .variant-card,
  .simple-mode-container,
  .simple-card {
    padding: 18px;
  }

  /* =========================
     INPUTS
  ========================= */

  .form-group input,
  .form-group select,
  .form-group textarea,
  .simple-global-field input,
  .simple-global-field select {

    height: 48px;
    font-size: 14px;
  }

  .form-group textarea {
    min-height: 100px;
  }

  /* =========================
     SUMMARY
  ========================= */

  .simple-summary {
    padding: 18px;
  }

  .simple-summary-item {
    padding: 14px;
  }

  /* =========================
     IMAGE
  ========================= */

  .product-image-box {
    width: 100%;
  }

  .image-upload-box {
    max-width: 100%;
  }
}





/* =========================================================
    MOBILE COMPACT UI
========================================================= */

@media (max-width: 768px) {

  /* =========================
     MODAL
  ========================= */

  .modal {
    right: 0; bottom: 0;
    border-radius: 0;
  }

  .modal h2 {
    padding: 14px 16px;
    font-size: 17px;
  
  color: var(--text-main);}

  /* =========================
     GENERAL PADDINGS
  ========================= */

  .form-grid {
    padding: 14px;
    gap: 12px;
  }

  .variant-card,
  .simple-mode-container,
  .simple-card,
  .simple-summary {
    padding: 14px;
  }

  /* =========================
     LABELS
  ========================= */

  .form-group label,
  .simple-global-field label,
  .simple-card label,
  .simple-summary-label {

    font-size: 10px;
    margin-bottom: 6px;
  }

  /* =========================
     INPUTS
  ========================= */

  .form-group input,
  .form-group select,
  .form-group textarea,
  .simple-global-field input,
  .simple-global-field select,
  .simple-card input,
  .simple-card select {

    height: 40px;

    padding: 0 12px;

    font-size: 12px;
    border-radius: 10px;
  }

  .form-group textarea {
    min-height: 90px;
    padding: 12px;
  }

  /* =========================
     BUTTONS
  ========================= */

  .btn-primary,
  .btn-secondary,
  .btn-delete,
  .simple-generate-btn {

    height: 40px;

    padding: 0 12px;

    font-size: 12px;
    border-radius: 10px;
  }

  /* =========================
     VARIANT TABS
  ========================= */

  .variant-tabs {
    padding: 3px;
    gap: 3px;
    border-radius: 10px;
  }

  .variant-tab {

    min-height: 38px;

    padding: 0 10px;

    font-size: 11px;
    border-radius: 8px;
  }

  /* =========================
     TITLES
  ========================= */

  .variants-title,
  .simple-mode-title,
  .variant-card-title {

    font-size: 16px;
  }

  .variants-description,
  .simple-mode-description,
  .variant-card-subtitle {

    font-size: 11px;
  }

  .variant-section-title {
    font-size: 13px;
    margin-top: 20px;
    margin-bottom: 14px;
  }

  /* =========================
     SUMMARY
  ========================= */

  .simple-summary-value {
    font-size: 12px;
  }

  /* =========================
     BADGE
  ========================= */

  .variant-badge {

    min-width: 34px;
    height: 34px;

    font-size: 11px;
    border-radius: 10px;
  }

  /* =========================
     IMAGE
  ========================= */

  .image-upload-box {
    border-radius: 10px;
  }

  /* =========================
     ACTIONS
  ========================= */

  .form-actions {
    margin-top: 20px;
    padding-top: 18px;
    gap: 8px;
  }

  /* =========================
     MULTISELECT
  ========================= */

 
}








/* =========================================================
    VARIANTS TABLE REDESIGN (COMPACT PRO)
========================================================= */

.variants-preview-container {
  margin-bottom: 24px;

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 18px;

  overflow: hidden;
  backdrop-filter: blur(12px);
}

/* =========================================================
   HEADER
========================================================= */

.variants-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 18px;

  border-bottom: 1px solid var(--border-color);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.02),
      transparent
    );
}

.variants-preview-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.variants-preview-description {
  font-size: 12px;
  color: var(--text-muted);
}

.variants-preview-count {
  min-width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: var(--bg-overlay);
  border: 1px solid var(--bg-overlay);

  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

/* =========================================================
   TABLE WRAPPER
========================================================= */

.variants-preview-table-wrapper {
  overflow: auto;
  max-height: 420px;
}

/* scrollbar dark */
.variants-preview-table-wrapper::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.variants-preview-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 999px;
}

/* =========================================================
   TABLE
========================================================= */

.variants-preview-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

/* sticky header */
.variants-preview-table thead {
  position: sticky;
  top: 0;
  z-index: 10;

  background: var(--bg-card);
  backdrop-filter: blur(20px);
}

/* =========================================================
   HEADERS
========================================================= */

.variants-preview-table th {
  text-align: left;

  padding: 12px 14px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--text-muted);

  border-bottom:
    1px solid var(--border-color);

  white-space: nowrap;
}

/* =========================================================
   CELLS
========================================================= */

.variants-preview-table td {
  padding: 10px 14px;

  font-size: 12px;
  color: var(--text-main);

  border-bottom:
    1px solid rgba(255,255,255,0.04);

  vertical-align: middle;
}

/* zebra */
.variants-preview-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.015);
}

.variants-preview-table tbody tr {
  transition: .18s ease;
}

.variants-preview-table tbody tr:hover {
  background: rgba(96,165,250,0.06);
}

/* =========================================================
   FIRST COLUMN (#)
========================================================= */

.variants-preview-table td:first-child {
  width: 50px;
  color: var(--text-muted);
  font-weight: 700;
}

/* =========================================================
   SKU STYLE
========================================================= */

.variants-preview-table td:nth-child(2) {
  font-family: monospace;
  font-size: 12px;
  color: var(--color-primary-hover);
  font-weight: 600;
}

/* =========================================================
   PRICE
========================================================= */

.variants-preview-table td:nth-child(6) {
  font-weight: 700;
  color: var(--color-success);
}

/* =========================================================
   ATTRIBUTES CELL
========================================================= */

.variant-attributes-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  max-width: 260px;
}

/* =========================================================
   ATTRIBUTE CHIP
========================================================= */

.variant-attribute-tag {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  padding: 4px 8px;

  border-radius: 999px;

  background: var(--bg-overlay);

  border: 1px solid var(--border-color);

  transition: .15s ease;
}

.variant-attribute-tag:hover {
  background: var(--bg-overlay);
}

.variant-attribute-name {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;

  color: var(--text-muted);
}

.variant-attribute-value {
  font-size: 11px;
  color: var(--text-main);
  font-weight: 600;
}

/* =========================================================
   STATUS
========================================================= */

.variant-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 90px;

  padding: 5px 10px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
}

.variant-status.active {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.22);
  color: var(--color-success);
}

.variant-status.inactive {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.22);
  color: var(--color-danger);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .variants-preview-table-wrapper {
    max-height: 360px;
  }

  .variants-preview-table {
    min-width: 720px;
  }

  .variants-preview-table th,
  .variants-preview-table td {
    padding: 10px;
    font-size: 11px;
  }

  .variant-attributes-cell {
    max-width: 180px;
  }
}



















/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .variants-preview-header {

    padding: 16px;

    align-items: flex-start;
    gap: 12px;
  }

  .variants-preview-title {
    font-size: 16px;
  }

  .variants-preview-description {
    font-size: 11px;
  }
  .variants-preview-table th,
  .variants-preview-table td {
    padding: 12px 14px;
    font-size: 12px;
  }
}

/* =========================================================
    DARK SELECT OPTIONS FIX
========================================================= */

/* Select base */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}

/* Opciones del dropdown */
select option {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  padding: 10px;
}

/* Opcin seleccionada */
select option:checked {
  background: var(--color-primary) !important;
  color: var(--text-main) !important;
}

/* Hover/focus en algunos navegadores */
select option:hover,
select option:focus {
  background: var(--color-secondary) !important;
  color: var(--text-main) !important;
}

/* Fix especfico para tus clases */
.form-group select,
.simple-card select,
.simple-global-field select,
.filters-bar select,
.variant-mode-selector select {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color);
}

/* Flecha del select ms limpia */
.form-group select,
.simple-card select,
.simple-global-field select,
.filters-bar select,
.variant-mode-selector select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px;
  background-repeat: no-repeat;

  padding-right: 40px;
}




/* ==========================================
   SELECTOR HEADER
========================================== */

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.selected-counter {
  padding: 6px 12px;
  border-radius: 999px;

  background: var(--bg-overlay);
  border: 1px solid var(--bg-overlay);

  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

/* ==========================================
   COLORES
========================================== */

.color-selector-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(110px, 1fr));

  gap: 14px;
}

.color-circle {
  border: 1px solid var(--border-color);
  background: var(--bg-input);

  border-radius: 18px;
  padding: 14px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  cursor: pointer;
  transition: .18s ease;
}

.color-circle:hover {
  transform: translateY(-2px);
  background: var(--bg-overlay);
}

.color-circle.active {
  border: 2px solid var(--color-primary);
  background:
    var(--bg-overlay);
}

.color-circle-preview {
  width: 52px;
  height: 52px;

  border-radius: 999px;

  border:
    3px solid rgba(255,255,255,.18);

  box-shadow:
    inset 0 0 0 1px var(--border-color),
    0 8px 20px rgba(0,0,0,.25);
}

.color-circle span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

/* ==========================================
   TALLAS
========================================== */

.size-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.size-chip {
  min-width: 70px;
  height: 46px;

  border-radius: 14px;

  border: 1px solid
    var(--border-color);

  background:
    var(--bg-input);

  color: var(--text-main);
  font-weight: 700;
  font-size: 14px;

  cursor: pointer;
  transition: .18s ease;
}

.size-chip:hover {
  transform: translateY(-2px);
}

.size-chip.active {
  background:
    var(--bg-overlay);

  border: 2px solid var(--color-primary);

  color: var(--color-primary-hover);
}
/* =========================================================
   MOBILE - COLOR SELECTOR COMPACT
========================================================= */

@media (max-width: 768px) {

  /* grid ms compacto */
  .color-selector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* tarjeta pequea */
  .color-circle {
    width: auto;
    min-width: unset;

    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    padding: 8px 10px;
    border-radius: 999px;

    min-height: unset;
  }

  /* sin hover raro en mobile */
  .color-circle:hover {
    transform: none;
  }

  /* crculo pequeo */
  .color-circle-preview {
    width: 18px;
    height: 18px;
    border-width: 2px;
    flex-shrink: 0;

    box-shadow: none;
  }

  /* texto ms pequeo */
  .color-circle span {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* activo ms limpio */
  .color-circle.active {
    border: 1px solid var(--color-primary);
    background: var(--bg-overlay);
  }

  /* contador ms chico */
  .selected-counter {
    padding: 4px 10px;
    font-size: 11px;
  }

  /* tallas tambin compactas */
  .size-selector {
    gap: 8px;
  }

  .size-chip {
    min-width: 52px;
    height: 38px;

    border-radius: 12px;
    font-size: 13px;
    padding: 0 12px;
  }
}











/* ==========================================
   VER MS BUTTON
========================================== */

.see-more-btn {
  width: 100%;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: var(--bg-overlay);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  transition: .2s ease;
}

.see-more-btn:hover {
  background: var(--bg-overlay);
}

/* ==========================================
   MODAL SELECTOR
========================================== */

.selector-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.75);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.selector-modal {
  width: min(850px, 95vw);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  padding: 28px;
}

.selector-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.selector-modal-header button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: var(--bg-overlay);
  color: var(--text-main);
  cursor: pointer;
}

.modal-grid {
  grid-template-columns:
    repeat(auto-fill, minmax(110px, 1fr));
}

.modal-size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.modal-ready-btn {
  margin-top: 24px;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 16px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

/* MOBILE */

@media (max-width: 768px) {
  .selector-modal {
    border-radius: 22px;
    padding: 18px;
  }

  .modal-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .modal-ready-btn {
    position: sticky;
    bottom: 0;
  }
}


.advanced-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.advanced-color-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  cursor: pointer;
  transition: .2s;
  min-width: 180px;
}

.advanced-color-item:hover {
  transform: translateY(-2px);
}

.advanced-color-item.active {
  border: 2px solid var(--color-primary);
  background: rgba(79,140,255,.15);
}

.advanced-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.25);
  flex-shrink: 0;
}

.advanced-color-item small {
  opacity: .65;
  font-size: 11px;
}

.advanced-selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


.add-mini-btn{
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border-color);
  border-radius: 12px;

  background:
    linear-gradient(
      180deg,
      var(--bg-overlay),
      var(--bg-overlay)
    );

  color: var(--color-primary-hover);

  cursor: pointer;
  transition: .22s ease;

  flex-shrink: 0;
}

.add-mini-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(96,165,250,.35);

  background:
    linear-gradient(
      180deg,
      var(--bg-overlay),
      var(--bg-overlay)
    );

  box-shadow:
    0 8px 18px var(--bg-overlay);
}

.add-mini-btn:active{
  transform: scale(.96);
}

.create-color-modal{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.create-color-modal input[type="color"]{
  width: 100%;
  height: 70px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
}

/* ==========================================
   PREMIUM CREATE MODALS
========================================== */

.create-modal{
  width: min(560px, 95vw);
  background:
    linear-gradient(
      180deg,
      var(--bg-card),
      var(--bg-main)
    );
  border:
    1px solid var(--border-color);
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,.45);
  animation:
    modalPop .22s ease;
}

@keyframes modalPop{
  from{
    opacity: 0;
    transform:
      translateY(20px)
      scale(.96);
  }
  to{
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

/* HEADER */

.create-modal-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding: 26px 28px;

  border-bottom:
    1px solid var(--bg-overlay);
}

.create-modal-header h2{
  margin: 0;
  color: var(--text-main);
  font-size: 24px;
  font-weight: 800;
}

.create-modal-header p{
  margin-top: 8px;

  color:
    var(--text-muted);

  font-size: 13px;
}

.close-modal-btn{
  width: 42px;
  height: 42px;

  border: none;
  border-radius: 14px;

  background:
    var(--bg-overlay);

  color: var(--text-main);
  cursor: pointer;

  transition: .2s;
}

.close-modal-btn:hover{
  background:
    var(--border-color);

  transform: rotate(90deg);
}

/* BODY */
.create-modal-body{
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* FORM */

.form-field-modern{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field-modern label{
  font-size: 12px;
  font-weight: 700;

  color:
    var(--text-muted);
}

.form-field-modern input,
.form-field-modern textarea{
  height: 54px;
  padding: 0 18px;
  border-radius: 18px;
  border:
    1px solid var(--border-color);
  background:
    var(--bg-input);
  color: var(--text-main);
  font-size: 14px;
  transition: .2s;
}

.form-field-modern textarea{
  height: auto;
  padding: 16px;
  resize: none;
}

.form-field-modern input:focus,
.form-field-modern textarea:focus{
  outline: none;

  border-color:
    var(--bg-overlay);
  box-shadow:
    0 0 0 4px
    var(--bg-overlay);
}

/* COLOR PREVIEW */
.color-preview-card{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 24px;
  background:
    var(--bg-input);
  border:
    1px solid var(--bg-overlay);
}

.color-preview-circle{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border:
    4px solid rgba(255,255,255,.15);
  box-shadow:
    0 12px 30px rgba(0,0,0,.25);
}

.color-preview-info{
  display: flex;
  flex-direction: column;
}

.color-preview-name{
  color: var(--text-main);
  font-size: 20px;
  font-weight: 700;
}

.color-preview-hex{
  color:
    var(--text-muted);

  font-size: 13px;
}

/* COLOR PICKER */

.premium-color-picker{
  width: 100%;
  height: 80px !important;
  border-radius: 20px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
}

/* SIZE */

.size-preview-card{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 24px;
  background:
    var(--bg-input);
  border:
    1px solid var(--bg-overlay);
}

.size-preview-chip{
  min-width: 90px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background:
    var(--bg-overlay);
  border:
    1px solid var(--bg-overlay);
  color: var(--color-primary-hover);
  font-weight: 800;
  font-size: 22px;
}

.size-preview-title{
  color: var(--text-main);
  font-weight: 700;
}

.size-preview-description{
  color:
    rgba(255,255,255,.45);

  font-size: 13px;
}

/* FOOTER */

.create-modal-footer{
  display: flex;
  gap: 12px;

  padding: 24px 28px;

  border-top:
    1px solid var(--bg-overlay);
}

.cancel-btn{
  flex: 1;
  height: 56px;

  border-radius: 18px;
  border: none;

  background:
    var(--bg-overlay);

  color: var(--text-main);
  font-weight: 700;
  cursor: pointer;
}

.save-btn{
  flex: 1;
  height: 56px;

  border-radius: 18px;
  border: none;

  background:
    linear-gradient(
      135deg,
      var(--color-primary),
      var(--color-primary)
    );

  color: var(--color-primary-text);
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 12px 24px
    var(--bg-overlay);

  transition: .2s;
}

.save-btn:hover{
  transform: translateY(-2px);
}

/* MOBILE */

@media(max-width:768px){

  .create-modal{
    border-radius: 26px;
  }

  .create-modal-header{
    padding: 20px;
  }

  .create-modal-body{
    padding: 20px;
  }

  .create-modal-footer{
    padding: 20px;
    flex-direction: column;
  }

  .color-preview-circle{
    width: 58px;
    height: 58px;
  }

  .color-preview-name{
    font-size: 17px;
  }
}

.modal-title-group{
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title-group h3{
  margin: 0;
}




/* ==========================================
   COLOR + TALLA LADO A LADO
========================================== */

.variant-main-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* color ocupa su espacio */
.variant-color-group{
  min-width: 0;
}

/* talla ms compacta */
.variant-size-group{
  display: flex;
  flex-direction: column;
}

/* grid de colores ms ordenado */
.variant-color-group .advanced-color-grid{
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(180px, 1fr));

  gap: 10px;
}

/* tallas ms compactas */
.variant-size-group .advanced-selector-grid{
  gap: 8px;
}

/* mobile: uno debajo del otro */
@media(max-width:768px){

  .variant-main-grid{
    grid-template-columns: 1fr;
  }
}





/* ==========================
   ADD VARIANT CARD
========================== */

.add-variant-card {
  width: 100%;
  border: 2px dashed rgba(255,255,255,0.15);
  background: var(--bg-overlay);

  border-radius: 18px;
  padding: 18px 24px;

  margin-top: 18px;

  display: flex;
  align-items: center;
  gap: 18px;

  cursor: pointer;
  transition: all 0.25s ease;

  color: var(--text-main);
}

.add-variant-card:hover {
  border-color: var(--color-primary);
  background: rgba(91, 140, 255, 0.08);

  transform: translateY(-2px);
}

.add-variant-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;

  border-radius: 14px;

  background: rgba(91, 140, 255, 0.15);
  border: 1px solid rgba(91, 140, 255, 0.25);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
  font-weight: 600;

  color: var(--color-primary-hover);
}

.add-variant-content {
  text-align: left;
}

.add-variant-title {
  font-size: 15px;
  font-weight: 600;
}

.add-variant-subtitle {
  font-size: 13px;
  opacity: 0.65;
  margin-top: 2px;
}
/* =========================
   TABLE WRAPPER (MOBILE SCROLL)
========================= */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
}
.table-wrapper::-webkit-scrollbar {
  height: 6px;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--bg-overlay);
  border-radius: 999px;
}

/* =========================================================
   IMAGE GALLERY MODAL
========================================================= */

.modal-overlay.gallery-overlay {
  z-index: 10001;
}

.modal.gallery-modal {
  max-width: 800px;
  width: 90%;
}

.image-dropzone {
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: min(40px, 5vw);
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
  background: var(--bg-overlay);
  transition: all 0.2s ease;
}

.image-dropzone:hover {
  background: var(--bg-overlay);
}

.image-dropzone-icon {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.image-dropzone-text {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-main);
}

.image-dropzone-subtext {
  margin: 5px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  max-height: 300px;
  overflow-y: auto;
}

.gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.gallery-item.main-item {
  border: 2px solid var(--color-primary);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.gallery-item-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.gallery-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: space-between;
  padding: 5px;
}

.gallery-item-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
}

.gallery-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}

/* =========================================================
   WARNING MODAL
========================================================= */

.warning-modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-color);
  overflow: hidden;
  animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.warning-modal-header {
  padding: 24px 24px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.warning-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-danger);
  flex-shrink: 0;
}

.warning-icon-wrapper.warning-yellow {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.warning-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-main);
  font-weight: 600;
}

.warning-modal-body {
  padding: 0 24px 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.warning-modal-footer {
  padding: 16px 24px;
  background: var(--bg-overlay);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--border-color);
}

.warning-btn-cancel {
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.warning-btn-cancel:hover {
  background: var(--bg-overlay);
}

.warning-btn-confirm {
  background: var(--color-danger);
  border: none;
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.warning-btn-confirm:hover {
  background: var(--color-danger-hover);
}

.warning-btn-confirm.btn-yellow {
  background: var(--color-warning);
}

.warning-btn-confirm.btn-yellow:hover {
  background: var(--color-warning-hover);
}












/* =========================
   PRODUCT VIEW MODAL RESPONSIVE
========================= */
.pvm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-color);
}

.pvm-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pvm-tabs {
  display: flex;
  gap: 24px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  overflow-x: auto;
  white-space: nowrap;
}

.pvm-content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.pvm-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pvm-table-container {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow-x: auto;
}

@media (max-width: 768px) {
  .pvm-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
  }
  
  .pvm-header .close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .pvm-header-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .pvm-tabs {
    padding: 0 16px;
    gap: 16px;
  }

  .pvm-content-grid {
    grid-template-columns: 1fr;
  }

  .pvm-details-grid {
    grid-template-columns: 1fr;
  }

  .modal-content {
    padding: 16px !important;
  }

  .modal-actions {
    padding: 16px !important;
  }
}
.pvm-container {
  max-width: 1000px;
  width: 95%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.pvm-image-container {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg-overlay);
  overflow: hidden;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.pvm-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.pvm-title {
  margin: 0 0 4px 0;
  font-size: 24px;
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.2;
}

.pvm-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.pvm-sku {
  font-size: 14px;
  color: var(--text-muted);
}

.pvm-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-color);
}

.pvm-stock {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

/* =========================================
   CUSTOM DROPDOWN (ADD ATTRIBUTE)
   ========================================= */
.custom-dropdown-container {
  position: relative;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 10px;
}

.custom-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.custom-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.dropdown-arrow {
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 100;
  animation: dropdownFadeIn 0.2s ease forwards;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.custom-dropdown-group {
  margin-bottom: 8px;
}

.custom-dropdown-group:last-child {
  margin-bottom: 0;
}

.custom-dropdown-label {
  padding: 4px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.custom-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-main);
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, padding-left 0.15s ease;
}

.custom-dropdown-item:hover {
  background: var(--bg-overlay);
  padding-left: 20px;
}
 
.custom-table-checkbox {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--bg-main);
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color); /* Usamos el borde del tema por defecto */
  border-radius: 4px;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Efecto hover para notar interactividad */
.custom-table-checkbox:hover {
  border-color: var(--color-primary);
}

.custom-table-checkbox::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  /* El fondo del gancho toma el color de texto contrastante */
  background-color: var(--color-primary-text);
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.custom-table-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.custom-table-checkbox:checked::before {
  transform: scale(1);
}
/* =========================
   MODAL RESPONSIVE FIXES
========================= */
.pvm-tabs {
  white-space: nowrap;
}

.pvm-tabs::-webkit-scrollbar {
  height: 6px;
}
.pvm-tabs::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.pvm-tabs button {
  flex-shrink: 0;
  white-space: nowrap;
}

.pvm-modal-body {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  background: var(--bg-main);
}

.pvm-modal-footer {
  background: var(--bg-card);
  padding: 24px 32px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 768px) {
  .pvm-modal-body {
    padding: 16px;
  }
  .pvm-modal-footer {
    padding: 16px;
    flex-direction: column;
  }
  .pvm-modal-footer button {
    width: 100%;
    justify-content: center;
  }
}


/* Animations */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }



/* RESPONSIVE CUSTOMER DETAILS MODAL */
.customer-modal-drawer {
  overflow: hidden;
}

.customer-modal-body {
  overflow-y: auto;
}

.customer-modal-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.customer-modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.customer-modal-sale-details { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
.customer-modal-tabs { display: flex; padding: 0 40px; border-bottom: 1px solid var(--border-color); background: var(--bg-card); overflow-x: auto; white-space: nowrap; }
.customer-modal-tabs::-webkit-scrollbar { display: none; }
.customer-modal-header-content { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }

/* Header Badges & Meta Info */
.customer-modal-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 8px;
}

.customer-badge-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.customer-badge-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.customer-badge-type.type-web {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.customer-badge-type.type-pos {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.customer-modal-meta {
  display: flex;
  gap: 16px;
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.customer-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.customer-meta-item svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.customer-modal-close-btn {
  position: absolute;
  right: 24px;
  top: 24px;
  z-index: 2;
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.customer-modal-close-btn:hover {
  background: var(--border-color);
  transform: scale(1.05);
}

/* =========================================
   CUSTOMER DETAILS MODAL KPI CARDS
   ========================================= */
.customer-modal-stats {
  padding: 24px 40px !important;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-main);
  width: 100%;
  box-sizing: border-box;
}

.customer-kpi-card {
  background: var(--bg-card);
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}

.customer-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.customer-kpi-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.customer-kpi-card.kpi-gastado .customer-kpi-icon-wrapper {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.customer-kpi-card.kpi-compras .customer-kpi-icon-wrapper {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.customer-kpi-card.kpi-puntos .customer-kpi-icon-wrapper {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.customer-kpi-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.customer-kpi-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: normal;
  line-height: 1.2;
}

.customer-kpi-value {
  color: var(--text-main);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.customer-kpi-card.kpi-gastado .customer-kpi-value {
  color: #10b981;
}

.customer-kpi-card.kpi-puntos .customer-kpi-value {
  color: #f59e0b;
}

/* =========================================
   CUSTOMER DETAILS MODAL KPI CARDS
   ========================================= */
.customer-details-kpi-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  padding: 20px 40px !important;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-main);
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.customer-details-kpi-card {
  background: var(--bg-card);
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.customer-details-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.customer-details-kpi-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.customer-details-kpi-card.kpi-gastado .customer-details-kpi-icon-wrapper {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.customer-details-kpi-card.kpi-compras .customer-details-kpi-icon-wrapper {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.customer-details-kpi-card.kpi-puntos .customer-details-kpi-icon-wrapper {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.customer-details-kpi-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.customer-details-kpi-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: normal;
  line-height: 1.2;
}

.customer-details-kpi-value {
  color: var(--text-main);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-details-kpi-card.kpi-gastado .customer-details-kpi-value {
  color: #10b981;
}

.customer-details-kpi-card.kpi-puntos .customer-details-kpi-value {
  color: #f59e0b;
}

/* =========================================
   PURCHASE CARDS (DESGLOSE DE COMPRAS)
   ========================================= */
.customer-sale-card-header {
  padding: 16px 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer;
  background: transparent;
  transition: background 0.2s ease;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
}

.customer-sale-card-header:hover,
.customer-sale-card-header.is-expanded {
  background: var(--bg-overlay) !important;
}

.customer-sale-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.customer-sale-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.customer-sale-mini-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  flex-shrink: 0;
}

.customer-sale-code-title {
  font-weight: 700;
  color: var(--text-main);
  font-size: 15px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.customer-sale-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-muted);
}

.customer-sale-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

.customer-sale-status-badge.sale-status-completed {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.customer-sale-status-badge.sale-status-cancelled {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.customer-sale-status-badge.sale-status-pending {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.customer-sale-status-badge.sale-status-refunded {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.customer-sale-status-badge.sale-status-neutral {
  background: var(--bg-overlay);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.customer-sale-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.customer-sale-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.customer-sale-amount-block {
  text-align: right;
  display: flex;
  flex-direction: column;
}

.customer-sale-amount-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.customer-sale-amount-val {
  font-weight: 800;
  color: var(--text-main);
  font-size: 17px;
  line-height: 1.2;
}

.customer-sale-chevron {
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

/* CRM Card & Tag Input */
.customer-crm-card {
  background: var(--bg-card);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.customer-crm-tag-form {
  display: flex;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.customer-crm-tag-input {
  flex: 1;
  min-width: 0 !important;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  box-sizing: border-box;
  font-size: 13px;
}

.customer-crm-tag-btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: opacity 0.2s;
}

.customer-crm-tag-btn:hover {
  opacity: 0.9;
}

/* Modal Footer */
.customer-modal-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.customer-modal-footer-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s ease;
}

.customer-modal-footer-btn:hover {
  background: var(--bg-overlay);
  border-color: var(--text-muted);
}

@media (max-width: 768px) {
  /* Habilitar scroll vertical completo de todo el modal en móviles */
  .customer-modal-drawer {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .customer-modal-header {
    flex-shrink: 0 !important;
    padding: 20px 16px 16px 16px !important;
    position: relative !important;
  }

  .customer-modal-header-content { 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    gap: 12px !important; 
  }

  .customer-modal-header-content h2 { 
    font-size: 1.4rem !important; 
    word-break: break-word !important;
  }

  .customer-modal-close-btn {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 34px !important;
    height: 34px !important;
    background: var(--bg-overlay) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: var(--text-main) !important;
    cursor: pointer !important;
    z-index: 5 !important;
  }

  .customer-modal-badges {
    gap: 6px !important;
    margin-top: 6px !important;
  }

  .customer-badge-code,
  .customer-badge-type {
    font-size: 11px !important;
    padding: 4px 9px !important;
  }

  .customer-modal-meta {
    flex-direction: column !important;
    gap: 8px !important;
    font-size: 12px !important;
    margin-top: 8px !important;
  }

  /* KPIs ordenados en 2 columnas, Gastado arriba ocupando ancho completo */
  .customer-modal-stats {
    flex-shrink: 0 !important;
    padding: 12px 14px !important;
  }

  .customer-details-kpi-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    overflow-x: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .customer-details-kpi-card {
    padding: 12px 12px !important;
    gap: 10px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .customer-details-kpi-card.kpi-gastado {
    grid-column: 1 / -1 !important;
  }

  .customer-details-kpi-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  .customer-details-kpi-value {
    font-size: 18px !important;
  }

  .customer-details-kpi-label {
    font-size: 10px !important;
    letter-spacing: 0.2px !important;
  }

  .customer-sale-card-header {
    padding: 14px 14px !important;
    gap: 12px !important;
  }

  .customer-sale-code-title {
    font-size: 14px !important;
  }

  .customer-sale-amount-val {
    font-size: 16px !important;
  }

  .customer-sale-meta-row {
    gap: 8px !important;
    font-size: 11.5px !important;
  }

  .customer-modal-grid-3 { 
    display: grid !important; 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 8px !important; 
    overflow-x: visible !important; 
    padding-bottom: 0 !important; 
  }

  .customer-kpi-card { 
    padding: 12px 12px !important;
    gap: 10px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .customer-kpi-card.kpi-gastado {
    grid-column: 1 / -1 !important;
  }

  .customer-kpi-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  .customer-kpi-value { 
    font-size: 19px !important; 
  }

  .customer-kpi-label { 
    font-size: 10px !important; 
    letter-spacing: 0.2px !important;
  }

  .customer-modal-tabs { 
    flex-shrink: 0 !important;
    padding: 0 14px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  }

  .customer-modal-tabs button {
    padding: 12px 14px !important;
    font-size: 12.5px !important;
  }

  .customer-modal-body {
    flex: none !important;
    overflow-y: visible !important;
    height: auto !important;
    padding: 16px 14px 40px 14px !important;
    box-sizing: border-box !important;
  }

  .customer-modal-grid-2 { 
    grid-template-columns: 1fr !important; 
    gap: 12px !important; 
  }

  .customer-crm-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  .customer-modal-sale-details { 
    grid-template-columns: 1fr !important; 
    gap: 16px !important; 
  }

  .customer-modal-container { 
    padding: 14px !important; 
  }
}



/* RESPONSIVE TABLE & GENERAL PAGE */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; border-radius: 10px; border: 1px solid var(--border-color); }
.products-table { width: 100%; min-width: 800px; border: none; }
.modal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.filters-container-inner { display: flex; gap: 10px; align-items: center; }

@media (max-width: 768px) {
  .products-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .products-header > div { width: 100%; justify-content: flex-start; }
  .products-header button, .products-header a { flex: 1; justify-content: center; }
  .modal-form-grid { grid-template-columns: 1fr; }
  .filters-container-inner { flex-direction: column; align-items: stretch; }
  .filters-container-inner > div { width: 100%; }
  .filters-container-inner > button { width: 100%; justify-content: center; }
}


.products-container { width: 100%; max-width: 100%; overflow-x: hidden; }
.table-container { max-width: 100%; }


/* Removed duplicate obsolete media queries for customer-modal */



/* =========================
   CUSTOMERS PREMIUM TABLE
========================= */

.customers-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-top: -8px;
}

.customers-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.customer-row {
  background: var(--bg-card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.customer-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  background: var(--bg-overlay);
}

.customer-row td {
  padding: 16px;
  vertical-align: middle;
}

.customer-row td:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.customer-row td:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.code-badge {
  font-family: monospace;
  font-weight: 600;
  font-size: 13px;
  background: rgba(255,255,255,0.05);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.customer-info-cell {
  display: flex;
  align-items: center;
  gap: 14px;
}

.customer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.customer-name-group {
  display: flex;
  flex-direction: column;
}

.customer-fullname {
  font-weight: 600;
  color: var(--text-main);
  font-size: 15px;
}

.customer-email {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.vip-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: inset 0 0 0 1px currentColor;
}

.purchases-cell {
  display: flex;
  flex-direction: column;
}

.purchases-amount {
  font-weight: 700;
  color: var(--text-main);
  font-size: 15px;
}

.purchases-points {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 600;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.status-badge.active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.status-badge.inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-view {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}
.btn-view:hover {
  background: #3b82f6;
  color: white;
  transform: translateY(-2px);
}

.btn-edit {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}
.btn-edit:hover {
  background: #f59e0b;
  color: white;
  transform: translateY(-2px);
}

.btn-delete {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.btn-delete:hover {
  background: #ef4444;
  color: white;
  transform: translateY(-2px);
}

/* =========================
   LINK CUSTOMER MODAL
========================= */
.link-modal-content {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  max-width: 700px;
  width: 100%;
  animation: fadeIn 0.2s ease;
  overflow: hidden;
  color: var(--text-main);
}
.link-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.link-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-main);
}
.link-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
}
.link-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.link-modal-error {
  padding: 12px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.link-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.link-search-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.link-search-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}
.link-search-input-wrapper {
  position: relative;
}
.link-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}
.link-search-input {
  width: 100%;
  padding: 10px 10px 10px 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  box-sizing: border-box;
}
.link-search-loading {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-muted);
}
.link-results-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.link-result-item {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.link-result-item:hover {
  background: var(--bg-overlay);
}
.link-result-item-main {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
}
.link-result-item-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.link-selected-card {
  border-radius: 8px;
  padding: 16px;
  position: relative;
}
.link-selected-user {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.link-selected-pos {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.link-selected-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
}
.link-selected-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.link-selected-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
}
.link-selected-avatar-user {
  background: #3b82f6;
}
.link-selected-avatar-pos {
  background: #8b5cf6;
}
.link-selected-info {
  display: flex;
  flex-direction: column;
}
.link-selected-name {
  font-weight: 600;
  color: var(--text-main);
}
.link-selected-desc {
  font-size: 12px;
  color: var(--text-muted);
}
.link-modal-note {
  margin-top: 10px;
  padding: 16px;
  background: var(--bg-overlay);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.link-modal-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border-color);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.link-modal-footer button {
  width: 100%;
  white-space: nowrap;
  justify-content: center;
}
.link-submit-btn {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* MOBILE TABLE ACTIONS DROPDOWN */
@media (max-width: 768px) {
  .actions-col {
    display: none !important;
  }
  .hide-on-pc {
    display: block !important;
  }
}

/* DESKTOP HIDE ACTIONS DROPDOWN */
@media (min-width: 769px) {
  .hide-on-pc {
    display: none !important;
  }
}

/* DROPDOWN STYLING */
.mobile-actions-dropdown {
  position: relative;
}
.dropdown-toggle {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 50;
  min-width: 140px;
  padding: 4px;
}
.mobile-actions-dropdown:focus-within .dropdown-content,
.mobile-actions-dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}
.dropdown-item:hover {
  background: var(--bg-input);
  color: var(--color-primary);
}

@media (max-width: 768px) { .hide-on-mobile { display: none !important; } }




.customers-table:focus-within { overflow: visible !important; }

/* =========================================
/* =========================================
   CUSTOMERS KPI CARDS & FILTERS RESPONSIVE
   ========================================= */
.customers-kpi-grid,
.customers-kpi-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
}

.customers-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}

.customers-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.customers-kpi-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3.5px;
  background: var(--color-primary);
}

.customers-kpi-card.kpi-total::before { background: #3b82f6; }
.customers-kpi-card.kpi-active::before { background: #10b981; }
.customers-kpi-card.kpi-new::before { background: #8b5cf6; }
.customers-kpi-card.kpi-points::before { background: #f59e0b; }

.customers-kpi-top {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
}

.customers-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.15;
  word-break: break-word;
  white-space: normal;
}

.customers-kpi-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.customers-kpi-icon-mini {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.customers-kpi-card.kpi-total .customers-kpi-icon-mini {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.customers-kpi-card.kpi-active .customers-kpi-icon-mini {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.customers-kpi-card.kpi-new .customers-kpi-icon-mini {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
}

.customers-kpi-card.kpi-points .customers-kpi-icon-mini {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.customers-kpi-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}

@media (max-width: 768px) {
  .customers-kpi-grid,
  .customers-kpi-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px;
  }

  .customers-kpi-card {
    padding: 12px 10px 10px 12px;
    gap: 6px;
    border-radius: 10px;
  }

  .customers-kpi-value {
    font-size: 16px;
  }

  .customers-kpi-bottom {
    gap: 6px;
  }

  .customers-kpi-icon-mini {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }

  .customers-kpi-icon-mini svg {
    width: 12px;
    height: 12px;
  }

  .customers-kpi-label {
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
  }
}

/* Filters panel styles */
.filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  background: var(--bg-card);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  animation: fadeIn 0.2s ease;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.filter-group label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobile Media Queries */
@media (max-width: 768px) {
  .customers-kpi-grid,
  .customers-kpi-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .customers-kpi-card {
    padding: 12px 10px 10px 14px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    text-align: left !important;
    min-width: 0 !important;
    position: relative !important;
  }

  .customers-kpi-card::before {
    width: 3.5px !important;
  }

  .customers-kpi-top {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .customers-kpi-value {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .customers-kpi-bottom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .customers-kpi-icon-mini {
    width: 20px !important;
    height: 20px !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
  }

  .customers-kpi-icon-mini svg {
    width: 12px !important;
    height: 12px !important;
  }

  .customers-kpi-label {
    font-size: 11px !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
    color: var(--text-muted) !important;
  }

  /* Filtros organizados en 2 columnas */
  .filters-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .filters-panel .filter-full-width {
    grid-column: 1 / -1 !important;
  }

  .filters-panel label {
    font-size: 11px !important;
  }

  .filters-panel input,
  .filters-panel select {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }
}

@media (max-width: 480px) {
  .customers-kpi-grid,
  .customers-kpi-container {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .customers-kpi-card {
    padding: 10px 8px 8px 12px !important;
    gap: 5px !important;
  }

  .customers-kpi-value {
    font-size: 17px !important;
  }

  .customers-kpi-label {
    font-size: 10.5px !important;
  }

  .filters-panel {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .customer-details-kpi-container {
    gap: 6px !important;
    padding: 10px 10px !important;
  }

  .customer-details-kpi-card {
    padding: 10px 8px !important;
    gap: 8px !important;
  }

  .customer-details-kpi-icon-wrapper {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
  }

  .customer-details-kpi-value {
    font-size: 16px !important;
  }

  .customer-details-kpi-label {
    font-size: 9.5px !important;
  }

  .customer-sale-card-header {
    padding: 12px 10px !important;
    gap: 10px !important;
  }

  .customer-sale-code-title {
    font-size: 13.5px !important;
  }

  .customer-sale-amount-val {
    font-size: 15px !important;
  }
}



/* =============================================
   CUSTOMER MODAL (cm-*) — PROFESSIONAL REDESIGN
   ============================================= */

/* ── Overlay ── */
.cm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

/* ── Container ── */
.cm-container {
  background: var(--bg-main);
  border-radius: 20px;
  border: 1px solid var(--border-color);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ── */
.cm-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  flex-shrink: 0;
}

.cm-header-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.2);
  color: #6366f1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cm-header-text {
  flex: 1;
  min-width: 0;
}

.cm-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  line-height: 1.2;
}

.cm-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 3px 0 0 0;
  line-height: 1.3;
}

.cm-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.cm-close-btn:hover {
  background: var(--bg-input);
  color: var(--text-main);
}

/* ── Form ── */
.cm-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Body / Scroll area ── */
.cm-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

.cm-body::-webkit-scrollbar {
  width: 4px;
}

.cm-body::-webkit-scrollbar-track {
  background: transparent;
}

.cm-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

/* ── Sections ── */
.cm-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cm-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

/* ── Fields ── */
.cm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cm-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.cm-required {
  color: #ef4444;
  font-weight: 700;
}

.cm-label-optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  font-style: italic;
}

.cm-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── Input Wrapper with Icon ── */
.cm-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cm-input-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}

/* ── Inputs ── */
.cm-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-main);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  outline: none;
}

.cm-input--icon {
  padding-left: 36px;
}

.cm-input:focus {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

.cm-input::-moz-placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.cm-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

/* ── 2-column Grid ── */
.cm-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Phone Row ── */
.cm-phone-row {
  display: flex;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.cm-phone-code-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cm-phone-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  pointer-events: none;
}

.cm-phone-code {
  width: 80px !important;
  padding-left: 28px !important;
  flex-shrink: 0;
}

.cm-phone-number {
  flex: 1;
  min-width: 0;
}

/* ── Toggle Card (Web Account) ── */
.cm-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  gap: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cm-toggle-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  background: var(--bg-overlay);
}

.cm-toggle-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cm-toggle-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  color: #6366f1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cm-toggle-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
}

.cm-toggle-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
}

/* ── Toggle Switch Visual ── */
.cm-toggle-switch {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease;
  flex-shrink: 0;
}

.cm-toggle-switch.active {
  background: #6366f1;
  border-color: #6366f1;
}

.cm-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: left 0.25s ease;
}

.cm-toggle-switch.active .cm-toggle-knob {
  left: calc(100% - 18px);
}

/* ── Web Account Fields ── */
.cm-web-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-overlay);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  margin-top: 4px;
}

/* ── Info Box (Automatic password & tips) ── */
.cm-info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 10px;
}

.cm-info-box.info-blue {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.22);
}

.cm-info-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.cm-info-box.info-blue .cm-info-icon-wrap {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.cm-info-content {
  flex: 1;
  min-width: 0;
}

.cm-info-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
}

.cm-info-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 3px;
}

.cm-info-desc strong {
  color: var(--text-main);
  font-weight: 600;
}

/* ── Status Toggle ── */
.cm-status-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 1px solid;
}

.cm-status-toggle.status-active {
  background: rgba(16, 185, 129, 0.07);
  border-color: rgba(16, 185, 129, 0.25);
}

.cm-status-toggle.status-inactive {
  background: rgba(239, 68, 68, 0.07);
  border-color: rgba(239, 68, 68, 0.25);
}

.cm-status-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cm-status-icon {
  flex-shrink: 0;
}

.cm-status-toggle.status-active .cm-status-icon {
  color: #10b981;
}

.cm-status-toggle.status-inactive .cm-status-icon {
  color: #ef4444;
}

.cm-status-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
}

.cm-status-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
}

.cm-status-toggle.status-active .cm-toggle-switch {
  background: #10b981;
  border-color: #10b981;
}

/* ── Footer ── */
.cm-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
  flex-shrink: 0;
}

.cm-btn-cancel {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  transition: all 0.2s ease;
}

.cm-btn-cancel:hover:not(:disabled) {
  background: var(--bg-overlay);
  border-color: rgba(99, 102, 241, 0.3);
}

.cm-btn-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cm-btn-submit {
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-primary, #6366f1);
  color: var(--color-primary-text, #ffffff);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.cm-btn-submit:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.cm-btn-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* ── Responsive: Mobile sheet from bottom ── */
@media (max-width: 540px) {
  .cm-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .cm-container {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    max-width: 100%;
    border-bottom: none;
  }

  .cm-header {
    padding: 16px 20px;
  }

  .cm-body {
    padding: 16px 20px;
    gap: 20px;
  }

  .cm-footer {
    padding: 14px 20px;
    justify-content: stretch;
  }

  .cm-grid-2 {
    grid-template-columns: 1fr;
  }

  .cm-btn-cancel {
    flex: 1;
    text-align: center;
    justify-content: center;
  }

  .cm-btn-submit {
    flex: 1;
    min-width: unset;
  }

  .cm-phone-code {
    width: 72px !important;
  }
}

/* ── Validation States, Alerts & Previews in CustomerModal ── */
.cm-input--error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

.cm-input--success {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
}

.cm-field-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #f59e0b;
  font-weight: 500;
  margin-top: 2px;
}

.cm-pos-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-overlay);
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.cm-pos-notice-icon {
  color: #8b5cf6;
  flex-shrink: 0;
  margin-top: 1px;
}

.cm-pos-notice strong {
  color: var(--text-main);
}

.cm-pos-notice code {
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}

.cm-username-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 12px;
}

.cm-username-preview-left {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

.cm-username-icon {
  color: #6366f1;
  flex-shrink: 0;
}

.cm-username-badge {
  font-family: monospace;
  font-weight: 700;
  font-size: 12.5px;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 2px 8px;
  border-radius: 6px;
  word-break: break-all;
}

.cm-alert-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid;
  font-size: 12px;
  line-height: 1.4;
}

.cm-alert-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.cm-alert-content {
  flex: 1;
  min-width: 0;
}

.cm-alert-title {
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 2px;
}

.cm-alert-desc {
  font-size: 11.5px;
  line-height: 1.4;
}

.cm-alert-desc code {
  font-family: monospace;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.12);
}

.cm-alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.cm-alert-danger .cm-alert-desc {
  color: var(--text-main);
}

.cm-alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.32);
  color: #f59e0b;
}

.cm-alert-warning .cm-alert-desc {
  color: var(--text-main);
}

.cm-alert-success {
  background: rgba(16, 185, 129, 0.09);
  border-color: rgba(16, 185, 129, 0.28);
  color: #10b981;
}

.cm-alert-success .cm-alert-desc {
  color: var(--text-main);
}

.cm-alert-info {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
  color: #3b82f6;
}

/* =========================
    PRODUCTS CONTAINER
========================= */

.products-container {
  padding: 20px;
  font-family: "Segoe UI", sans-serif;
  color: var(--text-main);
}

/* =========================
   HEADER
========================= */
 
.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 20px;
  padding: 12px 16px;

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;

  backdrop-filter: blur(8px);
}

.products-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-main);
}

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

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);

  border: none;
  padding: 10px 14px;
  border-radius: 8px;

  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
  transition: 0.2s ease;

  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* =========================
   TABLA PRODUCTS
========================= */

.products-table {
  width: 100%;
  border-collapse: collapse;

  background: var(--bg-card);
  border-radius: 10px;

  overflow: hidden;
  border: 1px solid var(--border-color);
}

.products-table th {
  background: var(--bg-card);
  text-align: left;
  padding: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.products-table td {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
}

.products-table tr:hover {
  background: var(--bg-overlay);
}

/* =========================
   IMAGEN PRODUCTO
========================= */

.product-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;

  -o-object-fit: cover;

     object-fit: cover;
  border: 1px solid var(--border-color);
}

/* =========================
   BOTONES ACCIN
========================= */

.btn-edit {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);

  padding: 6px 10px;
  margin-right: 5px;

  border-radius: 6px;
  color: var(--color-warning);

  cursor: pointer;
  font-size: 13px;
  transition: 0.2s ease;
}

.btn-edit:hover {
  background: rgba(245, 158, 11, 0.25);
  transform: translateY(-1px);
}

.btn-delete {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);

  padding: 6px 10px;
  border-radius: 6px;

  color: var(--color-danger);
  cursor: pointer;
  font-size: 13px;

  transition: 0.2s ease;
}

.btn-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}

/* =========================
   MODAL (REUTILIZA USERS STYLE)
========================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  padding: 20px;
  box-sizing: border-box;
}

.modal {
  background: var(--bg-card);
  color: var(--text-main);
  width: 95%;
  max-width: 1000px;
  max-height: 90vh;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), inset 0 1px 0 var(--border-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal h2 {
  padding: 24px 30px;
  font-size: 24px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-main);
  
  
  margin: 0;
  letter-spacing: 0.5px;
}

/* =========================
   FORM GRID
========================= */

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;

  padding: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {

  margin-bottom: 8px;

  font-size: 11px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.6px;

  color: var(--text-muted);
}

.variant-card .form-grid {
  padding: 0;
  margin-top: 18px;
}

.variant-card + .variant-card {
  margin-top: 24px;
}



.simple-card,
.variant-card {

  position: relative;
  overflow: visible;
}

.simple-card::before,
.variant-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;
  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--border-color),
      transparent
    );
}



.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  box-sizing: border-box;
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.form-group textarea {
  min-height: 120px;
  padding: 16px;
  resize: vertical;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  background: var(--bg-overlay);
  border-color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: var(--bg-overlay);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.filters-group {
  display: flex;
  gap: 8px;
  align-items: center;

  padding: 6px 10px;
  background: var(--bg-overlay);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

/* labels opcionales si agregas filtros avanzados */
.filters-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 4px;
}

/* =========================
    BOTN RESET FILTROS (recomendado)
========================= */

.btn-filter-reset {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);

  color: var(--color-danger);
  padding: 8px 12px;
  border-radius: 8px;

  font-size: 12px;
  cursor: pointer;

  transition: 0.2s ease;
}

.btn-filter-reset:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}

/* =========================
    RESPONSIVE
========================= */

@media (max-width: 768px) {
  .filters-bar {
    flex-direction: column;
    gap: 8px;
  }

  .filters-bar input,
  .filters-bar select {
    width: 100%;
  }
}

/* =========================
    BULK ACTIONS BAR
========================= */

.bulk-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-secondary, var(--bg-card));
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid var(--border-color);
  gap: 15px;
  flex-wrap: wrap;
}

.bulk-actions-left {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.bulk-actions-count {
  font-weight: 600;
  color: var(--color-primary);
}

.bulk-actions-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
}

.bulk-actions-right {
  display: flex;
}

.btn-danger-bulk {
  background: #ff4d4f;
  color: var(--text-main);
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: 0.2s ease;
}

.btn-danger-bulk:hover {
  background: #ff7875;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .bulk-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .bulk-actions-left {
    justify-content: center;
  }

  .bulk-actions-divider {
    display: none;
  }
  
  .bulk-actions-right {
    justify-content: center;
  }

  .btn-danger-bulk {
    width: 100%;
  }
}

.product-thumb {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumb img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* =========================
   LAYOUT PRINCIPAL
========================= */
.product-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

/* =========================
   IMAGEN
========================= */
.product-image-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================
   UPLOAD BOX 1:1
========================= */
.image-upload-box {
  width: 100%;
  aspect-ratio: 1 / 1;

  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 16px;

  background: var(--bg-overlay);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  overflow: hidden;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3);
}

.image-upload-box:hover {
  border-color: var(--color-primary);
  background: var(--bg-overlay);
  transform: translateY(-2px);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(96, 165, 250, 0.15);
}

.image-upload-box input {
  display: none;
}

.image-upload-box span {
  color: var(--text-muted);
}

.image-upload-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* =========================
   FORM RIGHT
========================= */
.product-form-right {
  background: transparent;
}






/* =========================================================
    VARIANT MODE SELECTOR
========================================================= */

.variant-mode-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variant-mode-selector label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.variant-mode-selector select {
  min-width: 180px;

  padding: 10px 12px;

  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

.variant-mode-selector select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}


/* =========================================================
   SHARED FORM CONTAINERS
========================================================= */

.simple-mode-container,
.variant-card {

  background: var(--bg-overlay);

  border: 1px solid var(--border-color);
  border-radius: 18px;

  padding: 24px;

  backdrop-filter: blur(10px);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.25);

  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;

  animation: fadeIn 0.2s ease;
}

.simple-mode-container:hover,
.variant-card:hover {

  border-color: rgba(255,255,255,0.12);

  box-shadow:
    0 14px 40px rgba(0,0,0,0.32);
}
/* =========================================================
   HEADER
========================================================= */

.simple-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 24px;
}

.simple-mode-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);

  margin-bottom: 4px;
}

.simple-mode-description {
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================
   GRID
========================================================= */

.simple-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;

  margin-bottom: 20px;
}

/* =========================================================
   CARD
========================================================= */

.simple-card {

  background: var(--bg-card);

  border: 1px solid var(--border-color);
  border-radius: 14px;

  padding: 20px;

  transition: 0.2s ease;
}

.simple-card:hover {
  border-color: rgba(255,255,255,0.12);
}

.simple-card h4 {
  margin: 0 0 18px 0;

  font-size: 15px;
  font-weight: 600;

  color: var(--color-primary);
}

.simple-card label {
  display: block;

  margin-bottom: 8px;

  font-size: 12px;
  color: var(--text-muted);
}

/* =========================================================
   SELECTS
========================================================= */

.simple-card select,
.simple-card input,
.simple-card textarea {

  width: 100%;

  padding: 11px 12px;

  background: var(--bg-main);

  border: 1px solid var(--border-color);
  border-radius: 10px;

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

.simple-card select:focus,
.simple-card input:focus,
.simple-card textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}

/* =========================================================
   MULTISELECT
========================================================= */

.simple-multiselect {
  min-height: 180px;

  padding: 10px !important;

  overflow-y: auto;
}

.simple-multiselect option {

  padding: 10px;
  margin-bottom: 4px;

  border-radius: 8px;

  background: transparent;
  color: var(--text-main);

  transition: 0.15s ease;
}

.simple-multiselect option:checked {
  background: var(--color-primary);
  color: var(--color-primary-text);
}


/* =========================
   SELECTOR CHIPS
========================= */

.selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.selector-chip {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;

  border-radius: 14px;
  border: 1px solid var(--border-color);

  background: var(--bg-input);
  color: var(--text-main);

  cursor: pointer;
  transition: .18s ease;

  font-size: 13px;
  font-weight: 500;
}

.selector-chip:hover {
  transform: translateY(-1px);

  background: var(--bg-overlay);
  border-color: var(--border-color);
}

.selector-chip.active {
  background:
    var(--bg-overlay);

  border-color:
    var(--bg-overlay);

  color: var(--color-primary-hover);

  box-shadow:
    0 0 0 1px var(--bg-overlay);
}

.selector-dot {
  width: 14px;
  height: 14px;

  border-radius: 999px;

  border: 2px solid
    rgba(255,255,255,.2);

  flex-shrink: 0;
}

/* =========================================================
   GLOBAL ATTRIBUTES GRID
========================================================= */

.simple-attributes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}


/* =========================================================
   GLOBAL CONFIG FIELDS
========================================================= */

.simple-global-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.simple-global-field label {

  font-size: 11px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.6px;

  color: var(--text-muted);
}

.simple-global-field select,
.simple-global-field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.simple-global-field select:hover,
.simple-global-field input:hover {
  border-color: rgba(255,255,255,0.14);
}

.simple-global-field select:focus,
.simple-global-field input:focus {

  border-color: var(--color-primary);

  box-shadow:
    0 0 0 3px rgba(37,99,235,0.16),
    0 10px 24px rgba(37,99,235,0.12);

  transform: translateY(-1px);
}






/* =========================================================
   SUMMARY
========================================================= */

.simple-summary {
  margin-top: 24px;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 14px;
  padding: 22px;
}

.simple-summary h4 {
  margin: 0 0 20px 0;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 600;
}

.simple-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.simple-summary-item {

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.simple-summary-label {

  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.simple-summary-value {

  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  word-break: break-word;
}

/* =========================================================
   GENERATE BUTTON
========================================================= */

.simple-generate-btn {

  margin-top: 24px;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-hover)
  );

  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.simple-generate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(37,99,235,0.35);
}

/* =========================================================
   GENERATED COUNT
========================================================= */

.generated-count {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================
   ADVANCED VARIANT CARD
========================================================= */


.simple-card h4,
.variant-card h4 {

  margin: 0 0 18px 0;

  font-size: 15px;
  font-weight: 600;

  color: var(--color-primary);

  letter-spacing: 0.2px;
}

/* =========================================================
   TEXTAREA
========================================================= */

.form-group textarea {
  width: 100%;
  padding: 12px;
  resize: vertical;
  border-radius: 10px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-family: inherit;
}

.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* =========================================================
   FORM ACTIONS
========================================================= */

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 25px;
  margin-top: 30px;
  border-top: 1px solid var(--border-color);
}

.btn-secondary {

  background: var(--color-secondary);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s ease;
}

.btn-secondary:hover {
  background: var(--color-secondary);
}

/* =========================================================
   SCROLLBAR
========================================================= */

.simple-multiselect::-webkit-scrollbar,
.modal::-webkit-scrollbar {
  width: 8px;
}

.simple-multiselect::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track {
  background: transparent;
}

.simple-multiselect::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {

  background: var(--bg-overlay);
  border-radius: 20px;
}

.simple-multiselect::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .simple-summary-grid,
  .simple-attributes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .simple-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .product-layout {
    grid-template-columns: 1fr;
  }

  .simple-summary-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .simple-mode-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary,
  .simple-generate-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   VARIANT TABS
========================= */

.variant-tabs {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  backdrop-filter: blur(8px);
}

.variant-tab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.variant-tab:hover {
  background: var(--bg-overlay);
  color: var(--text-main);
}

.variant-tab.active {
  background: var(--color-primary);
  color: var(--color-primary-text);
  box-shadow:
    0 0 0 1px var(--border-color),
    0 8px 20px rgba(37,99,235,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
  .variant-tabs {
    width: 100%;
  }
  .variant-tab {
    flex: 1;
    text-align: center;
  }

}

/* =========================================================
   VARIANTS HEADER
========================================================= */

.variants-header {

  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  gap: 24px;

  margin-bottom: 28px;
  padding-bottom: 20px;

  border-bottom: 1px solid var(--border-color);
}

.variants-header-left {

  display: flex;
  flex-direction: column;
  gap: 18px;
}

.variants-header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variants-section-label {

  font-size: 22px;
  font-weight: 700;

  color: var(--text-main);

  letter-spacing: -0.3px;
}

.variants-section-description {

  font-size: 13px;
  color: var(--text-muted);

  max-width: 600px;
}


/* =========================================================
   VARIANTS HEADER
========================================================= */

.variants-header {

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;
  flex-wrap: wrap;

  margin-bottom: 24px;
}

.variants-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.variants-title {

  font-size: 22px;
  font-weight: 700;

  color: var(--text-main);
}

.variants-description {

  font-size: 13px;
  color: var(--text-muted);
}

.variants-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* =========================================================
   VARIANT CARD HEADER
========================================================= */

.variant-card-header {

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 24px;
}

.variant-card-title {

  font-size: 18px;
  font-weight: 600;

  color: var(--text-main);

  margin-bottom: 4px;
}

.variant-card-subtitle {

  font-size: 13px;
  color: var(--text-muted);
}

.variant-badge {

  min-width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,0.25),
      rgba(37,99,235,0.1)
    );

  border: 1px solid rgba(37,99,235,0.25);

  color: var(--color-primary);

  font-size: 13px;
  font-weight: 700;
}

/* =========================================================
   SECTION TITLE
========================================================= */

.variant-section-title {

  margin-top: 28px;
  margin-bottom: 18px;

  font-size: 14px;
  font-weight: 600;

  color: var(--color-primary);

  padding-bottom: 10px;

  border-bottom:
    1px solid var(--border-color);
}







/* =========================================================
    MOBILE FIXES PRODUCT FORM
========================================================= */

@media (max-width: 768px) {

  /* =========================
     MODAL
  ========================= */

  .modal {
    right: 0; bottom: 0;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* =========================
     TITLES
  ========================= */

  .modal h2 {
    font-size: 20px;
    padding: 18px;
  
  color: var(--text-main);}

  .variants-title {
    font-size: 18px;
  }

  .variants-description {
    font-size: 12px;
    line-height: 1.5;
  }

  /* =========================
     VARIANTS HEADER
  ========================= */

  .variants-header {

    flex-direction: column;
    align-items: stretch;

    gap: 18px;

    padding-bottom: 18px;
  }

  .variants-header-info {
    width: 100%;
  }

  /* CONTENEDOR DERECHO */
  .variants-header-actions {

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 12px;
  }

  /* =========================
     BOTN AGREGAR VARIANTE
  ========================= */

  .variants-header-actions .btn-primary {

    width: 100%;
    height: 46px;

    justify-content: center;

    flex-shrink: 0;
  }

  /* =========================
     TABS
  ========================= */

  .variant-tabs {

    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;

    padding: 4px;
    gap: 4px;

    flex-shrink: 0;
  }

  .variant-tab {

    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    font-size: 13px;
    text-align: center;

    white-space: nowrap;
  }

  /* =========================
     FIX MOVIMIENTO FEO
  ========================= */

  .variants-header-actions:has(.variant-tabs) {
    min-height: 104px;
  }

  /* =========================
     FORM ACTIONS
  ========================= */

  .form-actions {

    flex-direction: column-reverse;
    gap: 10px;
  }

  .form-actions button {
    width: 100%;
    height: 46px;
  }

  /* =========================
     VARIANT CARDS
  ========================= */

  .variant-card,
  .simple-mode-container,
  .simple-card {
    padding: 18px;
  }

  /* =========================
     INPUTS
  ========================= */

  .form-group input,
  .form-group select,
  .form-group textarea,
  .simple-global-field input,
  .simple-global-field select {

    height: 48px;
    font-size: 14px;
  }

  .form-group textarea {
    min-height: 100px;
  }

  /* =========================
     SUMMARY
  ========================= */

  .simple-summary {
    padding: 18px;
  }

  .simple-summary-item {
    padding: 14px;
  }

  /* =========================
     IMAGE
  ========================= */

  .product-image-box {
    width: 100%;
  }

  .image-upload-box {
    max-width: 100%;
  }
}





/* =========================================================
    MOBILE COMPACT UI
========================================================= */

@media (max-width: 768px) {

  /* =========================
     MODAL
  ========================= */

  .modal {
    right: 0; bottom: 0;
    border-radius: 0;
  }

  .modal h2 {
    padding: 14px 16px;
    font-size: 17px;
  
  color: var(--text-main);}

  /* =========================
     GENERAL PADDINGS
  ========================= */

  .form-grid {
    padding: 14px;
    gap: 12px;
  }

  .variant-card,
  .simple-mode-container,
  .simple-card,
  .simple-summary {
    padding: 14px;
  }

  /* =========================
     LABELS
  ========================= */

  .form-group label,
  .simple-global-field label,
  .simple-card label,
  .simple-summary-label {

    font-size: 10px;
    margin-bottom: 6px;
  }

  /* =========================
     INPUTS
  ========================= */

  .form-group input,
  .form-group select,
  .form-group textarea,
  .simple-global-field input,
  .simple-global-field select,
  .simple-card input,
  .simple-card select {

    height: 40px;

    padding: 0 12px;

    font-size: 12px;
    border-radius: 10px;
  }

  .form-group textarea {
    min-height: 90px;
    padding: 12px;
  }

  /* =========================
     BUTTONS
  ========================= */

  .btn-primary,
  .btn-secondary,
  .btn-delete,
  .simple-generate-btn {

    height: 40px;

    padding: 0 12px;

    font-size: 12px;
    border-radius: 10px;
  }

  /* =========================
     VARIANT TABS
  ========================= */

  .variant-tabs {
    padding: 3px;
    gap: 3px;
    border-radius: 10px;
  }

  .variant-tab {

    min-height: 38px;

    padding: 0 10px;

    font-size: 11px;
    border-radius: 8px;
  }

  /* =========================
     TITLES
  ========================= */

  .variants-title,
  .simple-mode-title,
  .variant-card-title {

    font-size: 16px;
  }

  .variants-description,
  .simple-mode-description,
  .variant-card-subtitle {

    font-size: 11px;
  }

  .variant-section-title {
    font-size: 13px;
    margin-top: 20px;
    margin-bottom: 14px;
  }

  /* =========================
     SUMMARY
  ========================= */

  .simple-summary-value {
    font-size: 12px;
  }

  /* =========================
     BADGE
  ========================= */

  .variant-badge {

    min-width: 34px;
    height: 34px;

    font-size: 11px;
    border-radius: 10px;
  }

  /* =========================
     IMAGE
  ========================= */

  .image-upload-box {
    border-radius: 10px;
  }

  /* =========================
     ACTIONS
  ========================= */

  .form-actions {
    margin-top: 20px;
    padding-top: 18px;
    gap: 8px;
  }

  /* =========================
     MULTISELECT
  ========================= */

 
}








/* =========================================================
    VARIANTS TABLE REDESIGN (COMPACT PRO)
========================================================= */

.variants-preview-container {
  margin-bottom: 24px;

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 18px;

  overflow: hidden;
  backdrop-filter: blur(12px);
}

/* =========================================================
   HEADER
========================================================= */

.variants-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 18px;

  border-bottom: 1px solid var(--border-color);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.02),
      transparent
    );
}

.variants-preview-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.variants-preview-description {
  font-size: 12px;
  color: var(--text-muted);
}

.variants-preview-count {
  min-width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: var(--bg-overlay);
  border: 1px solid var(--bg-overlay);

  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

/* =========================================================
   TABLE WRAPPER
========================================================= */

.variants-preview-table-wrapper {
  overflow: auto;
  max-height: 420px;
}

/* scrollbar dark */
.variants-preview-table-wrapper::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.variants-preview-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 999px;
}

/* =========================================================
   TABLE
========================================================= */

.variants-preview-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

/* sticky header */
.variants-preview-table thead {
  position: sticky;
  top: 0;
  z-index: 10;

  background: var(--bg-card);
  backdrop-filter: blur(20px);
}

/* =========================================================
   HEADERS
========================================================= */

.variants-preview-table th {
  text-align: left;

  padding: 12px 14px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--text-muted);

  border-bottom:
    1px solid var(--border-color);

  white-space: nowrap;
}

/* =========================================================
   CELLS
========================================================= */

.variants-preview-table td {
  padding: 10px 14px;

  font-size: 12px;
  color: var(--text-main);

  border-bottom:
    1px solid rgba(255,255,255,0.04);

  vertical-align: middle;
}

/* zebra */
.variants-preview-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.015);
}

.variants-preview-table tbody tr {
  transition: .18s ease;
}

.variants-preview-table tbody tr:hover {
  background: rgba(96,165,250,0.06);
}

/* =========================================================
   FIRST COLUMN (#)
========================================================= */

.variants-preview-table td:first-child {
  width: 50px;
  color: var(--text-muted);
  font-weight: 700;
}

/* =========================================================
   SKU STYLE
========================================================= */

.variants-preview-table td:nth-child(2) {
  font-family: monospace;
  font-size: 12px;
  color: var(--color-primary-hover);
  font-weight: 600;
}

/* =========================================================
   PRICE
========================================================= */

.variants-preview-table td:nth-child(6) {
  font-weight: 700;
  color: var(--color-success);
}

/* =========================================================
   ATTRIBUTES CELL
========================================================= */

.variant-attributes-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  max-width: 260px;
}

/* =========================================================
   ATTRIBUTE CHIP
========================================================= */

.variant-attribute-tag {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  padding: 4px 8px;

  border-radius: 999px;

  background: var(--bg-overlay);

  border: 1px solid var(--border-color);

  transition: .15s ease;
}

.variant-attribute-tag:hover {
  background: var(--bg-overlay);
}

.variant-attribute-name {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;

  color: var(--text-muted);
}

.variant-attribute-value {
  font-size: 11px;
  color: var(--text-main);
  font-weight: 600;
}

/* =========================================================
   STATUS
========================================================= */

.variant-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 90px;

  padding: 5px 10px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
}

.variant-status.active {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.22);
  color: var(--color-success);
}

.variant-status.inactive {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.22);
  color: var(--color-danger);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .variants-preview-table-wrapper {
    max-height: 360px;
  }

  .variants-preview-table {
    min-width: 720px;
  }

  .variants-preview-table th,
  .variants-preview-table td {
    padding: 10px;
    font-size: 11px;
  }

  .variant-attributes-cell {
    max-width: 180px;
  }
}



















/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .variants-preview-header {

    padding: 16px;

    align-items: flex-start;
    gap: 12px;
  }

  .variants-preview-title {
    font-size: 16px;
  }

  .variants-preview-description {
    font-size: 11px;
  }
  .variants-preview-table th,
  .variants-preview-table td {
    padding: 12px 14px;
    font-size: 12px;
  }
}

/* =========================================================
    DARK SELECT OPTIONS FIX
========================================================= */

/* Select base */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}

/* Opciones del dropdown */
select option {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  padding: 10px;
}

/* Opcin seleccionada */
select option:checked {
  background: var(--color-primary) !important;
  color: var(--text-main) !important;
}

/* Hover/focus en algunos navegadores */
select option:hover,
select option:focus {
  background: var(--color-secondary) !important;
  color: var(--text-main) !important;
}

/* Fix especfico para tus clases */
.form-group select,
.simple-card select,
.simple-global-field select,
.filters-bar select,
.variant-mode-selector select {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color);
}

/* Flecha del select ms limpia */
.form-group select,
.simple-card select,
.simple-global-field select,
.filters-bar select,
.variant-mode-selector select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px;
  background-repeat: no-repeat;

  padding-right: 40px;
}




/* ==========================================
   SELECTOR HEADER
========================================== */

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.selected-counter {
  padding: 6px 12px;
  border-radius: 999px;

  background: var(--bg-overlay);
  border: 1px solid var(--bg-overlay);

  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

/* ==========================================
   COLORES
========================================== */

.color-selector-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(110px, 1fr));

  gap: 14px;
}

.color-circle {
  border: 1px solid var(--border-color);
  background: var(--bg-input);

  border-radius: 18px;
  padding: 14px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  cursor: pointer;
  transition: .18s ease;
}

.color-circle:hover {
  transform: translateY(-2px);
  background: var(--bg-overlay);
}

.color-circle.active {
  border: 2px solid var(--color-primary);
  background:
    var(--bg-overlay);
}

.color-circle-preview {
  width: 52px;
  height: 52px;

  border-radius: 999px;

  border:
    3px solid rgba(255,255,255,.18);

  box-shadow:
    inset 0 0 0 1px var(--border-color),
    0 8px 20px rgba(0,0,0,.25);
}

.color-circle span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

/* ==========================================
   TALLAS
========================================== */

.size-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.size-chip {
  min-width: 70px;
  height: 46px;

  border-radius: 14px;

  border: 1px solid
    var(--border-color);

  background:
    var(--bg-input);

  color: var(--text-main);
  font-weight: 700;
  font-size: 14px;

  cursor: pointer;
  transition: .18s ease;
}

.size-chip:hover {
  transform: translateY(-2px);
}

.size-chip.active {
  background:
    var(--bg-overlay);

  border: 2px solid var(--color-primary);

  color: var(--color-primary-hover);
}
/* =========================================================
   MOBILE - COLOR SELECTOR COMPACT
========================================================= */

@media (max-width: 768px) {

  /* grid ms compacto */
  .color-selector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* tarjeta pequea */
  .color-circle {
    width: auto;
    min-width: unset;

    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    padding: 8px 10px;
    border-radius: 999px;

    min-height: unset;
  }

  /* sin hover raro en mobile */
  .color-circle:hover {
    transform: none;
  }

  /* crculo pequeo */
  .color-circle-preview {
    width: 18px;
    height: 18px;
    border-width: 2px;
    flex-shrink: 0;

    box-shadow: none;
  }

  /* texto ms pequeo */
  .color-circle span {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* activo ms limpio */
  .color-circle.active {
    border: 1px solid var(--color-primary);
    background: var(--bg-overlay);
  }

  /* contador ms chico */
  .selected-counter {
    padding: 4px 10px;
    font-size: 11px;
  }

  /* tallas tambin compactas */
  .size-selector {
    gap: 8px;
  }

  .size-chip {
    min-width: 52px;
    height: 38px;

    border-radius: 12px;
    font-size: 13px;
    padding: 0 12px;
  }
}











/* ==========================================
   VER MS BUTTON
========================================== */

.see-more-btn {
  width: 100%;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: var(--bg-overlay);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  transition: .2s ease;
}

.see-more-btn:hover {
  background: var(--bg-overlay);
}

/* ==========================================
   MODAL SELECTOR
========================================== */

.selector-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.75);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.selector-modal {
  width: min(850px, 95vw);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  padding: 28px;
}

.selector-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.selector-modal-header button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: var(--bg-overlay);
  color: var(--text-main);
  cursor: pointer;
}

.modal-grid {
  grid-template-columns:
    repeat(auto-fill, minmax(110px, 1fr));
}

.modal-size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.modal-ready-btn {
  margin-top: 24px;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 16px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

/* MOBILE */

@media (max-width: 768px) {
  .selector-modal {
    border-radius: 22px;
    padding: 18px;
  }

  .modal-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .modal-ready-btn {
    position: sticky;
    bottom: 0;
  }
}


.advanced-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.advanced-color-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  cursor: pointer;
  transition: .2s;
  min-width: 180px;
}

.advanced-color-item:hover {
  transform: translateY(-2px);
}

.advanced-color-item.active {
  border: 2px solid var(--color-primary);
  background: rgba(79,140,255,.15);
}

.advanced-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.25);
  flex-shrink: 0;
}

.advanced-color-item small {
  opacity: .65;
  font-size: 11px;
}

.advanced-selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


.add-mini-btn{
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border-color);
  border-radius: 12px;

  background:
    linear-gradient(
      180deg,
      var(--bg-overlay),
      var(--bg-overlay)
    );

  color: var(--color-primary-hover);

  cursor: pointer;
  transition: .22s ease;

  flex-shrink: 0;
}

.add-mini-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(96,165,250,.35);

  background:
    linear-gradient(
      180deg,
      var(--bg-overlay),
      var(--bg-overlay)
    );

  box-shadow:
    0 8px 18px var(--bg-overlay);
}

.add-mini-btn:active{
  transform: scale(.96);
}

.create-color-modal{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.create-color-modal input[type="color"]{
  width: 100%;
  height: 70px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
}

/* ==========================================
   PREMIUM CREATE MODALS
========================================== */

.create-modal{
  width: min(560px, 95vw);
  background:
    linear-gradient(
      180deg,
      var(--bg-card),
      var(--bg-main)
    );
  border:
    1px solid var(--border-color);
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,.45);
  animation:
    modalPop .22s ease;
}

@keyframes modalPop{
  from{
    opacity: 0;
    transform:
      translateY(20px)
      scale(.96);
  }
  to{
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

/* HEADER */

.create-modal-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding: 26px 28px;

  border-bottom:
    1px solid var(--bg-overlay);
}

.create-modal-header h2{
  margin: 0;
  color: var(--text-main);
  font-size: 24px;
  font-weight: 800;
}

.create-modal-header p{
  margin-top: 8px;

  color:
    var(--text-muted);

  font-size: 13px;
}

.close-modal-btn{
  width: 42px;
  height: 42px;

  border: none;
  border-radius: 14px;

  background:
    var(--bg-overlay);

  color: var(--text-main);
  cursor: pointer;

  transition: .2s;
}

.close-modal-btn:hover{
  background:
    var(--border-color);

  transform: rotate(90deg);
}

/* BODY */
.create-modal-body{
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* FORM */

.form-field-modern{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field-modern label{
  font-size: 12px;
  font-weight: 700;

  color:
    var(--text-muted);
}

.form-field-modern input,
.form-field-modern textarea{
  height: 54px;
  padding: 0 18px;
  border-radius: 18px;
  border:
    1px solid var(--border-color);
  background:
    var(--bg-input);
  color: var(--text-main);
  font-size: 14px;
  transition: .2s;
}

.form-field-modern textarea{
  height: auto;
  padding: 16px;
  resize: none;
}

.form-field-modern input:focus,
.form-field-modern textarea:focus{
  outline: none;

  border-color:
    var(--bg-overlay);
  box-shadow:
    0 0 0 4px
    var(--bg-overlay);
}

/* COLOR PREVIEW */
.color-preview-card{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 24px;
  background:
    var(--bg-input);
  border:
    1px solid var(--bg-overlay);
}

.color-preview-circle{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border:
    4px solid rgba(255,255,255,.15);
  box-shadow:
    0 12px 30px rgba(0,0,0,.25);
}

.color-preview-info{
  display: flex;
  flex-direction: column;
}

.color-preview-name{
  color: var(--text-main);
  font-size: 20px;
  font-weight: 700;
}

.color-preview-hex{
  color:
    var(--text-muted);

  font-size: 13px;
}

/* COLOR PICKER */

.premium-color-picker{
  width: 100%;
  height: 80px !important;
  border-radius: 20px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
}

/* SIZE */

.size-preview-card{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 24px;
  background:
    var(--bg-input);
  border:
    1px solid var(--bg-overlay);
}

.size-preview-chip{
  min-width: 90px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background:
    var(--bg-overlay);
  border:
    1px solid var(--bg-overlay);
  color: var(--color-primary-hover);
  font-weight: 800;
  font-size: 22px;
}

.size-preview-title{
  color: var(--text-main);
  font-weight: 700;
}

.size-preview-description{
  color:
    rgba(255,255,255,.45);

  font-size: 13px;
}

/* FOOTER */

.create-modal-footer{
  display: flex;
  gap: 12px;

  padding: 24px 28px;

  border-top:
    1px solid var(--bg-overlay);
}

.cancel-btn{
  flex: 1;
  height: 56px;

  border-radius: 18px;
  border: none;

  background:
    var(--bg-overlay);

  color: var(--text-main);
  font-weight: 700;
  cursor: pointer;
}

.save-btn{
  flex: 1;
  height: 56px;

  border-radius: 18px;
  border: none;

  background:
    linear-gradient(
      135deg,
      var(--color-primary),
      var(--color-primary)
    );

  color: var(--color-primary-text);
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 12px 24px
    var(--bg-overlay);

  transition: .2s;
}

.save-btn:hover{
  transform: translateY(-2px);
}

/* MOBILE */

@media(max-width:768px){

  .create-modal{
    border-radius: 26px;
  }

  .create-modal-header{
    padding: 20px;
  }

  .create-modal-body{
    padding: 20px;
  }

  .create-modal-footer{
    padding: 20px;
    flex-direction: column;
  }

  .color-preview-circle{
    width: 58px;
    height: 58px;
  }

  .color-preview-name{
    font-size: 17px;
  }
}

.modal-title-group{
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title-group h3{
  margin: 0;
}




/* ==========================================
   COLOR + TALLA LADO A LADO
========================================== */

.variant-main-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* color ocupa su espacio */
.variant-color-group{
  min-width: 0;
}

/* talla ms compacta */
.variant-size-group{
  display: flex;
  flex-direction: column;
}

/* grid de colores ms ordenado */
.variant-color-group .advanced-color-grid{
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(180px, 1fr));

  gap: 10px;
}

/* tallas ms compactas */
.variant-size-group .advanced-selector-grid{
  gap: 8px;
}

/* mobile: uno debajo del otro */
@media(max-width:768px){

  .variant-main-grid{
    grid-template-columns: 1fr;
  }
}





/* ==========================
   ADD VARIANT CARD
========================== */

.add-variant-card {
  width: 100%;
  border: 2px dashed rgba(255,255,255,0.15);
  background: var(--bg-overlay);

  border-radius: 18px;
  padding: 18px 24px;

  margin-top: 18px;

  display: flex;
  align-items: center;
  gap: 18px;

  cursor: pointer;
  transition: all 0.25s ease;

  color: var(--text-main);
}

.add-variant-card:hover {
  border-color: var(--color-primary);
  background: rgba(91, 140, 255, 0.08);

  transform: translateY(-2px);
}

.add-variant-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;

  border-radius: 14px;

  background: rgba(91, 140, 255, 0.15);
  border: 1px solid rgba(91, 140, 255, 0.25);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
  font-weight: 600;

  color: var(--color-primary-hover);
}

.add-variant-content {
  text-align: left;
}

.add-variant-title {
  font-size: 15px;
  font-weight: 600;
}

.add-variant-subtitle {
  font-size: 13px;
  opacity: 0.65;
  margin-top: 2px;
}
/* =========================
   TABLE WRAPPER (MOBILE SCROLL)
========================= */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
}
.table-wrapper::-webkit-scrollbar {
  height: 6px;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--bg-overlay);
  border-radius: 999px;
}

/* =========================================================
   IMAGE GALLERY MODAL
========================================================= */

.modal-overlay.gallery-overlay {
  z-index: 10001;
}

.modal.gallery-modal {
  max-width: 800px;
  width: 90%;
}

.image-dropzone {
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: min(40px, 5vw);
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
  background: var(--bg-overlay);
  transition: all 0.2s ease;
}

.image-dropzone:hover {
  background: var(--bg-overlay);
}

.image-dropzone-icon {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.image-dropzone-text {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-main);
}

.image-dropzone-subtext {
  margin: 5px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  max-height: 300px;
  overflow-y: auto;
}

.gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.gallery-item.main-item {
  border: 2px solid var(--color-primary);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.gallery-item-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.gallery-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: space-between;
  padding: 5px;
}

.gallery-item-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
}

.gallery-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}

/* =========================================================
   WARNING MODAL
========================================================= */

.warning-modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-color);
  overflow: hidden;
  animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.warning-modal-header {
  padding: 24px 24px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.warning-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-danger);
  flex-shrink: 0;
}

.warning-icon-wrapper.warning-yellow {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.warning-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-main);
  font-weight: 600;
}

.warning-modal-body {
  padding: 0 24px 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.warning-modal-footer {
  padding: 16px 24px;
  background: var(--bg-overlay);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--border-color);
}

.warning-btn-cancel {
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.warning-btn-cancel:hover {
  background: var(--bg-overlay);
}

.warning-btn-confirm {
  background: var(--color-danger);
  border: none;
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.warning-btn-confirm:hover {
  background: var(--color-danger-hover);
}

.warning-btn-confirm.btn-yellow {
  background: var(--color-warning);
}

.warning-btn-confirm.btn-yellow:hover {
  background: var(--color-warning-hover);
}












/* =========================
   PRODUCT VIEW MODAL RESPONSIVE
========================= */
.pvm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-color);
}

.pvm-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pvm-tabs {
  display: flex;
  gap: 24px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  overflow-x: auto;
  white-space: nowrap;
}

.pvm-content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.pvm-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pvm-table-container {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow-x: auto;
}

@media (max-width: 768px) {
  .pvm-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
  }
  
  .pvm-header .close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .pvm-header-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .pvm-tabs {
    padding: 0 16px;
    gap: 16px;
  }

  .pvm-content-grid {
    grid-template-columns: 1fr;
  }

  .pvm-details-grid {
    grid-template-columns: 1fr;
  }

  .modal-content {
    padding: 16px !important;
  }

  .modal-actions {
    padding: 16px !important;
  }
}
.pvm-container {
  max-width: 1000px;
  width: 95%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.pvm-image-container {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg-overlay);
  overflow: hidden;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.pvm-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.pvm-title {
  margin: 0 0 4px 0;
  font-size: 24px;
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.2;
}

.pvm-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.pvm-sku {
  font-size: 14px;
  color: var(--text-muted);
}

.pvm-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-color);
}

.pvm-stock {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

/* =========================================
   CUSTOM DROPDOWN (ADD ATTRIBUTE)
   ========================================= */
.custom-dropdown-container {
  position: relative;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 10px;
}

.custom-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.custom-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.dropdown-arrow {
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 100;
  animation: dropdownFadeIn 0.2s ease forwards;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.custom-dropdown-group {
  margin-bottom: 8px;
}

.custom-dropdown-group:last-child {
  margin-bottom: 0;
}

.custom-dropdown-label {
  padding: 4px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.custom-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-main);
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, padding-left 0.15s ease;
}

.custom-dropdown-item:hover {
  background: var(--bg-overlay);
  padding-left: 20px;
}
 
.custom-table-checkbox {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--bg-main);
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color); /* Usamos el borde del tema por defecto */
  border-radius: 4px;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Efecto hover para notar interactividad */
.custom-table-checkbox:hover {
  border-color: var(--color-primary);
}

.custom-table-checkbox::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  /* El fondo del gancho toma el color de texto contrastante */
  background-color: var(--color-primary-text);
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.custom-table-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.custom-table-checkbox:checked::before {
  transform: scale(1);
}
/* =========================
   MODAL RESPONSIVE FIXES
========================= */
.pvm-tabs {
  white-space: nowrap;
}

.pvm-tabs::-webkit-scrollbar {
  height: 6px;
}
.pvm-tabs::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.pvm-tabs button {
  flex-shrink: 0;
  white-space: nowrap;
}

.pvm-modal-body {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  background: var(--bg-main);
}

.pvm-modal-footer {
  background: var(--bg-card);
  padding: 24px 32px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 768px) {
  .pvm-modal-body {
    padding: 16px;
  }
  .pvm-modal-footer {
    padding: 16px;
    flex-direction: column;
  }
  .pvm-modal-footer button {
    width: 100%;
    justify-content: center;
  }
}


/* Animations */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }



/* RESPONSIVE CUSTOMER DETAILS MODAL */
.customer-modal-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.customer-modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.customer-modal-sale-details { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
.customer-modal-tabs { display: flex; padding: 0 40px; border-bottom: 1px solid var(--border-color); background: var(--bg-card);  overflow-x: auto; white-space: nowrap; }
.customer-modal-tabs::-webkit-scrollbar { display: none; }
.customer-modal-header-content { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }

@media (max-width: 768px) {
  .customer-modal-grid-3 { 
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    gap: 12px; 
    padding-bottom: 8px; 
    -webkit-overflow-scrolling: touch; 
  }
  .customer-modal-grid-3 > div { 
    flex: 0 0 auto; 
    min-width: 200px; 
  }
  .customer-modal-grid-3::-webkit-scrollbar { display: none; }
  .customer-modal-grid-2 { grid-template-columns: 1fr; }
  .customer-modal-sale-details { grid-template-columns: 1fr; gap: 20px; }
  .customer-modal-tabs { padding: 0 16px; }
  .customer-modal-header-content { flex-direction: column; align-items: flex-start; gap: 10px; }
  .customer-modal-container { padding: 16px !important; }
}



/* RESPONSIVE TABLE & GENERAL PAGE */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; border-radius: 10px; border: 1px solid var(--border-color); }
.products-table { width: 100%; min-width: 800px; border: none; }
.modal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.filters-container-inner { display: flex; gap: 10px; align-items: center; }

@media (max-width: 768px) {
  .products-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .products-header > div { width: 100%; justify-content: flex-start; }
  .products-header button, .products-header a { flex: 1; justify-content: center; }
  .modal-form-grid { grid-template-columns: 1fr; }
  .filters-container-inner { flex-direction: column; align-items: stretch; }
  .filters-container-inner > div { width: 100%; }
  .filters-container-inner > button { width: 100%; justify-content: center; }
}


.products-container { width: 100%; max-width: 100%; overflow-x: hidden; }
.table-container { max-width: 100%; }


/* Removed card table layout to enable horizontal scroll */
@media (max-width: 768px) { 
  .customer-modal-tabs { flex-shrink: 0 !important; } 
  .customer-modal-container { padding: 20px !important; }
  .customer-modal-header-content h2 { font-size: 1.5rem !important; }
  .customer-modal-grid-3 > div { padding: 14px !important; gap: 12px !important; }
  .customer-modal-grid-3 h3 { font-size: 20px !important; }
  .customer-modal-grid-3 svg { width: 20px; height: 20px; } 
}

/* =========================
   RESTORED CLASSES 
========================= */

.modal-actions {
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
  gap: 10px;
}

.modal-actions button {
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.modal-actions .btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.modal-actions .btn-secondary {
  background: var(--color-secondary);
  color: var(--text-main);
}

@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.products-header-actions {
  display: flex;
  gap: 12px;
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .products-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .products-header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    

  }
  .products-header-actions > * {
    width: 100%;
  }
}

.filters-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
  padding: 12px;
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border-color);
  backdrop-filter: blur(8px);
}

.filters-bar input,
.filters-bar select {
  padding: 9px 12px;
  border-radius: 8px;
  box-sizing: border-box;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 13px;
  outline: none;
  transition: 0.2s ease;
}

.filters-bar input:focus,
.filters-bar select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

.filters-bar input:hover,
.filters-bar select:hover {
  border-color: var(--text-muted);
}

.employee-role-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .employee-role-actions {
    flex-direction: column;
  }
  .employee-role-actions select,
  .employee-role-actions button {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   KPI GRIDS (OWNERS, EMPLOYEES, PAYROLL - ESTÁNDAR NORMALIZADO)
   ========================================================================== */
.owners-kpi-grid,
.employees-kpi-grid,
.payroll-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.owners-kpi-card,
.employees-kpi-card,
.payroll-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.owners-kpi-card:hover,
.employees-kpi-card:hover,
.payroll-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.owners-kpi-card::before,
.employees-kpi-card::before,
.payroll-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
}

/* Colors Owners */
.owners-kpi-card.kpi-total::before { background: #6366f1; }
.owners-kpi-card.kpi-active::before { background: #10b981; }
.owners-kpi-card.kpi-capital::before { background: #0ea5e9; }
.owners-kpi-card.kpi-products::before { background: #f59e0b; }

/* Colors Employees */
.employees-kpi-card.kpi-total::before { background: #6366f1; }
.employees-kpi-card.kpi-active::before { background: #10b981; }
.employees-kpi-card.kpi-salary::before { background: #0ea5e9; }
.employees-kpi-card.kpi-roles::before { background: #8b5cf6; }

/* Colors Payroll */
.payroll-kpi-card.kpi-paid::before { background: #10b981; }
.payroll-kpi-card.kpi-employees::before { background: #6366f1; }
.payroll-kpi-card.kpi-pending::before { background: #f59e0b; }
.payroll-kpi-card.kpi-projected::before { background: #3b82f6; }

.owners-kpi-top,
.employees-kpi-top,
.payroll-kpi-top {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.owners-kpi-value,
.employees-kpi-value,
.payroll-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    word-break: break-word;
    white-space: normal;
}

.owners-kpi-bottom,
.employees-kpi-bottom,
.payroll-kpi-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.owners-kpi-icon-mini,
.employees-kpi-icon-mini,
.payroll-kpi-icon-mini {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon backgrounds */
.owners-kpi-card.kpi-total .owners-kpi-icon-mini,
.employees-kpi-card.kpi-total .employees-kpi-icon-mini,
.payroll-kpi-card.kpi-employees .payroll-kpi-icon-mini {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.owners-kpi-card.kpi-active .owners-kpi-icon-mini,
.employees-kpi-card.kpi-active .employees-kpi-icon-mini,
.payroll-kpi-card.kpi-paid .payroll-kpi-icon-mini {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.owners-kpi-card.kpi-capital .owners-kpi-icon-mini,
.employees-kpi-card.kpi-salary .employees-kpi-icon-mini {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
}

.payroll-kpi-card.kpi-projected .payroll-kpi-icon-mini {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.owners-kpi-card.kpi-products .owners-kpi-icon-mini,
.payroll-kpi-card.kpi-pending .payroll-kpi-icon-mini {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.employees-kpi-card.kpi-roles .employees-kpi-icon-mini {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.owners-kpi-label,
.employees-kpi-label,
.payroll-kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 768px) {
    .owners-kpi-grid,
    .employees-kpi-grid,
    .payroll-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 16px;
    }

    .owners-kpi-card,
    .employees-kpi-card,
    .payroll-kpi-card {
        padding: 12px 10px 10px 12px;
        gap: 6px;
        border-radius: 10px;
    }

    .owners-kpi-value,
    .employees-kpi-value,
    .payroll-kpi-value {
        font-size: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .owners-kpi-bottom,
    .employees-kpi-bottom,
    .payroll-kpi-bottom {
        gap: 6px;
    }

    .owners-kpi-icon-mini,
    .employees-kpi-icon-mini,
    .payroll-kpi-icon-mini {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .owners-kpi-icon-mini svg,
    .employees-kpi-icon-mini svg,
    .payroll-kpi-icon-mini svg {
        width: 12px;
        height: 12px;
    }

    .owners-kpi-label,
    .employees-kpi-label,
    .payroll-kpi-label {
        font-size: 11px;
    }
}

/* ── EMPLOYEES FILTERS STYLES ── */
.employees-filters-container {
  margin-bottom: 20px;
}

.employees-search-bar-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 0;
}

.employees-search-bar-row.open {
  margin-bottom: 12px;
}

.employees-search-input-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
}

.employees-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.employees-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px 10px 38px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  font-size: 14px;
  height: 42px;
  transition: border-color 0.2s ease;
}

.employees-search-input:focus {
  border-color: var(--color-primary);
}

.employees-filter-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: 0.2s;
  font-weight: 500;
  height: 42px;
  box-sizing: border-box;
  font-size: 14px;
  flex-shrink: 0;
}

.employees-filter-toggle-btn.active {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}

.employees-filter-badge {
  background: #3b82f6;
  color: #fff;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.employees-filter-toggle-btn.active .employees-filter-badge {
  background: #ffffff;
  color: var(--color-primary);
}

.employees-filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  background: var(--bg-card);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  margin-top: 10px;
  animation: fadeIn 0.2s ease;
}

.employees-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.employees-filter-group label {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.employees-filter-group select,
.employees-filter-group input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  font-size: 13.5px;
  height: 40px;
  transition: border-color 0.2s;
}

.employees-filter-actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.employees-filter-clear-btn {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: 0.2s;
  font-weight: 500;
  font-size: 13px;
  box-sizing: border-box;
}

.employees-filter-clear-btn:hover {
  color: var(--color-danger);
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.05);
}

@media (max-width: 580px) {
  .employees-filters-panel {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 12px !important;
  }
}







/* =========================
    PRODUCTS CONTAINER
========================= */

.products-container {
  padding: 20px;
  font-family: "Segoe UI", sans-serif;
  color: var(--text-main);
}

/* =========================
   HEADER
========================= */
 
.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 20px;
  padding: 12px 16px;

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;

  backdrop-filter: blur(8px);
}

.products-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-main);
}

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

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);

  border: none;
  padding: 10px 14px;
  border-radius: 8px;

  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
  transition: 0.2s ease;

  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* =========================
   TABLA PRODUCTS
========================= */

.products-table {
  width: 100%;
  border-collapse: collapse;

  background: var(--bg-card);
  border-radius: 10px;

  overflow: hidden;
  border: 1px solid var(--border-color);
}

.products-table th {
  background: var(--bg-card);
  text-align: left;
  padding: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.products-table td {
  padding: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
}

.products-table tr:hover {
  background: var(--bg-overlay);
}

/* =========================
   IMAGEN PRODUCTO
========================= */

.product-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;

  -o-object-fit: cover;

     object-fit: cover;
  border: 1px solid var(--border-color);
}

/* =========================
   BOTONES ACCIN
========================= */

.btn-edit {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);

  padding: 6px 10px;
  margin-right: 5px;

  border-radius: 6px;
  color: var(--color-warning);

  cursor: pointer;
  font-size: 13px;
  transition: 0.2s ease;
}

.btn-edit:hover {
  background: rgba(245, 158, 11, 0.25);
  transform: translateY(-1px);
}

.btn-delete {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);

  padding: 6px 10px;
  border-radius: 6px;

  color: var(--color-danger);
  cursor: pointer;
  font-size: 13px;

  transition: 0.2s ease;
}

.btn-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}

/* =========================
   MODAL (REUTILIZA USERS STYLE)
========================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  padding: 20px;
  box-sizing: border-box;
}

.modal {
  background: var(--bg-card);
  color: var(--text-main);
  width: 95%;
  max-width: 1000px;
  max-height: 90vh;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), inset 0 1px 0 var(--border-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal h2 {
  padding: 24px 30px;
  font-size: 24px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-main);
  
  
  margin: 0;
  letter-spacing: 0.5px;
}

/* =========================
   FORM GRID
========================= */

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;

  padding: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {

  margin-bottom: 8px;

  font-size: 11px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.6px;

  color: var(--text-muted);
}

.variant-card .form-grid {
  padding: 0;
  margin-top: 18px;
}

.variant-card + .variant-card {
  margin-top: 24px;
}



.simple-card,
.variant-card {

  position: relative;
  overflow: visible;
}

.simple-card::before,
.variant-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;
  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--border-color),
      transparent
    );
}



.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  box-sizing: border-box;
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.form-group textarea {
  min-height: 120px;
  padding: 16px;
  resize: vertical;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  background: var(--bg-overlay);
  border-color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: var(--bg-overlay);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* =========================
   MODAL ACTIONS
========================= */

.modal-actions {
  display: flex;
  justify-content: flex-end;

  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
  gap: 10px;
}

.modal-actions button {
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.modal-actions .btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.modal-actions .btn-secondary {
  background: var(--color-secondary);
  color: var(--text-main);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .products-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* =========================
    FILTERS PANEL (ESTILO USERS STYLE)
========================= */

.filters-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;

  margin-bottom: 15px;
  padding: 12px;

  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border-color);

  backdrop-filter: blur(8px);
}

/* inputs y selects consistentes */
.filters-bar input,
.filters-bar select {
  padding: 9px 12px;
  border-radius: 8px;
  box-sizing: border-box;

  background: var(--bg-main);
  border: 1px solid var(--border-color);

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

/* focus igual que users */
.filters-bar input:focus,
.filters-bar select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

/* hover suave */
.filters-bar input:hover,
.filters-bar select:hover {
  border-color: var(--text-muted);
}

/* =========================
    FILTROS EN GRUPO (opcional PRO)
========================= */

.filters-group {
  display: flex;
  gap: 8px;
  align-items: center;

  padding: 6px 10px;
  background: var(--bg-overlay);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

/* labels opcionales si agregas filtros avanzados */
.filters-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 4px;
}

/* =========================
    BOTN RESET FILTROS (recomendado)
========================= */

.btn-filter-reset {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);

  color: var(--color-danger);
  padding: 8px 12px;
  border-radius: 8px;

  font-size: 12px;
  cursor: pointer;

  transition: 0.2s ease;
}

.btn-filter-reset:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}

/* =========================
    RESPONSIVE
========================= */

@media (max-width: 768px) {
  .filters-bar {
    flex-direction: column;
    gap: 8px;
  }

  .filters-bar input,
  .filters-bar select {
    width: 100%;
  }
}

/* =========================
    BULK ACTIONS BAR
========================= */

.bulk-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-secondary, var(--bg-card));
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid var(--border-color);
  gap: 15px;
  flex-wrap: wrap;
}

.bulk-actions-left {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.bulk-actions-count {
  font-weight: 600;
  color: var(--color-primary);
}

.bulk-actions-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
}

.bulk-actions-right {
  display: flex;
}

.btn-danger-bulk {
  background: var(--color-danger);
  color: var(--text-main);
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: 0.2s ease;
}

.btn-danger-bulk:hover {
  background: var(--color-danger);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .bulk-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .bulk-actions-left {
    justify-content: center;
  }

  .bulk-actions-divider {
    display: none;
  }
  
  .bulk-actions-right {
    justify-content: center;
  }

  .btn-danger-bulk {
    width: 100%;
  }
}

.product-thumb {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumb img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* =========================
   LAYOUT PRINCIPAL
========================= */
.product-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

/* =========================
   IMAGEN
========================= */
.product-image-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================
   UPLOAD BOX 1:1
========================= */
.image-upload-box {
  width: 100%;
  aspect-ratio: 1 / 1;

  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 16px;

  background: var(--bg-overlay);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  overflow: hidden;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3);
}

.image-upload-box:hover {
  border-color: var(--color-primary);
  background: var(--bg-overlay);
  transform: translateY(-2px);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(96, 165, 250, 0.15);
}

.image-upload-box input {
  display: none;
}

.image-upload-box span {
  color: var(--text-muted);
}

.image-upload-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* =========================
   FORM RIGHT
========================= */
.product-form-right {
  background: transparent;
}






/* =========================================================
    VARIANT MODE SELECTOR
========================================================= */

.variant-mode-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variant-mode-selector label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.variant-mode-selector select {
  min-width: 180px;

  padding: 10px 12px;

  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

.variant-mode-selector select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}


/* =========================================================
   SHARED FORM CONTAINERS
========================================================= */

.simple-mode-container,
.variant-card {

  background: var(--bg-overlay);

  border: 1px solid var(--border-color);
  border-radius: 18px;

  padding: 24px;

  backdrop-filter: blur(10px);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.25);

  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;

  animation: fadeIn 0.2s ease;
}

.simple-mode-container:hover,
.variant-card:hover {

  border-color: rgba(255,255,255,0.12);

  box-shadow:
    0 14px 40px rgba(0,0,0,0.32);
}
/* =========================================================
   HEADER
========================================================= */

.simple-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 24px;
}

.simple-mode-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);

  margin-bottom: 4px;
}

.simple-mode-description {
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================
   GRID
========================================================= */

.simple-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;

  margin-bottom: 20px;
}

/* =========================================================
   CARD
========================================================= */

.simple-card {

  background: var(--bg-card);

  border: 1px solid var(--border-color);
  border-radius: 14px;

  padding: 20px;

  transition: 0.2s ease;
}

.simple-card:hover {
  border-color: rgba(255,255,255,0.12);
}

.simple-card h4 {
  margin: 0 0 18px 0;

  font-size: 15px;
  font-weight: 600;

  color: var(--color-primary);
}

.simple-card label {
  display: block;

  margin-bottom: 8px;

  font-size: 12px;
  color: var(--text-muted);
}

/* =========================================================
   SELECTS
========================================================= */

.simple-card select,
.simple-card input,
.simple-card textarea {

  width: 100%;

  padding: 11px 12px;

  background: var(--bg-main);

  border: 1px solid var(--border-color);
  border-radius: 10px;

  color: var(--text-main);
  font-size: 13px;

  outline: none;
  transition: 0.2s ease;
}

.simple-card select:focus,
.simple-card input:focus,
.simple-card textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}

/* =========================================================
   MULTISELECT
========================================================= */

.simple-multiselect {
  min-height: 180px;

  padding: 10px !important;

  overflow-y: auto;
}

.simple-multiselect option {

  padding: 10px;
  margin-bottom: 4px;

  border-radius: 8px;

  background: transparent;
  color: var(--text-main);

  transition: 0.15s ease;
}

.simple-multiselect option:checked {
  background: var(--color-primary);
  color: var(--color-primary-text);
}


/* =========================
   SELECTOR CHIPS
========================= */

.selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.selector-chip {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;

  border-radius: 14px;
  border: 1px solid var(--border-color);

  background: var(--bg-input);
  color: var(--text-main);

  cursor: pointer;
  transition: .18s ease;

  font-size: 13px;
  font-weight: 500;
}

.selector-chip:hover {
  transform: translateY(-1px);

  background: var(--bg-overlay);
  border-color: var(--border-color);
}

.selector-chip.active {
  background:
    var(--bg-overlay);

  border-color:
    var(--bg-overlay);

  color: var(--color-primary-hover);

  box-shadow:
    0 0 0 1px var(--bg-overlay);
}

.selector-dot {
  width: 14px;
  height: 14px;

  border-radius: 999px;

  border: 2px solid
    rgba(255,255,255,.2);

  flex-shrink: 0;
}

/* =========================================================
   GLOBAL ATTRIBUTES GRID
========================================================= */

.simple-attributes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}


/* =========================================================
   GLOBAL CONFIG FIELDS
========================================================= */

.simple-global-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.simple-global-field label {

  font-size: 11px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.6px;

  color: var(--text-muted);
}

.simple-global-field select,
.simple-global-field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.simple-global-field select:hover,
.simple-global-field input:hover {
  border-color: rgba(255,255,255,0.14);
}

.simple-global-field select:focus,
.simple-global-field input:focus {

  border-color: var(--color-primary);

  box-shadow:
    0 0 0 3px rgba(37,99,235,0.16),
    0 10px 24px rgba(37,99,235,0.12);

  transform: translateY(-1px);
}






/* =========================================================
   SUMMARY
========================================================= */

.simple-summary {
  margin-top: 24px;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.18);
  border-radius: 14px;
  padding: 22px;
}

.simple-summary h4 {
  margin: 0 0 20px 0;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 600;
}

.simple-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.simple-summary-item {

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.simple-summary-label {

  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.simple-summary-value {

  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  word-break: break-word;
}

/* =========================================================
   GENERATE BUTTON
========================================================= */

.simple-generate-btn {

  margin-top: 24px;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-hover)
  );

  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.simple-generate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(37,99,235,0.35);
}

/* =========================================================
   GENERATED COUNT
========================================================= */

.generated-count {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================
   ADVANCED VARIANT CARD
========================================================= */


.simple-card h4,
.variant-card h4 {

  margin: 0 0 18px 0;

  font-size: 15px;
  font-weight: 600;

  color: var(--color-primary);

  letter-spacing: 0.2px;
}

/* =========================================================
   TEXTAREA
========================================================= */

.form-group textarea {
  width: 100%;
  padding: 12px;
  resize: vertical;
  border-radius: 10px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-family: inherit;
}

.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* =========================================================
   FORM ACTIONS
========================================================= */

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 25px;
  margin-top: 30px;
  border-top: 1px solid var(--border-color);
}

.btn-secondary {

  background: var(--color-secondary);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s ease;
}

.btn-secondary:hover {
  background: var(--color-secondary);
}

/* =========================================================
   SCROLLBAR
========================================================= */

.simple-multiselect::-webkit-scrollbar,
.modal::-webkit-scrollbar {
  width: 8px;
}

.simple-multiselect::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track {
  background: transparent;
}

.simple-multiselect::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {

  background: var(--bg-overlay);
  border-radius: 20px;
}

.simple-multiselect::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .simple-summary-grid,
  .simple-attributes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .simple-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .product-layout {
    grid-template-columns: 1fr;
  }

  .simple-summary-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .simple-mode-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary,
  .simple-generate-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   VARIANT TABS
========================= */

.variant-tabs {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  backdrop-filter: blur(8px);
}

.variant-tab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.variant-tab:hover {
  background: var(--bg-overlay);
  color: var(--text-main);
}

.variant-tab.active {
  background: var(--color-primary);
  color: var(--color-primary-text);
  box-shadow:
    0 0 0 1px var(--border-color),
    0 8px 20px rgba(37,99,235,0.35);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
  .variant-tabs {
    width: 100%;
  }
  .variant-tab {
    flex: 1;
    text-align: center;
  }

}

/* =========================================================
   VARIANTS HEADER
========================================================= */

.variants-header {

  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  gap: 24px;

  margin-bottom: 28px;
  padding-bottom: 20px;

  border-bottom: 1px solid var(--border-color);
}

.variants-header-left {

  display: flex;
  flex-direction: column;
  gap: 18px;
}

.variants-header-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variants-section-label {

  font-size: 22px;
  font-weight: 700;

  color: var(--text-main);

  letter-spacing: -0.3px;
}

.variants-section-description {

  font-size: 13px;
  color: var(--text-muted);

  max-width: 600px;
}


/* =========================================================
   VARIANTS HEADER
========================================================= */

.variants-header {

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;
  flex-wrap: wrap;

  margin-bottom: 24px;
}

.variants-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.variants-title {

  font-size: 22px;
  font-weight: 700;

  color: var(--text-main);
}

.variants-description {

  font-size: 13px;
  color: var(--text-muted);
}

.variants-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* =========================================================
   VARIANT CARD HEADER
========================================================= */

.variant-card-header {

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 24px;
}

.variant-card-title {

  font-size: 18px;
  font-weight: 600;

  color: var(--text-main);

  margin-bottom: 4px;
}

.variant-card-subtitle {

  font-size: 13px;
  color: var(--text-muted);
}

.variant-badge {

  min-width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,0.25),
      rgba(37,99,235,0.1)
    );

  border: 1px solid rgba(37,99,235,0.25);

  color: var(--color-primary);

  font-size: 13px;
  font-weight: 700;
}

/* =========================================================
   SECTION TITLE
========================================================= */

.variant-section-title {

  margin-top: 28px;
  margin-bottom: 18px;

  font-size: 14px;
  font-weight: 600;

  color: var(--color-primary);

  padding-bottom: 10px;

  border-bottom:
    1px solid var(--border-color);
}







/* =========================================================
    MOBILE FIXES PRODUCT FORM
========================================================= */

@media (max-width: 768px) {

  /* =========================
     MODAL
  ========================= */

  .modal {
    right: 0; bottom: 0;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* =========================
     TITLES
  ========================= */

  .modal h2 {
    font-size: 20px;
    padding: 18px;
  
  color: var(--text-main);}

  .variants-title {
    font-size: 18px;
  }

  .variants-description {
    font-size: 12px;
    line-height: 1.5;
  }

  /* =========================
     VARIANTS HEADER
  ========================= */

  .variants-header {

    flex-direction: column;
    align-items: stretch;

    gap: 18px;

    padding-bottom: 18px;
  }

  .variants-header-info {
    width: 100%;
  }

  /* CONTENEDOR DERECHO */
  .variants-header-actions {

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 12px;
  }

  /* =========================
     BOTN AGREGAR VARIANTE
  ========================= */

  .variants-header-actions .btn-primary {

    width: 100%;
    height: 46px;

    justify-content: center;

    flex-shrink: 0;
  }

  /* =========================
     TABS
  ========================= */

  .variant-tabs {

    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;

    padding: 4px;
    gap: 4px;

    flex-shrink: 0;
  }

  .variant-tab {

    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    font-size: 13px;
    text-align: center;

    white-space: nowrap;
  }

  /* =========================
     FIX MOVIMIENTO FEO
  ========================= */

  .variants-header-actions:has(.variant-tabs) {
    min-height: 104px;
  }

  /* =========================
     FORM ACTIONS
  ========================= */

  .form-actions {

    flex-direction: column-reverse;
    gap: 10px;
  }

  .form-actions button {
    width: 100%;
    height: 46px;
  }

  /* =========================
     VARIANT CARDS
  ========================= */

  .variant-card,
  .simple-mode-container,
  .simple-card {
    padding: 18px;
  }

  /* =========================
     INPUTS
  ========================= */

  .form-group input,
  .form-group select,
  .form-group textarea,
  .simple-global-field input,
  .simple-global-field select {

    height: 48px;
    font-size: 14px;
  }

  .form-group textarea {
    min-height: 100px;
  }

  /* =========================
     SUMMARY
  ========================= */

  .simple-summary {
    padding: 18px;
  }

  .simple-summary-item {
    padding: 14px;
  }

  /* =========================
     IMAGE
  ========================= */

  .product-image-box {
    width: 100%;
  }

  .image-upload-box {
    max-width: 100%;
  }
}





/* =========================================================
    MOBILE COMPACT UI
========================================================= */

@media (max-width: 768px) {

  /* =========================
     MODAL
  ========================= */

  .modal {
    right: 0; bottom: 0;
    border-radius: 0;
  }

  .modal h2 {
    padding: 14px 16px;
    font-size: 17px;
  
  color: var(--text-main);}

  /* =========================
     GENERAL PADDINGS
  ========================= */

  .form-grid {
    padding: 14px;
    gap: 12px;
  }

  .variant-card,
  .simple-mode-container,
  .simple-card,
  .simple-summary {
    padding: 14px;
  }

  /* =========================
     LABELS
  ========================= */

  .form-group label,
  .simple-global-field label,
  .simple-card label,
  .simple-summary-label {

    font-size: 10px;
    margin-bottom: 6px;
  }

  /* =========================
     INPUTS
  ========================= */

  .form-group input,
  .form-group select,
  .form-group textarea,
  .simple-global-field input,
  .simple-global-field select,
  .simple-card input,
  .simple-card select {

    height: 40px;

    padding: 0 12px;

    font-size: 12px;
    border-radius: 10px;
  }

  .form-group textarea {
    min-height: 90px;
    padding: 12px;
  }

  /* =========================
     BUTTONS
  ========================= */

  .btn-primary,
  .btn-secondary,
  .btn-delete,
  .simple-generate-btn {

    height: 40px;

    padding: 0 12px;

    font-size: 12px;
    border-radius: 10px;
  }

  /* =========================
     VARIANT TABS
  ========================= */

  .variant-tabs {
    padding: 3px;
    gap: 3px;
    border-radius: 10px;
  }

  .variant-tab {

    min-height: 38px;

    padding: 0 10px;

    font-size: 11px;
    border-radius: 8px;
  }

  /* =========================
     TITLES
  ========================= */

  .variants-title,
  .simple-mode-title,
  .variant-card-title {

    font-size: 16px;
  }

  .variants-description,
  .simple-mode-description,
  .variant-card-subtitle {

    font-size: 11px;
  }

  .variant-section-title {
    font-size: 13px;
    margin-top: 20px;
    margin-bottom: 14px;
  }

  /* =========================
     SUMMARY
  ========================= */

  .simple-summary-value {
    font-size: 12px;
  }

  /* =========================
     BADGE
  ========================= */

  .variant-badge {

    min-width: 34px;
    height: 34px;

    font-size: 11px;
    border-radius: 10px;
  }

  /* =========================
     IMAGE
  ========================= */

  .image-upload-box {
    border-radius: 10px;
  }

  /* =========================
     ACTIONS
  ========================= */

  .form-actions {
    margin-top: 20px;
    padding-top: 18px;
    gap: 8px;
  }

  /* =========================
     MULTISELECT
  ========================= */

 
}








/* =========================================================
    VARIANTS TABLE REDESIGN (COMPACT PRO)
========================================================= */

.variants-preview-container {
  margin-bottom: 24px;

  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 18px;

  overflow: hidden;
  backdrop-filter: blur(12px);
}

/* =========================================================
   HEADER
========================================================= */

.variants-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 18px;

  border-bottom: 1px solid var(--border-color);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.02),
      transparent
    );
}

.variants-preview-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.variants-preview-description {
  font-size: 12px;
  color: var(--text-muted);
}

.variants-preview-count {
  min-width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: var(--bg-overlay);
  border: 1px solid var(--bg-overlay);

  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

/* =========================================================
   TABLE WRAPPER
========================================================= */

.variants-preview-table-wrapper {
  overflow: auto;
  max-height: 420px;
}

/* scrollbar dark */
.variants-preview-table-wrapper::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.variants-preview-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 999px;
}

/* =========================================================
   TABLE
========================================================= */

.variants-preview-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

/* sticky header */
.variants-preview-table thead {
  position: sticky;
  top: 0;
  z-index: 10;

  background: var(--bg-card);
  backdrop-filter: blur(20px);
}

/* =========================================================
   HEADERS
========================================================= */

.variants-preview-table th {
  text-align: left;

  padding: 12px 14px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--text-muted);

  border-bottom:
    1px solid var(--border-color);

  white-space: nowrap;
}

/* =========================================================
   CELLS
========================================================= */

.variants-preview-table td {
  padding: 10px 14px;

  font-size: 12px;
  color: var(--text-main);

  border-bottom:
    1px solid rgba(255,255,255,0.04);

  vertical-align: middle;
}

/* zebra */
.variants-preview-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.015);
}

.variants-preview-table tbody tr {
  transition: .18s ease;
}

.variants-preview-table tbody tr:hover {
  background: rgba(96,165,250,0.06);
}

/* =========================================================
   FIRST COLUMN (#)
========================================================= */

.variants-preview-table td:first-child {
  width: 50px;
  color: var(--text-muted);
  font-weight: 700;
}

/* =========================================================
   SKU STYLE
========================================================= */

.variants-preview-table td:nth-child(2) {
  font-family: monospace;
  font-size: 12px;
  color: var(--color-primary-hover);
  font-weight: 600;
}

/* =========================================================
   PRICE
========================================================= */

.variants-preview-table td:nth-child(6) {
  font-weight: 700;
  color: var(--color-success);
}

/* =========================================================
   ATTRIBUTES CELL
========================================================= */

.variant-attributes-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  max-width: 260px;
}

/* =========================================================
   ATTRIBUTE CHIP
========================================================= */

.variant-attribute-tag {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  padding: 4px 8px;

  border-radius: 999px;

  background: var(--bg-overlay);

  border: 1px solid var(--border-color);

  transition: .15s ease;
}

.variant-attribute-tag:hover {
  background: var(--bg-overlay);
}

.variant-attribute-name {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;

  color: var(--text-muted);
}

.variant-attribute-value {
  font-size: 11px;
  color: var(--text-main);
  font-weight: 600;
}

/* =========================================================
   STATUS
========================================================= */

.variant-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 90px;

  padding: 5px 10px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
}

.variant-status.active {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.22);
  color: var(--color-success);
}

.variant-status.inactive {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.22);
  color: var(--color-danger);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .variants-preview-table-wrapper {
    max-height: 360px;
  }

  .variants-preview-table {
    min-width: 720px;
  }

  .variants-preview-table th,
  .variants-preview-table td {
    padding: 10px;
    font-size: 11px;
  }

  .variant-attributes-cell {
    max-width: 180px;
  }
}



















/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .variants-preview-header {

    padding: 16px;

    align-items: flex-start;
    gap: 12px;
  }

  .variants-preview-title {
    font-size: 16px;
  }

  .variants-preview-description {
    font-size: 11px;
  }
  .variants-preview-table th,
  .variants-preview-table td {
    padding: 12px 14px;
    font-size: 12px;
  }
}

/* =========================================================
    DARK SELECT OPTIONS FIX
========================================================= */

/* Select base */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}

/* Opciones del dropdown */
select option {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  padding: 10px;
}

/* Opcin seleccionada */
select option:checked {
  background: var(--color-primary) !important;
  color: var(--text-main) !important;
}

/* Hover/focus en algunos navegadores */
select option:hover,
select option:focus {
  background: var(--color-secondary) !important;
  color: var(--text-main) !important;
}

/* Fix especfico para tus clases */
.form-group select,
.simple-card select,
.simple-global-field select,
.filters-bar select,
.variant-mode-selector select {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color);
}

/* Flecha del select ms limpia */
.form-group select,
.simple-card select,
.simple-global-field select,
.filters-bar select,
.variant-mode-selector select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px;
  background-repeat: no-repeat;

  padding-right: 40px;
}




/* ==========================================
   SELECTOR HEADER
========================================== */

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.selected-counter {
  padding: 6px 12px;
  border-radius: 999px;

  background: var(--bg-overlay);
  border: 1px solid var(--bg-overlay);

  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
}

/* ==========================================
   COLORES
========================================== */

.color-selector-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(110px, 1fr));

  gap: 14px;
}

.color-circle {
  border: 1px solid var(--border-color);
  background: var(--bg-input);

  border-radius: 18px;
  padding: 14px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  cursor: pointer;
  transition: .18s ease;
}

.color-circle:hover {
  transform: translateY(-2px);
  background: var(--bg-overlay);
}

.color-circle.active {
  border: 2px solid var(--color-primary);
  background:
    var(--bg-overlay);
}

.color-circle-preview {
  width: 52px;
  height: 52px;

  border-radius: 999px;

  border:
    3px solid rgba(255,255,255,.18);

  box-shadow:
    inset 0 0 0 1px var(--border-color),
    0 8px 20px rgba(0,0,0,.25);
}

.color-circle span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

/* ==========================================
   TALLAS
========================================== */

.size-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.size-chip {
  min-width: 70px;
  height: 46px;

  border-radius: 14px;

  border: 1px solid
    var(--border-color);

  background:
    var(--bg-input);

  color: var(--text-main);
  font-weight: 700;
  font-size: 14px;

  cursor: pointer;
  transition: .18s ease;
}

.size-chip:hover {
  transform: translateY(-2px);
}

.size-chip.active {
  background:
    var(--bg-overlay);

  border: 2px solid var(--color-primary);

  color: var(--color-primary-hover);
}
/* =========================================================
   MOBILE - COLOR SELECTOR COMPACT
========================================================= */

@media (max-width: 768px) {

  /* grid ms compacto */
  .color-selector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* tarjeta pequea */
  .color-circle {
    width: auto;
    min-width: unset;

    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    padding: 8px 10px;
    border-radius: 999px;

    min-height: unset;
  }

  /* sin hover raro en mobile */
  .color-circle:hover {
    transform: none;
  }

  /* crculo pequeo */
  .color-circle-preview {
    width: 18px;
    height: 18px;
    border-width: 2px;
    flex-shrink: 0;

    box-shadow: none;
  }

  /* texto ms pequeo */
  .color-circle span {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* activo ms limpio */
  .color-circle.active {
    border: 1px solid var(--color-primary);
    background: var(--bg-overlay);
  }

  /* contador ms chico */
  .selected-counter {
    padding: 4px 10px;
    font-size: 11px;
  }

  /* tallas tambin compactas */
  .size-selector {
    gap: 8px;
  }

  .size-chip {
    min-width: 52px;
    height: 38px;

    border-radius: 12px;
    font-size: 13px;
    padding: 0 12px;
  }
}











/* ==========================================
   VER MS BUTTON
========================================== */

.see-more-btn {
  width: 100%;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: var(--bg-overlay);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  transition: .2s ease;
}

.see-more-btn:hover {
  background: var(--bg-overlay);
}

/* ==========================================
   MODAL SELECTOR
========================================== */

.selector-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.75);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.selector-modal {
  width: min(850px, 95vw);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  padding: 28px;
}

.selector-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.selector-modal-header button {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: var(--bg-overlay);
  color: var(--text-main);
  cursor: pointer;
}

.modal-grid {
  grid-template-columns:
    repeat(auto-fill, minmax(110px, 1fr));
}

.modal-size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.modal-ready-btn {
  margin-top: 24px;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 16px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

/* MOBILE */

@media (max-width: 768px) {
  .selector-modal {
    border-radius: 22px;
    padding: 18px;
  }

  .modal-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .modal-ready-btn {
    position: sticky;
    bottom: 0;
  }
}


.advanced-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.advanced-color-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  cursor: pointer;
  transition: .2s;
  min-width: 180px;
}

.advanced-color-item:hover {
  transform: translateY(-2px);
}

.advanced-color-item.active {
  border: 2px solid var(--color-primary);
  background: rgba(79,140,255,.15);
}

.advanced-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.25);
  flex-shrink: 0;
}

.advanced-color-item small {
  opacity: .65;
  font-size: 11px;
}

.advanced-selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


.add-mini-btn{
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border-color);
  border-radius: 12px;

  background:
    linear-gradient(
      180deg,
      var(--bg-overlay),
      var(--bg-overlay)
    );

  color: var(--color-primary-hover);

  cursor: pointer;
  transition: .22s ease;

  flex-shrink: 0;
}

.add-mini-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(96,165,250,.35);

  background:
    linear-gradient(
      180deg,
      var(--bg-overlay),
      var(--bg-overlay)
    );

  box-shadow:
    0 8px 18px var(--bg-overlay);
}

.add-mini-btn:active{
  transform: scale(.96);
}

.create-color-modal{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.create-color-modal input[type="color"]{
  width: 100%;
  height: 70px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
}

/* ==========================================
   PREMIUM CREATE MODALS
========================================== */

.create-modal{
  width: min(560px, 95vw);
  background:
    linear-gradient(
      180deg,
      var(--bg-card),
      var(--bg-main)
    );
  border:
    1px solid var(--border-color);
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,.45);
  animation:
    modalPop .22s ease;
}

@keyframes modalPop{
  from{
    opacity: 0;
    transform:
      translateY(20px)
      scale(.96);
  }
  to{
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

/* HEADER */

.create-modal-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding: 26px 28px;

  border-bottom:
    1px solid var(--bg-overlay);
}

.create-modal-header h2{
  margin: 0;
  color: var(--text-main);
  font-size: 24px;
  font-weight: 800;
}

.create-modal-header p{
  margin-top: 8px;

  color:
    var(--text-muted);

  font-size: 13px;
}

.close-modal-btn{
  width: 42px;
  height: 42px;

  border: none;
  border-radius: 14px;

  background:
    var(--bg-overlay);

  color: var(--text-main);
  cursor: pointer;

  transition: .2s;
}

.close-modal-btn:hover{
  background:
    var(--border-color);

  transform: rotate(90deg);
}

/* BODY */
.create-modal-body{
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* FORM */

.form-field-modern{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field-modern label{
  font-size: 12px;
  font-weight: 700;

  color:
    var(--text-muted);
}

.form-field-modern input,
.form-field-modern textarea{
  height: 54px;
  padding: 0 18px;
  border-radius: 18px;
  border:
    1px solid var(--border-color);
  background:
    var(--bg-input);
  color: var(--text-main);
  font-size: 14px;
  transition: .2s;
}

.form-field-modern textarea{
  height: auto;
  padding: 16px;
  resize: none;
}

.form-field-modern input:focus,
.form-field-modern textarea:focus{
  outline: none;

  border-color:
    var(--bg-overlay);
  box-shadow:
    0 0 0 4px
    var(--bg-overlay);
}

/* COLOR PREVIEW */
.color-preview-card{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 24px;
  background:
    var(--bg-input);
  border:
    1px solid var(--bg-overlay);
}

.color-preview-circle{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border:
    4px solid rgba(255,255,255,.15);
  box-shadow:
    0 12px 30px rgba(0,0,0,.25);
}

.color-preview-info{
  display: flex;
  flex-direction: column;
}

.color-preview-name{
  color: var(--text-main);
  font-size: 20px;
  font-weight: 700;
}

.color-preview-hex{
  color:
    var(--text-muted);

  font-size: 13px;
}

/* COLOR PICKER */

.premium-color-picker{
  width: 100%;
  height: 80px !important;
  border-radius: 20px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
}

/* SIZE */

.size-preview-card{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-radius: 24px;
  background:
    var(--bg-input);
  border:
    1px solid var(--bg-overlay);
}

.size-preview-chip{
  min-width: 90px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background:
    var(--bg-overlay);
  border:
    1px solid var(--bg-overlay);
  color: var(--color-primary-hover);
  font-weight: 800;
  font-size: 22px;
}

.size-preview-title{
  color: var(--text-main);
  font-weight: 700;
}

.size-preview-description{
  color:
    rgba(255,255,255,.45);

  font-size: 13px;
}

/* FOOTER */

.create-modal-footer{
  display: flex;
  gap: 12px;

  padding: 24px 28px;

  border-top:
    1px solid var(--bg-overlay);
}

.cancel-btn{
  flex: 1;
  height: 56px;

  border-radius: 18px;
  border: none;

  background:
    var(--bg-overlay);

  color: var(--text-main);
  font-weight: 700;
  cursor: pointer;
}

.save-btn{
  flex: 1;
  height: 56px;

  border-radius: 18px;
  border: none;

  background:
    linear-gradient(
      135deg,
      var(--color-primary),
      var(--color-primary)
    );

  color: var(--color-primary-text);
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 12px 24px
    var(--bg-overlay);

  transition: .2s;
}

.save-btn:hover{
  transform: translateY(-2px);
}

/* MOBILE */

@media(max-width:768px){

  .create-modal{
    border-radius: 26px;
  }

  .create-modal-header{
    padding: 20px;
  }

  .create-modal-body{
    padding: 20px;
  }

  .create-modal-footer{
    padding: 20px;
    flex-direction: column;
  }

  .color-preview-circle{
    width: 58px;
    height: 58px;
  }

  .color-preview-name{
    font-size: 17px;
  }
}

.modal-title-group{
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title-group h3{
  margin: 0;
}




/* ==========================================
   COLOR + TALLA LADO A LADO
========================================== */

.variant-main-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* color ocupa su espacio */
.variant-color-group{
  min-width: 0;
}

/* talla ms compacta */
.variant-size-group{
  display: flex;
  flex-direction: column;
}

/* grid de colores ms ordenado */
.variant-color-group .advanced-color-grid{
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(180px, 1fr));

  gap: 10px;
}

/* tallas ms compactas */
.variant-size-group .advanced-selector-grid{
  gap: 8px;
}

/* mobile: uno debajo del otro */
@media(max-width:768px){

  .variant-main-grid{
    grid-template-columns: 1fr;
  }
}





/* ==========================
   ADD VARIANT CARD
========================== */

.add-variant-card {
  width: 100%;
  border: 2px dashed rgba(255,255,255,0.15);
  background: var(--bg-overlay);

  border-radius: 18px;
  padding: 18px 24px;

  margin-top: 18px;

  display: flex;
  align-items: center;
  gap: 18px;

  cursor: pointer;
  transition: all 0.25s ease;

  color: var(--text-main);
}

.add-variant-card:hover {
  border-color: var(--color-primary);
  background: rgba(91, 140, 255, 0.08);

  transform: translateY(-2px);
}

.add-variant-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;

  border-radius: 14px;

  background: rgba(91, 140, 255, 0.15);
  border: 1px solid rgba(91, 140, 255, 0.25);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
  font-weight: 600;

  color: var(--color-primary-hover);
}

.add-variant-content {
  text-align: left;
}

.add-variant-title {
  font-size: 15px;
  font-weight: 600;
}

.add-variant-subtitle {
  font-size: 13px;
  opacity: 0.65;
  margin-top: 2px;
}
/* =========================
   TABLE WRAPPER (MOBILE SCROLL)
========================= */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
}
.table-wrapper::-webkit-scrollbar {
  height: 6px;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--bg-overlay);
  border-radius: 999px;
}

/* =========================================================
   IMAGE GALLERY MODAL
========================================================= */

.modal-overlay.gallery-overlay {
  z-index: 10001;
}

.modal.gallery-modal {
  max-width: 800px;
  width: 90%;
}

.image-dropzone {
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: min(40px, 5vw);
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
  background: var(--bg-overlay);
  transition: all 0.2s ease;
}

.image-dropzone:hover {
  background: var(--bg-overlay);
}

.image-dropzone-icon {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

.image-dropzone-text {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-main);
}

.image-dropzone-subtext {
  margin: 5px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  max-height: 300px;
  overflow-y: auto;
}

.gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.gallery-item.main-item {
  border: 2px solid var(--color-primary);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.gallery-item-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.gallery-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: space-between;
  padding: 5px;
}

.gallery-item-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
}

.gallery-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}

/* =========================================================
   WARNING MODAL
========================================================= */

.warning-modal {
  background: var(--bg-card);
  border-radius: 16px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-color);
  overflow: hidden;
  animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.warning-modal-header {
  padding: 24px 24px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.warning-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-danger);
  flex-shrink: 0;
}

.warning-icon-wrapper.warning-yellow {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.warning-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-main);
  font-weight: 600;
}

.warning-modal-body {
  padding: 0 24px 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.warning-modal-footer {
  padding: 16px 24px;
  background: var(--bg-overlay);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--border-color);
}

.warning-btn-cancel {
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.warning-btn-cancel:hover {
  background: var(--bg-overlay);
}

.warning-btn-confirm {
  background: var(--color-danger);
  border: none;
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.warning-btn-confirm:hover {
  background: var(--color-danger-hover);
}

.warning-btn-confirm.btn-yellow {
  background: var(--color-warning);
}

.warning-btn-confirm.btn-yellow:hover {
  background: var(--color-warning-hover);
}












/* =========================
   PRODUCT VIEW MODAL RESPONSIVE
========================= */
.pvm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-color);
}

.pvm-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pvm-tabs {
  display: flex;
  gap: 24px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  overflow-x: auto;
  white-space: nowrap;
}

.pvm-content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.pvm-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pvm-table-container {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow-x: auto;
}

@media (max-width: 768px) {
  .pvm-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
  }
  
  .pvm-header .close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .pvm-header-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .pvm-tabs {
    padding: 0 16px;
    gap: 16px;
  }

  .pvm-content-grid {
    grid-template-columns: 1fr;
  }

  .pvm-details-grid {
    grid-template-columns: 1fr;
  }

  .modal-content {
    padding: 16px !important;
  }

  .modal-actions {
    padding: 16px !important;
  }
}
.pvm-container {
  max-width: 1000px;
  width: 95%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.pvm-image-container {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg-overlay);
  overflow: hidden;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.pvm-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.pvm-title {
  margin: 0 0 4px 0;
  font-size: 24px;
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.2;
}

.pvm-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.pvm-sku {
  font-size: 14px;
  color: var(--text-muted);
}

.pvm-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-color);
}

.pvm-stock {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

/* =========================================
   CUSTOM DROPDOWN (ADD ATTRIBUTE)
   ========================================= */
.custom-dropdown-container {
  position: relative;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 10px;
}

.custom-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.custom-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.dropdown-arrow {
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 100;
  animation: dropdownFadeIn 0.2s ease forwards;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.custom-dropdown-group {
  margin-bottom: 8px;
}

.custom-dropdown-group:last-child {
  margin-bottom: 0;
}

.custom-dropdown-label {
  padding: 4px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.custom-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-main);
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, padding-left 0.15s ease;
}

.custom-dropdown-item:hover {
  background: var(--bg-overlay);
  padding-left: 20px;
}
 
.custom-table-checkbox {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--bg-main);
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color); /* Usamos el borde del tema por defecto */
  border-radius: 4px;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Efecto hover para notar interactividad */
.custom-table-checkbox:hover {
  border-color: var(--color-primary);
}

.custom-table-checkbox::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  /* El fondo del gancho toma el color de texto contrastante */
  background-color: var(--color-primary-text);
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.custom-table-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.custom-table-checkbox:checked::before {
  transform: scale(1);
}
/* =========================
   MODAL RESPONSIVE FIXES
========================= */
.pvm-tabs {
  white-space: nowrap;
}

.pvm-tabs::-webkit-scrollbar {
  height: 6px;
}
.pvm-tabs::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.pvm-tabs button {
  flex-shrink: 0;
  white-space: nowrap;
}

.pvm-modal-body {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  background: var(--bg-main);
}

.pvm-modal-footer {
  background: var(--bg-card);
  padding: 24px 32px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 768px) {
  .pvm-modal-body {
    padding: 16px;
  }
  .pvm-modal-footer {
    padding: 16px;
    flex-direction: column;
  }
  .pvm-modal-footer button {
    width: 100%;
    justify-content: center;
  }
}


/* Animations */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }



/* RESPONSIVE CUSTOMER DETAILS MODAL */
.customer-modal-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.customer-modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.customer-modal-sale-details { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
.customer-modal-tabs { display: flex; padding: 0 40px; border-bottom: 1px solid var(--border-color); background: var(--bg-card);  overflow-x: auto; white-space: nowrap; }
.customer-modal-tabs::-webkit-scrollbar { display: none; }
.customer-modal-header-content { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }

@media (max-width: 768px) {
  .customer-modal-grid-3 { 
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    gap: 12px; 
    padding-bottom: 8px; 
    -webkit-overflow-scrolling: touch; 
  }
  .customer-modal-grid-3 > div { 
    flex: 0 0 auto; 
    min-width: 200px; 
  }
  .customer-modal-grid-3::-webkit-scrollbar { display: none; }
  .customer-modal-grid-2 { grid-template-columns: 1fr; }
  .customer-modal-sale-details { grid-template-columns: 1fr; gap: 20px; }
  .customer-modal-tabs { padding: 0 16px; }
  .customer-modal-header-content { flex-direction: column; align-items: flex-start; gap: 10px; }
  .customer-modal-container { padding: 16px !important; }
}



/* RESPONSIVE TABLE & GENERAL PAGE */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; border-radius: 10px; border: 1px solid var(--border-color); }
.products-table { width: 100%; min-width: 800px; border: none; }
.modal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.filters-container-inner { display: flex; gap: 10px; align-items: center; }

@media (max-width: 768px) {
  .products-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .products-header > div { width: 100%; justify-content: flex-start; }
  .products-header button, .products-header a { flex: 1; justify-content: center; }
  .modal-form-grid { grid-template-columns: 1fr; }
  .filters-container-inner { flex-direction: column; align-items: stretch; }
  .filters-container-inner > div { width: 100%; }
  .filters-container-inner > button { width: 100%; justify-content: center; }
}


.products-container { width: 100%; max-width: 100%; overflow-x: hidden; }
.table-container { max-width: 100%; }


/* Removed card table layout to enable horizontal scroll */
@media (max-width: 768px) { 
  .customer-modal-tabs { flex-shrink: 0 !important; } 
  .customer-modal-container { padding: 20px !important; }
  .customer-modal-header-content h2 { font-size: 1.5rem !important; }
  .customer-modal-grid-3 > div { padding: 14px !important; gap: 12px !important; }
  .customer-modal-grid-3 h3 { font-size: 20px !important; }
  .customer-modal-grid-3 svg { width: 20px; height: 20px; } 
}


/* =========================
   TABS CONTAINER
========================= */

.finance-tabs {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  overflow-x: auto;
  width: 100%;
}

.finance-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.finance-tab:hover {
  color: var(--text-main);
  background: var(--bg-overlay);
}

.finance-tab.active {
  color: var(--text-main);
  background: var(--bg-overlay);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


.finance-page {
  padding: 30px;
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: calc(100vh - 70px);
}

.finance-header {
  margin-bottom: 30px;
}

.finance-header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-main);
}

.finance-header p {
  color: var(--text-muted);
  font-size: 1rem;
}


/* =========================
   RESPONSIVE (MOBILE)
========================= */
@media (max-width: 768px) {
  .finance-tabs {
    flex-wrap: wrap;
    gap: 10px;
  }
  .finance-tab {
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
    padding: 12px 10px;
    font-size: 13px;
  }
  .dashboard-kpi-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .charts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .kpi-row {
    grid-template-columns: 1fr;
  }
  .modal-form-grid {
    grid-template-columns: 1fr;
  }
  .modal-form-split {
    grid-template-columns: 1fr;
  }
  .search-wrapper {
    width: 100%;
  }
  .tab-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
  }
  .products-table {
    border: none;
  }
  .products-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
}


/* =========================
   NEW RESPONSIVE FIXES
========================= */
.treasury-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.owners-grid {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 400px;
}
.owners-grid.active {
  grid-template-columns: 300px 1fr;
}
.responsive-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.responsive-filters {
  display: flex;
  gap: 10px;
  align-items: center;
}
.dashboard-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.tab-header-flex {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
}

@media (max-width: 768px) {
  .finance-page {
    padding: 10px !important;
  }
  .treasury-grid { grid-template-columns: 1fr 1fr !important; }
  .treasury-grid > div:last-child { grid-column: 1 / -1; }
  .owners-grid.active { grid-template-columns: 1fr !important; }
  .responsive-header, .tab-header-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 15px !important;
  }
  .responsive-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .responsive-filters > div, .responsive-filters select, .responsive-filters button {
    width: 100% !important;
  }
  
}


.owner-details-header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.branches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

@media (max-width: 768px) {
  .owner-details-header {
    grid-template-columns: 1fr;
  }
  .branches-grid { grid-template-columns: 1fr 1fr; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .products-table {
    font-size: 12px;
  }
  .products-table th, .products-table td {
    padding: 8px;
  }
}


/* Fix grid blowout */
.owners-grid > div,
.treasury-grid > div,
.dashboard-summary-cards > div,
.metrics-grid > div,
.branches-grid > div {
  min-width: 0;
}
.owner-detail-pane {
  padding: 30px 40px;
  background: transparent;
}
@media (max-width: 768px) {
  .owner-detail-pane {
    padding: 10px;
  }
}


.table-container,
.ledger-table-container,
.finance-page .content,
.finance-page {
  min-width: 0;
}

/* =========================================================
   OWNER PROFILE & MODAL RESPONSIVENESS
========================================================= */

/* Owner Profile Header */
.owner-profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.owner-action-buttons {
  display: flex;
  gap: 12px;
}

.btn-back-responsive {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Branch Breakdown Grid */
.branch-breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } @media (max-width: 768px) { .branch-breakdown-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* Owner Tabs Container */
.owner-tabs-container {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 24px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.owner-tabs-container::-webkit-scrollbar {
  display: none;
}

/* Modal Form Row */
.modal-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.modal-footer-actions {
  padding: 20px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

/* Responsive Media Queries */
@media (max-width: 768px) {
  .owner-profile-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .owner-action-buttons {
    flex-direction: column;
  }
  
  .owner-action-buttons button {
    width: 100%;
  }
  
  .modal-form-row {
    grid-template-columns: 1fr;
  }
  
  .modal-footer-actions {
    flex-direction: column-reverse;
  }
  
  .modal-footer-actions button {
    width: 100%;
    justify-content: center;
  }
  

}


/* TABLE FOR FINANCE (NO CARD VIEW ON MOBILE) */
.finance-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border-color);
}
.finance-table th {
  background: var(--bg-main);
  text-align: left;
  padding: 15px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.finance-table td {
  padding: 14px 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  white-space: nowrap;
}
.finance-table tr:hover td {
  background: var(--bg-overlay);
}



/* Owner Profile KPIs responsive grid */
.owner-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* KPI Cards for Finance */
.finance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.finance-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.finance-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.finance-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3.5px;
    background: var(--color-primary);
}

.finance-kpi-card.kpi-revenue::before { background: #10b981; }
.finance-kpi-card.kpi-expenses::before { background: #ef4444; }
.finance-kpi-card.kpi-profit::before { background: #6366f1; }
.finance-kpi-card.kpi-treasury::before { background: #8b5cf6; }

.finance-kpi-top {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.finance-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    word-break: break-word;
    white-space: normal;
}

.finance-kpi-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.finance-kpi-icon-mini {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.finance-kpi-card.kpi-revenue .finance-kpi-icon-mini {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.finance-kpi-card.kpi-expenses .finance-kpi-icon-mini {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.finance-kpi-card.kpi-profit .finance-kpi-icon-mini {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.finance-kpi-card.kpi-treasury .finance-kpi-icon-mini {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.finance-kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .owner-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .finance-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px;
  }

  .finance-kpi-card {
    padding: 12px 10px 10px 12px;
    gap: 6px;
    border-radius: 10px;
  }

  .finance-kpi-value {
    font-size: 16px;
  }

  .finance-kpi-bottom {
    gap: 6px;
  }

  .finance-kpi-icon-mini {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }

  .finance-kpi-icon-mini svg {
    width: 12px;
    height: 12px;
  }

  .finance-kpi-label {
    font-size: 11px;
  }
}







.thermal-receipt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 10000;
  padding: 40px 20px;
  overflow-y: auto;
}

.thermal-receipt-container {
  background: #fff;
  width: 100%;
  max-width: 320px; /* Standard 80mm thermal paper width approx */
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  position: relative;
  font-family: 'Courier New', Courier, monospace;
  color: #000;
  padding-bottom: 20px;
}

.thermal-receipt-actions {
  background: #f8f9fa;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #ccc;
  border-radius: 4px 4px 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.receipt-btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: 0.2s;
  font-family: system-ui, -apple-system, sans-serif;
}

.receipt-btn-close {
  background: #e2e8f0;
  color: #475569;
}

.receipt-btn-close:hover {
  background: #cbd5e1;
}

.receipt-btn-print {
  background: #000;
  color: #fff;
}

.receipt-btn-print:hover {
  background: #333;
}

.thermal-receipt-content {
  padding: 24px 20px;
  background: #fff;
}

.receipt-header {
  text-align: center;
  margin-bottom: 16px;
}

.receipt-logo {
  max-width: 140px;
  margin-bottom: 10px;
  justify-self: center;
  /* Crucial: Invert the white logo to make it black for the receipt */
  filter: invert(0) grayscale(0) brightness(1);
}

.receipt-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.receipt-header p {
  margin: 4px 0 0;
  font-size: 12px;
}

.receipt-divider {
  border-top: 1px dashed #000;
  margin: 12px 0;
}

.receipt-info {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.receipt-info p {
  margin: 2px 0;
  display: flex;
  justify-content: space-between;
}

.receipt-items-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
  margin-bottom: 12px;
}

.receipt-items-table th {
  text-align: left;
  border-bottom: 1px dashed #000;
  padding-bottom: 4px;
}

.receipt-items-table td {
  padding: 6px 0;
  vertical-align: top;
}

.receipt-item-qty {
  width: 20px;
}

.receipt-item-desc {
  padding-right: 10px;
}

.receipt-item-price {
  text-align: right;
  white-space: nowrap;
}

.receipt-totals {
  font-size: 13px;
}

.receipt-totals-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.receipt-totals-row.grand-total {
  font-size: 16px;
  font-weight: bold;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #000;
}

.receipt-payments {
  margin-top: 12px;
  font-size: 12px;
}

.receipt-footer {
  text-align: center;
  font-size: 12px;
  margin-top: 20px;
}

/* --- Print Styles --- */
@media print {
  body * {
    visibility: hidden; /* Hide everything by default */
  }

  .thermal-receipt-overlay {
    position: absolute;
    left: 0;
    top: 0;
    background: none;
    padding: 0;
    display: block;
    overflow: visible;
  }

  .thermal-receipt-container {
    box-shadow: none;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Only show the receipt content */
  .thermal-receipt-container, 
  .thermal-receipt-container * {
    visibility: visible;
  }

  /* Hide the action buttons during print */
  .thermal-receipt-actions {
    display: none !important;
  }

  @page {
    margin: 0; /* Important for thermal printers to avoid blank margins */
    size: 80mm auto; /* Typical thermal printer width */
  }
}
.sales-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.sales-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.sales-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.sales-filters {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sales-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--bg-card);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  flex: 1;
  min-width: 250px;
  color: var(--text-muted);
}

.sales-search-input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  color: var(--text-main);
  font-size: 14px;
}

.sales-filter-select {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--bg-card);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
}

.sales-select-input {
  border: none;
  background: transparent;
  outline: none;
  color: var(--text-main);
  font-size: 14px;
  cursor: pointer;
}

.sales-table-container {
  background-color: var(--bg-card);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.sales-table {
  width: 100%;
  border-collapse: collapse;
}

.sales-table th {
  background-color: var(--bg-main);
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  padding: 16px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
}

.sales-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 14px;
  vertical-align: middle;
}

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

.sales-table tr:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.view-btn {
  color: var(--color-primary);
}

.view-btn:hover {
  background-color: rgba(var(--color-primary-rgb), 0.1);
}

/* Modal details */
.sale-detail-section {
  margin-bottom: 24px;
  background: var(--bg-main);
  padding: 16px;
  border-radius: 8px;
  border: none;
}

.sale-detail-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

@media (max-width: 768px) {
  .sale-detail-section {
    border: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin-bottom: 30px;
  }
}

/* =========================================
   SALES KPI CARDS & RESPONSIVE LAYOUT
   ========================================= */
.sales-kpi-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
  width: 100%;
}

.sales-kpi-card {
  background: var(--bg-card);
  padding: 16px 16px 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-width: 0;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.35s ease;
}

.sales-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3.5px;
  border-radius: 14px 0 0 14px;
}

.sales-kpi-card.kpi-revenue::before { background: #10b981; }
.sales-kpi-card.kpi-sales::before   { background: #3b82f6; }
.sales-kpi-card.kpi-ticket::before  { background: #8b5cf6; }

.sales-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.sales-kpi-top {
  width: 100%;
  min-width: 0;
}

.sales-kpi-value {
  color: var(--text-main);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.3px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.sales-kpi-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sales-kpi-icon-mini {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sales-kpi-card.kpi-revenue .sales-kpi-icon-mini {
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
}

.sales-kpi-card.kpi-sales .sales-kpi-icon-mini {
  background: rgba(59, 130, 246, 0.14);
  color: #3b82f6;
}

.sales-kpi-card.kpi-ticket .sales-kpi-icon-mini {
  background: rgba(139, 92, 246, 0.14);
  color: #8b5cf6;
}

.sales-kpi-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* MOBILE KPI & ACTIONS SETTINGS */
@media (max-width: 768px) {
  .sales-container {
    padding: 14px 12px;
  }

  .sales-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .sales-kpi-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .sales-kpi-card {
    padding: 12px 10px 10px 12px !important;
    gap: 6px !important;
  }

  /* Ingresos Totales abarca todo el ancho superior */
  .sales-kpi-card.kpi-revenue {
    grid-column: 1 / -1 !important;
  }

  .sales-kpi-value {
    font-size: 18px !important;
  }

  .sales-kpi-bottom {
    gap: 6px !important;
  }

  .sales-kpi-icon-mini {
    width: 20px !important;
    height: 20px !important;
    border-radius: 5px !important;
  }

  .sales-kpi-icon-mini svg {
    width: 12px !important;
    height: 12px !important;
  }

  .sales-kpi-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  /* HIDE ACTION COLUMNS ON MOBILE */
  .actions-col {
    display: none !important;
  }

  .hide-on-pc {
    display: block !important;
  }
}

@media (max-width: 480px) {
  .sales-container {
    padding: 12px 10px;
  }

  .sales-kpi-value {
    font-size: 16px !important;
  }

  .sales-kpi-label {
    font-size: 10.5px !important;
  }
}

/* DESKTOP HIDE ACTIONS DROPDOWN */
@media (min-width: 769px) {
  .hide-on-pc {
    display: none !important;
  }
}

/* DROPDOWN STYLING */
.mobile-actions-dropdown {
  position: relative;
}
.dropdown-toggle {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 50;
  min-width: 140px;
  padding: 4px;
}
.mobile-actions-dropdown:focus-within .dropdown-content,
.mobile-actions-dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}
.dropdown-item:hover {
  background: var(--bg-input);
  color: var(--color-primary);
}

.sales-table:focus-within { overflow: visible !important; }

/* =========================================
   SALE DETAILS MODAL COMPACT HEADER
   ========================================= */
.sale-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-card);
}

.sale-modal-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sale-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sale-modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.sale-modal-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sale-modal-code-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  background: var(--bg-main);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  letter-spacing: 0.5px;
}

.status-badge.status-success {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}
.status-badge.status-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}
.status-badge.status-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}
.status-badge.status-info {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #3b82f6 !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

@media (max-width: 640px) {
  .sale-modal-header {
    padding: 12px 16px !important;
    gap: 8px !important;
  }
  .sale-modal-title {
    font-size: 1rem !important;
  }
  .sale-modal-badges {
    gap: 6px !important;
  }
  .sale-modal-code-badge {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
  .sale-details-body {
    padding: 14px 16px !important;
    gap: 14px !important;
  }
}

/* ==========================================================================
   SALES FILTERS PANEL & RESPONSIVE UX
   ========================================================================== */

.sales-filters-container {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.sales-filters-container-inner {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}

.sales-search-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
}

.sales-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.sales-search-input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  font-size: 14px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.sales-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

.sales-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.sales-filter-toggle-btn:hover {
  background: var(--bg-input);
  border-color: var(--border-color);
}

.sales-filter-toggle-btn.active {
  background: var(--color-primary);
  color: var(--color-primary-text, #ffffff);
  border-color: var(--color-primary);
}

.sales-filter-badge {
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sales-filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  background: var(--bg-card);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  animation: fadeIn 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.sales-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.sales-filter-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.sales-filter-date-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  font-size: 13.5px;
  height: 42px;
  color-scheme: light dark;
  transition: all 0.2s ease;
}

.sales-filter-date-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

.sales-filter-actions {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.sales-filter-clear-btn {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
  color: var(--color-danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 13.5px;
  box-sizing: border-box;
}

.sales-filter-clear-btn:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: var(--color-danger, #ef4444);
}

@media (max-width: 860px) {
  .sales-filters-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
  }

  .sales-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .sales-filters-container-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .sales-filter-toggle-btn {
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
  }

  .sales-filters-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 12px;
  }

  .sales-filter-actions {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  .sales-filter-clear-btn {
    width: 100%;
  }
}


/* ─── TopBar / Cintillo de anuncios ─────────────────────────────── */

.topbar {
  width: 100%;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center !important;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  border: none !important;
  outline: none !important;
  margin-top: -1px;
  margin-bottom: -1px;
  /* Subtle animation on mount */
  animation: topbarFadeIn 0.4s ease forwards;
}

@keyframes topbarFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* EFFECTS */
.topbar--effect-pulse {
  animation: topbarPulse 2s infinite;
}
@keyframes topbarPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.topbar--effect-glow {
  box-shadow: 0 0 15px currentColor;
  animation: topbarGlow 2s infinite alternate;
}
@keyframes topbarGlow {
  from { box-shadow: 0 0 5px currentColor; }
  to { box-shadow: 0 0 20px currentColor; }
}

.topbar--effect-marquee .topbar__inner {
  white-space: nowrap;
  animation: topbarMarquee 15s linear infinite;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
@keyframes topbarMarquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

.topbar--effect-bounce {
  animation: topbarBounce 2s infinite;
}
@keyframes topbarBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
  60% { transform: translateY(-2px); }
}

.topbar--effect-neon {
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 20px currentColor;
  animation: topbarNeon 1.5s infinite alternate;
}
@keyframes topbarNeon {
  from { filter: brightness(1); }
  to { filter: brightness(1.3); }
}

.topbar--effect-shimmer {
  position: relative;
  overflow: hidden;
}
.topbar--effect-shimmer::after {
  content: "";
  position: absolute;
  top: 0; left: -150%; width: 50%; height: 100%;
  background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: topbarShimmer 3s infinite;
  pointer-events: none;
}
@keyframes topbarShimmer {
  0% { left: -150%; }
  50% { left: 200%; }
  100% { left: 200%; }
}

.topbar__icon {
  margin-right: 4px;
  flex-shrink: 0;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center !important;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: center;
  padding: 0 24px; /* Balance visual centering when close button is present */
}

.topbar__text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.4;
  text-align: center;
}

.topbar__link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.topbar__link:hover {
  opacity: 1;
}

.topbar__close {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
}

.topbar__close:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

/* ─── Nuevos Efectos Visuales ─── */

.topbar--effect-border-glow {
  box-shadow: inset 0 3px 8px -1px currentColor, inset 0 -3px 8px -1px currentColor;
}

.topbar--effect-typewriter .topbar__text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid currentColor;
  animation: typing 3s steps(40, end) infinite alternate, blink-caret 0.75s step-end infinite;
}
@keyframes typing {
  0%, 10% { max-width: 0; }
  90%, 100% { max-width: 100%; }
}
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: currentColor; }
}

.topbar--effect-glitch {
  animation: topbarGlitch 3s infinite;
}
@keyframes topbarGlitch {
  0%, 95%, 100% { transform: translate(0); }
  96% { transform: translate(-2px, 1px); }
  97% { transform: translate(2px, -1px); }
  98% { transform: translate(-2px, -1px); }
  99% { transform: translate(2px, 1px); }
}

.topbar--effect-color-cycle {
  animation: topbarColorCycle 5s linear infinite;
}
@keyframes topbarColorCycle {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.topbar--effect-scanline::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 2px;
  background: currentColor;
  opacity: 0.6;
  animation: topbarScanline 2.5s linear infinite;
  pointer-events: none;
}
@keyframes topbarScanline {
  0% { top: -10%; opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { top: 110%; opacity: 0; }
}

.topbar--effect-shake {
  animation: topbarShake 5s infinite;
}
@keyframes topbarShake {
  0%, 90% { transform: translate3d(0, 0, 0); }
  92% { transform: translate3d(-3px, 0, 0) rotate(-1deg); }
  94% { transform: translate3d(3px, 0, 0) rotate(1deg); }
  96% { transform: translate3d(-3px, 0, 0) rotate(-1deg); }
  98% { transform: translate3d(3px, 0, 0) rotate(1deg); }
  100% { transform: translate3d(0, 0, 0); }
}

.topbar--effect-pulse-glow {
  animation: topbarPulseGlow 2s infinite alternate;
}
@keyframes topbarPulseGlow {
  0% { box-shadow: 0 0 5px currentColor; transform: scale(1); }
  100% { box-shadow: 0 0 20px currentColor; transform: scale(1.02); }
}

/* Nuevos Efectos Adicionales */
.topbar--effect-gradient-flow {
  background: linear-gradient(270deg, #ff007f, #7f00ff, #007fff, #00ff7f) !important;
  background-size: 600% 600% !important;
  animation: topbarGradientFlow 6s ease infinite;
}
@keyframes topbarGradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.topbar--effect-rainbow-text .topbar__text,
.topbar--effect-rainbow-text .topbar__link,
.topbar--effect-rainbow-text .topbar__icon {
  background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  background-size: 200% auto;
  color: transparent !important;
  -webkit-background-clip: text;
  background-clip: text;
  animation: topbarRainbowText 4s linear infinite;
}
@keyframes topbarRainbowText {
  to { background-position: 200% center; }
}

.topbar--effect-cyberpunk {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  border-right: 5px solid #fce803 !important;
  border-left: 5px solid #00f0ff !important;
}

.topbar--effect-text-breathe .topbar__text {
  animation: topbarTextBreathe 3s ease-in-out infinite alternate;
}
@keyframes topbarTextBreathe {
  from { letter-spacing: 0.5px; filter: drop-shadow(0 0 0 transparent); }
  to { letter-spacing: 5px; filter: drop-shadow(0 0 8px currentColor); }
}

.topbar--effect-retro-wave .topbar__text {
  text-shadow: 2px 2px 0px #e91e63, -2px -2px 0px #00bcd4;
  font-style: italic;
  font-weight: 800 !important;
  letter-spacing: 2px;
}

.topbar--effect-spotlight::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle 250px at center, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: topbarSpotlight 5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes topbarSpotlight {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .topbar {
    padding: 8px 16px;
  }
  .topbar__text {
    font-size: 11px;
  }
  .topbar__link {
    font-size: 11px;
  }
}
.ec-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  margin-bottom: 0;
}
.ec-tab-btn.ec-active {
  background: var(--bg-card);
  color: var(--color-primary);
  border-color: var(--border-color);
  margin-bottom: -1px;
}

.ec-section-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  border-left: 3px solid transparent;
  gap: 16px;
}
.ec-section-item-last { border-bottom: none; }
.ec-section-item.ec-dirty {
  background: var(--bg-overlay);
  border-left: 3px solid var(--color-primary);
}

.ec-switch-btn {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: var(--border-color);
  transition: background 0.2s;
  flex-shrink: 0;
}
.ec-switch-btn.ec-active { background: var(--color-success, #48bb78); }
.ec-switch-indicator {
  position: absolute;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: left 0.2s;
  left: 3px;
}
.ec-switch-btn.ec-active .ec-switch-indicator { left: 23px; }

.ec-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ec-mb-20 { margin-bottom: 20px; }
.ec-mb-15 { margin-bottom: 15px; }
.ec-mb-10 { margin-bottom: 10px; }
.ec-mb-8 { margin-bottom: 8px; }
.ec-mt-20 { margin-top: 20px; }
.ec-block { display: block; }
.ec-relative { position: relative; display: inline-block; }

.ec-icon-btn-lg {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s;
}
.ec-icon-btn-lg:hover { border-color: var(--color-primary) !important; }

.ec-icon-btn-sm {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s;
}
.ec-icon-btn-sm:hover { border-color: var(--color-primary) !important; }

.ec-empty-icon { font-size: 12px; color: #888; font-weight: 500; }

.ec-btn-remove-icon {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background: var(--color-danger, #e53e3e);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.ec-video-btn {
  width: 120px;
  height: 60px;
  border-radius: 12px;
  background: #111;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}
.ec-video-btn:hover { border-color: var(--color-primary) !important; }

.ec-video-preview { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.ec-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.ec-grid-auto-15 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }

.ec-flex-between { display: flex; justify-content: space-between; }
.ec-percent-text { font-size: 12px; color: var(--color-primary); }
.ec-range-input { width: 100%; cursor: pointer; }
.ec-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: #888; }

.ec-flex-center { display: flex; align-items: center; gap: 10px; }
.ec-color-picker { width: 36px; height: 36px; padding: 0; border: none; border-radius: 6px; cursor: pointer; background: transparent; }
.ec-color-hex { font-size: 13px; color: var(--text-main); font-family: monospace; }
.ec-cursor-pointer { cursor: pointer; }

.ec-header-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.ec-m-0 { margin: 0; }
.ec-btn-add { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--color-primary); color: var(--color-primary-text); border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }

.ec-empty-state { padding: 40px; text-align: center; background: var(--bg-main); border: 1px dashed var(--border-color); border-radius: 8px; color: var(--text-muted); }

.ec-card-relative { margin-bottom: 20px; position: relative; }
.ec-card-actions { position: absolute; top: 20px; right: 20px; display: flex; gap: 5px; }
.ec-btn-icon { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 5px; }
.ec-btn-icon:disabled { color: var(--border-color); cursor: default; }
.ec-btn-icon-danger { background: transparent; border: none; color: var(--color-danger, #e53e3e); cursor: pointer; padding: 5px; margin-left: 10px; }

.ec-grid-icon-title { display: grid; grid-template-columns: auto 1fr; gap: 20px; margin-bottom: 20px; }
.ec-flex-col-center { display: flex; flex-direction: column; justify-content: center; gap: 15px; }
.ec-flex-col { display: flex; flex-direction: column; gap: 15px; }
.ec-textarea-resize { resize: vertical; }
.ec-footer-fixed { left: 240px; width: calc(100% - 240px); }

.nc-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  margin-bottom: 0;
}

.nc-tab-btn.nc-active {
  background: var(--bg-card);
  color: var(--color-primary);
  border-color: var(--border-color);
  margin-bottom: -1px;
}

.nc-section-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  border-left: 3px solid transparent;
  gap: 16px;
}

.nc-section-item-last {
  border-bottom: none;
}

.nc-section-item.nc-dirty {
  background: var(--bg-overlay);
  border-left: 3px solid var(--color-primary);
}

.nc-switch-btn {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: var(--border-color);
  transition: background 0.2s;
  flex-shrink: 0;
}

.nc-switch-btn.nc-active {
  background: var(--color-success, #48bb78);
}

.nc-switch-indicator {
  position: absolute;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: left 0.2s;
  left: 3px;
}

.nc-switch-btn.nc-active .nc-switch-indicator {
  left: 23px;
}

.nc-mt-20 { margin-top: 20px; }
.nc-mb-20 { margin-bottom: 20px; }
.nc-mb-15 { margin-bottom: 15px; }
.nc-mb-10 { margin-bottom: 10px; }
.nc-mb-8 { margin-bottom: 8px; }
.nc-mt-25 { margin-top: 25px; }

.nc-text-muted-sm {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 15px;
}

.nc-video-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.nc-video {
  width: 100%;
  display: block;
}

.nc-video-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
}

.nc-btn-overlay {
  padding: 6px 12px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.nc-btn-danger-sm {
  padding: 6px 12px;
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.nc-btn-select-video {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  width: auto;
  background: var(--bg-main);
}

.nc-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.nc-color-input-wrapper {
  display: flex;
  gap: 10px;
}

.nc-color-picker {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.nc-flex-1 { flex: 1; }

.nc-range-input {
  width: 100%;
  margin-top: 10px;
}

.nc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.nc-paragraph-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.nc-textarea-resize {
  resize: vertical;
}

.nc-textarea-flex {
  resize: vertical;
  flex: 1;
}

.nc-btn-icon-danger {
  background: transparent;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  padding: 0 10px;
}

.nc-btn-icon-danger-sm {
  background: transparent;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  padding: 5px;
  margin-left: 10px;
}

.nc-btn-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-main);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.nc-btn-add-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.nc-grid-promise {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
}

.nc-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nc-icon-box-sm {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.nc-flex-col-15 {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.nc-flex-col-15-flex1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.nc-header-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.nc-m-0 { margin: 0; }

.nc-card-relative {
  position: relative;
  margin-bottom: 20px;
}

.nc-card-actions {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 5px;
}

.nc-btn-icon {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
}

.nc-btn-icon:disabled {
  color: var(--border-color);
  cursor: default;
}

.nc-block { display: block; }

.nc-grid-mvp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.nc-mvp-title {
  color: var(--text-color);
  margin-bottom: 10px;
}

.nc-flex-gap-15 {
  display: flex;
  gap: 15px;
}

.nc-flex-gap-15-mb {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  align-items: center;
}

.nc-flex-gap-15-mb input {
  flex: 1;
}

.nc-footer-fixed {
  left: 240px;
  width: calc(100% - 240px);
}

/* Fix for inputs not stretching in flex columns */
.hc-style-19 {
  width: 100%;
  box-sizing: border-box;
}

.nc-textarea-resize {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

.nc-textarea-flex {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  flex: 1;
}

.nc-paragraph-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.nc-btn-icon-danger {
  margin-top: 10px;
}
/* GuiaTallasConfig.css */
.gtc-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.gtc-add-btn:hover {
  opacity: 0.9;
}

.gtc-garments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gtc-garment-card {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  transition: opacity 0.3s;
}

.gtc-garment-card.gtc-hidden {
  opacity: 0.6;
}

.gtc-garment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-overlay);
  border-bottom: 1px solid var(--border-color);
}

.gtc-garment-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gtc-grip {
  color: var(--text-muted);
  cursor: grab;
}

.gtc-order-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gtc-move-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gtc-move-btn:hover:not(:disabled) {
  background: var(--border-color);
  color: var(--text-main);
}

.gtc-move-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.gtc-garment-title-preview {
  font-weight: 600;
  font-size: 14px;
}

.gtc-garment-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gtc-vis-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.gtc-vis-btn.gtc-vis-active {
  color: #10b981;
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.gtc-edit-labels-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--color-primary);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.gtc-edit-labels-btn:hover {
  background: var(--bg-hover);
}

.gtc-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-color);
  color: #ef4444;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}

.gtc-delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
}

.gtc-garment-body {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.gtc-garment-preview {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.gtc-garment-preview img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.gtc-garment-fields {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gtc-labels-section {
  background: var(--bg-overlay);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}

.gtc-labels-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.gtc-add-label-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.gtc-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.gtc-label-row:last-child {
  margin-bottom: 0;
}

.gtc-label-input {
  flex-grow: 1;
  padding: 6px 10px;
}

.gtc-label-coords {
  display: flex;
  align-items: center;
}

.gtc-label-delete {
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gtc-label-delete:hover {
  background: rgba(239, 68, 68, 0.1);
}

.gtc-save-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--color-primary);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border-radius: 30px;
  padding: 8px 12px 8px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 100;
}

.gtc-save-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

.gtc-save-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.gtc-save-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .gtc-garment-body {
    flex-direction: column;
  }
  
  .gtc-garment-preview {
    margin: 0 auto;
  }
  
  .gtc-save-bar {
    width: 90%;
    justify-content: space-between;
  }

  .gtc-garment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .gtc-garment-header-right {
    width: 100%;
    justify-content: flex-end;
  }
}
.lem-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lem-modal {
  background: var(--bg-primary, #fff);
  width: 90vw;
  height: 85vh;
  max-width: 1200px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.lem-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color, #eaeaea);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-secondary, #fafafa);
}

.lem-header h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary, #111);
}

.lem-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #666);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s;
}

.lem-close:hover {
  background: var(--bg-hover, #eee);
  color: var(--color-danger, #ef4444);
}

.lem-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar */
.lem-sidebar {
  width: 320px;
  border-right: 1px solid var(--border-color, #eaeaea);
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #fff);
}

.lem-sidebar-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color, #eaeaea);
}

.lem-sidebar-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary, #444);
}

.lem-add-btn {
  background: var(--color-primary, #111);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.lem-add-btn:hover {
  background: var(--color-primary-hover, #333);
}

.lem-labels-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lem-empty-state {
  font-size: 0.85rem;
  color: var(--text-muted, #888);
  text-align: center;
  margin-top: 20px;
}

.lem-label-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-secondary, #fafafa);
  border: 1px solid var(--border-color, #eaeaea);
  padding: 10px;
  border-radius: 8px;
}

.lem-label-drag-handle {
  color: var(--text-muted, #999);
  display: flex;
  align-items: center;
}

.lem-label-inputs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lem-label-inputs input {
  width: 100%;
  border: 1px solid var(--border-color, #ddd);
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #111);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.85rem;
  outline: none;
}
.lem-label-inputs input:focus {
  border-color: var(--color-primary, #111);
}

.lem-label-coords-info {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--text-muted, #777);
}

.lem-label-delete {
  background: transparent;
  border: none;
  color: var(--text-muted, #999);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}
.lem-label-delete:hover {
  color: var(--color-danger, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

.lem-sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color, #eaeaea);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lem-help-text {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary, #555);
}

.lem-save-btn {
  background: var(--color-primary, #111);
  color: #fff;
  border: none;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.lem-save-btn:hover {
  opacity: 0.9;
}

/* Canvas */
.lem-canvas-container {
  flex: 1;
  background: var(--bg-tertiary, #f0f0f0);
  padding: 40px;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.lem-canvas-wrapper {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border-radius: 8px;
  padding: 20px;
}

.lem-canvas {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}

.lem-image {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none; /* Prevents native image drag */
}

/* Override existing public css just for inside modal if needed */
.lem-canvas .medida-label {
  position: absolute !important;
  pointer-events: auto !important; /* Allow drag */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .lem-overlay {
    padding: 16px;
    box-sizing: border-box;
  }

  .lem-modal {
    width: 100%;
    height: 100%;
    max-height: 100dvh; /* dvh handles mobile address bars perfectly */
    border-radius: 12px;
  }
  
  .lem-body {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .lem-sidebar {
    width: 100%;
    border-right: none;
    flex: none;
    order: 2; /* Sidebar at the bottom */
  }

  .lem-sidebar-header {
    border-top: 1px solid var(--border-color, #eaeaea);
  }

  .lem-labels-list {
    max-height: none; /* Let the whole body scroll */
  }

  .lem-sidebar-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-primary, #fff);
    z-index: 20;
    border-top: 1px solid var(--border-color, #eaeaea);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
  }
  
  .lem-canvas-container {
    padding: 20px;
    flex: none; /* Don't shrink to 0 */
    min-height: 350px;
    order: 1; /* Canvas at the top */
  }
  
  .lem-canvas-wrapper {
    width: 100%;
    overflow-x: auto;
  }
}

.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.375em;
  border-bottom-right-radius: 0.375em;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}
.react-datepicker-popper--header-middle[data-placement^=bottom] .react-datepicker__triangle, .react-datepicker-popper--header-bottom[data-placement^=bottom] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}
.react-datepicker-popper--header-bottom[data-placement^=top] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select, .react-datepicker__header--middle, .react-datepicker__header--bottom) {
  border-top-right-radius: 0.3rem;
}
.react-datepicker__header--middle {
  border-top: 1px solid #aeaeae;
  border-radius: 0;
  margin-top: 4px;
}
.react-datepicker__header--bottom {
  border-bottom: none;
  border-top: 1px solid #aeaeae;
  border-radius: 0 0 0.3rem 0.3rem;
}

.react-datepicker__header-wrapper {
  position: relative;
}
.react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 2px;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__month-select,
.react-datepicker__year-select,
.react-datepicker__month-year-select {
  background-color: transparent;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  margin-top: 5px;
  padding: 2px 5px;
}
.react-datepicker__month-select:focus-visible,
.react-datepicker__year-select:focus-visible,
.react-datepicker__month-year-select:focus-visible {
  outline: auto 1px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

h2.react-datepicker__current-month {
  padding: 0;
  margin: 0;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: rgb(165.75, 165.75, 165.75);
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.5em;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 5em;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.5em;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 5em;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.375em;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 2.125em / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 2.125em;
  line-height: 2.125em;
  text-align: center;
  margin: 0.208em;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}

.react-datepicker__day-names {
  text-align: center;
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 2.125em;
  line-height: 2.125em;
  text-align: center;
  margin: 0.208em;
}
.react-datepicker__day-name--disabled,
.react-datepicker__day--disabled,
.react-datepicker__time-name--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
  background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: rgb(186.25, 217.0833333333, 241.25);
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
  color: #fff;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.625em;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__children-container {
  width: 17.25em;
  margin: 0.5em;
  padding-right: 0.25em;
  padding-left: 0.25em;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.react-datepicker-popper-offset {
  margin-top: -0.7em;
}
.products-container {
    padding: 20px;
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.products-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* KPI Cards */
.carts-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.carts-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.carts-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.carts-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3.5px;
    background: var(--color-primary);
}

.carts-kpi-card.kpi-active::before { background: #3b82f6; }
.carts-kpi-card.kpi-proformas::before { background: #8b5cf6; }
.carts-kpi-card.kpi-converted::before { background: #10b981; }
.carts-kpi-card.kpi-abandoned::before { background: #ef4444; }
.carts-kpi-card.kpi-average::before { background: #f59e0b; }
.carts-kpi-card.kpi-rate::before { background: #10b981; }

.carts-kpi-top {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.carts-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    word-break: break-word;
    white-space: normal;
}

.carts-kpi-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.carts-kpi-icon-mini {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.carts-kpi-card.kpi-active .carts-kpi-icon-mini {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.carts-kpi-card.kpi-proformas .carts-kpi-icon-mini {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.carts-kpi-card.kpi-converted .carts-kpi-icon-mini {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.carts-kpi-card.kpi-abandoned .carts-kpi-icon-mini {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.carts-kpi-card.kpi-average .carts-kpi-icon-mini {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.carts-kpi-card.kpi-rate .carts-kpi-icon-mini {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.carts-kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
}

.metrics-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.metric-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-content {
    flex: 1;
}

.metric-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
}

.filters-container {
    margin-bottom: 20px;
}

.filters-container-inner {
    display: flex;
    gap: 12px;
    transition: margin-bottom 0.2s ease;
}

.filters-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    background: var(--bg-card);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    animation: fadeIn 0.2s ease;
}

.table-container {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow-x: auto;
}

.products-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
}

.products-table th {
    background: var(--bg-input);
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.products-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 14px;
    white-space: nowrap;
}

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

.products-table tbody tr:hover {
    background: var(--bg-input);
}

.status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-active {
    background: rgba(255, 193, 7, 0.1);
    color: #ffb300;
}

.status-abandoned {
    background: rgba(244, 67, 54, 0.1);
    color: #e53935;
}

.status-proforma {
    background: rgba(33, 150, 243, 0.1);
    color: #1e88e5;
}

.status-converted {
    background: rgba(76, 175, 80, 0.1);
    color: #43a047;
}

.status-ordered {
    background: rgba(92, 107, 192, 0.1);
    color: #5c6bc0;
}

.source-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.btn-convert {
    background: transparent;
    border: none;
    color: #43a047;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: 0.2s;
}

.btn-convert:hover {
    background: rgba(76, 175, 80, 0.1);
}

.btn-convert-order {
    background: transparent;
    border: none;
    color: #5c6bc0;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: 0.2s;
}

.btn-convert-order:hover {
    background: rgba(92, 107, 192, 0.1);
}

.btn-reminder {
    background: transparent;
    border: none;
    color: #ff9800;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: 0.2s;
}

.btn-reminder:hover {
    background: rgba(255, 152, 0, 0.1);
}

.btn-view {
    background: transparent;
    border: none;
    color: #2196f3;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: 0.2s;
}

.btn-view:hover {
    background: rgba(33, 150, 243, 0.1);
}

.btn-delete {
    background: transparent;
    border: none;
    color: #f44336;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: 0.2s;
}

.btn-delete:hover {
    background: rgba(244, 67, 54, 0.1);
}

.loading-state {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modal Base Styles for Carts */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-overlay, rgba(0, 0, 0, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal-content {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border-color);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--color-danger);
}

/* Cart Form Modal specific */
.cart-form-modal-container {
  max-width: 1000px;
  width: 95%;
}
.cart-form-title {
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: bold;
}
.cart-form-group {
  margin-bottom: 15px;
}
.cart-form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-main);
}
.cart-form-dropdown-wrapper {
  position: relative;
  margin-bottom: 80px;
}
.cart-form-input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-input);
  color: var(--text-main);
}
.cart-form-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  z-index: 100;
  max-height: 600px;
  overflow-y: auto;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.cart-form-dropdown-item {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
}
.cart-form-dropdown-item:hover {
  background-color: var(--color-secondary);
}
.cart-form-clear-btn {
  margin-top: 8px;
  font-size: 12px;
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
}
.cart-form-dropdown-group {
  border-bottom: 2px solid var(--border-color);
}
.cart-form-group-title {
  padding: 8px 10px;
  font-weight: 600;
  background-color: var(--color-secondary);
  color: var(--text-main);
}
.cart-form-variant-item {
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
}
.cart-form-variant-item:hover {
  background-color: var(--color-secondary);
}
.cart-form-items-section {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}
.cart-form-text-center {
  text-align: center;
}
.cart-form-empty-td {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}
.cart-form-font-bold {
  font-weight: 600;
  color: var(--text-main);
}
.cart-form-sku-td {
  font-size: 0.85em;
  color: var(--text-muted);
}
.cart-form-quantity-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-main);
}
.cart-form-qty-btn {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-input);
  color: var(--text-main);
  cursor: pointer;
}
.cart-form-qty-btn:hover {
  background-color: var(--color-secondary);
}
.cart-form-delete-btn {
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
}
.cart-form-footer-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
}
.cart-form-total-title {
  margin: 0;
  font-size: 1.2rem;
  color: var(--color-success);
}
.cart-form-actions-box {
  display: flex;
  gap: 10px;
}
.cart-form-btn-cancel {
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  cursor: pointer;
}
.cart-form-btn-cancel:hover {
  background: var(--color-secondary);
}
.cart-form-btn-save {
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  background-color: var(--color-primary);
  color: var(--color-primary-text);
  cursor: pointer;
  font-weight: 600;
}
.cart-form-btn-save:hover {
  background-color: var(--color-primary-hover);
}

.modal-product-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-product-image {
  width: 48px;
  height: 48px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.modal-product-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--bg-input);
  border: 1px dashed var(--border-color);
}
.modal-variant-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--text-muted);
}

/* CartDetailsModal Styles */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}
.modal-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  color: var(--text-main);
}
.modal-body-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  background: var(--bg-input);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}
.modal-info-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 4px;
}
.modal-info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}
.modal-section-title {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}
.modal-empty-state {
  padding: 30px;
  color: var(--text-muted);
}
.modal-footer-label {
  font-size: 14px;
  padding: 16px;
}
.modal-footer-value {
  font-size: 1.15rem;
  padding: 16px;
  color: var(--color-success);
}
.text-right {
  text-align: right;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}

/* ===== Modal Container Widths (PC) ===== */
.cart-details-modal-container {
  width: 95%;
  max-width: 1100px;
}

.cart-form-modal-container {
  width: 95%;
  max-width: 1000px;
}

/* ===== Modal Action Buttons Bar ===== */
.modal-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
  align-items: center;
}

.modal-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.modal-action-edit {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
}
.modal-action-edit:hover {
  background: var(--bg-input);
  border-color: var(--text-muted);
}

.modal-action-convert {
  background: #10b981;
  color: #fff;
}
.modal-action-convert:hover {
  background: #059669;
}

.modal-action-order {
  background: var(--color-primary);
  color: #fff;
}
.modal-action-order:hover {
  background: var(--color-primary-hover, #4338ca);
}

.modal-action-restore {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.modal-action-restore:hover {
  background-color: var(--color-primary);
  color: white;
}

.modal-action-reminder {
  background: #f59e0b;
  color: #fff;
}
.modal-action-reminder:hover {
  background: #d97706;
}

.modal-action-delete {
  background: transparent;
  border-color: transparent;
  color: #ef4444;
}
.modal-action-delete:hover {
  background: #fee2e2;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  /* Page layout */
  .products-container {
    padding: 12px;
  }

  .products-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .products-title {
    font-size: 18px;
    justify-content: center;
  }

  .carts-kpi-grid,
  .metrics-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px;
  }

  .carts-kpi-card {
    padding: 12px 10px 10px 12px;
    gap: 6px;
    border-radius: 10px;
  }

  .carts-kpi-value {
    font-size: 16px;
  }

  .carts-kpi-bottom {
    gap: 6px;
  }

  .carts-kpi-icon-mini {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }

  .carts-kpi-icon-mini svg {
    width: 12px;
    height: 12px;
  }

  .carts-kpi-label {
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
  }

  .filters-container-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .filters-panel {
    grid-template-columns: 1fr;
  }

  /* Modals - full screen on mobile */
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    padding: 16px;
  }

  .cart-details-modal-container,
  .cart-form-modal-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .modal-overlay {
    align-items: stretch;
  }

  /* Modal header */
  .modal-header {
    padding: 14px 12px;
    flex-wrap: nowrap;
  }

  .modal-title {
    font-size: 1rem;
  }

  /* Modal body */
  .modal-body-content {
    padding: 14px 12px;
    gap: 14px;
  }

  .modal-info-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
  }

  .modal-section-title {
    font-size: 0.95rem;
  }

  /* Cart form modal */
  .cart-form-title {
    font-size: 1.2rem;
  }

  .cart-form-dropdown-wrapper {
    margin-bottom: 60px;
  }

  .cart-form-footer-box {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .cart-form-actions-box {
    justify-content: stretch;
  }

  .cart-form-actions-box button {
    flex: 1;
    text-align: center;
    justify-content: center;
  }

  /* Action buttons in detail modal */
  .modal-actions-bar {
    flex-direction: column;
    gap: 8px;
  }

  .modal-action-btn {
    justify-content: center;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 10px;
  }

  .modal-action-delete {
    margin-left: 0;
  }

  /* Table responsive */
  .products-table th,
  .products-table td {
    padding: 10px 8px;
    font-size: 12px;
  }

  .modal-product-image,
  .modal-product-placeholder {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .metrics-container {
    grid-template-columns: 1fr 1fr;
  }

  .modal-info-grid {
    grid-template-columns: 1fr;
  }

  .cart-form-dropdown-wrapper {
    flex-direction: column;
  }
}

/* MOBILE TABLE ACTIONS DROPDOWN */
@media (max-width: 768px) {
  .actions-col {
    display: none !important;
  }
  .hide-on-pc {
    display: block !important;
  }
  .hide-on-mobile {
    display: none !important;
  }
}

/* DESKTOP HIDE ACTIONS DROPDOWN */
@media (min-width: 769px) {
  .hide-on-pc {
    display: none !important;
  }
}

/* DROPDOWN STYLING */
.mobile-actions-dropdown {
  position: relative;
}
.dropdown-toggle {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 50;
  min-width: 160px;
  padding: 4px;
}
.mobile-actions-dropdown:focus-within .dropdown-content,
.mobile-actions-dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}
.dropdown-item:hover {
  background: var(--bg-input);
  color: var(--color-primary);
}




.carts-table:focus-within { overflow: visible !important; }

/* ==========================================================================
   CARTS FILTERS PANEL & RESPONSIVE UX
   ========================================================================== */

.carts-filters-container {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.carts-filters-container-inner {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}

.carts-search-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
}

.carts-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.carts-search-input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  font-size: 14px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.carts-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

.carts-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.carts-filter-toggle-btn:hover {
  background: var(--bg-input);
  border-color: var(--border-color);
}

.carts-filter-toggle-btn.active {
  background: var(--color-primary);
  color: var(--color-primary-text, #ffffff);
  border-color: var(--color-primary);
}

.carts-filter-badge {
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.carts-filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  background: var(--bg-card);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  animation: fadeIn 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.carts-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.carts-filter-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.carts-filter-date-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  font-size: 13.5px;
  height: 42px;
  color-scheme: light dark;
  transition: all 0.2s ease;
}

.carts-filter-date-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

.carts-filter-actions {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.carts-filter-clear-btn {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
  color: var(--color-danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 13.5px;
  box-sizing: border-box;
}

.carts-filter-clear-btn:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: var(--color-danger, #ef4444);
}

@media (max-width: 860px) {
  .carts-filters-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
  }

  .carts-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .carts-filters-container-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .carts-filter-toggle-btn {
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
  }

  .carts-filters-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 12px;
  }

  .carts-filter-actions {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  .carts-filter-clear-btn {
    width: 100%;
  }
}



.orders-container {
  padding: 24px;
  background-color: var(--bg-main);
  min-height: 100vh;
}

.orders-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.orders-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.tabs-container {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
}

.tab-button {
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-button:hover {
  color: var(--text-main);
}

.tab-button.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.table-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px var(--bg-overlay);
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
}

.orders-table th {
  background: var(--bg-input);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.orders-table td {
  padding: 16px;
  color: var(--text-main);
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

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

.orders-table tbody tr:hover {
  background: var(--bg-input);
}

.status-badge {
  padding: 4px 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
}

.status-proforma { color: var(--color-warning); }
.status-assigned { color: #1e88e5; }
.status-on_the_way { color: #8e24aa; }
.status-at_the_meeting_point { color: #fb8c00; }
.status-completed { color: var(--color-success); }
.status-cancelled { color: var(--color-danger); }
.status-prepared { color: #f97316; }
.status-packaged { color: #0ea5e9; }
.status-shipped { color: #3b82f6; }

.action-btn {
  background: var(--color-secondary);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  font-size: 13px;
}

.action-btn:hover {
  background: var(--border-color);
}

.action-btn.primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
}

.action-btn.primary:hover {
  background: var(--color-primary-hover);
}

.action-btn.success {
  background: var(--color-success);
  color: white;
  border: none;
}

/* Modal styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
  animation: modalOverlayFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background: var(--bg-card);
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  animation: modalScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  color: var(--text-main);
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.close-btn:hover {
  color: var(--color-danger);
}

.modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.form-group input,
.form-group select {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  font-size: 14px;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--color-primary);
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn-cancel {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  font-weight: 500;
}

.btn-cancel:hover {
  background: var(--bg-input);
}

/* NEW BUBBLE/TIMELINE LAYOUT */
.timeline-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.date-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.date-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.date-badge {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.date-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--border-color) 0%, transparent 100%);
  border-radius: 2px;
}

.bubble-row {
  display: flex;
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 20px;
  gap: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.bubble-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.bubble-row.is-completed {
  opacity: 0.7;
  background: var(--bg-body);
}

.bubble-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-right: 20px;
  border-right: 2px dashed var(--border-color);
  min-width: 120px;
}

.bubble-time {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.bubble-ref {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  background: var(--bg-input);
  padding: 4px 10px;
  border-radius: 12px;
}

.bubble-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bubble-main-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.bubble-customer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  max-width: 100%;
  flex-wrap: wrap;
}

.bubble-customer > div,
.bubble-customer > span,
.bubble-customer > div > span,
.bubble-customer > p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.bubble-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.info-item .icon {
  color: var(--color-primary);
  margin-top: 2px;
}

.info-item strong {
  display: block;
  color: var(--text-main);
  font-size: 14px;
  margin-bottom: 2px;
}

.bubble-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 150px;
}

.bubble-total {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: var(--text-main);
  line-height: 1.1;
  white-space: nowrap;
}

.total-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.total-amount {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
}

.bubble-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 768px) {
  .bubble-row {
    flex-direction: column;
    padding: 16px;
    gap: 12px;
  }
  .bubble-left {
    border-right: none;
    border-bottom: none;
    padding-right: 0;
    padding-bottom: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .bubble-customer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    font-size: 14px !important;
  }
  .separator-pipe {
    display: none !important;
  }
  .bubble-customer > div {
    width: 100%;
  }
  .bubble-info-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
  }
  .info-item {
    padding: 8px 12px;
    border-radius: 8px;
  }
  .bubble-right {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    border-top: 1px dashed var(--border-color);
    padding-top: 16px;
    margin-top: 8px;
    width: 100%;
    gap: 16px;
  }
  .bubble-total {
    flex-direction: row !important;
    align-items: center !important;
    width: 100%;
  }
  .total-amount {
    font-size: 18px !important;
  }
  .bubble-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .bubble-actions > *:last-child {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bubble-actions > *:not(:last-child) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
  }
}

/* Custom status bubble backgrounds */
.bubble-status-pending {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 6px solid #64748b;
}
.bubble-status-assigned {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 6px solid #2196f3;
}
.bubble-status-on_the_way {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 6px solid #9c27b0;
}
.bubble-status-at_the_meeting_point {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 6px solid #ff9800;
}
.bubble-status-completed {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 6px solid #10b981;
}
.bubble-status-cancelled {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 6px solid #ef4444;
}
.bubble-status-prepared {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 6px solid #f97316;
}
.bubble-status-packaged {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 6px solid #0ea5e9;
}
.bubble-status-shipped {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 6px solid #3b82f6;
}
/* Enhanced Modal Header Fixes */
@media (max-width: 768px) {
  .modal-header {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding-right: 48px !important;
    position: relative !important;
  }
  .modal-header .close-btn {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
  }
  .modal-header > div:last-child {
    width: 100% !important;
    justify-content: flex-start !important;
    margin-top: 4px !important;
  }
  .modal-title {
    flex-wrap: wrap !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  .modal-actions-footer {
    flex-direction: column !important;
    width: 100% !important;
  }
  .modal-actions-footer button {
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }
}

/* Footer Mobile Layout Fixes */
@media (max-width: 768px) {
  .modal-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .modal-footer-left {
    display: contents !important;
  }
  .modal-footer-left > span {
    flex: 1 1 100% !important;
    order: 1 !important;
  }
  .btn-marcar {
    flex: 1 1 100% !important;
    order: 1 !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .btn-cancelar {
    flex: 1 1 45% !important;
    order: 2 !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .btn-cerrar {
    flex: 1 1 45% !important;
    order: 3 !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Shrink Horizontal Timeline on Mobile to avoid scroll */
@media (max-width: 768px) {
  .modal-timeline-wrapper {
    overflow-x: visible !important;
    padding-bottom: 0 !important;
  }
  .modal-timeline-inner {
    min-width: auto !important;
    padding: 16px 8px !important;
  }
  .timeline-line-bg {
    left: 24px !important;
    right: 24px !important;
    top: 26px !important;
  }
  .timeline-step {
    width: auto !important;
    flex: 1 !important;
  }
  .timeline-step-circle {
    width: 22px !important;
    height: 22px !important;
  }
  .timeline-step-inner-circle {
    width: 6px !important;
    height: 6px !important;
  }
  .timeline-step-text {
    font-size: 10px !important;
    letter-spacing: -0.3px !important;
  }
}

/* NEW ORDER MODAL RESPONSIVE STYLES */
.new-order-modal-content {
  max-width: 1060px !important;
  width: 96% !important;
  height: 88vh !important;
  max-height: 860px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: var(--bg-card) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
}

.new-order-modal-header {
  padding: 16px 22px !important;
  border-bottom: 1px solid var(--border-color) !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  background: var(--bg-card) !important;
}

.new-order-modal-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.new-order-modal-icon-badge {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: var(--color-primary-alpha, rgba(99, 102, 241, 0.1)) !important;
  color: var(--color-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.new-order-modal-header h2 {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  line-height: 1.2 !important;
}

.new-order-modal-step-badge {
  font-size: 11.5px !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  display: block !important;
  margin-top: 2px !important;
}

.new-order-modal-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.new-order-modal-close:hover {
  background: rgba(125, 125, 125, 0.12) !important;
  color: var(--text-main) !important;
  border: none !important;
}

.new-order-modal-body {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
  padding: 16px 22px 20px 22px !important;
}

/* Override Carts.css 80px bottom margin on the search container */
.new-order-modal-content .cart-form-dropdown-wrapper {
  margin-bottom: 0 !important;
}

.new-order-left-panel {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.new-order-right-panel {
  flex: 0 0 340px !important;
  width: 340px !important;
  min-width: 340px !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  padding: 0 0 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  height: 100% !important;
}

.new-order-summary-title {
  margin: 0 0 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
}

.new-order-cart-badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  background: var(--color-primary-alpha, rgba(99, 102, 241, 0.1)) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
}

.cart-items-list {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-right: 4px !important;
}

/* Empty cart state */
.new-order-empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 2px 0;
  width: 100%;
  box-sizing: border-box;
}

.empty-cart-icon-wrapper {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-main, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.empty-cart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 2px 0;
}

.empty-cart-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0;
  max-width: 260px;
  line-height: 1.35;
}

/* Redesigned Product Item - FLAT MINIMALIST STYLE */
.summary-product-item-flat {
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.summary-product-item-flat.is-in-bundle {
  background: var(--bg-main, #f8fafc) !important;
  border-color: var(--border-color, #e2e8f0) !important;
}

.summary-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.summary-product-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.summary-product-remove-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.summary-product-remove-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.summary-product-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.summary-product-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.summary-product-sku {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: monospace;
}

.summary-product-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-main, #f8fafc);
  color: var(--text-muted);
  border: 1px solid var(--border-color, #e2e8f0);
  font-weight: 500;
  white-space: nowrap;
}

.summary-product-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding-top: 2px;
}

.summary-product-actions-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.summary-product-price-stack {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

.summary-product-original-price {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 500;
}

.summary-product-price {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-main);
  letter-spacing: -0.2px;
}

.summary-product-price.is-discounted {
  color: var(--color-success, #10b981);
}

.summary-flat-stock-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-flat-stock-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.summary-flat-stock-icon {
  position: absolute;
  left: 9px;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}

.summary-product-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 1px;
}

.summary-stepper-flat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 2px 4px;
}

.summary-stepper-btn {
  background: transparent;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.summary-stepper-btn:hover {
  background: var(--bg-card);
  color: var(--color-primary);
}

.summary-stepper-qty {
  font-size: 13px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  color: var(--text-main);
}

.summary-split-btn-flat {
  background: transparent;
  border: 1px dashed var(--color-primary);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.summary-split-btn-flat:hover {
  background: var(--color-primary-alpha, rgba(99, 102, 241, 0.1));
}

/* Totals and Actions Section - FLAT MINIMALIST */
.new-order-totals-section {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border-color) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.new-order-totals-flat {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  box-shadow: none !important;
}

.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  color: var(--text-muted);
}

.totals-val {
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
}

.totals-divider {
  height: 1px;
  background: var(--border-color);
  margin: 2px 0;
}

.totals-row-final {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-main);
}

.totals-val-final {
  font-size: 17.5px;
  font-weight: 800;
  color: var(--color-primary);
  white-space: nowrap;
}

.action-btn-continue {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  min-height: 46px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: var(--color-primary-text, #ffffff);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.action-btn-continue:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}

.action-btn-continue:active {
  transform: translateY(1px);
}

.action-btn-continue.action-btn-submit {
  background: var(--color-success) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}

.action-btn-continue.action-btn-submit:hover {
  background: #059669 !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35) !important;
}

.delivery-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 !important;
}

.delivery-form h3 {
  margin: 0 0 12px 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
}

.delivery-sections {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.delivery-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  box-shadow: none !important;
}

.delivery-card:not(:first-child) {
  padding-top: 18px !important;
  border-top: 1px solid var(--border-color) !important;
}

.delivery-label,
.delivery-card h4 {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin: 0 0 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.delivery-type-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
}

.delivery-type-tabs .tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  min-width: -moz-fit-content !important;
  min-width: fit-content !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card, #ffffff) !important;
  color: var(--text-muted, #64748b) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: visible !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

.delivery-type-tabs .tab-btn:hover:not(.active) {
  color: var(--text-main) !important;
  border-color: var(--color-primary, #6366f1) !important;
  background: rgba(99, 102, 241, 0.05) !important;
  transform: translateY(-1px) !important;
}

.delivery-type-tabs .tab-btn.active {
  background: var(--text-main, #111827) !important;
  color: #ffffff !important;
  border-color: var(--text-main, #111827) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
  transform: translateY(-1px) !important;
}

.delivery-type-tabs .tab-btn svg {
  flex-shrink: 0 !important;
  stroke-width: 2 !important;
}

/* CUSTOMER TYPE TABS (SINGLE CLEAN BORDER) */
.customer-type-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3px !important;
  width: 100% !important;
  background: var(--bg-input, rgba(125, 125, 125, 0.08)) !important;
  padding: 3px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.customer-type-tabs .tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transform: none !important;
}

.customer-type-tabs .tab-btn:hover:not(.active) {
  color: var(--text-main) !important;
  background: rgba(125, 125, 125, 0.06) !important;
}

.customer-type-tabs .tab-btn.active {
  background: var(--bg-card, #ffffff) !important;
  color: var(--color-primary, #6366f1) !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.customer-type-tabs .tab-btn svg {
  flex-shrink: 0 !important;
}

/* DATE & TIME FIELDS - PERFECT 1-ROW ALIGNMENT */
.date-time-fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  align-items: start !important;
}

.date-time-group {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.date-time-label {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  height: 16px !important;
  line-height: 16px !important;
  display: block !important;
}

.date-time-input-wrapper {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.date-time-icon {
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-muted) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.date-time-fields .date-picker-wrapper,
.date-time-fields .react-datepicker-wrapper {
  display: block !important;
  width: 100% !important;
}

.date-time-fields input.date-time-control,
.date-time-fields input.form-control {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 10px 0 34px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-input) !important;
  color: var(--text-main) !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

.address-select-container, .manual-location-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.map-container {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.guest-fields {
  display: flex;
  gap: 16px;
}

.phone-fields {
  display: flex;
  gap: 8px;
}

.phone-fields input:first-child {
  width: 80px;
  text-align: center;
}

.phone-fields input:last-child {
  flex: 1;
}

.selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.selected-item button {
  background: transparent;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  padding: 4px;
}

.dropdown-menu {
  display: block;
  max-height: 450px;
  overflow-y: auto;
  z-index: 10;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dropdown-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}

.date-time-fields {
  display: flex;
  gap: 16px;
}

.date-time-fields > div {
  flex: 1;
  margin-bottom: 0;
}

.variant-info {
  display: flex;
  flex-direction: column;
}

.variant-details {
  font-size: 0.85em;
  color: var(--text-muted);
}

.variant-stock {
  font-size: 0.8em;
  color: var(--color-primary);
  margin-top: 4px;
}

.variant-stock span {
  color: var(--text-muted);
  margin-left: 4px;
}

/* Fix for scanner button in NewOrderModal */
.cart-form-dropdown-wrapper .cart-form-input {
  padding-right: 44px; /* Make room for the absolute button */
}

.scanner-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scanner-btn:hover {
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .new-order-modal-content {
    height: 94dvh !important;
    max-height: calc(100dvh - 12px) !important;
    width: 96% !important;
    max-width: 96% !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .new-order-modal-header {
    padding: 12px 14px !important;
  }
  .new-order-modal-header h2 {
    font-size: 15px !important;
  }
  .new-order-modal-icon-badge {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }
  .new-order-modal-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
  .new-order-modal-body {
    flex-direction: column !important;
    padding: 10px 10px 16px 10px !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .new-order-left-panel {
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .new-order-left-panel,
  .new-order-right-panel {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .new-order-right-panel {
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    padding: 4px 0 0 0 !important;
    margin-top: 0 !important;
    box-shadow: none !important;
    height: auto !important;
  }
  .new-order-summary-title {
    margin: 4px 0 8px 0 !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .cart-items-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }
  .summary-product-item-flat {
    padding: 9px 10px !important;
    border-radius: 8px !important;
  }
  .summary-discount-condition-hint {
    padding: 6px 8px !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .summary-discount-condition-text {
    min-width: 0 !important;
    font-size: 11px !important;
  }
  .summary-discount-action-btn {
    font-size: 10.5px !important;
    padding: 3px 7px !important;
  }
  .new-order-totals-section {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
  .delivery-card {
    padding: 0 !important;
  }
  .delivery-card:not(:first-child) {
    padding-top: 16px !important;
  }
  .guest-fields {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .date-time-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .delivery-type-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
  }
  .delivery-type-tabs .tab-btn {
    flex: 1 1 calc(50% - 6px) !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
  }
  .customer-type-tabs {
    grid-template-columns: 1fr 1fr !important;
    gap: 3px !important;
  }
  .customer-type-tabs .tab-btn {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 12.5px !important;
    padding: 0 8px !important;
  }
}

/* PAYMENT MODAL FOOTER RESPONSIVE STYLES */
.payment-modal-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.payment-modal-footer-actions {
  display: flex;
  gap: 12px;
}

.btn-share {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-cancel-payment {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-confirm-payment {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  background: var(--color-success);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 768px) {
  .payment-modal-footer {
    flex-direction: column-reverse;
  }
  .payment-modal-footer-actions {
    flex-direction: column-reverse;
    width: 100%;
  }
  .payment-modal-footer button {
    width: 100%;
    justify-content: center;
  }
}

.discount-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

@media (max-width: 400px) {
  .discount-input-row {
    flex-direction: column;
  }
}

.bubble-status-requested {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 6px solid #64748b;
}
.bubble-status-reserved {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 6px solid #3b82f6;
}
.bubble-status-preparing {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 6px solid #f97316;
}
.bubble-status-ready_for_pickup {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 6px solid #8b5cf6;
}

.status-requested {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.2);
}
.status-reserved {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.status-preparing {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.2);
}
.status-ready_for_pickup {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

/* =========================================
   ORDERS KPI CARDS & RESPONSIVE LAYOUT
   ========================================= */
.orders-kpi-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
  width: 100%;
}

.orders-kpi-card {
  background: var(--bg-card);
  padding: 16px 16px 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-width: 0;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.35s ease;
}

.orders-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3.5px;
  border-radius: 14px 0 0 14px;
}

.orders-kpi-card.kpi-total::before     { background: #3b82f6; }
.orders-kpi-card.kpi-pending::before   { background: #f59e0b; }
.orders-kpi-card.kpi-completed::before { background: #10b981; }

.orders-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.orders-kpi-top {
  width: 100%;
  min-width: 0;
}

.orders-kpi-value {
  color: var(--text-main);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.3px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.orders-kpi-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.orders-kpi-icon-mini {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.orders-kpi-card.kpi-total .orders-kpi-icon-mini {
  background: rgba(59, 130, 246, 0.14);
  color: #3b82f6;
}

.orders-kpi-card.kpi-pending .orders-kpi-icon-mini {
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b;
}

.orders-kpi-card.kpi-completed .orders-kpi-icon-mini {
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
}

.orders-kpi-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* KPI Responsive - Mobile */
@media (max-width: 768px) {
  .orders-container {
    padding: 14px 12px;
  }

  .orders-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .orders-kpi-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .orders-kpi-card {
    padding: 12px 10px 10px 12px !important;
    gap: 6px !important;
  }

  .orders-kpi-card.kpi-total {
    grid-column: 1 / -1 !important;
  }

  .orders-kpi-value {
    font-size: 18px !important;
  }

  .orders-kpi-bottom {
    gap: 6px !important;
  }

  .orders-kpi-icon-mini {
    width: 20px !important;
    height: 20px !important;
    border-radius: 5px !important;
  }

  .orders-kpi-icon-mini svg {
    width: 12px !important;
    height: 12px !important;
  }

  .orders-kpi-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 480px) {
  .orders-container {
    padding: 12px 10px;
  }

  .orders-kpi-value {
    font-size: 16.5px !important;
  }

  .orders-kpi-label {
    font-size: 10.5px !important;
  }
}


.date-picker-wrapper { display: block; width: 100%; }
.date-picker-wrapper .form-control { width: 100%; padding-left: 36px !important; box-sizing: border-box; }
.react-datepicker { font-family: inherit; border: 1px solid var(--border-color); background-color: var(--bg-card); }
.react-datepicker__header { background-color: var(--bg-input); border-bottom: 1px solid var(--border-color); }
.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header { color: var(--text-main); }
.react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name { color: var(--text-main); }
.react-datepicker__day:hover, .react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover, .react-datepicker__year-text:hover { background-color: var(--bg-input); }
.react-datepicker__day--selected, .react-datepicker__day--keyboard-selected { background-color: var(--color-primary); color: white; }
.react-datepicker-popper { z-index: 9999 !important; }
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item { color: var(--text-main); }
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover { background-color: var(--bg-input); }
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected { background-color: var(--color-primary); color: white; }

/* ==========================================================================
   ORDERS FILTERS PANEL & RESPONSIVE UX
   ========================================================================== */

.orders-filters-container {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.orders-filters-container-inner {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}

.orders-search-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
}

.orders-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.orders-search-input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  font-size: 14px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.orders-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

.orders-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.orders-filter-toggle-btn:hover {
  background: var(--bg-input);
  border-color: var(--border-color);
}

.orders-filter-toggle-btn.active {
  background: var(--color-primary);
  color: var(--color-primary-text, #ffffff);
  border-color: var(--color-primary);
}

.orders-filter-badge {
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.orders-filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  background: var(--bg-card);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  animation: fadeIn 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.orders-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.orders-filter-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.orders-filter-date-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  font-size: 13.5px;
  height: 42px;
  color-scheme: light dark;
  transition: all 0.2s ease;
}

.orders-filter-date-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

.orders-filter-actions {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.orders-filter-clear-btn {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
  color: var(--color-danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 13.5px;
  box-sizing: border-box;
}

.orders-filter-clear-btn:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: var(--color-danger, #ef4444);
}

@media (max-width: 860px) {
  .orders-filters-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
  }

  .orders-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .orders-filters-container-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .orders-filter-toggle-btn {
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
  }

  .orders-filters-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 12px;
  }

  .orders-filter-actions {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  .orders-filter-clear-btn {
    width: 100%;
  }
}

/* ==========================================================================
   DELIVERY DETAILS MODAL (3-Dots Menu, Touch Scroll, Single-Row Footer)
   ========================================================================== */
.delivery-details-modal-content {
  display: flex !important;
  flex-direction: column !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 16px !important;
  background: var(--bg-card) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
}

.delivery-details-modal-header {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 16px 54px 14px 18px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid var(--border-color) !important;
  flex-shrink: 0 !important;
}

.delivery-details-modal-header > div:last-child,
.delivery-header-actions {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: auto !important;
  margin-top: 0 !important;
  z-index: 25 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.delivery-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}

.delivery-header-info .modal-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.25 !important;
}

.delivery-header-info span {
  line-height: 1.35 !important;
}

.delivery-menu-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.delivery-menu-btn:hover {
  background: rgba(125, 125, 125, 0.15) !important;
  color: var(--text-main) !important;
}

.delivery-menu-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1050 !important;
  background: transparent !important;
}

.delivery-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  width: 215px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
  padding: 6px !important;
  z-index: 1060 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  animation: fadeIn 0.15s ease-out;
}

.delivery-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 9px 12px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-main) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.delivery-dropdown-item:hover {
  background: var(--bg-input) !important;
  color: var(--color-primary, #6366f1) !important;
}

.delivery-dropdown-item.danger {
  color: #ef4444 !important;
}

.delivery-dropdown-item.danger:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #dc2626 !important;
}

.delivery-dropdown-divider {
  height: 1px !important;
  background: var(--border-color) !important;
  margin: 4px 0 !important;
}

/* Modal Body Touch Scrolling Fix */
.delivery-details-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  padding: 0 !important;
}

/* Modal Footer Single Row Fix */
.delivery-details-modal-footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.delivery-btn-cerrar {
  flex: 0 0 auto !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--bg-input) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.2s ease !important;
}

.delivery-btn-cerrar:hover {
  background: var(--border-color) !important;
}

.delivery-btn-whatsapp {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: #25D366 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: opacity 0.2s ease, transform 0.1s ease !important;
}

.delivery-btn-whatsapp:hover {
  opacity: 0.9 !important;
}

.delivery-footer-status-wrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.delivery-btn-marcar {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.delivery-btn-marcar.info-missing {
  background: #eab308 !important;
}

.delivery-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.delivery-status-pill.status-completed {
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--color-success, #10b981) !important;
}

.delivery-status-pill.status-cancelled {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
}

@media (max-width: 768px) {
  .delivery-details-modal-header {
    padding: 12px 46px 10px 14px !important;
  }
  .delivery-header-info .modal-title {
    font-size: 14.5px !important;
  }
  .delivery-details-modal-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding: 10px 8px !important;
    gap: 5px !important;
  }
  .delivery-btn-cerrar {
    padding: 8px 8px !important;
    font-size: 12px !important;
  }
  .delivery-btn-whatsapp {
    padding: 8px 8px !important;
    font-size: 12px !important;
  }
  .delivery-btn-marcar {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  .delivery-status-pill {
    padding: 6px 8px !important;
    font-size: 11.5px !important;
  }
}


/* ==========================================================================
   AUTOMATIC DISCOUNTS IN NEW ORDER MODAL (FLAT & RESPONSIVE)
   ========================================================================== */
.variant-price-original {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
  white-space: nowrap;
}

.variant-price-discounted {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-success, #10b981);
  white-space: nowrap;
}

.variant-discount-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.variant-discount-pill.direct {
  background: rgba(16, 185, 129, 0.14);
  color: var(--color-success, #10b981);
}

.variant-discount-pill.conditional {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}

.variant-discount-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
  margin-bottom: 2px;
}

.variant-condition-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(125, 125, 125, 0.1);
  color: var(--text-muted);
}

.variant-condition-tag.customer {
  background: rgba(99, 102, 241, 0.1);
  color: var(--color-primary, #6366f1);
}

.variant-condition-tag.branch {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
}

.step1-customer-context-flat {
  margin-top: 5px;
  padding: 0;
  border: none !important;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.step1-customer-context-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100%;
}

.step1-customer-context-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.step1-customer-context-label strong {
  color: var(--text-main);
  font-weight: 600;
}

.step1-customer-context-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.step1-customer-pill {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.step1-customer-pill.active {
  background: var(--text-main, #0f172a);
  border-color: var(--text-main, #0f172a);
  color: #ffffff;
}

.step1-customer-search-input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  background-color: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  border-radius: 6px !important;
  color: var(--text-main, #1e293b) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.step1-customer-search-input:focus {
  outline: none !important;
  border-color: var(--text-main, #0f172a) !important;
  background-color: var(--bg-card, #ffffff) !important;
}

.step1-customer-search-input::-moz-placeholder {
  color: var(--text-muted, #94a3b8) !important;
}

.step1-customer-search-input::placeholder {
  color: var(--text-muted, #94a3b8) !important;
}

.step1-customer-search-box input {
  background-color: var(--bg-card, #ffffff) !important;
  color: var(--text-main, #1e293b) !important;
}

.new-order-modal .form-control:not(.step1-customer-search-input) {
  background-color: var(--bg-card, #ffffff);
  color: var(--text-main);
}

.summary-product-price-stack {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.summary-product-original-price {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 500;
  white-space: nowrap;
}

.summary-product-price.is-discounted {
  color: var(--color-success, #10b981);
}

.summary-discount-applied-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-success, #10b981);
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 7px;
  border-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
}

.summary-discount-condition-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--bg-main, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
}

.summary-discount-condition-text {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 160px;
  line-height: 1.4;
  color: var(--text-muted, #64748b);
}

.summary-discount-condition-text svg {
  color: var(--text-muted, #94a3b8);
  flex-shrink: 0;
}

.summary-discount-condition-text strong {
  color: var(--text-main, #0f172a);
  font-weight: 600;
}

.summary-discount-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3.5px 9px;
  border-radius: 5px;
  border: 1px solid var(--border-color, #cbd5e1);
  background: var(--bg-card, #ffffff);
  color: var(--text-main, #0f172a);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.summary-discount-action-btn:hover {
  background: var(--bg-hover, #f1f5f9);
  border-color: var(--text-muted, #94a3b8);
  color: var(--text-main, #000000);
}

/* ==========================================================================
   BUNDLE INTEGRATION STYLES (NEW ORDER & EDIT ORDER MODALS)
   ========================================================================== */

/* Header selection between Products and Bundles */
.catalog-selection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  width: 100%;
}

.catalog-selection-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main, #111827);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-catalog-title {
  display: none;
}

@media (max-width: 640px) {
  .desktop-catalog-title {
    display: none;
  }
  .mobile-catalog-title {
    display: inline;
  }
}

/* Segmented tabs: Productos vs Conjuntos */
.new-order-type-tabs {
  display: inline-flex;
  align-items: center;
  background: var(--bg-hover, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}

.new-order-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.new-order-tab-btn:hover {
  color: var(--text-main);
}

.new-order-tab-btn.active {
  background: var(--bg-card, #ffffff);
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Bundles Grid in Step 1 */
.bundles-catalog-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bundles-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

.bundle-catalog-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
  gap: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 84px;
  box-sizing: border-box;
}

.bundle-catalog-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.bundle-card-img-wrapper {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 8px;
  background: var(--bg-hover, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.bundle-card-img-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.bundle-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding: 0;
}

.bundle-card-top-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bundle-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.bundle-card-components-text {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bundle-card-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-color);
  width: 100%;
}

.bundle-card-price-row .bundle-price {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--color-primary);
  white-space: nowrap;
}

.bundle-card-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: #111827;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.bundle-card-action-btn:hover {
  background: #1f2937;
}

/* ==========================================================================
   CONFIGURE BUNDLE MODAL
   ========================================================================== */
.bundle-config-modal-content {
  max-width: 680px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: var(--bg-card, #ffffff) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
}

.bundle-config-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--border-color) !important;
  background: var(--bg-card, #ffffff) !important;
  flex-shrink: 0 !important;
}

.bundle-config-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding-right: 12px;
}

.bundle-config-header-img {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-hover, #f3f4f6);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bundle-config-header-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.bundle-config-placeholder-img {
  color: var(--text-muted);
}

.bundle-config-header-text {
  flex: 1;
  min-width: 0;
}

.bundle-config-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bundle-config-subtitle {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 2px 0 0 0;
  line-height: 1.25;
}

.bundle-config-close-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  border: none;
  background: var(--bg-hover, #f1f5f9);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.bundle-config-close-btn:hover {
  background: #e2e8f0;
  color: var(--text-main);
}

.bundle-config-body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.bundle-config-qty-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-hover, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.bundle-config-qty-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bundle-config-qty-label .title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.bundle-config-qty-label .desc {
  font-size: 11.5px;
  color: var(--text-muted);
}

.bundle-stepper {
  background: var(--bg-card, #ffffff);
}

.bundle-qty-val {
  font-size: 14px !important;
  font-weight: 700 !important;
  min-width: 32px !important;
  text-align: center;
}

.bundle-config-components-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bundle-config-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 0;
}

.bundle-config-loading,
.bundle-config-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* Individual Component Card (Flat, no bulky nesting) */
.bundle-component-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: border-color 0.15s ease;
}

.bundle-component-card.has-stock-warning {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.015);
}

.bundle-component-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bundle-component-img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-hover, #f3f4f6);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bundle-component-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.bundle-component-img-fallback {
  color: var(--text-muted);
}

.bundle-component-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bundle-component-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.bundle-component-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  display: block;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}

.bundle-component-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.bundle-component-type-tag.tag-fixed {
  background: var(--bg-hover, #f3f4f6);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.bundle-component-type-tag.tag-flexible {
  background: rgba(99, 102, 241, 0.1);
  color: var(--color-primary);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.bundle-component-qty-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.bundle-component-per-bundle {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.8;
}

.bundle-component-sku {
  margin-left: auto;
  font-family: monospace;
  font-size: 11px;
}

/* Controls Grid */
.bundle-component-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .bundle-component-controls {
    grid-template-columns: 1fr;
  }
}

.bundle-control-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.bundle-control-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bundle-fixed-variant-box {
  padding: 8px 12px;
  background: var(--bg-hover, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 42px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.bundle-fixed-sku {
  font-weight: 700;
  color: var(--text-main);
  font-family: monospace;
}

.bundle-fixed-desc {
  font-size: 11.5px;
  color: var(--text-muted);
}

.bundle-fixed-stock {
  font-size: 10.5px;
  color: var(--color-primary);
}

.bundle-stock-alert {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.08);
  border-left: 2.5px solid var(--color-danger);
  font-size: 11.5px;
  color: var(--color-danger);
  font-weight: 500;
}

/* Footer / Summary */
.bundle-config-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--bg-card, #ffffff);
  border-top: 1px solid var(--border-color);
  gap: 16px;
  flex-shrink: 0;
}

.bundle-config-price-summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bundle-price-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bundle-price-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.bundle-price-values {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.bundle-original-price {
  font-size: 12.5px;
  text-decoration: line-through;
  color: var(--text-muted);
}

.bundle-final-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary, #111827);
}

.bundle-savings-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.bundle-config-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.bundle-cancel-btn,
.bundle-add-btn {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.bundle-cancel-btn {
  padding: 0 18px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card, #ffffff) !important;
  color: var(--text-main, #334155) !important;
  flex: 0 0 auto !important;
}

.bundle-cancel-btn:hover {
  background: var(--bg-hover, #f1f5f9) !important;
  border-color: #cbd5e1 !important;
}

.bundle-add-btn {
  padding: 0 20px !important;
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  gap: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.bundle-add-btn:hover:not(:disabled) {
  background: #000000 !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
}

.bundle-add-btn:disabled {
  background: #d1d5db !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* ==========================================================================
   BUNDLE DISPLAY IN SUMMARY (RIGHT PANEL)
   ========================================================================== */
.summary-bundle-group-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.summary-bundle-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  width: 100%;
  box-sizing: border-box;
}

.summary-bundle-title-col {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.summary-bundle-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--text-main, #0f172a);
  color: #ffffff;
  padding: 1.5px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.summary-bundle-header-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-bundle-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.summary-bundle-total-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main, #0f172a);
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.summary-bundle-remove-btn {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.summary-bundle-remove-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Flatten items inside a bundle: NO box-inside-box */
.summary-bundle-group-card .summary-product-item-flat.is-in-bundle {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px dashed var(--border-color, #e2e8f0) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}

.summary-bundle-group-card .summary-product-item-flat.is-in-bundle:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.summary-bundle-item-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  background: var(--bg-hover, #f1f5f9);
  color: var(--text-muted, #64748b);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   RESPONSIVE OPTIMIZATIONS FOR MOBILE (MOBILE-FIRST)
   ========================================================================== */
@media (max-width: 640px) {
  /* Catalog Selection Header in Mobile */
  .catalog-selection-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
  }

  .catalog-selection-title {
    font-size: 11.5px;
    letter-spacing: 0.3px;
  }

  .new-order-type-tabs {
    padding: 2px;
    gap: 2px;
  }

  .new-order-tab-btn {
    padding: 4px 8px;
    font-size: 11px;
    gap: 4px;
  }

  /* 1-column layout for horizontal cards on mobile so they don't get squashed */
  .bundles-cards-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 380px;
  }

  .bundle-catalog-card {
    min-height: 74px;
    padding: 8px 10px;
    gap: 10px;
  }

  .bundle-card-img-wrapper {
    width: 60px;
    min-width: 60px;
    height: 60px;
    border-radius: 6px;
  }

  .bundle-card-content {
    padding: 0;
    gap: 3px;
  }

  .bundle-card-title {
    font-size: 12.5px;
    line-height: 1.2;
  }

  .bundle-card-components-text {
    font-size: 11px;
  }

  .bundle-card-price-row .bundle-price {
    font-size: 13.5px;
  }

  .bundle-card-action-btn {
    padding: 4px 9px;
    font-size: 11px;
  }

  /* Configure Bundle Modal in Mobile */
  .bundle-config-modal-content {
    width: 96% !important;
    max-height: 94dvh !important;
    border-radius: 12px !important;
    margin: 8px auto !important;
  }

  .bundle-config-header {
    padding: 10px 14px;
  }

  .bundle-config-header-img {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .bundle-config-title-row h2 {
    font-size: 14.5px;
  }

  .bundle-config-subtitle {
    font-size: 11px;
    line-height: 1.25;
  }

  .bundle-config-body {
    padding: 10px 12px;
    gap: 10px;
  }

  .bundle-config-qty-bar {
    padding: 8px 10px;
    gap: 8px;
  }

  .bundle-config-qty-label .title {
    font-size: 12.5px;
  }

  .bundle-config-qty-label .desc {
    display: none;
  }

  .bundle-component-card {
    padding: 8px 10px;
    gap: 8px;
  }

  .bundle-component-img {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .bundle-component-name {
    font-size: 12.5px;
  }

  .bundle-component-controls {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .bundle-config-footer {
    padding: 10px 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .bundle-config-price-summary {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
  }

  .bundle-final-price {
    font-size: 16px;
  }

  .bundle-config-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .bundle-cancel-btn,
  .bundle-add-btn {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }

  .bundle-cancel-btn {
    padding: 0 16px !important;
    flex: 0 0 auto !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card, #ffffff) !important;
  }

  .bundle-add-btn {
    flex: 1 1 auto !important;
    padding: 0 16px !important;
    gap: 6px !important;
    border: 1px solid transparent !important;
    background: #111827 !important;
    color: #ffffff !important;
  }
}

.products-container {
    padding: 20px;
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.products-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* KPI Cards */
.returns-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.returns-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.returns-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.returns-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3.5px;
    background: var(--color-primary);
}

.returns-kpi-card.kpi-total::before { background: #6366f1; }
.returns-kpi-card.kpi-pending::before { background: #f59e0b; }
.returns-kpi-card.kpi-refunded::before { background: #10b981; }
.returns-kpi-card.kpi-rate::before { background: #3b82f6; }

.returns-kpi-top {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.returns-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    word-break: break-word;
    white-space: normal;
}

.returns-kpi-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.returns-kpi-icon-mini {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.returns-kpi-card.kpi-total .returns-kpi-icon-mini {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.returns-kpi-card.kpi-pending .returns-kpi-icon-mini {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.returns-kpi-card.kpi-refunded .returns-kpi-icon-mini {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.returns-kpi-card.kpi-rate .returns-kpi-icon-mini {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.returns-kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
}

.metrics-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.metric-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-content {
    flex: 1;
}

.metric-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
}

.filters-container {
    margin-bottom: 20px;
}

.filters-container-inner {
    display: flex;
    gap: 12px;
    transition: margin-bottom 0.2s ease;
}

.filters-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    background: var(--bg-card);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    animation: fadeIn 0.2s ease;
}

.table-container {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow-x: auto;
}

.products-table {
    width: 100%;
    border-collapse: collapse;
}

.products-table th {
    background: var(--bg-input);
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.products-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 14px;
}

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

.products-table tbody tr:hover {
    background: var(--bg-input);
}

.status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-pending {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
}

.status-inspection {
    background: rgba(33, 150, 243, 0.1);
    color: #2196f3;
}

.status-approved {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
}

.status-rejected {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
}

.btn-view {
    background: transparent;
    border: none;
    color: #2196f3;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: 0.2s;
}

.btn-view:hover {
    background: rgba(33, 150, 243, 0.1);
}

.loading-state {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* MOBILE TABLE ACTIONS DROPDOWN */
@media (max-width: 768px) {
  .actions-col {
    display: none !important;
  }
  .hide-on-pc {
    display: block !important;
  }
  .hide-on-mobile {
    display: none !important;
  }
  
  .returns-kpi-grid,
  .metrics-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px;
  }

  .returns-kpi-card {
    padding: 12px 10px 10px 12px;
    gap: 6px;
    border-radius: 10px;
  }

  .returns-kpi-value {
    font-size: 16px;
  }

  .returns-kpi-bottom {
    gap: 6px;
  }

  .returns-kpi-icon-mini {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }

  .returns-kpi-icon-mini svg {
    width: 12px;
    height: 12px;
  }

  .returns-kpi-label {
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
  }
}

/* DESKTOP HIDE ACTIONS DROPDOWN */
@media (min-width: 769px) {
  .hide-on-pc {
    display: none !important;
  }
}

/* DROPDOWN STYLING */
.mobile-actions-dropdown {
  position: relative;
}
.dropdown-toggle {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 50;
  min-width: 140px;
  padding: 4px;
}
.mobile-actions-dropdown:focus-within .dropdown-content,
.mobile-actions-dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}
.dropdown-item:hover {
  background: var(--bg-input);
  color: var(--color-primary);
}




.returns-table:focus-within { overflow: visible !important; }

/* ==========================================================================
   RETURNS FILTERS PANEL & RESPONSIVE UX
   ========================================================================== */

.returns-filters-container {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.returns-filters-container-inner {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}

.returns-search-wrapper {
  flex: 1;
  position: relative;
  min-width: 0;
}

.returns-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.returns-search-input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  outline: none;
  font-size: 14px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.returns-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

.returns-filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.returns-filter-toggle-btn:hover {
  background: var(--bg-input);
  border-color: var(--border-color);
}

.returns-filter-toggle-btn.active {
  background: var(--color-primary);
  color: var(--color-primary-text, #ffffff);
  border-color: var(--color-primary);
}

.returns-filter-badge {
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.returns-filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  background: var(--bg-card);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  animation: fadeIn 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.returns-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.returns-filter-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.returns-filter-date-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  font-size: 13.5px;
  height: 42px;
  color-scheme: light dark;
  transition: all 0.2s ease;
}

.returns-filter-date-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

.returns-filter-actions {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.returns-filter-clear-btn {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
  color: var(--color-danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 13.5px;
  box-sizing: border-box;
}

.returns-filter-clear-btn:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: var(--color-danger, #ef4444);
}

@media (max-width: 860px) {
  .returns-filters-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
  }

  .returns-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .returns-filters-container-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .returns-filter-toggle-btn {
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
  }

  .returns-filters-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 12px;
  }

  .returns-filter-actions {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  .returns-filter-clear-btn {
    width: 100%;
  }
}


.cashflow-container {
    padding: 20px;
    position: relative;
}

.cashflow-header {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cashflow-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--text-main) 0%, var(--text-muted) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cashflow-title svg {
    -webkit-text-fill-color: var(--color-primary);
}

.cashflow-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
    margin: 0;
}

.section-heading {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.treasury-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.treasury-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px var(--bg-overlay);
}

.treasury-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--bg-overlay);
    border-color: var(--color-primary);
}

.treasury-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.treasury-cash::before { background: #4caf50; }
.treasury-bank::before { background: #2196f3; }

.treasury-icon {
    position: absolute;
    top: 24px;
    right: 24px;
    opacity: 0.2;
}

.treasury-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.treasury-balance {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 20px;
    font-family: monospace;
}

.treasury-stats {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-muted);
}

.treasury-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value-pos { color: #4caf50; font-weight: 600; }
.stat-value-neg { color: #f44336; font-weight: 600; }

.wallets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

/* Premium Wallet Card Design */
.wallet-card {
    background: linear-gradient(135deg, #2b2b36 0%, #1e1e24 100%);
    border-radius: 20px;
    padding: 24px;
    color: #fff;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.wallet-card:hover {
    transform: translateY(-5px);
}

.wallet-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.wallet-chip {
    width: 40px;
    height: 30px;
    background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%);
    border-radius: 6px;
    margin-bottom: 20px;
    opacity: 0.8;
}

.wallet-owner {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
}

.wallet-balance {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 24px;
    font-family: monospace;
    letter-spacing: 1px;
}

.wallet-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.wallet-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
    border: none;
}

.btn-deposit {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
}

.btn-deposit:hover {
    background: rgba(76, 175, 80, 0.3);
}

.btn-withdraw {
    background: rgba(244, 67, 54, 0.2);
    color: #e57373;
}

.btn-withdraw:hover {
    background: rgba(244, 67, 54, 0.3);
}

.loading-state {
    padding: 60px;
    text-align: center;
    color: var(--text-muted);
}

.responsive-filters {
    display: flex;
    gap: 10px;
    align-items: center;
}

.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Prevent grid blowout */
.charts-grid > div, 
.wallets-grid > div, 
.treasury-grid > div,
.cashflow-container {
    min-width: 0;
}

@media (max-width: 768px) {
    .cashflow-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .responsive-filters {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .responsive-filters > div, .responsive-filters button {
        width: 100% !important;
    }
    .charts-grid {
        grid-template-columns: 1fr;
    }
    .treasury-grid {
        grid-template-columns: 1fr;
    }
    .wallets-grid {
        grid-template-columns: 1fr;
    }
}


.react-datepicker-wrapper { width: 100%; }
.finance-reports {
    padding: 24px;
    background-color: var(--bg-main);
    min-height: 100%;
}

.reports-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
}

.reports-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.reports-header p {
    color: var(--text-muted);
    margin: 0;
}

.reports-filters {
    display: flex;
    gap: 12px;
    align-items: center;
}

.date-picker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.date-picker-input {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 10px 16px 10px 40px;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    width: 260px;
}

.date-picker-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    pointer-events: none;
}

/* KPI Cards */
.reports-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.reports-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reports-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.reports-kpi-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3.5px;
    background: var(--color-primary);
}

.reports-kpi-card.kpi-sales::before { background: #10b981; }
.reports-kpi-card.kpi-expenses::before { background: #ef4444; }
.reports-kpi-card.kpi-profit::before { background: #6366f1; }
.reports-kpi-card.kpi-margin::before { background: #8b5cf6; }

.reports-kpi-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.reports-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.15;
    word-break: break-word;
    white-space: normal;
}

.reports-kpi-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reports-kpi-icon-mini {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reports-kpi-card.kpi-sales .reports-kpi-icon-mini {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.reports-kpi-card.kpi-expenses .reports-kpi-icon-mini {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.reports-kpi-card.kpi-profit .reports-kpi-icon-mini {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.reports-kpi-card.kpi-margin .reports-kpi-icon-mini {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.reports-kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
}

/* Charts */
.chart-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.chart-card h3 {
    margin: 0 0 18px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.table-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.table-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.table-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.reports-table {
    width: 100%;
    border-collapse: collapse;
}

.reports-table th,
.reports-table td {
    padding: 12px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.reports-table th {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 13px;
    background-color: rgba(0,0,0,0.02);
}

.reports-table td {
    font-size: 14px;
    color: var(--text-main);
}

/* Prevent grid blowout */
.reports-kpi-grid > div,
.charts-grid > div,
.finance-reports {
    min-width: 0;
}
.charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.chart-scroll-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .finance-reports {
        padding: 12px;
    }
    .reports-header {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 16px;
    }
    .reports-filters {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .date-picker-input {
        width: 100% !important;
    }
    .reports-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 16px;
    }
    .reports-kpi-card {
        padding: 12px 10px 10px 12px;
        gap: 6px;
        border-radius: 10px;
    }
    .reports-kpi-value {
        font-size: 16px;
    }
    .reports-kpi-bottom {
        gap: 6px;
    }
    .reports-kpi-icon-mini {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }
    .reports-kpi-icon-mini svg {
        width: 12px;
        height: 12px;
    }
    .reports-kpi-label {
        font-size: 11px;
        white-space: normal;
        word-break: break-word;
        line-height: 1.2;
    }
    .charts-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .chart-card {
        padding: 14px 6px;
        border: none;
        box-shadow: none;
        background: var(--bg-card);
    }
    .chart-card h3 {
        margin: 0 0 12px 8px;
        font-size: 15px;
    }
}

.date-picker-wrapper .react-datepicker-wrapper { width: 100%; }
.checkout-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.checkout-modal-container {
  display: flex;
  background: var(--bg-card, #fff);
  border-radius: 24px;
  width: 100%;
  max-width: 900px;
  min-height: 550px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
  animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.checkout-modal-image {
  flex: 1;
  background-size: cover;
  background-position: center;
  position: relative;
  display: none;
}

.checkout-modal-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
}

@media (min-width: 768px) {
  .checkout-modal-image {
    display: block;
  }
}

.checkout-modal-content {
  flex: 1;
  padding: 40px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 450px;
  margin: 0 auto;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.checkout-modal-content::-webkit-scrollbar {
  width: 6px;
}
.checkout-modal-content::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.1);
  border-radius: 10px;
}

/* Floating labels */
.floating-input-group {
  position: relative;
  margin-bottom: 16px;
}

.floating-input-group .input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
  transition: color 0.3s ease;
  z-index: 1;
}

.floating-input {
  width: 100%;
  padding: 22px 16px 10px 44px;
  background: rgba(0,0,0,0.02);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  color: #111827;
  font-size: 15px;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-input:focus {
  border-color: var(--color-primary, #c9a227);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.1);
}

.floating-label {
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 15px;
  pointer-events: none;
  transition: all 0.2s ease-out;
}

.floating-input:not(:-moz-placeholder) ~ .floating-label {
  top: 14px;
  font-size: 11px;
  color: var(--color-primary, #c9a227);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
  top: 14px;
  font-size: 11px;
  color: var(--color-primary, #c9a227);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.floating-input-group:focus-within .input-icon {
  color: var(--color-primary, #c9a227);
}

/* Password Toggle */
.toggle-password-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.toggle-password-btn:hover {
  color: #4b5563;
}

/* Button hover */
.checkout-modal-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.checkout-modal-btn-primary {
  background: var(--color-primary, #111);
  color: var(--color-primary-text, #fff);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.checkout-modal-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.checkout-modal-btn-primary:active {
  transform: scale(0.98);
}

.checkout-modal-btn-google {
  background: transparent;
  border: 1px solid #e5e7eb;
  color: #111827;
}

.checkout-modal-btn-google:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* Dark mode overrides if needed */
.dark-theme .checkout-modal-container { background: #111827; }
.dark-theme .floating-input { background: rgba(255,255,255,0.03); border-color: #374151; color: #f3f4f6; }
.dark-theme .floating-input:focus { background: #111827; border-color: var(--color-primary); }
.dark-theme .checkout-modal-btn-google { border-color: #374151; color: #f3f4f6; }
.dark-theme .checkout-modal-btn-google:hover { background: #1f2937; border-color: #4b5563; }
.dark-theme .checkout-modal-content::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.1); }

@media (max-width: 600px) {
  .checkout-modal-content {
    padding: 24px 20px;
  }
  .checkout-modal-overlay {
    padding: 16px;
  }
  .checkout-modal-container {
    min-height: auto;
  }
}
/* =========================================
   LAYOUT WRAPPER
========================================= */
.shop-layout-wrapper {
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Poppins", sans-serif;
}

.shop-main-content {
  flex-grow: 1;
  padding-top: 70px; /* Offset for fixed header */
}

/* =========================================
   HEADER (Adaptado al Tema Claro)
========================================= */
.shop-nav-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
}

.shop-nav-container {
  height: 100%;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shop-nav-logo a {
  text-decoration: none;
  color: var(--text-main);
}

.shop-nav-menu {
  display: flex;
  align-items: center;
  gap: 30px;
}

.shop-nav-menu a {
  text-decoration: none;
  color: var(--text-main);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
}

.shop-nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 1px;
  background: var(--color-primary);
  transition: 0.25s;
}

.shop-nav-menu a:hover::after,
.shop-nav-menu a.active::after {
  width: 100%;
}

.shop-nav-menu a:hover,
.shop-nav-menu a.active {
  color: var(--color-primary);
}

.shop-nav-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* CART BUTTON */
.shop-nav-cart-btn {
  color: var(--text-main);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: color 0.3s;
}

.shop-nav-cart-btn:hover {
  color: var(--color-primary);
}

.cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  padding: 2px 6px;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cart-badge.bounce {
  transform: scale(1.5);
}

/* AUTH BUTTONS */
.shop-nav-desktop-auth {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shop-nav-btn {
  position: relative;
  overflow: hidden;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .3s ease;
}

/* LOGIN */
.shop-nav-btn-outline {
  color: var(--text-main);
  border: 1px solid var(--border-color);
  background: var(--bg-main);
}

.shop-nav-btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* REGISTER */
.shop-nav-btn-solid {
  color: var(--color-primary-text) !important;
  background: var(--color-primary);
  box-shadow: 0 4px 15px var(--bg-overlay);
}

.shop-nav-btn-solid:hover {
  transform: translateY(-2px);
  background: var(--color-primary-hover);
}

.shop-nav-btn-solid:active,
.shop-nav-btn-outline:active {
  transform: scale(.97);
}

/* USER */
.shop-nav-user {
  position: relative;
}

.shop-nav-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.shop-nav-avatar-btn:hover {
  transform: scale(1.05);
}

.shop-nav-avatar,
.shop-nav-avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}

.shop-nav-avatar {
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--border-color);
}

.shop-nav-avatar-fallback {
  background: #e4e4e7;
  color: #18181b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* DROPDOWN USER CARD */
.shop-nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
  z-index: 2500;
  animation: shopNavDropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top right;
  box-sizing: border-box;
}

@keyframes shopNavDropdownFade {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* CABECERA DEL DROPDOWN */
.shop-nav-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-secondary, #f4f4f5);
  border-radius: 12px;
  margin-bottom: 4px;
}

.shop-nav-dropdown-avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-card, #e4e4e7);
  color: var(--text-main, #18181b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.shop-nav-dropdown-avatar-sm img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.shop-nav-dropdown-user-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  text-align: left;
}

.shop-nav-dropdown-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main, #18181b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-nav-dropdown-email {
  font-size: 11.5px;
  color: var(--text-muted, #71717a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* DIVIDER */
.shop-nav-dropdown-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--border-color, rgba(0, 0, 0, 0.08));
}

/* MENU CONTAINER */
.shop-nav-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ITEMS */
.shop-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-main, #27272a);
  text-decoration: none;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  min-height: 42px;
  box-sizing: border-box;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.shop-nav-dropdown-item:hover {
  background: var(--color-secondary, #f4f4f5);
  color: var(--text-main, #09090b);
  transform: translateX(2px);
}

.shop-nav-dropdown-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary, #f4f4f5);
  color: var(--text-muted, #52525b);
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.shop-nav-dropdown-item:hover .shop-nav-dropdown-icon {
  background: var(--border-color, #e4e4e7);
  color: var(--text-main, #18181b);
}

.shop-nav-dropdown-text {
  flex: 1;
  letter-spacing: -0.01em;
}

.shop-nav-dropdown-arrow {
  color: var(--text-muted, #a1a1aa);
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.shop-nav-dropdown-item:hover .shop-nav-dropdown-arrow {
  color: var(--text-main, #18181b);
  transform: translateX(3px);
}

/* LOGOUT BUTTON */
.shop-nav-dropdown-item-logout {
  color: #ef4444;
  margin-top: 2px;
}

.shop-nav-dropdown-icon-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.shop-nav-dropdown-item-logout:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  transform: translateX(2px);
}

.shop-nav-dropdown-item-logout:hover .shop-nav-dropdown-icon-danger {
  background: rgba(239, 68, 68, 0.18);
  color: #b91c1c;
}

/* MOBILE AUTH */
.shop-nav-mobile-auth,
.shop-nav-mobile-user {
  display: none;
}

/* HAMBURGER */
.shop-hamburger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.shop-hamburger span {
  width: 20px;
  height: 2px;
  background: var(--text-main);
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1024px) {
  .shop-nav-container {
    padding: 0 20px;
  }

  .shop-hamburger {
    display: flex;
    z-index: 2000;
  }

  .shop-nav-desktop-auth {
    display: none;
  }

  .shop-nav-mobile-overlay {
    display: block;
    position: fixed;
    inset: 70px 0 0 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 900;
  }

  .shop-nav-menu {
    position: fixed;
    z-index: 901;
    top: 70px;
    right: -100%;
    width: 75%;
    max-width: 350px;
    height: calc(100vh - 70px);
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 20px;
    transition: 0.3s ease;
  }

  .shop-nav-menu.active {
    right: 0;
  }

  .shop-nav-mobile-auth {
    width: 100%;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .shop-nav-mobile-user {
    width: 100%;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .shop-nav-mobile-user-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    background: transparent;
    border: none;
  }

  .shop-nav-avatar-wrapper {
    position: relative;
  }

  .shop-nav-avatar,
  .shop-nav-avatar-fallback {
    width: 38px;
    height: 38px;
    font-size: 13px;
    box-shadow: none;
  }

  .shop-nav-mobile-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .shop-nav-mobile-username {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .shop-nav-mobile-view-profile {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
  }

  .shop-nav-mobile-user-links {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
  }

  .shop-nav-mobile-user-links a,
  .shop-nav-mobile-user-links button {
    display: block;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    padding: 0 !important;
    border-radius: 0;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s;
  }

  .shop-nav-mobile-user-links a:active,
  .shop-nav-mobile-user-links button:active {
    background: transparent;
    color: var(--color-primary) !important;
  }

  .shop-nav-mobile-logout {
    color: var(--text-muted) !important;
  }

  .shop-nav-user {
    display: none;
  }
}
/* ============================================
   SHOP HOME — COLLAGE GRID
============================================ */

/* ═══════════════════════════════════════════
   BASE
═══════════════════════════════════════════ */

.shop-home {
  background-color: var(--bg-main);
  min-height: 100vh;
}

/* ── Loading ── */
.shop-home-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  background-color: var(--bg-main);
}

.shop-home-loader {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-color);
  border-top-color: var(--text-main);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

/* ── Hero ── */
.shop-home-hero {
  text-align: center;
  padding: 60px 20px 40px;
  background-color: var(--bg-main);
}

.shop-home-title {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 4px;
  color: var(--text-main);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.shop-home-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 300;
  letter-spacing: 1px;
}

/* ── Botón CTA → catálogo ── */
.shop-home-catalog-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 11px 28px;
  border: 1px solid var(--text-main);
  color: var(--text-main);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease;
}

.shop-home-catalog-btn:hover {
  background: var(--text-main);
  color: var(--bg-main);
}

.shop-home-catalog-btn__arrow {
  font-size: 1rem;
  display: inline-block;
  transition: transform 0.25s ease;
}

.shop-home-catalog-btn:hover .shop-home-catalog-btn__arrow {
  transform: translateX(5px);
}

/* ═══════════════════════════════════════════
   COLLAGE GRID — BASE (Desktop 4 col)
═══════════════════════════════════════════ */

.shop-collage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 420px;
  grid-auto-flow: dense;
  gap: 4px;
  padding: 0 4px 4px;
}

/* ── Variantes de tamaño ── */
.shop-collage-large { grid-column: span 2; grid-row: span 2; }
.shop-collage-tall  { grid-row: span 2; }
.shop-collage-wide  { grid-column: span 2; }

/* ── Item ── */
.shop-collage-item {
  position: relative;
  overflow: hidden;
  display: block;
  cursor: pointer;
  background-color: #f0f0f0;
}

/* ── Imagen ── */
.shop-collage-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Overlay degradado (siempre visible) ── */
.shop-collage-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 58%,
    rgba(0, 0, 0, 0.62) 100%
  );
  display: flex;
  align-items: flex-end;
  padding: 28px 22px;
  z-index: 2;
}

.shop-collage-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.shop-collage-name {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.shop-collage-color {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: capitalize;
  font-weight: 300;
  letter-spacing: 0.5px;
}

/* ── "Explorar" — siempre visible ── */
.shop-collage-action {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 8px;
  display: block;    /* block para que ::after herede el ancho completo */
}

/* ── Línea deslizante ──
   Usamos scaleX en lugar de width: es GPU-acelerado
   y funciona en todos los navegadores / dispositivos.
   transform-origin: left → crece de izquierda a derecha.
── */
.shop-collage-action::after {
  content: '';
  display: block;
  height: 1px;
  background: #ffffff;
  margin-top: 5px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ═══════════════════════════════════════════
   EFECTO HOVER / TOUCH
   Desktop/tablet → :hover
   Móvil          → .is-touched (añadida por JS en touchstart)
═══════════════════════════════════════════ */

/* Zoom imagen */
.shop-collage-item:hover .shop-collage-img,
.shop-collage-item.is-touched .shop-collage-img {
  transform: scale(1.05);
}

/* ✨ Línea se despliega al pasar cursor o dedo */
.shop-collage-item:hover .shop-collage-action::after,
.shop-collage-item.is-touched .shop-collage-action::after {
  transform: scaleX(1);
}

/* ── Sentinel de lazy loading ── */
.shop-collage-sentinel {
  width: 100%;
  height: 1px;
  visibility: hidden;
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Tablet (769px – 1024px)
═══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .shop-collage-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 310px;
    gap: 3px;
  }

  .shop-home-hero {
    padding: 48px 20px 32px;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Móvil (≤ 768px)
   Patrón: [mini][mini] → [wide 2×2] → repeat
═══════════════════════════════════════════ */

@media (max-width: 768px) {

  .shop-home-hero {
    padding: 40px 16px 28px;
  }

  .shop-home-title {
    font-size: 1.4rem;
    letter-spacing: 3px;
  }

  .shop-home-subtitle {
    font-size: 0.82rem;
    letter-spacing: 0.5px;
  }

  .shop-home-catalog-btn {
    margin-top: 18px;
    padding: 10px 22px;
    font-size: 0.7rem;
    letter-spacing: 2px;
  }

  /* Grid 2 columnas */
  .shop-collage-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 210px;
    grid-auto-flow: dense;
    gap: 2px;
    padding: 0 2px 2px;
  }

  /* Wide = 2 cols × 2 filas */
  .shop-collage-wide { grid-column: span 2; grid-row: span 2; }
  .shop-collage-large { grid-column: span 1; grid-row: span 1; }
  .shop-collage-tall  { grid-row: span 1; }

  .shop-collage-overlay {
    padding: 12px 14px;
    background: linear-gradient(
      180deg,
      transparent 50%,
      rgba(0, 0, 0, 0.62) 100%
    );
  }

  .shop-collage-name  { font-size: 12px; letter-spacing: 0.5px; }
  .shop-collage-color { font-size: 11px; }

  .shop-collage-action {
    font-size: 10px;
    letter-spacing: 1.5px;
    margin-top: 4px;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Móvil pequeño (≤ 480px)
═══════════════════════════════════════════ */

@media (max-width: 480px) {

  .shop-home-hero {
    padding: 36px 14px 24px;
  }

  .shop-home-title {
    font-size: 1.2rem;
    letter-spacing: 2.5px;
  }

  .shop-home-subtitle {
    font-size: 0.78rem;
  }

  .shop-home-catalog-btn {
    margin-top: 14px;
    padding: 9px 18px;
    font-size: 0.68rem;
    letter-spacing: 1.8px;
    width: 100%;
    max-width: 260px;
    justify-content: center;
  }

  .shop-collage-grid {
    grid-auto-rows: 175px;
    gap: 2px;
  }

  .shop-collage-wide { grid-column: span 2; grid-row: span 2; }

  .shop-collage-overlay { padding: 10px 12px; }

  .shop-collage-name  { font-size: 11px; letter-spacing: 0.4px; }
  .shop-collage-color { display: none; }
}
.new-arrivals-section {
  padding: 40px 24px;
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

.new-arrivals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}

.new-arrivals-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.new-arrivals-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-main);
  margin: 0;
  text-transform: uppercase;
}

.new-arrivals-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

/* BOTÓN "VER TODO" REFINADO Y ERGONÓMICO */
.new-arrivals-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-main);
  text-decoration: none;
  letter-spacing: 1.2px;
  padding: 8px 18px;
  border-radius: 9999px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  min-height: 42px;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.new-arrivals-link:hover {
  background: var(--text-main);
  color: var(--bg-main);
  border-color: var(--text-main);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.new-arrivals-link:hover .new-arrivals-link-icon {
  transform: translateX(4px);
}

.new-arrivals-link-icon {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

/* CONTENEDOR DEL CARRUSEL Y FLECHAS FLOTANTES GLASSMORPHISM */
.new-arrivals-carousel-wrapper {
  position: relative;
  width: 100%;
}

.carousel-arrow-btn {
  position: absolute;
  top: 42%;
  transform: translateY(-50%) scale(1);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-main, #111827);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.shop-theme-dark .carousel-arrow-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 23, 42, 0.85);
  color: var(--text-main, #f8fafc);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.carousel-arrow-btn:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.08);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.shop-theme-dark .carousel-arrow-btn:hover:not(:disabled) {
  background: rgba(30, 41, 59, 0.98);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.carousel-arrow-btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.94);
}

.carousel-arrow-prev {
  left: 8px;
}

.carousel-arrow-next {
  right: 8px;
}

.carousel-arrow-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.85);
}

/* TRACK DEL CARRUSEL */
.new-arrivals-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding-bottom: 12px;
}

.new-arrivals-carousel::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.carousel-item {
  flex: 0 0 280px;
  scroll-snap-align: start;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.carousel-item-img-wrapper {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--bg-input);
  margin-bottom: 12px;
}

.carousel-item-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}

.carousel-item:hover .carousel-item-img {
  transform: scale(1.05);
}

.carousel-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.carousel-item-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-main);
  text-transform: uppercase;
}

.carousel-item-price {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* RESPONSIVE DESIGN - MOBILE FIRST (PANTALLAS PEQUEÑAS) */
@media (max-width: 640px) {
  .new-arrivals-section {
    padding: 28px 16px;
  }

  .new-arrivals-header {
    margin-bottom: 18px;
    gap: 12px;
  }

  .new-arrivals-title {
    font-size: 1.125rem;
    letter-spacing: 1.5px;
  }

  .new-arrivals-subtitle {
    font-size: 0.8rem;
  }

  .new-arrivals-link {
    font-size: 0.75rem;
    padding: 6px 14px;
    letter-spacing: 1px;
    min-height: 40px;
  }

  .carousel-item {
    flex: 0 0 260px;
  }

  .carousel-arrow-btn {
    width: 38px;
    height: 38px;
  }

  .carousel-arrow-prev {
    left: 4px;
  }

  .carousel-arrow-next {
    right: 4px;
  }
}
.shop-fc-section {
  padding: 60px 20px 40px;
  background-color: var(--bg-main);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.shop-fc-header {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.shop-fc-title {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 3px;
  color: var(--text-main);
  text-transform: uppercase;
}

.shop-fc-link {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 2px;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop-fc-link:hover {
  color: var(--text-main);
}

.shop-fc-grid {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.shop-fc-card {
  position: relative;
  text-decoration: none;
  overflow: hidden;
  border-radius: 12px;
  flex: 1 1 0;
  max-width: 230px;
  min-width: 0;
  aspect-ratio: 3/4;
  display: block;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.shop-fc-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}

.shop-fc-card:hover .shop-fc-image {
  transform: scale(1.05);
}

.shop-fc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.0) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 24px;
  transition: background 0.3s ease;
}

.shop-fc-card:hover .shop-fc-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
}

.shop-fc-name {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: center;
}

.shop-fc-btn {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.3s ease;
}

.shop-fc-card:hover .shop-fc-btn {
  color: #ffffff;
}

@media (max-width: 768px) {
  .shop-fc-grid {
    flex-wrap: wrap;
  }
  .shop-fc-card {
    flex: 0 1 calc(50% - 8px);
    max-width: none;
  }
}

@media (max-width: 480px) {
  .shop-fc-card {
    flex: 0 1 100%;
  }
}
/* ============================================================
   CATALOG — Diseño responsivo completo (Móvil / Tablet / PC)
   Breakpoints: ≤480px | ≤768px | ≤1024px | >1024px
============================================================ */

/* ── Base ── */
.catalog-container {
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* ── Animaciones ── */
@keyframes fadeIn {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);     max-height: 800px; }
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.catalog-grid-animate {
  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Custom Scrollbar (sidebar) ── */
.custom-scrollbar::-webkit-scrollbar       { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-muted);
}

/* ── Cabecera ── */
.catalog-header-border {
  border-bottom: 1px solid var(--border-color);
}

.catalog-title {
  color: var(--text-main);
}

/* ── Sidebar filtros ── */
.catalog-filter-list {
  border-bottom: 1px solid var(--border-color);
}

.catalog-filter-link {
  color: var(--text-muted);
  transition: color 0.2s ease;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  text-align: left;
  width: 100%;
}

.catalog-filter-link:hover {
  color: var(--color-primary, var(--text-main));
}

/* ── Tarjeta de producto ── */
.catalog-product-img-placeholder {
  background-color: var(--bg-input);
}

.catalog-product-title {
  color: var(--text-main);
}

.catalog-product-price {
  color: var(--text-main);
}

/* ── Variante card (panel expand) ── */
.catalog-variant-card {
  background: var(--bg-card, #fff);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color, #e5e5e5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.catalog-variant-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* =============================================================
   BREADCRUMB MÓVIL (solo visible en ≤768px)
   Aparece bajo el título "Catálogo"
============================================================= */

.catalog-header-breadcrumb {
  display: none; /* oculto en desktop — se activa en móvil */
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
  width: 100%;
  order: 0; /* aparece justo debajo del título */
}

.catalog-breadcrumb-sep {
  color: var(--text-muted);
  font-size: 11px;
  margin: 0 2px;
}

/* =============================================================
   HEADER DEL CATÁLOGO — Responsivo
   Título + controles (Filtros / Vista / Modo imagen)
============================================================= */

.catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
  padding-top: 96px; /* espacio para el nav fijo */
}

.catalog-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Botón "Filtros" (solo móvil) */
.catalog-btn-filters {
  display: none; /* oculto en desktop — visible en tablet/móvil */
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  transition: opacity 0.2s, color 0.2s;
  white-space: nowrap;
  gap: 8px;
}

.catalog-btn-filters:hover {
  opacity: 0.7;
}

.catalog-btn-filters:active {
  color: var(--text-muted);
}

/* Controles de vista (Por Prendas / Por Productos) */
.catalog-view-controls {
  display: flex;
  gap: 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* Controles de modo imagen (Presentación / Vívido) */
.catalog-image-controls {
  display: flex;
  gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--text-muted);
  align-items: center;
}

/* =============================================================
   GRID DE PRODUCTOS — Responsivo
   Desktop: 3 col  |  Tablet: 2 col  |  Móvil: 2 col pequeño
============================================================= */

.catalog-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width, 220px) 1fr;
  gap: var(--sidebar-gap, 40px);
  align-items: start;
  position: relative;
}

@media (max-width: 1024px) {
  .catalog-layout {
    grid-template-columns: 1fr;
  }
}

.catalog-products-grid {
  display: grid;
  grid-template-columns: repeat(var(--catalog-cols-desktop, 3), 1fr);
  gap: var(--catalog-grid-gap, 24px);
}

/* Modo "Por Productos" (expand panel) */
.catalog-products-rows {
  display: block;
}

.catalog-products-row {
  display: grid;
  grid-template-columns: repeat(var(--catalog-cols-desktop, 3), 1fr);
  gap: var(--catalog-grid-gap, 24px);
  margin-bottom: var(--catalog-grid-gap, 24px);
}

/* =============================================================
   TARJETA DE PRODUCTO — Responsivo
============================================================= */

.catalog-card-info {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.catalog-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0; /* evita overflow del texto */
}

.catalog-card-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-main);
  line-height: 1.4;
  margin: 0;
  /* Cortar texto largo en móvil */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.catalog-card-price-row {
  display: flex;
  align-items: baseline; /* alinea textos de distinto tamaño por línea base */
  gap: 6px;
  flex-wrap: nowrap;     /* nunca rompe la fila de precios */
  min-height: 22px;      /* altura fija para que no salten */
}

.catalog-card-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;   /* "Bs 147.25" siempre en una línea */
  transition: opacity 0.25s ease; /* cambio suave si actualiza */
}

.catalog-card-price-original {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}

/* ── Animación pop del botón "Agregar Rápido" ── */
@keyframes quickAddPop {
  0%   { transform: scale(1); }
  25%  { transform: scale(0.82); }
  60%  { transform: scale(1.22); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes quickAddCheck {
  0%   { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  60%  { opacity: 1; transform: scale(1.1) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Botón añadir rápido (icono bolsa) */
.catalog-card-add-btn {
  background: var(--bg-input, #f3f4f6);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-main);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.catalog-card-add-btn:hover {
  background: var(--text-main);
  color: white;
  border-color: var(--text-main);
}

.catalog-card-add-btn:active {
  background: var(--text-main);
  color: white;
}

/* Clase aplicada brevemente al hacer clic */
.catalog-card-add-btn.pop {
  animation: quickAddPop 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  background: var(--text-main);
  color: white;
  border-color: var(--text-main);
}

/* Ripple al click */
.catalog-card-add-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

.catalog-card-add-btn.pop::after {
  animation: ripple 0.4s ease-out forwards;
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Color swatches */
.catalog-swatches {
  display: flex;
  gap: 5px;
  margin-top: 4px;
  align-items: center;
  flex-wrap: wrap;
}

/* =============================================================
   PANEL EXPANDIBLE (Por Productos)
============================================================= */

.catalog-expand-panel {
  margin-bottom: 32px;
  background: var(--bg-card, #f0f0f0);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  animation: slideDown 0.3s ease-out;
}

/* =============================================================
   BOTÓN "CARGAR MÁS"
============================================================= */

.catalog-load-more-wrap {
  text-align: center;
  margin-top: 40px;
}

.catalog-load-more-btn {
  padding: 12px 32px;
  background: var(--bg-card, #f5f5f5);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-main);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}

.catalog-load-more-btn:hover,
.catalog-load-more-btn:active {
  background: var(--text-main);
  color: var(--bg-main);
}

.catalog-load-more-count {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

/* =============================================================
   OVERLAY DE FILTROS MÓVIL
============================================================= */

.catalog-mobile-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 49;
}

.catalog-mobile-filter-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 320px);
  background: var(--bg-main);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  animation: slideInRight 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.catalog-mobile-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.catalog-mobile-filter-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.catalog-mobile-filter-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.2s;
}

.catalog-mobile-filter-close:active {
  color: var(--text-main);
}

/* Inputs del filtro móvil */
.catalog-filter-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-input, #f9f9f9);
  color: var(--text-main);
  outline: none;
  transition: border-color 0.2s;
}

.catalog-filter-input:focus {
  border-color: var(--text-main);
}

/* =============================================================
   RESPONSIVE — Tablet (769px – 1024px)
============================================================= */

@media (max-width: 1024px) {

  .catalog-btn-filters {
    display: flex; /* visible en tablet */
    align-items: center;
    gap: 6px;
  }

  /* Ocultar sidebar — los filtros van en el panel deslizante */
  .catalog-sidebar {
    display: none !important;
  }

  /* El área de productos ocupa todo el ancho */
  .catalog-sidebar ~ div {
    grid-column: 1 / -1;
  }

  /* El layout vuelve a 1 columna */
  

  /* Grid de columnas en tablet */
  .catalog-products-grid,
  .catalog-products-row {
    grid-template-columns: repeat(var(--catalog-cols-tablet, 2), 1fr);
    gap: 16px;
  }

  .catalog-card-name {
    font-size: 13px;
  }

  .catalog-card-price {
    font-size: 14px;
  }

  .catalog-header {
    padding-top: 80px;
    gap: 10px;
  }

  .catalog-title {
    font-size: 2rem !important;
  }
}

/* =============================================================
   RESPONSIVE — Móvil (≤ 768px)
============================================================= */

@media (max-width: 768px) {

  .catalog-header {
    padding-top: 72px;
    padding-bottom: 0;
    gap: 6px;
    flex-direction: column;
    align-items: flex-start;
  }

  .catalog-title {
    font-size: 1.75rem !important;
    order: -2; /* siempre primero */
  }

  /* ── Breadcrumb: visible en móvil bajo el título ── */
  .catalog-header-breadcrumb {
    display: flex;
    order: -1; /* justo después del título */
    margin-bottom: 4px;
  }

  /* ── Controles: fila extremo a extremo ── */
  .catalog-controls {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; /* extremo a extremo */
    gap: 4px 0;
  }

  /* Línea 1: [Filtros] ←→ [Por Prendas | Por Productos] */
  .catalog-btn-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12px;
    order: 1;
    flex-shrink: 0;
  }

  .catalog-view-controls {
    gap: 10px;
    font-size: 11px;
    order: 2;
    flex-shrink: 0;
    margin-left: auto; /* empuja al extremo derecho */
  }

  /* Línea 2: [Presentación / Vívido] sola, ancho completo */
  .catalog-image-controls {
    gap: 8px;
    font-size: 10px;
    order: 3;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px solid var(--border-color);
    margin-top: 6px;
    justify-content: center;
  }

  /* Grid columnas en móvil, con gap más pequeño */
  .catalog-products-grid,
  .catalog-products-row {
    grid-template-columns: repeat(var(--catalog-cols-mobile, 2), 1fr);
    gap: 10px;
  }

  /* Info de producto más compacta */
  .catalog-card-info {
    margin-top: 8px;
    gap: 6px;
  }

  .catalog-card-name {
    font-size: 12px;
    -webkit-line-clamp: 2;
  }

  .catalog-card-price {
    font-size: 13px;
  }

  .catalog-card-price-original {
    font-size: 11px;
  }

  /* Botón añadir más pequeño pero aun accesible (min 32px) */
  .catalog-card-add-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  /* Swatches más pequeños en móvil */
  .catalog-swatches {
    gap: 4px;
  }

  /* Panel expand en móvil */
  .catalog-expand-panel {
    padding: 16px;
    border-radius: 8px;
  }

  /* Botón cargar más */
  .catalog-load-more-btn {
    width: 100%;
    padding: 13px 24px;
  }
}

/* =============================================================
   RESPONSIVE — Móvil pequeño (≤ 480px)
============================================================= */

@media (max-width: 480px) {

  .catalog-header {
    padding-top: 64px;
  }

  .catalog-title {
    font-size: 1.5rem !important;
  }

  /* Grid col compacto */
  .catalog-products-grid,
  .catalog-products-row {
    grid-template-columns: repeat(var(--catalog-cols-mobile, 2), 1fr);
    gap: 8px;
  }

  .catalog-card-info {
    margin-top: 6px;
    flex-direction: row; /* siempre en fila: texto izq, botón der */
    align-items: flex-start;
    gap: 6px;
  }

  .catalog-card-text {
    flex: 1;
    min-width: 0;
  }

  .catalog-card-name {
    font-size: 11px;
  }

  .catalog-card-price {
    font-size: 12px;
  }

  .catalog-card-price-original {
    font-size: 10px;
  }

  /* Botón: círculo compacto, NUNCA full-width */
  .catalog-card-add-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    flex-shrink: 0;
  }

  .catalog-view-controls {
    font-size: 10px;
    gap: 10px;
  }
}

/* Sidebar Sticky Behavior for PC */
@media (min-width: 1025px) {
  .catalog-view-controls {
    order: 2;
  }
  .catalog-image-controls {
    order: 1;
  }

  .catalog-sidebar {
    position: sticky;
    top: 100px;
    height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .catalog-sidebar::-webkit-scrollbar {
    width: 4px;
  }
  .catalog-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
  }
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}
/* ============================================================
   SHOP PRODUCT DETAIL — Diseño responsivo premium
   Breakpoints: <=480px | <=768px | <=1024px | >1024px
============================================================ */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes heartbeat {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.25); }
  50%  { transform: scale(1); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.product-wishlist-btn { transition: transform 0.15s ease, background-color 0.2s ease !important; }
.product-wishlist-btn:hover:not(:disabled) { transform: scale(1.15) !important; }
.product-wishlist-btn:active:not(:disabled) { transform: scale(0.88) !important; }
.product-wishlist-btn.in-wishlist { animation: heartbeat 0.35s ease; }

/* ===== PAGINA PRINCIPAL ===== */
.product-detail-page {
  background-color: var(--bg-main, #fff);
  min-height: 100vh;
  color: var(--text-main, #111827);
  padding-top: 0; /* Layout ya tiene offset de 70px para el nav */
}

/* Breadcrumbs */
.product-breadcrumb {
  max-width: 1200px;
  margin: 0 auto 32px auto; /* Más aire abajo hacia la imagen */
  padding: 16px 16px 0; /* Aire justo debajo del nav */
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6b7280);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.product-breadcrumb a { color: inherit; text-decoration: none; transition: color 0.2s; }
.product-breadcrumb a:hover { color: var(--text-main); }

/* ===== LAYOUT GRID ===== */
.product-detail-grid {
  display: flex;
  flex-direction: column;
  max-width: 1440px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .product-detail-grid { flex-direction: row; align-items: flex-start; }
}

/* ===== GALERIA ===== */
.product-gallery-wrapper {
  width: 100%;
  position: relative;
}
@media (min-width: 1024px) {
  .product-gallery-wrapper {
    width: 65%;
  }
  .product-gallery-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 24px 24px 48px;
  }
}

.product-gallery-item {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: #f7f7f7;
  overflow: hidden;
  position: relative;
}
.product-gallery-img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  transition: transform 0.4s ease;
  animation: fadeIn 0.4s ease-out;
}
.product-gallery-item:hover .product-gallery-img { transform: scale(1.02); }

/* Movil: carrusel swipeable horizontal elegante */
@media (max-width: 1023px) {
  .product-gallery-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .product-gallery-container::-webkit-scrollbar { display: none; }
  .product-gallery-item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: 4 / 5;
    min-height: 480px;
    max-height: 72vh;
  }
  .product-gallery-img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top center;
       object-position: top center;
  }
}

/* ===== INFO PANEL ===== */
.product-info-container {
  width: 100%;
  padding: 24px 20px 48px;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .product-info-container {
    width: 35%;
    position: sticky;
    top: 100px;
    padding: 0 48px 48px 24px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .product-info-container::-webkit-scrollbar { display: none; }
}

/* Botones de acción (Wishlist y Compartir) */
.product-action-icon-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.product-action-icon-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.product-action-icon-btn:active {
  transform: scale(0.92);
}

/* Tipografía de Producto */
.product-title {
  font-family: 'Bodoni Moda', serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-main, #111827);
}
.product-price-current {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main, #111827);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.product-price-original {
  font-size: 14px;
  color: #9ca3af;
  text-decoration: line-through;
  white-space: nowrap;
}
.product-discount-badge {
  background: transparent;
  color: #111827;
  border: 1px solid #111827;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Selector colores (Swatches) */
.color-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.color-btn {
  width: 48px;
  height: 62px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  padding: 0;
  background: #f9fafb;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  position: relative;
}
.color-btn:hover {
  border-color: #9ca3af;
  transform: translateY(-1px);
}
.color-btn.active {
  border: 2px solid #111827 !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transform: scale(1.02);
}
.color-btn img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Selector tallas */
.size-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.size-btn {
  height: 44px;
  min-width: 50px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.size-btn:hover:not(:disabled) {
  border-color: #111827;
  background: #fafafa;
}
.size-btn.active {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: #111827 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.size-btn:disabled {
  color: #9ca3af;
  background: #f9fafb;
  border-color: #e5e7eb;
  cursor: not-allowed;
  opacity: 0.6;
  text-decoration: line-through;
}

/* Botón Añadir a la Cesta */
.add-to-cart-btn {
  width: 100%;
  height: 52px;
  border-radius: 8px;
  background: #111827;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.15);
}
.add-to-cart-btn:hover:not(:disabled) {
  background: #000000;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.25);
}
.add-to-cart-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.add-to-cart-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.65;
}

/* Animación cuando se añade */
.btn-added-animate {
  background: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3) !important;
}

/* Acordeones */
.accordion-item {
  border-top: 1px solid #f3f4f6;
}
.accordion-item:last-child {
  border-bottom: 1px solid #f3f4f6;
}
.accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #111827;
  min-height: 50px;
  transition: color 0.2s ease;
}
.accordion-header:hover {
  color: #000000;
}
.accordion-content {
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 0;
}
.accordion-content.open {
  max-height: 800px;
}
.accordion-body {
  padding-bottom: 20px;
  font-size: 13px;
  line-height: 1.65;
  color: #4b5563;
}

/* Loading */
.product-detail-loading { display: flex; align-items: center; justify-content: center; min-height: 80vh; }
.loader-spinner {
  width: 32px; height: 32px;
  border: 2px solid #e5e7eb;
  border-top-color: #111827;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ===== RELACIONADOS ===== */
.related-products-section {
  max-width: 1200px;
  margin: 48px auto 0;
  padding: 24px 16px 40px;
  border-top: 1px solid var(--border-color, #f0f0f0);
}
.related-products-title {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 20px;
  color: var(--text-main, #111827);
}
.related-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px)  { .related-products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .related-products-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.related-product-card { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.related-product-image-wrapper {
  position: relative; aspect-ratio: 3 / 4;
  background-color: #f5f5f5;
  margin-bottom: 10px; overflow: hidden;
}
.related-product-image-wrapper img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.4s ease; }
.related-product-card:hover .related-product-image-wrapper img { transform: scale(1.05); }
.related-product-no-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 12px; }
.related-product-name { font-size: 12px; font-weight: 500; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 4px 0; }
.related-product-price { font-size: 12px; color: var(--text-muted, #6b7280); margin: 0; white-space: nowrap; }

/* ===== RESPONSIVE TABLET (769-1023px) ===== */
@media (max-width: 1023px) and (min-width: 769px) {
  .product-detail-page { padding-top: 0; }
  .product-info-container { padding: 20px 24px 48px; }
  .product-title { font-size: 22px; }
  .color-btn { width: 44px; height: 58px; }
}

/* ===== RESPONSIVE MOVIL (<=768px) ===== */
@media (max-width: 768px) {
  .product-detail-page { padding-top: 0; }
  .product-breadcrumb { padding: 16px 12px 0; font-size: 10px; margin-bottom: 16px; }
  .product-info-container { padding: 16px 16px 48px; }
  .product-title { font-size: 20px; letter-spacing: 0.01em; }
  .product-price { font-size: 15px; margin-bottom: 20px; }
  .product-price-row { gap: 8px; margin-bottom: 20px; }
  .product-price-current { font-size: 16px; }
  .product-price-original { font-size: 13px; }
  .color-selector { gap: 8px; margin-bottom: 20px; }
  .color-btn { width: 40px; height: 54px; }
  .size-selector { gap: 6px; margin-bottom: 20px; }
  .size-btn { height: 42px; min-width: 42px; padding: 0 12px; font-size: 12px; }
  .add-to-cart-btn { padding: 18px; font-size: 12px; margin-bottom: 20px; min-height: 56px; }
  .accordion-header { padding: 14px 0; font-size: 11px; }
  .accordion-body { font-size: 12px; }
  .related-products-section { margin-top: 32px; padding: 20px 12px 32px; }
  .related-products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .related-product-name { font-size: 11px; }
}

/* ===== RESPONSIVE MOVIL PEQUENO (<=480px) ===== */
@media (max-width: 480px) {
  .product-detail-page { padding-top: 0; }
  .product-title { font-size: 18px; }
  .product-info-container { padding: 12px 12px 40px; }
  .color-btn { width: 36px; height: 48px; }
  .size-btn { height: 40px; min-width: 40px; padding: 0 10px; font-size: 11px; }
  .add-to-cart-btn { letter-spacing: 0.05em; }
}


/* ===== FULLSCREEN LIGHTBOX ===== */
.lightbox-overlay {
  animation: fadeIn 0.25s ease-out;
}

.lightbox-nav-btn {
  transition: all 0.2s ease !important;
}

.lightbox-nav-btn:hover {
  background: rgba(40, 40, 40, 0.85) !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.lightbox-nav-btn:active {
  transform: translateY(-50%) scale(0.92) !important;
}
/* =========================================
   VISTA DEL CARRITO DE COMPRAS — MINIMALISTA
========================================= */

.cart-page-container {
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 75vh;
}

/* ── Header ── */
.cart-header {
  text-align: center;
  padding: 20px 0 36px;
}

.cart-title {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 4px;
  color: var(--text-main);
  text-transform: uppercase;
  margin: 0;
}

.cart-subtitle {
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Loading State ── */
.cart-loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45vh;
}

.cart-loader {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-color);
  border-top-color: var(--text-main);
  border-radius: 50%;
  animation: cartSpin 0.7s linear infinite;
}

@keyframes cartSpin {
  to { transform: rotate(360deg); }
}

/* ── Empty State ── */
.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 45vh;
  padding: 3rem 1rem;
  max-width: 480px;
  margin: 0 auto;
  animation: cartFadeIn 0.4s ease-out;
}

.cart-empty-icon {
  color: var(--text-main);
  opacity: 0.75;
  margin-bottom: 1.25rem;
}

.cart-empty-heading {
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-main);
  margin-bottom: 0.75rem;
}

.cart-empty-description {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.cart-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1px solid var(--text-main);
  color: var(--text-main);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease;
}

.cart-empty-cta:hover {
  background: var(--text-main);
  color: var(--bg-main);
}

.cart-empty-cta__arrow {
  font-size: 1rem;
  display: inline-block;
  transition: transform 0.25s ease;
}

.cart-empty-cta:hover .cart-empty-cta__arrow {
  transform: translateX(5px);
}

/* ── Cart Items ── */
.cart-items-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart-item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cart-item-removing {
  opacity: 0;
  transform: translateX(16px);
}

.cart-item-img {
  background-color: #f4f4f5;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: opacity 0.25s ease;
}

.cart-item-img:hover {
  opacity: 0.9;
}

.cart-item-name {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-main);
}

.cart-item-name a {
  color: inherit;
  text-decoration: none;
}

.cart-bundle-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-main);
  background: #f4f4f5;
  border: 1px solid var(--border-color);
  padding: 2px 8px;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 6px;
}

.cart-discount-tag {
  border: 1px solid #111827;
  color: #111827;
  padding: 1px 5px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.cart-quantity-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Order Summary Box ── */
.cart-summary-box {
  background-color: #fafafa;
  border: 1px solid var(--border-color);
  padding: 28px 24px;
  position: sticky;
  top: 94px;
}

.cart-summary-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-main);
  margin: 0;
}

.cart-continue-link {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.cart-continue-link:hover {
  color: var(--text-main);
}

@keyframes cartFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .cart-header {
    padding: 10px 0 24px;
  }

  .cart-title {
    font-size: 1.45rem;
    letter-spacing: 3px;
  }

  .cart-summary-box {
    padding: 22px 18px;
    position: static;
  }
}
/* ============================================================
   SHOP BUNDLE DETAIL — Diseno responsivo premium
   Hereda clases de ProductDetail + estilos propios de bundle
   Breakpoints: <=480px | <=768px | <=1024px | >1024px
============================================================ */

/* ===== ANIMACIONES ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== WISHLIST (compartido con Product) ===== */
.product-wishlist-btn { transition: transform 0.15s ease, background-color 0.2s ease !important; }
.product-wishlist-btn:hover:not(:disabled) { transform: scale(1.15) !important; }
.product-wishlist-btn:active:not(:disabled) { transform: scale(0.88) !important; }

/* ===== PAGINA BUNDLE ===== */
.product-detail-page {
  background-color: var(--bg-main, #fff);
  min-height: 100vh;
  color: var(--text-main, #111827);
  padding-top: 0;
}

/* Breadcrumbs */
.product-breadcrumb {
  max-width: 1200px;
  margin: 0 auto 32px auto;
  padding: 16px 16px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6b7280);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.product-breadcrumb a { color: inherit; text-decoration: none; transition: color 0.2s; }
.product-breadcrumb a:hover { color: var(--text-main); }

/* ===== LAYOUT GRID ===== */
.product-detail-grid {
  display: flex;
  flex-direction: column;
  max-width: 1440px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .product-detail-grid { flex-direction: row; align-items: flex-start; }
}

/* ===== GALERIA EDITORIAL (desktop) ===== */
.product-gallery-container {
  width: 100%;
  position: relative;
}
@media (min-width: 1024px) {
  .product-gallery-container {
    width: 65%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 24px 24px 48px;
  }
}

.product-gallery-item {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #f5f5f5;
  overflow: hidden;
  position: relative;
}
.product-gallery-img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: transform 0.5s ease;
  animation: fadeIn 0.5s ease-out;
}
.product-gallery-item:hover .product-gallery-img { transform: scale(1.02); }

/* Movil: swipeable horizontal */
@media (max-width: 1023px) {
  .product-gallery-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .product-gallery-container::-webkit-scrollbar { display: none; }
  .product-gallery-item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: 1 / 1;
    min-height: auto;
  }
  .product-gallery-img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

/* ===== INFO PANEL ===== */
.product-info-container {
  width: 100%;
  padding: 20px 16px 40px;
}
@media (min-width: 1024px) {
  .product-info-container {
    width: 35%;
    position: sticky;
    top: 100px;
    padding: 0 48px 48px 24px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .product-info-container::-webkit-scrollbar { display: none; }
}

/* Cabecera */
.product-info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.product-info-actions {
  display: flex;
  gap: 8px; align-items: center;
  flex-shrink: 0;
}

/* Badge "Conjunto" */
.bundle-badge {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-main, #111);
  background-color: var(--bg-input, #f0f0f0);
  padding: 4px 10px;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 8px;
}

/* Titulo */
.product-title, .bundle-title {
  font-family: 'Bodoni Moda', serif;
  font-size: 26px; font-weight: 600;
  line-height: 1.1;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-main);
}

/* Precio */
.bundle-price, .product-price {
  font-size: 17px; font-weight: 500;
  color: var(--text-main);
  margin: 0 0 20px 0;
  white-space: nowrap;
}

/* Descripcion */
.bundle-description {
  font-size: 13px; line-height: 1.7;
  color: var(--text-muted, #666);
  margin-bottom: 28px;
}

/* Resumen lista de prendas */
.bundle-summary-list {
  margin-bottom: 24px;
  padding: 16px;
  background-color: var(--bg-input, #fafafa);
  border: 1px solid var(--border-color, #eaeaea);
  border-radius: 4px;
}
.bundle-summary-title {
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-main, #111);
}
.bundle-summary-item {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-muted, #555);
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-color, #e5e5e5);
}
.bundle-summary-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

/* Boton agregar bundle */
.bundle-add-btn, .add-to-cart-btn {
  width: 100%;
  padding: 16px;
  background: var(--text-main, #111);
  color: #fff;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  border: none; cursor: pointer;
  display: flex; justify-content: center; align-items: center;
  gap: 8px;
  transition: background-color 0.2s ease, transform 0.1s ease;
  min-height: 52px;
  margin-bottom: 20px;
}
.bundle-add-btn:hover, .add-to-cart-btn:hover:not(:disabled) { background: #000; }
.bundle-add-btn:active, .add-to-cart-btn:active:not(:disabled) { transform: scale(0.98); }
.bundle-add-btn.added { background: #22c55e; }

/* Info pegajosa */
.bundle-sticky-info {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
}

/* ===== PRENDAS DEL BUNDLE ===== */
.bundle-pieces-header {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 32px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color, #eaeaea);
  padding-bottom: 12px;
  color: var(--text-main);
}

.bundle-piece-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color, #f0f0f0);
}

.bundle-piece-img-wrapper {
  width: 100%;
  aspect-ratio: 3/4;
  background-color: var(--bg-input, #f9f9f9);
  border-radius: 4px;
  overflow: hidden;
}
.bundle-piece-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.bundle-piece-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.bundle-piece-title {
  font-size: 14px; font-weight: 600;
  color: var(--text-main, #111);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.bundle-piece-price {
  font-size: 13px;
  color: var(--text-muted, #666);
}

/* Atributos (talla, color) */
.bundle-piece-attributes {
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.bundle-piece-attr {
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
  background-color: var(--bg-input, #f5f5f5);
  padding: 5px 10px;
  border-radius: 2px;
  color: var(--text-main, #333);
}

/* Selector de colores */
.color-selector {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.color-btn {
  width: 44px; height: 58px;
  border-radius: 4px; overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer; padding: 2px;
  background: transparent;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}
.color-btn.active { border-color: var(--text-main, #111); }
.color-btn img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 2px; }

/* Selector tallas */
.size-selector { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.size-btn {
  height: 40px; min-width: 40px; padding: 0 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-color, #e5e5e5);
  background: transparent; color: var(--text-main);
  font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.2s ease;
}
.size-btn:hover:not(:disabled) { border-color: var(--text-main); }
.size-btn.active { background: var(--text-main); color: #fff; border-color: var(--text-main); }
.size-btn:disabled { color: #a1a1aa; background: #f4f4f5; cursor: not-allowed; border-color: #e4e4e7; text-decoration: line-through; }

/* Boton agregar pieza */
.btn-add-piece {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--text-main, #111);
  color: var(--text-main, #111);
  padding: 10px 20px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex; align-items: center; gap: 8px;
  min-height: 42px;
}
.btn-add-piece:hover { background: var(--text-main, #111); color: #fff; }
.btn-add-piece.added { background: #22c55e; border-color: #22c55e; color: white; }

/* Accordiones */
.accordion-item { border-top: 1px solid var(--border-color, #e5e5e5); }
.accordion-item:last-child { border-bottom: 1px solid var(--border-color, #e5e5e5); }
.accordion-header {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-main);
  min-height: 48px;
}
.accordion-content { overflow: hidden; transition: max-height 0.3s ease-out; max-height: 0; }
.accordion-content.open { max-height: 600px; }
.accordion-body { padding-bottom: 16px; font-size: 13px; line-height: 1.6; color: var(--text-muted, #4b5563); }

/* Loading */
.product-detail-loading { display: flex; align-items: center; justify-content: center; min-height: 80vh; }
.loader-spinner {
  width: 32px; height: 32px;
  border: 2px solid var(--border-color, #e5e5e5);
  border-top-color: var(--text-main, #111);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Scrollbar personalizado del sidebar */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 4px; }

/* ===== RESPONSIVE TABLET (769-1023px) ===== */
@media (max-width: 1023px) and (min-width: 769px) {
  .product-detail-page { padding-top: 0; }
  .product-info-container { padding: 20px 24px 48px; }
  .bundle-title, .product-title { font-size: 22px; }
  .bundle-piece-card { grid-template-columns: 140px 1fr; gap: 20px; }
}

/* ===== RESPONSIVE MOVIL (<=768px) ===== */
@media (max-width: 768px) {
  .product-detail-page { padding-top: 0; }
  .product-breadcrumb { padding: 16px 12px 0; font-size: 10px; margin-bottom: 16px; }

  .product-info-container { padding: 16px 16px 48px; }

  .bundle-title, .product-title { font-size: 20px; }
  .bundle-price, .product-price { font-size: 15px; }
  .bundle-description { font-size: 12px; }

  .bundle-summary-list { padding: 12px; }
  .bundle-summary-title { font-size: 10px; }
  .bundle-summary-item { font-size: 11px; }

  .bundle-add-btn, .add-to-cart-btn {
    padding: 18px;
    font-size: 12px;
    min-height: 56px;
  }

  /* Prendas del bundle: imagen mas pequena */
  .bundle-piece-card {
    grid-template-columns: 100px 1fr;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .bundle-piece-title { font-size: 13px; }
  .bundle-piece-price { font-size: 12px; }
  .bundle-piece-attributes { gap: 6px; }
  .bundle-piece-attr { font-size: 10px; padding: 4px 8px; }

  .btn-add-piece { padding: 10px 16px; font-size: 10px; }

  .color-btn { width: 38px; height: 50px; }
  .size-btn { height: 38px; min-width: 38px; padding: 0 10px; }

  .bundle-pieces-header { font-size: 12px; margin-top: 24px; }
  .accordion-header { padding: 12px 0; font-size: 11px; }
}

/* ===== RESPONSIVE MOVIL PEQUENO (<=480px) ===== */
@media (max-width: 480px) {
  .product-detail-page { padding-top: 0; }
  .bundle-title, .product-title { font-size: 17px; }
  .product-info-container { padding: 12px 12px 40px; }

  .bundle-piece-card {
    grid-template-columns: 85px 1fr;
    gap: 12px;
  }

  .color-btn { width: 34px; height: 44px; }
  .size-btn { height: 36px; min-width: 36px; font-size: 11px; }

  .bundle-add-btn, .add-to-cart-btn { letter-spacing: 0.05em; }
}