/* ==========================================================================
   HomeFinder — hoja de estilos única (sin build step).
   Tokens primero; los componentes se estilan siempre a través de los tokens,
   nunca con literales dentro de un @media, para que claro y oscuro cuadren.
   ========================================================================== */

:root {
  --paper:      #f4f1ea;
  --surface:    #ffffff;
  --surface-2:  #faf8f3;
  --inset:      #f0ede4;
  --ink:        #1a1915;
  --muted:      #6c6960;
  --faint:      #9a958a;
  --line:       #e5e0d6;
  --line-soft:  #eee9df;

  --accent:     #1c5a49;   /* verde pino — marca + encaje */
  --accent-ink: #ffffff;
  --accent-soft:#e4efe9;
  --accent-2:   #2f7a63;

  --good:       #2f7a63;   /* bajada de precio / criterio cumplido */
  --warn:       #a8720f;   /* ámbar — avisos, severidad media */
  --warn-soft:  #f6ecd7;
  --danger:     #a12a26;   /* granate — alarma crítica, incumplido */
  --danger-soft:#f4e2e0;
  --gold:       #9a6b1e;   /* antigüedad = palanca de negociación */

  --radius:   12px;
  --radius-s: 8px;
  --shadow:   0 1px 2px rgba(26,25,21,.04), 0 4px 16px rgba(26,25,21,.05);
  --shadow-lg:0 2px 6px rgba(26,25,21,.06), 0 12px 32px rgba(26,25,21,.08);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", ui-serif, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1240px;   /* solo la lista de anuncios */
  --readw: 1000px;  /* ancho de lectura por defecto */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #15140f;
    --surface:    #1e1d17;
    --surface-2:  #191813;
    --inset:      #232219;
    --ink:        #ece8de;
    --muted:      #9d988c;
    --faint:      #736f64;
    --line:       #322f26;
    --line-soft:  #2a281f;

    --accent:     #7fc3ab;
    --accent-ink: #10221b;
    --accent-soft:#20302a;
    --accent-2:   #6bb69c;

    --good:       #7fc3ab;
    --warn:       #d8a445;
    --warn-soft:  #322914;
    --danger:     #e28a86;
    --danger-soft:#331d1c;
    --gold:       #d9a441;

    --shadow:   0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    --shadow-lg:0 2px 8px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: 1.55rem; font-weight: 640; }
h2 { font-size: 1.02rem; font-weight: 620; }
h3 { font-size: .74rem; font-weight: 640; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
p { margin: 0; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); font-size: .9rem; }
.faint { color: var(--faint); }
.hint  { font-size: .82rem; color: var(--muted); line-height: 1.45; }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 4px; }

/* ---------- barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem clamp(1rem, 4vw, 2rem);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 660; letter-spacing: -0.02em; color: var(--ink); font-size: 1.05rem; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); position: relative; flex-shrink: 0; }
.brand .mark::after {
  content: ""; position: absolute; inset: 6px 6px 0 6px; border-radius: 2px 2px 0 0;
  background: var(--accent-ink); clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%);
}
.topbar nav { display: flex; align-items: center; gap: 1rem; }

main { max-width: var(--readw); margin: 0 auto; padding: 1.5rem clamp(1rem,4vw,2rem) 5rem; }
main.wide { max-width: var(--maxw); }

/* ---------- botones y enlaces ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .95rem; border: 1px solid transparent; border-radius: var(--radius-s);
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-size: .9rem; font-weight: 560; cursor: pointer; text-decoration: none;
  transition: filter .12s ease, transform .04s ease;
}
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-quiet  { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.btn-sm { padding: .34rem .7rem; font-size: .83rem; }

.linkish { background: none; border: 0; padding: 0; color: var(--accent-2); font: inherit; font-size: .88rem; cursor: pointer; }
.linkish:hover { text-decoration: underline; }

/* ---------- cabeceras de página ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 1.5rem; }
.page-head .actions { display: flex; gap: .5rem; flex-shrink: 0; }
.breadcrumb { font-size: .84rem; color: var(--muted); margin-bottom: .4rem; }

/* ---------- panel ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.35rem; margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.panel > h2 { margin-bottom: .2rem; }
.panel.warn { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.section-head .sub { margin-top: .15rem; }

/* ---------- tags / chips ---------- */
.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 560; padding: .18rem .55rem; border-radius: 999px;
  background: var(--inset); color: var(--muted); white-space: nowrap; line-height: 1.4;
}
.tag-line   { background: transparent; border: 1px solid var(--line); }

/* estados del procesado */
.tag-pending, .tag-processing, .tag-awaiting_content { background: var(--warn-soft); color: var(--warn); }
.tag-completed { background: var(--accent-soft); color: var(--accent-2); }
.tag-failed { background: transparent; border: 1px solid color-mix(in srgb,var(--danger) 45%,var(--line)); color: var(--danger); }

/* estados de la búsqueda */
.tag-active { background: var(--accent-soft); color: var(--accent-2); }
.tag-paused { background: var(--warn-soft); color: var(--warn); }
.tag-closed { background: transparent; border: 1px solid var(--line); }

/* pipeline */
.tag-pipe-shortlist { background: var(--accent-soft); color: var(--accent-2); }
.tag-pipe-contacted,
.tag-pipe-visit_scheduled,
.tag-pipe-visited,
.tag-pipe-offer { background: var(--warn-soft); color: var(--warn); }
.tag-pipe-closed { background: var(--accent); color: var(--accent-ink); }
.tag-pipe-discarded { background: transparent; border: 1px solid var(--line); }

/* criterios */
.tag-deal_breaker { background: var(--danger-soft); color: var(--danger); }
.tag-must_have { background: var(--accent-soft); color: var(--accent-2); }
.tag-nice_to_have { background: transparent; border: 1px solid var(--line); }

/* ---------- avisos globales ---------- */
.flash { padding: .7rem 1rem; border-radius: var(--radius-s); margin-bottom: 1.25rem; font-size: .92rem; }
.flash.notice { background: var(--accent-soft); color: var(--accent-2); }
.flash.alert  { background: var(--warn-soft); color: var(--warn); }

.errors { background: var(--danger-soft); border-radius: var(--radius-s); padding: .85rem 1rem; margin-bottom: 1.25rem; font-size: .9rem; color: var(--danger); }
.errors p { margin: 0 0 .4rem; font-weight: 560; }
.errors ul { margin: 0; padding-left: 1.2rem; }

/* ---------- formularios ---------- */
.form { max-width: 560px; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .88rem; font-weight: 560; margin-bottom: .3rem; }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="url"],
.field select,
.field textarea,
.form input[type="text"],
.form input[type="email"],
.form input[type="password"] {
  width: 100%; padding: .58rem .72rem; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink); font: inherit;
}
.field .hint { margin: .3rem 0 0; }
.form .actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.field-error { margin: .5rem 0 0; font-size: .88rem; color: var(--danger); }
.field kbd { font-family: var(--mono); font-size: .78rem; padding: .05rem .3rem; border: 1px solid var(--line); border-radius: 4px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.field.checkbox { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.field.checkbox label { margin: 0; font-weight: 400; }
.field.checkbox input[type="checkbox"] { width: auto; }
.field.checkbox .hint { flex-basis: 100%; margin-top: .2rem; }

.financing { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem .4rem; margin-bottom: 1.2rem; }
.financing legend { font-size: .88rem; font-weight: 620; padding: 0 .4rem; }
.financing > .hint { margin: 0 0 1rem; }

/* ---------- estado vacío ---------- */
.empty { text-align: center; padding: 3.5rem 1.5rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.empty p { margin: 0 0 .5rem; }
.empty .btn { margin-top: 1rem; }

/* ---------- listado de tarjetas simples (búsquedas, criterios) ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.card h2 { margin: 0; font-size: 1.05rem; }
.card h2 a { text-decoration: none; color: var(--ink); }
.card .notes { margin: .5rem 0 0; font-size: .92rem; }
.criterion .linkish { margin-top: .6rem; }

.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: .4rem 0; border-bottom: 1px solid var(--line-soft); }
.plain li:last-child { border-bottom: 0; }

/* seleccionar pisos para comparar */
.lead { position: relative; }
.lead-select {
  position: absolute; top: .5rem; left: .5rem; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .3rem; border-radius: 10px; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(2px);
}
.lead-select:hover { border-color: var(--accent-2); }
.lead-select input {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 1.3rem; height: 1.3rem; border-radius: 6px; cursor: pointer;
  border: 2px solid var(--faint); background: var(--surface);
  display: grid; place-content: center; transition: background .1s ease, border-color .1s ease;
}
.lead-select input::after {
  content: "✓"; font-size: .95rem; font-weight: 800; line-height: 1;
  color: var(--accent-ink); opacity: 0;
}
.lead-select input:checked { background: var(--accent); border-color: var(--accent); }
.lead-select input:checked::after { opacity: 1; }
.lead-select input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.lead:has(.lead-select input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }

.compare-bar {
  position: sticky; bottom: 1rem; z-index: 10;
  display: flex; align-items: center; gap: .8rem; margin-top: 1.25rem;
  padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-lg); width: fit-content;
}
.compare-bar .compare-hint { color: var(--muted); font-size: .84rem; }
.btn.is-disabled { opacity: .5; pointer-events: none; }

/* comparador lado a lado */
.side-by-side .compare-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: .92rem; }
.compare th, .compare td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.compare thead th { font-size: .9rem; font-weight: 620; border-bottom: 1px solid var(--line); }
.compare thead th a { color: var(--ink); }
.compare tbody th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; white-space: nowrap; }
.compare td { font-variant-numeric: tabular-nums; }
.compare td.best { color: var(--accent-2); font-weight: 660; background: var(--accent-soft); }
.frontier-title { margin: 1.5rem 0 1rem; }

/* comparar — frontera de Pareto */
.axis-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.axis-toggles .sf-label { flex-basis: 100%; margin-bottom: .1rem; }
.axis-options { display: flex; flex-wrap: wrap; gap: .4rem; }
.axis-option {
  padding: .34rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .84rem; color: var(--muted); background: var(--surface); cursor: pointer;
}
.axis-option:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 550; }
.axis-option:has(input:focus-visible) { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.frontier-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.frontier { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--surface); }
.frontier th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 620; text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.frontier td { padding: .7rem .85rem; border-bottom: 1px solid var(--line-soft); }
.frontier tr:last-child td { border-bottom: 0; }
.frontier th.num, .frontier td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.frontier .lead-cell { font-weight: 550; }
.frontier .lead-cell a { color: var(--ink); }
.frontier td.best { color: var(--accent-2); font-weight: 660; background: var(--accent-soft); }

details.also { margin-top: 1.2rem; }
details.also summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
details.also .hint { margin: .6rem 0 .4rem; }

/* participantes e invitaciones */
.members li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.invites li { padding: .7rem 0; }
.invite-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.invite-link { display: flex; gap: .5rem; margin-top: .45rem; }
.invite-link input {
  flex: 1; min-width: 0; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--muted); font: inherit; font-size: .84rem;
}
.invite-link .btn { flex-shrink: 0; }
.telegram-start {
  margin: .5rem 0 0; padding: .6rem .8rem; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--surface-2); color: var(--ink);
  font-family: var(--mono); font-size: .78rem; white-space: pre-wrap; word-break: break-all; overflow-x: auto;
}

.invite-form { margin-top: .5rem; max-width: 520px; }
.invite-form input[type="email"] {
  flex: 1; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink); font: inherit;
}
section > h3 { margin: 1.4rem 0 .6rem; }

.bookmarklet-row { display: flex; align-items: center; gap: 1rem; margin: .9rem 0 0; }
.bookmarklet { cursor: grab; }
.bookmarklet:active { cursor: grabbing; }

/* ==========================================================================
   LISTA DE ANUNCIOS — dos columnas: menú lateral + pisos
   ========================================================================== */
.list-layout { display: grid; grid-template-columns: 262px 1fr; gap: 2rem; align-items: start; }
.list-side { position: sticky; top: 4.6rem; display: flex; flex-direction: column; gap: 1.25rem; }
.list-main { min-width: 0; }
@media (max-width: 860px) {
  .list-layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .list-side { position: static; }
}

.side-title h1 { font-size: 1.3rem; }
.side-title .breadcrumb { margin: .5rem 0 0; display: flex; flex-direction: column; gap: .15rem; }

.side-filters { display: flex; flex-direction: column; gap: .1rem; }
.side-filters .sf-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: .45rem; }
.side-filters .filter {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  border: 0; border-radius: var(--radius-s); padding: .45rem .6rem; text-align: left; width: 100%;
  background: transparent; color: var(--muted); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none;
}
.side-filters .filter:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.side-filters .filter.is-on { background: var(--accent); color: var(--accent-ink); }
.side-filters .filter .n {
  font-variant-numeric: tabular-nums; font-size: .8rem;
  background: var(--inset); color: var(--muted); border-radius: 999px; padding: .05rem .5rem; min-width: 1.7rem; text-align: center;
}
.side-filters .filter.is-on .n { background: rgba(255,255,255,.22); color: var(--accent-ink); }

/* fila de filtros en píldora (fallback / otras vistas) */
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.filters .filter { padding: .34rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: .84rem; color: var(--muted); background: var(--surface); text-decoration: none; }
.filters .filter.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* resumen de "qué buscas" en la barra lateral */
.side-criteria .sf-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: .45rem; }
.side-criteria ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .05rem; }
.side-criteria li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .4rem; padding: .4rem .6rem; border-radius: var(--radius-s); font-size: .88rem; line-height: 1.35; }
.side-criteria li:nth-child(odd) { background: var(--surface-2); }
.side-criteria .c-label { font-weight: 560; }
.side-criteria .c-cond { font-size: .8rem; }
.side-criteria .excl { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--danger); flex-basis: 100%; }
.side-criteria .more { display: inline-block; margin: .55rem 0 0 .6rem; font-size: .82rem; }

.insight {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius); padding: .95rem 1rem;
}
.insight .ic { flex-shrink: 0; color: var(--accent-2); margin-top: .1rem; }
.insight p { font-size: .88rem; }
.list-side .insight { flex-direction: column; gap: .5rem; }

.url-form { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1rem; }
.url-row { display: flex; gap: .55rem; }
.url-row input {
  flex: 1; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink); font: inherit;
}
.url-row input::placeholder { color: var(--faint); }
.url-row .btn { flex-shrink: 0; }

.stale-notice, .all-disqualified { margin-bottom: 1rem; }
.stale-notice { border-style: dashed; }
.stale-notice .actions { margin: .8rem 0 0; }

/* ---------- tarjeta de anuncio ---------- */
.lead {
  display: grid; grid-template-columns: 116px 1fr auto; gap: 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .85rem; box-shadow: var(--shadow); position: relative;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.lead:hover { box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.lead.is-disqualified { opacity: .62; }
.lead-thumb {
  width: 116px; height: 96px; border-radius: var(--radius-s); object-fit: cover;
  background: linear-gradient(135deg, var(--inset), var(--line)); align-self: stretch; display: block;
}
.lead-thumb.placeholder { display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 1.6rem; }
.lead-body { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.lead-title { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; }
.lead-title a { color: var(--ink); text-decoration: none; }
.lead-title a:hover { text-decoration: underline; }
.lead-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem; font-size: .92rem; color: var(--muted); }
.lead-meta .sep { color: var(--faint); }
.lead-price { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.lead-monthly b { color: var(--ink); font-weight: 600; }
.lead-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }

.history-line { margin: 0; font-size: .84rem; font-weight: 560; }
.history-line.age-fresh  { color: var(--faint); }
.history-line.age-ageing { color: var(--gold); }
.history-line.age-old    { color: var(--danger); }

.lead-aside { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; justify-content: space-between; }
.score-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 3.1rem; height: 3.1rem; border-radius: 14px; padding: 0 .2rem;
  background: var(--accent); color: var(--accent-ink); line-height: 1;
}
.score-chip .v { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.score-chip .c { font-size: .56rem; opacity: .82; margin-top: .12rem; letter-spacing: .02em; white-space: nowrap; }
.score-chip.mid { background: color-mix(in srgb, var(--accent) 62%, var(--warn)); }
.score-chip.low { background: color-mix(in srgb, var(--warn) 70%, var(--danger)); color: #fff; }
.flag-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 999px; background: var(--danger-soft); color: var(--danger); font-size: .78rem; font-weight: 620; }
.out-badge { font-size: .76rem; font-weight: 600; color: var(--danger); border: 1px solid color-mix(in srgb,var(--danger) 30%,var(--line)); border-radius: 999px; padding: .12rem .5rem; white-space: nowrap; }

/* ==========================================================================
   FICHA DEL ANUNCIO
   ========================================================================== */

/* cabecera-veredicto */
.verdict { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1rem; }
.verdict-top { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.3rem 1.4rem 1.1rem; }
.verdict-top .actions { display: flex; gap: .5rem; align-items: flex-start; flex-shrink: 0; }
.verdict h1 { font-size: 1.5rem; margin-bottom: .35rem; }
.verdict .loc { font-size: .92rem; color: var(--muted); }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.stat { padding: .95rem 1.4rem; border-left: 1px solid var(--line-soft); }
.stat:first-child { border-left: 0; }
.stat .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stat .v { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; margin-top: .15rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .v small { font-family: var(--sans); font-size: .8rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.stat .v.empty { color: var(--faint); font-family: var(--sans); font-size: 1rem; font-weight: 500; }
.stat.accent .v { color: var(--accent); }
.stat.accent .v.dq { color: var(--danger); font-size: 1rem; }

/* fotos */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); background: var(--inset); display: block; }

/* datos */
.data-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 1rem 1.25rem; margin: 0; }
.datum dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.datum dd { margin: .15rem 0 0; font-size: 1rem; font-weight: 500; }
.datum .age { font-weight: 600; }
.datum .age.age-ageing { color: var(--gold); }
.datum .age.age-old { color: var(--danger); }
.datum .hint { margin: .15rem 0 0; }

/* coste real */
.costs .cost-headline { text-align: right; }
.cost-headline .v, .cost-monthly { display: block; font-family: var(--serif); font-size: 1.9rem; font-weight: 600; color: var(--accent); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cost-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.1rem; }
.cost-columns h3 { margin: 0 0 .3rem; }

.breakdown, .ledger { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ledger td { padding: .5rem .2rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.ledger td.num, .ledger td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .hint { margin: .1rem 0 0; }
.ledger tr.total td { font-weight: 660; border-top: 2px solid var(--line); border-bottom: 0; padding-top: .6rem; }
.ledger tr.sub td { color: var(--muted); border-bottom: 0; }

.shortfall, .callout {
  display: block; margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--radius-s);
  background: var(--warn-soft); font-size: .92rem; border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent);
}

.renovation { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding: 1rem 1.1rem; border: 1px dashed var(--line); border-radius: var(--radius-s); }
.renovation h3 { margin: 0 0 .3rem; }
.renovation p { max-width: 46ch; }
.renovation-figures { text-align: right; flex-shrink: 0; }
.renovation-amount { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1.2; }

details.assumptions { margin-top: 1.1rem; }
details.assumptions summary { cursor: pointer; color: var(--muted); font-size: .88rem; list-style: none; }
details.assumptions summary::-webkit-details-marker { display: none; }
details.assumptions ul.plain { margin: .7rem 0 0; font-size: .88rem; color: var(--muted); }
details.assumptions ul.plain li { padding: .25rem 0; border: 0; }

/* análisis crítico */
.assessment-summary { font-size: 1.05rem; line-height: 1.5; margin: .3rem 0 1.1rem; }
.flags { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.flag {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: .6rem; align-items: start;
  padding: .8rem .9rem; border-radius: var(--radius-s);
  border: 1px solid var(--line); border-left-width: 3px; background: var(--surface-2);
}
.flag-severity { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding-top: .15rem; }
.flag strong { display: block; font-size: .96rem; }
.flag p { font-size: .89rem; color: var(--muted); margin-top: .15rem; }
.flag-alta  { border-left-color: var(--danger); } .flag-alta  .flag-severity { color: var(--danger); }
.flag-media { border-left-color: var(--warn); }   .flag-media .flag-severity { color: var(--warn); }
.flag-baja  { border-left-color: var(--line); }   .flag-baja  .flag-severity { color: var(--faint); }

.why-not { margin-top: 1.2rem; padding: 1rem 1.1rem; border-radius: var(--radius-s); background: var(--danger-soft); border: 1px solid color-mix(in srgb,var(--danger) 20%, transparent); }
.why-not h3 { color: var(--danger); margin-bottom: .35rem; }
.why-not p { font-size: .96rem; }

.assessment-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.3rem; }
.assessment-columns h3 { margin: 0 0 .4rem; }
.assessment-columns .plain li { font-size: .92rem; padding: .3rem 0; }

.stale-warning { margin: 0 0 1rem; padding: .6rem .8rem; border-radius: var(--radius-s); background: var(--warn-soft); color: var(--warn); font-size: .88rem; }

/* encaje / score */
.score-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.score-value { font-family: var(--serif); font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--accent); }
.score-value.disqualified { font-size: 1rem; color: var(--danger); align-self: center; font-family: var(--sans); }

.breakdown th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 620; text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.breakdown td { padding: .55rem .5rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.breakdown th.num, .breakdown td.num { text-align: right; font-variant-numeric: tabular-nums; }
.breakdown .bar { display: inline-block; width: 44px; height: 6px; border-radius: 3px; background: var(--inset); overflow: hidden; vertical-align: middle; margin-right: .4rem; }
.breakdown .bar i { display: block; height: 100%; background: var(--accent); }
.breakdown tr.row-unmet td { color: var(--danger); }
.breakdown tr.row-unmet .bar i { background: var(--danger); }
.breakdown tr.row-unknown td { color: var(--faint); }
.breakdown .tag { margin-left: .35rem; }
.score-panel .hint { margin-top: .8rem; }
@media (max-width: 620px) { .breakdown { display: block; overflow-x: auto; } }

/* qué opináis (votos + notas) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.opinion-form { margin-bottom: 1.2rem; }
.stance-picker { display: flex; gap: .5rem; border: 0; padding: 0; margin: 0 0 1rem; }
.stance {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-size: .9rem; font-weight: 550;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.stance:hover { border-color: var(--accent-2); }
.stance .stance-icon { font-size: 1.05rem; line-height: 1; }
/* Resaltado del voto elegido, gobernado sólo por el radio marcado: así al
   desmarcarlo (toggle) se apaga solo. El radio viene ya marcado del servidor,
   por lo que el estado inicial también se pinta bien. */
.stance.stance-up:has(input:checked)    { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }
.stance.stance-maybe:has(input:checked) { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.stance.stance-down:has(input:checked)  { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.stance:has(input:checked) { font-weight: 650; }
.stance:has(input:focus-visible) { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.opinions .actions { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; }

.others { margin-top: 1.3rem; border-top: 1px solid var(--line-soft); padding-top: 1rem; }
.other-opinion { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; padding: .6rem 0; border: 0; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%; flex-shrink: 0;
  background: var(--inset); color: var(--muted); font-size: .74rem; font-weight: 700;
}
.other-opinion .who { font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.other-opinion .note { font-size: .92rem; color: var(--muted); margin-top: .2rem; }
.stance-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--inset); color: var(--muted); }
.stance-chip.stance-up   { background: var(--accent-soft); color: var(--accent-2); }
.stance-chip.stance-maybe { background: var(--warn-soft); color: var(--warn); }
.stance-chip.stance-down { background: var(--danger-soft); color: var(--danger); }

/* consenso de un vistazo en la tarjeta */
.lead-opinions { display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 0; }
.lead-opinions .op { display: inline-flex; align-items: center; gap: .2rem; font-size: .78rem; padding: .1rem .4rem; border-radius: 999px; background: var(--inset); }
.lead-opinions .op-ini { font-weight: 700; color: var(--muted); font-size: .68rem; letter-spacing: .02em; }
.lead-opinions .op.stance-up   { background: var(--accent-soft); }
.lead-opinions .op.stance-maybe { background: var(--warn-soft); }
.lead-opinions .op.stance-down { background: var(--danger-soft); }

/* histórico de precio */
.price-change { margin: .9rem 0 0; font-size: .95rem; font-weight: 600; }
.price-change.down { color: var(--good); }
.price-change.up { color: var(--muted); }
.sparkline { display: block; width: 100%; height: auto; margin: 1rem 0 .4rem; color: var(--accent); }
.gone { margin: .9rem 0 0; padding: .6rem .8rem; border-radius: var(--radius-s); background: var(--warn-soft); color: var(--warn); font-size: .9rem; }

/* descripción original del anuncio: presente pero plegada */
.panel details.source > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel details.source > summary::-webkit-details-marker { display: none; }
.panel details.source > summary .chev { color: var(--muted); transition: transform .15s ease; flex-shrink: 0; }
.panel details.source[open] > summary .chev { transform: rotate(90deg); }
.panel details.source > summary .muted { display: block; margin-top: .15rem; }
.source-body { margin-top: 1rem; font-size: .95rem; line-height: 1.6; color: var(--ink); max-width: 68ch; }
.source-body p { margin: 0 0 .8rem; }
.source-body p:last-child { margin-bottom: 0; }

/* procedencia */
.provenance { border-style: dashed; box-shadow: none; background: transparent; }
.provenance .muted { font-size: .84rem; }
.provenance code { font-family: var(--mono); font-size: .8rem; background: var(--inset); padding: .05rem .3rem; border-radius: 4px; }

/* ---------- pipeline ---------- */
.pipeline-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.discard-box { margin-top: .9rem; padding: .8rem .95rem; border-radius: var(--radius-s); background: var(--warn-soft); }
.discard-box p { margin: 0 0 .3rem; }
.discard-box .hint { margin: .4rem 0 0; }
.discard-form { margin-top: 1rem; font-size: .9rem; }
.discard-form summary { display: inline-block; cursor: pointer; list-style: none; }
.discard-form summary::-webkit-details-marker { display: none; }
.discard-form .form { max-width: 420px; margin-top: .8rem; }
.discard-form select { width: 100%; padding: .58rem .72rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit; }
.pipeline-history { margin-top: 1rem; font-size: .88rem; }
.pipeline-history summary { cursor: pointer; color: var(--muted); }
.pipeline-history li { padding: .35rem 0; }

/* ---------- captura / aportar contenido ---------- */
.provide-content { max-width: none; margin-top: 1rem; }
.provide-content textarea { font-family: var(--mono); font-size: .8rem; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

@media (max-width: 620px) {
  .cost-columns, .assessment-columns { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat { border-top: 1px solid var(--line-soft); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(-n+2) { border-top: 0; }
  .verdict-top { grid-template-columns: 1fr; }
  .lead { grid-template-columns: 88px 1fr; }
  .lead-thumb { width: 88px; height: 88px; }
  .lead-aside { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}