/* ---------------------------------------------------------------------------
   Piezas que el bosquejo no tenía porque eran estáticas: filtros del listado,
   paginación, estados vacíos y detalles de la ficha.
   Usa las mismas variables que site.css / ficha.css.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   MARCO COMÚN — tokens, reset, tipografía, cabecera, pie, botones flotantes y
   botones base. Consolidado aquí porque header.php carga esta hoja en TODAS las
   páginas (después de la base site.css / ficha.css). Antes estos estilos vivían
   duplicados en site.css y ficha.css y divergían al tocar uno solo.
   =========================================================================== */
  :root{
    color-scheme:light;
    --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F6F0; --band:#F1F0E7;
    --gutter:#EFEFE0;
    --ink:#003468; --body:#333333; --muted:#7A7A6E; --line:#E7E5D8; --line-2:#D8D6C6;
    --navy:#003366; --navy-2:#00284F; --navy-line:#12457c;
    --gold:#F1A02B; --gold-ink:#A9700C; --gold-soft:#FBEBCE;
    --wa:#22B457; --wa-ink:#0E7A37;
    --shadow:0 1px 2px rgba(0,42,80,.05), 0 10px 26px -14px rgba(0,42,80,.18);
    --shadow-lg:0 26px 60px -30px rgba(0,42,80,.4);
    --r:12px; --r-sm:8px;
    --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
    --wrap:1200px;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--ground);color:var(--body);font-family:var(--sans);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;}
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);margin:0;line-height:1.15;font-weight:800;letter-spacing:-.015em;text-wrap:balance;}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;}
  .tnum{font-variant-numeric:tabular-nums;}
  .eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.15em;font-size:11.5px;font-weight:700;color:var(--gold-ink);margin:0 0 14px;}
  .eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);flex-shrink:0;}

  /* Cabecera (logo integrado en la barra del menú) */
  header.top{background:#fff;position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line);box-shadow:var(--shadow);}
  .top .wrap{display:flex;align-items:center;gap:18px;height:98px;}
  .brand{display:flex;align-items:center;flex-shrink:0;}
  .brand img{height:80px;width:auto;}
  nav.links{display:flex;align-items:center;gap:2px;margin-left:auto;}
  nav.links a{color:var(--ink);font-size:14px;font-weight:600;padding:10px 12px;position:relative;transition:color .15s;}
  nav.links a::after{content:"";position:absolute;left:12px;right:100%;bottom:3px;height:2.5px;background:var(--gold);transition:right .22s ease;}
  nav.links a:hover{color:var(--gold-ink);} nav.links a:hover::after,nav.links a.on::after{right:12px;}
  nav.links a.on{color:var(--gold-ink);}
  .top .wa{margin-left:12px;display:inline-flex;align-items:center;gap:8px;background:var(--wa);color:#fff;font-weight:700;font-size:14px;padding:11px 17px;border-radius:999px;flex-shrink:0;}
  .top .wa:hover{filter:brightness(1.06);} .top .wa svg{width:18px;height:18px;}
  .burger{display:none;margin-left:6px;background:none;border:0;cursor:pointer;padding:8px;}
  .burger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;border-radius:2px;}
  @media(max-width:1000px){ nav.links{display:none;} .top .wa{margin-left:auto;} .top .wa .lbl{display:none;} .top .wa{padding:11px;} .burger{display:block;} }
  @media(max-width:560px){ .brand img{height:60px;} .top .wrap{height:82px;} }

  /* Botones compartidos */
  .btn-wa{display:inline-flex;align-items:center;gap:8px;background:var(--wa);color:#fff;font-weight:700;font-size:14.5px;padding:13px 22px;border-radius:var(--r-sm);transition:.15s;}
  .btn-wa:hover{filter:brightness(1.06);transform:translateY(-1px);} .btn-wa svg{width:18px;height:18px;flex-shrink:0;}
  .btn-outline{display:inline-block;border:1.5px solid var(--navy);color:var(--navy);font-weight:700;font-size:14.5px;padding:13px 28px;border-radius:var(--r-sm);transition:.15s;}
  .btn-outline:hover{background:var(--navy);color:#fff;}

  /* Pie */
  footer{background:var(--navy);color:#BCC9DC;padding:54px 0 24px;margin-top:0;}
  .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;}
  footer h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.11em;margin:0 0 15px;font-weight:800;}
  footer a{color:#BCC9DC;font-size:13.5px;display:block;padding:5px 0;} footer a:hover{color:var(--gold);}
  .fbrand img{height:58px;background:#fff;padding:8px 12px;border-radius:8px;margin-bottom:14px;}
  .fbrand p{font-size:13.5px;line-height:1.7;margin:0 0 14px;color:#9FB0C8;}
  .fcontact div{font-size:13.5px;padding:4px 0;color:#D3DEEC;}
  .fbar{border-top:1px solid var(--navy-line);margin-top:42px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#8093AE;}
  @media(max-width:820px){ .fgrid{grid-template-columns:1fr 1fr;gap:28px;} }
  @media(max-width:480px){ .fgrid{grid-template-columns:1fr;} }

  /* Botones flotantes (WhatsApp + volver arriba) */
  .wa-float{position:fixed;right:20px;bottom:80px;z-index:60;width:50px;height:50px;border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px -6px rgba(34,180,87,.65);opacity:.8;transition:transform .18s,opacity .18s;}
  .wa-float:hover{transform:scale(1.07);opacity:1;} .wa-float svg{width:26px;height:26px;color:#fff;}
  .wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--wa);animation:pulse 2.4s ease-out infinite;z-index:-1;}
  @keyframes pulse{0%{transform:scale(1);opacity:.5;}100%{transform:scale(1.7);opacity:0;}}
  .to-top{position:fixed;right:20px;bottom:20px;z-index:60;width:50px;height:50px;border-radius:50%;background:var(--navy);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -8px rgba(0,42,80,.6);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s,transform .22s,background .15s;}
  .to-top.show{opacity:1;visibility:visible;transform:none;}
  .to-top:hover{background:var(--navy-2);} .to-top svg{width:22px;height:22px;}
  @media(prefers-reduced-motion:reduce){.wa-float::before{animation:none;} .slide{transition:none;}}
  :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px;}

/* --- Cabecera y filtros del listado --- */
.listado-head { padding-bottom: 0; }

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-top: 22px;
}
.filtros .field { flex: 1 1 170px; min-width: 150px; display: flex; flex-direction: column; gap: 6px; }
.filtros label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.filtros select,
.filtros input[type="text"] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--body);
  font: inherit;
  font-size: 14px;
}
.filtros select:focus,
.filtros input[type="text"]:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.filtros .btn-search { flex: 0 0 auto; }
.filtros .limpiar {
  flex: 0 0 auto;
  align-self: center;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  padding-bottom: 10px;
}
.filtros .limpiar:hover { color: var(--ink); }

/* --- Paginación --- */
.paginacion {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 34px;
}
.paginacion a,
.paginacion span {
  min-width: 38px;
  padding: 9px 12px;
  text-align: center;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.paginacion a {
  border: 1px solid var(--line-2);
  color: var(--ink);
  background: var(--surface);
}
.paginacion a:hover { border-color: var(--navy); background: var(--band); }
.paginacion span.on { background: var(--navy); color: #fff; font-weight: 700; }
.paginacion span.sep { color: var(--muted); min-width: 0; padding: 9px 2px; }

/* --- Estado vacío --- */
.vacio {
  text-align: center;
  padding: 46px 20px;
  color: var(--muted);
}
.vacio h3 { color: var(--ink); font-size: 22px; margin-bottom: 8px; }
.vacio .cta-row { justify-content: center; margin-top: 20px; }

/* --- Tarjeta sin fotografía --- */
.card .ph .sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 40px;
  background: var(--band);
  color: var(--muted);
}

/* --- Precio de arriendo --- */
.por-mes { font-size: .62em; font-weight: 600; color: var(--muted); }

/* ---------------------------------------------------------------------------
   Indicadores económicos del día (UF, Dólar, UTM, IPC).
   Se muestran SOLO en escritorio; en móvil/tablet se ocultan.
   --------------------------------------------------------------------------- */
.indband { display: none; }

@media (min-width: 1000px) {
  .indband { display: block; margin-top: 20px; }
  .indband .ind-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(0, 51, 102, .10);   /* azul suave de la familia del navy (botones) */
    border: 1px solid rgba(0, 51, 102, .18);
    border-radius: var(--r-sm);
    padding: 7px 20px;
    color: var(--ink);
  }
  /* Menos aire entre la banda y la sección "Propiedades disponibles". */
  .indband + .block { padding-top: 30px; }
  .ind-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-right: 18px;
    border-right: 1px solid rgba(0, 51, 102, .18);
    flex: 0 0 auto;
  }
  .ind-eyebrow {
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
  }
  .ind-fecha { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .ind-grid {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
  }
  .ind {
    flex: 1 1 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    padding: 1px 14px;
  }
  /* Separador vertical entre cada indicador. */
  .ind + .ind { border-left: 1px solid rgba(0, 51, 102, .18); }
  .ind-k {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
  }
  .ind-k small { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .8; }
  .ind-v {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
}

/* --- Mapa real (iframe) en la ficha --- */
.map.map-real { padding: 0; overflow: hidden; }
.map.map-real iframe { display: block; }

/* ---------------------------------------------------------------------------
   La ficha (ficha.css) nombra distinto algunas piezas de la tarjeta que la
   portada. Como ahora ambas usan el mismo inc/card.php, se igualan acá.
   --------------------------------------------------------------------------- */
.block.alt .card .badge-op {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
}
.block.alt .card .badge-op.rent { background: var(--gold); color: var(--navy-2); }
.block.alt .card .mas {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.block.alt .card .mas:hover { color: var(--gold-ink); }
.block.alt .card .loc { color: var(--muted); font-size: 13px; margin: 2px 0 10px; }

/* ---------------------------------------------------------------------------
   Filtros colapsables (checkbox + label, sin JavaScript).
   En escritorio se ven siempre; en móvil quedan tras un botón para que las
   propiedades no queden empujadas fuera de la pantalla.
   --------------------------------------------------------------------------- */
.filtros-check { position: absolute; opacity: 0; pointer-events: none; }
.filtros-toggle { display: none; }

@media (max-width: 760px) {
  .filtros-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    margin-top: 22px;
    padding: 13px 18px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    color: var(--ink);
    font-weight: 700;
    font-size: 14px;
    box-shadow: var(--shadow);
  }
  .filtros-check:focus-visible + .filtros-toggle { outline: 2px solid var(--gold); outline-offset: 2px; }
  .filtros-check:checked + .filtros-toggle {
    border-radius: var(--r) var(--r) 0 0;
    border-bottom-color: transparent;
  }
  .filtros-check:not(:checked) ~ .filtros { display: none; }
  .filtros {
    margin-top: 0;
    border-radius: 0 0 var(--r) var(--r);
    flex-direction: column;
    align-items: stretch;
  }
  .filtros .field { flex: 1 1 auto; }
  .filtros .btn-search { width: 100%; justify-content: center; }
  .filtros .limpiar { align-self: flex-start; padding-bottom: 0; }
  .paginacion a, .paginacion span { min-width: 34px; padding: 8px 9px; font-size: 13px; }
}