/**
 * style/query.css — Pantalla de consulta
 *
 * Cuatro pantallas que corren de costado dentro de una ventanilla: país,
 * búsqueda, confirmación, resultado.
 *
 * Por qué de costado y no hacia abajo: hacia abajo se ve al mismo tiempo lo que
 * ya se hizo y lo que falta, y no se sabe dónde mirar. De costado hay una sola
 * cosa en pantalla por vez.
 */

/* Sin barra de navegación: el volver arriba a la izquierda y el título
   centrado. Los estilos de `.atras-sitio`, `.titulo` y `.pagina` —la caja de
   680 px con 32 de aire arriba y 16 abajo— no están acá sino en style/base.css:
   los usan también las páginas de texto y el panel de /fronteras/geoservicios/,
   que no cargan esta hoja. */

/* Cuatro tramos: dicen en qué parte se está y que hay un camino de vuelta. */
.progreso { display: flex; justify-content: center; gap: 6px; margin: 18px 0 26px; }
.progreso i {
  display: block; width: 30px; height: 3px; border-radius: 2px;
  background: var(--border); transition: background var(--t);
}
.progreso i.hecho { background: var(--accent); }

/* ══════════════════════════════════════════════════════════════ la corrida ══
   .via es la ventanilla; .riel lleva las pantallas en fila y se desplaza. El
   alto de la ventanilla sigue al de la pantalla activa, así no queda un hueco
   debajo ni se corta nada.

   Lo sigue al instante, salvo al cambiar de pantalla, que es cuando conviene
   que acompañe el deslizamiento. Si animara siempre, quedaría corriendo detrás
   de la caja cuando ésta crece, y mostraría el contenido cortado hasta
   alcanzarla. */
.via  { overflow: hidden; }
.via.animando { transition: height var(--slide) cubic-bezier(.4, 0, .2, 1); }
.riel { display: flex; align-items: flex-start;
        transition: transform var(--slide) cubic-bezier(.4, 0, .2, 1); }
.pantalla { flex: 0 0 100%; width: 100%; }
.pantalla:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .via.animando, .riel { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════ caja ══ */
.caja {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r); padding: 26px; position: relative; z-index: 1;
}
.caja-titulo { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.3; }

/* La barra de carga, mientras se le pregunta al servicio de cartografía.
   Es una barra y no un aviso: un aviso ("Preguntándole al servicio de
   cartografía…") usaría el mismo recuadro que los avisos de verdad para decir
   algo que no es un aviso sino un estado, empujaría la caja al aparecer y la
   levantaría al irse, y ocuparía el renglón donde va el aviso de "el punto cae
   fuera del país".

   Va montada sobre el borde de arriba de la caja, tapándolo: no ocupa alto, así
   que no mueve nada. Es indeterminada a propósito —no sabemos cuánto falta, y
   una barra que dice 60% cuando nadie lo sabe es una mentira chica—. */
.caja.cargando::after {
  content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  border-radius: var(--r) var(--r) 0 0;
  background-image: linear-gradient(90deg,
    transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%);
  background-size: 45% 100%; background-repeat: no-repeat;
  animation: barra-carga 1.15s ease-in-out infinite;
}
@keyframes barra-carga {
  from { background-position: -50% 0; }
  to   { background-position: 150% 0; }
}
/* Sin movimiento queda igual de visible, quieta y translúcida. Que alguien haya
   pedido no ver animaciones no puede costarle enterarse de que está esperando. */
@media (prefers-reduced-motion: reduce) {
  .caja.cargando::after {
    animation: none;
    background-image: none; background-color: var(--accent); opacity: .45;
  }
}
.ayuda { margin-top: 8px; font-size: 15px; color: var(--ink2); }
.hoja > .ayuda:first-child { margin-top: 0; }   /* arriba ya separa el cuerpo de la caja */
.ayuda + .marco-mapa { margin-top: 14px; }

/* Cada solapa mide lo que necesita y nada más. El alto se fija por script en vez
   de dejarlo en auto, para poder animarlo al cambiar de solapa.

   El orden importa: primero se abre la caja, después aparece el contenido. Si
   fuera al revés, el contenido entero estaría ahí mientras la caja todavía
   crece, y se vería cortado por la mitad hasta que ésta lo alcanzara. */
.caja-cuerpo { position: relative; margin-top: 18px; }
.caja-cuerpo.animando { transition: height var(--open) cubic-bezier(.4, 0, .2, 1); }
.hoja { width: 100%; transition: opacity var(--fade) ease; }
.caja-cuerpo.cambiando .hoja { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .caja-cuerpo.animando { transition: none; }
  .hoja { transition: none; }
}

/* Para medir hay que ver todas las hojas a la vez sin mostrarlas: se las saca
   del flujo un instante, con su alto natural. Gana sobre .oculto por
   especificidad. */
.caja-cuerpo.midiendo { height: auto !important; }
.caja-cuerpo.midiendo .hoja {
  display: block !important; height: auto !important;
  position: absolute; left: 0; right: 0; top: 0; visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════════ solapas ══
   Colgando del borde de abajo, como las lengüetas de una carpeta. La activa
   tapa el borde inferior de la caja con una franja de 1 px para que se lea como
   una sola pieza.

   El padding de la derecha no adorna: con los rótulos largos las lengüetas
   llegaban al borde de la caja y la última lo pisaba por un píxel. */
.solapas { display: flex; padding: 0 22px; margin-top: -1px; position: relative; z-index: 2; }
.solapas button {
  position: relative; padding: 9px 12px 10px; margin-right: -1px;
  /* EL BORDE ES UN COLOR MACIZO Y NO UNO CON TRANSPARENCIA, que es lo que hace
     que se vea el de abajo. Los tokens de borde del sitio son negro con alfa, y
     un alfa se mezcla con lo que tiene detrás: el mismo borde daba #BEBBB6
     sobre la solapa gris y #D1D0CF sobre la abierta, que es blanca. Los
     costados de la abierta se leían igual porque están pegados al borde de la
     de al lado; el de abajo corre solo contra el fondo de la página y
     desaparecía, y la lengüeta parecía abierta por abajo.

     #C5C2BE es exactamente --border-md mezclado con el fondo del sitio: el
     mismo filete de siempre, pero igual en los cuatro lados y en las dos
     solapas. */
  background: var(--bg2); border: 1px solid #C5C2BE; border-top-color: transparent;
  border-radius: 0 0 9px 9px; font-size: 13.5px; color: var(--ink2);
  transition: background var(--t), color var(--t);
}
.solapas button:hover { background: #efece7; color: var(--ink); }
.solapas button[aria-selected="true"] { background: var(--panel); color: var(--ink); font-weight: 500; }
.solapas button[aria-selected="true"]::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--panel);
}
.solapas button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 1; }

/* LA TIRA REPARTIDA EN PARTES IGUALES, para una tira cuyos rótulos entran
   todos en su parte: el cuadro del meridiano de /fronteras/ayuda/coordenadas/,
   que son cuatro nombres de país. No es el caso de las solapas de la consulta
   —"Búsqueda por ubicación en el mapa" mide más de un cuarto del ancho y se
   partiría en dos renglones—, y por eso se pide con una clase y no es lo que
   hacen todas. */
.solapas.iguales button { flex: 1 1 0; min-width: 0; text-align: center; }

/* La solapa que todavía no existe se ve, pero apagada: que se sepa que viene
   sin hacerla pasar por algo que se puede usar. */
.solapas button[disabled] { color: var(--ink3); cursor: default; }
.solapas button[disabled]:hover { background: var(--bg2); color: var(--ink3); }
@media (max-width: 560px) {
  .solapas { padding: 0 10px; flex-wrap: wrap; }
  .solapas button { font-size: 12.5px; padding: 8px 11px 9px; }
}

/* ═════════════════════════════════════════════════════════ campo con cruz ══
   La cruz vive dentro del campo, con lugar reservado para que el texto no se le
   meta debajo. Aparece sólo cuando hay algo que borrar. */
.campo-con-x { position: relative; }
.campo-con-x input { padding-right: 44px; }
.borrar-texto {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--ink2);
  transition: color var(--t), background var(--t);
}
.borrar-texto:hover { color: var(--ink); background: rgba(26, 24, 20, .07); }
.borrar-texto:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.borrar-texto svg { width: 12px; height: 12px; }

/* ══════════════════════════════════════════════════════════════ candidatos ══
   Entre el campo y el botón: la lista empuja al botón hacia abajo mientras está
   abierta, y al elegir una dirección se cierra y el botón vuelve a su lugar. */
.candidatos {
  list-style: none; margin-top: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: #fff;
}
.candidatos li {
  padding: 13px 14px; border-top: 1px solid var(--border); cursor: pointer;
  font-size: 15px; line-height: 1.4; transition: background var(--t);
}
.candidatos li:first-child { border-top: 0; }
/* El fondo tenue marca el que está debajo del mouse. Para el FOCO no alcanza:
   medido, ese fondo contra el blanco da 1,13:1 y la norma le
   pide 3:1 a un indicador de foco. Y no es teórico — se baja por la lista con
   las flechas, y sin anillo no se ve en cuál se está parado. El anillo del
   acento da 7,21:1. Va por dentro (offset negativo) para que no lo tape el
   renglón de al lado. */
.candidatos li:hover { background: var(--accent-bg); }
.candidatos li:focus {
  background: var(--accent-bg);
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.candidatos .det { display: block; margin-top: 3px; }
.candidatos li.vacio { cursor: default; color: var(--ink2); }
.candidatos li.vacio:hover { background: #fff; }

/* ════════════════════════════════════════════════════════════════ píldoras ══
   Adentro de la solapa de coordenadas hay que elegir el sistema. Píldoras, no
   solapas: así no se confunde con la navegación de la caja. */
/* Dos botones y nada más: qué tipo de coordenada tiene quien consulta. Se
   reparten el ancho en partes iguales porque son una sola decisión de dos lados,
   no una lista de opciones. */
.segmentado { display: flex; justify-content: center; gap: 8px; }
.segmentado button {
  flex: 1 1 0; max-width: 280px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 20px;
  font-size: 14px; color: var(--ink2); background: #fff; white-space: nowrap;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.segmentado button:hover { border-color: var(--border-md); color: var(--ink); }
.segmentado button[aria-selected="true"] {
  border-color: var(--accent); color: var(--accent); background: var(--accent-bg);
}

/* ════════════════════════════════════════════════════════════════════ mapa ══
   Controles propios, no los de Leaflet: cuadrados, del mismo color que los
   botones secundarios, apilados arriba a la izquierda. Van por encima del mapa
   pero fuera de su contenedor, así un clic en ellos no llega a Leaflet y no
   suelta un punto justo debajo del botón. */
.marco-mapa { position: relative; }
.mapa-botones {
  position: absolute; top: 12px; left: 12px; z-index: 900;
  display: flex; flex-direction: column; gap: 4px;
}
/* Mismo borde, mismo fondo y mismo color de contenido que los botones
   secundarios. El fondo va explícito en blanco y no transparente como aquéllos:
   sobre la caja se ven blancos igual, pero sobre el mapa un fondo transparente
   dejaría pasar las calles por debajo del ícono. */
.mapa-botones button {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border-md);
  border-radius: var(--radius-sm); color: var(--ink2);
  box-shadow: 0 1px 3px rgba(26, 24, 20, .14);
  transition: color var(--t), border-color var(--t);
}
.mapa-botones button:hover { border-color: var(--ink2); color: var(--ink); }
.mapa-botones button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.mapa-botones svg { width: 16px; height: 16px; }

.mapa { border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg3); }

/* LA CRUZ DEL CENTRO, para marcar el punto con Enter. Aparece sólo cuando el
   mapa tiene el foco del teclado: a quien usa el mouse no le dice nada y le
   tapa el dibujo.

   ABIERTA EN EL MEDIO, como la mira de un juego de tiro: cuatro trazos que se
   cortan antes de juntarse. Una cruz llena taparía justo el lugar que uno está
   mirando, que es el único que importa, y se parecería demasiado a la cruz con
   la que el informe marca el punto consultado en sus mapas: son dos cosas
   distintas —una dice "acá quedó marcado" y la otra "acá va a quedar si
   apretás"—. Son 20 px, trazos de 7 y un hueco de 6 en el centro.

   Va con halo blanco porque tiene que verse igual sobre un río, sobre una
   ciudad y sobre un descampado. `pointer-events: none` para que no se coma los
   clics del mouse. */
.cruz-teclado { display: none; }
.mapa.con-teclado .cruz-teclado {
  display: block; position: absolute; left: 50%; top: 50%; z-index: 500;
  width: 20px; height: 20px; margin: -10px 0 0 -10px; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) top center    / 1.5px 7px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom center / 1.5px 7px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left center   / 7px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right center  / 7px 1.5px no-repeat;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff);
}
#mapaElegir { width: 100%; aspect-ratio: 1 / 1; }   /* cuadrado, del ancho de la caja */
#mapa       { width: 100%; height: 380px; }
@media (max-width: 520px) { #mapa { height: 300px; } }

.pin {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(61, 82, 160, .3); border: 2px solid var(--accent); box-sizing: border-box;
}
/* El punto confirmado se ve IGUAL que el que se puede arrastrar: lo único que
   cambia es que ya no se arrastra, y eso no necesita un aviso de color, que se
   leería como si algo hubiera pasado con el punto —¿se movió?, ¿es otro?—. La
   diferencia está donde corresponde: `draggable`. */

/* ═══════════════════════════════════════════════════════════════════ pista ══
   Sin punto marcado no ocupa nada: así el botón queda a la misma distancia del
   mapa que del campo de dirección, que es un renglón sin nada abajo.

   Con punto, los tres renglones se reservan desde el primer momento aunque la
   dirección tarde en llegar, para que la caja crezca una sola vez y no vuelva a
   moverse cuando el servicio contesta. */
.pista { margin-top: 10px; font-size: 15px; color: var(--ink2); }
.pista .mono { font-size: 15px; }
.pista:empty { display: none; }

/* Un campo termina en un borde y sus 20 px se ven enteros; una línea de texto
   termina en su caja de línea, que reparte el interlineado arriba y abajo y deja
   un resto de aire debajo de las letras. Ese resto se mide al arrancar —depende
   de la tipografía y del cuerpo— y se descuenta acá, para que el botón quede a
   la misma distancia a la vista y no sólo en los números. */
.pista:not(:empty) + .acciones { margin-top: calc(20px - var(--sobrante-linea, 0px)); }
.pista .calle, .pista .zona { display: block; min-height: 1.6em; color: var(--ink); }

/* ── LOS DOS ESQUELETOS, mientras se averigua la dirección ─────────────────
   Van exactamente donde van a ir las dos líneas y con el alto que ya tenían
   reservado, así que al llenarse no se mueve nada. El ancho es distinto a
   propósito: una calle es más larga que una localidad, y un esqueleto que no se
   parece a lo que viene engaña igual que un cartel que no se parece.

   El brillo que lo recorre es lo único que dice "esto está cargando" y no "esto
   quedó vacío". Quien pidió menos movimiento no lo ve moverse: le queda la
   barra quieta, que sigue diciendo que ahí va a haber algo, y además hay una
   frase para lectores de pantalla que el ojo no ve.

   La forma del esqueleto está en style/base.css, que la comparte con el panel de
   los geoservicios. Acá van sólo los dos anchos, que son de estas dos líneas. */
/* `min-height: 0` apaga el mínimo del renglón: el alto ya lo pone el esqueleto
   de style/base.css, que mide un renglón exacto. Sin esto se sumarían los dos. */
.pista .esqueleto { min-height: 0; }
.pista .calle.esqueleto { width: 62%; max-width: 330px; }
.pista .zona.esqueleto  { width: 38%; max-width: 200px; }

/* El renglón que avisa que el punto cae fuera del país. Va abajo de todo y sólo
   existe cuando hay algo que decir: no reserva alto como los otros dos, porque
   lo normal es que no esté.

   Se lee con el mismo cuerpo y la misma tipografía que la dirección —los hereda
   de .pista— porque es del mismo rango: información sobre el punto. Lo único que
   cambia es el color, que es el de los avisos, y el motivo es que acá el aviso ya
   no viene acompañado de ningún cartel: es el único lugar donde se dice. */
.pista .fuera {
  display: block; margin-top: 6px; color: var(--si);
}

/* ═══════════════════════════════════════════════════════════════ respuesta ══
   SIN RECUADRO Y SIN COLOR. El resultado no va en una caja pintada —fondo
   rojizo si intersecta, verdoso si no, amarillo en el borde—, y el motivo es el
   que ordena todo este proyecto.

   Un fondo verde dice "todo bien". Y "no intersecta" NO es todo bien: es que
   ese punto, según esa capa, no cae adentro. El inmueble es una superficie y el
   punto es un punto; lo que determina si hay que pedir la autorización previa
   es el organismo, no un dibujo. El recuadro verde invitaría justo al salto que
   el sistema entero está construido para no dar, y lo haría antes de que nadie
   leyera una palabra: el color llega a la cabeza primero.

   El resultado se lee como lo que es, el título de una pantalla más, con
   la misma letra que "Búsqueda por dirección" o "País del inmueble". Lo que
   distingue un estado de otro son las PALABRAS, que es lo único que puede decir
   "esto no habilita a nada".

   La clase `r-<estado>` no pinta nada: es la marca de qué contestó el sistema,
   la usan las pruebas, y si algún día hace falta distinguir los estados por otro
   medio el gancho ya está puesto. */
.respuesta h3 {
  font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.3;
}
/* La bajada, con la misma letra que la ayuda de las otras solapas pero en
   negro: ahí es una instrucción al costado y acá es la respuesta. */
.respuesta .que { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink); }

/* Un campo solo, sin fila: el desplegable de formato y el de sistema de
   referencia. Va con el mismo aire arriba que una fila, para que la solapa no
   cambie de ritmo según cuál de los dos bloques esté abierto. */
.campo-solo { margin-top: 18px; }

/* El enlace a la página que explica los sistemas de coordenadas
   (fronteras/ayuda/coordenadas/). Sin href se muestra apagado y sin el cursor de
   mano: prometer un clic que no pasa nada es peor que no ofrecerlo. */
/* Mismo lugar y mismo cuerpo que la ayuda de la solapa del mapa —"Seleccioná la
   ubicación del inmueble."—, porque hace el mismo trabajo: es el renglón que
   orienta antes de que la persona toque nada. */
.ayuda-enlace { margin-top: 8px; font-size: 15px; }
.ayuda-enlace + .segmentado { margin-top: 14px; }
.ayuda-enlace a {
  color: var(--ink2); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-style: dotted;
}
.ayuda-enlace a[aria-disabled="true"] { cursor: default; }
.ayuda-enlace a[href] { color: var(--accent); text-decoration-style: solid; cursor: pointer; }

/* Los datos del punto, sin recuadro: son la ficha de la consulta, no un aviso.
   Uno arriba del otro, con el rótulo encima del valor: una grilla de dos
   columnas se leería como una tabla, y el ojo buscaría filas y columnas donde
   hay cuatro datos sueltos. */
.detalle { margin-top: 22px; display: grid; gap: 14px; }
.detalle .dato { display: flex; flex-direction: column; gap: 2px; line-height: 1.5; }
/* El rótulo de cada dato se lee igual que los rótulos de los formularios de las
   otras solapas —"Dirección", "Latitud", "Faja"—, que es lo que son: el nombre
   de un campo arriba de su valor. En 13px y gris claro quedarían como una nota
   al pie de su propio valor. */
.detalle .rotulo { color: var(--ink); font-size: 14px; font-weight: 500; }
.detalle .valor  { color: var(--ink2); font-size: 15px; }
/* El nombre de la fuente lleva a la página del organismo. Va subrayado y no
   sólo en color: en una ficha donde todos los valores son texto gris, el color
   solo no alcanza para que se lea como algo que se puede apretar. */
.detalle .valor a { color: var(--accent); text-decoration: underline; }

/* Cuando contestó un servicio de respaldo y no el organismo, el resultado lo
   dice. No al pie ni en letra chica: al lado del dato que condiciona. */
.advertencia {
  margin-top: 18px; padding: 13px 15px;
  background: #fffdf5; border: 1px solid var(--lim-bd); border-radius: var(--radius-sm);
  font-size: 14.5px; line-height: 1.6; color: var(--ink2);
}

/* ══════════════════════════════════════════════════ el detalle de la falla ══
   Cuando no contestó nadie, el resultado trae un <details> con qué dijo cada
   servicio. Es lo único que usa `.tecnico` en la pantalla: el detalle técnico
   del informe NO se dibuja acá, va sólo en el PDF. */
.tecnico { margin-top: 18px; font-size: 14.5px; }
.tecnico summary { cursor: pointer; color: var(--ink2); width: max-content; }
.tecnico summary:hover { color: var(--ink); }
.tecnico .cuerpo {
  margin-top: 14px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.tecnico pre {
  margin: 0; padding: 14px 16px;
  font-family: var(--mono); font-size: 12px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word; color: var(--ink2);
  max-height: 340px; overflow: auto;
}

/* Los botones del resultado van todos a la izquierda, en el orden en que se
   usan. Con margin-left:auto "Consultar otro inmueble" y "Adquirir informe" se
   empujarían contra el borde derecho, lejos del texto que los explica y lejos
   del pulgar en un teléfono. */
.respuesta ~ .acciones .derecha { margin-left: 0; }