/* /consulta/<slug> y /consultas. [C.11]
 *
 * Se apoya en hub.css, que es quien trae la paleta, .page, .card y .crumbs.
 * Aqui solo esta lo que estas dos paginas tienen y las fichas no: el bloque de
 * SQL, la tabla de resultados y el sello de "calculado el...". No se repite ni
 * un token de color: ver la cabecera de hub.css. */

/* ---- Sello: cuantas filas y de cuando es la foto ---- */
.sello {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: center;
}

.sello-dato b {
    display: block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.sello-dato small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--dim);
}

.sello-aviso {
    flex: 1 1 100%;
    margin: 0;
    font-size: 12.5px;
    color: var(--warm);
}

/* ---- El SQL ----
   `pre` con scroll propio y no `white-space: pre-wrap`: una consulta partida
   por la mitad de un nombre de columna deja de poder copiarse y pegarse, que es
   justo lo que se espera poder hacer con ella. Los saltos de linea por clausula
   los pone el servidor (saved_queries.sql_legible). */
.sql {
    margin: 14px 0 0;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.65;
    color: #cfe3ff;
    tab-size: 2;
}

.sql code { white-space: pre; }

/* ---- Tabla de resultados ----
   El scroll va en el contenedor y NUNCA en el body: una tabla de nueve columnas
   dentro de un movil no puede empujar la pagina entera a lo ancho. */
.tabla-scroll {
    margin-top: 14px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

table.datos {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

table.datos th,
table.datos td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
}

/* Las cabeceras no parten NUNCA; las celdas si, porque una de ellas puede
   traer un titular entero. Antes `nowrap` iba en las dos y una celda larga
   empujaba la tabla a lo ancho hasta dejar la pagina con scroll horizontal. */
table.datos th { white-space: nowrap; }

table.datos td {
    max-width: 520px;
    word-break: break-word;
}

table.datos thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dim);
}

table.datos tbody tr:last-child td { border-bottom: 0; }
table.datos tbody tr:hover { background: rgba(255, 255, 255, .028); }

/* Las cifras alineadas a la derecha y con cifras de ancho fijo: una columna de
   numeros que baila es ilegible de un vistazo, que es para lo que se mira. */
table.datos td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- El listado de /consultas ---- */
.lista-consultas {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.lista-consultas li {
    padding: 12px 0;
    border-top: 1px solid var(--line-soft);
}

.lista-consultas li:first-child { border-top: 0; }

.lista-consultas li > a {
    display: block;
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
    letter-spacing: -.01em;
}

.lista-consultas li > a:hover { color: var(--accent); }

.lista-consultas .sub {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--dimmer);
}

@media (max-width: 640px) {
    .sello { gap: 18px; }
    .sello-dato b { font-size: 21px; }
}

/* ---- El mapa de una consulta de tipo 'mapa' [C.11] ----
   Alto fijo y no proporcional: esta pagina se cita desde un articulo y el mapa
   es una ilustracion dentro de ella, no la pagina entera como en la portada. */
#mapa-consulta {
    height: 460px;
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #0b0b0e;
}

/* ---- Los filtros a la vista ----
   Es el equivalente del bloque de SQL: lo que hace auditable la pagina. Por eso
   se pinta con el mismo peso visual que aquel, y no como una nota al pie. */
.lista-filtros {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.lista-filtros li {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.lista-filtros span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dimmer);
}

.lista-filtros b {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    font-weight: 650;
}

/* ---- Celdas largas ----
   El texto NO se recorta: se le da su propia caja con scroll. Perder datos en
   una pagina cuyo argumento es "aqui estan los datos" no es una opcion, pero
   dejar 20 KB sueltos en un <td> rompe la tabla para las demas columnas. */
.celda-larga {
    display: block;
    max-height: 9em;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.55;
    padding-left: 9px;
    border-left: 2px solid var(--line);
}

/* ---- La descarga del resultado entero ----
   Va al pie de la tabla y del mapa, y no en la cabecera de la pagina, porque
   se ofrece DESPUES de haber visto lo que hay: quien llega aqui viene a leer, y
   quien viene a llevarselo lo encuentra justo donde deja de leer. */
.descarga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.btn-csv {
    margin-left: auto;
    padding: 7px 14px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-pill);
    background: var(--accent-dim);
    color: #ffc9cc !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.btn-csv:hover { background: rgba(255, 59, 70, .22); }

@media (max-width: 640px) {
    .btn-csv { margin-left: 0; }
}

/* ---- El color del SQL ----
   Las clases las pone app/core/sql_format.py. La paleta es la del sitio, no
   una de editor: el rojo de la marca para las palabras reservadas —que es lo
   que estructura la consulta y lo primero que se busca al leerla—, y el resto
   en tonos que no compiten con él. Sobre el fondo del bloque, las cinco pasan
   de 4,5:1 de contraste. */
.sql .sql-kw {
    color: #ff7b84;
    font-weight: 600;
}

.sql .sql-fn  { color: #7dd3fc; }   /* COUNT(, AVG(: lo que calcula */
.sql .sql-str { color: #86efac; }   /* cadenas: lo que el modelo puso a mano */
.sql .sql-num { color: #f5c451; }
.sql .sql-op  { color: #8a8a97; }   /* la puntuación, al fondo */
.sql .sql-id  { color: #cfe3ff; }   /* tablas y columnas, el tono base */