/* ==========================================================================
   Rasant — sistema visual

   La referencia no es una app SaaS: es un plano. Rasant es la línea desde la
   que se mide un edificio, y de ahí sale todo lo de abajo — papel vegetal,
   grafito, tinta prusia, y una regla fina como elemento estructural en vez de
   tarjetas con sombra. Los estados se marcan con glifos (relleno, hueco,
   rayado) como en una leyenda de plano, no solo con color.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --papel:        #FBFBF9;   /* vegetal */
  --papel-hundido:#F3F3F0;
  --tinta:        #14181D;   /* grafito */
  --tinta-media:  #5A646E;
  --tinta-suave:  #8A949E;
  --regla:        #DCDFE3;
  --regla-fuerte: #B9BFC6;
  --datum:        #1F3A5F;   /* tinta prusia: la marca y la parcela */
  --datum-claro:  #E8EEF5;
  --restringe:    #B5281B;   /* rojo de corrección */
  --restringe-f:  #FBF0EE;
  --libre:        #2E6B4F;
  --sindato:      #8A7B52;

  --paso: 4px;
  --radio: 3px;
  --via: 1px solid var(--regla);

  --t-rapida: 140ms cubic-bezier(.2,.6,.3,1);
  --t-media: 320ms cubic-bezier(.2,.6,.3,1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
h1 { font-size: 28px; }
h2 { font-size: 17px; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--datum); text-underline-offset: 2px; }

/* La referencia catastral es un código que se lee carácter a carácter. */
.ref {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.94em;
  letter-spacing: 0.01em;
}

/* ---------- cabecera con su línea de cota ---------- */
.cab {
  display: flex; align-items: center; gap: 28px;
  padding: 0 24px; height: 58px;
  background: rgba(251,251,249,.88); backdrop-filter: saturate(1.4) blur(10px);
  position: sticky; top: 0; z-index: 30;
}
.cab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--tinta); opacity: .9;
}
/* la marca de nivel sobre la línea */
.cab::before {
  content: ""; position: absolute; left: 24px; bottom: 0;
  width: 1px; height: 9px; background: var(--tinta);
}

.marca {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-size: 18px; font-weight: 700; letter-spacing: -0.03em;
  color: var(--tinta); text-decoration: none;
}
.marca b { font-weight: 700; }
/* La marca de nivel junto al nombre: el mismo gesto que el tick de la línea
   de la cabecera. Antes era el «0» de Cota0; ahora que el nombre no acaba en
   cifra, el acento lo pone la propia marca topográfica. */
.marca i {
  width: 9px; height: 9px; align-self: center; margin-left: 3px;
  border-left: 2px solid var(--datum); border-bottom: 2px solid var(--datum);
}

.cab nav { display: flex; gap: 2px; margin-left: auto; }
.cab nav a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px;
  font-size: 14px; color: var(--tinta-media); text-decoration: none;
  border-radius: var(--radio); transition: color var(--t-rapida), background var(--t-rapida);
}
.cab nav a:hover { color: var(--tinta); background: var(--papel-hundido); }
.cab nav a[aria-current] { color: var(--datum); font-weight: 600; }

/* ---------- controles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--tinta); background: transparent;
  border: 1px solid var(--regla-fuerte); border-radius: var(--radio);
  cursor: pointer; text-decoration: none;
  transition: border-color var(--t-rapida), background var(--t-rapida), color var(--t-rapida);
}
.btn:hover { border-color: var(--tinta-media); background: var(--papel-hundido); }
.btn:active { transform: translateY(1px); }
.btn-primario { box-shadow: 0 1px 2px rgba(20,24,29,.16); }
.btn-primario:hover { box-shadow: 0 2px 6px rgba(20,24,29,.22); }
.btn:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible,
summary:focus-visible { outline: 2px solid var(--datum); outline-offset: 2px; }
.btn:focus-visible { outline: 2px solid var(--datum); outline-offset: 2px; }

.btn-primario {
  background: var(--datum); border-color: var(--datum); color: #fff; font-weight: 600;
}
.btn-primario:hover { background: #17304F; border-color: #17304F; color: #fff; }
.btn-menor { min-height: 36px; padding: 0 12px; font-size: 13px; }

input[type=text], input[type=number], input[type=search], select {
  font: inherit; font-size: 15px; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--regla-fuerte);
  border-radius: var(--radio); padding: 9px 12px; min-height: 42px;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
input:focus, select:focus {
  outline: none; border-color: var(--datum);
  box-shadow: 0 0 0 3px var(--datum-claro);
}

/* ---------- portada: la línea de cota como héroe ---------- */
.portada {
  min-height: calc(100vh - 58px);
  display: grid; grid-template-rows: 1fr auto 1fr;
  padding: 0 24px;
}
.portada-centro { align-self: center; width: min(760px, 100%); margin: 0 auto; }

.titular { font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }
.titular .nivel { color: var(--datum); }
.entrada-sub { color: var(--tinta-media); font-size: 17px; max-width: 48ch; margin-top: 14px; }

/* el buscador se apoya en una línea, como una cota acotada */
.buscador { margin-top: 36px; position: relative; }
.buscador form { display: flex; gap: 10px; align-items: stretch; }
.buscador input {
  flex: 1; min-height: 56px; font-size: 17px; padding: 0 16px;
  background: transparent; border: none;
  border-bottom: 2px solid var(--tinta); border-radius: 0;
}
.buscador input:focus { box-shadow: none; border-bottom-color: var(--datum); }
.buscador input::placeholder { color: var(--tinta-suave); }
.buscador .btn { min-height: 56px; }
/* ticks de cota en los extremos */
.buscador::before, .buscador::after {
  content: ""; position: absolute; bottom: 0; width: 1px; height: 11px; background: var(--tinta);
}
.buscador::before { left: 0; }

.pista { margin-top: 18px; font-size: 14px; color: var(--tinta-media); }
.pista button {
  font: inherit; font-size: 13.5px; background: var(--papel-hundido); color: var(--tinta);
  border: var(--via); border-radius: var(--radio); padding: 4px 9px; cursor: pointer;
  transition: border-color var(--t-rapida);
}
.pista button:hover { border-color: var(--regla-fuerte); }

.portada-pie {
  align-self: end; padding-bottom: 28px; font-size: 13px; color: var(--tinta-suave);
  display: flex; gap: 20px; flex-wrap: wrap;
}

/* ---------- ficha: plano a la izquierda, lectura a la derecha ---------- */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(520px, 40vw, 700px);
  height: calc(100vh - 58px);
}
@media (max-width: 1040px) {
  .ficha { grid-template-columns: 1fr; height: auto; }
  .plano { height: 46vh; }
}

.plano { position: relative; background: var(--papel-hundido); }
#mapa { position: absolute; inset: 0; }

.plano-sobre {
  position: absolute; left: 16px; bottom: 16px; z-index: 5;
  background: rgba(251,251,249,.94); backdrop-filter: blur(6px);
  border: var(--via); border-radius: var(--radio); padding: 10px 12px;
  font-size: 12px; color: var(--tinta-media); max-width: 290px;
}

/* ---------- pie del plano ----------------------------------------------
   TODO lo que va encima del mapa vive aquí, apilado en filas. Antes la
   leyenda y la barra de años eran dos cajas flotantes con la misma esquina
   asignada: se montaban una sobre otra y las dos sobre la escala. En una
   columna de filas eso no puede pasar. */
.plano-pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  pointer-events: none;              /* el mapa se sigue pudiendo arrastrar */
}
.plano-pie > * { pointer-events: auto; }
.plano-fila {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(251,251,249,.94); backdrop-filter: blur(6px);
  border: var(--via); border-radius: var(--radio);
  padding: 8px 12px; font-size: 12px; color: var(--tinta-media);
}
.plano-credito {
  margin-left: auto; font-size: 11px; color: var(--tinta-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%;
}
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }

/* columna de lectura */
.lectura {
  overflow-y: auto; overflow-x: hidden;
  border-left: 1px solid var(--tinta); background: var(--papel);
}
/* Una palabra sin espacios más ancha que la columna —una referencia catastral,
   la URL de un plan— empujaba la caja entera y cortaba el texto. Que se parta
   ella, no la página. */
.lectura p, .lectura dd, .lectura li, .lectura td, .lectura summary { overflow-wrap: anywhere; }
@media (max-width: 1040px) { .lectura { border-left: none; border-top: 1px solid var(--tinta); } }

.encabezado-finca { padding: 30px 34px 24px; border-bottom: var(--via); }
.encabezado-finca .via { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.encabezado-finca .meta { margin-top: 6px; font-size: 13.5px; color: var(--tinta-media); }
.encabezado-finca .meta .ref { color: var(--tinta); }

/* magnitudes principales, acotadas */
.cotas { display: flex; gap: 36px; margin-top: 20px; flex-wrap: wrap; }
.cotas div { position: relative; padding-top: 9px; }
.cotas div::before {
  content: ""; position: absolute; top: 0; left: 0; width: 22px; height: 1px;
  background: var(--datum);
}
.cotas b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.cotas span { font-size: 12.5px; color: var(--tinta-media); }

/* secciones: reglas, no tarjetas */
.seccion { border-bottom: var(--via); }
.seccion > header {
  display: flex; align-items: baseline; gap: 10px; padding: 26px 34px 12px;
}
.seccion > header h2 {
  position: relative; font-size: 14.5px; font-weight: 600;
  color: var(--tinta); letter-spacing: -0.01em;
}
/* El tick de cota, el mismo gesto que la cabecera: ata cada sección a la
   línea de la que cuelga y da un punto de apoyo a la vista al bajar. */
.seccion > header h2::before {
  content: ""; position: absolute; left: -14px; top: 3px;
  width: 2px; height: 12px; background: var(--datum); border-radius: 1px;
}
.seccion > header .recuento {
  margin-left: auto; font-size: 11.5px; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.seccion + .seccion { border-top: none; }
.seccion .cuerpo { padding: 0 34px 28px; }

/* filas de datos */
.campos { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: 7px 20px; }
.campos dt { font-size: 13.5px; color: var(--tinta-media); }
.campos dd { margin: 0; font-size: 14.5px; }

table.datos { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.datos th {
  text-align: left; font-weight: 500; font-size: 12.5px; color: var(--tinta-media);
  padding: 0 10px 7px 0; border-bottom: var(--via);
}
table.datos td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--papel-hundido); }
table.datos .num, table.tabla-larga .num, .campos dd, .cotas b {
  font-variant-numeric: tabular-nums;
}
table.datos tr:last-child td { border-bottom: none; }
table.datos .num, table.datos th.num { text-align: right; padding-right: 20px; }
table.datos tr > *:last-child { padding-right: 0; }

/* ---------- glifos de estado: leyenda de plano ---------- */
/* El glifo de estado acompaña tanto a una etiqueta de dos palabras («No
   afecta») como a una frase entera («Sin dato, el servicio del Ayuntamiento no
   ha respondido»). Durante un tiempo esto llevó `white-space: nowrap`, pensado
   para la etiqueta: la frase no se partía, se salía de su caja y SE CORTABA.
   Por defecto se parte; el nowrap es ahora opt-in, para la etiqueta. */
.estado {
  display: inline-flex; align-items: flex-start; gap: 7px;
  font-size: 13.5px; line-height: 1.5; max-width: 100%;
}
.estado::before {
  content: ""; width: 10px; height: 10px; flex: none; border: 1.5px solid currentColor;
  margin-top: 5px;              /* centrado en la PRIMERA línea, no en el bloque */
}
/* Etiqueta de una línea: en una tabla de condicionantes partir «No afecta» en
   dos renglones queda peor que dejarla entera. */
.estado.etiqueta { align-items: center; white-space: nowrap; }
.estado.etiqueta::before { margin-top: 0; }
.estado.restringe { color: var(--restringe); font-weight: 600; }
.estado.restringe::before { background: currentColor; }
.estado.libre { color: var(--libre); }
.estado.sindato { color: var(--sindato); }
.estado.sindato::before {
  border-style: dashed;
  background: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 4px);
}
.estado.informa { color: var(--tinta-media); }
.estado.informa::before { border-radius: 50%; border-style: dotted; }

.condicion {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px;
  padding: 11px 0; border-bottom: 1px solid var(--papel-hundido);
}
.condicion:last-child { border-bottom: none; }
.condicion .tema { font-size: 14px; }
.condicion .detalle { grid-column: 1 / -1; font-size: 13px; color: var(--tinta-media); }
.condicion.afectada { background: var(--restringe-f); margin: 0 -34px; padding: 11px 34px; }

.procedencia { font-size: 11.5px; color: var(--tinta-suave); }

/* avisos */
.aviso {
  border-left: 2px solid var(--sindato); background: #FBF8F0;
  padding: 10px 12px; font-size: 13px; color: #6B5F3F; border-radius: 0 var(--radio) var(--radio) 0;
}
.aviso.serio { border-left-color: var(--restringe); background: var(--restringe-f); color: #7A2217; }

.sello {
  display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 20px;
  border: var(--via); color: var(--tinta-media); background: var(--papel);
}
.sello.validado { border-color: #BFDBCB; background: #EFF7F2; color: var(--libre); }
.sello.extraido, .sello.revisado { border-color: #E3D7B8; background: #FBF8F0; color: var(--sindato); }

.sin-validar { color: var(--tinta-suave); }

/* barra de acción, fija al pie de la columna */
.acciones {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; gap: 10px; align-items: center;
  padding: 14px 34px; background: var(--papel);
  border-top: 1px solid var(--tinta);
  box-shadow: 0 -10px 24px -14px rgba(20,24,29,.28);
}
/* Aire al final de la columna para que el último bloque no quede pegado a la
   barra ni pase por debajo de ella al llegar al fondo. */
.lectura > .acciones:last-child { margin-top: auto; }
.lectura > :nth-last-child(2) { margin-bottom: 18px; }
.acciones .secundario { margin-left: auto; display: flex; gap: 8px; }

/* ---------- carga: trazo, no spinner ---------- */
.trazando { padding: 18px 28px 22px; }
.trazando i {
  display: block; height: 1px; background: var(--regla); margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.trazando i::after {
  content: ""; position: absolute; inset: 0; width: 38%;
  background: var(--datum); animation: traza 1.1s cubic-bezier(.5,0,.5,1) infinite;
}
.trazando i:nth-child(2)::after { animation-delay: .12s; }
.trazando i:nth-child(3)::after { animation-delay: .24s; }
@keyframes traza { 0% { transform: translateX(-100%); } 100% { transform: translateX(360%); } }

/* el bloque entra cuando llega */
.seccion.entra { animation: entrar var(--t-media) both; }
/* Lo que cambia bajo el cursor cambia con suavidad: sin esto los hovers dan
   un salto seco que hace que la interfaz parezca una maqueta. */
a, .btn, summary, .conmutador, .sugerencias a, .tabla-larga tbody tr {
  transition: background-color var(--t-rapida), border-color var(--t-rapida),
              color var(--t-rapida), box-shadow var(--t-rapida);
}
.tabla-larga tbody tr:hover { background: var(--papel-hundido); }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- páginas de trabajo ---------- */
.pagina { max-width: 1120px; margin: 0 auto; padding: 32px 24px 64px; }
.pagina > header { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.pagina > header h1 { font-size: 26px; }
.pagina > header form { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.pagina > header label { font-size: 13px; color: var(--tinta-media); display: flex; gap: 7px; align-items: center; }

.cifras { display: flex; gap: 0; margin-bottom: 28px; border: var(--via); border-radius: var(--radio); overflow: hidden; }
.cifra { flex: 1; padding: 16px 18px; border-right: var(--via); }
.cifra:last-child { border-right: none; }
.cifra b { display: block; font-size: 27px; font-weight: 600; letter-spacing: -0.03em; }
.cifra span { font-size: 12.5px; color: var(--tinta-media); }
.cifra.urgente b { color: var(--restringe); }

.tabla-larga { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-larga th {
  position: sticky; top: 58px; background: var(--papel); text-align: left;
  font-weight: 500; font-size: 12.5px; color: var(--tinta-media);
  padding: 9px 12px 9px 0; border-bottom: 1px solid var(--tinta);
}
.tabla-larga td { padding: 10px 12px 10px 0; border-bottom: var(--via); }
.tabla-larga tbody tr { transition: background var(--t-rapida); }
.tabla-larga tbody tr:hover { background: var(--papel-hundido); }
.tabla-larga .num { text-align: right; padding-right: 28px; }
.tabla-larga th.num { padding-right: 28px; }
.tabla-larga tr > *:last-child { padding-right: 0; }
.vence-ya { color: var(--restringe); font-weight: 600; }
.vence-pronto { color: #8A6A12; font-weight: 600; }

/* validación: documento a la izquierda, campos a la derecha */
.validador { display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: start; }
@media (max-width: 980px) { .validador { grid-template-columns: 1fr; } }
.cita {
  border-left: 2px solid var(--datum); background: var(--papel-hundido);
  padding: 12px 14px; font-size: 14px; line-height: 1.55;
}
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rejilla label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--tinta-media); }
.acciones-validar { display: flex; gap: 12px; align-items: center; margin-top: 22px; }
.acciones-validar .descartar { margin-left: auto; color: var(--restringe); border-color: #E6C8C3; }

footer.pie {
  padding: 26px 24px 40px; font-size: 12px; color: var(--tinta-suave);
  border-top: var(--via); max-width: 1120px; margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- inicio: espacio de trabajo, no escaparate ---------- */
.inicio {
  max-width: 1120px; margin: 0 auto; padding: 56px 24px 72px;
  display: grid; grid-template-columns: 1fr 360px; gap: 56px 48px;
  align-items: start;
}
@media (max-width: 960px) { .inicio { grid-template-columns: 1fr; gap: 40px; } }

.inicio-busqueda { grid-column: 1 / -1; }
.inicio .titular { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -0.028em; }
.inicio .titular .nivel { color: var(--datum); }
.inicio .buscador { margin-top: 30px; max-width: 760px; }

/* Mismo gesto que las secciones de la ficha: el tick de cota ata el título a
   la línea de la que cuelga. Dos tratamientos distintos para lo mismo en dos
   pantallas es lo que hace que una interfaz parezca montada por piezas. */
.inicio-cobertura h2, .inicio-recientes h2 {
  position: relative; font-size: 13px; font-weight: 600; color: var(--tinta);
  letter-spacing: -0.005em; padding-bottom: 10px; border-bottom: 1px solid var(--tinta);
  margin-bottom: 4px;
}
.inicio-cobertura h2::before, .inicio-recientes h2::before {
  content: ""; position: absolute; left: -14px; top: 2px;
  width: 2px; height: 12px; background: var(--datum); border-radius: 1px;
}

.municipios { display: grid; gap: 0; }
.municipio {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px;
  padding: 15px 0; border-bottom: var(--via); text-decoration: none; color: inherit;
  transition: padding-left var(--t-rapida), background var(--t-rapida);
}
.municipio:hover { background: var(--papel-hundido); padding-left: 8px; }
.municipio .nombre { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.municipio .parcelas { font-size: 13px; color: var(--tinta-suave); text-align: right; }
.municipio .trabajo { grid-column: 1 / -1; font-size: 13.5px; color: var(--tinta-media); }
.municipio .trabajo b { color: var(--tinta); font-weight: 600; }
.municipio .trabajo i { font-style: normal; color: var(--restringe); margin-left: 10px; }

.recientes { list-style: none; margin: 0; padding: 0; }
.recientes a {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 12px;
  padding: 12px 0; border-bottom: var(--via); text-decoration: none; color: inherit;
  transition: padding-left var(--t-rapida), background var(--t-rapida);
}
.recientes a:hover { background: var(--papel-hundido); padding-left: 8px; }
.recientes .donde { font-size: 14.5px; }
.recientes .cuando { font-size: 12px; color: var(--tinta-suave); }
.recientes .ciudad { grid-column: 1; font-size: 12.5px; color: var(--tinta-suave); }

/* --- Ordenanza municipal -------------------------------------------------
   Es un bloque anidado dentro del urbanístico: llega después y de otra fuente.
   Se separa con más aire del que hay dentro de él (proximidad), y la regla
   lateral dice "esto cuelga de lo de arriba" sin abrir una sección nueva. */
.sub-bloque { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--regla); }
.sub-bloque > h3 { margin-bottom: 14px; }

.clave-mun.siguiente {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px dashed var(--regla);
}
/* La clave cuelga del epigrafe: pesa menos que el, y la que manda es la
   descripcion, no la etiqueta "Clave municipal". */
.clave-mun h4 {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12px; font-weight: 500; color: var(--tinta-media);
  text-transform: none; margin-bottom: 2px;
}
.clave-mun h4 b { font-weight: 600; color: var(--tinta); }
.clave-mun .descripcion-clave {
  font-size: 14.5px; font-weight: 600; color: var(--tinta);
  letter-spacing: -0.01em; margin-bottom: 12px;
}
.clave-mun table.datos { margin-bottom: 4px; }

/* Alturas, usos y notas vienen como prosa del plan, a veces varias líneas.
   Van con sangría de regla para que no se confundan con los números. */
.campo-largo {
  margin-top: 16px; padding-left: 12px;
  border-left: 2px solid var(--papel-hundido);
}
.campo-largo h5 {
  font-size: 11.5px; font-weight: 600; color: var(--tinta-media);
  margin-bottom: 5px;
}
.campo-largo p { margin: 0 0 3px; font-size: 13.5px; }
.campo-largo p:last-child { margin-bottom: 0; }
.campo-largo b { font-weight: 600; }

/* --- Sugerencias del buscador --------------------------------------------
   Caen bajo la línea del campo, como una lectura que se despliega. No son una
   caja flotante con sombra: son la continuación del mismo trazo. */
.sugerencias {
  margin-top: 2px; background: var(--papel);
  border: 1px solid var(--regla); border-top: none;
  border-radius: 0 0 var(--radio) var(--radio);
  overflow: hidden;
}
.sugerencias li { list-style: none; }
.sugerencias li + li { border-top: 1px solid var(--papel-hundido); }
.sugerencias a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "donde ref" "ciudad ref";
  gap: 1px 16px; align-items: center;
  padding: 10px 16px; text-decoration: none; color: inherit;
}
.sugerencias a:hover, .sugerencias a:focus-visible { background: var(--papel-hundido); }
.sugerencias .donde { grid-area: donde; font-weight: 500; }
.sugerencias .ciudad { grid-area: ciudad; font-size: 12.5px; color: var(--tinta-media); }
.sugerencias .ref {
  grid-area: ref; justify-self: end;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--tinta-suave); letter-spacing: 0.01em;
}
.sugerencias.vacias { padding: 16px; }
.sugerencias.vacias p { margin: 0 0 6px; }
.sugerencias.vacias p:last-child { margin-bottom: 0; }

/* --- Aprovechamiento: la respuesta principal de la ficha -----------------
   Es lo primero que alguien quiere saber de una parcela, así que es lo único
   de la sección que lleva fondo propio y peso tipográfico. El resto de la
   ordenanza es el detalle que lo sostiene. */
.aprovechamiento {
  background: var(--papel-hundido);
  border-left: 3px solid var(--datum);
  padding: 16px 18px 14px; margin-bottom: 26px;
  border-radius: 0 var(--radio) var(--radio) 0;
}
.aprovechamiento.por_encima { border-left-color: var(--restringe); }
.aprovechamiento.agotado    { border-left-color: var(--sindato); }
.aprovechamiento > h4 {
  font-size: 11.5px; font-weight: 500; color: var(--tinta-media);
  margin-bottom: 8px;
}
.aprovechamiento .veredicto {
  font-size: 18px; line-height: 1.3; letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.aprovechamiento .veredicto b { font-weight: 600; }
.aprovechamiento.por_encima .veredicto b { color: var(--restringe); }

/* La barra es la única pieza gráfica: el techo del plan de extremo a extremo,
   y lo construido dentro. Si se pasa, la barra se desborda y se ve. */
.aprovechamiento .barra {
  position: relative; height: 8px; background: var(--papel);
  border: 1px solid var(--regla); border-radius: 2px; overflow: hidden;
}
.aprovechamiento .barra .lleno {
  display: block; height: 100%; background: var(--datum);
  transition: width .6s cubic-bezier(.2,.7,.3,1);
}
.aprovechamiento.por_encima .barra .lleno { background: var(--restringe); }
.aprovechamiento.agotado    .barra .lleno { background: var(--sindato); }
@media (prefers-reduced-motion: reduce) {
  .aprovechamiento .barra .lleno { transition: none; }
}
.aprovechamiento .escala {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 5px; font-size: 12px; color: var(--tinta-media);
}

.aprovechamiento .cuentas {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--regla);
  font-size: 13.5px;
}
.aprovechamiento .cuentas dt { color: var(--tinta-media); }
.aprovechamiento .cuentas dd { text-align: right; font-variant-numeric: tabular-nums; }
.aprovechamiento .aviso { margin-top: 12px; }
.aprovechamiento .procedencia { margin-top: 10px; }

table.datos.tramos td:first-child { color: var(--tinta-media); }

/* Interruptor de capa dentro de la leyenda del plano: misma línea que el resto
   de la leyenda, no un control aparte. Área de toque de 44 px (Fitts). */
.leyenda .conmutador {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
  min-height: 24px; padding: 10px 0; margin: -10px 0;
}
.leyenda .conmutador input { width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: var(--datum); }
.leyenda .conmutador:has(input:disabled) { opacity: .45; cursor: default; }

/* `hidden` tiene que ganar a cualquier display propio: si no, un aviso oculto
   sigue ocupando sitio y pintando su glifo. */
[hidden] { display: none !important; }

/* ---------- Radar de ITE: mapa a la izquierda, trabajo a la derecha -------
   Misma estructura que la ficha, porque es la misma pregunta vista al revés:
   allí "qué pasa en esta parcela", aquí "dónde está el trabajo". */
.radar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(600px, 46vw, 820px);
  height: calc(100vh - 58px);
}
@media (max-width: 1100px) {
  .radar { grid-template-columns: 1fr; height: auto; }
  .radar-mapa { height: 48vh; }
}
.radar-mapa { position: relative; background: var(--papel-hundido); }
.radar-mapa #mapa-barrios { position: absolute; inset: 0; }
.radar-lectura { overflow-y: auto; border-left: 1px solid var(--regla); background: var(--papel); }

.radar-cabecera { padding: 30px 34px 20px; }
.radar-cabecera h1 { font-size: 22px; letter-spacing: -0.02em; }
.radar-cabecera p {
  margin-top: 8px; color: var(--tinta-media); font-size: 14px; max-width: 54ch;
}

/* La escala del mapa: la rampa misma hace de leyenda, sin números que nadie
   lee. Lo que importa es "aquí más, allí menos". */
.leyenda-escala .rampa { display: flex; gap: 2px; margin: 5px 0 3px; }
.leyenda-escala .rampa i { width: 26px; height: 7px; border-radius: 1px; }
.leyenda-escala .rampa i:nth-child(1) { background: #EDEFF2; }
.leyenda-escala .rampa i:nth-child(2) { background: #C5CFDC; }
.leyenda-escala .rampa i:nth-child(3) { background: #8FA3BD; }
.leyenda-escala .rampa i:nth-child(4) { background: #56749B; }
.leyenda-escala .rampa i:nth-child(5) { background: #1F3A5F; }
.leyenda-escala .extremos {
  display: flex; justify-content: space-between; width: 138px;
  font-size: 11px; color: var(--tinta-suave);
}

.globo {
  position: absolute; pointer-events: none; transform: translate(14px, -50%);
  background: var(--tinta); color: var(--papel); padding: 7px 10px;
  border-radius: var(--radio); font-size: 12.5px; line-height: 1.35;
  display: flex; flex-direction: column; gap: 1px; max-width: 230px;
}
.globo b { font-weight: 600; }
.globo span { opacity: .8; }

/* Filtros: una fila que respira, sin caja. Son ajustes de lo que ya se ve,
   no un formulario que haya que enviar. */
.filtros {
  display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: end;
  padding: 0 34px 24px; border-bottom: 1px solid var(--regla);
}
.filtros label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px; color: var(--tinta-media);
}
.filtros select, .filtros input[type="number"] {
  font: inherit; font-size: 13.5px; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--regla-fuerte);
  border-radius: var(--radio); padding: 7px 9px; min-height: 36px;
}
.filtros input[type="number"] { width: 94px; }
.filtros .rango { display: flex; gap: 6px; }
.filtros .rango input { width: 78px; }

.barrio-elegido {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tinta); color: var(--papel);
  padding: 7px 8px 7px 11px; border-radius: var(--radio); font-size: 13px;
}
.barrio-elegido button {
  font: inherit; font-size: 11.5px; background: none; color: inherit;
  border: 1px solid rgba(255,255,255,.35); border-radius: 3px;
  padding: 2px 6px; cursor: pointer; opacity: .85;
}
.barrio-elegido button:hover { opacity: 1; border-color: rgba(255,255,255,.7); }

.cifras-radar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--regla); border-bottom: 1px solid var(--regla);
}
.cifras-radar > div {
  background: var(--papel); padding: 18px 16px 16px 34px;
  display: flex; flex-direction: column; gap: 2px;
}
.cifras-radar > div + div { padding-left: 14px; }
.cifras-radar b {
  font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cifras-radar span { font-size: 11.5px; color: var(--tinta-media); }
.cifras-radar .urgente b { color: var(--restringe); }

#resultado { transition: opacity var(--t-rapida); }
#resultado.cargando { opacity: .45; }

.radar .tabla-larga { margin: 0; }
.radar .tabla-larga th, .radar .tabla-larga td { padding: 9px 14px; }
.radar .tabla-larga th:first-child, .radar .tabla-larga td:first-child { padding-left: 34px; }
.radar .tabla-larga th:last-child, .radar .tabla-larga td:last-child { padding-right: 34px; }

.etiqueta {
  margin-left: 7px; font-size: 10.5px; color: var(--tinta-suave);
  border: 1px solid var(--regla); border-radius: 2px; padding: 1px 4px;
}
.plazo { font-variant-numeric: tabular-nums; }
.plazo.vencido { color: var(--restringe); }
.plazo.este_ano { color: var(--restringe); font-weight: 600; }

.paginacion {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 34px; font-size: 13px; color: var(--tinta-media);
}

/* --- Línea del tiempo de las ortofotos -----------------------------------
   Va pegada al borde inferior del plano, no flotando: es un control del plano,
   no una pieza aparte. Solo aparece con la ortofoto puesta. */
.tiempo label { color: var(--tinta-media); }
.tiempo input[type="range"] {
  flex: 1; accent-color: var(--datum); min-height: 24px; cursor: pointer;
}
.tiempo output {
  font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 4ch; text-align: right;
}
.tiempo-nota { color: var(--tinta-media); min-width: 20ch; }
@media (max-width: 760px) { .tiempo-nota { display: none; } }

/* --- Texto para la memoria -----------------------------------------------
   Este bloque no se lee: se PEGA en un documento que alguien firma. Por eso se
   compone como documento (medida de lectura corta, párrafos separados, sin
   tablas) y cada estado lleva una etiqueta escrita además del color, que no
   viaja al portapapeles. */
.memoria-abre > summary {
  cursor: pointer; padding: 16px 28px; font-weight: 600; font-size: 14px;
  list-style: none; display: flex; align-items: center; gap: 9px;
  min-height: 48px;
}
.memoria-abre > summary::-webkit-details-marker { display: none; }
.memoria-abre > summary::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid var(--tinta-media); border-bottom: 1.5px solid var(--tinta-media);
  transform: rotate(-45deg); transition: transform var(--t-rapida);
}
.memoria-abre[open] > summary::before { transform: rotate(45deg); }
.memoria-abre > summary:hover { background: var(--papel-hundido); }

.memoria > header { align-items: center; }
.memoria > header .btn { min-height: 44px; margin-left: 12px; border-color: var(--tinta-media); }
.memoria > header h2 + .btn { margin-left: auto; }
.memoria .memoria-cabeza { margin-bottom: 18px; }

.memoria-bloque + .memoria-bloque {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--regla);
}
.memoria-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.memoria-cab h3 { margin-right: auto; }
.memoria-cab .btn { min-height: 44px; }

.memoria .parrafo { max-width: 68ch; margin: 0 0 13px; font-size: 14.5px; line-height: 1.62; }
.memoria .parrafo:last-child { margin-bottom: 0; }

/* La marca del estado, delante del párrafo: se ve de un vistazo qué no se
   puede firmar todavía sin leerlo entero. */
.memoria .marca {
  display: inline-block; margin-right: 8px; padding: 1px 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border: var(--via); border-radius: 20px; vertical-align: 2px;
}
.memoria .pendiente, .memoria .por-comprobar, .memoria .falta {
  border-left: 2px solid var(--sindato); padding-left: 12px;
}
.memoria .pendiente .marca, .memoria .por-comprobar .marca {
  border-color: #E3D7B8; background: #FBF8F0; color: var(--sindato);
}
.memoria .falta { border-left-color: var(--regla-fuerte); color: var(--tinta-media); }
.memoria .falta .marca { border-color: var(--regla-fuerte); color: var(--tinta-media); }

/* Transcripción literal del plan: se ve que es cita, no redacción propia. */
.memoria .literal {
  padding-left: 12px; border-left: 2px solid var(--regla-fuerte);
  color: var(--tinta-media); font-size: 14px;
}
.memoria .procedencia { max-width: 68ch; font-size: 11.5px; line-height: 1.5; }

/* El texto plano solo se revela si el navegador no deja copiar (sin https no
   hay API de portapapeles, y la herramienta se abre por la wifi con http). */
.memoria-fuente {
  width: 100%; margin-top: 12px; padding: 10px 12px;
  font: inherit; font-size: 13px; line-height: 1.5; color: var(--tinta);
  background: var(--papel-hundido); border: 1px solid var(--regla-fuerte);
  border-radius: var(--radio); resize: vertical;
}

.memoria .btn.copiado {
  border-color: #BFDBCB; background: #EFF7F2; color: var(--libre); font-weight: 600;
}
.memoria .estado-copia { min-height: 1em; margin: 8px 0 0; font-size: 12.5px; color: var(--libre); }

@media (max-width: 420px) {
  .memoria-cab { flex-wrap: wrap; }
  .memoria-cab .btn { width: 100%; }
}

/* --- Altura según el ancho de la calle -----------------------------------
   Una fila por fachada, porque una parcela de esquina tiene dos respuestas
   legítimas y elegir una por ella sería inventar. */
.alturas-vial { margin: 0 0 26px; }
.alturas-vial > h4 {
  font-size: 11.5px; font-weight: 500; color: var(--tinta-media); margin-bottom: 6px;
}
.alturas-vial > .procedencia { margin-bottom: 14px; }

.fachada { padding: 11px 0; border-top: 1px solid var(--papel-hundido); }
.fachada:first-of-type { border-top: none; padding-top: 4px; }
.fachada-cab {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--tinta-media); margin-bottom: 5px;
}
.fachada-cab b { font-size: 13.5px; color: var(--tinta); font-weight: 600; }
.fachada-cab .ancho { margin-left: auto; font-variant-numeric: tabular-nums; }
.fachada .resultado { font-size: 17px; letter-spacing: -0.015em; }
.fachada .resultado b { font-weight: 600; color: var(--datum); }
.fachada.dudosa .resultado b { color: var(--sindato); }
.fachada .aviso { margin-top: 9px; }

/* Rótulo de una fachada medida sobre el plano. Marcador HTML, no capa de
   texto del mapa: una capa `symbol` exigiría un servidor de glifos externo. */
.rotulo-fachada {
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--libre); border-left: 3px solid var(--libre);
  border-radius: 3px; padding: 3px 7px;
  font: 600 11.5px/1.2 "Instrument Sans", system-ui, sans-serif;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 1px 3px rgba(20,24,29,.12);
}
.rotulo-fachada.incierto {
  border-color: var(--sindato); border-left-color: var(--sindato);
  color: var(--tinta-media); font-weight: 500;
}

/* --- Predimensionado: la respuesta de la ficha ---------------------------
   Es lo primero que se ve y lo único con fondo propio. El resto de la ficha
   es lo que lo sostiene. La idea de diseño es una sola: cada número lleva
   escrito de dónde sale, y los tres orígenes se distinguen sin leer. */
.predim { background: var(--papel-hundido); border-bottom: 1px solid var(--regla); }
.predim.vacio { background: var(--papel); }
.predim.vacio .cuerpo { padding-top: 22px; }
.titular-predim {
  font-size: 23px; line-height: 1.25; letter-spacing: -0.025em;
  margin: 2px 0 18px;
}
.titular-predim b { font-weight: 600; color: var(--datum); }

/* Anchos repartidos a mano: sin esto la columna de la nota se come el sitio y
   «Superficie de parcela» se parte en dos renglones. La etiqueta y la cifra
   mandan; la nota es lo que cede. */
.cuentas-predim { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
.cuentas-predim .et  { width: 30%; }
.cuentas-predim .org { width: 15%; }   /* «SUPUESTO» es la palabra más ancha */
.cuentas-predim .num { width: 19%; }
.cuentas-predim .pq  { width: 36%; }
.cuentas-predim td { padding: 6px 0; border-bottom: 1px solid var(--papel); vertical-align: baseline; }
.cuentas-predim .et { color: var(--tinta-media); }
.cuentas-predim .num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
  padding-left: 14px; font-weight: 500;
}
.cuentas-predim .pq {
  padding-left: 16px; font-size: 11.5px; color: var(--tinta-suave); line-height: 1.4;
}

/* El origen, escrito, y en COLUMNA PROPIA: pegado a la etiqueta se caía al
   renglón siguiente en cuanto la columna se estrechaba y la tabla quedaba
   desaliñada. Sin esto el predimensionado es un número que nadie puede
   defender en una reunión: no se sabe qué manda la norma y qué supuso alguien
   un martes. */
.cuentas-predim .org { padding-left: 10px; white-space: nowrap; }
.cuentas-predim .origen {
  display: inline-block; padding: 0 4px;
  font-size: 9px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  border-radius: 2px; vertical-align: 1px;
}
.de-plan     .origen { background: #E6EBF2; color: var(--datum); }
.de-medido   .origen { background: #E7F0EA; color: var(--libre); }
.de-supuesto .origen { background: #F6F1E3; color: var(--sindato); }
.de-plan     .num { color: var(--tinta); }
.de-supuesto .num { color: var(--tinta-media); }

.predim .hpo {
  margin-top: 14px; padding: 10px 12px; font-size: 13.5px;
  background: var(--papel); border-left: 2px solid var(--sindato);
}

.supuestos {
  margin-top: 18px; padding: 14px 0 0; border: none; border-top: 1px solid var(--regla);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
}
.supuestos legend {
  padding: 0; font-size: 11px; font-weight: 500; letter-spacing: .04em;
  color: var(--tinta-media);
}
.supuestos label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tinta-media); }
.supuestos .con-unidad { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.supuestos input {
  font: inherit; font-size: 14px; width: 86px; min-height: 40px; padding: 6px 8px;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--regla-fuerte); border-radius: var(--radio);
  font-variant-numeric: tabular-nums;
}
.supuestos input:focus { border-color: var(--datum); }
.supuestos small { font-size: 11px; color: var(--tinta-suave); line-height: 1.35; }
.predim .aviso { margin-top: 12px; }
.predim .procedencia { margin-top: 14px; }

/* --- Régimen de intervención y coste de tramitación ----------------------
   Un formulario corto arriba y el desglose debajo, en la misma sección: el
   PEM que se teclea y el total que sale tienen que verse a la vez, porque lo
   que se hace aquí es tantear cifras (memoria de trabajo). */
.licencias .cuerpo { padding-bottom: 24px; }

.lic-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 18px; align-items: start;
  margin: 0 0 22px; padding: 16px 18px;
  background: var(--papel-hundido); border-radius: var(--radio);
}
.lic-form .lic-ancho { grid-column: 1 / -1; }

.lic-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lic-campo label { font-size: 11.5px; color: var(--tinta-media); }
.lic-campo input, .lic-campo select {
  width: 100%; min-height: 44px;            /* Fitts: 44 px de área de toque */
  font-size: 14.5px; background: var(--papel);
}
.lic-campo input { font-variant-numeric: tabular-nums; }
.lic-pista { font-size: 11px; color: var(--tinta-suave); }

/* La acción primaria es única y se distingue por color + peso + posición, no
   solo por color (Von Restorff). Con el recálculo automático es un respaldo,
   así que no roba sitio: comparte fila con el indicador de carga. */
.lic-accion { display: flex; align-items: center; gap: 12px; align-self: end; }
.lic-cargando { font-size: 12.5px; color: var(--tinta-media); }
/* Doherty: la respuesta se nota antes de 400 ms aunque el cálculo tarde. */
.lic-cargando.htmx-indicator { transition: opacity var(--t-rapida); }

.lic-vacio {
  max-width: 68ch; font-size: 13.5px; color: var(--tinta-media);
  padding: 2px 0 6px;
}

/* El veredicto: qué régimen aplica. Es lo que se viene a buscar, así que va
   primero y a tamaño de titular. */
.lic-regimen { margin-bottom: 24px; }
.lic-regimen > h4 {
  font-size: 11.5px; font-weight: 500; color: var(--tinta-media); margin-bottom: 6px;
}
.lic-veredicto {
  font-size: 20px; letter-spacing: -0.015em; font-weight: 600; color: var(--datum);
  margin-bottom: 3px;
}
.lic-regimen.sindato .lic-veredicto { color: var(--sindato); }
.lic-supuesto { font-size: 12.5px; color: var(--tinta-media); margin-bottom: 10px; }
.lic-como { max-width: 68ch; font-size: 13.5px; margin-bottom: 10px; }
.lic-motivo { max-width: 68ch; font-size: 13.5px; color: var(--tinta); margin: 6px 0 8px; }

.lic-regimen .cuentas {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 16px;
  margin: 10px 0; padding-top: 10px; border-top: 1px solid var(--regla);
  font-size: 13.5px;
}
.lic-regimen .cuentas dt { color: var(--tinta-media); }
.lic-regimen .cuentas dd { max-width: 60ch; }
.lic-regimen .procedencia { max-width: 68ch; margin-top: 8px; }
.lic-regimen .aviso { margin-top: 12px; }

/* El desglose. Tres columnas: concepto, de dónde sale la cifra, importe. La
   del medio es la que hace que esto sirva para presupuestar: sin la ordenanza
   y el artículo al lado, un número no se puede defender ante un cliente. */
.lic-coste > h4 {
  font-size: 11.5px; font-weight: 500; color: var(--tinta-media); margin-bottom: 8px;
}
table.lic-partidas td { vertical-align: top; }
table.lic-partidas td:first-child { width: 28%; font-weight: 500; }
table.lic-partidas .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.lic-art {
  display: block; margin-top: 3px;
  font-size: 10.5px; font-weight: 400; line-height: 1.45; color: var(--tinta-suave);
}
.lic-formula { max-width: 56ch; font-size: 12.5px; color: var(--tinta-media); }
/* La cita literal se ve que es cita y no redacción propia: va en catalán, que
   es el idioma en el que está publicada la ordenanza. */
.lic-cita {
  display: block; margin-top: 4px; padding-left: 9px;
  border-left: 2px solid var(--regla-fuerte);
  font-size: 11px; line-height: 1.5; color: var(--tinta-suave);
}

/* "Sin dato" y "no aplica" no son lo mismo y no se parecen: uno es un hueco
   que hay que resolver, el otro una respuesta cerrada. Ni uno ni otro se
   pintan como un cero. */
.lic-sindato { color: var(--sindato); font-weight: 600; font-size: 12.5px; }
.lic-noaplica { color: var(--tinta-suave); font-size: 12.5px; }
table.lic-partidas tr.sin_dato td:first-child { color: var(--sindato); }

table.lic-partidas tr.lic-total td {
  padding-top: 11px; border-top: 1px solid var(--tinta-media); border-bottom: none;
  font-size: 15px; font-weight: 600;
}
table.lic-partidas tr.lic-total .num { font-size: 19px; letter-spacing: -0.015em; }
table.lic-partidas tr.lic-total.parcial td { color: var(--sindato); }

.lic-coste .aviso.serio { margin-top: 14px; max-width: 68ch; }

/* Peak-End: el bloque cierra diciendo qué es esto. A tamaño de lectura y en
   la línea de cierre, no escondido como letra pequeña. */
.lic-nota-legal {
  margin-top: 16px; padding: 11px 13px;
  background: var(--datum-claro); border-radius: var(--radio);
  font-size: 12.5px; line-height: 1.55; color: var(--datum); max-width: 72ch;
}

.lic-avisos { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.lic-avisos .aviso { max-width: 72ch; }

/* Lo que no se necesita para decidir se pliega, no se borra (Hick + Tesler):
   las bonificaciones y el texto de las normas están a un clic. */
.lic-bonif, .lic-citas { margin-top: 18px; border-top: 1px solid var(--regla); }
.lic-bonif > summary, .lic-citas > summary {
  min-height: 44px; display: flex; align-items: center;
  font-size: 12.5px; color: var(--tinta-media); cursor: pointer;
}
.lic-bonif > summary:hover, .lic-citas > summary:hover { color: var(--tinta); }
.lic-bonif > summary:focus-visible, .lic-citas > summary:focus-visible {
  outline: 2px solid var(--datum); outline-offset: 2px;
}
.lic-bonif > .procedencia, .lic-citas > .procedencia { max-width: 68ch; margin: 0 0 12px; }
.lic-bonif table.datos { margin-bottom: 10px; }
.lic-bonif table.datos td { vertical-align: top; }

.lic-cita-bloque { margin-bottom: 14px; }
.lic-cita-cab { font-size: 12px; color: var(--tinta-media); margin-bottom: 5px; }
.lic-cita-cab a { color: var(--datum); }
.lic-citas .literal {
  max-width: 76ch; padding-left: 12px; border-left: 2px solid var(--regla-fuerte);
  font-size: 13px; line-height: 1.55; color: var(--tinta-media);
}

.licencias > .cuerpo > .procedencia { margin-top: 16px; max-width: 76ch; line-height: 1.55; }

@media (max-width: 560px) {
  .lic-form { grid-template-columns: 1fr; }
  .lic-accion .btn { width: 100%; }
  table.lic-partidas td:first-child { width: auto; }
  /* En móvil la columna de la fórmula se come la tabla: la cita se pliega y
     queda el cálculo, que es lo que se comprueba de un vistazo. */
  .lic-cita { display: none; }
}

/* El aviso de que el plano ha fallado. Antes era una frase larga metida en la
   caja de la leyenda: la estiraba, la partía en cuatro líneas y tapaba el mapa.
   Ahora es una línea corta, en su propia fila y con su color. */
.plano-aviso {
  align-self: flex-start; max-width: 100%;
  background: rgba(251,251,249,.96); backdrop-filter: blur(6px);
  border: 1px solid var(--sindato); border-left-width: 3px;
  border-radius: var(--radio); padding: 7px 11px;
  font-size: 12px; color: var(--tinta); margin: 0;
}

/* Leyenda del mapa de puntos (municipios sin barrios cargados). */
.puntos-leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 11px; }
.puntos-leyenda i {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 3px; vertical-align: -1px; border: 1px solid var(--papel);
}
.puntos-leyenda i.este_ano { background: #B5281B; }
.puntos-leyenda i.proximo  { background: #2E6B4F; }
.puntos-leyenda i.vencido  { background: #8FA3BD; }

/* Los controles que MapLibre ancla abajo (escala y atribución) se levantan por
   encima del pie del plano. `--alto-pie` la mide el JS, porque el pie crece
   cuando aparece la barra de años; el valor de reserva cubre el pie sin ella. */
.plano, .radar-mapa { --alto-pie: 46px; }
.plano .maplibregl-ctrl-bottom-right,
.plano .maplibregl-ctrl-bottom-left,
.radar-mapa .maplibregl-ctrl-bottom-right,
.radar-mapa .maplibregl-ctrl-bottom-left {
  bottom: calc(var(--alto-pie) + 8px);
}

/* --- Nota de método -------------------------------------------------------
   Cómo se mide algo y qué límites tiene es importante, pero no es un dato: si
   va como párrafo suelto llena la columna de lectura de texto largo y entierra
   los números. Va plegado, a un clic, y nunca se borra. */
.metodo { margin-top: 10px; }
.metodo > summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; cursor: pointer; list-style: none;
  font-size: 11.5px; color: var(--tinta-media);
  border-bottom: 1px dotted var(--regla-fuerte); width: fit-content;
}
.metodo > summary::-webkit-details-marker { display: none; }
.metodo > summary::after {
  content: ""; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--t-rapida);
}
.metodo[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.metodo > summary:hover { color: var(--tinta); }
.metodo > p {
  max-width: 64ch; margin: 7px 0 0;
  font-size: 12px; line-height: 1.55; color: var(--tinta-media);
}

/* --- A tener en cuenta ----------------------------------------------------
   Los avisos iban como una caja cada uno. Cuatro cajas idénticas seguidas son
   un muro: ocupan media pantalla y el ojo no puede ordenar cuál importa. En
   una sola región con viñetas se leen de un vistazo y pesan lo que deben. */
.a-tener-en-cuenta {
  margin-top: 16px; padding: 12px 14px;
  background: var(--papel); border-left: 3px solid var(--sindato);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.a-tener-en-cuenta h5 {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--sindato); margin-bottom: 8px;
}
.a-tener-en-cuenta h5 span {
  font-size: 10px; padding: 0 5px; border-radius: 9px;
  background: #F6F1E3; color: var(--sindato);
}
.a-tener-en-cuenta ul { margin: 0; padding: 0; list-style: none; }
.a-tener-en-cuenta li {
  position: relative; padding-left: 15px; max-width: 66ch;
  font-size: 13px; line-height: 1.55; color: var(--tinta);
}
.a-tener-en-cuenta li + li { margin-top: 7px; }
.a-tener-en-cuenta li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--sindato);
}

/* Pie de la portada: cierra la página y dice de dónde salen los datos. */
.inicio-pie {
  grid-column: 1 / -1; align-self: end;
  margin-top: 48px; padding: 22px 0 8px;
  border-top: 1px solid var(--regla);
  display: flex; flex-wrap: wrap; gap: 6px 36px; align-items: baseline;
}
.inicio-pie p { margin: 0; max-width: 62ch; font-size: 12.5px; color: var(--tinta-media); }
.inicio-pie a { color: var(--datum); }
.inicio-pie .aviso-pie { color: var(--tinta-suave); font-size: 12px; }

/* Selector de idioma: dos códigos de dos letras al final de la navegación.
   Es un ajuste, no un destino, así que no compite con los enlaces del menú. */
.idiomas {
  display: inline-flex; align-items: center; margin-left: 10px; padding-left: 12px;
  border-left: 1px solid var(--regla); gap: 1px;
}
.idiomas a {
  padding: 0 7px; height: 26px; display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  color: var(--tinta-suave); text-decoration: none; border-radius: 3px;
}
/* Lo activo se marca igual que en la navegación: color y peso, sin relleno.
   Con un bloque azul macizo al lado de un enlace sin fondo había dos lenguajes
   distintos para decir lo mismo, y eso se ve antes de leerlo. */
.idiomas a:hover { color: var(--tinta); background: var(--papel-hundido); }
.idiomas a[aria-current="true"] { color: var(--datum); font-weight: 700; }