/* SivarCOM - Software.sv | Estilos Elegantes y Sobrios */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* Paleta Sobria y Ejecutiva */
  --bg-primary: #111111;
  --bg-secondary: #171717;
  --bg-card: rgba(23, 23, 23, 0.75);
  --bg-card-hover: rgba(38, 38, 38, 0.85);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(163, 163, 163, 0.4);
  
  --text-main: #FAFAFA;
  --text-muted: #A3A3A3;
  --text-dim: #737373;
  
  /* Acentos Elegantes */
  --accent-cyan: #E5E5E5;
  --accent-indigo: #737373;
  --accent-emerald: #10B981;
  --accent-amber: #F59E0B;
  --accent-slate: #D4D4D4;
}

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

/* El lienzo bajo el <body> toma el color del pie de página: si la página es más corta
   que la pantalla (p. ej. con el zoom muy alejado), no aparece una franja de otro tono */
html {
  background-color: #0B0B0B;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-primary);
  color: var(--text-main);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Efectos de Iluminación Ambiental Sobria
   Posicionados respecto al centro de la página (no a los bordes de la pantalla),
   para que acompañen al contenido en pantallas muy anchas o con el zoom alejado */
.ambient-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(140px);
  pointer-events: none;
  opacity: 0.15;
}

.ambient-glow-1 {
  top: -100px;
  left: max(20%, calc(50% - 420px));
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, #A3A3A3 0%, transparent 70%);
}

.ambient-glow-2 {
  top: 40%;
  right: max(-50px, calc(50% - 750px));
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #737373 0%, transparent 70%);
}

.ambient-glow-3 {
  bottom: 10%;
  left: max(10%, calc(50% - 560px));
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #8A8A8A 0%, transparent 70%);
}

/* Glassmorphism Refinado */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}

.glass-card-interactive {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.glass-card-interactive:hover {
  transform: translateY(-4px);
  border-color: rgba(163, 163, 163, 0.3);
  box-shadow: 0 20px 35px -15px rgba(23, 23, 23, 0.8), 0 0 20px -5px rgba(163, 163, 163, 0.15);
}

/* Gradientes de Texto de Alto Impacto */
.text-gradient-main {
  background: linear-gradient(135deg, #FFFFFF 0%, #E5E5E5 45%, #A3A3A3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-accent {
  background: linear-gradient(135deg, #E5E5E5 0%, #8A8A8A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-emerald {
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Botones Premium */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #525252 0%, #404040 100%);
  color: #FFFFFF;
  font-weight: 600;
  padding: 0.85rem 1.75rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px 0 rgba(82, 82, 82, 0.39);
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #404040 0%, #262626 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px 0 rgba(82, 82, 82, 0.5);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(38, 38, 38, 0.6);
  color: #E5E5E5;
  font-weight: 600;
  padding: 0.85rem 1.75rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.btn-secondary:hover {
  background: rgba(64, 64, 64, 0.8);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* Botón Sabor El Salvador / WhatsApp */
.btn-whatsapp {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.btn-whatsapp:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* Badge Sobrio */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(23, 23, 23, 0.8);
}

.badge-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-emerald);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Logo de SivarPOS en la Tienda */
.store-logo {
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.45));
}

html.light-theme .store-logo {
  filter: drop-shadow(0 16px 28px rgba(23, 23, 23, 0.18));
}

/* Switch Custom */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #404040;
  transition: .3s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #525252;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

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

.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* Scrollbar Elegante */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #111111;
}

::-webkit-scrollbar-thumb {
  background: #262626;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #404040;
}

/* ============================================================
   7. MODO CLARO (LIGHT THEME) REFINADO
   ============================================================ */
html.light-theme,
html.light-theme body {
  --bg-primary: #E9E9E9;
  --bg-secondary: #F3F3F3;
  --bg-card: rgba(243, 243, 243, 0.95);
  --bg-card-hover: #F7F7F7;
  --border-subtle: rgba(23, 23, 23, 0.08);
  --border-focus: rgba(82, 82, 82, 0.5);
  
  --text-main: #171717;
  --text-muted: #404040;
  --text-dim: #575757;

  background-color: #E9E9E9 !important;
  color: #171717 !important;
}

/* Lienzo bajo el <body> con el color del pie de página en modo claro */
html.light-theme {
  background-color: #E0E0E0 !important;
}

/* Luces ambientales tenues en modo claro */
html.light-theme .ambient-glow {
  opacity: 0.05;
}

/* Header & Navegación en modo claro */
html.light-theme header {
  background-color: rgba(233, 233, 233, 0.92) !important;
  border-bottom-color: #D4D4D4 !important;
  box-shadow: 0 4px 20px -2px rgba(23, 23, 23, 0.04);
}

/* El ícono "S" del logo se mantiene igual que en modo oscuro; solo el texto se oscurece para ser legible */
html.light-theme header a.group span.tracking-tight {
  color: #171717 !important;
}

html.light-theme header a.group span.text-slate-400 {
  color: #575757 !important;
}

html.light-theme nav a {
  color: #525252 !important;
}

html.light-theme nav a:hover {
  color: #171717 !important;
}

html.light-theme #mobile-menu {
  background-color: rgba(233, 233, 233, 0.98) !important;
  border-bottom-color: #D4D4D4 !important;
}

html.light-theme #mobile-menu a {
  color: #404040 !important;
}

html.light-theme #mobile-menu a:hover {
  color: #171717 !important;
}

/* Control de Iconos de Tema (Sol y Luna) */
.theme-icon-sun {
  display: none !important;
  align-items: center;
  justify-content: center;
}

.theme-icon-moon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

html.light-theme .theme-icon-sun {
  display: inline-flex !important;
}

html.light-theme .theme-icon-moon {
  display: none !important;
}

/* Botón de tema en modo claro */
html.light-theme #theme-toggle-btn {
  background-color: #F3F3F3 !important;
  border-color: #C2C2C2 !important;
  color: #171717 !important;
  box-shadow: 0 2px 6px rgba(23, 23, 23, 0.05);
}

html.light-theme #theme-toggle-btn:hover {
  background-color: #E0E0E0 !important;
}

html.light-theme #mobile-menu-btn {
  background-color: #F3F3F3 !important;
  border-color: #C2C2C2 !important;
  color: #171717 !important;
}

html.light-theme #mobile-theme-toggle-btn {
  background-color: #E0E0E0 !important;
  border-color: #C2C2C2 !important;
  color: #171717 !important;
}

/* Tipografía General */
html.light-theme h1,
html.light-theme h2,
html.light-theme h3,
html.light-theme h4 {
  color: #171717 !important;
}

html.light-theme .text-gradient-main {
  background: linear-gradient(135deg, #171717 0%, #262626 50%, #404040 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.light-theme .text-gradient-accent {
  background: linear-gradient(135deg, #262626 0%, #737373 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.light-theme p,
html.light-theme .text-slate-400,
html.light-theme .text-slate-300 {
  color: #404040 !important;
}

html.light-theme .text-slate-500 {
  color: #575757 !important;
}

html.light-theme .text-white {
  color: #171717 !important;
}

/* Badge de Homologación Fiscal en Hero */
html.light-theme .badge-pill {
  background: #F3F3F3 !important;
  border: 1px solid #C2C2C2 !important;
  box-shadow: 0 2px 10px rgba(23, 23, 23, 0.06) !important;
}

html.light-theme .badge-pill * {
  color: #171717 !important;
}

html.light-theme .badge-pulse {
  background-color: #10B981 !important;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7) !important;
}

/* Indicadores de confianza bajo Hero */
html.light-theme #inicio .text-slate-400 {
  color: #404040 !important;
}

html.light-theme #inicio .border-t {
  border-top-color: #D4D4D4 !important;
}

/* Preservar texto blanco en botones de acción y badges oscuros */
html.light-theme .btn-primary,
html.light-theme .btn-primary *,
html.light-theme .btn-whatsapp,
html.light-theme .btn-whatsapp *,
html.light-theme .bg-blue-600 *,
html.light-theme .bg-emerald-600,
html.light-theme .bg-emerald-600 *,
html.light-theme button[type="submit"] *,
html.light-theme .from-blue-600.text-white {
  color: #FFFFFF !important;
}

/* Botón secundario en modo claro */
html.light-theme .btn-secondary {
  background: #F3F3F3 !important;
  color: #171717 !important;
  border: 1px solid #C2C2C2 !important;
  box-shadow: 0 2px 6px rgba(23, 23, 23, 0.04) !important;
}

html.light-theme .btn-secondary span {
  color: #171717 !important;
}

html.light-theme .btn-secondary:hover {
  background: #E0E0E0 !important;
  border-color: #8A8A8A !important;
}

/* Secciones y Separadores */
html.light-theme section {
  border-bottom-color: #D4D4D4 !important;
}

html.light-theme .border-slate-800,
html.light-theme .border-slate-800\/80,
html.light-theme .border-slate-800\/60,
html.light-theme .border-slate-700,
html.light-theme .border-slate-700\/80,
html.light-theme .border-slate-700\/60,
html.light-theme .divide-slate-800\/80 > * + * {
  border-color: #D4D4D4 !important;
}

html.light-theme section.bg-slate-900\/40 {
  background-color: rgba(224, 224, 224, 0.6) !important;
}

/* Tarjetas Glass Panel */
html.light-theme .glass-panel {
  background: #F3F3F3 !important;
  border-color: #D4D4D4 !important;
  box-shadow: 0 4px 20px -2px rgba(23, 23, 23, 0.05), 0 2px 6px -1px rgba(23, 23, 23, 0.03) !important;
}

html.light-theme .glass-panel:hover {
  border-color: #C2C2C2 !important;
  box-shadow: 0 12px 30px -4px rgba(23, 23, 23, 0.09) !important;
}

/* Iconos circulares dentro de cards y en la sección de contacto */
html.light-theme .glass-panel .w-12.h-12.bg-slate-800,
html.light-theme #contacto .w-8.h-8.bg-slate-800 {
  background-color: #E0E0E0 !important;
  border: 1px solid #D4D4D4 !important;
}

/* Colores de acento con alto contraste en modo claro */
html.light-theme .text-emerald-400 {
  color: #047857 !important;
}

html.light-theme .text-blue-400 {
  color: #404040 !important;
}

html.light-theme .text-sky-400 {
  color: #404040 !important;
}

html.light-theme .text-indigo-400 {
  color: #404040 !important;
}

html.light-theme .text-purple-400 {
  color: #404040 !important;
}

html.light-theme .text-amber-400 {
  color: #B45309 !important;
}

/* Badges de secciones con fondos suaves y textos de alto contraste */
html.light-theme .inline-flex.rounded-full.bg-slate-800,
html.light-theme #faq .inline-flex.rounded-full {
  background-color: #E0E0E0 !important;
  border-color: #C2C2C2 !important;
}

html.light-theme .inline-flex.rounded-full.bg-slate-800 span,
html.light-theme #faq .inline-flex.rounded-full span {
  color: #262626 !important;
  font-weight: 700 !important;
}

html.light-theme #facturacion-dte .badge-pill {
  background-color: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
}

html.light-theme #facturacion-dte .badge-pill * {
  color: #047857 !important;
  font-weight: 700 !important;
}

html.light-theme .bg-blue-500\/10 {
  background-color: #E0E0E0 !important;
  border-color: #C2C2C2 !important;
}

html.light-theme .bg-blue-500\/10 span {
  color: #404040 !important;
  font-weight: 700 !important;
}

html.light-theme .bg-emerald-500\/10 {
  background-color: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
}

html.light-theme .bg-emerald-500\/10 span {
  color: #047857 !important;
  font-weight: 700 !important;
}

html.light-theme .bg-sky-500\/10 {
  background-color: #E0E0E0 !important;
  border-color: #C2C2C2 !important;
}

html.light-theme .bg-sky-500\/10 span {
  color: #404040 !important;
  font-weight: 700 !important;
}

html.light-theme .bg-indigo-500\/10 {
  background-color: #E0E0E0 !important;
  border-color: #C2C2C2 !important;
}

html.light-theme .bg-indigo-500\/10 span {
  color: #404040 !important;
  font-weight: 700 !important;
}

html.light-theme .bg-purple-500\/10 {
  background-color: #E0E0E0 !important;
  border-color: #C2C2C2 !important;
}

html.light-theme .bg-purple-500\/10 span {
  color: #404040 !important;
  font-weight: 700 !important;
}

html.light-theme .bg-amber-500\/10 {
  background-color: #FFFBEB !important;
  border-color: #FDE68A !important;
}

html.light-theme .bg-amber-500\/10 span {
  color: #B45309 !important;
  font-weight: 700 !important;
}

/* Flujo de pasos DTE en Sección Facturación */
html.light-theme .flujo-fiscal .bg-slate-900 {
  background-color: #F3F3F3 !important;
  border-color: #D4D4D4 !important;
  box-shadow: 0 2px 6px rgba(23, 23, 23, 0.04) !important;
}

html.light-theme .flujo-fiscal .bg-slate-900 p.text-white {
  color: #171717 !important;
}

html.light-theme .flujo-fiscal .bg-emerald-950\/20 {
  background-color: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
}

html.light-theme .flujo-fiscal .bg-emerald-950\/20 p.text-emerald-300 {
  color: #065F46 !important;
}

/* Planes y Precios */
html.light-theme #planes .scale-105 {
  background-color: #F3F3F3 !important;
  border-color: #737373 !important;
  box-shadow: 0 20px 40px -10px rgba(82, 82, 82, 0.18) !important;
}

html.light-theme #planes .scale-105 h3,
html.light-theme #planes .scale-105 li.font-semibold {
  color: #171717 !important;
}

html.light-theme #planes .bg-emerald-950\/80 {
  background-color: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #047857 !important;
}

/* FAQ Triggers */
html.light-theme .faq-trigger h4 {
  color: #171717 !important;
}

html.light-theme .faq-trigger:hover h4 {
  color: #171717 !important;
}

html.light-theme .faq-content {
  border-top-color: #D4D4D4 !important;
  color: #404040 !important;
}

/* Formulario de Contacto en Modo Claro */
html.light-theme input,
html.light-theme select,
html.light-theme textarea {
  background-color: #F3F3F3 !important;
  color: #171717 !important;
  border: 1px solid #C2C2C2 !important;
}

html.light-theme input:focus,
html.light-theme select:focus,
html.light-theme textarea:focus {
  border-color: #171717 !important;
  box-shadow: 0 0 0 3px rgba(82, 82, 82, 0.15);
}

html.light-theme input::placeholder,
html.light-theme textarea::placeholder {
  color: #8A8A8A !important;
}

/* Footer en Modo Claro */
html.light-theme footer {
  background-color: #E0E0E0 !important;
  border-top-color: #D4D4D4 !important;
}

html.light-theme footer p,
html.light-theme footer a,
html.light-theme footer span {
  color: #575757 !important;
}

html.light-theme footer a:hover,
html.light-theme footer span:hover {
  color: #171717 !important;
}

html.light-theme footer div.bg-blue-600 {
  color: #FFFFFF !important;
}

/* Scrollbar en modo claro */
html.light-theme::-webkit-scrollbar-track {
  background: #EBEBEB;
}

html.light-theme::-webkit-scrollbar-thumb {
  background: #C2C2C2;
}

html.light-theme::-webkit-scrollbar-thumb:hover {
  background: #8A8A8A;
}