:root {
  /* Paleta extraída del logo ISI 21 Propiedades */
  --color-primary: #1a1a1a;
  --color-primary-dark: #000000;
  --color-accent: #ac7e1b;
  --color-accent-light: #c9a227;
  --color-light-bg: #fbf7ee;
  --radius: 10px;
}

body {
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  color: #2b2b2b;
  background: #fff;
}

a { text-decoration: none; }

/* --------- Header --------- */
.site-header { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 1030; }
.site-header .navbar-brand img { max-height: 110px; }
.site-header .nav-link { font-weight: 500; color: var(--color-primary-dark); }
.site-header .nav-link.active, .site-header .nav-link:hover { color: var(--color-accent); }

/* --------- Banner / Carrusel --------- */
.hero-banner { position: relative; }
.hero-banner .carousel-item { height: 60vh; min-height: 380px; background-size: cover; background-position: center; }
.hero-banner .carousel-caption { text-align: left; left: 6%; right: auto; bottom: 12%; max-width: 560px; background: rgba(7,42,64,.55); padding: 24px 28px; border-radius: var(--radius); }
.hero-banner .carousel-caption h2 { font-weight: 700; font-size: 2rem; }
.hero-banner .btn-accent { background: var(--color-accent); color: #fff; border: none; }
.hero-banner .btn-accent:hover { background: #8a6415; color: #fff; }

/* --------- Filtros --------- */
.filter-bar { background: var(--color-light-bg); border-radius: var(--radius); padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.05); margin-top: -60px; position: relative; z-index: 5; }
@media (max-width: 767px) { .filter-bar { margin-top: 16px; } }

/* --------- Tarjetas de propiedad --------- */
.property-card { border: none; border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; height: 100%; }
.property-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.property-card .img-wrap { position: relative; padding-top: 66%; overflow: hidden; background: #eee; }
.property-card .img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.property-card .badge-operacion { position: absolute; top: 10px; left: 10px; }
.property-card .badge-destacada { position: absolute; top: 10px; right: 10px; }
.property-card .price { color: var(--color-primary); font-weight: 700; font-size: 1.15rem; }
.property-card .meta span { font-size: .85rem; color: #555; margin-right: 10px; }
.property-card .location { font-size: .85rem; color: #777; }

/* --------- Detalle de propiedad --------- */
.property-gallery-main { border-radius: var(--radius); overflow: hidden; }
.property-gallery-thumbs img { border-radius: 6px; cursor: pointer; height: 70px; object-fit: cover; width: 100%; }
.property-features .feature-item { padding: 10px 0; border-bottom: 1px solid #eee; }
.property-sidebar { background: var(--color-light-bg); border-radius: var(--radius); padding: 20px; }

/* --------- WhatsApp flotante --------- */
.whatsapp-float { position: fixed; bottom: 22px; right: 22px; background: #25d366; color: #fff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 1050; font-size: 30px; transition: transform .15s ease; }
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }

/* --------- Footer --------- */
.site-footer { background: var(--color-primary-dark); color: #e9e2d0; }
.site-footer a { color: #e9e2d0; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer h5 { color: #fff; margin-bottom: 16px; }
.social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); margin-right: 8px; }

/* --------- Panel de administración --------- */
.admin-body { background: #f3f0ea; min-height: 100vh; }
.admin-sidebar { background: var(--color-primary-dark); min-height: 100vh; color: #fff; width: 250px; position: fixed; top: 0; left: 0; padding-top: 20px; }
.admin-sidebar a { display: block; color: #d9cca3; padding: 10px 20px; border-radius: 6px; margin: 2px 10px; }
.admin-sidebar a.active, .admin-sidebar a:hover { background: rgba(255,255,255,.12); color: #fff; }
.admin-sidebar .brand { padding: 0 20px 20px; font-weight: 700; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 10px; }
.admin-content { margin-left: 250px; padding: 24px; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
@media (max-width: 900px) {
  .admin-sidebar { position: static; width: 100%; min-height: auto; }
  .admin-content { margin-left: 0; }
}
.stat-card { border-radius: var(--radius); border: none; box-shadow: 0 2px 10px rgba(0,0,0,.06); padding: 20px; }
.stat-card .value { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); }
.thumb-manager img { height: 90px; width: 120px; object-fit: cover; border-radius: 6px; }
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); }
.login-card { background: #fff; border-radius: var(--radius); padding: 40px; width: 100%; max-width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* --------- Overrides de Bootstrap para usar la paleta del logo (negro + dorado) --------- */
.btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary:hover { background-color: var(--color-primary); border-color: var(--color-primary); }
.text-primary { color: var(--color-accent) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
a { color: var(--color-accent); }
a:hover { color: var(--color-primary); }
.badge.bg-primary { background-color: var(--color-primary) !important; }
.nav-link.active, .site-header .nav-link:hover { color: var(--color-accent) !important; }
.page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); }
.page-link { color: var(--color-primary); }
.form-check-input:checked { background-color: var(--color-accent); border-color: var(--color-accent); }
.eslogan-text { color: var(--color-accent); font-style: italic; }