/**
 * FACTURA EXPRESS - Material Design System
 * Sistema de diseño completo y profesional para móviles
 * Basado en Material Design 3 con alto contraste
 */

/* ==========================================================================
   SISTEMA DE COLORES - PALETA PROFESIONAL
   ========================================================================== */

:root {
  /* Colores Primarios - Azul profesional */
  --color-primary-50: #e3f2fd;
  --color-primary-100: #bbdefb;
  --color-primary-500: #2196f3;
  --color-primary-600: #1e88e5;
  --color-primary-700: #1976d2;
  --color-primary-900: #0d47a1;

  /* Colores Secundarios - Verde éxito */
  --color-secondary-500: #4caf50;
  --color-secondary-600: #43a047;
  --color-secondary-700: #388e3c;

  /* Colores de Acento - Naranja */
  --color-accent-500: #ff9800;
  --color-accent-600: #fb8c00;

  /* Grises - Escala completa */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;

  /* Colores de Estado */
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-error: #f44336;
  --color-info: #2196f3;

  /* Superficies - CONTRASTE FUERTE */
  --surface-background: #d0d4d9;
  --surface-card: #ffffff;
  --surface-overlay: rgba(0, 0, 0, 0.5);

  /* Texto */
  --text-primary: #000000;
  --text-secondary: #424242;
  --text-disabled: #9e9e9e;
  --text-inverse: #ffffff;

  /* Sombras Material Design */
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-4: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-5: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-6: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Transiciones */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Tipografía */
  --font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* ==========================================================================
   RESET Y BASE
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--text-primary) !important;
  background: var(--surface-background) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ==========================================================================
   HEADER / TOP APP BAR
   ========================================================================== */

.navbar-ef2 {
  background: var(--color-primary-700) !important;
  color: var(--text-inverse) !important;
  box-shadow: var(--shadow-2) !important;
  position: relative !important;
}

.navbar-ef2.primary {
  background: var(--color-primary-700) !important;
}

/* ==========================================================================
   CARDS - MATERIAL DESIGN
   ========================================================================== */

.card-ef2 {
  background: var(--surface-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-6) !important;
  margin-bottom: var(--space-4) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
  border: 3px solid #555555 !important;
  transition: box-shadow var(--transition-base) !important;
}

.card-ef2:hover {
  box-shadow: var(--shadow-3) !important;
}

/* ==========================================================================
   INPUTS - MATERIAL OUTLINED
   ========================================================================== */

.input-ef2 {
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  font-family: var(--font-family) !important;
  line-height: 1.5 !important;
  color: #000000 !important;
  background: #ffffff !important;
  border: 3px solid #333333 !important;
  border-radius: var(--radius-sm) !important;
  outline: none !important;
  transition: all var(--transition-fast) !important;
  min-height: 56px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.input-ef2:hover {
  border-color: #000000 !important;
}

.input-ef2:focus {
  border-color: #1976d2 !important;
  border-width: 3px !important;
  box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.3) !important;
}

.input-ef2:disabled {
  background: var(--color-gray-100) !important;
  border-color: var(--color-gray-300) !important;
  color: var(--text-disabled) !important;
  cursor: not-allowed !important;
}

.input-ef2::placeholder {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

/* SELECT STYLES */
select.input-ef2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23212121' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 20px !important;
  padding-right: 44px !important;
  cursor: pointer !important;
}

select.input-ef2:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231976d2' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   LABELS
   ========================================================================== */

label {
  display: block !important;
  font-family: var(--font-family) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin-bottom: var(--space-2) !important;
  letter-spacing: 0.15px !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   BUTTONS - MATERIAL DESIGN
   ========================================================================== */

.btn-ef2-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  min-height: 48px !important;
  font-family: var(--font-family) !important;
  font-size: 15px !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--text-inverse) !important;
  background: var(--color-primary-700) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-2) !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  -webkit-tap-highlight-color: transparent !important;
}

.btn-ef2-primary:hover {
  background: var(--color-primary-900) !important;
  box-shadow: var(--shadow-3) !important;
  transform: translateY(-1px) !important;
}

.btn-ef2-primary:active {
  transform: translateY(0) !important;
  box-shadow: var(--shadow-1) !important;
}

.btn-ef2-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  min-height: 48px !important;
  font-family: var(--font-family) !important;
  font-size: 15px !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--text-inverse) !important;
  background: var(--color-secondary-600) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-2) !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
}

.btn-ef2-secondary:hover {
  background: var(--color-secondary-700) !important;
  box-shadow: var(--shadow-3) !important;
}

.btn-ef2-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  min-height: 48px !important;
  font-family: var(--font-family) !important;
  font-size: 15px !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--color-primary-700) !important;
  background: transparent !important;
  border: 2px solid var(--color-primary-700) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
}

.btn-ef2-outline:hover {
  background: var(--color-primary-50) !important;
  border-color: var(--color-primary-900) !important;
  color: var(--color-primary-900) !important;
}

.btn-ef2-accent {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  min-height: 48px !important;
  font-family: var(--font-family) !important;
  font-size: 15px !important;
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--text-inverse) !important;
  background: var(--color-accent-500) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-2) !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
}

.btn-ef2-accent:hover {
  background: var(--color-accent-600) !important;
  box-shadow: var(--shadow-3) !important;
}

/* ==========================================================================
   BADGES Y CHIPS
   ========================================================================== */

.badge-ef2-primary {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-primary-900) !important;
  background: var(--color-primary-50) !important;
  border: 1px solid var(--color-primary-100) !important;
  border-radius: var(--radius-full) !important;
  letter-spacing: 0.25px !important;
}

.badge-ef2-success {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-secondary-700) !important;
  background: #e8f5e9 !important;
  border: 1px solid #c8e6c9 !important;
  border-radius: var(--radius-full) !important;
  letter-spacing: 0.25px !important;
}

/* ==========================================================================
   DIVIDERS
   ========================================================================== */

.divider-ef2 {
  height: 1px !important;
  background: var(--color-gray-300) !important;
  border: none !important;
  margin: var(--space-4) 0 !important;
}

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert-ef2-info {
  padding: var(--space-4) !important;
  background: var(--color-primary-50) !important;
  border-left: 4px solid var(--color-primary-700) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.alert-ef2-success {
  padding: var(--space-4) !important;
  background: #e8f5e9 !important;
  border-left: 4px solid var(--color-success) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.alert-ef2-warning {
  padding: var(--space-4) !important;
  background: #fff3e0 !important;
  border-left: 4px solid var(--color-warning) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.alert-ef2-error {
  padding: var(--space-4) !important;
  background: #ffebee !important;
  border-left: 4px solid var(--color-error) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   FLOATING ACTION BUTTON (FAB)
   ========================================================================== */

.fab {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-primary-700) !important;
  color: var(--text-inverse) !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-6) !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  z-index: 1000 !important;
}

.fab:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3) !important;
}

.fab:active {
  transform: scale(0.95) !important;
}

/* ==========================================================================
   PROGRESS INDICATORS
   ========================================================================== */

.progress-linear {
  width: 100% !important;
  height: 4px !important;
  background: var(--color-gray-200) !important;
  border-radius: var(--radius-full) !important;
  overflow: hidden !important;
}

.progress-linear-bar {
  height: 100% !important;
  background: var(--color-primary-700) !important;
  border-radius: var(--radius-full) !important;
  transition: width var(--transition-slow) !important;
}

/* ==========================================================================
   RIPPLE EFFECT
   ========================================================================== */

.ripple {
  position: relative !important;
  overflow: hidden !important;
}

.ripple::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.6) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.5s ease-out, height 0.5s ease-out !important;
}

.ripple:active::after {
  width: 200px !important;
  height: 200px !important;
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn var(--transition-slow) ease-out !important;
}

.animate-slide-up {
  animation: slideUp var(--transition-base) ease-out !important;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.touch-target {
  min-height: 48px !important;
  min-width: 48px !important;
  -webkit-tap-highlight-color: transparent !important;
}

.text-primary {
  color: var(--text-primary) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.bg-surface {
  background: var(--surface-card) !important;
}

/* ==========================================================================
   RESPONSIVE - MOBILE FIRST
   ========================================================================== */

@media (max-width: 640px) {
  .card-ef2 {
    padding: var(--space-4) !important;
    border-radius: var(--radius-md) !important;
  }

  .fab {
    bottom: 16px !important;
    right: 16px !important;
  }
}

/* ==========================================================================
   SAFE AREAS - iOS
   ========================================================================== */

@supports (padding: env(safe-area-inset-bottom)) {
  .safe-top {
    padding-top: env(safe-area-inset-top) !important;
  }

  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .fab {
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
}

/* ==========================================================================
   MODO OSCURO - DARK MODE
   ========================================================================== */

[data-theme="dark"] {
  /* Colores Primarios - Ajustados para oscuro */
  --color-primary-50: #1e293b;
  --color-primary-100: #334155;
  --color-primary-500: #60a5fa;
  --color-primary-600: #3b82f6;
  --color-primary-700: #2563eb;
  --color-primary-900: #1e40af;

  /* Colores Secundarios - Ajustados para oscuro */
  --color-secondary-500: #6ee7b7;
  --color-secondary-600: #34d399;
  --color-secondary-700: #10b981;

  /* Colores de Acento - Ajustados para oscuro */
  --color-accent-500: #fbbf24;
  --color-accent-600: #f59e0b;

  /* Grises - Invertidos para modo oscuro */
  --color-gray-50: #1e1e1e;
  --color-gray-100: #2a2a2a;
  --color-gray-200: #3a3a3a;
  --color-gray-300: #4a4a4a;
  --color-gray-400: #6b6b6b;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #b8b8b8;
  --color-gray-700: #d4d4d4;
  --color-gray-800: #e5e5e5;
  --color-gray-900: #f5f5f5;

  /* Colores de Estado - Ajustados */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #f87171;
  --color-info: #60a5fa;

  /* Superficies - OSCURAS */
  --surface-background: #0f172a;
  --surface-card: #1e293b;
  --surface-overlay: rgba(0, 0, 0, 0.7);

  /* Texto - Invertido */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-disabled: #64748b;
  --text-inverse: #0f172a;

  /* Sombras más suaves para modo oscuro */
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-3: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-4: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-5: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
  --shadow-6: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* Body adjustments for dark mode */
[data-theme="dark"] body {
  background: var(--surface-background) !important;
  color: var(--text-primary) !important;
}

/* Header dark mode */
[data-theme="dark"] .navbar-ef2 {
  background: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
}

/* Cards dark mode */
[data-theme="dark"] .card-ef2 {
  background: var(--surface-card) !important;
  border: 3px solid #334155 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* Inputs dark mode */
[data-theme="dark"] .input-ef2 {
  color: var(--text-primary) !important;
  background: #0f172a !important;
  border: 3px solid #475569 !important;
}

[data-theme="dark"] .input-ef2:hover {
  border-color: #64748b !important;
}

[data-theme="dark"] .input-ef2:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .input-ef2::placeholder {
  color: var(--text-disabled) !important;
}

/* Select dropdown arrow for dark mode */
[data-theme="dark"] select.input-ef2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 20px !important;
}

[data-theme="dark"] select.input-ef2:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 20px !important;
}

[data-theme="dark"] select.input-ef2:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233b82f6' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 20px !important;
}

/* Labels dark mode */
[data-theme="dark"] label {
  color: var(--text-primary) !important;
}

/* Buttons dark mode */
[data-theme="dark"] .btn-ef2-primary {
  background: var(--color-primary-600) !important;
}

[data-theme="dark"] .btn-ef2-primary:hover {
  background: var(--color-primary-700) !important;
}

[data-theme="dark"] .btn-ef2-secondary {
  background: var(--color-secondary-600) !important;
}

[data-theme="dark"] .btn-ef2-secondary:hover {
  background: var(--color-secondary-700) !important;
}

[data-theme="dark"] .btn-ef2-outline {
  color: var(--color-primary-500) !important;
  border: 2px solid var(--color-primary-500) !important;
}

[data-theme="dark"] .btn-ef2-outline:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: var(--color-primary-600) !important;
  color: var(--color-primary-600) !important;
}

/* Badges dark mode */
[data-theme="dark"] .badge-ef2-primary {
  color: var(--color-primary-100) !important;
  background: rgba(59, 130, 246, 0.2) !important;
  border: 1px solid var(--color-primary-600) !important;
}

[data-theme="dark"] .badge-ef2-success {
  color: #86efac !important;
  background: rgba(52, 211, 153, 0.2) !important;
  border: 1px solid var(--color-secondary-600) !important;
}

/* Alerts dark mode */
[data-theme="dark"] .alert-ef2-info {
  background: rgba(59, 130, 246, 0.15) !important;
  border-left: 4px solid var(--color-primary-600) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-ef2-success {
  background: rgba(52, 211, 153, 0.15) !important;
  border-left: 4px solid var(--color-success) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-ef2-warning {
  background: rgba(251, 191, 36, 0.15) !important;
  border-left: 4px solid var(--color-warning) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-ef2-error {
  background: rgba(248, 113, 113, 0.15) !important;
  border-left: 4px solid var(--color-error) !important;
  color: var(--text-primary) !important;
}

/* FAB dark mode */
[data-theme="dark"] .fab {
  background: var(--color-primary-600) !important;
}

[data-theme="dark"] .fab:hover {
  background: var(--color-primary-700) !important;
}

/* Divider dark mode */
[data-theme="dark"] .divider-ef2 {
  background: var(--color-gray-300) !important;
}

/* Modal adjustments */
[data-theme="dark"] .modal-box {
  background-color: #1e293b !important;
  color: var(--text-primary) !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] .receipt-container {
  background-color: white !important;
  color: #1a1a1a !important;
}

/* Dropdown menu dark mode */
[data-theme="dark"] .dropdown-content {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] .menu li > * {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .menu li > *:hover {
  background: #334155 !important;
}

[data-theme="dark"] .menu-title {
  color: var(--text-secondary) !important;
}

/* Ripple effect for dark mode */
[data-theme="dark"] .ripple::after {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Panel fijo del botón de acción (bottom bar) */
[data-theme="dark"] .fixed.bottom-0 {
  background: #1e293b !important;
  border-top-color: #334155 !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   ALINEACIÓN DE ICONOS - HEADER
   ========================================================================== */

/* Asegurar alineación perfecta de iconos en botones circulares */
.btn-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.btn-circle svg {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Alineación de iconos en el header */
.navbar-ef2 .btn-circle {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
}

.navbar-ef2 svg {
  display: block !important;
  margin: auto !important;
}

/* Logo compacto - alineación centrada */
.navbar-ef2 .w-9 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Swap toggle - alineación */
.swap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.swap svg {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Avatar - alineación centrada */
.avatar.placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.avatar.placeholder > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* User info container */
.dropdown .btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
}

/* Iconos en items de empresa */
.navbar-ef2 .inline-flex {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

/* Dark mode icon alignment adjustments */
[data-theme="dark"] .btn-circle svg {
  color: inherit !important;
}