/* ═══════════════════════════════════════════════════════════════
   DETALLE PROPIEDAD — /bienes-raices/propiedad/:id
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout principal ──────────────────────────────────────────── */
.dp-main { background: var(--cream, #F7F5F0); min-height: 100vh; }

.dp-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--esp-40);
  padding: var(--esp-40) var(--esp-24) var(--esp-80);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* ── Galería ───────────────────────────────────────────────────── */
.dp-gallery { width: 100%; background: #111; position: relative; }

/* Layout: foto principal izquierda, columna de miniaturas derecha */
.dp-gallery-wrap {
  display: flex;
  height: 500px;
  gap: var(--esp-4);
}

.dp-gallery-main-img {
  flex: 2; overflow: hidden; position: relative;
}
.dp-gallery-main-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.dp-gallery-main-img:hover img { transform: scale(1.03); }

.dp-gallery-thumbs {
  flex: 1; display: flex; flex-direction: column; gap: var(--esp-4);
  max-width: 240px;
}
.dp-gallery-thumb {
  flex: 1; overflow: hidden; position: relative; cursor: pointer;
}
.dp-gallery-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.dp-gallery-thumb:hover img { transform: scale(1.05); }

.dp-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.dp-gallery-item:hover img { transform: scale(1.03); }

.dp-gallery-more {
  position: absolute; bottom: 16px; right: 16px;
  background: rgba(0,0,0,.65); color: #fff;
  border: none; padding: var(--esp-8) var(--esp-16); border-radius: var(--radio-8);
  font: 600 14px/1 var(--font-body, Inter, sans-serif);
  cursor: pointer; backdrop-filter: blur(4px);
}
.dp-gallery-more:hover { background: rgba(0,0,0,.85); }

.dp-gallery { position: relative; }

.dp-gallery-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 300px; background: #e8e6e1; color: #8A94A6; gap: var(--esp-12);
}
.dp-gallery-placeholder svg { width: 48px; height: 48px; }

/* ── Breadcrumb ────────────────────────────────────────────────── */
.dp-breadcrumb {
  display: flex; flex-wrap: wrap; gap: var(--esp-6); align-items: center;
  font-size: 13px; color: #8A94A6; margin-bottom: var(--esp-20);
}
.dp-breadcrumb a { color: #8A94A6; text-decoration: none; }
.dp-breadcrumb a:hover { color: var(--navy, #0B1F33); }

/* ── Header de la propiedad ────────────────────────────────────── */
.dp-header { margin-bottom: var(--esp-32); }

.dp-header-badges { display: flex; flex-wrap: wrap; gap: var(--esp-8); margin-bottom: var(--esp-12); }

.dp-badge {
  padding: var(--esp-4) var(--esp-10); border-radius: var(--radio-8);
  font: 600 12px/1.4 var(--font-body, Inter, sans-serif);
  text-transform: uppercase; letter-spacing: .03em;
}
.dp-badge.venta    { background: #E8F4FF; color: #1A56A0; }
.dp-badge.alquiler { background: #F0FFF4; color: #2D7A40; }
.dp-badge-tipo     { background: #F3F0FF; color: #5B21B6; }
.dp-badge-pend     { background: #FFF7E6; color: #B45309; }
.dp-badge-demo     { background: #FFE4E1; color: #C0392B; }

.dp-precio {
  font: 800 clamp(2rem, 4vw, 3rem)/1 var(--font-head, Archivo, sans-serif);
  color: var(--navy, #0B1F33); margin: 0 0 var(--esp-8);
}
.dp-precio-mo { font-size: .45em; font-weight: 600; color: #8A94A6; margin-left: var(--esp-2); }

.dp-direccion {
  display: flex; align-items: center; gap: var(--esp-6);
  color: #8A94A6; font-size: 15px; margin: 0 0 var(--esp-16);
}
.dp-direccion svg { width: 16px; height: 16px; flex-shrink: 0; }

.dp-specs-row {
  display: flex; flex-wrap: wrap; gap: 0; list-style: none;
  margin: 0; padding: 0; border: 1px solid #e2ddd5; border-radius: var(--radio-10); overflow: hidden;
}
.dp-specs-row li {
  flex: 1; min-width: 80px;
  padding: var(--esp-12) var(--esp-16); text-align: center;
  font-size: 14px; color: #4B5563;
  border-right: 1px solid #e2ddd5;
}
.dp-specs-row li:last-child { border-right: none; }
.dp-specs-row li strong { display: block; font-size: 18px; color: var(--navy, #0B1F33); }

/* ── Secciones de contenido ────────────────────────────────────── */
.dp-section { margin-bottom: var(--esp-40); }
.dp-section-title {
  font: 700 18px/1.2 var(--font-head, Archivo, sans-serif);
  color: var(--navy, #0B1F33); margin: 0 0 var(--esp-16);
  padding-bottom: var(--esp-12); border-bottom: 2px solid #e2ddd5;
}

.dp-desc { font-size: 15px; line-height: 1.7; color: #374151; }

/* ── Grid de detalles ─────────────────────────────────────────── */
.dp-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--esp-12); margin: 0;
}
.dp-detail {
  background: #fff; border: 1px solid #e2ddd5;
  border-radius: var(--radio-10); padding: var(--esp-12) var(--esp-16);
}
.dp-detail dt { font-size: 12px; color: #8A94A6; text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--esp-4); }
.dp-detail dd { font: 600 15px/1 var(--font-body, Inter, sans-serif); color: var(--navy, #0B1F33); margin: 0; }

/* ── Mini mapa ─────────────────────────────────────────────────── */
.dp-map-container { height: 320px; border-radius: var(--radio-12); overflow: hidden; border: 1px solid #e2ddd5; }
.dp-map-disclaimer { font-size: 12px; color: #8A94A6; margin: var(--esp-8) 0 0; }

/* Pin de precio en el mapa */
.br-map-pin {
  background: var(--navy, #0B1F33); color: #fff;
  padding: var(--esp-4) var(--esp-10); border-radius: var(--radio-20);
  font: 700 12px/1 var(--font-body, Inter, sans-serif);
  white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ── IDX Attribution ──────────────────────────────────────────── */
.dp-idx-attr {
  font-size: 11px; color: #9CA3AF; line-height: 1.6;
  padding: var(--esp-12); background: #fff; border-radius: var(--radio-8);
  border: 1px solid #e2ddd5;
}

/* ── Sidebar / Contact Card ───────────────────────────────────── */
.dp-col-aside { position: sticky; top: calc(var(--nav-h, 70px) + 20px); }

.dp-contact-card {
  background: #fff; border-radius: var(--card-radius);
  border: 1px solid #e2ddd5;
  padding: var(--esp-24);
  box-shadow: 0 4px 20px rgba(11,31,51,.06);
}

.dp-agent-info { display: flex; align-items: center; gap: var(--esp-12); margin-bottom: var(--esp-16); }
.dp-agent-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy, #0B1F33); color: #fff;
  display: grid; place-items: center;
  font: 700 16px/1 var(--font-head, Archivo, sans-serif);
  flex-shrink: 0;
}
.dp-agent-name { font: 700 15px/1.2 var(--font-head, Archivo, sans-serif); color: var(--navy, #0B1F33); }
.dp-agent-lic  { font-size: 12px; color: #8A94A6; margin-top: var(--esp-2); }
.dp-contact-intro { font-size: 14px; color: #374151; margin: 0 0 var(--esp-20); }

/* ── Formulario ───────────────────────────────────────────────── */
.dp-form-group { margin-bottom: var(--esp-12); }
.dp-form-group label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: var(--esp-4); }
.dp-form-group input,
.dp-form-group textarea {
  width: 100%; padding: var(--esp-10) var(--esp-12);
  border: 1.5px solid #e2ddd5; border-radius: var(--radio-8);
  font: 14px/1.5 var(--font-body, Inter, sans-serif);
  color: var(--navy, #0B1F33); background: var(--cream, #F7F5F0);
  transition: border-color .2s;
  box-sizing: border-box;
}
.dp-form-group input:focus,
.dp-form-group textarea:focus {
  outline: none; border-color: var(--coral, var(--coral));
  background: #fff;
}
.dp-form-group textarea { resize: vertical; min-height: 80px; }

.dp-msg { padding: var(--esp-10) var(--esp-12); border-radius: var(--radio-8); font-size: 13px; margin-bottom: var(--esp-12); }
.dp-msg-error   { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.dp-msg-success { background: #F0FFF4; color: #2D7A40; border: 1px solid #A7F3D0; }

.dp-btn-submit {
  width: 100%; padding: var(--esp-12);
  background: var(--coral, var(--coral)); color: #fff;
  border: none; border-radius: var(--radio-10);
  font: 700 15px/1 var(--font-head, Archivo, sans-serif);
  cursor: pointer; transition: background .2s, opacity .2s;
}
.dp-btn-submit:hover   { background: #e85a39; }
.dp-btn-submit:disabled { opacity: .6; cursor: not-allowed; }

.dp-contact-alt { margin-top: var(--esp-12); }
.dp-wa-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--esp-8);
  padding: var(--esp-10); border-radius: var(--radio-10);
  background: #25D366; color: #fff;
  text-decoration: none; font: 600 14px/1 var(--font-body, Inter, sans-serif);
  transition: background .2s;
}
.dp-wa-btn:hover { background: #1EBE58; }
.dp-wa-btn svg   { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Propiedades similares ─────────────────────────────────────── */
.dp-similares { padding: var(--esp-48) var(--esp-24) var(--esp-80); }
.dp-similares-title {
  font: 700 clamp(1.4rem, 2.5vw, 1.8rem)/1.2 var(--font-head, Archivo, sans-serif);
  color: var(--navy, #0B1F33); margin: 0 0 var(--esp-24);
}

.dp-similares-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--esp-24);
}

.dp-sim-card {
  background: #fff; border-radius: var(--radio-12);
  border: 1px solid #e2ddd5; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.dp-sim-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(11,31,51,.1); }

.dp-sim-img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.dp-sim-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.dp-sim-card:hover .dp-sim-img img { transform: scale(1.04); }
.dp-sim-badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(192,57,43,.85); color: #fff;
  font: 600 11px/1 var(--font-body, Inter, sans-serif);
  padding: var(--esp-2) var(--esp-8); border-radius: var(--radio-4);
}

.dp-sim-body { padding: var(--esp-16); }
.dp-sim-precio { font: 800 18px/1 var(--font-head, Archivo, sans-serif); color: var(--navy, #0B1F33); margin: 0 0 var(--esp-8); }
.dp-sim-specs  { display: flex; gap: var(--esp-12); font-size: 13px; color: #8A94A6; margin: 0 0 var(--esp-6); }
.dp-sim-dir    { font-size: 13px; color: #374151; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── WhatsApp flotante ─────────────────────────────────────────── */
.wa-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.wa-float svg   { width: 30px; height: 30px; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .dp-body { grid-template-columns: 1fr; gap: var(--esp-32); }
  .dp-col-aside { position: static; }
}

@media (max-width: 767px) {
  .dp-gallery-grid { max-height: 280px; }
  .dp-gallery-3,
  .dp-gallery-4,
  .dp-gallery-5  { grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; }
  .dp-gallery-grid.dp-gallery-5 .dp-gallery-item:nth-child(n+4) { display: none; }

  .dp-body { padding: var(--esp-24) var(--esp-16) 60px; }
  .dp-specs-row li { min-width: 60px; padding: var(--esp-10) var(--esp-10); }
  .dp-specs-row li strong { font-size: 15px; }

  .dp-similares { padding: var(--esp-40) var(--esp-16) 60px; }
}

@media (max-width: 767px) {
  .dp-gallery-grid { grid-template-columns: 1fr; }
  .dp-gallery-item { display: none; }
  .dp-gallery-main { display: block; max-height: 240px; }
}

/* ── Sol y orientación ─────────────────────────────────────────── */
/* ES: Sección solar en detalle de propiedad */
/* EN: Solar section in property detail */

.dp-solar-icon-title {
  width: 20px; height: 20px;
  vertical-align: middle;
  margin-right: var(--esp-6);
  margin-top: -2px;
}

/* ES: Fila de tres estadísticas: amanecer, horas de luz, atardecer */
/* EN: Three-stat row: sunrise, daylight hours, sunset */
.dp-solar-row {
  display: flex;
  gap: var(--esp-12);
  margin-bottom: var(--esp-20);
}

.dp-solar-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--radio-12);
  padding: var(--esp-16) var(--esp-10);
  text-align: center;
}

.dp-solar-stat svg { width: 22px; height: 22px; }

.dp-solar-stat--light { background: #FFFBEB; border-color: #FCD34D; }

.dp-solar-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray, #8A94A6);
}

.dp-solar-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy, #0B1F33);
}

/* ES: Líneas descriptivas de dirección */
/* EN: Descriptive direction lines */
.dp-solar-lines {
  display: flex;
  flex-direction: column;
  gap: var(--esp-10);
  margin-bottom: var(--esp-16);
}

.dp-solar-line {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  font-size: .9rem;
  color: var(--navy, #0B1F33);
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--radio-10);
  padding: var(--esp-10) var(--esp-12);
  flex-wrap: wrap;
}

.dp-solar-line svg { width: 16px; height: 16px; flex-shrink: 0; }

.dp-solar-line strong { color: var(--navy, #0B1F33); }

.dp-solar-detail {
  font-size: .78rem;
  color: var(--gray, #8A94A6);
  margin-left: var(--esp-2);
}

/* ES: Nota al pie de cálculo astronómico */
/* EN: Astronomical calculation footnote */
.dp-solar-note {
  font-size: .75rem;
  color: var(--gray, #8A94A6);
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: var(--esp-10);
  margin-top: var(--esp-4);
  line-height: 1.5;
}

@media (max-width: 767px) {
  .dp-solar-row { flex-direction: column; gap: var(--esp-8); }
  .dp-solar-stat { flex-direction: row; justify-content: flex-start; padding: var(--esp-12) var(--esp-12); gap: var(--esp-10); text-align: left; }
  .dp-solar-stat svg { width: 18px; height: 18px; }
}

/* ── Widget solar interactivo S3 ───────────────────────────────── */
/* ES: Layout desktop: SVG izquierda, controles derecha */
/* EN: Desktop layout: SVG left, controls right */

.sw-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--esp-24);
  align-items: start;
  margin-top: var(--esp-20);
  padding-top: var(--esp-16);
  border-top: 1px solid rgba(0,0,0,.06);
}

/* ES: Contenedor del SVG — cuadrado responsivo */
/* EN: SVG container — responsive square */
.sw-visual {
  width: 100%;
}
.sw-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ES: Elementos del SVG — colores y transiciones */
/* EN: SVG elements — colors and transitions */
.sw-orbit {
  fill: none;
  stroke: rgba(0,0,0,.08);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.sw-compass-letter {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  fill: var(--navy, #0B1F33);
}
.sw-compass-tick {
  stroke: rgba(0,0,0,.2);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.sw-side-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  fill: var(--gray, #8A94A6);
  letter-spacing: .03em;
}

/* ES: Fachadas — transición suave de opacidad */
/* EN: House faces — smooth opacity transition */
.sw-face-glow,
.sw-face-edge {
  transition: opacity 0.45s ease;
}

/* ES: Casa estilizada top-down */
/* EN: Stylized top-down house */
.sw-roof-overhang {
  fill: #14293d;
}
.sw-roof-gable {
  fill: #14293d;
  opacity: .8;
}
.sw-house-wall {
  fill: var(--navy, #0B1F33);
}
.sw-ridge {
  stroke: var(--coral, var(--coral));
  stroke-width: 2;
  stroke-linecap: round;
}
.sw-window {
  fill: var(--cream, #F7F5F0);
  opacity: .6;
}
.sw-door {
  fill: #8A94A6;
  opacity: .75;
}

/* ES: Rayo punteado sol→casa */
/* EN: Dashed sun-to-house ray */
.sw-ray {
  stroke-width: 1.5;
  opacity: .55;
  transition: stroke 0.45s ease;
}

/* ── Controles del widget ── */
.sw-controls {
  display: flex;
  flex-direction: column;
  gap: var(--esp-16);
  padding-top: var(--esp-8);
}

/* ES: Etiqueta viva con estado del sol */
/* EN: Live label showing sun state */
.sw-live {
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy, #0B1F33);
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--radio-10);
  padding: var(--esp-10) var(--esp-12);
  min-height: 42px;
  display: flex;
  align-items: center;
  line-height: 1.4;
}

/* ES: Fila del slider con horas de amanecer/atardecer */
/* EN: Slider row with sunrise/sunset times */
.sw-slider-row {
  display: flex;
  align-items: center;
  gap: var(--esp-10);
}
.sw-time-end {
  font-size: .72rem;
  color: var(--gray, #8A94A6);
  white-space: nowrap;
  min-width: 52px;
  font-variant-numeric: tabular-nums;
}
.sw-time-end:last-child { text-align: right; }

.sw-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: var(--radio-4);
  background: linear-gradient(90deg, var(--coral, var(--coral)) 0%, #FCD34D 50%, #FB923C 100%);
  outline: none;
  cursor: pointer;
}
.sw-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FCD34D;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: grab;
  transition: transform .15s, box-shadow .15s;
}
.sw-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.sw-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #FCD34D;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: grab;
}
.sw-slider:focus-visible { outline: 2px solid var(--coral, var(--coral)); outline-offset: 4px; border-radius: var(--radio-4); }

/* ES: Selector de temporada */
/* EN: Season selector */
.sw-seasons {
  display: flex;
  gap: var(--esp-8);
}
.sw-season-btn {
  flex: 1;
  padding: var(--esp-8) var(--esp-10);
  border-radius: var(--radio-8);
  border: 1.5px solid rgba(0,0,0,.12);
  background: #fff;
  color: var(--navy, #0B1F33);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.sw-season-btn:hover { border-color: var(--coral, var(--coral)); }
.sw-season-btn.active {
  background: var(--navy, #0B1F33);
  color: #fff;
  border-color: var(--navy, #0B1F33);
}
.sw-season-btn:focus-visible { outline: 2px solid var(--coral, var(--coral)); outline-offset: 2px; }

/* ES: Nota de invierno (se muestra al seleccionar diciembre) */
/* EN: Winter note (shown when December selected) */
.sw-winter-note {
  font-size: .75rem;
  color: var(--gray, #8A94A6);
  line-height: 1.5;
  border-left: 2px solid #FCD34D;
  padding-left: var(--esp-10);
}

/* ── Responsive mobile ── */
@media (max-width: 767px) {
  /* ES: Mobile: apila SVG arriba, controles abajo */
  /* EN: Mobile: SVG on top, controls below */
  .sw-wrap {
    grid-template-columns: 1fr;
    gap: var(--esp-16);
  }
  .sw-visual { max-width: 320px; margin: 0 auto; }
  .sw-slider { height: 6px; }
  .sw-slider::-webkit-slider-thumb { width: 28px; height: 28px; }
  .sw-slider::-moz-range-thumb     { width: 28px; height: 28px; }
  .sw-seasons { flex-direction: column; }
}