/* Plaza Esmeralda -- styles specific to the shopping-center vertical.
 * Loaded ONLY by plaza.html, after styles.css + admin.css. Everything that
 * can be reused as-is (buttons, filters-col, detail-panel, spec-grid,
 * price-block, tables, stat-tiles, admin settings...) is reused verbatim
 * from styles.css/admin.css with no new class -- this file only adds what
 * a shopping center actually needs that a subdivision doesn't: the
 * interior floorplan basemap, fixed (non-rentable) elements, unit-kind
 * styling, the level switch, and the directory search. */

/* ---------------------------------------------------- interior basemap -- */
.plaza-map-frame { aspect-ratio: 1400 / 760; }

.map-frame svg .bm-shell { fill: var(--sand-100); stroke: var(--brand-ink); stroke-width: 2.4; }

/* Fixed elements: drawn, never clickable (no tabindex/role on these -- see
   map.js _buildFixtures), never counted in the legend because they never
   enter lotEls/lotsById in the first place. */
.map-frame svg .fixture-shape { stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.map-frame svg .fixture-corridor .fixture-shape { fill: #EFEAE1; stroke: none; }
.map-frame svg .fixture-escalator .fixture-shape,
.map-frame svg .fixture-elevator .fixture-shape,
.map-frame svg .fixture-restroom .fixture-shape {
  fill: var(--sand-200); stroke: var(--stone-500); stroke-dasharray: 3 2;
}
.map-frame svg .fixture-entrance .fixture-shape {
  fill: var(--sand-50); stroke: var(--brand-ink); stroke-opacity: .45; stroke-dasharray: 4 3;
}
.map-frame svg .fixture-label {
  font-size: 8px; fill: var(--stone-500); font-family: var(--font-ui); font-weight: 600;
  text-anchor: middle; pointer-events: none; text-transform: uppercase; letter-spacing: .03em;
  paint-order: stroke; stroke: var(--sand-50); stroke-width: 3px; stroke-linejoin: round;
}

/* ---------------------------------------------------- unit kind styling - */
/* Estado (fill/dot) sigue siendo el unico canal de color de "que tan
   disponible esta"; el tipo de local (ancla/kiosco/food court) se distingue
   por trazo, nunca por otro color -- mismo principio de canales de brand.md
   aplicado a una dimension nueva. */
.map-frame svg .lot.kind-anchor .lot-outline { stroke-width: 1.4; }
.map-frame svg .lot.kind-kiosk .lot-outline { stroke-dasharray: 3 2; }
.map-frame svg .lot.kind-food .lot-outline { stroke-dasharray: 1 2.4; }
.map-frame svg .lot-kind-label {
  font-size: 6.6px; fill: var(--brand-ink); opacity: 0; text-anchor: middle; font-family: var(--font-ui);
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em; pointer-events: none;
  paint-order: stroke; stroke: var(--sand-50); stroke-width: 2.5px; stroke-linejoin: round;
  transition: opacity .15s ease;
}
.map-frame svg.zoom-near .lot-kind-label { opacity: .8; }
.map-frame svg.mode-solido .lot-kind-label { fill: #fff; stroke: rgba(11,34,57,.55); }
@media (prefers-reduced-motion: reduce) { .map-frame svg .lot-kind-label { transition: none; } }

/* ------------------------------------------------------- level switch --- */
/* Reutiliza .view-switch tal cual (mismas clases que Mapa/Tabla en el otro
   demo) -- es exactamente el mismo patron de UI, aplicado a Planta baja /
   Nivel 1 en vez de a Mapa / Tabla. */
.level-switch-wrap { display: flex; align-items: center; gap: 10px; }
.level-switch-wrap .fg-label { font-size: 12px; font-weight: 700; color: var(--brand-ink); text-transform: uppercase; letter-spacing: .04em; }

/* -------------------------------------------------------- directory search */
.search-field-wrap { position: relative; }
.search-results { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.search-result-item {
  display: flex; flex-direction: column; text-align: left; gap: 1px; background: var(--sand-100);
  border: 1px solid transparent; border-radius: var(--radius-chip); padding: 7px 9px; cursor: pointer; font-size: 12.5px;
}
.search-result-item:hover, .search-result-item:focus-visible { border-color: var(--brand-copper); }
.search-result-item .sr-name { font-weight: 700; color: var(--brand-ink); }
.search-result-item .sr-meta { color: var(--stone-500); font-size: 11.5px; }
.search-count { font-size: 11.5px; color: var(--stone-500); margin-top: 6px; }

/* ---------------------------------------------------------- kind chip --- */
/* Reusa .status-chip con --chip-color neutro para mostrar el tipo de local
   (Ancla/Kiosco/Food court) junto al chip de estado en la ficha. */
.kind-chip { --chip-color: var(--stone-500); }

/* ------------------------------------------------- admin: vencimientos -- */
.venc-badge {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; background: #FDECEA; color: #C0392B; white-space: nowrap;
}
.venc-badge.is-soon { background: #FFF4E1; color: #7A4E0C; }
.admin-hint.venc-subtitle { margin-bottom: 16px; }

/* ------------------------------------------------------------ occupancy - */
.occupancy-bar { background: var(--sand-100); border-radius: 999px; height: 8px; overflow: hidden; margin-top: 6px; }
.occupancy-bar > span { display: block; height: 100%; background: var(--brand-copper); border-radius: 999px; }

@media (max-width: 480px) {
  .level-switch-wrap { flex-wrap: wrap; }
}

/* =========================================================================
   VISTA PÚBLICA ORIENTADA AL VISITANTE
   El público de un mapa de plaza no es quien quiere rentar: es quien viene
   de compras. Todo lo de abajo existe para responder "¿dónde está tal
   tienda?", "¿qué hay de comer?", "¿a qué hora abren?" y "¿dónde está el
   baño?" -- en ese orden, y en un celular sostenido con una mano.
   ========================================================================= */

[hidden] { display: none !important; }

/* ------------------------------------------------------- hero + buscador */
/* overflow visible para que la lista de resultados pueda salirse del hero;
   el fondo sigue recortado por .hero-media, que es absolute inset:0. */
.plaza-hero { overflow: visible; }
.plaza-hero .hero-content { padding: 56px 24px 44px; }
.plaza-hero h1 { margin-bottom: .18em; }
.plaza-hero .hero-subtitle { font-size: 18px; margin-bottom: 22px; }

.finder { position: relative; max-width: 620px; z-index: 30; }
.finder-bar {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border-radius: var(--radius-card); box-shadow: var(--shadow-md);
  padding: 0 12px 0 14px; border: 2px solid transparent;
}
.finder-bar:focus-within { border-color: var(--brand-copper); }
.finder-icon { width: 20px; height: 20px; flex: none; color: var(--stone-500); }
.finder-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-ui); font-size: 16px; color: var(--brand-ink);
  padding: 15px 0; -webkit-appearance: none; appearance: none;
}
.finder-input::placeholder { color: var(--stone-500); }
.finder-input::-webkit-search-cancel-button { display: none; }
.finder-clear {
  border: none; background: var(--sand-100); color: var(--brand-ink); cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; font-size: 18px; line-height: 1; flex: none;
}
.finder-clear:hover { background: var(--sand-200); }

.finder-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--sand-200); border-radius: var(--radius-card);
  box-shadow: var(--shadow-md); max-height: min(62vh, 460px); overflow-y: auto; padding: 6px;
}
.sr-count { font-size: 11.5px; color: var(--stone-500); padding: 6px 10px 2px; }
.sr-group {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--stone-500); padding: 10px 10px 5px; border-top: 1px solid var(--sand-100); margin-top: 4px;
}
.sr-group:first-of-type { border-top: none; margin-top: 0; }
.sr-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-radius: var(--radius-chip);
  padding: 9px 10px; cursor: pointer; min-height: 52px;
}
.sr-item:hover { background: var(--sand-100); }
.sr-item:focus-visible { border-color: var(--brand-copper); background: var(--sand-100); }
.sr-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sr-name { font-size: 14.5px; font-weight: 700; color: var(--brand-ink); }
.sr-meta { font-size: 12px; color: var(--stone-500); }
.sr-icon { flex: none; }
.sr-empty { padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.sr-empty strong { color: var(--brand-ink); font-size: 14px; }
.sr-empty span { color: var(--stone-500); font-size: 12.5px; }

/* --------------------------------------------------------- monograma ---- */
/* No hay logos de las tiendas y no se inventan: la identidad se pinta con
   sus dos letras sobre su color de marca. El texto se oscurece mezclando el
   color con el marino para que SIEMPRE pase contraste AA, sea cual sea el
   color que traiga la tienda. */
.mono {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-card);
  font-size: 13.5px; font-weight: 800; letter-spacing: .02em;
  background: var(--sand-100); color: var(--brand-ink); border: 1px solid var(--sand-200);
}
@supports (background: color-mix(in srgb, red 10%, white)) {
  .mono {
    background: color-mix(in srgb, var(--brand, #0B2239) 15%, #fff);
    color: color-mix(in srgb, var(--brand, #0B2239) 65%, #0B2239);
    border-color: color-mix(in srgb, var(--brand, #0B2239) 28%, #fff);
  }
}
.mono.lg { width: 52px; height: 52px; font-size: 18px; }
.mono.is-empty { background: var(--sand-100); color: var(--stone-500); border-style: dashed; }

/* ------------------------------------------------------ chips de categoría */
.cat-chips {
  display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap;
}
.cat-chip {
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff;
  font-size: 13.5px; font-weight: 600; padding: 9px 15px; border-radius: var(--radius-chip);
  cursor: pointer; white-space: nowrap; min-height: 40px;
}
.cat-chip:hover { background: rgba(255,255,255,.22); }
.cat-chip.is-active {
  background: #fff; color: var(--brand-ink); border-color: var(--brand-copper);
  box-shadow: inset 0 0 0 1px var(--brand-copper); font-weight: 700;
}

/* ------------------------------------------------- interruptor "abierto" */
.finder-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.open-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; min-height: 40px; }
.open-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.os-track {
  width: 42px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.45); position: relative; transition: background .15s ease; flex: none;
}
.os-thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
}
.open-switch input:checked + .os-track { background: var(--brand-copper); border-color: var(--brand-copper); }
.open-switch input:checked + .os-track .os-thumb { transform: translateX(18px); }
.open-switch input:focus-visible + .os-track { outline: 2px solid var(--brand-copper-soft); outline-offset: 2px; }
.os-label { color: #fff; font-size: 14px; font-weight: 600; }
.finder-summary { font-size: 13px; color: rgba(255,255,255,.82); }
.plaza-hero .clear-filters-btn { color: #fff; border: 1px solid rgba(255,255,255,.4); }
.plaza-hero .clear-filters-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.plaza-hero .hero-stats { margin-top: 34px; gap: 28px; }
@media (prefers-reduced-motion: reduce) { .os-track, .os-thumb { transition: none; } }

/* ------------------------------------------------------- estado de horario */
.hours-pill {
  flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: var(--sand-100); color: var(--stone-700); white-space: nowrap;
}
.hours-pill.is-open { background: #EAF6EE; color: #1F6B3D; }
.hours-pill.is-soon { background: #FFF4E1; color: #7A4E0C; }
.hours-pill.is-closed { background: var(--sand-100); color: var(--stone-700); }
.hours-pill.is-status { background: var(--sand-100); color: var(--brand-ink); }

.hours-state {
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700;
  padding: 10px 13px; border-radius: var(--radius-card); margin: 14px 0;
  background: var(--sand-100); color: var(--stone-700);
}
.hours-state .hs-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.hours-state.is-open { background: #EAF6EE; color: #1F6B3D; }
.hours-state.is-soon { background: #FFF4E1; color: #7A4E0C; }
.hours-state.is-closed { background: var(--sand-100); color: var(--stone-700); }

.hours-table { margin: 14px 0; font-size: 13px; display: grid; gap: 5px; }
.hours-table > div { display: flex; justify-content: space-between; gap: 12px; }
.hours-table dt { color: var(--stone-500); margin: 0; }
.hours-table dd { margin: 0; color: var(--brand-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.map-tooltip .tt-hours { font-weight: 700; margin-top: 2px; }
.map-tooltip .tt-hours.is-open { color: #7FD69F; }
.map-tooltip .tt-hours.is-soon { color: #F5C97A; }
.map-tooltip .tt-hours.is-closed { color: rgba(255,255,255,.62); }

/* ------------------------------------------------------- ficha de tienda */
.store-head { display: flex; align-items: center; gap: 13px; margin-bottom: 4px; }
.store-head h3 { margin: 0 0 2px; font-size: 21px; }
.store-giro { font-size: 12.5px; color: var(--stone-500); }
.store-desc { font-size: 14px; color: var(--stone-700); margin: 12px 0 0; }

/* La ubicación es la respuesta a la pregunta que trajo a la persona: va
   grande, no escondida entre las specs. */
.where-block {
  background: var(--brand-ink); color: #fff; border-radius: var(--radius-card);
  padding: 12px 14px; margin: 12px 0 14px;
}
.where-block .k {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-copper-soft); font-weight: 700; margin-bottom: 2px;
}
.where-block .v { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.2; }

.promo-banner {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: #FFF4E1; border: 1px solid var(--brand-copper-soft); color: #7A4E0C;
  border-radius: var(--radius-chip); padding: 10px 12px; font-size: 13px; margin-top: 12px;
}
.promo-tag {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  background: var(--brand-copper); color: #fff; padding: 3px 7px; border-radius: var(--radius-chip);
}
.phone-btn { margin-top: 4px; }
.detail-actions { flex-wrap: wrap; }
.detail-actions .btn { flex: 1 1 auto; }
.sheet-close {
  position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--sand-200); background: #fff; color: var(--brand-ink); font-size: 20px;
  line-height: 1; cursor: pointer; z-index: 2;
}

/* ------------------------------------------------------ mapa: dos columnas */
/* Sin columna de filtros: los filtros del visitante viven arriba, en el hero. */
.plaza-map-layout { grid-template-columns: minmax(0, 1fr) 360px; }
@media (max-width: 1180px) { .plaza-map-layout { grid-template-columns: minmax(0, 1fr); } }

.level-hint { margin: 10px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.level-hint-btn {
  border: 1px dashed var(--sand-200); background: #fff; color: var(--brand-ink);
  border-radius: var(--radius-chip); padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.level-hint-btn:hover { border-color: var(--brand-copper); color: var(--brand-copper); }

/* Amenidad resaltada desde el buscador (baños, cajero, elevador...). */
.map-frame svg .fixture-atm .fixture-shape {
  fill: var(--sand-200); stroke: var(--stone-500); stroke-dasharray: 3 2;
}
.map-frame svg .fixture.is-highlighted .fixture-shape {
  fill: var(--brand-copper-soft); stroke: var(--brand-copper); stroke-width: 2.4; stroke-dasharray: none;
  animation: fixture-pulse 1.3s ease-in-out 3;
}
.map-frame svg .fixture.is-highlighted .fixture-label { fill: var(--brand-ink); }
@keyframes fixture-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .map-frame svg .fixture.is-highlighted .fixture-shape { animation: none; }
}

/* ---------------------------------------------------------- directorio A-Z */
.dir-section { padding: 56px 24px; max-width: 1080px; margin: 0 auto; }
.az-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.az-jump-link {
  min-width: 34px; min-height: 34px; border: 1px solid var(--sand-200); background: #fff;
  border-radius: var(--radius-chip); color: var(--brand-ink); font-size: 13px; font-weight: 700;
  cursor: pointer; padding: 0 8px;
}
.az-jump-link:hover { border-color: var(--brand-copper); color: var(--brand-copper); }
.az-group { margin-bottom: 26px; scroll-margin-top: 96px; }
.az-letter {
  font-family: var(--font-display); font-size: 22px; color: var(--brand-copper); font-weight: 700;
  border-bottom: 1px solid var(--sand-200); padding-bottom: 6px; margin-bottom: 10px;
}
.az-rows { display: grid; gap: 8px; }
.az-row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  width: 100%; text-align: left; background: #fff; border: 1px solid var(--sand-200);
  border-radius: var(--radius-card); padding: 10px 14px; cursor: pointer; min-height: 62px;
}
.az-row:hover { border-color: var(--brand-copper); box-shadow: var(--shadow-sm); }
.az-main { display: flex; flex-direction: column; min-width: 0; }
.az-name { font-size: 15px; font-weight: 700; color: var(--brand-ink); }
.az-giro { font-size: 12px; color: var(--stone-500); }
.az-loc { font-size: 12.5px; color: var(--stone-700); font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------ servicios / amenidades */
.svc-section { padding: 0 24px 56px; max-width: 1080px; margin: 0 auto; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.svc-card {
  display: flex; align-items: flex-start; gap: 12px; text-align: left; background: #fff;
  border: 1px solid var(--sand-200); border-radius: var(--radius-card); padding: 14px; cursor: pointer;
}
.svc-card:hover { border-color: var(--brand-copper); box-shadow: var(--shadow-sm); }
.svc-glyph {
  flex: none; width: 42px; height: 42px; border-radius: var(--radius-card);
  background: var(--sand-100); color: var(--brand-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.svc-glyph svg { width: 22px; height: 22px; }
.sr-icon { width: 38px; height: 38px; border-radius: var(--radius-card); background: var(--sand-100);
  color: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center; }
.sr-icon svg { width: 20px; height: 20px; }
.svc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.svc-name { font-size: 15px; font-weight: 700; color: var(--brand-ink); }
.svc-note { font-size: 12.5px; color: var(--stone-500); }
.svc-level { font-size: 11.5px; font-weight: 700; color: var(--brand-copper); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* --------------------------------------------------------- arrendamiento */
/* Sigue existiendo, pero fuera del camino principal: quien busca local baja
   hasta aquí; quien viene de compras nunca la necesita. */
.lease-section { background: var(--brand-ink); color: rgba(255,255,255,.86); padding: 56px 24px; }
.lease-inner { max-width: 1280px; margin: 0 auto; }
.lease-section h2, .lease-section h3 { color: #fff; }
.lease-section .section-head p { color: rgba(255,255,255,.78); max-width: 640px; }
.lease-filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px;
  background: var(--brand-ink-soft); border-radius: var(--radius-card); padding: 16px; margin-bottom: 18px;
}
.lf-field label, .lf-field .fg-label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--brand-copper-soft); margin-bottom: 6px;
}
.lf-field input[type=number], .lf-field select {
  width: 100%; padding: 9px 10px; border-radius: var(--radius-chip); border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06); color: #fff; font-size: 13px; font-family: var(--font-ui);
}
.lf-field select option { color: var(--brand-ink); }
.lf-field .range-row span { color: rgba(255,255,255,.6); }
.lf-check { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.lf-check .checkbox-row { color: #fff; margin-top: 0; }
.lf-check .checkbox-row label { text-transform: none; letter-spacing: normal; font-size: 13px; color: #fff; margin: 0; }
.lease-section .btn-ghost { color: #fff; }
.lease-section .btn-ghost:hover { background: rgba(255,255,255,.12); }
.lease-count { font-size: 13px; color: var(--brand-copper-soft); font-weight: 700; margin-bottom: 14px; }
.lease-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.lease-card { background: #fff; border-radius: var(--radius-card); padding: 16px; color: var(--stone-700); }
.lc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lease-card h3 { margin: 0; font-size: 18px; color: var(--brand-ink); font-family: var(--font-display); }
.lc-level { font-size: 12px; color: var(--stone-500); margin-bottom: 10px; }
.lc-specs { display: grid; gap: 6px; margin: 0 0 12px; font-size: 13px; }
.lc-specs > div { display: flex; justify-content: space-between; gap: 10px; }
.lc-specs dt { color: var(--stone-500); margin: 0; }
.lc-specs dd { margin: 0; color: var(--brand-ink); font-weight: 600; text-align: right; }
.lc-price { background: var(--sand-100); border-radius: var(--radius-chip); padding: 10px 12px; margin-bottom: 12px; }
.lc-price .amount { font-family: var(--font-display); font-size: 22px; color: var(--brand-ink); font-weight: 600; display: block; }
.lc-price .per { font-size: 11.5px; color: var(--stone-500); }
.lease-section .empty-state { color: rgba(255,255,255,.75); }
.lease-contact { font-size: 12.5px; color: rgba(255,255,255,.7); margin-top: 18px; }

/* ------------------------------------------------- admin: etiquetas largas */
/* Las barras ahora llevan "PB-01 · Autoservicio La Comarca" y términos de
   búsqueda, no solo el id de 5 caracteres del demo de lotes. */
#adminRoot .bar-row .bar-label {
  width: 170px; max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#adminRoot .chart-card .admin-hint { margin-top: -8px; }

/* ------------------------------------------------------------------ móvil */
/* Este vertical se usa de pie, en el pasillo, con una mano: a 390px lo
   primero tienen que ser el buscador y las categorías. */
@media (max-width: 860px) {
  .plaza-map-layout { grid-template-columns: 1fr; }
  .az-row { grid-template-columns: 38px minmax(0, 1fr) auto; row-gap: 4px; }
  .az-loc { grid-column: 2 / 4; font-size: 12px; color: var(--stone-500); white-space: normal; }
}
@media (max-width: 640px) {
  .plaza-hero .hero-content { padding: 32px 16px 30px; }
  .plaza-hero h1 { font-size: 34px; }
  .plaza-hero .hero-subtitle { font-size: 15.5px; margin-bottom: 18px; }
  .finder-input { font-size: 16px; padding: 14px 0; }
  .finder-results { max-height: 58vh; }
  /* Los chips se deslizan de lado a lado, sangrados hasta el borde. */
  .cat-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-left: -16px; margin-right: -16px; padding: 2px 16px;
  }
  .cat-chips::-webkit-scrollbar { display: none; }
  .finder-row { gap: 12px; }
  .plaza-hero .hero-stats { margin-top: 24px; gap: 20px; }
  .plaza-hero .hero-stat .num { font-size: 24px; }
  .dir-section, .svc-section, .lease-section { padding-left: 16px; padding-right: 16px; }
  .dir-section { padding-top: 36px; padding-bottom: 36px; }
  .lease-section { padding-top: 40px; padding-bottom: 40px; }
  .bottom-sheet { padding: 10px 16px 32px; }
  .where-block .v { font-size: 19px; }
  .svc-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------- ajustes tras revisar capturas */

/* El header sticky tapaba el título de cada sección al saltar desde la nav o
   desde un resultado. (El demo de lotes tiene el mismo detalle, pero se
   arregla aquí porque styles.css es compartido.) */
.map-section, .dir-section, .svc-section, .lease-section, .info-section { scroll-margin-top: 96px; }

/* Con un filtro puesto, lo que coincide se contornea en cobre. Sin esto, en
   una plaza casi llena las coincidencias son grises sobre gris atenuado y no
   se distingue nada. El estado sigue en el relleno/punto: otro canal. */
.map-frame svg.is-filtering .lot:not(.is-dimmed) .lot-outline {
  stroke: var(--brand-copper); stroke-width: 2.2; stroke-opacity: 1;
}

/* La hoja inferior cerrada seguía en el orden de tabulación y en el árbol de
   accesibilidad; con visibility sale de los dos. */
.bottom-sheet { visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.bottom-sheet.is-open { visibility: visible; transition: transform .22s ease; }

/* Header en celular: cuatro secciones + idioma + admin no caben en 390px.
   La nav baja a su propio renglón y se desliza; el selector de demo cruzado
   es un detalle de escritorio y ahí se queda. */
@media (max-width: 720px) {
  #publicRoot .header-inner { flex-wrap: wrap; gap: 10px; padding: 12px 16px; min-height: 0; }
  #publicRoot .brand-logo { margin-right: auto; }
  #publicRoot .main-nav {
    order: 3; width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; gap: 2px;
  }
  #publicRoot .main-nav::-webkit-scrollbar { display: none; }
  #publicRoot .main-nav a { padding: 6px 10px; white-space: nowrap; }
  #publicRoot .demo-switch-link { display: none; }
  #publicRoot .header-actions { gap: 6px; }
  #publicRoot .header-actions .btn-sm { padding: 6px 10px; font-size: 12px; }
}

/* Cobre oscurecido para texto chico: el cobre de marca sobre blanco da 3.28:1
   y AA pide 4.5:1 en cuerpo. Se mantiene el acento, cambia el tono. */
:root { --copper-text: #8C5A24; }
.svc-level { color: var(--copper-text); }
.promo-tag { background: var(--copper-text); }

@media (max-width: 720px) {
  /* El header de celular ocupa dos renglones: el salto a una sección tiene
     que dejar más aire o el título queda debajo. */
  .map-section, .dir-section, .svc-section, .lease-section, .info-section { scroll-margin-top: 150px; }
  .az-group { scroll-margin-top: 150px; }
}