/* Estilos complementarios y micro-animaciones (100% nativo y offline) */
:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* Variables modo claro por defecto */
  --bg-body: #F8FAFC;
  --text-main: #0F172A;
  --text-muted: #64748B;
  --bg-header: rgba(255, 255, 255, 0.85);
  --border-subtle: #E2E8F0;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: rgba(241, 245, 249, 0.8);
  --bg-panel: rgba(255, 255, 255, 0.9);
  --bg-input: #FFFFFF;
  --border-input: #CBD5E1;
  --bg-inner: #F1F5F9;
  --bg-footer: #FFFFFF;
  --bg-table-header: #F1F5F9;
  --scrollbar-track: #F1F5F9;
  --scrollbar-thumb: #CBD5E1;
  --hero-ves-bg: linear-gradient(145deg, #FFFFFF, rgba(16, 185, 129, 0.08));
  --hero-ves-border: rgba(16, 185, 129, 0.35);
  --text-primary-number: #0F172A;
}

html.dark {
  /* Variables modo oscuro */
  --bg-body: #070B12;
  --text-main: #F1F5F9;
  --text-muted: #94A3B8;
  --bg-header: rgba(15, 23, 42, 0.75);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --bg-card: rgba(15, 23, 42, 0.6);
  --bg-card-hover: rgba(30, 41, 59, 0.5);
  --bg-panel: rgba(15, 23, 42, 0.7);
  --bg-input: rgba(2, 6, 23, 0.85);
  --border-input: #334155;
  --bg-inner: rgba(2, 6, 23, 0.6);
  --bg-footer: rgba(2, 6, 23, 0.6);
  --bg-table-header: #0F172A;
  --scrollbar-track: #070B12;
  --scrollbar-thumb: #1E293B;
  --hero-ves-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(6, 78, 59, 0.2));
  --hero-ves-border: rgba(16, 185, 129, 0.3);
  --text-primary-number: #FFFFFF;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-body);
  color: var(--text-main);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.font-mono-numbers {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Superficies adaptativas con glassmorphism */
.glass-panel {
  background: var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.glass-card-interactive {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.glass-card-interactive:hover {
  transform: translateY(-1px);
  background: var(--bg-card-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

html.dark .glass-card-interactive:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Tarjeta protagonista en Bolívares */
.card-hero-ves {
  background: var(--hero-ves-bg);
  border: 1px solid var(--hero-ves-border);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-hero-ves:hover {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.12);
}

/* Inputs adaptativos */
.app-input-container {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.app-input-number {
  color: var(--text-primary-number);
}

.app-inner-box {
  background: var(--bg-inner);
  border: 1px solid var(--border-subtle);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.app-header {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.app-footer {
  background: var(--bg-footer);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.app-table-header {
  background: var(--bg-table-header);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}

.app-table-row {
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color 0.15s ease;
}

.app-table-row:hover {
  background: var(--bg-card-hover);
}

/* Botones rápidos */
.app-btn-quick {
  background: var(--bg-inner);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  transition: all 0.15s ease;
}

.app-btn-quick:hover {
  filter: brightness(0.95);
}

html.dark .app-btn-quick:hover {
  filter: brightness(1.2);
}

/* Microanimaciones */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.pulse-indicator {
  animation: pulseGlow 2.5s ease-in-out infinite;
}

/* Ocultar flechas en input number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  filter: brightness(0.85);
}

/* Botones rápidos activos adaptados a tema claro y oscuro */
.btn-quick-cop-active {
  background-color: rgba(14, 165, 233, 0.15) !important;
  color: #0369A1 !important; /* sky-700 en claro */
  border-color: #38BDF8 !important;
  font-weight: 700 !important;
}

html.dark .btn-quick-cop-active {
  background-color: rgba(14, 165, 233, 0.25) !important;
  color: #7DD3FC !important; /* sky-300 en oscuro */
  border-color: #38BDF8 !important;
}

.btn-quick-margin-active {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #047857 !important; /* emerald-700 en claro */
  border-color: #10B981 !important;
  font-weight: 700 !important;
}

html.dark .btn-quick-margin-active {
  background-color: rgba(16, 185, 129, 0.25) !important;
  color: #6EE7B7 !important; /* emerald-300 en oscuro */
  border-color: #34D399 !important;
}