/* Estilos adicionales para el TPV */
:root {
  --primary-50: #f0f9ff;
  --primary-100: #e0f2fe;
  --primary-200: #bae6fd;
  --primary-300: #7dd3fc;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;
  --primary-600: #0284c7;
  --primary-700: #0369a1;
  --primary-800: #075985;
  --primary-900: #0c4a6e;
  --primary-950: #082f49;
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
  --secondary-950: #020617;
  --font-size-xs: 0.75em;
  --font-size-sm: 0.875em;
  --font-size-base: 1em;
  --font-size-lg: 1.125em;
  --font-size-xl: 1.25em;
  --font-size-2xl: 1.5em;
  --font-size-3xl: 1.875em;
  --font-size-4xl: 2.25em;
  --font-size-5xl: 3em;
  --font-family: 'Inter', sans-serif;
}

/* Font sizes */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }

.bg-secondary-50 {background-color: var(--secondary-50);}
.bg-secondary-100 {background-color: var(--secondary-100);}
.bg-secondary-200 {background-color: var(--secondary-200);}
.bg-secondary-300 {background-color: var(--secondary-300);}
.bg-secondary-400 {background-color: var(--secondary-400);}
.bg-secondary-500 {background-color: var(--secondary-500);}
.bg-secondary-600 {background-color: var(--secondary-600);}
.bg-secondary-700 {background-color: var(--secondary-700);}
.bg-secondary-800 {background-color: var(--secondary-800);}
.bg-secondary-900 {background-color: var(--secondary-900);}
.bg-secondary-950 {background-color: var(--secondary-950);}

body {
  font-family: var(--font-family);
}

.bg-modal {
  background-color: oklch(0.45 0.03 256.8 / 0.56);
  backdrop-filter: blur(1px);
}

.border-b, .border-t, li {
  border-color: var(--secondary-200);
}

.border-secondary-200 {border-color: var(--secondary-200);}
.border-secondary-300 {border-color: var(--secondary-300);}
.border-primary-300 {border-color: var(--color-primary-600);}
.text-secondary-400 {color: var(--secondary-400);}

.bg-primary-600 { background-color: var(--color-primary-600); }
.hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }

.text-primary { color: var(--color-primary-500); }
.bg-primary { background-color: var(--color-primary-500); }
.hover\:bg-primary:hover { background-color: var(--color-primary-600); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.text-primary-900 { color: var(--color-primary-900); }


/* Alerts */
.alert {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.alert-error {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.alert-success {
  background-color: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

/* Login page */
#login #glassmorphism {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
  position: relative;
  overflow: visible;
  z-index: 15;
}

#login #glassmorphism::before, .glassmorphism::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border-radius: 20px;
  z-index: -1;
}

#login input {
  width: 100%;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  z-index: 30;
  pointer-events: auto;
  cursor: text;
  -webkit-text-fill-color: white;
  opacity: 1;
}

#login input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

#login input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  z-index: 35;
}

#login #glassmorphism-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 25;
  pointer-events: auto;
}

#login #glassmorphism-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
  #login input, #login #glassmorphism-btn {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
  }
}

/* END: Login page*/

/* Spinner */
#spinner {
  width: 3.25em;
  transform-origin: center;
  animation: rotate4 2s linear infinite;
}

circle {
  fill: none;
  stroke: hsl(214, 97%, 59%);
  stroke-width: 5;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash4 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dashoffset: -125px;
  }
}
/* END: Spinner */