/* Elenapp: estilos. Base: maqueta/mikinmobiliario-v4.html (aprobada) + design-system/mikinmobiliario/MASTER.md. */
/* =========================================================
   Tokens v4 (final spec for production): KM structure, blue + grey palette.
   Brand gradient (navy -> azure -> ice, 62deg) decorates; --grad-text is the
   same family deepened for large text (>= 3:1); --grad-strong carries white
   text (>= 5.2:1). Status colours are always paired with a text label.
   ========================================================= */
:root{
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Merriweather", Georgia, "Times New Roman", serif;
  --mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* figures: Inter Medium, tabular */

  --grad: linear-gradient(62deg,#0B2A4A 0%,#1E6FD9 52%,#8FB8E8 100%);
  --grad-text: linear-gradient(62deg,#0B2A4A 0%,#1E6FD9 55%,#3D7FCC 100%);
  --grad-strong: linear-gradient(62deg,#0B2A4A 0%,#1A5FC2 55%,#2F6DB8 100%);
  --grad-drop: linear-gradient(62deg,#0A66CC 0%,#0B74E0 100%);
  --grad-solid: #1A5FC2;
  --silver-edge: linear-gradient(120deg,rgba(255,255,255,.95),rgba(200,214,230,.95) 50%,rgba(255,255,255,.95));

  --bg: #F2F5F9;
  --surface: #FFFFFF;
  --card: rgba(255,255,255,.74);
  --card-edge: rgba(255,255,255,.95);
  --card-shadow: 0 1px 2px rgba(15,35,65,.05), 0 12px 32px -14px rgba(15,35,65,.22);
  --ink: #0F1720;
  --muted: #4F5B68;               /* 6.9:1 on white */
  --slate: #3E5C80;               /* thin borders on pills, focus ring (6.3:1 on --bg) */
  --slate-soft: #A9BCD3;          /* decorative borders */
  --blue-text: #164A86;           /* overlines and notes (8:1) */
  --hair: rgba(79,91,104,.18);
  --accent: #1A5FC2;
  --on-accent: #FFFFFF;
  --signal: #1E6FD9;              /* chart line, spinner: graphics only */
  --tint: rgba(30,111,217,.12);
  --mist: #E3EDF8;
  --disabled-bg: #E6EAEF;
  --fav-count: #0B2A4A;

  --glass: rgba(255,255,255,.66);
  --glass-text: rgba(255,255,255,.88);
  --glass-blur: saturate(150%) blur(22px);
  --edge-o: 1;
  --sheet-bg: rgba(250,252,254,.95);
  --sk-base: #E5EAF0; --sk-hi: rgba(255,255,255,.75);
  --boe-a:#EEF2F7; --boe-b:#DFE7F1;

  /* aurora: steel, ice blue, silver, pale slate-blue */
  --au-1: #C3CFDE; --au-2: #B7D5F4; --au-3: #DCE1E7; --au-4: #C6D3EC; --au-o: .9;

  /* status (always labelled) */
  --b-ocu-bg:#F8E1DC; --b-ocu-ink:#9A3324;   /* muted brick: the one warm signal */
  --b-lib-bg:#D3F0EA; --b-lib-ink:#0A6152;   /* sea green */
  --b-unk-bg:#E6EAEF; --b-unk-ink:#4F5B68;   /* grey */
  --b-sub-bg:#E1E6FA; --b-sub-ink:#2E3A9E;   /* indigo */
  --b-baj-ink:#FFFFFF;                        /* on --grad-drop (azure) */

  --r-xl: 28px; --r-lg: 22px; --r-md: 14px;
  --shadow-float: 0 12px 40px -14px rgba(15,35,65,.32), 0 2px 6px rgba(15,35,65,.06);

  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --ease-sheet: cubic-bezier(.32,.72,0,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --d-press: 120ms; --d-fast: 180ms; --d-exit: 220ms; --d-normal: 340ms; --d-slow: 520ms;

  --gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tabbar-h: 62px;
}
@media (prefers-color-scheme: dark){
  :root{
    /* deep navy / graphite night with a soft blue aurora */
    --grad: linear-gradient(62deg,#2A5D9C 0%,#5B9BE6 52%,#B8D3F0 100%);
    --grad-text: linear-gradient(62deg,#6FA8EE 0%,#A9CBF2 55%,#DCE8F6 100%);
    --grad-solid: #A9CBF2;
    --silver-edge: linear-gradient(120deg,rgba(255,255,255,.2),rgba(143,184,232,.3) 50%,rgba(255,255,255,.16));
    --bg:#0A1220; --surface:#152238; --card: rgba(21,34,56,.68); --card-edge: rgba(255,255,255,.08);
    --card-shadow: 0 14px 36px -16px rgba(0,0,0,.7);
    --ink:#EEF3F9; --muted:#A9B6C6; --hair: rgba(255,255,255,.12);
    --slate:#8FB3DD; --slate-soft:#3D5A80; --blue-text:#9CC4F2;
    --accent:#8FB8E8; --on-accent:#0A1220; --signal:#6FA8EE;
    --tint: rgba(111,168,238,.16); --mist: rgba(111,168,238,.2); --disabled-bg:#1E2B40; --fav-count:#1A5FC2;
    --glass: rgba(14,24,40,.62); --glass-text: rgba(14,24,40,.86);
    --edge-o: 1;
    --sheet-bg: rgba(13,22,38,.95);
    --sk-base:#17233A; --sk-hi: rgba(255,255,255,.06);
    --boe-a:#111C30; --boe-b:#14223A;
    --au-1:#1E3A5F; --au-2:#23476F; --au-3:#2B3644; --au-4:#1A2F55; --au-o:.5;
    --b-ocu-bg:#4A1E17; --b-ocu-ink:#F5B4A6;
    --b-lib-bg:#0C3A33; --b-lib-ink:#83DCC8;
    --b-unk-bg:#26303D; --b-unk-ink:#C7D0DA;
    --b-sub-bg:#1F2758; --b-sub-ink:#BCC6FF;
    --shadow-float: 0 14px 44px -10px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.4);
  }
}

/* ---------- Aurora background: soft blurred blobs drifting slowly ---------- */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg)}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--au-o);will-change:transform}
.aurora i:nth-child(1){width:62vmax;height:62vmax;left:-18vmax;top:-22vmax;background:var(--au-1);animation:drift1 38s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:56vmax;height:56vmax;right:-20vmax;top:6vmax;background:var(--au-2);animation:drift2 46s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:50vmax;height:50vmax;left:10vmax;bottom:-26vmax;background:var(--au-3);animation:drift3 52s ease-in-out infinite alternate}
.aurora i:nth-child(4){width:40vmax;height:40vmax;right:4vmax;bottom:-10vmax;background:var(--au-4);animation:drift1 60s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(9vmax,7vmax) scale(1.08)}}
@keyframes drift2{to{transform:translate(-8vmax,10vmax) scale(.94)}}
@keyframes drift3{to{transform:translate(7vmax,-8vmax) scale(1.06)}}

/* Gradient text (large sizes only) with a solid fallback */
.grad{color:var(--grad-solid)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
/* One accent word per heading, Merriweather Light Italic */
.acc{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.01em}
.over{margin:0 0 8px;font-size:14px;font-weight:400;color:var(--blue-text)}


/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--safe-t) + 130px);scroll-padding-bottom:calc(var(--safe-b) + var(--tabbar-h) + 40px)}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:hidden}
button,select,input,textarea{font:inherit;color:inherit}
a,button,select,input,textarea,[tabindex]{touch-action:manipulation}
button,a[href],select{cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--slate);outline-offset:3px;border-radius:10px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.skip{position:fixed;left:var(--gutter);top:calc(var(--safe-t) + 8px);z-index:100;transform:translateY(-200%);background:var(--grad-strong);color:#fff;border:0;border-radius:12px;padding:0 16px;min-height:44px;font-weight:600}
.skip:focus-visible{transform:none}

/* ---------- Liquid glass, with KM silver as the edge material ---------- */
.glass{
  position:relative;
  background:var(--glass-text);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-float);
  isolation:isolate;
}
.glass.soft{background:var(--glass)}
.glass::before{ /* specular sheen */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 45%);opacity:.6;
}
.glass::after{ /* brushed-silver hairline edge */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--silver-edge);opacity:var(--edge-o);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
@media (prefers-color-scheme: dark){
  .glass{box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-float)}
  .glass::before{opacity:.1}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass.soft{background:var(--sheet-bg)}
}

/* ---------- Skeleton shimmer while photos load ---------- */
.sk{background:var(--sk-base)}
.sk::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 25%,var(--sk-hi) 50%,transparent 75%);
  transform:translateX(-100%);animation:shimmer 1.4s var(--ease-out) infinite}
.sk.ok::after{content:none}
.sk img{opacity:0;transition:opacity var(--d-normal) var(--ease-out)}
.sk.ok img{opacity:1}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ---------- App shell ---------- */
.topbar{position:fixed;left:0;right:0;top:0;z-index:40;padding:calc(var(--safe-t) + 10px) var(--gutter) 10px;
  display:flex;justify-content:center;pointer-events:none;view-transition-name:topbar}
.topbar .bar{pointer-events:auto;width:min(1200px,100%);display:flex;align-items:center;gap:12px;
  min-height:52px;padding:4px 6px 4px 20px;border-radius:999px;
  transform:translateY(-140%);opacity:0;visibility:hidden;
  transition:transform var(--d-exit) var(--ease-in),opacity var(--d-exit) var(--ease-in),visibility 0s linear var(--d-exit)}
.topbar.show .bar{transform:none;opacity:1;visibility:visible;
  transition:transform var(--d-normal) var(--ease-out),opacity var(--d-normal) var(--ease-out),visibility 0s}
.bar-title{font-family:var(--sans);font-weight:400;font-size:19px;line-height:1.1;letter-spacing:-.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-meta{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--muted);white-space:nowrap;padding-right:8px}
.bar-meta:empty{display:none}
.bar-btn{width:44px;height:44px;border-radius:99px;border:1px solid var(--slate);background:var(--surface);color:var(--ink);display:grid;place-items:center}
.bar-btn[hidden]{display:none}
/* KM "kilometre rail": a 2px hairline that fills with blue as you scroll */
.bar-rail{position:absolute;left:26px;right:26px;bottom:0;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
.bar-rail i{display:block;height:100%;background:var(--grad);transform-origin:left;transform:scaleX(0)}

main{width:min(1200px,100%);margin:0 auto;padding:calc(var(--safe-t) + 28px) var(--gutter) calc(var(--safe-b) + var(--tabbar-h) + 64px)}
main:focus{outline:none}
.view{display:none}
.view.active{display:block}
.view.enter{animation:viewIn var(--d-normal) var(--ease-out) both}
.view.enter-push{animation:viewPush var(--d-slow) var(--ease-sheet) both}
.view.enter-pop{animation:viewPop var(--d-normal) var(--ease-out) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes viewPush{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes viewPop{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}

/* View Transitions (shared photo -> hero) */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){animation:vtOut var(--d-exit) var(--ease-in) both}
  ::view-transition-new(root){animation:vtIn var(--d-normal) var(--ease-out) both}
  html[data-dir="push"]::view-transition-new(root){animation:vtPush var(--d-slow) var(--ease-sheet) both}
  html[data-dir="pop"]::view-transition-new(root){animation:vtPop var(--d-normal) var(--ease-out) both}
  ::view-transition-group(hero){animation-duration:var(--d-slow);animation-timing-function:var(--ease-sheet)}
  ::view-transition-old(hero),::view-transition-new(hero){height:100%;width:100%;object-fit:cover;animation-duration:var(--d-slow)}
}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}
@keyframes vtPush{from{opacity:0;transform:translateX(28px)}}
@keyframes vtPop{from{opacity:0;transform:translateX(-20px)}}

/* ---------- Large title (collapses on scroll) ---------- */
.hero-head{margin:10px 4px 22px;transform-origin:left bottom;will-change:transform,opacity}
.wordmark{font-family:var(--sans);font-weight:300;font-size:clamp(40px,7vw,54px);line-height:1.08;letter-spacing:-.03em;margin:0;padding-bottom:.06em}
.wordmark:focus{outline:none}
.sub{color:var(--muted);font-size:16px;margin:8px 0 0}

/* Summary panel: opaque, hairline. Glass is kept for floating layers only. */
.salud-lista{display:grid;gap:10px;margin-bottom:16px}
.salud{position:relative;display:flex;align-items:center;gap:12px;padding:12px 8px 12px 16px;border-radius:var(--r-xl);color:var(--ink)}
.salud[hidden]{display:none}
.salud p{margin:0;flex:1;font-weight:500;line-height:1.35}
.salud-ic{display:grid;place-items:center;width:32px;height:32px;flex:none;color:var(--ink)}
.salud-x{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.salud-x:hover{background:rgba(127,127,127,.18)}
.salud-x:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.summary{background:var(--card);border:1px solid var(--card-edge);box-shadow:var(--card-shadow);border-radius:var(--r-xl);padding:18px 22px;display:grid;grid-template-columns:auto 1fr;gap:16px 40px;align-items:end;margin-bottom:16px}
.stats{display:flex;gap:36px}
.stat b{display:block;font-family:var(--mono);font-weight:500;font-size:36px;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--muted)}
.sources{justify-self:end;display:flex;flex-direction:column;gap:8px;min-width:250px}
.sources .lbl{font-size:14px;color:var(--muted)}
.srcbar{display:flex;height:6px;border-radius:99px;overflow:hidden;gap:2px}
.srcbar{background:var(--grad)}
.srcbar i{display:block;height:100%;background:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.9);transform-origin:left}
.srcbar.draw i{animation:barIn 700ms var(--ease-out) both;animation-delay:calc(var(--i) * 90ms)}
@keyframes barIn{from{transform:scaleX(0)}}
.srclist{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--muted)}
.srclist b{color:var(--ink);font-family:var(--mono);font-weight:500}
.update{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px 16px;border-top:1px solid var(--hair);padding-top:14px;flex-wrap:wrap}
.upd-txt{margin:0;font-size:14px;color:var(--muted)}
.upd-txt b{color:var(--ink);font-weight:500}
.upd-txt span{display:block}

/* Controls */
.controls{position:sticky;top:calc(var(--safe-t) + 74px);z-index:30;display:flex;gap:8px;align-items:center;margin:0 calc(var(--gutter) * -1) 12px;padding:4px var(--gutter)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;padding:8px 4px;margin:-4px 0;mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chip,.sort select{min-height:44px;border-radius:999px;border:1px solid var(--slate);background:var(--glass-text);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);color:var(--ink);font-weight:500;
  box-shadow:0 4px 14px -8px rgba(15,35,65,.35)}
@media (prefers-color-scheme: dark){.chip,.sort select{box-shadow:0 2px 10px -6px rgba(0,0,0,.6)}}
.chip{flex:none;padding:0 16px;font-size:15px;display:inline-flex;align-items:center;gap:6px;
  transition:background var(--d-fast),color var(--d-fast),transform var(--d-normal) var(--ease-spring)}
.chip:active{transform:scale(.96);transition-duration:var(--d-press);transition-timing-function:var(--ease-out)}
.chip[aria-pressed="true"]{background:var(--grad-strong);color:#fff;border-color:transparent}
.chip .count{min-width:22px;height:22px;border-radius:99px;background:var(--grad-strong);color:#fff;font:500 12px/22px var(--mono);text-align:center;padding:0 6px}
.sort{flex:none;position:relative;display:block}
.sort select{appearance:none;-webkit-appearance:none;padding:0 36px 0 16px;font-size:16px}
.sort svg{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;width:15px;height:15px}
.count-line{margin:2px 4px 12px;color:var(--muted);font-size:14px}

/* Estado compartido (interesa / visitar / descartada) */
.estado-form{display:flex;gap:6px;flex-wrap:wrap}
.card>.estado-form{position:relative;z-index:3;padding:0 16px 8px}
.est-btn{flex:1 1 0;min-height:40px;padding:0 10px;border-radius:999px;border:1px solid var(--slate);background:var(--surface);color:var(--ink);font-weight:500;font-size:14px;line-height:1;font-family:inherit;white-space:nowrap;cursor:pointer}
.est-btn:active{transform:scale(.96);transition:transform var(--d-press) var(--ease-out)}
.est-btn[aria-pressed="true"].interesa{background:var(--b-lib-bg);color:var(--b-lib-ink);border-color:transparent}
.est-btn[aria-pressed="true"].visitar{background:var(--grad-strong);color:#fff;border-color:transparent}
.est-btn[aria-pressed="true"].descartada{background:var(--b-unk-bg);color:var(--b-unk-ink);border-color:transparent;text-decoration:line-through}
.estado-form.grande .est-btn{min-height:44px;font-size:15px}
.estado-quien{margin:0;padding:0 18px 12px;font-size:13px;color:var(--muted)}
.estado-quien[hidden]{display:none}
.card.descartada{opacity:.62}
.card.descartada .price{text-decoration:line-through;text-decoration-thickness:1px}
.badge.est.interesa{background:var(--b-lib-bg);color:var(--b-lib-ink)}
.badge.est.visitar{background:var(--grad-strong);color:#fff}
.badge.est.descartada{background:var(--b-unk-bg);color:var(--b-unk-ink)}
.est-hist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;font-size:14px;color:var(--muted)}
.pin.desc{opacity:.55}
.map-note a{color:inherit;text-decoration:underline}

/* Cards: hairline, thin radius, no hover lift */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.card{position:relative;background:var(--card);border:1px solid var(--card-edge);box-shadow:var(--card-shadow);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color var(--d-fast),transform var(--d-normal) var(--ease-spring),opacity var(--d-normal);-webkit-tap-highlight-color:transparent}
@media (hover:hover){.card:hover{border-color:var(--slate-soft)}}
.card:has(.card-link:active){transform:scale(.985);transition:transform var(--d-press) var(--ease-out)}
.card.leaving{opacity:0;transform:scale(.96);transition:opacity var(--d-exit) var(--ease-in),transform var(--d-exit) var(--ease-in)}
.card-link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.card-link:focus-visible{outline-offset:-3px;border-radius:var(--r-lg)}
.card>.fav{position:absolute;top:10px;right:10px;z-index:3}
/* scroll-linked reveal (KM: motion told by scrolling). Browsers without view timelines show cards static. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .card{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}
@keyframes reveal{from{opacity:0;clip-path:inset(16% 0 0 0 round var(--r-lg))}to{opacity:1;clip-path:inset(0 0 0 0 round var(--r-lg))}}
.ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sk-base)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph .badges{position:absolute;left:10px;top:10px;right:64px;display:flex;flex-wrap:wrap;gap:6px;z-index:2}
.ph .src,.ph .nphotos{position:absolute;bottom:10px;padding:4px 10px;border-radius:99px;font-size:13px;font-weight:500;color:var(--ink);z-index:2}
.ph .src{left:10px}
.ph .nphotos{right:10px;display:flex;gap:5px;align-items:center;font-family:var(--mono)}
.ph .nphotos svg{width:14px;height:14px}
.badge{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:0 11px;border-radius:99px;font-size:13px;font-weight:500;box-shadow:0 2px 8px -4px rgba(15,35,65,.35);white-space:nowrap}
.badge.ocu{background:var(--b-ocu-bg);color:var(--b-ocu-ink)}
.badge.lib{background:var(--b-lib-bg);color:var(--b-lib-ink)}
.badge.unk{background:var(--b-unk-bg);color:var(--b-unk-ink)}
.badge.sub{background:var(--b-sub-bg);color:var(--b-sub-ink)}
.badge.baj{background:var(--grad-drop);color:var(--b-baj-ink)}
.badge svg{width:13px;height:13px;stroke-width:2.2}
.body{padding:14px 16px 16px}
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.price{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.03em;line-height:1.15;margin:0;font-variant-numeric:tabular-nums}
.price s{font-size:14px;color:var(--muted);margin-left:8px;letter-spacing:0}
.ppm{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--muted);white-space:nowrap}
.facts{display:flex;gap:16px;margin:8px 0 6px;color:var(--muted);font-size:14px;flex-wrap:wrap}
.facts span{display:inline-flex;gap:6px;align-items:center}
.facts svg{width:16px;height:16px}
.place{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.place b{color:var(--ink);font-weight:500}

/* Favourite toggle: heart pops, a blue ring expands once */
.fav{width:44px;height:44px;border-radius:99px;border:0;display:grid;place-items:center;color:var(--ink);padding:0;
  background:var(--glass-text);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 4px 14px -6px rgba(10,12,14,.4);position:relative;-webkit-tap-highlight-color:transparent}
.fav .heart{width:22px;height:22px;fill:transparent;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transform-origin:50% 55%;
  transition:fill var(--d-fast) var(--ease-out),stroke var(--d-fast) var(--ease-out),transform var(--d-press) var(--ease-out)}
.fav[aria-pressed="true"] .heart{fill:url(#gHeart);stroke:#1A5FC2}
.fav:active .heart{transform:scale(.86)}
.fav::after{content:"";position:absolute;inset:3px;border-radius:99px;border:2px solid #1E6FD9;opacity:0;pointer-events:none}
.fav.pop .heart{animation:heartPop 560ms var(--ease-out)}
.fav.pop::after{animation:ring 560ms var(--ease-out)}
.fav.unpop .heart{animation:heartOff 260ms var(--ease-out)}
@keyframes heartPop{0%{transform:scale(1)}14%{transform:scale(.76)}42%{transform:scale(1.24)}68%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes heartOff{0%{transform:scale(1)}40%{transform:scale(.82)}100%{transform:scale(1)}}
@keyframes ring{0%{opacity:.95;transform:scale(.55)}100%{opacity:0;transform:scale(1.5)}}

/* BOE placeholder: paper + ink drawing, no fake photo */
.boe-art{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(160deg,var(--boe-a),var(--boe-b))}
.boe-art svg{width:44%;max-width:170px;stroke:var(--slate);opacity:.7;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.boe-art .t{position:absolute;bottom:12px;right:14px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:20px;color:var(--ink)}
.ph-fail{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:14px;background:var(--sk-base)}

/* Empty state */
.empty{text-align:center;padding:56px 16px;color:var(--muted)}
.empty h2{font-family:var(--sans);font-weight:300;font-size:28px;margin:0 0 6px;color:var(--ink)}
.empty p{max-width:42ch;margin:0 auto 16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:0;font-weight:500;font-size:16px;text-decoration:none;
  transition:transform var(--d-normal) var(--ease-spring),background var(--d-fast),color var(--d-fast)}
.btn:active{transform:scale(.97);transition:transform var(--d-press) var(--ease-out)}
.btn.primary{background:var(--grad-strong);color:#fff;box-shadow:0 10px 24px -12px rgba(15,45,95,.6)}
.btn.plain{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--slate)}
.btn.sm{min-height:44px;padding:0 18px;font-size:15px}
.btn[aria-disabled="true"],.btn:disabled{background:var(--disabled-bg);color:var(--muted);box-shadow:none;cursor:not-allowed;transform:none}
.btn svg{width:18px;height:18px}

/* ---------- Tab bar ---------- */
.tabbar-wrap{position:fixed;left:0;right:0;bottom:calc(var(--safe-b) + 12px);z-index:50;display:flex;justify-content:center;pointer-events:none;padding:0 var(--gutter);view-transition-name:tabbar}
.tabbar{pointer-events:auto;display:grid;grid-template-columns:repeat(3,96px);border-radius:999px;padding:6px;position:relative}
.tabbar .pill{position:absolute;top:6px;bottom:6px;left:6px;width:96px;border-radius:999px;background:var(--grad-strong);box-shadow:0 6px 16px -8px rgba(15,45,95,.7);transition:transform var(--d-slow) var(--ease-spring)}
.tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:50px;border:0;background:none;
  font-size:12px;font-weight:500;color:var(--muted);border-radius:999px;transition:transform var(--d-normal) var(--ease-spring)}
.tab:active{transform:scale(.94);transition:transform var(--d-press) var(--ease-out)}
.tab svg{width:22px;height:22px}
.tab.on{color:#fff;font-weight:600}
.tab[aria-current="page"]{font-weight:600}
.tab[aria-current="page"] svg{stroke-width:2.1}
.tbadge{position:absolute;top:3px;left:calc(50% + 5px);min-width:18px;height:18px;border-radius:99px;background:var(--fav-count);color:#fff;box-shadow:0 0 0 2px var(--surface);
  font:500 11px/18px var(--mono);text-align:center;padding:0 5px}
.tbadge:empty{display:none}
.tbadge.bump{animation:bump 420ms var(--ease-spring)}
@keyframes bump{40%{transform:scale(1.35)}}

/* ---------- Sheets (filters, refresh) ---------- */
.scrim{position:fixed;inset:0;background:rgba(7,9,11,.42);z-index:60;opacity:0;pointer-events:none;transition:opacity var(--d-exit) var(--ease-in)}
.scrim.open{opacity:1;pointer-events:auto;transition:opacity var(--d-normal) var(--ease-out)}
.sheet{position:fixed;z-index:61;left:50%;bottom:0;width:min(560px,100%);max-height:88dvh;overflow:auto;overscroll-behavior:contain;
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:10px max(20px,var(--gutter)) calc(var(--safe-b) + 20px);background:var(--sheet-bg);
  transform:translate(-50%,105%);visibility:hidden;
  transition:transform var(--d-exit) var(--ease-in),visibility 0s linear var(--d-exit)}
.sheet.open{transform:translate(-50%,0);visibility:visible;transition:transform var(--d-slow) var(--ease-sheet),visibility 0s}
@media (min-width:700px){.sheet{bottom:24px;border-radius:var(--r-xl)}.sheet:not(.open){transform:translate(-50%,calc(100% + 40px))}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grabber{width:38px;height:5px;border-radius:99px;margin:0 auto 10px;background:var(--hair)}
.sheet h2{font-family:var(--sans);font-weight:300;font-size:30px;line-height:1.1;letter-spacing:-.015em;margin:0}
.icon-btn{width:44px;height:44px;border-radius:99px;border:0;background:var(--tint);display:grid;place-items:center;color:var(--ink);flex:none}
.icon-btn svg{width:16px;height:16px}
.field{margin:20px 0 0}
.field>label,.field>.lab{display:flex;justify-content:space-between;font-size:15px;font-weight:500;margin-bottom:8px}
.field output{font-family:var(--mono);font-weight:500;color:var(--muted)}
.field select{width:100%;min-height:48px;border-radius:var(--r-md);border:1px solid var(--hair);background:var(--surface);padding:0 12px;font-size:16px}
input[type=range]{width:100%;accent-color:var(--slate);height:44px;margin:0}
.seg{display:flex;background:var(--disabled-bg);border-radius:13px;padding:3px;gap:3px}
.seg button{flex:1;min-height:44px;border:0;background:none;border-radius:10px;font-size:15px;font-weight:500;color:var(--muted);transition:background var(--d-fast),color var(--d-fast);
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--slate),0 1px 3px rgba(15,35,65,.18)}
.togs{display:flex;flex-wrap:wrap;gap:8px}
.tog{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--slate);background:var(--surface);font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.tog svg{width:15px;height:15px;stroke-width:2.4}
.tog[aria-pressed="false"] svg{display:none}
.tog[aria-pressed="true"]{background:var(--grad-strong);color:#fff;border-color:transparent}
.sheet-actions{display:flex;gap:12px;margin-top:24px}
.sheet-actions .btn{flex:1}

/* Refresh progress */
.r-sub{margin:6px 0 0;color:var(--muted);font-size:15px}
.rail{height:2px;background:var(--hair);border-radius:2px;overflow:hidden;margin:16px 0 4px}
.rail i{display:block;height:100%;background:var(--grad);transform-origin:left;transform:scaleX(0);transition:transform var(--d-slow) var(--ease-out)}
.steps{list-style:none;margin:4px 0 0;padding:0}
.step{display:flex;align-items:center;gap:14px;min-height:54px;border-top:1px solid var(--hair)}
.step:first-child{border-top:0}
.st-ic{width:24px;height:24px;border-radius:99px;border:2px solid var(--hair);flex:none;display:grid;place-items:center;color:var(--on-accent)}
.st-ic svg{width:14px;height:14px;stroke-width:2.6;opacity:0;transform:scale(.4)}
.step[data-state="run"] .st-ic{border-top-color:var(--signal);border-right-color:var(--signal);animation:spin 820ms linear infinite}
.step[data-state="done"] .st-ic{border-color:transparent;background:var(--grad-strong);color:#fff;animation:stDone 380ms var(--ease-spring)}
.step[data-state="done"] .st-ic svg{opacity:1;transform:none;transition:opacity var(--d-fast),transform var(--d-normal) var(--ease-spring)}
.st-name{font-weight:500;flex:1}
.step[data-state="wait"] .st-name{color:var(--muted)}
.st-res{font-size:14px;color:var(--muted);text-align:right}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes stDone{from{transform:scale(.6)}}
.r-result{margin-top:12px;border-top:1px solid var(--hair);padding-top:16px}
.r-result[hidden]{display:none}
.r-figs{display:flex;gap:36px}
.r-figs b{display:block;font-family:var(--mono);font-weight:500;font-size:40px;line-height:1.05;letter-spacing:-.03em}
.r-figs span{font-size:14px;color:var(--muted)}
.r-note{font-size:14px;color:var(--muted);margin:14px 0 0;max-width:52ch}

/* ---------- Map ---------- */
#view-mapa.active{position:fixed;inset:0;z-index:5}
#map{position:absolute;inset:0;background:var(--bg)}
.map-head{position:absolute;z-index:500;left:var(--gutter);right:var(--gutter);top:calc(var(--safe-t) + 12px);display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;pointer-events:none}
.map-head>*{pointer-events:auto}
.map-title{border-radius:999px;padding:6px 20px;font-family:var(--sans);font-weight:300;font-size:24px;line-height:1.1;min-height:48px;display:flex;align-items:center;margin:0}
.legend{border-radius:16px;padding:8px 14px;font-size:13px;color:var(--ink);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.legend i{display:inline-block;width:14px;height:14px;border-radius:99px;vertical-align:-2px;margin-right:6px}
.legend .ex{background:var(--ink)}
.legend .ap{border:2px dashed var(--slate)}
.legend .fv{background:var(--grad-strong)}
.pin{transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:44px;min-height:48px;padding:2px}
.pin .lab{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:99px;font:500 13px/1.2 var(--mono);white-space:nowrap;color:var(--bg);background:var(--ink);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.5);transition:transform var(--d-normal) var(--ease-spring)}
.pin .lab svg{width:12px;height:12px;flex:none}
.pin .lab .hf{fill:currentColor;stroke:none}
.pin .dot{width:10px;height:10px;border-radius:99px;background:var(--ink);border:2px solid var(--surface);margin-top:3px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.pin.approx .lab{background:var(--glass-text);color:var(--ink);box-shadow:inset 0 0 0 1.5px transparent,0 6px 16px -8px rgba(0,0,0,.45);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);outline:1.5px dashed var(--slate);outline-offset:-1.5px}
.pin.approx .dot{background:transparent;border:2px dashed var(--slate);width:20px;height:20px;margin-top:2px;box-shadow:none}
.pin.cluster .lab{font-family:var(--sans);font-size:14px;padding:8px 14px;gap:6px}
.pin.cluster .lab b{font:500 15px var(--mono)}
.pin.fav-pin .lab{background:var(--grad-strong);color:#fff;box-shadow:0 0 0 3px var(--tint),0 6px 16px -6px rgba(0,0,0,.5);outline:0}
.pin.fav-pin .dot{background:#1A5FC2;border-style:solid;border-color:var(--surface);width:12px;height:12px}
.pin.has-fav .lab{box-shadow:0 0 0 3px var(--tint)}
.pin.has-fav .lab .hf{fill:url(#gHeart)}
.pin.sel .lab{transform:scale(1.12)}
.zone{stroke:var(--slate);stroke-width:1.5;stroke-dasharray:3 6;fill:var(--tint);fill-opacity:.35}
.leaflet-marker-icon:focus-visible{outline:none}
.leaflet-marker-icon:focus-visible .lab{outline:3px solid var(--slate);outline-offset:2px}
.leaflet-div-icon{background:none;border:0}
.leaflet-container{font-family:var(--sans)}
.leaflet-bottom.leaflet-right{bottom:calc(var(--safe-b) + var(--tabbar-h) + 24px);right:max(0px,env(safe-area-inset-right,0px))}
.leaflet-control-attribution{font-size:11px;background:var(--glass-text)!important;color:var(--ink)!important;border-radius:8px 0 0 8px}
.leaflet-control-attribution a{color:var(--ink)!important;text-decoration:underline}
.leaflet-control-zoom{border:0!important;box-shadow:var(--shadow-float)!important;border-radius:14px!important;overflow:hidden}
.leaflet-control-zoom a{background:var(--glass-text)!important;color:var(--ink)!important;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);width:44px!important;height:44px!important;line-height:44px!important}
.minicard{position:absolute;z-index:600;left:50%;bottom:calc(var(--safe-b) + var(--tabbar-h) + 28px);width:min(460px,calc(100% - 2 * var(--gutter)));border-radius:var(--r-lg);
  padding:10px;transform:translate(-50%,24px);opacity:0;visibility:hidden;
  transition:transform var(--d-exit) var(--ease-in),opacity var(--d-exit) var(--ease-in),visibility 0s linear var(--d-exit)}
.minicard.open{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform var(--d-normal) var(--ease-sheet),opacity var(--d-normal) var(--ease-out),visibility 0s}
.mlink{display:flex;gap:12px;align-items:stretch;text-decoration:none;border-radius:12px;padding-right:48px}
.minicard .mph{width:104px;flex:none;border-radius:12px;overflow:hidden;position:relative;aspect-ratio:1}
.minicard .mph img{width:100%;height:100%;object-fit:cover;display:block}
.minicard .mbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.minicard .price{font-size:21px}
.minicard .facts{margin:0;gap:10px;font-family:var(--mono);font-size:13px}
.minicard .place{color:var(--ink)}
.minicard .approx-note{font-size:13px;color:var(--ink);display:flex;gap:5px;align-items:center}
.minicard .icon-btn{position:absolute;right:8px;top:8px}
.minicard .fav{position:absolute;right:8px;bottom:8px;box-shadow:inset 0 0 0 1px var(--hair)}

/* ---------- Ficha ---------- */
.ficha{width:min(820px,100%);margin:0 auto}
.fhero{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/11;background:var(--sk-base);contain:paint}
@media (max-width:640px){.fhero{margin:calc(-12px - var(--safe-t)) calc(var(--gutter) * -1) 0;border-radius:0 0 var(--r-xl) var(--r-xl);aspect-ratio:4/3.7}}
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:100%;scrollbar-width:none;overscroll-behavior-x:contain}
.gallery:focus-visible{outline-offset:-6px;border-radius:var(--r-xl)}
.gallery::-webkit-scrollbar{display:none}
.gallery>*{flex:0 0 100%;scroll-snap-align:center;position:relative;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.fback{position:absolute;left:14px;top:calc(14px + var(--safe-t));width:44px;height:44px;border-radius:99px;display:grid;place-items:center;z-index:3;color:var(--ink);border:0;padding:0}
.fback svg{width:20px;height:20px}
.fhero>.fav{position:absolute;right:14px;top:calc(14px + var(--safe-t));z-index:3}
.fcount{position:absolute;left:50%;transform:translateX(-50%);top:calc(20px + var(--safe-t));padding:0 12px;min-height:32px;display:flex;align-items:center;border-radius:99px;font:500 13px var(--mono);z-index:3}
.gnav{position:absolute;top:50%;width:44px;height:44px;border-radius:99px;display:grid;place-items:center;z-index:3;color:var(--ink);margin-top:-48px;border:0;padding:0}
.gnav.prev{left:14px}.gnav.next{right:14px}
.gnav svg{width:18px;height:18px}
.gnav.next svg{transform:scaleX(-1)}
@media (pointer:coarse){.gnav{display:none}}
.foverlay{position:absolute;left:12px;right:12px;bottom:12px;border-radius:var(--r-lg);padding:12px 16px 14px;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.foverlay .plabel{display:block;font-size:13px;color:var(--ink)}
.foverlay .price{font-size:34px;line-height:1.1}
.foverlay .ttl{font-size:15px;color:var(--ink);margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (prefers-reduced-motion: no-preference){
  /* KM: the figure enters 120ms after its label, 10px only */
  .foverlay .price{animation:priceIn 460ms var(--ease-out) 120ms both}
}
@keyframes priceIn{from{opacity:0;transform:translateY(10px)}}
.dots{display:flex;gap:6px;padding-bottom:8px;flex:none}
.dots i{width:6px;height:6px;border-radius:99px;background:var(--ink);opacity:.3;transition:opacity var(--d-fast),transform var(--d-normal) var(--ease-spring)}
.dots i.on{opacity:.85;transform:scale(1.3)}
.fbadges{display:flex;flex-wrap:wrap;gap:8px;margin:18px 2px 0}
.keyfacts{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin:16px 0 0;background:var(--hair);border:1px solid var(--card-edge);box-shadow:var(--card-shadow);border-radius:var(--r-lg);overflow:hidden}
.keyfacts div{background:var(--surface);padding:14px 12px}
.keyfacts b{display:block;font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:-.02em}
.keyfacts span{font-size:13px;color:var(--muted)}
@media (max-width:560px){.keyfacts{grid-template-columns:repeat(3,1fr)}.keyfacts div:last-child{grid-column:span 2}}
.sec{margin:36px 2px 0}
.sec h2{font-family:var(--sans);font-weight:300;font-size:28px;line-height:1.1;letter-spacing:-.01em;margin:0 0 12px}
.where{color:var(--muted);font-size:15px;display:flex;gap:8px;align-items:flex-start;margin:0}
.where svg{margin-top:3px}
.panel{background:var(--card);border:1px solid var(--card-edge);box-shadow:var(--card-shadow);border-radius:var(--r-lg);padding:16px 18px}
.conds{list-style:none;margin:0;padding:0}
.conds li{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--hair);font-size:15px;color:var(--muted)}
.conds li:first-child{border-top:0;padding-top:0}
.conds svg{color:var(--slate);margin-top:3px}
.desc{font-size:16px;line-height:1.6;color:var(--muted);max-width:66ch;white-space:pre-line;margin:0}
.desc.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.more{margin-top:4px;border:0;background:none;color:var(--blue-text);font-weight:500;text-decoration:underline;text-underline-offset:3px;padding:0 4px;min-height:44px;min-width:44px;font-size:16px}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .axis{fill:var(--muted);font-size:12px;font-family:var(--sans)}
.chart .grid{stroke:var(--hair)}
.chart .line{stroke:var(--signal);stroke-width:2.2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:var(--signal);opacity:.1}
.chart .pt{fill:var(--surface);stroke:var(--signal);stroke-width:2.2}
.chart .lbl{fill:var(--ink);font:500 13px var(--mono)}
.hist-note{font-size:14px;color:var(--muted);margin:8px 0 0}
.cta{margin:32px 0 0;display:flex}
.cta .btn{flex:1;min-height:56px;font-size:17px;border-radius:16px}
.cta .btn svg{width:20px;height:20px}

/* Notes thread */
.notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.note{display:flex;gap:12px;align-items:flex-start}
.note.new{animation:noteIn 380ms var(--ease-out)}
@keyframes noteIn{from{opacity:0;transform:translateY(8px)}}
.av{width:36px;height:36px;border-radius:99px;display:grid;place-items:center;font-weight:600;font-size:15px;flex:none;line-height:1}
.av-m{background:var(--grad-strong);color:#fff}
.av-e{background:var(--b-lib-bg);color:var(--b-lib-ink)}
.seg .av{width:26px;height:26px;font-size:12px}
.note-b{min-width:0;flex:1}
.note-meta{margin:0;font-size:14px;color:var(--muted)}
.note-meta b{color:var(--ink);font-weight:600;margin-right:6px}
.note-txt{margin:2px 0 0;white-space:pre-line;overflow-wrap:anywhere}
.note-empty{color:var(--muted);font-size:15px}
.note-form{margin-top:18px;border-top:1px solid var(--hair);padding-top:16px}
.note-form .lab,.note-form label{display:block;font-size:15px;font-weight:500;margin:0 0 8px}
.note-form .seg{max-width:320px;margin-bottom:14px}
.note-form textarea{display:block;width:100%;min-height:96px;border-radius:var(--r-md);border:1px solid var(--hair);background:var(--bg);padding:12px 14px;font-size:16px;line-height:1.5;resize:vertical}
.note-form textarea::placeholder{color:var(--muted);opacity:1}
.note-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.bot-hint{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--blue-text);margin:0}

.dups{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 12px;margin:0 -4px;scroll-snap-type:x proximity}
.dup{flex:0 0 260px;scroll-snap-align:start;display:flex;gap:12px;align-items:center;text-decoration:none;background:var(--card);border:1px solid var(--card-edge);box-shadow:var(--card-shadow);border-radius:var(--r-md);padding:8px;
  transition:transform var(--d-normal) var(--ease-spring)}
.dup:active{transform:scale(.98);transition:transform var(--d-press) var(--ease-out)}
.dup .t{width:64px;height:64px;border-radius:10px;overflow:hidden;flex:none;position:relative}
.dup img{width:100%;height:100%;object-fit:cover;display:block}
.dup b{font:500 16px var(--mono);display:block}
.dup span{font-size:13px;color:var(--muted);display:block}
.none{color:var(--muted);font-size:15px;margin:0}
.ref{margin:28px 2px 0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.demo-note{margin:32px 4px 0;font-size:13px;font-style:italic;color:var(--muted);max-width:70ch}

@media (max-width:720px){
  .summary{grid-template-columns:1fr;gap:16px;padding:16px 18px}
  .stats{gap:12px;justify-content:space-between}
  .sources{justify-self:stretch;min-width:0}
  .stat b{font-size:28px}
  .grid{grid-template-columns:1fr}
  .tabbar{grid-template-columns:repeat(3,92px)}
  .tabbar .pill{width:92px}
  .update .btn{flex:1}
}

/* ---------- Reduced motion: opacity only, short ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:120ms!important;animation-duration:150ms!important;animation-delay:0ms!important;scroll-behavior:auto!important}
  .view.enter,.view.enter-push,.view.enter-pop,.note.new{animation-name:fadeOnly!important}
  .aurora i,.sk::after,.srcbar.draw i,.step[data-state="run"] .st-ic,.step[data-state="done"] .st-ic,.fav.pop .heart,.fav.unpop .heart,.tbadge.bump{animation:none!important}
  .step[data-state="run"] .st-ic{border-color:var(--signal)}
  .fav.pop::after{animation:none!important}
  .card:active,.card:has(.card-link:active),.card.leaving,.chip:active,.btn:active,.tab:active,.dup:active,.fav:active .heart,.pin.sel .lab,.dots i.on{transform:none!important}
  .tabbar .pill{transition:none!important}
  .hero-head{transform:none!important}
}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}

/* =========================================================
   Elenapp (web de produccion): ajustes sobre la maqueta v4.
   Paginas servidas por el servidor; todo funciona sin JavaScript
   y el JavaScript solo mejora (sin recargas, animaciones, mapa).
   ========================================================= */

/* Navegacion entre paginas con transicion (Chrome/Edge); nada si se reduce el movimiento. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
}
.fhero{view-transition-name:hero}

/* Enlaces con aspecto de boton o pestana */
a.tab,a.chip,a.btn,a.icon-btn,a.fback{text-decoration:none}
a.chip{color:var(--ink)}
.tab{color:var(--ink)}
.skip:focus-visible,.skip:focus{transform:none}
a.skip{display:inline-flex;align-items:center;text-decoration:none}

/* Formularios que envuelven el corazon: el boton sigue colocado como en la maqueta */
.card>.fav-form>.fav{position:absolute;top:10px;right:10px;z-index:3}
.fhero>.fav-form>.fav{position:absolute;right:14px;top:calc(14px + var(--safe-t));z-index:3}
.minicard>.fav-form>.fav{position:absolute;right:8px;bottom:8px;box-shadow:inset 0 0 0 1px var(--hair)}
.fav{cursor:pointer}

/* Sin foto (bancos) */
.no-photo{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:6px;color:var(--muted);font-size:14px;
  background:linear-gradient(160deg,var(--boe-a),var(--boe-b))}
.no-photo svg{width:34px;height:34px;stroke:var(--slate);opacity:.8}

/* Cifras de la tarjeta: el numero en <b> para poder contarlo, mismo peso que el texto */
.facts b{font-weight:inherit}

/* Tarjeta retirada (ya no publicada) */
.badge.off{background:var(--b-unk-bg);color:var(--b-unk-ink)}
.card.retirada .ph img{filter:grayscale(.7)}

/* Hoja de filtros sin JavaScript: se abre con #filtros (:target) */
.sheet:target{transform:translate(-50%,0);visibility:visible;transition:transform var(--d-slow) var(--ease-sheet),visibility 0s}
.sheet:target + .scrim{opacity:1;pointer-events:auto}
a.scrim{display:block}
.sheet .field select,.sheet .field input[type="text"]{width:100%;min-height:48px;border-radius:var(--r-md);border:1px solid var(--hair);background:var(--surface);padding:0 12px;font-size:16px}

/* Segmentos y conmutadores hechos con radios (funcionan sin JavaScript) */
.seg label{flex:1;position:relative;display:flex}
.seg input,.togs input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label span{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-size:15px;font-weight:500;
  color:var(--muted);transition:background var(--d-fast),color var(--d-fast);cursor:pointer;text-align:center;padding:0 6px}
.seg input:checked + span{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--slate),0 1px 3px rgba(15,35,65,.18)}
.seg input:focus-visible + span,.togs input:focus-visible + span{outline:3px solid var(--slate);outline-offset:2px}
.togs label{display:inline-flex}
.togs label span{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--slate);background:var(--surface);font-size:15px;font-weight:500;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.togs label span svg{width:15px;height:15px;stroke-width:2.4;display:none}
.togs input:checked + span{background:var(--grad-strong);color:#fff;border-color:transparent}
.togs input:checked + span svg{display:inline}

/* Boton de ordenar: con JavaScript se envia solo al cambiar */
.sort-form{display:flex;gap:8px;align-items:center;flex:none}
.js .sort-go{display:none}
.sort-go{min-height:44px}

/* Notas: los autores como segmento de radios */
.note-form .seg label span .av{width:26px;height:26px;font-size:12px}
.form-error{color:var(--b-ocu-ink);font-size:14px;margin:8px 0 0}

/* Boton "Actualizar ahora": llega en la siguiente entrega */
.update .soon{font-size:13px;color:var(--muted);display:block}

/* Mas datos de la ficha */
.datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 24px;margin:0}
.datos div{padding:10px 0;border-top:1px solid var(--hair)}
.datos dt{font-size:13px;color:var(--muted)}
.datos dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.hist{list-style:none;margin:12px 0 0;padding:0;font-size:14px;color:var(--muted)}
.hist .h-fila{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--hair)}
.hist .h-fila b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.url-mala{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.url-mala code{font-size:13px}

/* Pagina de error / no encontrada */
.aviso{max-width:560px;margin:80px auto;text-align:center}
.aviso h1{font-weight:300;font-size:34px;margin:0 0 8px}
.aviso p{color:var(--muted)}

/* Mapa: aviso de viviendas sin ubicacion */
.map-note{position:absolute;z-index:500;left:var(--gutter);top:calc(var(--safe-t) + 74px);border-radius:14px;padding:6px 12px;font-size:13px;color:var(--ink)}
.map-note:empty{display:none}

/* Chip activo como enlace (aria-current), mismo aspecto que el chip pulsado */
.chip[aria-current="true"]{background:var(--grad-strong);color:#fff;border-color:transparent}

/* ---------- Actualizar ahora: página de progreso ---------- */
.upd-page{max-width:560px;margin:0 auto;padding:calc(var(--safe-t,0px) + 72px) var(--gutter) 140px}
.r-title{font-family:var(--sans);font-weight:300;font-size:30px;line-height:1.1;letter-spacing:-.015em;margin:0}
.upd-form{display:contents}
.step[data-state="err"] .st-ic{border-color:var(--muted)}
.step[data-state="err"] .st-res{color:var(--ink)}

/* ---------- Sesión: entrar y salir ---------- */
.login{display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding-bottom:calc(var(--safe-b) + 28px)}
.login-card{width:min(420px,100%);padding:36px 28px 32px;border-radius:28px}
.login-card .sub{margin:6px 0 20px}
.login-card .field{margin:14px 0 0}
.login-card .field input{display:block;width:100%;min-height:48px;border-radius:var(--r-md);border:1px solid var(--hair);background:var(--surface);color:var(--ink);padding:0 14px;font-size:16px}
.login-card .field input:focus-visible{outline:2px solid var(--slate);outline-offset:2px}
.login-card .form-error{margin:0;padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--hair);background:var(--surface);color:var(--ink);font-size:15px}
.login-btn{width:100%;margin-top:22px}
.sesion{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:40px 0 0;font-size:14px;color:var(--muted)}
.sesion b{color:var(--ink);font-weight:500}
.note-as{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:15px}
.note-as .av{width:26px;height:26px;font-size:12px}

/* Tanda B: nota, filtro de encaje y paginacion */
.badge.enc{background:var(--mist);color:var(--blue-text)}
.badge.fuera{background:var(--surface);color:var(--b-ocu-ink);box-shadow:inset 0 0 0 1px var(--b-ocu-ink)}
.fit{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:13px;color:var(--muted);min-width:0}
.fit .nota,.nota.big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--blue-text);background:var(--tint);border-radius:99px;padding:1px 9px;flex:none}
.fit span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nota.big{font-size:28px;padding:2px 16px;letter-spacing:-.02em}
.score-top{display:flex;align-items:center;gap:14px;margin:0 0 12px;color:var(--muted)}
.score-top b:not(.nota){color:var(--ink);font-weight:500}
.score-foot{margin:14px 0 0;font-size:14px}
.cuenta{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:13px;font-weight:600;color:var(--b-sub-ink)}
.cuenta .i{width:14px;height:14px}
.cuenta.fin{color:var(--muted);font-weight:500}
.cuenta.grande{font-size:16px;margin:0 0 10px}
.hidden-note{margin:0 4px 12px;font-size:14px;color:var(--blue-text)}
.hidden-note .deshacer{font:inherit;color:var(--blue-text);background:none;border:0;padding:0 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.hidden-note a,.score-foot a{color:var(--blue-text);text-decoration:underline;text-underline-offset:3px}
.pager{display:flex;justify-content:center;gap:12px;margin:28px 0 8px}
.pager .btn{min-width:150px}
.ayuda{margin:6px 0 0;font-size:14px;color:var(--muted)}
.form-ok{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:12px 16px;border-radius:var(--r-md);background:var(--b-lib-bg);color:var(--b-lib-ink);font-weight:500}
.form-ok svg{width:18px;height:18px;flex:none}
.pager[hidden]{display:none}

/* Tanda B: calculadora de coste total */
.coste-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0;color:var(--muted)}
.coste-top b{font-size:28px;letter-spacing:-.02em;color:var(--blue-text);font-weight:500}
.coste-sub{margin:4px 0 14px;font-size:14px;color:var(--muted)}
.coste-sub b{color:var(--ink);font-weight:500}
.aviso-subasta{margin:0 0 14px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--b-ocu-ink);color:var(--ink);font-size:15px}
.coste-lin{margin:0;display:grid}
.coste-lin>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--hair)}
.coste-lin dt{color:var(--muted)}
.coste-lin dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.coste-lin .cuota dt,.coste-lin .cuota dd{color:var(--blue-text);font-weight:500}
.coste-campos{margin:16px 0 0;padding:12px 14px;border:1px solid var(--hair);border-radius:var(--r-md);display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.coste-campos legend{padding:0 6px;font-size:14px;color:var(--muted)}
.coste-obra{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px}
.coste-obra input{width:22px;height:22px}
.cc label{display:block;font-size:14px;margin-bottom:4px}
.cc input{display:block;width:100%;min-height:44px;border-radius:var(--r-md);border:1px solid var(--hair);background:var(--surface);color:var(--ink);padding:0 12px;font-size:16px}
.cc input:focus-visible,.coste-obra input:focus-visible{outline:3px solid var(--slate);outline-offset:2px}

/* Evaluador IA */
.badge.ia{background:var(--grad-strong);color:#fff}
.recom{margin:0 0 28px}
.recom h2{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:300;font-size:26px;line-height:1.1;margin:0 0 6px}
.recom h2 .i{width:22px;height:22px}
.recom-nota{margin:0 4px 12px;font-size:14px;color:var(--muted)}
.panel.ia h3{font-size:14px;font-weight:600;margin:14px 0 6px;color:var(--ink)}
.ia-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 10px}
.ia-fecha{font-size:13px;color:var(--muted)}
.ia-resumen{margin:0;line-height:1.5;overflow-wrap:anywhere}
.panel.ia .conds span{overflow-wrap:anywhere}
.sec h2 small{font-size:14px;font-weight:400;color:var(--muted)}