/* Variables CSS para los temas de color (Light y Dark) */
 :root {
    /* Light Mode (inspirado en Facebook) */
    --color-bg-primary-light: #e9ebee; /* Fondo principal claro de la aplicación */
    --color-bg-secondary-light: #f0f2f5; /* Fondo secundario claro (ej. filas pares) de la aplicación */
    --color-text-light: #1c1e21; /* Texto oscuro principal de la aplicación */
    --color-border-light: #dadde1; /* Bordes claros de la aplicación */
    --color-accent-blue-light: #3b5998; /* Azul principal de Facebook */
    --color-accent-hover-light: #2b6cb0; /* Azul de Facebook para hover/seleccion */

    /* Dark Mode */
    --color-bg-primary-dark: #18191a; /* Fondo principal muy oscuro de la aplicación */
    --color-bg-secondary-dark: #242526; /* Fondo secundario oscuro (ej. filas pares) de la aplicación */
    --color-text-dark: #e4e6eb; /* Texto claro principal de la aplicación */
    --color-border-dark: #44474a; /* Bordes oscuros de la aplicación */
    --color-accent-blue-dark: #3b5998; /* Mismo azul de Facebook */
    --color-accent-hover-dark: #2b6cb0; /* Mismo azul de Facebook para hover/seleccion */

    /* Colores específicos para la TABLA (siempre oscura) */
    --color-table-bg: #212529; /* Fondo general de la tabla (dark de Bootstrap) */
    --color-table-row-even-bg: #343a40; /* Fondo para filas pares de la tabla (darker de Bootstrap) */
    --color-table-text: #e9ecef; /* Color de texto para la tabla (white de Bootstrap) */
    --color-table-border: #495057; /* Color de borde para la tabla (gris oscuro de Bootstrap) */
  }

  /* Estilos por defecto del body (Light Mode) */
  body {
    font-family: 'Inter', sans-serif;
    color: var(--color-text-light);
    background-color: var(--color-bg-primary-light);
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para el cambio de tema */
  }

  /* Estilos para el Modo Nocturno del body */
  body.dark-mode {
    color: var(--color-text-dark);
    background-color: var(--color-bg-primary-dark);
  }

  /* Pantalla de carga */
  #loadingScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white; /* Siempre blanco en la pantalla de carga */
  }

  /* Estilos de Tabulator (siempre oscuros y con texto claro) */
  .tabulator {
      background-color: var(--color-table-bg);
      border: 1px solid var(--color-table-border);
      border-radius: 0.5rem;
  }
  .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
      color: #adb5bd; /* Tono de gris oscuro para los títulos de las columnas */
  }
  .tabulator .tabulator-tableHolder .tabulator-row {
      background-color: var(--color-table-bg);
      color: var(--color-table-text);
  }
  .tabulator .tabulator-tableHolder .tabulator-row.tabulator-row-even {
      background-color: var(--color-table-row-even-bg); /* Tono más oscuro para filas pares */
  }
  .tabulator .tabulator-tableHolder .tabulator-row.tabulator-row-odd {
      background-color: var(--color-table-bg); /* Tono base para filas impares */
  }
  .tabulator .tabulator-tableHolder .tabulator-row.tabulator-selected {
      background-color: var(--color-accent-hover-light); /* El color de selección puede mantenerse vibrante */
  }
  .tabulator-paginator {
      background-color: var(--color-table-bg);
      color: var(--color-table-text);
      border-top: 1px solid var(--color-table-border);
      border-bottom-left-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
  }
  .tabulator-paginator button {
      background-color: var(--color-table-border);
      color: var(--color-table-text);
      border: 1px solid var(--color-table-border);
      border-radius: 0.25rem;
  }
  .tabulator-paginator button:hover {
      background-color: var(--color-accent-hover-light);
      color: white;
      border: 1px solid var(--color-accent-hover-light);
  }

  /* Estilos de Modal de Confirmación */
  .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
  }
  .modal-content {
      position: relative; /* Necesario para posicionar el botón de cerrar absolutamente */
      background-color: var(--color-bg-secondary-light); /* Fondo claro por defecto */
      padding: 2rem;
      border-radius: 0.75rem;
      box-shadow: 0 10px 15px rgba(0,0,0,0.2);
      color: var(--color-text-light); /* Texto oscuro por defecto */
      max-width: 90%;
      width: 400px;
      text-align: center;
      transition: background-color 0.3s ease, color 0.3s ease;
  }
  body.dark-mode .modal-content {
      background-color: var(--color-bg-secondary-dark); /* Fondo oscuro para el modal en modo oscuro */
      color: var(--color-text-dark); /* Texto claro para el modal en modo oscuro */
  }
  .modal-buttons {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-top: 1.5rem;
  }
  .modal-close-button {
    position: absolute;
    top: 0.75rem; /* 12px */
    right: 0.75rem; /* 12px */
    background: none;
    border: none;
    font-size: 1.5rem; /* 24px */
    font-weight: bold;
    cursor: pointer;
    color: #6b7280; /* gray-500 */
    transition: color 0.2s ease-in-out;
  }
  .modal-close-button:hover {
    color: #1f2937; /* gray-800 */
  }
  body.dark-mode .modal-close-button {
    color: #d1d5db; /* gray-300 */
  }
  body.dark-mode .modal-close-button:hover {
    color: white;
  }

  /* Animaciones para los mensajes flotantes */
  @keyframes fade-in-down {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-out-up {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-20px); }
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.5s ease-out forwards;
  }
  .animate-fade-out-up {
    animation: fade-out-up 0.5s ease-out forwards;
  }

  /* Estilos para los formularios (registro de producto) */
  .product-form-container {
    background-color: var(--color-bg-secondary-light);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 2.5rem;
    margin-top: 2rem;
  }
  body.dark-mode .product-form-container {
    background-color: var(--color-bg-secondary-dark);
  }
  .product-form-container h3 {
    color: var(--color-text-light);
  }
  body.dark-mode .product-form-container h3 {
    color: var(--color-text-dark);
  }
  .product-form-container .form-label {
    color: var(--color-text-light);
  }
  body.dark-mode .product-form-container .form-label {
    color: var(--color-text-dark);
  }
  .product-form-container .form-control {
    background-color: var(--color-bg-primary-light);
    border-color: var(--color-border-light);
    color: var(--color-text-light);
  }
  body.dark-mode .product-form-container .form-control {
    background-color: var(--color-table-row-even-bg); /* Use a darker background for inputs */
    border-color: var(--color-border-dark);
    color: var(--color-text-dark);
  }
  .product-form-container .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(59, 89, 152, 0.25); /* Accent blue shadow */
    border-color: var(--color-accent-blue-light);
  }
  body.dark-mode .product-form-container .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(59, 89, 152, 0.4);
    border-color: var(--color-accent-blue-dark);
  }