/* Propiedades: listado de arriendos y ventas, y ficha de cada propiedad.
   Los datos llegan desde la app de gestión (Supabase); esta hoja solo
   resuelve cómo se ven. */

/* ── Pestañas Arriendos | Ventas ────────────────────────── */
.prop-tabs{display:inline-flex;gap:4px;margin-top:26px;padding:4px;border:1px solid rgba(213,134,59,.24);border-radius:999px;background:#fff}
.prop-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;color:#6f3d1e;font-family:var(--font-heading);font-size:15px;font-weight:700;text-decoration:none;transition:background .18s ease,color .18s ease}
.prop-tab:hover{background:#fff2e6}
.prop-tab[aria-selected="true"]{background:linear-gradient(178deg,#c8762f 0%,#a75f22 62%,#96521c 100%);color:#fff;box-shadow:0 6px 16px rgba(167,95,34,.25)}
.prop-tab-num{min-width:22px;padding:2px 7px;border-radius:999px;background:rgba(213,134,59,.14);font-size:12px;line-height:1.4;text-align:center}
.prop-tab[aria-selected="true"] .prop-tab-num{background:rgba(255,255,255,.22)}

/* ── Filtros ────────────────────────────────────────────── */
.prop-listado{padding-top:44px}
.prop-filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 26px}
.prop-filtros label{display:grid;gap:5px;min-width:160px;color:#6f6f6f;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.prop-filtros select{min-height:44px;padding:0 36px 0 12px;border:1px solid rgba(127,69,31,.24);border-radius:8px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f451f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center/16px no-repeat;color:#2f2f2f;font:inherit;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;appearance:none;-webkit-appearance:none}
.prop-filtros select:focus-visible{outline:3px solid rgba(213,134,59,.45);outline-offset:1px}
.prop-resultados{margin:0 0 16px;color:#6f6f6f;font-size:14px}
/* Un display propio anula el atributo hidden: sin esto la barra de filtros
   aparecía aunque el script la ocultara. */
.prop-filtros[hidden],.prop-resultados[hidden],.prop-tab-num[hidden],.prop-tabs[hidden]{display:none}

/* ── Estados de carga ───────────────────────────────────── */
.prop-mensaje{max-width:640px;margin:10px auto 0;padding:34px 28px;border:1px dashed rgba(213,134,59,.35);border-radius:14px;background:#fffaf4;text-align:center}
.prop-mensaje h2{margin:0 0 8px;font-size:22px}
.prop-mensaje p{margin:0 0 18px;color:#666}
.prop-mensaje .button{margin:4px}
.prop-cargando{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prop-cargando span{display:block;height:360px;border-radius:14px;background:linear-gradient(90deg,#f6efe6 0%,#fbf6f0 50%,#f6efe6 100%);background-size:200% 100%;animation:prop-brillo 1.3s ease-in-out infinite}
@keyframes prop-brillo{to{background-position:-200% 0}}

/* ── Tarjetas ───────────────────────────────────────────── */
.prop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.prop-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(213,134,59,.18);border-radius:14px;background:#fff;color:inherit;text-decoration:none;box-shadow:var(--u-sh-1,0 4px 12px rgba(58,33,12,.05));transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.prop-card:hover{transform:translateY(-3px);border-color:rgba(213,134,59,.4);box-shadow:0 18px 42px rgba(47,47,47,.1)}
.prop-card:focus-visible{outline:3px solid rgba(213,134,59,.6);outline-offset:3px}
.prop-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#f3ebe1}
.prop-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.prop-card:hover .prop-card-media img{transform:scale(1.03)}
.prop-sin-foto{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(160deg,#fffaf4 0%,#f7e7d5 100%)}
.prop-sin-foto img{width:34%;max-width:120px;height:auto!important;opacity:.35;object-fit:contain!important}
.prop-badges{position:absolute;top:12px;left:12px;display:flex;flex-wrap:wrap;gap:6px}
.prop-badge{padding:5px 10px;border-radius:999px;background:rgba(47,47,47,.82);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.prop-badge.destacada{background:#a75f22}
.prop-badge.reservada{background:#b7791f}
.prop-card-body{display:flex;flex:1;flex-direction:column;gap:6px;padding:18px 20px 20px}
.prop-precio{margin:0;color:#2f2f2f;font-family:var(--font-heading);font-size:22px;font-weight:800;letter-spacing:-.01em}
.prop-precio small{color:#8a8a8a;font-size:13px;font-weight:600;letter-spacing:0}
.prop-card h2{margin:0;font-size:18px;line-height:1.3}
.prop-lugar{margin:0;color:#6f6f6f;font-size:14px}
.prop-datos{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 0;padding:10px 0 0;border-top:1px solid rgba(47,47,47,.07);list-style:none;color:#4f4f4f;font-size:14px}
.prop-datos li{white-space:nowrap}
.prop-datos strong{color:#2f2f2f}
.prop-codigo{margin:auto 0 0;padding-top:10px;color:#8a4c24;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* ── Ficha ──────────────────────────────────────────────── */
.prop-ficha-vacia{padding:24px 0 76px}
.prop-ficha{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);grid-template-areas:"galeria resumen" "detalle resumen";gap:28px 44px;align-items:start;padding:8px 0 76px}
.prop-galeria{grid-area:galeria;min-width:0}
.prop-resumen{grid-area:resumen;position:sticky;top:84px;padding:28px;border:1px solid rgba(213,134,59,.2);border-radius:18px;background:#fff;box-shadow:var(--u-sh-2,0 14px 34px rgba(58,33,12,.1))}
.prop-detalle{grid-area:detalle;min-width:0}

.prop-carrusel-marco{position:relative}
.prop-carrusel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:16px;background:#f3ebe1;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.prop-carrusel::-webkit-scrollbar{display:none}
.prop-carrusel figure{flex:0 0 100%;margin:0;aspect-ratio:3/2;scroll-snap-align:start}
.prop-carrusel img{display:block;width:100%;height:100%;object-fit:cover}
.prop-flecha{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-top:-23px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#7f451f;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.prop-flecha:hover{background:#fff}
.prop-flecha:disabled{opacity:0;pointer-events:none}
.prop-flecha.anterior{left:14px}
.prop-flecha.siguiente{right:14px}
.prop-contador{position:absolute;right:14px;bottom:14px;padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:700}
.prop-miniaturas{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.prop-miniaturas button{flex:0 0 92px;height:68px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#f3ebe1;cursor:pointer;opacity:.7;transition:opacity .15s ease,border-color .15s ease}
.prop-miniaturas button[aria-current="true"],.prop-miniaturas button:hover{border-color:#d5863b;opacity:1}
.prop-miniaturas img{display:block;width:100%;height:100%;object-fit:cover}

.prop-resumen .eyebrow{margin-bottom:8px}
.prop-resumen h1{margin:0 0 8px;font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-.02em}
.prop-resumen .prop-precio{margin-top:16px;font-size:32px}
.prop-gc{margin:4px 0 0;color:#6f6f6f;font-size:14px}
.prop-estado-aviso{margin:14px 0 0;padding:10px 14px;border-radius:10px;background:#fff2e6;color:#7f451f;font-size:14px;font-weight:700}
.prop-acciones{display:grid;gap:10px;margin-top:22px}
.prop-acciones .button{width:100%;gap:8px}
.prop-acciones .button svg{width:18px;height:18px;flex:none}
.prop-compartido{min-height:20px;margin:6px 0 0;color:#4e6b4a;font-size:13px;font-weight:700;text-align:center}
.prop-resumen .prop-codigo{margin-top:14px;padding-top:14px;border-top:1px solid rgba(47,47,47,.08)}

.prop-detalle h2{margin:8px 0 16px;font-size:24px}
.prop-tabla{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:0 0 30px}
.prop-tabla div{padding:14px 16px;border:1px solid rgba(213,134,59,.16);border-radius:12px;background:#fffaf4}
.prop-tabla dt{margin:0 0 3px;color:#8a4c24;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.prop-tabla dd{margin:0;color:#2f2f2f;font-family:var(--font-heading);font-size:18px;font-weight:700}
.prop-caracteristicas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none}
.prop-caracteristicas li{padding:8px 14px;border:1px solid rgba(213,134,59,.26);border-radius:999px;background:#fff;color:#5f5f5f;font-size:14px;font-weight:600}
.prop-descripcion{margin:0;color:#4f4f4f;font-size:17px;line-height:1.7;white-space:pre-line}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:1000px){
  .prop-grid,.prop-cargando{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prop-cargando span:nth-child(3){display:none}
  .prop-ficha{grid-template-columns:minmax(0,1fr);grid-template-areas:"galeria" "resumen" "detalle";gap:24px}
  .prop-resumen{position:static}
}
@media(max-width:620px){
  .prop-tabs{display:flex;width:100%}
  .prop-tab{flex:1;justify-content:center;padding:0 12px}
  .prop-grid,.prop-cargando{grid-template-columns:1fr}
  .prop-cargando span:nth-child(2){display:none}
  .prop-filtros{display:grid;grid-template-columns:1fr 1fr}
  .prop-filtros label{min-width:0}
  .prop-carrusel{border-radius:12px}
  .prop-flecha{width:40px;height:40px;margin-top:-20px}
  .prop-resumen{padding:22px}
  .prop-resumen .prop-precio{font-size:28px}
  .prop-miniaturas button{flex-basis:76px;height:56px}
}
@media(prefers-reduced-motion:reduce){
  .prop-card,.prop-card-media img,.prop-tab{transition:none}
  .prop-cargando span{animation:none}
}

/* ── Modo noche ─────────────────────────────────────────── */
html[data-theme="dark"] .prop-tabs{background:#1f1f1f;border-color:rgba(213,134,59,.3)}
html[data-theme="dark"] .prop-tab{color:#f0b879}
html[data-theme="dark"] .prop-tab:hover{background:#2a2119}
html[data-theme="dark"] .prop-tab[aria-selected="true"]{color:#fff}
html[data-theme="dark"] .prop-filtros label,html[data-theme="dark"] .prop-resultados{color:#bdb5aa}
html[data-theme="dark"] .prop-filtros select{background-color:#1f1f1f;border-color:rgba(213,134,59,.3);color:#f1eee9}
html[data-theme="dark"] .prop-mensaje{background:#1a1510;border-color:rgba(213,134,59,.3)}
html[data-theme="dark"] .prop-mensaje p{color:#c9c2b8}
html[data-theme="dark"] .prop-cargando span{background:linear-gradient(90deg,#1f1f1f 0%,#2a2520 50%,#1f1f1f 100%);background-size:200% 100%}
html[data-theme="dark"] .prop-card,html[data-theme="dark"] .prop-resumen{background:#1f1f1f;border-color:rgba(213,134,59,.22);box-shadow:none}
html[data-theme="dark"] .prop-card-media,html[data-theme="dark"] .prop-carrusel,html[data-theme="dark"] .prop-miniaturas button{background:#2a2520}
html[data-theme="dark"] .prop-sin-foto{background:linear-gradient(160deg,#241c14 0%,#2e2218 100%)}
html[data-theme="dark"] .prop-sin-foto img{filter:invert(1);opacity:.22}
html[data-theme="dark"] .prop-precio,html[data-theme="dark"] .prop-datos strong,html[data-theme="dark"] .prop-tabla dd{color:#f5f1ea}
html[data-theme="dark"] .prop-lugar,html[data-theme="dark"] .prop-gc,html[data-theme="dark"] .prop-datos,html[data-theme="dark"] .prop-descripcion{color:#c9c2b8}
html[data-theme="dark"] .prop-datos,html[data-theme="dark"] .prop-resumen .prop-codigo{border-top-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .prop-codigo,html[data-theme="dark"] .prop-tabla dt{color:#f0b879}
html[data-theme="dark"] .prop-tabla div{background:#1a1510;border-color:rgba(213,134,59,.22)}
html[data-theme="dark"] .prop-caracteristicas li{background:#1f1f1f;border-color:rgba(213,134,59,.3);color:#d8d2c8}
html[data-theme="dark"] .prop-estado-aviso{background:#2a2119;color:#f0b879}
html[data-theme="dark"] .prop-compartido{color:#9fc39a}