:root {
  --fondo: #f6f5f1;
  --papel: #ffffff;
  --tinta: #1d2433;
  --suave: #6b7280;
  --liña: #e4e2dc;
  --acento: #1f5f8b;
  --acento-fondo: #e6eff6;
  --baixa: #1d7a46;
  --suba: #b4432f;
  --aviso: #a86a00;
  --raio: 10px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #14171c; --papel: #1c2027; --tinta: #e7e9ee; --suave: #9aa3b2;
    --liña: #2c323c; --acento: #79b4e0; --acento-fondo: #1e2c39;
    --baixa: #5cc78b; --suba: #ef8a74; --aviso: #e0a93a;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
main { max-width: 1180px; margin: 0 auto; padding: 1.25rem 16px 3rem; }
.suave { color: var(--suave); }
small { font-size: .85em; }

/* Barra superior */
.barra { display: flex; align-items: center; gap: 1.5rem; padding: .6rem 16px;
  background: var(--papel); border-bottom: 1px solid var(--liña); position: sticky; top: 0; z-index: 5;
  flex-wrap: wrap; }
.marca { font-weight: 700; font-size: 1.1rem; color: var(--tinta); }
.barra nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.barra nav a { padding: .35rem .7rem; border-radius: 6px; color: var(--suave); }
.barra nav a.activo { background: var(--acento-fondo); color: var(--acento); font-weight: 600; }
.barra nav a:hover { text-decoration: none; color: var(--tinta); }
.usuario { display: flex; gap: 1rem; align-items: center; }
.usuario form { margin: 0; }
.contador { background: var(--acento); color: var(--papel); border-radius: 99px; padding: 0 .45em; font-size: .75em; }
button.ligazon { background: none; border: 0; color: var(--acento); cursor: pointer; font: inherit; padding: 0; }

.cabeceira { margin-bottom: 1rem; }
.cabeceira p { margin: 0; }

/* Cifras */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.cifras div { background: var(--papel); border: 1px solid var(--liña); border-radius: var(--raio); padding: .8rem 1rem; }
.cifras b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.cifras span { color: var(--suave); font-size: .9rem; }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; }
input, select, textarea, button { font: inherit; color: inherit; }
.filtros input, .filtros select { background: var(--papel); border: 1px solid var(--liña);
  border-radius: 8px; padding: .45rem .6rem; min-width: 0; }
.filtros input[type=search] { flex: 1 1 220px; }
.filtros .curto { width: 110px; }
.filtros button, .boton { background: var(--acento); color: var(--papel); border: 0; border-radius: 8px;
  padding: .5rem .95rem; cursor: pointer; font-weight: 600; display: inline-block; }
.boton:hover { text-decoration: none; filter: brightness(1.08); }
.boton.secundario { background: var(--acento-fondo); color: var(--acento); }
.caixa { display: flex; gap: .35rem; align-items: center; color: var(--suave); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { background: var(--papel); border: 1px solid var(--liña); border-radius: 99px; padding: .2rem .7rem; font-size: .9rem; color: var(--tinta); }

/* Avisos */
.avisos { list-style: none; padding: 0; margin: 0; background: var(--papel); border: 1px solid var(--liña); border-radius: var(--raio); }
.aviso { display: flex; gap: .75rem; align-items: baseline; padding: .6rem .9rem; border-top: 1px solid var(--liña); flex-wrap: wrap; }
.aviso:first-child { border-top: 0; }
.aviso > a { flex: 1 1 260px; }
.aviso time { color: var(--suave); font-size: .85rem; font-variant-numeric: tabular-nums; }
.etiqueta { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .1rem .45rem; border-radius: 4px; background: var(--acento-fondo); color: var(--acento); white-space: nowrap; }
.tipo-baixa .etiqueta { color: var(--baixa); background: color-mix(in srgb, var(--baixa) 14%, transparent); }
.tipo-suba .etiqueta, .tipo-retirado .etiqueta { color: var(--suba); background: color-mix(in srgb, var(--suba) 14%, transparent); }
.tipo-reaparece .etiqueta { color: var(--aviso); background: color-mix(in srgb, var(--aviso) 14%, transparent); }
.prezos { font-variant-numeric: tabular-nums; }
.baixa { color: var(--baixa); font-weight: 600; }
.suba { color: var(--suba); font-weight: 600; }
.baleiro { padding: 1.5rem; color: var(--suave); text-align: center; }

/* Grella de tarxetas */
.grella { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.tarxeta { background: var(--papel); border: 1px solid var(--liña); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; }
.tarxeta.retirado { opacity: .6; }
.foto { display: block; aspect-ratio: 4/3; background: var(--liña); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sen-foto { display: grid; place-items: center; height: 100%; color: var(--suave); font-size: .9rem; min-height: 120px; }
.corpo { padding: .75rem .9rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.corpo h3 { font-size: 1rem; margin: 0; line-height: 1.35; }
.corpo h3 a { color: var(--tinta); }
.meta { color: var(--suave); font-size: .82rem; }
.datos { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; font-size: .9rem; }
.prezo { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pe { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.pe form { margin: 0; }
.data { color: var(--suave); font-size: .8rem; }
.estrela { background: none; border: 0; cursor: pointer; font-size: 1.3rem; color: var(--suave); padding: 0 .2rem; line-height: 1; }
.estrela.marcada { color: #e0a100; }

/* Ficha */
.ficha { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.ficha-foto { background: var(--liña); border-radius: var(--raio); overflow: hidden; min-height: 220px; }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prezo-grande { font-size: 1.8rem; font-weight: 700; margin: .5rem 0; font-variant-numeric: tabular-nums; }
.prezo-grande span { font-size: .95rem; margin-left: .5rem; }
.propiedades { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.propiedades li { background: var(--papel); border: 1px solid var(--liña); border-radius: 6px; padding: .15rem .55rem; font-size: .9rem; }
.accions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.accions form { margin: 0; }
.nota { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.nota textarea { width: 100%; background: var(--papel); border: 1px solid var(--liña); border-radius: 8px; padding: .5rem; }
.bloque { background: var(--papel); border: 1px solid var(--liña); border-radius: var(--raio); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.bloque .avisos { border: 0; }
.descricion { white-space: normal; margin: 0; }
.grafica { width: 100%; max-width: 760px; height: auto; color: var(--acento); display: block; margin-bottom: .75rem; }
.grafica circle { fill: var(--papel); stroke: currentColor; stroke-width: 2; }

/* Táboas */
.taboa { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--liña); border-radius: var(--raio); font-variant-numeric: tabular-nums; }
.taboa th, .taboa td { text-align: left; padding: .5rem .7rem; border-top: 1px solid var(--liña); vertical-align: middle; }
.taboa th { color: var(--suave); font-weight: 600; font-size: .85rem; border-top: 0; }
.taboa tr.retirado { opacity: .55; }
.bloque .taboa { border: 0; }
.miniatura img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; display: block; }
.estado { font-size: .8rem; padding: .1rem .45rem; border-radius: 4px; background: var(--acento-fondo); color: var(--acento); }
.estado-ok { color: var(--baixa); background: color-mix(in srgb, var(--baixa) 14%, transparent); }
.estado-erro, .estado-parcial, .aviso-estado { color: var(--aviso); background: color-mix(in srgb, var(--aviso) 14%, transparent); }

.paxinacion { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 1.25rem; color: var(--suave); }

/* Entrar */
.entrar { max-width: 340px; margin: 12vh auto 0; background: var(--papel); border: 1px solid var(--liña); border-radius: var(--raio); padding: 1.75rem; }
.entrar form { display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; }
.entrar label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--suave); }
.entrar input { background: var(--fondo); border: 1px solid var(--liña); border-radius: 8px; padding: .55rem .65rem; color: var(--tinta); }
.erro { color: var(--suba); }

@media (max-width: 760px) {
  .ficha { grid-template-columns: 1fr; }
  .taboa.favoritos .miniatura, .taboa.favoritos td:last-child, .taboa.favoritos th:last-child { display: none; }
  .taboa { display: block; overflow-x: auto; }
  .barra { gap: .5rem 1rem; }
  .usuario { margin-left: auto; }
  .barra nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; }
  .barra nav a { white-space: nowrap; }
  .prezo-grande span { display: block; margin: .25rem 0 0; }
}
.taboa td, .prezos, .prezo { white-space: nowrap; }
.taboa.favoritos td:nth-child(2), .taboa td:first-child { white-space: normal; }
.escala { display: flex; gap: 1.5rem; color: var(--suave); font-size: .85rem; margin: -.25rem 0 .75rem; }