/* explorador.css — la página del Explorador (/screener) sobre el sistema de diseño (Fase 2).
 * Antes, screener.css: estética de terminal con la monoespaciada casi para todo, 23 tamaños de letra propios y el
 * bloque del BORME pintado con los colores de un tema oscuro. Ahora: los mismos componentes que el resto (KPI,
 * pestañas, tabla adaptable, chips, paginación, cajón), la monoespaciada solo en NIF y códigos CPV.
 */

.explorador-cabeza { background: var(--color-fondo-calido); border-bottom: 1px solid var(--color-borde); padding-top: var(--sp-6); }
.explorador-titulos { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-6); margin-bottom: var(--sp-3); }
.explorador-titulo { font-size: var(--fs-40); text-wrap: balance; max-width: 22ch; }
.explorador-ceja { display: block; margin-bottom: var(--sp-1); font-family: var(--fuente-sans); color: var(--color-acento); }
.explorador-entradilla { margin: 0; font-size: var(--fs-14); color: var(--color-texto-2); max-width: 70ch; }
.explorador-cabeza .pestanas { border-bottom: 0; margin-bottom: -1px; }
.explorador-cabeza .pestana:hover { background: var(--color-fondo-hundido); }
.explorador-cabeza .pestana[aria-current="page"] { background: var(--color-fondo); border: 1px solid var(--color-borde); border-bottom-color: var(--color-fondo); border-radius: var(--radio-m) var(--radio-m) 0 0; }

/* Franja de cifras */
.franja-cifras { padding: var(--sp-5) 0 var(--sp-2); }
.franja-nota { margin: var(--sp-3) 0 0; }
.franja-enlace { margin: var(--sp-3) 0 0; font-size: var(--fs-14); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.franja-enlace a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tactil-min); font-weight: var(--peso-medio); }
.franja-enlace .icono { width: 1em; height: 1em; }

/* Maqueta: filtros a la izquierda y la tabla */
.explorador-rejilla { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--sp-6); padding: var(--sp-4) 0 var(--sp-12); align-items: start; }
.explorador-rejilla .panel-filtros .filtro { padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-borde); }
.explorador-rejilla .panel-filtros .filtro:first-child { padding-top: 0; }
.explorador-rejilla .panel-filtros label.filtro-titulo { display: block; }
.explorador-rejilla .panel-filtros .control { font-size: var(--fs-14); }
/* En la hoja de filtros del móvil, a 16 px: con menos, iOS amplía la página al tocar un desplegable o el importe */
@media (pointer: coarse) { .explorador-rejilla .panel-filtros .control { font-size: var(--fs-16); } }
@media (max-width: 979px) {
    .explorador-rejilla { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Barra de la tabla: cuántos, herramientas y filtros activos */
.explorador-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.explorador-cuenta { margin: 0; font-size: var(--fs-14); color: var(--color-texto); font-variant-numeric: tabular-nums; }
.explorador-cuenta strong { font-weight: var(--peso-fuerte); }
.explorador-cuenta:focus { outline: none; }
.explorador-cuenta:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 3px; }
.explorador-acciones { gap: var(--sp-2); }
.explorador-chips { margin: 0 0 var(--sp-3); }
.menu-panel .casilla { margin: 0; }
.menu-panel .nota { margin: var(--sp-2) 0 0; font-size: var(--fs-12); }

/* Tabla */
.tabla-explorador { font-size: var(--fs-14); }
.tabla-explorador th, .tabla-explorador td { padding: var(--sp-3) var(--sp-3); }
.tabla-explorador th:first-child, .tabla-explorador td:first-child { padding-left: var(--sp-4); }
.tabla-explorador .celda-nombre { min-width: 12rem; max-width: 24rem; }
/* El nombre en dos líneas como mucho (Fase 5c, mejora 16: «TELEFÓNICA SOLUCIONES DE INFORMÁTICA…» ocupaba cuatro). El
   nombre entero, en el enlace (lectores de pantalla) y en la ficha. max-height: donde -webkit-line-clamp no recorta */
.tabla-explorador .celda-nombre a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(2 * var(--lh-ajustada) * 1em); line-height: var(--lh-ajustada); padding-block: 0; }
.tabla-explorador thead th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.tabla-explorador .celda-nombre a { font-weight: var(--peso-medio); color: var(--color-texto-fuerte); text-decoration-color: color-mix(in srgb, var(--color-acento) 45%, transparent); }
.tabla-explorador .celda-nombre a:hover { color: var(--color-acento); }
.th-contenido { display: inline-flex; align-items: center; gap: 2px; }
th.num .th-contenido { justify-content: flex-end; width: 100%; }
.celda-importe { min-width: 8.5rem; }
.celda-importe .importe-tabla { display: block; font-weight: var(--peso-fuerte); color: var(--color-texto-fuerte); }
/* La barra del peso, fina, más clara y separada de la cifra: pegada debajo parecía un subrayado (mejora 16) */
.celda-importe .barra { margin: 6px 0 0 auto; max-width: 7rem; height: 3px; }
.celda-importe .barra-valor { opacity: 0.45; }
.tabla-explorador tbody tr.fila-abre:hover { background: var(--color-acento-suave); }
.tabla-explorador tbody tr.fila-abre:hover .celda-nombre a { color: var(--color-acento); }

/* Columnas opcionales: ocultas salvo que se elijan (interfaz.js pone ver-<columna> en la zona de la tabla) */
.tabla-explorador .col-opc { display: none; }
.ver-sector .tabla-explorador .col-sector, .ver-tipo .tabla-explorador .col-tipo,
.ver-procedimiento .tabla-explorador .col-procedimiento, .ver-organo .tabla-explorador .col-organo,
.ver-adjudicatario .tabla-explorador .col-adjudicatario { display: table-cell; }

/* El orden en el móvil (web-movil): solo donde la tabla es de tarjetas y no tiene las cabeceras que ordenan */
.explorador-orden { display: none; }

/* Tarjetas del móvil, compactas (web-movil): el nombre y el importe total en la primera línea, como en un libro de
   cuentas, y el resto en tres columnas pequeñas. Antes, 264 px por tarjeta y 15.500 px la página de 50 a 390 px; ahora,
   unos 150. Rejilla de seis: el nombre ocupa cuatro y el importe dos; cada dato, dos (la comunidad, cuatro: su rótulo es
   largo); las columnas opcionales, las seis */
@media (max-width: 720px) {
    .tabla-explorador tr { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); }
    .tabla-explorador td, .tabla-explorador td:first-child { padding: 0; grid-column: span 2; }
    .tabla-explorador td.celda-nombre { max-width: none; grid-column: span 4; grid-row: 1; font-size: var(--fs-16); }
    .tabla-explorador td.celda-importe { grid-column: 5 / span 2; grid-row: 1; text-align: right; min-width: 0; }
    .tabla-explorador td.celda-importe::before { display: none; }
    .tabla-explorador .celda-importe .importe-tabla { font-size: var(--fs-16); white-space: nowrap; }
    .tabla-explorador .celda-importe .barra { margin: 6px 0 0 auto; max-width: 5rem; }
    .tabla-explorador td[data-etiqueta="Comunidad principal"] { grid-column: span 4; }
    .tabla-explorador td[data-etiqueta]::before { font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tabla-explorador td:not(.celda-nombre):not(.celda-importe) { font-size: var(--fs-14); line-height: 1.3; }
    .tabla-explorador .celda-sub { display: inline-block; margin: 0 0 0 0.3em; white-space: nowrap; }
    .tabla-explorador .celda-nombre .celda-sub { display: block; margin: 2px 0 0; }
    .ver-sector .tabla-explorador .col-sector, .ver-tipo .tabla-explorador .col-tipo,
    .ver-procedimiento .tabla-explorador .col-procedimiento, .ver-organo .tabla-explorador .col-organo,
    .ver-adjudicatario .tabla-explorador .col-adjudicatario { display: block; grid-column: 1 / -1; }
    .franja-cifras .kpis-compactos .kpi { padding: var(--sp-3); }
    .franja-cifras .kpis-compactos .kpi-valor { font-size: 1.25rem; white-space: nowrap; }
    .explorador-titulo { font-size: var(--fs-28); }
    .explorador-cabeza { padding-top: var(--sp-4); }
    .explorador-cabeza .pestana { flex: 1 1 0; justify-content: center; padding: 0 var(--sp-2); }
    /* Las herramientas: «Filtros» y el orden en la primera fila; «Columnas» y «Descargar esta página», en la segunda */
    .explorador-barra { gap: var(--sp-2); }
    .explorador-acciones { width: 100%; }
    .explorador-orden { display: block; flex: 1 1 11rem; min-width: 0; }
    .explorador-orden .control { width: 100%; }
    .explorador-acciones .boton-filtros { order: -1; }
    /* «por importe total, de mayor a menor»: lo dice el desplegable de al lado */
    .explorador-cuenta .texto-2 { display: none; }
}

/* Carga de la tabla: la zona se atenúa y la barra dice que carga, sin tapar nada */
.scr-main { position: relative; }
.scr-main.htmx-request { opacity: 0.6; transition: opacity var(--mov-medio); }

/* M1 del QA de clics 4: el cajón de una fila de una tabla filtrada dice primero sus cifras con los filtros */
.cajon-filtrado { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--color-borde); border-left: 3px solid var(--color-acento); border-radius: var(--radio-m, 8px); background: var(--color-superficie); }
.cajon-filtrado p { margin: 0; }
.cajon-filtrado .nota { margin-top: var(--sp-2); }