/* ================================ */
/* Estilos globales para DataTables */
/* ================================ */

:root {
    /* Ajusta aquí tu paleta global */
    --dt-primary:   #0d6efd; /* Azul eléctrico */
    --dt-dark:      #0b5ed7; /* Azul intenso */
    --dt-accent:    #6c757d; /* Gris oscuro */
    --dt-light:     #e9ecef; /* Gris muy claro */
    --dt-text:      #343a40; /* Gris carbón */
    --dt-radius:    0.4rem;
    --dt-transition: 0.15s;
  }
  
  /* Base de la tabla */
  table.dataTable {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Helvetica Neue', sans-serif;
  }
  
  /* Encabezado */
  table.dataTable thead th {
    background-color: var(--dt-primary);
    color: #fff;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 0.7rem 1rem;
    border-bottom: 3px solid var(--dt-accent);
  }
  
  /* Filas alternas */
  table.dataTable tbody tr:nth-child(even) {
    background-color: var(--dt-light);
  }
  /* Sin cambio de hover en la fila */
  table.dataTable tbody tr:hover {
    background-color: inherit;
  }
  table.dataTable tbody td {
    padding: 0.6rem 1rem;
    color: var(--dt-text);
    border-bottom: 1px solid #e0e0e0;
  }
  
  /* Campo de búsqueda */
  .dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--dt-accent);
    border-radius: var(--dt-radius);
    padding: 0.3rem 0.6rem;
    transition: border var(--dt-transition);
  }
  .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--dt-primary);
    outline: none;
  }
  
  /* Paginación estilo “píldora” */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--dt-accent);
    color: #fff !important;
    border: none;
    border-radius: var(--dt-radius);
    padding: 0.3rem 0.8rem;
    margin: 0 0.2rem;
    transition: background var(--dt-transition), color var(--dt-transition);
    font-size: 0.85rem;
  }
  /* Página activa y hover siempre con texto blanco */
  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--dt-dark) !important;
    color: #fff !important;
  }
  
  /* Texto “Mostrando X de Y” */
  .dataTables_wrapper .dataTables_info {
    color: var(--dt-text);
    font-size: 0.85rem;
    margin-top: 0.5rem;
  }
  
  /* Botones de acción dentro de la tabla (Ver, Editar, etc.) */
  table.dataTable button {
    background: var(--dt-primary);
    color: #fff;
    border: none;
    border-radius: var(--dt-radius);
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    margin-right: 0.3rem;
    transition: background var(--dt-transition);
  }
  table.dataTable button:hover {
    background: var(--dt-dark);
  }