/* General */
body {
  font-family: "Segoe UI", sans-serif;
  background-color: #f7f7f7;
  color: #1a2b48;
  margin: 0;
  padding: 0;
}

/* Navbar */
header a {
  color: #1a2b48;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none;
}

header a:hover {
  color: #801d17;
}

header .btn-outline {
  border: 1px solid #9e9789;
  color: #cd241c;
  padding: 6px 16px;
  border-radius: 3px;
  transition: all 0.3s;
}

header .btn-outline:hover {
  background: #cd241c;
  color: #fff;
}

/* Botones */
button {
  font-size: 14px;
  border-radius: 3px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background: #1a2b48;
  color: white;
  border: none;
}

.btn-primary:hover {
  background: #cd241c;
}

.btn-outline {
  border: 1px solid #9e9789;
  color: #1a2b48;
  background: transparent;
}

.btn-outline:hover {
  background: #cd241c;
  color: white;
}

/* Tablas */
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

th {
  background: #f2f2f2;
  padding: 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #1a2b48;
}

td {
  padding: 10px 12px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}

tr:nth-child(even) {
  background: #fafafa;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: white;
  padding: 20px;
  width: 400px;
  border-radius: 5px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.modal-content h2 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #1a2b48;
}

.modal-content input,
.modal-content select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
  border-radius: 3px;
}
.chart-container {
  position: relative;
  width: 100%; /* ocupa todo el ancho del contenedor */
  max-width: 600px; /* opcional: límite en pantallas grandes */
  margin: 0 auto; /* centra el gráfico */
  height: auto; /* altura flexible */
  max-height: 250px; /* límite máximo de alto */
  padding: 10px;
}

#graficoMarketing {
  width: 100% !important;
  height: 100% !important;
}
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
.modal .modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  max-width: 520px;
  width: 100%;
}
.modal.active {
  display: flex;
}

/* Footer */
footer a {
  color: white;
  text-align: center;
}
/* --- Header --- */
.main-header {
  background: #fff;
  color: #1a2b48;
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: #1a2b48;
  text-decoration: none;
  font-weight: 700;
}
.nav-links a:hover {
  text-decoration: underline;
}

/* --- Dropdown --- */
.dropdown {
  position: relative;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  color: #1a2b48;
  list-style: none;
  margin: 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  min-width: 200px;
}
.dropdown-menu li {
  margin: 6px 0;
}
.dropdown-menu a {
  color: #1a2b48;
  text-decoration: none;
}
.dropdown:hover .dropdown-menu {
  display: block;
}

/* --- Sidebar --- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100%;
  background: #fff;
  color: #1a2b48;
  padding: 15px;
  transition: transform 0.3s ease;
  overflow-y: auto;
  z-index: 200;
  border-right: 1px solid #ddd;
}
.sidebar.hidden {
  transform: translateX(-100%);
}
.sidebar.active {
  transform: translateX(0);
}
.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-menu a {
  color: #1a2b48;
  text-decoration: none;
  display: block;
  padding: 8px;
  border-radius: 4px;
}
.sidebar-menu a:hover {
  background: #f5f5f5;
}

/* --- Overlay --- */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 150;
  transition: opacity 0.3s ease;
}
.overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* --- Responsive --- */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: #1a2b48;
  font-size: 22px;
  cursor: pointer;
  margin-right: 10px;
}
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .mobile-toggle {
    display: block;
  }
}

/* --- Layout base --- */
body {
  margin: 0;
  font-family: sans-serif;
  color: #1a2b48;
}

section {
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

section h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

/* --- Header --- */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 15px 20px;
  border-bottom: 1px solid #ddd;
}

header img {
  max-height: 300px;
}

header nav {
  display: flex;
  gap: 20px;
}

header nav a {
  text-decoration: none;
  color: #1a2b48;
  font-weight: 700;
}

/* --- Hero --- */
.hero {
  background: #f7f7f7;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: auto;
  text-align: left;
}
.hero img {
  max-width: 100%;
  border-radius: 8px;
}

/* --- Propiedades --- */
#listaPropiedades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1200px;
}
#listaPropiedades div {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  text-align: left;
}

/* --- Contacto --- */
#contacto form {
  max-width: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#contacto input,
#contacto textarea {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

/* --- Botones --- */
.btn-primary {
  background: #1a2b48;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn-outline {
  border: 1px solid #9e9789;
  color: #cd241c;
  padding: 10px 15px;
  border-radius: 4px;
  text-decoration: none;
}

/* --- Footer --- */
footer {
  background: #1a2b48;
  color: #fff;
  text-align: center;
  padding: 30px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  header nav {
    display: none;
  } /* simplificación, luego se puede hacer menú hamburguesa */
}
/* --- Header --- */
.main-header {
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
}

.navbar {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Links */
.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
}
.nav-links a {
  text-decoration: none;
  color: #1a2b48;
  font-weight: 500;
}
.nav-links a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
}
.logo {
  width: 140px;
  height: auto;
}
:root{
      --brand:#1A2B48;
      --accent:#2A6AA9;  /* azul títulos impresión */
      --muted:#555;
      --line:#e5e7eb;
    }
    html{scroll-behavior:smooth;}
    body{max-width:1200px;margin:0 auto;color:var(--brand);}
    .container{padding:40px;}
    .page-title{font-size:28px;font-weight:700;margin-bottom:16px;}
    .section-title{font-size:18px;font-weight:700;margin:18px 0 8px;}
    .muted{color:var(--muted);}
    .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
    .card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px;}
    .row{display:flex;gap:12px;flex-wrap:wrap;align-items:end;}
    .row>*{flex:1 1 240px;}
    .label{font-weight:600;display:block;margin-bottom:4px;}
    input,select,textarea{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:6px;}
    .btns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap;}
    .badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#f4f4f5;font-size:12px;}
    .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Courier New",monospace;}
    table{width:100%;border-collapse:collapse;}
    th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left;}
    th{background:#fafafa;}
    .is-invalid{border-color:#ef4444!important;background:#fff7f7;}
    .text-error{color:#b91c1c;font-size:12px;margin-top:6px;display:none;}

    /* Spinner */
    .spinner-backdrop{position:fixed;inset:0;background:rgba(255,255,255,.85);display:none;align-items:center;justify-content:center;z-index:9999;}
    .spinner-card{background:#fff;padding:18px 22px;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.08);text-align:center;min-width:260px;color:var(--brand);font-weight:600;}
    .spinner{width:28px;height:28px;border-radius:50%;border:3px solid #eee;border-top-color:#B46A55;margin:0 auto 10px auto;animation:spin .9s linear infinite;}
    @keyframes spin{to{transform:rotate(360deg);}}
    .hidden{display:none!important;}

    /* PRINT */
    .print-only{display:none;}
    @page{ size:Letter; margin:20mm; }
    @media print{
      #header, #footer, .no-print{display:none!important;}
      body{max-width:100%;background:#fff;color:#000;font-size:10pt;line-height:1.4em;}
      .card{border:none;}
      thead{display:table-header-group;}
      tr, img{page-break-inside:avoid;}
      .print-only{display:block;text-align:justify;}
      .print-short .hide-on-short{display:none!important;}
      .salto{page-break-before:always;}

      /* Portada */
      .print-cover{page-break-after:always;}
      .print-cover .brand-logo{width:160px;margin-bottom:40px;}
      .print-cover h1{font-size:36px;margin:40px 0 8px;}
      .print-cover h2{font-size:22px;font-weight:400;color:#111;}
      .print-cover .foot{position:fixed;bottom:20mm;left:0;right:0;text-align:center;font-size:12px;}

      /* Títulos azules */
      .print-section h2.title{color:var(--accent);font-size:28px;margin:0 0 14px;}
      .print-section h3.stitle{color:var(--accent);font-size:18px;margin:18px 0 8px;}

      /* Tabla honorarios */
      .print-table{width:100%;border-collapse:collapse;margin-top:10px;}
      .print-table th{background:var(--accent);color:#fff;border:1px solid var(--accent);}
      .print-table td{border:1px solid var(--line);}

      /* Footer numeración */
      .print-footer{
        position:fixed;bottom:10mm;left:0;right:0;
        display:flex;justify-content:center;font-size:12px;color:#333;
      }
      .print-footer .pnum::after{
        content:"Propuesta Comercial | " attr(data-name) " | Página " counter(page) " de " counter(pages);
      }
    }