/* Consulta territorial — el modal reutilizable (BIO-1326).
 *
 * Amplio en escritorio y utilizable en móvil con la MISMA tabla: el issue pide adaptable, no una
 * segunda vista. Lo que cambia con el ancho es el alto del cuerpo y el desplazamiento horizontal
 * de la tabla; las columnas y su orden no, porque una tabla que esconde columnas en móvil es una
 * tabla que contesta distinto según el aparato.
 */
.tq-modal {
  width: min(1100px, 96vw);
  max-height: 92vh;
  border: 0;
  border-radius: .5rem;
  padding: 1.25rem;
  overflow: auto;
}
.tq-modal::backdrop { background: rgba(0, 0, 0, .45); }
.tq-modal__dismiss { float: right; }
.tq-modal__controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: .75rem; }
.tq-modal__location { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: .75rem; }
.tq-field { display: flex; flex-direction: column; font-size: .85rem; gap: .2rem; }
.tq-field input, .tq-field select { min-width: 12rem; }
.tq-field--columns > div { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .35rem; }
.tq-toggle { font-size: .8rem; white-space: nowrap; }

/* Encabezados fijos: con 46 unidades el lector pierde de qué columna es cada número en cuanto
 * baja dos pantallas, y volver arriba a comprobarlo es exactamente el coste que una tabla larga
 * no debe cobrar. */
.tq-modal__table-wrap { max-height: 55vh; overflow: auto; }
.tq-modal__table thead th { position: sticky; top: 0; background: var(--tblr-bg-surface, #fff); z-index: 1; }
.tq-modal__table th[scope="row"] { font-weight: 500; }
.tq-num { text-align: right; font-variant-numeric: tabular-nums; }
.tq-name { display: block; }
.tq-qualifier { display: block; font-size: .8em; color: var(--tblr-secondary, #6c757d); font-style: italic; }
.tq-threshold { font-size: .75em; color: var(--tblr-secondary, #6c757d); }

/* El orden se acciona con un BOTÓN dentro del `th`, no con un `click` sobre la celda: es lo que
 * lo pone en el recorrido del tabulador y le da a Enter/Espacio el mismo efecto que al ratón. */
.tq-sort { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: inherit; }
.tq-sort:focus-visible { outline: 2px solid var(--tblr-primary, #206bc4); outline-offset: 2px; }

.tq-state { font-size: .85em; }
.tq-state--available { color: var(--tblr-green, #2fb344); }
.tq-state--no_data_at_point, .tq-state--outside_study_area { color: var(--tblr-secondary, #6c757d); }
.tq-state--no_result_for_scenario, .tq-state--in_progress { color: var(--tblr-secondary, #6c757d); }
.tq-state--query_error { color: var(--tblr-red, #d63939); }

.tq-modal__note { font-size: .85rem; color: var(--tblr-secondary, #6c757d); margin: .75rem 0 .25rem; }
.tq-modal__status { min-height: 1.2rem; font-size: .85rem; }
.tq-modal__pager { display: flex; gap: .75rem; align-items: center; }

@media (max-width: 640px) {
  .tq-modal { width: 100vw; max-height: 100vh; border-radius: 0; padding: .75rem; }
  .tq-modal__table-wrap { max-height: 60vh; }
  .tq-field input, .tq-field select { min-width: 0; width: 100%; }
  .tq-field { flex: 1 1 100%; }
}

/* BIO-1351 · el aviso de punto fuera del ámbito, antes de la tabla. Ámbar y no rojo: no es un
   error de la consulta — el punto simplemente cae donde el estudio no dice nada, y decirlo en
   rojo sugeriría que algo falló. Mismo tratamiento que el aviso del panel del visor. */
.tq-modal__outside {
  margin: 0 0 .75rem;
  padding: .45rem .6rem;
  border-left: 3px solid var(--tblr-warning, #f76707);
  border-radius: .25rem;
  background: var(--tblr-warning-lt, #fff5e6);
}