/**
 * Compact Tables Override CSS
 *
 * Este archivo hace override a los estilos de tablas de Drupal (Gin y DXPR themes)
 * para hacerlas lo más compactas posible.
 *
 * Cambios principales:
 * - Reducción de tamaño de fuente en tablas (al menos 2pt menos)
 * - Reducción de padding, margin y spacing al mínimo
 * - Botones más pequeños dentro de tablas
 * - Compactación general de espaciado
 */

/* ========================================
   TABLAS - ESTILOS GENERALES COMPACTOS
   ======================================== */

/* Reducir tamaño de fuente base en todas las tablas */
table,
table * {
  font-size: 11px !important; /* Reducido de 14px a 11px (3px = ~2.25pt menos) */
  line-height: 1.2 !important; /* Líneas más compactas */
}

/* Headers de tabla más compactos */
table th {
  padding: 4px 6px !important; /* Reducido de 16px a 4-6px */
  height: auto !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  vertical-align: middle !important;
}

/* Celdas de tabla más compactas */
table tbody td,
table td {
  padding: 3px 6px !important; /* Reducido significativamente */
  height: auto !important;
  vertical-align: middle !important;
}

/* Eliminar espaciado extra en filas */
table tbody tr,
table tr {
  height: auto !important;
  min-height: unset !important;
}

/* Reducir espacio entre tablas y elementos alrededor */
table {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

/* Headers sortables más compactos */
.sortable-heading {
  padding: 3px 6px !important;
}

.sortable-heading > a {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

/* ========================================
   BOTONES DENTRO DE TABLAS - COMPACTOS
   ======================================== */

/* Todos los botones dentro de tablas más pequeños */
table .button,
table button,
table .btn,
table input[type="submit"],
table input[type="button"],
table .form-submit,
table .action-link,
table .dropbutton,
table .dropbutton__toggle,
table .dropbutton__item > * {
  font-size: 10px !important; /* Fuente muy pequeña para botones */
  padding: 2px 6px !important; /* Padding mínimo */
  min-height: 20px !important; /* Altura mínima reducida */
  height: auto !important;
  line-height: 1.2 !important;
  margin: 1px 2px !important; /* Margen mínimo */
  border-width: 1px !important;
  border-radius: 3px !important;
}

/* Botones primarios en tablas */
table .button--primary,
table .button.form-submit {
  padding: 2px 6px !important;
  font-size: 10px !important;
}

/* Botones pequeños aún más compactos */
table .button--small,
table .button--extrasmall {
  font-size: 9px !important;
  padding: 1px 4px !important;
  min-height: 16px !important;
}

/* Dropbuttons más compactos */
table .dropbutton-wrapper,
table .dropbutton {
  min-height: 20px !important;
}

table .dropbutton .dropbutton-widget {
  padding: 0 !important;
}

table .dropbutton-multiple .dropbutton {
  padding: 0 !important;
  margin: 0 !important;
}

/* Action links más compactos */
table .action-link {
  padding: 2px 4px !important;
  font-size: 10px !important;
}

/* ========================================
   CAMPOS DE FORMULARIO EN TABLAS
   ======================================== */

/* Inputs y selects más compactos */
table input[type="text"],
table input[type="number"],
table input[type="email"],
table input[type="password"],
table select,
table textarea,
table .form-text,
table .form-select,
table .form-number,
table .form-email {
  font-size: 11px !important;
  padding: 2px 4px !important;
  min-height: 22px !important;
  height: auto !important;
  line-height: 1.2 !important;
}

/* Checkboxes y radios */
table input[type="checkbox"],
table input[type="radio"],
table .form-checkbox,
table .form-radio {
  width: 14px !important;
  height: 14px !important;
  margin: 0 2px !important;
}

/* Form items en tablas */
table .form-item,
table .form-type-checkbox,
table .form-type-radio {
  margin: 2px 0 !important;
  padding: 0 !important;
}

/* Labels en tablas */
table label,
table .form-item__label {
  font-size: 11px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  line-height: 1.2 !important;
}

/* ========================================
   TABLAS ESPECÍFICAS DE DRUPAL
   ======================================== */

/* Views tables */
.views-table th,
.views-table td {
  padding: 3px 6px !important;
  font-size: 11px !important;
}

/* Field multiple tables */
.field-multiple-table th {
  padding: 4px 6px !important;
  font-size: 11px !important;
}

.field-multiple-table td {
  padding: 3px 6px !important;
}

/* Tabledrag (filas arrastrables) */
.draggable a.tabledrag-handle {
  width: 20px !important;
  height: 20px !important;
  padding: 2px !important;
  margin: 0 2px !important;
}

.tabledrag-handle .handle {
  width: 16px !important;
  height: 16px !important;
}

/* Sticky headers más compactos */
table.sticky-header th,
table.position-sticky th,
table.gin--sticky-table-header th {
  padding: 4px 6px !important;
  font-size: 11px !important;
}

/* ========================================
   OPERACIONES Y ACCIONES EN TABLAS
   ======================================== */

/* Columna de operaciones más compacta */
table .views-field-operations,
table td.views-field-operations,
table .field-operations,
td.operations {
  white-space: nowrap !important;
  padding: 2px 4px !important;
}

/* Enlaces dentro de operations */
table .views-field-operations a,
table td.views-field-operations a,
table .field-operations a,
td.operations a {
  font-size: 10px !important;
  padding: 2px 4px !important;
  margin: 0 1px !important;
  display: inline-block !important;
}

/* ========================================
   CELDAS DE SELECCIÓN (BULK OPERATIONS)
   ======================================== */

/* Celdas de checkbox para bulk operations */
td.views-field-bulk-form,
th.select-all,
.views-field-views-bulk-operations-bulk-form {
  width: 24px !important;
  padding: 2px 4px !important;
  text-align: center !important;
}

/* ========================================
   PAGINACIÓN Y ELEMENTOS AUXILIARES
   ======================================== */

/* Table wrapper sin padding extra */
.table-responsive,
.gin-table-scroll-wrapper {
  padding: 0 !important;
  margin: 4px 0 !important;
}

/* Pager más compacto */
.pager {
  font-size: 11px !important;
  margin: 4px 0 !important;
  padding: 4px 0 !important;
}

.pager__item,
.pager__link {
  padding: 2px 6px !important;
  font-size: 11px !important;
  margin: 0 2px !important;
}

/* ========================================
   SCROLL HORIZONTAL PARA TABLAS ANCHAS
   ======================================== */

/* Wrapper con scroll horizontal automático */
.table-responsive,
.gin-table-scroll-wrapper,
.views-element-container,
.view-content,
div:has(> table) {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch !important; /* Smooth scrolling en iOS */
}

/* Asegurar que las tablas respeten el contenedor */
table {
  max-width: 100% !important;
  width: auto !important;
  display: table !important;
}

/* Estilo para el scrollbar */
.table-responsive::-webkit-scrollbar,
.gin-table-scroll-wrapper::-webkit-scrollbar,
.views-element-container::-webkit-scrollbar,
.view-content::-webkit-scrollbar {
  height: 8px !important;
}

.table-responsive::-webkit-scrollbar-track,
.gin-table-scroll-wrapper::-webkit-scrollbar-track,
.views-element-container::-webkit-scrollbar-track,
.view-content::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 4px !important;
}

.table-responsive::-webkit-scrollbar-thumb,
.gin-table-scroll-wrapper::-webkit-scrollbar-thumb,
.views-element-container::-webkit-scrollbar-thumb,
.view-content::-webkit-scrollbar-thumb {
  background: #888 !important;
  border-radius: 4px !important;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.gin-table-scroll-wrapper::-webkit-scrollbar-thumb:hover,
.views-element-container::-webkit-scrollbar-thumb:hover,
.view-content::-webkit-scrollbar-thumb:hover {
  background: #555 !important;
}

/* Para navegadores Firefox */
.table-responsive,
.gin-table-scroll-wrapper,
.views-element-container,
.view-content {
  scrollbar-width: thin !important;
  scrollbar-color: #888 #f1f1f1 !important;
}

/* Prevenir que el contenido se desborde */
.region-content,
.block-system-main-block,
.layout-content {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Indicador visual de scroll (sombra) */
.table-responsive,
.gin-table-scroll-wrapper {
  position: relative !important;
}

.table-responsive::after,
.gin-table-scroll-wrapper::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 8px !important;
  width: 20px !important;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.05)) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}

/* Mostrar sombra cuando hay scroll disponible */
.table-responsive:not(:hover)::after,
.gin-table-scroll-wrapper:not(:hover)::after {
  opacity: 1 !important;
}

/* ========================================
   TABLAS EN MODALES Y LAYERS
   ======================================== */

/* Tablas en gin layers */
.gin-layer-wrapper table th,
.gin-layer-wrapper table td {
  padding: 3px 6px !important;
  font-size: 11px !important;
}

/* Tablas en diálogos */
.ui-dialog table th,
.ui-dialog table td {
  padding: 3px 6px !important;
  font-size: 11px !important;
}

/* ========================================
   AJUSTES ESPECÍFICOS PARA GIN THEME
   ======================================== */

/* Override de variables Gin para densidad */
table {
  --gin-spacing-density-xxs: 1px !important;
  --gin-spacing-density-xs: 2px !important;
  --gin-spacing-density-s: 3px !important;
  --gin-spacing-density-m: 4px !important;
  --gin-spacing-density-l: 6px !important;
  --gin-spacing-density-xl: 8px !important;
}

/* Gin specific table components */
.gin-table-scroll-wrapper table {
  margin: 0 !important;
}

.field-multiple-table tr .form-item {
  margin-bottom: 2px !important;
}

/* ========================================
   ESPACIADO ENTRE ELEMENTOS
   ======================================== */

/* Reducir márgenes entre elementos dentro de celdas */
table td > *,
table th > * {
  margin-top: 1px !important;
  margin-bottom: 1px !important;
}

/* Grupos de botones más compactos */
table .form-actions,
table .button-group {
  margin: 2px 0 !important;
  padding: 0 !important;
}

table .form-actions .button,
table .button-group .button {
  margin: 1px 2px !important;
}

/* ========================================
   ICONOS Y ELEMENTOS VISUALES
   ======================================== */

/* Iconos más pequeños */
table .icon,
table [class*="icon-"] {
  width: 14px !important;
  height: 14px !important;
  font-size: 11px !important;
}

/* Tablesort indicator */
.tablesort {
  width: 12px !important;
  height: 12px !important;
}

/* ========================================
   AJUSTES FINALES Y OVERRIDES AGRESIVOS
   ======================================== */

/* Asegurar que no haya min-heights que interfieran */
table tr,
table td,
table th,
table .form-item,
table .button,
table input,
table select {
  min-height: unset !important;
}

/* Compactar todo el espacio vertical posible */
table {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
}

/* Asegurar que las celdas no tengan altura extra */
table td,
table th {
  max-height: none !important;
}

/* Media query para pantallas más grandes - aún compacto pero ligeramente más espacioso */
@media (min-width: 1200px) {
  table th {
    padding: 5px 8px !important;
  }

  table td {
    padding: 4px 8px !important;
  }

  /* Mantener botones pequeños incluso en pantallas grandes */
  table .button,
  table button,
  table .btn {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
}