/* Dark Mode */
  [data-theme="dark"] body {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
  }

  [data-theme="dark"] .background {
    background-color: #1e293b;
  }
  
  [data-theme="dark"] .navbar-dropdown {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
  }

  [data-theme="dark"] .hero.is-primary {
    background-color: #1e293b !important;
  }
  
  [data-theme="dark"] .custom-links {
    color: #e2e8f0 !important;
    transition: color 0.4s ease !important;
    background-color: transparent !important;
    cursor: pointer !important;
  }
  
  [data-theme="dark"] .custom-links:hover {
    color: #facc15 !important;
    background-color: transparent !important;
  }
  
  [data-theme="dark"] .navbar {
    background-color: #1e293b !important;
  }

  [data-theme="dark"] .footer {
    background-color: #1e293b !important;
  }

  [data-theme="dark"] .dark-letters {
    color: #e2e8f0 !important;
  }
  
  [data-theme="dark"] .navbar-link::after {
    border-color: #e2e8f0 !important;
  }
  
  [data-theme="dark"] .navbar-link:hover::after,
  [data-theme="dark"] .navbar-link.is-active::after {
    border-color: #facc15 !important;
  }

  [data-theme="dark"] .button.is-primary {
    background-color: #e4ba12 !important;
    color: #ffffff !important;
  }
  
  [data-theme="dark"] .button.is-primary:hover {
    background-color: #cca819 !important;
  }
  
  [data-theme="dark"] .button.is-light {
    background-color: #38bdf8 !important;
    color: #0f172a !important;
  }
  
  [data-theme="dark"] .button.is-light:hover {
    background-color: #0ea5e9 !important;
  }
  
  [data-theme="dark"] .button.is-danger {
    background-color: #ef4444 !important;
    color: #ffffff !important;
  }
  
  [data-theme="dark"] .button.is-danger:hover {
    background-color: #dc2626 !important;
  }
  
  [data-theme="dark"] .tarjetas {
    background-color: #1e293b;
    color: #e2e8f0;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  
  [data-theme="dark"] .tarjetas:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.05);
    cursor: pointer;
  }
  
  /* Tabla modo oscuro */
  /* Dark background para tabla completa */
[data-theme="dark"] .dark-table {
  background-color: transparent;
  color: #e2e8f0;
}

/* Encabezado */
[data-theme="dark"] .dark-table thead {
  background-color: #1f2937;
}

/* Celdas */
[data-theme="dark"] .dark-table th,
[data-theme="dark"] .dark-table td {
  background-color: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}

/* Rayado */
[data-theme="dark"] .dark-table.is-striped tbody tr:nth-child(odd) {
  background-color: #1b2432;
}

/* Hover */
[data-theme="dark"] .dark-table tbody tr:hover {
  background-color: #273549;
}

/* Inputs */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #1e293b;  /* fondo acorde al dark theme */
  color: #e2e8f0;             /* texto claro */
  border: 1px solid #334155;  /* borde sutil */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #94a3b8; /* gris azulado suave */
}

/* Resaltado de cabecera */
[data-theme="dark"] .highlight-header {
    background-color: #334155 !important; /* gris oscuro */
    outline: 2px solid #e2e8f0;
    outline-offset: -2px;
  }
  
  /* Columnas sticky en modo oscuro */
  [data-theme="dark"] .tabla-sticky .sticky-col {
    background-color: #1e293b !important;
  }
  
  /* Fila en foco en modo oscuro */
  [data-theme="dark"] .tabla-sticky tr:focus-within {
    background-color: #334155 !important;
    outline: 2px solid #e2e8f0;
    outline-offset: -2px;
  }
  
  /* Referencia y artículo en foco */
  [data-theme="dark"] .tabla-sticky tr:focus-within .col-ref,
  [data-theme="dark"] .tabla-sticky tr:focus-within .col-art {
    background-color: #334155 !important;
    box-shadow:
      inset 0 2px 0 #e2e8f0,  /* borde superior amarillo */
      inset 0 -2px 0 #e2e8f0; /* borde inferior amarillo */
  }
  
  /* Inputs en foco */
  [data-theme="dark"] .tabla-sticky input:focus {
    border-color: #e2e8f0 !important;
    box-shadow: 0 0 0 1px #e2e8f0 !important;
    outline: none !important;
  }

  /* Scrollbar en modo oscuro - navegadores WebKit (Chrome, Edge, Safari) */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #1e293b;  /* color de fondo de la pista */
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: #475569; /* color del "pulgar" (la parte arrastrable) */
  border-radius: 6px;
  border: 2px solid #1e293b; /* borde que da separación con la pista */
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: #64748b;
}

/* Firefox */
[data-theme="dark"] {
  scrollbar-color: #475569 #1e293b; /* thumb y track */
  scrollbar-width: thin;
}