/* table-tools.css — cabeceras ordenables y fila de filtros de las tablas de «Estadísticas».
   El comportamiento lo pone `assets/js/leads/table-tools.js`; aquí solo está el aspecto. */

.uv-table th.ctop-tabla__th {
  cursor: pointer; user-select: none; position: relative;
  padding-right: 20px;                 /* hueco fijo para la flecha: si no, el rótulo baila al ordenar */
  white-space: nowrap;
}
.uv-table th.ctop-tabla__th:hover { color: #0F172A; }
.uv-table th.ctop-tabla__th:focus-visible { outline: 2px solid #94A3B8; outline-offset: -2px; }

/* La flecha en reposo es tenue pero EXISTE: sin ninguna marca, nadie descubre que la cabecera se
   puede pulsar. Con `::after` y no con un icono de fuente, para no depender de Font Awesome. */
.uv-table th.ctop-tabla__th::after {
  content: "↕"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 11px; opacity: .3;
}
.uv-table th.ctop-tabla__th.is-asc::after  { content: "↑"; opacity: 1; }
.uv-table th.ctop-tabla__th.is-desc::after { content: "↓"; opacity: 1; }

/* ---- Fila de filtros ---- */
.uv-table tr.ctop-tabla__filtros th {
  padding: 6px 6px 10px; border-block-start: 0; cursor: default;
}
.uv-table tr.ctop-tabla__filtros th::after { content: none; }

.uv-table .ctop-tabla__filtro {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 6px 8px; border: 1px solid #E2E8F0; border-radius: 7px;
  font: 500 12.5px/1.3 Inter, sans-serif; color: #0F172A; background: #fff;
}
.uv-table .ctop-tabla__filtro:focus { border-color: #94A3B8; outline: 0; }
.uv-table .ctop-tabla__filtro::placeholder { color: #CBD5E1; font-weight: 500; }

.ctop-tabla__sinfiltro,
.ctop-tabla__recorte {
  margin: 10px 0 0; font: 500 13px/1.5 Inter, sans-serif; color: #64748B;
}
.ctop-tabla__recorte { margin-bottom: 8px; }

/* El mismo corte que usa `core/mobile.css:20` para apilar las tablas en tarjetas. Si se mueve allí,
   hay que moverlo aquí: por debajo de ese ancho la cabecera deja de existir tal cual. */
@media (max-width: 767px) {
  /* En móvil `core/mobile.css` apila cada fila como una tarjeta y **esconde el `thead` entero**:
     con él se irían los filtros y el orden. La cabecera vuelve, pero solo su fila de filtros, en
     una rejilla de dos columnas — los rótulos de columna siguen ocultos porque cada celda ya lleva
     el suyo en `data-label`. Ordenar se pierde aquí a propósito: ocho cabeceras apiladas ocupan
     media pantalla, y el filtro resuelve lo mismo en una tabla que ya se lee como lista.

     **El selector lleva `table` delante, y no es cosmética**: `core/mobile.css` se encola DESPUÉS
     de esta hoja y su `.uv-table thead{display:none}` tiene la misma especificidad (0,1,1), así que
     ganaba por orden. `table.uv-table thead` es (0,1,2) y gana sin recurrir a `!important`, que ahí
     sería pelearse con una regla que no lo usa. Medido: sin esto, `filtrosVisibles: false`. */
  table.uv-table thead { display: block; }
  table.uv-table thead tr:not(.ctop-tabla__filtros) { display: none; }
  table.uv-table tr.ctop-tabla__filtros {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    padding: 0 0 10px; margin: 0; border: 0; background: transparent;
  }
  table.uv-table tr.ctop-tabla__filtros th { display: block; padding: 0; border: 0; }
  /* Cada filtro con el nombre de su columna encima: sin esto son ocho cajas iguales y hay que
     adivinar cuál filtra qué. El rótulo lo pone el JS en `data-nombre`. */
  table.uv-table tr.ctop-tabla__filtros th::before {
    content: attr(data-nombre); display: block; margin-bottom: 3px;
    font: 700 10.5px/1.2 Inter, sans-serif; color: #94A3B8;
    text-transform: uppercase; letter-spacing: .4px;
  }
}