/**
 * style/base.css — Lo que comparten todas las pantallas
 *
 * Colores, tipografías, tiempos, y los controles que se repiten: botones,
 * campos, avisos, pie. Lo que es de una sola pantalla vive en su propio
 * archivo.
 *
 * ── Los tiempos ────────────────────────────────────────────────────────────
 *
 * Las duraciones de las transiciones están acá y SOLO acá. El JavaScript las
 * lee con getComputedStyle (ver leerMs() en src/core/config.js) en vez de tenerlas
 * escritas de nuevo: un número que "tiene que coincidir con el CSS" por
 * comentario no es un mecanismo.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Superficies */
  --bg:        #F0EDE8;
  --bg2:       #E8E4DE;
  --bg3:       #DDD9D2;
  --panel:     #fff;
  --cream:     #E2DDD4;

  /* Tinta
     OJO CON --ink3: NO SIRVE PARA TEXTO, y no es una opinión de diseño.
     Medido con la fórmula de contraste de la WCAG: sobre el fondo
     del sitio da 2,11:1 y sobre el panel blanco 2,17:1, contra un mínimo
     exigible de 4,5:1. Para que un gris de esta familia llegue a 4,5 hay que
     subirlo a opacidad 0,64 — o sea, prácticamente --ink2, que es 0,62. Dicho
     de otro modo: esta paleta tiene DOS niveles de gris legibles, no tres, y el
     tercero no se puede rescatar subiéndole un poco la tinta.
     Así que --ink3 queda sólo para lo que la norma exime: controles apagados y
     líneas decorativas. Todo lo que se lee usa --ink o --ink2. */
  --ink:       #1a1814;
  --ink2:      rgba(26, 24, 20, .62);   /* 4,69:1 sobre el fondo · 4,95:1 sobre blanco */
  --ink3:      rgba(26, 24, 20, .34);   /* 2,11:1 — sólo apagados y decoración */

  /* Acento */
  --accent:    #3d52a0;
  --accent-h:  #2d3d7a;
  --accent-bg: rgba(61, 82, 160, .08);

  /* Bordes
     Son dos cosas distintas. Una línea que separa dos bloques es decoración:
     puede ser tenue y nadie se pierde. El borde de un campo de texto NO es
     decoración: es lo único que dice dónde empieza el casillero, porque el
     blanco del campo contra el fondo del sitio da 1,17:1 y no se distingue. La
     WCAG le pide 3:1 a eso, y --border-md da 1,53:1. De ahí sale --border-campo,
     medido en 3,07:1. */
  --border:      rgba(26, 24, 20, .12);   /* decorativo: separadores, tarjetas */
  --border-md:   rgba(26, 24, 20, .20);   /* decorativo, un poco más marcado */
  --border-campo: rgba(26, 24, 20, .48);  /* el contorno de un control: 3,07:1 */
  --r:         12px;
  --radius-sm: 8px;

  /* Los tres estados del resultado. Son los únicos colores fuertes del sitio:
     si algo está pintado, significa algo. */
  --si:   #8f3a10;  --si-bg:  #fbf1ea;  --si-bd:  rgba(143, 58, 16, .35);
  /* El verde de "hecho". No es el de ningún estado del resultado: los estados
     tienen sus propios colores y ninguno es verde, justamente para que nadie lea
     un "no intersecta" como un permiso. Éste dice "la acción salió bien". */
  --ok:   #2f6d3a;  --ok-bd:  rgba(47, 109, 58, .45);
  --lim:  #8a6500;  --lim-bg: #fdf6e3;  --lim-bd: rgba(200, 160, 40, .45);
  --no:   #2b7350;  --no-bg:  #eef7f1;  --no-bd:  rgba(76, 175, 125, .40);

  /* Tipografías */
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  'DM Mono', ui-monospace, Menlo, monospace;

  /* Tiempos. Únicos en todo el sistema: el JavaScript los lee de acá. */
  --t:       .18s ease;   /* cambios de color y borde */
  --slide:   .38s;        /* la corrida de una pantalla a la otra */
  --fade:    .14s;        /* el contenido de la caja apagándose */
  --open:    .24s;        /* la caja creciendo o encogiendo */
}

html, body { height: 100%; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a      { color: var(--accent); }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, select { font: inherit; color: inherit; }

.oculto { display: none !important; }

/* Lo que sólo existe para el lector de pantalla. No es `display: none` ni
   `visibility: hidden` —eso lo escondería también del lector, que es justo lo
   contrario— sino un recorte de un píxel: está en la página, se anuncia, y no
   ocupa lugar ni se ve. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ══════════════════════════════════════════════════════════════ formularios ══ */
.campo { margin-top: 0; }
label  { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }

input, select {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border-campo);
  border-radius: var(--radius-sm);
  font-size: 16px;
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
/* La marca de agua lleva la dirección y las coordenadas de ejemplo del país:
   es información, no adorno, así que se lee. Con --ink3 daba 2,17:1. */
input::placeholder { color: var(--ink2); }

/* Los campos de un mismo dato van uno al lado del otro, nunca apilados. */
.fila { display: grid; gap: 14px; margin-top: 18px; }
.fila.dos  { grid-template-columns: 1fr 1fr; }
.fila.tres { grid-template-columns: .9fr 1fr 1fr; }
/* Grados, minutos, segundos y hemisferio. Los tres números miden lo mismo y el
   hemisferio es un desplegable de una letra, así que va más angosto. */
.fila.gms  { grid-template-columns: 1fr 1fr 1fr .8fr; gap: 8px; margin-top: 7px; }

/* El rótulo que nombra a una fila entera —"Latitud" arriba de grados, minutos,
   segundos y hemisferio—. Se lee igual que el rótulo de un campo suelto, que es
   lo que es desde la vereda de quien consulta: la pestaña pide una latitud, y
   que se escriba en cuatro casilleros es asunto nuestro. Por eso los cuatro
   rótulos de abajo bajan medio escalón: nombran las partes, no el dato. */
.grupo-campos { margin: 18px 0 0; font-size: 14px; font-weight: 500; }
.fila.gms label { font-size: 12.5px; font-weight: 400; color: var(--ink2); margin-bottom: 5px; }
@media (max-width: 520px) {
  .fila.dos, .fila.tres { grid-template-columns: 1fr; }
  /* En pantalla angosta los tres números siguen juntos: partirlos en cuatro
     filas haría perder de vista que son una sola coordenada. */
  .fila.gms { gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════ esqueleto ══
   UNA BARRA GRIS DONDE VA A HABER UN DATO, mientras se lo averigua. Está acá y
   no en una hoja de pantalla porque la usan dos: la pista de la dirección en
   /consulta y el tiempo de respuesta en /geoservicios. El ancho lo pone cada
   una, porque 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. */
.esqueleto {
  position: relative;
  overflow: hidden;
  /* OCUPA EXACTAMENTE UN RENGLÓN, que es el interlineado del sitio: lo que
     reemplaza es una línea de texto, así que cuando el texto llega no se mueve
     nada. Antes medía 1em con 0,3em de margen arriba y abajo, y eso fallaba de
     dos maneras: el margen se sumaba al `min-height` de la línea que esperaba, y
     entre dos barras pegadas los márgenes COLAPSAN, así que el sobrante ni
     siquiera era parejo. */
  height: 1.6em;
  margin: 0;
}
/* La barra gris va adentro y mide un poco menos que la línea: del alto entero
   parecería un bloque de color y no un renglón esperando texto. Es un `::before`
   y no el fondo del elemento porque el elemento tiene que medir el renglón
   completo aunque lo gris mida menos. */
.esqueleto::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 1em; border-radius: 4px; background: var(--border);
}
.esqueleto::after {
  content: ''; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, .55), transparent);
  animation: esqueleto-brillo 1.3s ease-in-out infinite;
}
@keyframes esqueleto-brillo { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .esqueleto::after { animation: none; display: none; }
}

/* ══════════════════════════════════════════════════════════════════ botones ══ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  background: var(--accent); color: #fff;
  border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background var(--t), transform var(--t);
}
/* El anillo de foco, escrito y no heredado del navegador. El que pone cada
   navegador por su cuenta cambia de forma y de color entre Chrome, Firefox y
   Safari, y en algunos temas queda en un gris que no llega a 3:1. Éste da
   6,17:1 sobre el fondo del sitio y 7,21:1 sobre el panel. */
.boton:focus-visible, .boton-2:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.boton:hover  { background: var(--accent-h); }
.boton:active { transform: scale(.99); }
.boton:disabled { background: #a9adbf; cursor: not-allowed; transform: none; }

.boton-2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 18px;
  background: transparent;
  /* El borde de un botón secundario es el botón: sin él no hay botón. Va con el
     contorno de control, no con el decorativo. */
  border: 1px solid var(--border-campo);
  border-radius: var(--radius-sm);
  font-size: 15px; color: var(--ink2);
  transition: border-color var(--t), color var(--t);
}
.boton-2:hover { border-color: var(--ink2); color: var(--ink); }
.boton-2 svg   { width: 14px; height: 14px; }

/* Los botones arrancan a la izquierda; los marcados se van al otro extremo. El
   margen automático lo lleva sólo el primero del grupo: si no, cada uno
   empujaría al siguiente y quedarían desparramados en vez de juntos. */
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.acciones .derecha { margin-left: auto; }
.acciones .derecha ~ .derecha { margin-left: 0; }

/* ══════════════════════════════════════════════════════════════════ avisos ══ */
.aviso {
  margin-top: 16px; padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14.5px; line-height: 1.5;
  display: flex; align-items: flex-start; gap: 12px;
}
.aviso > span { flex: 1; }
.aviso.malo        { background: var(--si-bg); border: 1px solid var(--si-bd); color: var(--si); }
.aviso.trabajando  { background: var(--accent-bg); border: 1px solid rgba(61, 82, 160, .25);
                     color: var(--accent); }

/* La cruz hereda el color del aviso: un gris fijo se vería sucio sobre el fondo
   rojizo y desaparecería sobre el azulado. */
.aviso .cerrar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: -2px -4px 0 0;
  border-radius: 6px; color: inherit; opacity: .55;
  transition: opacity var(--t), background var(--t);
}
.aviso .cerrar:hover { opacity: 1; background: rgba(26, 24, 20, .07); }
.aviso .cerrar:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; opacity: 1; }
.aviso .cerrar svg { width: 12px; height: 12px; }

/* Algunos avisos no son un "no": son un "fijate". Cuando el aviso ofrece seguir
   igual, el botón vive adentro, con su color, para que se lea como parte de lo
   que se acaba de decir y no como una acción del formulario. */
.aviso .accion {
  flex: none; align-self: center;
  padding: 6px 12px;
  border: 1px solid currentColor; border-radius: 6px;
  font-size: 13.5px; color: inherit; white-space: nowrap; opacity: .85;
  transition: opacity var(--t), background var(--t);
}
.aviso .accion:hover { opacity: 1; background: rgba(26, 24, 20, .06); }
.aviso .accion:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; opacity: 1; }

/* ── La caja de una pantalla de herramienta ────────────────────────────────
   680 px de ancho, 32 de aire arriba y 16 abajo. Los usan la consulta y el
   panel de estado, y de acá salen los dos huecos que las páginas de texto
   copian en style/text.css para que las pantallas se sientan la misma.

   Está acá y no en style/query.css porque la usan dos pantallas: una medida
   compartida escrita adentro de una de ellas obliga a la otra a copiarla. */
.pagina {
  max-width: 680px; margin: 0 auto; padding: 32px 24px 16px;
  /* Para que el selector de idioma, que va absoluto, se cuelgue de esta caja y
     no de la ventana: así queda alineado con el borde del contenido. */
  position: relative;
}

/* ═══════════════════════════════════════════════ el selector de idioma ══
   Arriba a la derecha, a la altura del "Volver". Absoluto a propósito: en el
   flujo empujaría el título, que va centrado y tiene que quedar centrado
   respecto de la caja y no de lo que le sobró al costado. */
.selector-idioma {
  position: absolute; top: 30px; right: 24px;
  display: inline-flex; gap: 2px; align-items: center;
}
.selector-idioma button {
  padding: 2px 7px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: .04em;
  color: var(--ink3); border-radius: 4px;
  transition: color var(--t), background var(--t);
}
.selector-idioma button:hover:not([aria-pressed="true"]) {
  color: var(--ink2); background: var(--bg2);
}
/* El activo no es un botón que se pueda apretar: se marca y deja de ser un
   control. Sin el cursor por omisión parecería que todavía hace algo. */
.selector-idioma button[aria-pressed="true"] {
  color: var(--ink); background: var(--bg3); cursor: default;
}
/* Mientras el JavaScript no los encienda van apagados, para que no parezca que
   funcionan antes de que funcionen. */
.selector-idioma button[disabled] { opacity: .45; cursor: default; }
.selector-idioma button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ══════════════════════════════════════════════ el volver y el título ══
   Los comparten /fronteras/consulta/ y las páginas de texto, que cargan hojas
   distintas —query.css y text.css— y ninguna a la otra. Por eso están acá:
   base.css es el único archivo que cargan las dos. */
.atras-sitio {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--ink2); text-decoration: none;
  transition: color var(--t); margin-bottom: 18px;
  /* El interlineado va escrito aunque un renglón solo no lo necesite: las
     páginas legales lo heredarían de `.hoja-texto`, que lee a 1.65, y ahí el
     botón saldría medio píxel más alto que el de la consulta. Un botón que mide
     distinto según la pantalla donde está no es el mismo botón. */
  line-height: 1.6;
}
.atras-sitio:hover { color: var(--ink); }
.atras-sitio svg   { width: 15px; height: 15px; }
/* El anillo de foco va aparte del :hover: quien navega con el teclado tiene que
   ver dónde está parado, y el color del hover solo no alcanza para eso. */
.atras-sitio:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}

.titulo {
  font-family: var(--serif); font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 500; line-height: 1.2; text-align: center;
}

/* ═════════════════════════════════════════════════════════════════════ pie ══ */
footer {
  padding: 40px 40px 36px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
/* LA MARCA, la misma arriba y abajo. El enlace sale de una sola función,
   `marca()` en src/ui/footer.js, y su aspecto de esta sola regla. */
.marca {
  font-family: var(--serif); font-size: 28px; font-weight: 500;
  color: var(--accent); text-decoration: none;
}
.footer-copia { font-size: 12px; color: var(--ink2); line-height: 1.6; }

/* Los cuatro textos legales. Van en --ink2 y no en el color de acento: son
   enlaces de servicio, no una invitación. El subrayado aparece al pasar por
   encima; el foco del teclado usa el anillo de .boton, que ya está definido. */
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  font-size: 12.5px;
}
.footer-legal a { color: var(--ink2); text-decoration: none; }
.footer-legal a:hover { color: var(--accent); text-decoration: underline; }
.footer-legal a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}

@media (max-width: 600px) { footer { padding: 32px 24px 28px; } }

.mono { font-family: var(--mono); font-size: 13px; }