/* src/web/public/app.css — hand-written components.
   Load order: tokens.css, then this file (layout.eta, Task 9).
   Every value here is either a token from tokens.css or a literal the design
   brief states outright (docs/superpowers/specs/2026-09-06-busca-casa-design-brief.md
   §4 and §8) — no hex colour appears in this file. */

/* ---------- Accessibility-critical baseline ---------- */

.bc-skip {
  position: absolute; left: 8px; top: -48px;
  background: var(--bc-brand); color: var(--bc-on-brand);
  padding: 10px 16px; border-radius: var(--bc-radius-md); z-index: var(--bc-z-toast);
  transition: top var(--bc-dur-1);
  text-decoration: none;
}
.bc-skip:focus { top: 8px; }

:focus-visible { outline: 2px solid var(--bc-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Every tappable control keeps a >=44x44 hit box even when its glyph is smaller (brief §5, §6). */
.bc-btn--icon, .bc-card__fav, .bc-chip, .bc-lang__seg, .bc-lanes__tab {
  min-width: 44px; min-height: 44px;
}

/* ---------- Header, language switch ---------- */

.bc-header {
  position: sticky; top: 0; z-index: var(--bc-z-header);
  height: var(--bc-header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-3);
  background: var(--bc-surface);
  border-bottom: 1px solid var(--bc-line);
  padding: var(--bc-safe-top) var(--bc-gutter) 0;
}
.bc-header__word {
  font-family: var(--bc-font-display); font-weight: var(--bc-w-display);
  font-size: var(--bc-text-lg); line-height: var(--bc-lh-lg); letter-spacing: -0.02em;
  color: var(--bc-ink);
}
.bc-lang {
  display: inline-flex; align-items: center; height: 32px; border-radius: var(--bc-radius-pill);
  background: var(--bc-surface-2); padding: 0; gap: 0;
}
.bc-lang__seg {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--bc-font-ui); font-weight: var(--bc-w-semibold);
  font-size: var(--bc-text-xs); line-height: var(--bc-lh-xs); color: var(--bc-ink-3);
  border-radius: var(--bc-radius-pill); padding: 0 var(--bc-space-3);
  min-width: 44px; height: 32px;
}
.bc-lang__seg--active {
  background: var(--bc-surface); color: var(--bc-brand); box-shadow: var(--bc-shadow-1);
}

/* ---------- Lanes ---------- */

.bc-lanes {
  position: sticky; top: var(--bc-header-h); z-index: var(--bc-z-sticky);
  display: flex; gap: 0; height: var(--bc-lanebar-h); align-items: stretch;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  background: var(--bc-surface); border-bottom: 1px solid var(--bc-line);
  padding: 0 var(--bc-gutter); scrollbar-width: none;
  /* The strip scrolls sideways on a phone; fade the right edge so that is discoverable. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.bc-lanes::-webkit-scrollbar { display: none; }
.bc-lanes__tab {
  /* Never shrink: flex items default to shrinking, which stacked the labels on top of each other. */
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px 0 0; margin-right: 14px;
  font-weight: var(--bc-w-semibold); font-size: var(--bc-text-md); line-height: var(--bc-lh-md);
  color: var(--bc-ink-3); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; scroll-snap-align: start; min-height: 44px;
}
.bc-lanes__tab:last-child { margin-right: 28px; }   /* room under the fade */
.bc-lanes__tab--active { color: var(--bc-ink); border-bottom-color: var(--bc-brand); }
.bc-lanes__count {
  font-size: 11px; line-height: 1; color: var(--bc-ink-3); background: var(--bc-surface-2);
  border-radius: var(--bc-radius-pill); padding: 3px 7px; font-weight: var(--bc-w-semibold);
}
.bc-lanes__tab--active .bc-lanes__count { color: var(--bc-ink); }

/* ---------- Filter sheet / sidebar (one <details>, styled per breakpoint) ---------- */

.bc-filtersheet {
  position: sticky; top: calc(var(--bc-header-h) + var(--bc-lanebar-h)); z-index: var(--bc-z-sticky);
  background: var(--bc-paper); border-bottom: 1px solid var(--bc-line);
  padding: var(--bc-space-2) var(--bc-gutter);
}
.bc-filtersheet > summary {
  list-style: none; cursor: pointer; display: inline-flex;
}
.bc-filtersheet > summary::-webkit-details-marker { display: none; }
.bc-filtersheet[open] > .bc-filterform {
  position: fixed; inset: auto 0 0 0; z-index: var(--bc-z-sheet);
  background: var(--bc-surface); border-radius: var(--bc-radius-xl) var(--bc-radius-xl) 0 0;
  max-height: 85dvh; overflow-y: auto; box-shadow: var(--bc-shadow-3);
  padding: var(--bc-space-4) var(--bc-gutter) calc(16px + var(--bc-safe-bottom));
  display: grid; gap: var(--bc-space-4);
}
.bc-filterform fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--bc-space-2); }
.bc-filterform legend { padding: 0; }
/* Two buttons side by side have a min-content width of ~216px. In the desktop sidebar that is wider
   than the column, and because grid items default to min-width:auto it pushed EVERY row out with it,
   so the whole panel scrolled sideways and the primary button was clipped. Let them wrap instead. */
.bc-filterform__actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--bc-space-2) var(--bc-space-3); }
.bc-filterform > * { min-width: 0; }
.bc-checkrow { display: flex; align-items: center; gap: var(--bc-space-2); min-height: 44px; }
.bc-field { display: grid; gap: var(--bc-space-1); }

@media (min-width: 1024px) {
  .bc-filtersheet {
    position: sticky; top: calc(var(--bc-header-h) + 24px);
    width: var(--bc-sidebar-w); max-height: calc(100dvh - var(--bc-header-h) - 48px);
    overflow-y: auto; float: left; background: transparent; border-bottom: none;
    /* The sidebar IS the left gutter; keeping the page's 32px on both sides spent a quarter of a
       264px column on nothing and left the fields 200px to live in. */
    padding: var(--bc-space-2) var(--bc-gutter) var(--bc-space-6) 0;
  }
  .bc-filtersheet[open] > .bc-filterform {
    position: static; max-height: none; box-shadow: none; border-radius: 0;
    /* overflow must go back to visible: the phone sheet scrolls itself, and while it kept doing so
       here it stayed the nearest scrolling ancestor, which silently disabled the sticky footer below
       (an element sticks inside its own scroller, and that one never scrolls). */
    background: transparent; padding: 0; overflow: visible;
  }
  /* The panel is taller than the viewport once every comuna is listed, so "Limpiar" and "Ver N casas"
     sat below the fold and the filters looked unfinished. Pin them to the foot of the column. The
     sidebar itself is transparent here, so the row paints the page ground to cover what scrolls under. */
  .bc-filtersheet[open] > .bc-filterform > .bc-filterform__actions {
    position: sticky; bottom: 0; z-index: 1;
    margin-top: var(--bc-space-1);
    padding: var(--bc-space-3) 0 var(--bc-space-2);
    background: var(--bc-paper); border-top: 1px solid var(--bc-line);
  }
}

.bc-chip {
  display: inline-flex; align-items: center; gap: var(--bc-space-2); height: 36px;
  padding: 0 var(--bc-space-4); border-radius: var(--bc-radius-pill);
  font-size: var(--bc-text-sm); line-height: var(--bc-lh-sm); font-weight: var(--bc-w-medium);
  background: var(--bc-surface-2); color: var(--bc-ink-2); border: 1px solid transparent;
  white-space: nowrap; cursor: pointer;
}
.bc-chip--active { background: var(--bc-brand-tint); color: var(--bc-brand); border-color: var(--bc-brand); }
.bc-chip__count { font-size: var(--bc-text-xs); font-weight: var(--bc-w-semibold); opacity: 0.8; margin-left: 2px; }
.bc-chip:disabled { opacity: 0.45; cursor: default; }

.bc-sortform { display: flex; align-items: center; gap: var(--bc-space-2); padding: var(--bc-space-3) var(--bc-gutter); }

/* ---------- Buttons ---------- */

.bc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bc-space-2);
  border-radius: var(--bc-radius-pill); font-family: var(--bc-font-ui); font-weight: var(--bc-w-semibold);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--bc-dur-1), color var(--bc-dur-1);
}
.bc-btn--sm { height: 36px; padding: 0 14px; font-size: var(--bc-text-sm); line-height: var(--bc-lh-sm); }
.bc-btn--md { height: 44px; padding: 0 18px; font-size: var(--bc-text-md); line-height: var(--bc-lh-md); }
.bc-btn--lg { height: 52px; padding: 0 24px; font-size: var(--bc-text-lg); line-height: var(--bc-lh-lg); }
.bc-btn--primary { background: var(--bc-brand); color: var(--bc-on-brand); }
.bc-btn--primary:hover { background: var(--bc-brand-hover); }
.bc-btn--primary:active { background: var(--bc-brand-press); }
.bc-btn--secondary { background: var(--bc-surface); color: var(--bc-ink); border-color: var(--bc-line-strong); }
.bc-btn--secondary:hover { background: var(--bc-surface-2); }
.bc-btn--ghost { background: transparent; color: var(--bc-brand); }
.bc-btn--ghost:hover { background: var(--bc-brand-tint); }
.bc-btn--danger { background: transparent; color: var(--bc-danger); border-color: var(--bc-danger); }
.bc-btn--danger:hover { background: var(--bc-danger-tint); }
.bc-btn--icon { padding: 0; aspect-ratio: 1; }
.bc-btn--block { width: 100%; }
.bc-btn[aria-pressed="true"] { background: var(--bc-brand-tint); color: var(--bc-brand); }
.bc-btn:disabled { opacity: 0.5; pointer-events: none; }

.bc-input, .bc-filterform input[type="number"], .bc-filterform input[type="text"] {
  border: 1px solid var(--bc-line-strong); border-radius: var(--bc-radius-md);
  height: 44px; padding: 0 var(--bc-space-3); font: inherit; color: var(--bc-ink); background: var(--bc-surface);
}
.bc-input:focus, .bc-filterform input:focus { border-color: var(--bc-brand); box-shadow: 0 0 0 3px var(--bc-focus-halo); }

/* ---------- Grid, card, badges, ring, lot glyph ---------- */

.bc-grid { display: grid; grid-template-columns: 1fr; gap: var(--bc-space-6); padding: var(--bc-space-4) var(--bc-gutter) calc(var(--bc-space-8) + var(--bc-safe-bottom)); }
@media (min-width: 760px) { .bc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .bc-grid { grid-template-columns: repeat(3, 1fr); } }

.bc-card {
  position: relative; background: var(--bc-surface); border-radius: var(--bc-radius-card);
  box-shadow: var(--bc-shadow-2); overflow: hidden;
}
@media (prefers-color-scheme: dark) { .bc-card { box-shadow: var(--bc-shadow-2), var(--bc-ring-1); } }
.bc-card--dismissed .bc-card__img { filter: grayscale(0.85) opacity(0.72); }
.bc-card--dismissed .bc-card__price-clp { display: none; }

.bc-card__media { position: relative; aspect-ratio: var(--bc-ratio-card); background: var(--bc-photo-fallback); }
.bc-card__img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--bc-dur-2); }
@media (hover: hover) { .bc-card:hover .bc-card__img { filter: brightness(1.03); } .bc-card:hover .bc-card__title { color: var(--bc-brand); } }

.bc-card__badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 92px); }
.bc-card__ring { position: absolute; top: 12px; right: 12px; }
.bc-card__count {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--bc-radius-pill); background: rgba(20, 32, 28, 0.72); color: #FFFFFF;
  font-size: var(--bc-text-xs); line-height: var(--bc-lh-xs); padding: 4px 8px;
}
.bc-card__plate {
  position: absolute; left: 0; bottom: 0; background: var(--bc-plate);
  border-radius: var(--bc-radius-plate); padding: 10px 16px; min-width: 132px;
}
.bc-card__price { font-family: var(--bc-font-display); font-weight: var(--bc-w-display); font-size: var(--bc-text-2xl); line-height: var(--bc-lh-2xl); color: var(--bc-on-plate); }
.bc-card__price-clp { font-family: var(--bc-font-mono); font-weight: var(--bc-w-medium); font-size: var(--bc-text-xs); line-height: var(--bc-lh-xs); color: var(--bc-on-plate-2); margin-top: 2px; }

/* The body is deliberately NOT positioned: the title link's ::after then stretches over the
   whole card (photo included), so a tap anywhere opens the house. Buttons sit above it. */
.bc-card__body { padding: 14px 16px 16px; }
.bc-card__link { position: static; text-decoration: none; }
.bc-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bc-card:hover { box-shadow: var(--bc-shadow-3, var(--bc-shadow-2)); }
.bc-card:has(.bc-card__link:focus-visible) { outline: 3px solid var(--bc-focus, currentColor); outline-offset: 2px; }
.bc-card__title { font-family: var(--bc-font-display); font-weight: var(--bc-w-bold); font-size: var(--bc-text-xl); line-height: var(--bc-lh-xl); color: var(--bc-ink); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-card__facts { font-size: var(--bc-text-sm); line-height: var(--bc-lh-sm); color: var(--bc-ink-2); margin: 6px 0 0; }
.bc-card__row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
/* The second rating, beside the score: how much work the house needs. The colour repeats what the
   icon already says (tick / dash / warning), so the band survives greyscale and a hurried glance. */
.bc-condition { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--bc-text-sm); line-height: var(--bc-lh-sm); color: var(--bc-ink-2); }
.bc-condition .bc-icon { flex: none; }
.bc-condition__rating { font-weight: var(--bc-w-semibold); }
.bc-condition__label { font-weight: var(--bc-w-semibold); }
.bc-condition__move { color: var(--bc-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-condition__move::before { content: "· "; }
.bc-condition--high { color: var(--bc-score-high); }
.bc-condition--mid { color: var(--bc-score-mid); }
.bc-condition--low { color: var(--bc-danger); }
/* Narrow cards drop the qualifier rather than wrapping the chip onto a second line. */
@media (max-width: 380px) { .bc-condition__move { display: none; } }
.bc-card__verdict { font-size: var(--bc-text-md); line-height: var(--bc-lh-md); color: var(--bc-ink-2); margin: 10px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Only a card that actually shows the favourite / restore button reserves room for it. card.eta
   renders .bc-card__favform solely when it.canEdit, so an anonymous visitor -- the public site's
   whole audience -- gets no button; a flat padding-right would just narrow the two-line clamp and
   ellipsise the AI one-liner earlier on every public card, for nothing. */
.bc-card__body:has(.bc-card__favform) .bc-card__verdict { padding-right: 56px; /* the favourite button is absolutely positioned over this line's right end */ }
.bc-card__verdict::before { content: open-quote; }
.bc-card__verdict::after { content: close-quote; }
.bc-card__favform { position: absolute; right: 16px; bottom: 16px; z-index: 2; }
.bc-card__fav { background: var(--bc-surface); border: 1px solid var(--bc-line-strong); color: var(--bc-ink-2); border-radius: var(--bc-radius-pill); }
.bc-card__fav[aria-pressed="true"] { background: var(--bc-brand-tint); color: var(--bc-brand); border-color: var(--bc-brand); }

.bc-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border-radius: var(--bc-radius-pill); font-size: var(--bc-text-sm); line-height: var(--bc-lh-sm); font-weight: var(--bc-w-semibold);
  box-shadow: 0 1px 3px rgba(20, 32, 28, 0.35);
}
.bc-badge--new { background: var(--bc-info-tint); color: var(--bc-info); }
.bc-badge--drop { background: var(--bc-accent-tint); color: var(--bc-accent); }
.bc-badge--pool, .bc-badge--quincho, .bc-badge--condo { background: var(--bc-surface-2); color: var(--bc-ink-2); }
.bc-badge--pending { background: var(--bc-surface-2); color: var(--bc-ink-3); }
.bc-badge--stretch { background: var(--bc-accent-tint); color: var(--bc-accent); }
/* Sector: the AI barrio rating. On a Tier 2 comuna it is the reason the house is listed at all. */
.bc-badge--sector { background: var(--bc-brand-tint, var(--bc-surface-2)); color: var(--bc-brand, var(--bc-ink)); }
/* The comuna is always the first tag: it is the fact the family sorts houses by in their heads. */
.bc-badge--comuna { background: var(--bc-brand-tint, var(--bc-surface-2)); color: var(--bc-brand, var(--bc-ink)); font-weight: 600; }
/* Link to the original advertisement on the card: sits above the whole-card link overlay. */
.bc-card__portal {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  font-size: var(--bc-text-xs); line-height: var(--bc-lh-xs); color: var(--bc-brand, var(--bc-ink-2));
  text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 4px;
}
.bc-card__portal:focus-visible { outline: 3px solid var(--bc-focus, currentColor); outline-offset: 2px; border-radius: var(--bc-radius-sm, 6px); }
.bc-detail-head__original { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Public, read-only visitors get a quiet marker so the missing buttons read as intended. */
.bc-header__public {
  font-size: var(--bc-text-xs); line-height: var(--bc-lh-xs); color: var(--bc-ink-3); border: 1px solid var(--bc-ink-4, var(--bc-ink-3));
  border-radius: var(--bc-radius-pill); padding: 2px 8px; margin-left: 8px; white-space: nowrap;
}

/* --- Small screens: nothing may push the page wider than the phone ----------------------- */
html { overflow-x: clip; }
a.bc-header__word { text-decoration: none; }
a.bc-header__word:focus-visible { outline: 3px solid var(--bc-focus, currentColor); outline-offset: 2px; border-radius: var(--bc-radius-sm, 6px); }
.bc-notes__body, .bc-detail-description, .bc-page-title, .bc-card__title, .bc-listinglinks a, .bc-notes__meta { overflow-wrap: anywhere; }
textarea, .bc-input { width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; }
textarea { min-height: 88px; resize: vertical; padding: 10px 12px; border: 1px solid var(--bc-line); border-radius: var(--bc-radius-md, 8px); background: var(--bc-surface); color: var(--bc-ink); }
textarea:focus-visible { outline: 3px solid var(--bc-focus, currentColor); outline-offset: 2px; }
.bc-notes form { display: grid; gap: 8px; margin: 0 var(--bc-gutter); }

/* --- Full-size photo viewer ------------------------------------------------------------- */
.bc-gallery__zoom { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.bc-lightbox {
  border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  background: #000; color: #fff;
}
.bc-lightbox::backdrop { background: rgba(0, 0, 0, 0.92); }
.bc-lightbox[open] { display: grid; grid-template-columns: 1fr; place-items: center; }
/* The photo is never cropped here: it scales to fit the viewport whole, whatever its shape. */
.bc-lightbox__figure { margin: 0; width: 100vw; height: 100vh; display: grid; grid-template-rows: 1fr auto; place-items: center; touch-action: pan-y; }
.bc-lightbox__img {
  max-width: 100vw; max-height: calc(100vh - 56px); width: auto; height: auto; object-fit: contain;
  user-select: none; -webkit-user-drag: none; background: #000;
}
.bc-lightbox__caption {
  font-size: var(--bc-text-sm); line-height: var(--bc-lh-sm); color: rgba(255, 255, 255, 0.82);
  padding: 8px 64px max(12px, env(safe-area-inset-bottom)); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100vw;
}
.bc-lightbox__nav, .bc-lightbox__close {
  position: fixed; width: 56px; height: 56px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.bc-lightbox__nav:hover, .bc-lightbox__close:hover { background: rgba(255, 255, 255, 0.26); }
.bc-lightbox__nav:focus-visible, .bc-lightbox__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bc-lightbox__nav { top: calc(50% - 28px); }
.bc-lightbox__nav--prev { left: max(12px, env(safe-area-inset-left)); }
.bc-lightbox__nav--next { right: max(12px, env(safe-area-inset-right)); }
.bc-lightbox__nav[disabled] { opacity: 0.3; cursor: default; }
.bc-lightbox__close { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
@media (max-width: 599px) {
  .bc-lightbox__nav { top: auto; bottom: max(64px, calc(env(safe-area-inset-bottom) + 56px)); width: 48px; height: 48px; }
  .bc-lightbox__caption { padding-left: 16px; padding-right: 16px; }
}
.bc-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }

.bc-ring { position: relative; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.bc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bc-ring__track { fill: none; stroke: var(--bc-score-track); stroke-width: 3.5; }
.bc-ring__value { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.bc-ring--high .bc-ring__value, .bc-ring--high .bc-ring__num { stroke: var(--bc-score-high); color: var(--bc-score-high); }
.bc-ring--mid .bc-ring__value, .bc-ring--mid .bc-ring__num { stroke: var(--bc-score-mid); color: var(--bc-score-mid); }
.bc-ring--low .bc-ring__value, .bc-ring--low .bc-ring__num { stroke: var(--bc-score-low); color: var(--bc-score-low); }
.bc-ring--pending .bc-ring__track { stroke: var(--bc-score-track); }
.bc-ring--pending { color: var(--bc-ink-3); }
.bc-ring__num { position: absolute; font-family: var(--bc-font-display); font-weight: var(--bc-w-display); }
.bc-card__ring .bc-ring, .bc-detail-head__ring .bc-ring { background: rgba(255, 255, 255, 0.94); box-shadow: var(--bc-shadow-1); }
@media (prefers-color-scheme: dark) { .bc-card__ring .bc-ring, .bc-detail-head__ring .bc-ring { background: rgba(7, 12, 10, 0.86); } }

.bc-lotglyph { flex: 0 0 auto; }

/* ---------- Gallery ---------- */

/* overflow: hidden is the page-width insurance — a slide whose CONTENT is wider than the slot (the
   closing text panel was) escapes the track's own clipping and leaks into the document scroll width. */
.bc-gallery { position: relative; overflow: hidden; background: var(--bc-paper-sunken); }
.bc-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.bc-gallery__track::-webkit-scrollbar { display: none; }
.bc-gallery__slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: var(--bc-ratio-gallery); }
.bc-gallery__img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .bc-gallery__slide { aspect-ratio: 16 / 9; max-height: 560px; } }
/* Closing panel: our photo set is only what the portal publishes in plain HTML, so the gallery ends
   on an invitation to the advertisement that still carries the whole set — not on a broken image. */
.bc-gallery__slide--more { background: var(--bc-paper-sunken); overflow: auto; }   /* insurance: a long portal name scrolls inside the box, it never spills onto the thumbnails */
.bc-gallery__more {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--bc-space-2); box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; height: 100%;
  padding: var(--bc-space-6) var(--bc-gutter); text-align: center; text-decoration: none; color: var(--bc-ink);
}
.bc-gallery__more-title {
  font-family: var(--bc-font-display); font-weight: var(--bc-w-display);
  font-size: var(--bc-text-xl); line-height: var(--bc-lh-xl); text-wrap: balance;
}
.bc-gallery__more-body { color: var(--bc-ink-2); font-size: var(--bc-text-sm); line-height: var(--bc-lh-sm); max-width: min(44ch, 100%); }
.bc-gallery__more-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--bc-space-1);
  color: var(--bc-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.bc-gallery__more:focus-visible { outline: 3px solid var(--bc-focus, currentColor); outline-offset: -4px; }
/* Arrows: shown only once app.js enables them (no-JS visitors still swipe / use the thumbnails). */
.bc-gallery__nav {
  position: absolute; top: calc(50% - 22px); width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--bc-plate); color: var(--bc-on-plate); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0.92; box-shadow: var(--bc-shadow-2);
}
.bc-gallery__nav--prev { left: 12px; }
.bc-gallery__nav--next { right: 12px; }
.bc-gallery__nav:hover { opacity: 1; }
.bc-gallery__nav:focus-visible { outline: 3px solid var(--bc-focus, currentColor); outline-offset: 2px; }
.bc-gallery__nav[disabled] { opacity: 0.35; cursor: default; }
/* Thumbnail strip: every photo visible at a glance; the current one is outlined. */
.bc-gallery__thumbs {
  display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; scrollbar-width: thin;
  background: var(--bc-paper-sunken);
}
.bc-gallery__thumb {
  flex: 0 0 auto; width: 96px; height: 72px; border-radius: var(--bc-radius-sm, 6px); overflow: hidden;
  outline: 2px solid transparent; outline-offset: 2px; opacity: 0.72; display: block;
}
.bc-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-gallery__thumb[aria-current="true"] { opacity: 1; outline-color: var(--bc-brand, currentColor); }
.bc-gallery__thumb:hover, .bc-gallery__thumb:focus-visible { opacity: 1; }
.bc-gallery__thumb:focus-visible { outline-color: var(--bc-focus, currentColor); }
/* The strip's last tile mirrors the closing panel: no <img>, so it takes the thumb box from the
   base rule and paints itself, or it would read as a gap at the end of the strip. */
.bc-gallery__thumb--more {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; background: var(--bc-surface-2); border: 1px solid var(--bc-line-strong);
  color: var(--bc-ink-2); text-decoration: none; font-size: var(--bc-text-xs); line-height: var(--bc-lh-xs);
}
@media (max-width: 599px) { .bc-gallery__thumb { width: 72px; height: 54px; } }
.bc-gallery__counter {
  position: absolute; top: 12px; right: 12px; background: var(--bc-plate); color: var(--bc-on-plate);
  font-size: var(--bc-text-xs); line-height: var(--bc-lh-xs); border-radius: var(--bc-radius-pill); padding: 4px 10px;
  display: inline-flex; align-items: center; gap: 4px;
}

/* ---------- Detail head ---------- */

.bc-detail-head { padding: var(--bc-space-4) var(--bc-gutter) 0; position: relative; }
.bc-detail-head__price { font-family: var(--bc-font-display); font-weight: var(--bc-w-display); font-size: var(--bc-text-4xl); line-height: var(--bc-lh-4xl); }
.bc-detail-head__ring { position: absolute; top: var(--bc-space-4); right: var(--bc-gutter); }
.bc-page-title { font-family: var(--bc-font-display); font-weight: var(--bc-w-display); font-size: var(--bc-text-3xl); line-height: var(--bc-lh-3xl); color: var(--bc-ink); margin: var(--bc-space-2) var(--bc-gutter); }
.bc-page-subtitle { color: var(--bc-ink-2); margin: 0 var(--bc-gutter); }
.bc-intro { margin: var(--bc-space-3) var(--bc-gutter) 0; color: var(--bc-ink-2); font-size: var(--bc-text-sm); line-height: var(--bc-lh-sm); max-width: 70ch; }

/* ---------- Facts grid ---------- */

.bc-facts {
  display: grid; gap: 1px; background: var(--bc-line); border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-lg); overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
  margin: var(--bc-space-4) var(--bc-gutter);
}
@media (min-width: 600px) { .bc-facts { grid-template-columns: repeat(3, 1fr); } }
.bc-facts__item { background: var(--bc-surface); padding: 14px 16px; min-height: 84px; }
.bc-facts__item--wide { grid-column: 1 / -1; }
.bc-facts__item--unknown .bc-facts__value { color: var(--bc-ink-3); font-size: var(--bc-text-lg); line-height: var(--bc-lh-lg); font-weight: var(--bc-w-medium); }
.bc-facts__item--unknown .bc-icon { opacity: 0.6; }
.bc-facts__head { display: flex; align-items: center; gap: 6px; }
.bc-facts__label { font-size: var(--bc-text-2xs); line-height: var(--bc-lh-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bc-ink-3); font-weight: var(--bc-w-semibold); }
.bc-facts__value { font-family: var(--bc-font-display); font-weight: var(--bc-w-bold); font-size: var(--bc-text-xl); line-height: var(--bc-lh-xl); color: var(--bc-ink); margin-top: 4px; }
.bc-facts__hint { font-size: var(--bc-text-sm); line-height: var(--bc-lh-sm); color: var(--bc-ink-3); margin-top: 4px; }

/* ---------- Review card ---------- */

.bc-review { background: var(--bc-surface); border-radius: var(--bc-radius-lg); border: 1px solid var(--bc-line); padding: 20px 16px; display: grid; gap: var(--bc-space-4); margin: var(--bc-space-4) var(--bc-gutter); }
.bc-review__head { display: flex; justify-content: space-between; align-items: baseline; }
.bc-review__title { font-size: var(--bc-text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bc-ink-3); font-weight: var(--bc-w-semibold); margin: 0; }
.bc-review__confidence { font-size: var(--bc-text-sm); color: var(--bc-ink-3); }
.bc-review__summary { font-size: var(--bc-text-lg); line-height: var(--bc-lh-lg); color: var(--bc-ink); margin: 0; }
.bc-review__summary::before { content: open-quote; }
.bc-review__summary::after { content: close-quote; }
.bc-review__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bc-review__item { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: var(--bc-text-md); line-height: var(--bc-lh-md); color: var(--bc-ink-2); }
.bc-review__item--highlight { color: var(--bc-brand); }
.bc-review__item--flag { color: var(--bc-accent); }
.bc-review__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--bc-text-sm); color: var(--bc-ink-3); border-top: 1px solid var(--bc-line); padding-top: 12px; }
.bc-review__pill { display: inline-flex; gap: 6px; background: var(--bc-surface-2); border-radius: var(--bc-radius-pill); padding: 4px 10px; font-size: var(--bc-text-sm); line-height: var(--bc-lh-sm); }
.bc-review__model { font-size: var(--bc-text-xs); color: var(--bc-ink-3); }
.bc-review__pending-body { display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--bc-ink-3); padding: 32px; }
.bc-review--failed .bc-review__pending-body { color: var(--bc-accent); }

/* Rubric v2 blocks: barrio, estructura, estacionamiento, casa para siempre. */
.bc-review__subtitle { font-size: var(--bc-text-xs); line-height: var(--bc-lh-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bc-ink-3); margin: var(--bc-space-4) 0 var(--bc-space-2); }
.bc-review__note { margin: var(--bc-space-2) 0 0; color: var(--bc-ink-2); }
.bc-review__legacy { color: var(--bc-ink-3); font-size: var(--bc-text-sm); margin: var(--bc-space-3) 0 0; }
.bc-review__pill--rating { font-weight: var(--bc-w-semibold); }
.bc-review__pill--flag { color: var(--bc-danger); }

/* ---------- Metro chip ---------- */

.bc-metro { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bc-text-sm); line-height: var(--bc-lh-sm); color: var(--bc-ink-2); }
.bc-metro__line { font-weight: var(--bc-w-semibold); color: var(--bc-ink-2); }
.bc-metro__distance { font-family: var(--bc-font-mono); font-weight: var(--bc-w-medium); color: var(--bc-ink-3); }
.bc-metro--unknown { color: var(--bc-ink-3); }

/* ---------- Empty state ---------- */

.bc-empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 56px 24px; max-width: 42ch; margin-inline: auto; }
.bc-empty__title { font-family: var(--bc-font-display); font-weight: var(--bc-w-display); font-size: var(--bc-text-3xl); line-height: var(--bc-lh-3xl); color: var(--bc-ink); margin: 0; }
.bc-empty__body { font-size: var(--bc-text-md); line-height: var(--bc-lh-md); color: var(--bc-ink-2); margin: 0; }

/* ---------- Skeleton ---------- */

.bc-skeleton {
  background: linear-gradient(90deg, var(--bc-skeleton) 0%, var(--bc-skeleton-sheen) 50%, var(--bc-skeleton) 100%);
  background-size: 200% 100%; animation: bc-shimmer 1.2s linear infinite; border-radius: var(--bc-radius-sm);
}
@keyframes bc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.bc-skeleton--media { aspect-ratio: var(--bc-ratio-card); border-radius: var(--bc-radius-photo) var(--bc-radius-photo) 0 0; }
.bc-skeleton--title { height: 20px; width: 72%; margin-top: 14px; }
.bc-skeleton--text { height: 13px; width: 90%; margin-top: 8px; }
.bc-skeleton--text-short { height: 13px; width: 55%; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .bc-skeleton { animation: none; } }

/* ---------- Action bar, notes, price history ---------- */

/* The bar holds three controls for the family and exactly one ("Abrir en <portal>") for a public
   visitor, so it may not assume three: a fixed `grid-template-columns: 1fr 1fr 1.2fr` gave that lone
   control a 114px third of the row, which wrapped its label onto three lines, and the bar's fixed
   `height` then left those lines hanging 5px below the bar, over the page. Now the controls share the
   row (a lone one spans the whole usable width), a control that cannot fit wraps onto its own row,
   and the bar's height follows its content down from a 64px floor. */
.bc-actionbar {
  position: sticky; bottom: 0; z-index: var(--bc-z-sticky);
  min-height: calc(var(--bc-actionbar-h) + var(--bc-safe-bottom));
  background: var(--bc-surface); border-top: 1px solid var(--bc-line);
  box-shadow: 0 -8px 24px -8px rgba(20, 32, 28, 0.24);
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px var(--bc-gutter) calc(10px + var(--bc-safe-bottom));
  align-items: stretch; margin-top: var(--bc-space-8);
}
/* The children are <form>s (and one bare <a>); flex-basis auto keeps each one's natural width as the
   wrap threshold, and display:flex lets the button inside a form fill it in both axes. */
.bc-actionbar > * { flex: 1 1 auto; display: flex; }
/* These buttons carry no size modifier (--sm/--md/--lg), so the bar owes them their tap target and
   their padding; overflow-wrap keeps a long portal name inside the pill instead of past its edge.
   width:auto replaces --block's `width: 100%`: as a flex item that 100% would be the button's
   flex basis, so the bar would wrap to two rows even on a desktop where all three fit in one.
   flex-grow gives the same full width, measured from what the label actually needs. */
.bc-actionbar .bc-btn { flex: 1 1 auto; width: auto; min-height: 44px; padding: 4px 12px; overflow-wrap: anywhere; }

.bc-notes { list-style: none; padding: 0; margin: 0 var(--bc-gutter); display: grid; gap: var(--bc-space-3); }
.bc-notes li { border-bottom: 1px solid var(--bc-line); padding-bottom: var(--bc-space-3); }
.bc-notes__meta { font-size: var(--bc-text-sm); line-height: var(--bc-lh-sm); color: var(--bc-ink-3); margin: 0; }
.bc-notes__body { font-size: var(--bc-text-md); line-height: var(--bc-lh-md); color: var(--bc-ink); margin: 4px 0 0; }

.bc-pricehistory { width: calc(100% - var(--bc-gutter) * 2); border-collapse: collapse; margin: var(--bc-space-3) var(--bc-gutter) 0; }
.bc-pricehistory td { padding: 8px 0; border-top: 1px solid var(--bc-line); }

.bc-listinglinks { list-style: none; padding: 0; margin: 0 var(--bc-gutter); display: grid; gap: var(--bc-space-2); }

/* ---------- Status page ---------- */

.bc-status-table { display: grid; gap: 1px; background: var(--bc-line); border: 1px solid var(--bc-line); border-radius: var(--bc-radius-lg); overflow: hidden; margin: var(--bc-space-3) var(--bc-gutter); }
.bc-status-row { display: grid; grid-template-columns: 20px 1fr auto auto; align-items: center; gap: var(--bc-space-3); background: var(--bc-surface); padding: 10px 16px; }
.bc-status-healthy { color: var(--bc-brand); display: flex; align-items: center; gap: 8px; margin: var(--bc-space-3) var(--bc-gutter); }
.bc-status-unhealthy { color: var(--bc-danger); display: flex; align-items: center; gap: 8px; margin: var(--bc-space-3) var(--bc-gutter); }

/* ---------- Map ---------- */

.bc-map { aspect-ratio: var(--bc-ratio-map); border-radius: var(--bc-radius-lg); overflow: hidden; margin: var(--bc-space-3) var(--bc-gutter); background: var(--bc-paper-sunken); }
.bc-map--full { aspect-ratio: auto; height: 60dvh; margin: var(--bc-space-3) var(--bc-gutter) 0; }
.bc-map__legend { display: flex; align-items: center; gap: var(--bc-space-2); margin: var(--bc-space-2) var(--bc-gutter); flex-wrap: wrap; }

/* ---------- Icons ---------- */

.bc-icon { fill: currentColor; stroke: none; flex: 0 0 auto; }

/* ---------- Detail description ---------- */

.bc-detail-description { max-width: var(--bc-measure); margin: var(--bc-space-2) var(--bc-gutter) 0; }
.bc-detail-description-note { color: var(--bc-ink-3); font-size: var(--bc-text-sm); margin: var(--bc-space-4) var(--bc-gutter) 0; }

section { margin-top: var(--bc-space-8); }
.bc-actionbar + * { margin-top: 0; }

/* --- Header on phones: the app name never wraps and the language switch collapses to its short form
   (ES/EN/DE) so name + switch fit in one 390px row. The read-only pill keeps its short form too, but
   below 640px the phone rule at the end of this file hides the pill outright, so the short form is
   only a fallback if that breakpoint ever moves. --- */
/* The brand lockup: mark + "Daniel" + "busca casa" (concept A, 2026-09-07). One block, so
   nobody editing the lockup can miss half of it. */
.bc-header__word { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: 0 0 auto; }
.bc-lang { flex: 0 0 auto; margin-left: auto; }
.bc-header__public { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bc-header__public-short, .bc-lang__short { display: none; }
@media (max-width: 640px) {
  .bc-header__public-long, .bc-lang__long { display: none; }
  .bc-header__public-short, .bc-lang__short { display: inline; }
}

/* --- Brand lockup, continued: the mark and the second word --- */
.bc-logo { flex: 0 0 auto; }   /* the mark's own <rect rx="7"> draws the corner; a CSS clip would shave it */
.bc-header__verb { font-weight: var(--bc-w-medium, 500); color: var(--bc-ink-2); margin-left: -2px; }
@media (max-width: 640px) {
  /* mark + "Daniel busca casa" + the language switch is ~343px and fits a 390px phone; adding the
     read-only pill makes it ~436px and does not. The brand is the site's name, so the PILL yields the
     space, not half the name (owner ruling 2026-09-07). The public view already reads as read-only:
     it renders no favourite, dismiss or comment-edit control at all.
     layout.eta stamps .bc-header--public server-side, so this holds on browsers without :has() too —
     without it the anonymous phone header overflows and the language switch is clipped out of reach. */
  .bc-header--public .bc-header__public { display: none; }
}

/* At sidebar width the filters become a real left column, so the WHOLE page column moves beside
   them. Moving only the grid left the heading and the sort row hanging over the sidebar. The two
   offsets differ because the grid and the sort row carry the gutter as padding, the text as margin. */
@media (min-width: 1024px) {
  .bc-grid, .bc-sortform { margin-left: calc(var(--bc-sidebar-w) + var(--bc-space-7)); }
  .bc-intro, .bc-page-title, .bc-page-subtitle, .bc-more {
    margin-left: calc(var(--bc-sidebar-w) + var(--bc-space-7) + var(--bc-gutter));
  }
}