/**
 * gestion-table.css
 * Estilos compartidos para tablas de gestión del sistema CORNARE
 * Usado en: Usuarios, Entidades, TiposResiduos, Sedes, PersonasContacto, etc.
 * Versión: 1.0.0
 */

/* ==========================================================================
   TABLA BASE DE GESTIÓN
   ========================================================================== */
.gestion-table {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0;
}

/* Header verde CORNARE */
.gestion-table thead th {
  background: #00833e !important;
  color: white !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  padding: 1rem 0.75rem;
  border: none !important;
  white-space: nowrap;
  vertical-align: middle;
}

.gestion-table thead th i {
  margin-right: 0.35rem;
  opacity: 0.9;
}

/* Filas con animación */
.gestion-table tbody tr {
  transition: all 0.2s ease;
  border-bottom: 1px solid #e9ecef;
}

.gestion-table tbody tr:hover {
  background-color: rgba(0, 144, 69, 0.08) !important;
  transform: translateX(3px);
}

.gestion-table tbody td {
  padding: 1rem 0.75rem;
  vertical-align: middle;
}

/* ==========================================================================
   BADGES Y ETIQUETAS
   ========================================================================== */

/* Badge de código/tipo con icono */
.codigo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.codigo-badge:hover {
  transform: scale(1.05);
}

.codigo-badge i {
  font-size: 1rem;
}

/* Badge de orden circular */
.orden-badge {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #6c757d;
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Badge de característica circular */
.caracteristica-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.8rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.caracteristica-badge:hover {
  transform: scale(1.15);
}

.caracteristica-peligroso {
  background: #c82333;
  color: white;
}

.caracteristica-especializado {
  background: #ffc107;
  color: #212529;
}

/* ==========================================================================
   CONTENEDORES DE INFORMACIÓN
   ========================================================================== */

/* Contenedor de nombre con descripción */
.nombre-container {
  max-width: 300px;
}

.nombre-titulo {
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.25rem;
}

.nombre-descripcion {
  font-size: 0.8rem;
  color: #6c757d;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Información de usuario */
.info-principal {
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.15rem;
}

.info-secundaria {
  font-size: 0.8rem;
  color: #6c757d;
  line-height: 1.3;
}

.info-secundaria i {
  width: 16px;
  text-align: center;
  margin-right: 0.25rem;
}

/* Tag de normativa/etiqueta pequeña */
.normativa-tag {
  font-size: 0.7rem;
  color: #6c757d;
  background: #f8f9fa;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.25rem;
  display: inline-block;
}

/* ==========================================================================
   BOTONES DE ACCIÓN CIRCULARES
   ========================================================================== */

.acciones-container {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  flex-wrap: nowrap;
}

.btn-accion,
.btn.btn-accion {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  border: none !important;
}

/* Forzar iconos blancos dentro de los botones de acción */
.btn-accion i,
.btn-accion .fas,
.btn-accion .far,
.btn-accion .fa,
.acciones-container .btn-accion i {
  color: white !important;
  background: transparent !important;
}

.btn-accion:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-accion:active {
  transform: translateY(0);
}

/* Variantes de color */
.btn-accion.btn-accion-ver,
.btn.btn-accion.btn-accion-ver,
button.btn-accion-ver,
a.btn-accion-ver {
  background: #17a2b8 !important;
  background-color: #17a2b8 !important;
  color: white !important;
}

.btn-accion.btn-accion-ver:hover,
.btn.btn-accion.btn-accion-ver:hover,
button.btn-accion-ver:hover,
a.btn-accion-ver:hover {
  background: #138496 !important;
  background-color: #138496 !important;
  color: white !important;
}

.btn-accion-editar,
.btn.btn-accion-editar {
  background: #0d6efd !important;
  color: white !important;
}

.btn-accion-editar:hover,
.btn.btn-accion-editar:hover {
  background: #0b5ed7 !important;
  color: white !important;
}

.btn-accion.btn-accion-eliminar,
.btn.btn-accion.btn-accion-eliminar,
button.btn-accion-eliminar,
a.btn-accion-eliminar {
  background: #dc3545 !important;
  background-color: #dc3545 !important;
  color: white !important;
}

.btn-accion.btn-accion-eliminar:hover,
.btn.btn-accion.btn-accion-eliminar:hover,
button.btn-accion-eliminar:hover,
a.btn-accion-eliminar:hover {
  background: #c82333 !important;
  background-color: #c82333 !important;
  color: white !important;
}

/* Botón Activar (verde) */
.btn-accion.btn-accion-activar,
.btn.btn-accion.btn-accion-activar,
button.btn-accion-activar,
a.btn-accion-activar {
  background: #28a745 !important;
  background-color: #28a745 !important;
  color: white !important;
}

.btn-accion.btn-accion-activar:hover,
.btn.btn-accion.btn-accion-activar:hover,
button.btn-accion-activar:hover,
a.btn-accion-activar:hover {
  background: #218838 !important;
  background-color: #218838 !important;
  color: white !important;
}

.btn-accion.btn-accion-descargar,
.btn.btn-accion.btn-accion-descargar,
button.btn-accion-descargar,
a.btn-accion-descargar {
  background: #28a745 !important;
  background-color: #28a745 !important;
  color: white !important;
}

.btn-accion.btn-accion-descargar:hover,
.btn.btn-accion.btn-accion-descargar:hover,
button.btn-accion-descargar:hover,
a.btn-accion-descargar:hover {
  background: #218838 !important;
  background-color: #218838 !important;
  color: white !important;
}

.btn-accion-activar,
.btn.btn-accion-activar {
  background: #28a745 !important;
  color: white !important;
}

.btn-accion-activar:hover,
.btn.btn-accion-activar:hover {
  background: #218838 !important;
  color: white !important;
}

.btn-accion-desactivar,
.btn.btn-accion-desactivar {
  background: #dc3545 !important;
  color: white !important;
}

.btn-accion-desactivar:hover,
.btn.btn-accion-desactivar:hover {
  background: #c82333 !important;
  color: white !important;
}

.btn-accion-aprobar {
  background: #28a745;
  color: white;
}

.btn-accion-aprobar:hover {
  background: #218838;
  color: white;
}

.btn-accion-rechazar {
  background: #dc3545;
  color: white;
}

.btn-accion-rechazar:hover {
  background: #c82333;
  color: white;
}

/* ==========================================================================
   RESUMEN / ESTADÍSTICAS
   ========================================================================== */

.resumen-container {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  border-left: 4px solid #00833e;
}

.resumen-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: white;
  border-radius: 50px;
  margin-right: 0.75rem;
  font-size: 0.85rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   DATATABLES SOBRESCRITURAS
   ========================================================================== */

/* Forzar estilos en tablas con DataTables */
table.dataTable.gestion-table thead,
table.dataTable.gestion-table thead tr {
  background: #00833e !important;
}

table.dataTable.gestion-table thead th {
  background: #00833e !important;
  color: white !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Eliminar flechas de sorting por defecto */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-image: none !important;
}

/* Eliminar pseudo-elementos ::before de DataTables (evita flechas duplicadas) */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before {
  content: none !important;
  display: none !important;
}

/* Flechas de ordenamiento personalizadas (solo ::after) */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 5px;
  opacity: 0.7;
}

table.dataTable thead .sorting::after {
  content: "\f0dc";
}

table.dataTable thead .sorting_asc::after {
  content: "\f0de";
  opacity: 1;
}

table.dataTable thead .sorting_desc::after {
  content: "\f0dd";
  opacity: 1;
}

/* Paginación verde */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #000000 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #000000 !important;
  background: #e9ecef !important;
  border-color: #dee2e6 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #ffffff !important;
  background: #00833e !important;
  border-color: #00833e !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #6c757d !important;
}

/* ==========================================================================
   BOTONES DE EXPORTACIÓN
   ========================================================================== */

.btn-export-excel {
  background-color: white !important;
  color: #198754 !important;
  border: 1px solid #00833e !important;
  transition: all 0.3s ease;
  min-width: 100px;
}

.btn-export-excel:hover {
  background-color: #00833e !important;
  color: white !important;
  border-color: #00833e !important;
}

.btn-export-print {
  background-color: white !important;
  color: #6c757d !important;
  border: 1px solid #6c757d !important;
  transition: all 0.3s ease;
  min-width: 100px;
}

.btn-export-print:hover {
  background-color: #6c757d !important;
  color: white !important;
  border-color: #6c757d !important;
}

/* Contenedor de botones DataTables */
.dt-buttons {
  gap: 0.5rem;
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
}

div.dt-buttons {
  display: inline-flex !important;
  margin-left: auto !important;
}

/* ==========================================================================
   CARD DE TABLA
   ========================================================================== */

.gestion-card {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.8);
}

.gestion-card .card-header {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  padding: 1rem 1.25rem;
}

.gestion-card .card-body {
  padding: 1rem 1.25rem;
}

/* Cards con tabla que necesitan padding 0 en el body */
.gestion-card.card-tabla .card-body {
  padding: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .gestion-table thead th {
    padding: 0.75rem 0.5rem;
    font-size: 0.75rem;
  }

  .gestion-table tbody td {
    padding: 0.75rem 0.5rem;
  }

  .acciones-container {
    flex-direction: column;
    gap: 0.25rem;
  }

  .btn-accion {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .codigo-badge {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

@keyframes fadeInRow {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gestion-table tbody tr {
  animation: fadeInRow 0.3s ease forwards;
}

.gestion-table tbody tr:nth-child(1) {
  animation-delay: 0.02s;
}
.gestion-table tbody tr:nth-child(2) {
  animation-delay: 0.04s;
}
.gestion-table tbody tr:nth-child(3) {
  animation-delay: 0.06s;
}
.gestion-table tbody tr:nth-child(4) {
  animation-delay: 0.08s;
}
.gestion-table tbody tr:nth-child(5) {
  animation-delay: 0.1s;
}
.gestion-table tbody tr:nth-child(6) {
  animation-delay: 0.12s;
}
.gestion-table tbody tr:nth-child(7) {
  animation-delay: 0.14s;
}
.gestion-table tbody tr:nth-child(8) {
  animation-delay: 0.16s;
}
.gestion-table tbody tr:nth-child(9) {
  animation-delay: 0.18s;
}
.gestion-table tbody tr:nth-child(10) {
  animation-delay: 0.2s;
}

/* ==========================================================================
   FILTRO UNIVERSAL - CAMPO DE BÚSQUEDA DATATABLES
   ========================================================================== */

/* Wrapper de DataTables - margen superior para separar del borde del card */
.dataTables_wrapper {
  padding: 1rem 1rem 0 1rem;
}

/* Contenedor del filtro - ocupa todo el ancho disponible */
.dataTables_filter {
  width: 100%;
  text-align: left !important;
}

.dataTables_filter label {
  width: 100%;
  display: flex;
  align-items: center;
}

/* Campo de búsqueda principal - diseño prominente */
.dataTables_filter input[type="search"] {
  width: 100% !important;
  padding: 0.875rem 1rem 0.875rem 2.75rem !important;
  font-size: 1rem !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 0.875rem center !important;
  background-size: 1.125rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.dataTables_filter input[type="search"]:focus {
  border-color: #00833e !important;
  box-shadow: 0 0 0 3px rgba(0, 131, 62, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  outline: none !important;
}

.dataTables_filter input[type="search"]::placeholder {
  color: #9e9e9e !important;
  font-weight: 400 !important;
}

/* Ocultar el botón X nativo del input search en WebKit */
.dataTables_filter input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 1rem;
  width: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E")
    center/contain no-repeat;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.dataTables_filter input[type="search"]::-webkit-search-cancel-button:hover {
  opacity: 1;
}

/* Botones de exportación DataTables */
.dt-buttons {
  display: flex !important;
  gap: 0.5rem !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
}

.dt-buttons .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.dt-buttons .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Información de registros y paginación */
.dataTables_info {
  font-size: 0.875rem;
  color: #6c757d;
  padding-top: 0.75rem;
}

.dataTables_length {
  padding-top: 0.5rem;
}

.dataTables_length label {
  font-size: 0.875rem;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dataTables_length select {
  padding: 0.375rem 2rem 0.375rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid #ced4da;
  border-radius: 6px;
  background-color: #fff;
}

.dataTables_paginate {
  padding-top: 0.5rem;
}

.dataTables_paginate .paginate_button {
  padding: 0.375rem 0.75rem !important;
  margin: 0 0.125rem !important;
  border-radius: 6px !important;
  font-size: 0.875rem !important;
}

.dataTables_paginate .paginate_button.current {
  background: #00833e !important;
  border-color: #00833e !important;
  color: white !important;
}

.dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: #f0f0f0 !important;
  border-color: #dee2e6 !important;
  color: #00833e !important;
}

/* Responsive para el filtro */
@media (max-width: 768px) {
  .dataTables_filter input[type="search"] {
    padding: 0.75rem 1rem 0.75rem 2.5rem !important;
    font-size: 0.9rem !important;
  }

  .dt-buttons {
    justify-content: center !important;
    margin-top: 0.5rem !important;
  }

  .dt-buttons .btn {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
}

/* ==========================================================================
   SCROLL HORIZONTAL PARA DATATABLES
   ========================================================================== */

/* Contenedor de scroll horizontal personalizado */
.gestion-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #00833e #e9ecef;
}

.gestion-table-scroll::-webkit-scrollbar {
  height: 10px;
}

.gestion-table-scroll::-webkit-scrollbar-track {
  background: #e9ecef;
  border-radius: 5px;
}

.gestion-table-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #00833e 0%, #006b32 100%);
  border-radius: 5px;
  border: 2px solid #e9ecef;
}

.gestion-table-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #006b32 0%, #004d25 100%);
}

/* Asegurar que la tabla tenga ancho mínimo para activar scroll */
.gestion-table-scroll .gestion-table {
  min-width: 100%;
  width: max-content;
}

/* Evitar doble scroll en contenedores padre */
.card-body .dataTables_wrapper {
  overflow: visible;
}

.table-responsive {
  overflow: visible !important;
}

/* Prevenir scroll horizontal en el body cuando hay tablas DataTables */
body:has(.gestion-table-scroll) {
  overflow-x: hidden;
}

/* Contenedor principal de la página no debe tener scroll horizontal */
.container-fluid:has(.gestion-table) {
  overflow-x: visible;
}

/* Card que contiene la tabla no debe tener scroll adicional */
.card:has(.gestion-table) {
  overflow: visible;
}

.card:has(.gestion-table) .card-body {
  overflow: visible;
}

/* ==========================================================================
   TABLA CON COLUMNAS FIJAS Y SCROLL HORIZONTAL PARA INDICADORES
   ========================================================================== */

/* Contenedor principal de tabla con scroll */
.tabla-indicadores-container {
  position: relative;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #00833e #e9ecef;
}

.tabla-indicadores-container::-webkit-scrollbar {
  height: 8px;
}

.tabla-indicadores-container::-webkit-scrollbar-track {
  background: #e9ecef;
  border-radius: 4px;
}

.tabla-indicadores-container::-webkit-scrollbar-thumb {
  background: #00833e;
  border-radius: 4px;
}

.tabla-indicadores-container::-webkit-scrollbar-thumb:hover {
  background: #006b32;
}

/* Tabla con indicadores */
.gestion-table.tabla-con-indicadores {
  min-width: 1400px; /* Ancho mínimo para asegurar scroll cuando sea necesario */
}

/* Columnas de indicadores - agrupación visual */
.gestion-table .th-indicador,
.gestion-table .td-indicador {
  background-color: rgba(0, 131, 62, 0.03);
  border-left: 1px solid rgba(0, 131, 62, 0.15);
}

.gestion-table thead .th-indicador {
  background: linear-gradient(135deg, #006b32 0%, #00833e 100%) !important;
  font-size: 0.75rem;
  padding: 0.75rem 0.5rem;
}

.gestion-table thead .th-indicador:first-of-type {
  border-left: 2px solid rgba(255, 255, 255, 0.3);
}

/* Header de grupo de indicadores */
.gestion-table thead .th-grupo-indicadores {
  background: linear-gradient(135deg, #004d25 0%, #006b32 100%) !important;
  text-align: center;
  font-size: 0.7rem;
  padding: 0.5rem;
  letter-spacing: 1px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/* Celdas de indicadores con formato numérico */
.gestion-table .td-indicador {
  text-align: right;
  font-family: "Roboto Mono", "Consolas", monospace;
  font-size: 0.85rem;
  white-space: nowrap;
  padding: 0.75rem 0.5rem;
}

.gestion-table .td-indicador .indicador-valor {
  display: block;
  font-weight: 600;
  color: #212529;
}

.gestion-table .td-indicador .indicador-unidad {
  display: block;
  font-size: 0.7rem;
  color: #6c757d;
  font-weight: 400;
}

/* Indicador con icono */
.gestion-table .td-indicador .indicador-con-icono {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.gestion-table .td-indicador .indicador-con-icono i {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* Colores semánticos para indicadores */
.gestion-table .td-indicador.indicador-positivo {
  color: #198754;
}

.gestion-table .td-indicador.indicador-negativo {
  color: #dc3545;
}

.gestion-table .td-indicador.indicador-neutro {
  color: #0d6efd;
}

.gestion-table .td-indicador.indicador-warning {
  color: #fd7e14;
}

/* Porcentajes con badge */
.indicador-porcentaje {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
}

.indicador-porcentaje.excelente {
  background: rgba(25, 135, 84, 0.15);
  color: #198754;
}

.indicador-porcentaje.bueno {
  background: rgba(13, 110, 253, 0.15);
  color: #0d6efd;
}

.indicador-porcentaje.regular {
  background: rgba(255, 193, 7, 0.2);
  color: #997404;
}

.indicador-porcentaje.bajo {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
}

/* Mini badges para indicadores */
.indicador-badge {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  margin-left: 0.25rem;
}

.indicador-badge.kg {
  background: #e7f5ff;
  color: #0c8599;
}

.indicador-badge.ton {
  background: #fff3cd;
  color: #856404;
}

.indicador-badge.pct {
  background: #d1e7dd;
  color: #0f5132;
}

/* Tooltip de ayuda para columnas de indicadores */
.th-indicador[data-bs-toggle="tooltip"] {
  cursor: help;
}

/* Separador visual entre datos básicos e indicadores */
.gestion-table .th-separador,
.gestion-table .td-separador {
  width: 4px !important;
  min-width: 4px !important;
  max-width: 4px !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #00833e 0%, #004d25 100%) !important;
  border: none !important;
}

/* Eliminar flechas de ordenamiento en columnas separadoras y no ordenables */
.gestion-table .th-separador::after,
.gestion-table .th-separador::before,
table.dataTable thead .th-separador.sorting::after,
table.dataTable thead .th-separador.sorting_asc::after,
table.dataTable thead .th-separador.sorting_desc::after {
  content: none !important;
  display: none !important;
}

/* Evitar que columnas no ordenables muestren flechas */
table.dataTable thead th.sorting_disabled::after,
table.dataTable thead th.sorting_disabled::before {
  content: none !important;
  display: none !important;
}

.gestion-table tbody .td-separador {
  background: linear-gradient(
    180deg,
    rgba(0, 131, 62, 0.3) 0%,
    rgba(0, 77, 37, 0.3) 100%
  ) !important;
}

/* Responsive para tablas con indicadores */
@media (max-width: 1200px) {
  .gestion-table.tabla-con-indicadores {
    font-size: 0.85rem;
  }

  .gestion-table .td-indicador {
    font-size: 0.8rem;
    padding: 0.5rem 0.35rem;
  }

  .gestion-table thead .th-indicador {
    font-size: 0.7rem;
    padding: 0.5rem 0.35rem;
  }
}

/* Indicador de scroll horizontal */
.scroll-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 131, 62, 0.1),
    transparent
  );
  color: #00833e;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.scroll-indicator i {
  animation: scrollHint 1.5s ease-in-out infinite;
}

@keyframes scrollHint {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

/* Ocultar indicador de scroll en pantallas grandes */
@media (min-width: 1600px) {
  .scroll-indicator {
    display: none;
  }
}
/* ==========================================================================
   FILTRO DE TIPO DE ENTIDAD EN TABLAS DE REPORTES
   ========================================================================== */

/* Estilo del select de filtro en header */
.filtro-tipo-select {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-weight: 500;
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  transition: all 0.2s ease;
}

.filtro-tipo-select:focus {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
  color: white;
}

.filtro-tipo-select option {
  background-color: #00833e;
  color: white;
}

/* Contenedor del filtro */
.filtro-tipo-entidad {
  background: rgba(0, 0, 0, 0.1);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
}

/* Columnas dinámicas según tipo de entidad */
.col-gestor,
.col-generador {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Cuando se ocultan las columnas */
.col-gestor.hidden,
.col-generador.hidden {
  display: none !important;
}

/* Indicador visual del tipo de entidad seleccionado */
.filtro-tipo-entidad::before {
  content: "";
  display: none;
}

/* Responsive del filtro */
@media (max-width: 768px) {
  .filtro-tipo-entidad {
    width: 100%;
    justify-content: center;
  }

  .filtro-tipo-select {
    width: 100%;
  }
}