@font-face { font-family: "Bungee"; src: url("/static/fonts/bungee-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("/static/fonts/rubik-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("/static/fonts/rubik-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/static/fonts/caveat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --cream: #fff4d6;
  --ink: #1b1b1f;
  --mustard: #ffc42e;
  --flag-red: #c9261a;
  --grass: #3fae49;
  --grass-dark: #1d6b2c;
  --sky: #7fd6f5;
  --link: #0a4a99;
  --rule: #1b1b1f;
  --muted: #4a4a55;
  --panel: #ffffff;
  --shadow: 4px 4px 0 var(--ink);
  --display: "Bungee", Impact, "Arial Black", sans-serif;
  --sans: "Rubik", system-ui, sans-serif;
  --hand: "Caveat", "Comic Sans MS", cursive;
  /* Kept for the rules below that still use the old names. */
  --parchment: var(--cream);
  --official-blue: var(--link);
  --seal-red: var(--flag-red);
  --serif: var(--display);
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(27, 27, 31, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 27, 31, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0; }

a { color: var(--link); font-weight: 500; }
a:hover { background: var(--mustard); color: var(--ink); text-decoration-thickness: 3px; }

:focus-visible {
  outline: 4px solid var(--flag-red);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
}
h1 {
  display: inline-block;
  font-size: 1.9rem;
  margin: 0 0 1.25rem;
  padding: 0.3rem 0.8rem;
  background: var(--mustard);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  transform: rotate(-1deg);
}
h2 { font-size: 1.35rem; margin: 2.25rem 0 0.7rem; }
h2::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 6px;
  margin-top: 0.3rem;
  background: var(--flag-red);
}
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }

.masthead {
  background: var(--sky);
  border-bottom: 4px solid var(--ink);
  padding: 1rem 1rem 0;
  text-align: center;
  position: relative;
}
.masthead::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--flag-red) 0 24px, var(--mustard) 24px 48px);
  border-bottom: 3px solid var(--ink);
}
.masthead__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.75rem;
  text-align: left;
}
.masthead__crest { image-rendering: pixelated; flex: none; filter: drop-shadow(3px 3px 0 var(--ink)); }
.masthead__name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--ink);
  text-shadow: 2px 2px 0 #fff;
}
.masthead__motto { margin: 0.2rem 0 0.5rem; font-family: var(--hand); font-size: 1.5rem; color: var(--ink); transform: rotate(-1deg); }

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.6rem;
}
.nav a {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.nav a:hover { background: var(--mustard); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }

.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.75rem 1rem 3.5rem;
}

.footer {
  flex: none;
  background: var(--ink);
  color: var(--cream);
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.9rem;
}
.footer a { color: var(--mustard); }
.footer a:hover { background: var(--mustard); color: var(--ink); }
.footer p { margin: 0.3rem 0; }
.footer__stamp {
  display: inline-block;
  padding: 0.2rem 0.9rem;
  border: 3px solid var(--flag-red);
  color: #ff8a7d;
  font-family: var(--display);
  font-size: 1rem;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.flash, .notice {
  border: 3px solid var(--ink);
  border-left-width: 12px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0.6rem 0.9rem;
  margin: 0 0 1.25rem;
}
.flash { border-left-color: var(--link); }
.flash--error, .notice--draft, .notice--warning { border-left-color: var(--flag-red); }
.flash--success { border-left-color: var(--grass); }
.notice--warning { background: #ffe8a3; }

form { margin: 0 0 1rem; }
label { display: block; font-weight: 700; margin: 0.9rem 0 0.25rem; }
.hint { color: var(--muted); font-size: 0.9rem; font-weight: 400; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="datetime-local"], input[type="file"], select, textarea {
  display: block;
  width: 100%;
  max-width: 34rem;
  padding: 0.5rem 0.6rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
input:focus, select:focus, textarea:focus { background: #fffbe8; box-shadow: 4px 4px 0 var(--mustard); }
textarea { min-height: 8rem; max-width: 46rem; }
.field-error { color: var(--flag-red); font-weight: 700; margin: 0.25rem 0 0; }
.checkbox { display: flex; gap: 0.5rem; align-items: baseline; font-weight: 400; }

button, .button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.2rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--mustard);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.08s, box-shadow 0.08s;
}
button:hover, .button:hover { background: #ffd35c; color: var(--ink); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
button:active, .button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
button.secondary, .button.secondary { background: #fff; }
button.danger { background: var(--flag-red); color: #fff; }
button.danger:hover { background: #a81e14; color: #fff; }
.inline-form { display: inline; }
.inline-form button { margin-top: 0; }

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 0.5rem 0 1.25rem;
  background: var(--panel);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
}
th, td { border-bottom: 2px solid var(--ink); padding: 0.45rem 0.7rem; text-align: left; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: #fff9e6; }
th { background: var(--sky); font-family: var(--display); font-weight: 400; font-size: 0.85rem; }
.table-scroll { overflow-x: auto; padding: 0 6px 6px 0; }
.admin-table th, .admin-table td { padding: 0.25rem 0.45rem; font-size: 0.92rem; }

.sello {
  display: inline-block;
  border: 3px solid var(--link);
  border-radius: 4px;
  padding: 0 0.5rem;
  margin: 3px;
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--link);
  background: #fff;
  transform: rotate(-3deg);
}
.sello--denied, .sello--blocked { border-color: var(--flag-red); color: var(--flag-red); }
.sello--granted { border-color: var(--grass-dark); color: var(--grass-dark); }

.banner {
  border: 3px solid var(--ink);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 0.8rem 1rem;
  margin: 0 0 1.5rem;
}
.banner--open { background: #c9f2c2; border-left: 14px solid var(--grass); }
.banner--soon { background: #d8f2fc; border-left: 14px solid var(--sky); }

.pagination { display: flex; gap: 1rem; margin: 1rem 0; }
.muted { color: var(--muted); }

.news-body img { max-width: 100%; }

@media (max-width: 40rem) {
  .masthead__name { font-size: 1.05rem; }
  .masthead__crest { width: 40px; height: auto; }
  .masthead__motto { font-size: 1.25rem; }
  h1 { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.nav-button {
  margin: 0;
  padding: 0.35rem 0.9rem;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}
.nav-button:hover { background: var(--mustard); }
.form-card { max-width: 38rem; border: 3px solid var(--ink); background: #fff; box-shadow: var(--shadow); padding: 1rem 1.25rem 1.25rem; }
.coordinates { font-variant-numeric: tabular-nums; }
.temporary-password {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 3px dashed var(--flag-red);
  background: #fff;
  font-family: ui-monospace, monospace;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
}
.admin-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; padding: 0; margin: 0 0 1.5rem; }
.admin-nav a {
  display: inline-block;
  padding: 0.25rem 0.8rem;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  text-decoration: none;
  font-weight: 700;
}
.admin-nav a:hover { background: var(--mustard); }
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-bottom: 1rem; }
.filters label { margin: 0 0 0.2rem; }
.filters button { margin-top: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.admin-table input[type="text"] { max-width: 14rem; display: inline-block; padding: 0.2rem 0.4rem; }

/* ---- Plano urbanístico (VIL-05). State is never colour alone: stroke width and dashes differ. */
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 52rem) { .map-layout { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); } }
.map { border: 3px solid var(--ink); box-shadow: var(--shadow); background: #fff; padding: 0.5rem; }
.map svg { display: block; width: 100%; height: auto; max-height: 80vh; }
.plot-panel { border: 3px solid var(--ink); box-shadow: var(--shadow); background: #fffbe8; padding: 0.75rem 1rem; }
.plot-panel h2 { margin-top: 0; }
.plot-panel dt { font-weight: 700; margin-top: 0.5rem; }
.plot-panel dd { margin: 0; }

#map .plot, #map .plot > * { cursor: default; }
#map [role="button"] { cursor: pointer; }
#map .plot--free > :not(text):not(tspan), #map .plot--free:not(g) {
  fill: #b6f08a; stroke: #1d6b2c; stroke-width: 0.8; stroke-dasharray: none; opacity: 1;
}
#map .plot--assigned > :not(text):not(tspan), #map .plot--assigned:not(g) {
  fill: #ffb08a; stroke: #5b2d00; stroke-width: 1.8; stroke-dasharray: none; opacity: 1;
}
#map .plot--closed > :not(text):not(tspan), #map .plot--closed:not(g) {
  fill: #d9d9d9; stroke: #3a3a3a; stroke-width: 0.8; stroke-dasharray: 2 1.2; opacity: 0.65;
}
#map [role="button"]:hover > :not(text):not(tspan) { filter: brightness(0.92); }
#map [role="button"]:focus-visible { outline: 4px solid var(--flag-red); outline-offset: 1px; }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; padding: 0; margin: 0 0 1rem; }
.legend__swatch { display: inline-block; width: 1.6rem; height: 1rem; vertical-align: middle; background: #fff; }
.legend__swatch--free { border: 2px solid #1d6b2c; background: #b6f08a; }
.legend__swatch--assigned { border: 5px solid #5b2d00; background: #ffb08a; }
.legend__swatch--closed { border: 2px dashed #3a3a3a; background: #d9d9d9; opacity: 0.65; }
.legend__swatch--mapped { border: 2px solid #1d6b2c; background: #b6f08a; }
.legend__swatch--orphan { border: 2px dashed #8a1c1c; background: #f3c4c4; }

#map .report--mapped > :not(text):not(tspan), #map .report--mapped:not(g),
.map--report .report--mapped > :not(text):not(tspan) { fill: #b6f08a; stroke: #1d6b2c; stroke-width: 0.8; }
.map--report .report--orphan > :not(text):not(tspan) { fill: #f3c4c4; stroke: #8a1c1c; stroke-width: 0.8; stroke-dasharray: 2 1.2; }

.banner--site { width: calc(100% - 2rem); max-width: 62rem; margin: 1.25rem auto 0; }
.banner--next { background: #d8f2fc; border-left: 14px solid var(--sky); }
.news-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.news-list li {
  border: 3px solid var(--ink);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 0.75rem 1rem;
}
.news-list li:nth-child(odd) { transform: rotate(-0.4deg); }
.news-list li:nth-child(even) { transform: rotate(0.4deg); }
.news-list h2, .news-list h3 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.news-list h2::after { display: none; }
.news-list p { margin: 0.2rem 0; }
.news-body { max-width: 46rem; background: #fff; border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 0.5rem 1.25rem 1rem; }
.news-body pre { overflow-x: auto; background: #fff9e6; border: 2px solid var(--ink); padding: 0.6rem; }
.news-body blockquote { margin-left: 0; padding-left: 1rem; border-left: 6px solid var(--mustard); }
.status-line {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.3rem;
  padding: 0.3rem 0.9rem;
  background: var(--grass);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
}
.form-card--wide { max-width: 52rem; }

.nav-count {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0 0.35rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--flag-red);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}