/* app.css — Sistema monocromático minimalista (Space Grotesk).
 * Tailwind (CDN) maneja el layout/utilidades; aquí va la base del sistema:
 * tipografía, formularios, mayúsculas en acciones, drawer, shimmer, mapa. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
  --color-black: #121212;
  --color-dark-gray: #292929;
  --color-gray: #4a4a4a;
  --color-light-gray: #e0e0e0;
  --color-white: #ffffff;
  --color-error: #d32f2f;
}

html { font-family: 'Space Grotesk', system-ui, sans-serif; }
body { color: var(--color-black); background: var(--color-white); }

/* ----- Jerarquía tipográfica ----- */
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.02em; }

/* ----- Acciones: MAYÚSCULAS con tracking (botones y enlaces de acción) ----- */
button:not([aria-label]):not([data-drawer-close]),
input[type="submit"],
.rh-action {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
/* Opt-out: elementos que son <button> pero NO son acciones (títulos que abren
   el drawer, filas de lista). No deben ir en mayúsculas. */
.rh-plain {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: inherit;
}

/* ----- Formularios: borde negro recto, foco sobrio ----- */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border: 1px solid var(--color-black);
  border-radius: 0;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--color-dark-gray);
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}
/* Foco visible y consistente para cualquier elemento accionable por teclado */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* ----- Drawer lateral (lo conduce ui.js alternando .is-open) ----- */
.drawer { position: fixed; inset: 0; z-index: 50; visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(18, 18, 18, .55);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.drawer__backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer__panel {
  position: fixed; top: 0; right: 0; z-index: 51;
  height: 100%; width: min(520px, 100%);
  background: var(--color-white); border-left: 1px solid var(--color-black);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s ease;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .drawer__backdrop { transition: none; }
}

/* ----- Shimmer de carga (gris) ----- */
.shimmer {
  background: linear-gradient(90deg, #ededed 25%, #f7f7f7 37%, #ededed 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ----- Leaflet ----- */
.rh-map { height: clamp(420px, 72vh, 760px); }
@media (max-width: 640px) { .rh-map { height: 55vh; } }
.leaflet-container { font: inherit; }
/* Leyenda del mapa */
.rh-legend { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
.rh-legend span { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-gray); }
.rh-legend svg { width: 14px; height: 14px; }