/* Paleta inspirada en el perfil de Walter Solano: mar Caribe, vegetación y sol. */
:root {
  --blue: #08758a;
  --line: #d9e7e4;
  --muted: #58747a;
  color: #143b44;
  background: #f6faf8;
}

body { background: #f6faf8; }
::selection { background: #b6e9e4; color: #073747; }
button:focus-visible, a:focus-visible { outline-color: #e2b852; }
input, textarea, select { border-color: #cbdedb; color: #143b44; background: #fffefd; }
input:focus, textarea:focus, select:focus { outline-color: #22a9b7; border-color: #22a9b7; }
h1, h2, h3 { color: #103d47; }

.sidebar {
  background: radial-gradient(circle at -35% 6%, #16839a80, transparent 38%),
              linear-gradient(165deg, #06445a 0%, #073747 53%, #092c3b 100%);
  color: #edf9f7;
  border-right: 1px solid #1e7180;
}
.sidebar::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  pointer-events: none;
  background: radial-gradient(ellipse at 120% 100%, #17785d55, transparent 64%);
}
.sidebar > * { position: relative; }
.brand { padding-bottom: 30px; }
.brand b {
  background: linear-gradient(145deg, #0cb5c7, #08758a 65%, #176e62);
  border: 1px solid #8de3df66;
  box-shadow: 0 6px 18px #001b2644;
}
.brand small, .sidebar nav button, .sidebar footer p, .sidebar footer small { color: #b8d9da; }
.workspace-label {
  color: #f8fcf9;
  background: #ffffff12;
  border: 1px solid #8fd4d532;
  border-left: 3px solid #edc160;
}
.sidebar nav button { transition: background .16s ease, color .16s ease; }
.sidebar nav button:hover { color: #fff; background: #ffffff13; }
.sidebar nav button.active {
  color: #fff;
  background: #1597a047;
  box-shadow: inset 3px 0 #ecc461;
}
.sidebar footer { border-top-color: #81c3c334; }

.topbar {
  border-top: 3px solid #e7bd5c;
  background: #fffefa;
  border-bottom-color: var(--line);
  box-shadow: 0 2px 12px #0b5f6710;
}
.topbar strong { color: #0d4550; letter-spacing: -.2px; }
main { background: radial-gradient(circle at 100% 0, #e2f3ed 0, transparent 38%); }
.heading h1 { color: #0b4050; font-weight: 800; }
.heading h1::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  background: #e7bd5c;
}
.heading p { color: var(--muted); }

.primary {
  background: #08758a;
  border-color: #08758a;
  box-shadow: 0 3px 10px #08647722;
}
.primary:hover { background: #06596b; border-color: #06596b; }
.secondary { color: #096277; border-color: #bdd9d6; background: #fffefd; }
.secondary:hover { background: #e9f5f2; border-color: #7cbbb8; }
.demo-bar, .integration-note {
  background: #f2f8f2;
  border-color: #d4e5dc;
}
.integration-note { border-left: 4px solid #e7bd5c; }

.inbox {
  background: #fff;
  border-color: #d8e7e2;
  box-shadow: 0 12px 34px #0b4a5610;
}
.contacts { background: #fffefa; }
.contact { border-bottom-color: #e9efec; background: #fffefa; }
.contact:hover { background: #f2f9f5; }
.contact.active { background: #e9f5f1; box-shadow: inset 3px 0 #16a4ad; }
.avatar { color: #07596c; background: #d6efea; border: 1px solid #b5dcd4; }
.stage, .tag { background: #def2e9; color: #125f50; border-radius: 7px; font-weight: 650; }
.conversation { background: linear-gradient(155deg, #f7faf8, #edf6f2); }
.chat-head, .composer { background: #fffefa; }
.bubble { border-color: #dae8e3; box-shadow: 0 2px 7px #0b4a5609; }
.bubble.out { background: #dcf3ee; border-color: #b7e2d8; }
.bubble.note { background: #fff7e5; border-color: #ebd9a8; }
.context { background: #fffefa; }
.empty h2 { color: #0e4851; }
.empty::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 62% 38%, #f2cc74 0 25%, transparent 26%),
              linear-gradient(155deg, #b9e4de 0 49%, #168c91 50% 70%, #14705e 71%);
  box-shadow: 0 0 0 5px #e9f4ed;
}

.kanban-col { background: #f1f7f3; border-color: #d9e8de; }
.lead-card, .property-card, .appointment, .metric, .report, .connection-card {
  border-color: #dbe8e1;
  box-shadow: 0 6px 20px #0a4c5510;
}
.link { color: #0d4550; }
.filters button { color: #43686d; background: #fffefa; }
.filters button.active { background: #08758a; border-color: #08758a; }
.property-cover {
  position: relative;
  overflow: hidden;
  min-height: 106px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  color: #fff;
  text-shadow: 0 1px 3px #04374699;
  background: linear-gradient(180deg, #0737479c, transparent 75%),
              radial-gradient(circle at 77% 33%, #f3cf73 0 16px, transparent 17px),
              radial-gradient(ellipse at 80% 140%, #1c755e 0 43%, transparent 43.5%),
              radial-gradient(ellipse at 7% 140%, #0c6980 0 52%, transparent 52.5%),
              linear-gradient(150deg, #a8dfe5, #28abc5 60%, #087e9a);
}
.property-cover .tag { color: #174a42; background: #f4d887; text-shadow: none; white-space: nowrap; }
.property-card strong, .metric strong { color: #08758a; }
.metric:nth-child(2) strong { color: #13785e; }
.metric:nth-child(4) strong { color: #b47824; }
.bar-row > div { background: #e5f0ea; }
.bar-row i { background: linear-gradient(90deg, #0f9caf, #54b68c); }

dialog { color: #143b44; border-color: #cfe4dc; background: #fffefa; box-shadow: 0 24px 80px #031f2e42; }
dialog::backdrop { background: #032e40bd; backdrop-filter: blur(4px); }
dialog header button { color: #0c5868; background: #e8f3ef; }
#toast { background: #073d4c; box-shadow: 0 8px 30px #052d3a38; }

#login {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: url('../assets/login-lote-aereo.webp') center center / cover no-repeat;
  box-shadow: none;
}
#login::backdrop { background: #174dcc; backdrop-filter: none; }
.login-layout { display: grid; grid-template-columns: 45% 55%; min-height: 100dvh; }
.login-blue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 42px 7%;
  background: #174dcc;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 460px);
  margin-bottom: 26px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1.2px;
}
.login-brand small { display: block; color: #dfebff; font-weight: 450; letter-spacing: 0; }
.login-brand-mark {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 13px;
  background: #fff;
  color: #174dcc;
  font-size: 21px;
  letter-spacing: -.7px;
  box-shadow: 0 8px 25px #092e902e;
}
#login-form {
  width: min(100%, 460px);
  padding: 38px;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 24px 60px #08277b33;
}
#login-form > h1 { font-size: 28px; color: #132f60; }
#login-form > p { color: #64748b; }
#login-form label { color: #263f66; font-weight: 650; }
#login-form input:focus { outline-color: #376ce5; border-color: #376ce5; }
#login-form .primary { margin-top: 7px; background: #174dcc; border-color: #174dcc; }
#login-form .primary:hover { background: #103ba4; border-color: #103ba4; }
.sandbox-link { display: block; margin-top: 17px; color: #174dcc; font-size: 13px; font-weight: 750; text-align: center; text-decoration: underline; }
.sandbox-link:hover { color: #103ba4; }
.legal-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; }
.legal-links a { color: #516584; }
.legal-links a:hover { color: #174dcc; }
.login-photo {
  position: relative;
  min-height: 100dvh;
  background: linear-gradient(180deg, transparent 60%, #051b3c85);
}
.login-photo span {
  position: absolute;
  right: 44px;
  bottom: 34px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px #072141a8;
}

.mobile-nav { background: #fffefaf5; border-top-color: #cce2d9; }
.mobile-nav button.active { color: #076b7c; background: #e2f3ed; }

.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-large { width: 58px; height: 58px; font-size: 17px; }
.profile-handle { display: block; color: #58747a; }
.instagram-profile, .facebook-profile { margin: 14px 0 20px; padding: 15px; background: #f3f8f6; border: 1px solid #d7e8df; border-radius: 12px; }
.facebook-profile { background: #f3f7ff; border-color: #dce6fa; }
.profile-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.profile-heading strong { display: block; overflow-wrap: anywhere; }
.profile-heading small { display: block; overflow-wrap: anywhere; }
.profile-details { margin: 16px 0 0; display: grid; grid-template-columns: 1fr; gap: 11px; }
.profile-details div { min-width: 0; }
.profile-details dt { font-size: 11px; color: #58747a; }
.profile-details dd { margin: 2px 0 0; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.profile-unavailable { color: #79571d !important; }

/* Conversaciones y leads: superficie tranquila, controles compactos. */
.icon { display: inline-block; flex: none; vertical-align: middle; }
.sidebar nav button { display: flex; align-items: center; gap: 12px; }
.heading-action { gap: 8px; }
.inbox { grid-template-columns: 300px minmax(0, 1fr) 260px; min-height: 540px; height: calc(100dvh - 370px); box-shadow: none; border-color: #e0e9e7; }
.contacts { background: #fff; }
.contact { align-items: flex-start; gap: 11px; padding: 15px 16px; background: #fff; border-bottom: 1px solid #eef2f1; }
.contact:hover { background: #f8fbfa; }
.contact.active { background: #f0f8f6; box-shadow: inset 2px 0 #08758a; }
.contact .avatar { width: 40px; height: 40px; }
.contact-copy { display: block; flex: 1; min-width: 0; text-align: left; }
.contact-top { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; }
.contact-top strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 700; }
.contact-top time { flex: none; color: #84949a; font-size: 10px; }
.contact-preview { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 3px; color: #5a6f74; font-size: 12px; }
.contact-meta { display: flex; gap: 5px; margin-top: 5px; color: #789096; font-size: 11px; }
.conversation { background: #f7faf9; }
.chat-head { gap: 10px; min-height: 67px; padding: 11px 15px; background: #fff; }
.chat-head .avatar { width: 38px; height: 38px; }
.chat-head .chat-person { flex: 1 1 auto; min-width: 0; }
.chat-person strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
.chat-person small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.chat-head .chat-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.mobile-back.icon-action { display: none; }
.header-action, .icon-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 6px 9px; border: 1px solid #e0eae7; border-radius: 9px; color: #315b63; background: #fff; font-size: 11px; font-weight: 650; }
.header-action:hover, .icon-action:hover { background: #edf7f4; border-color: #bcd8d0; }
.icon-action { width: 34px; padding: 0; }
.chat-body { gap: 11px; padding: 22px 20px; background: #f7faf9; }
.bubble { max-width: min(78%, 560px); padding: 9px 13px; border: 1px solid #e7efec; border-radius: 15px 15px 15px 4px; background: #fff; box-shadow: none; font-size: 13px; }
.bubble.out { border-color: #d2eae2; border-radius: 15px 15px 4px 15px; background: #e7f5f0; }
.bubble.note { border-color: #e9e4d2; background: #f9f7ef; }
.bubble small { margin-top: 4px; font-size: 10px; color: #809498; }
.composer { padding: 12px 16px 11px; background: #fff; }
.composer-title, .compose-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.composer-title { margin-bottom: 7px; }
.composer-title strong { color: #3a6770; font-size: 11px; font-weight: 700; }
.composer-title small { font-size: 10px; }
.composer > .compose-input { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 4px; margin-top: 0; border: 1px solid #cddfda; border-radius: 14px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.compose-input:focus-within { border-color: #0797a3; box-shadow: 0 0 0 3px #0797a317; }
.compose-input textarea { flex: 1 1 auto; width: auto; min-width: 0; min-height: 46px; max-height: 140px; padding: 12px 10px 10px 13px; resize: none; border: 0; outline: 0; background: transparent; font-size: 13px; line-height: 1.45; }
.compose-input textarea:focus { border: 0; outline: 0; }
.send-button { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin: 5px; padding: 0; border: 0; border-radius: 10px; color: #fff; background: #08758a; }
.send-button:hover { background: #065c6d; }
.composer > .compose-meta { flex-wrap: nowrap; margin-top: 7px; }
.compose-meta > small { flex: none; color: #84949a; font-size: 10px; }
.compose-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 3px; }
.text-action { display: inline-flex; align-items: center; gap: 4px; min-height: 29px; padding: 4px 6px; border: 0; border-radius: 7px; color: #51757b; background: transparent; font-size: 11px; }
.text-action:hover { color: #075c6a; background: #edf7f4; }
.context { padding: 16px; background: #fff; }
.context h3 { font-size: 14px; }
.context p { margin: 10px 0; font-size: 12px; }
.context label { margin-top: 10px; font-size: 11px; }
.context select { min-height: 38px; padding: 7px 10px; font-size: 12px; }
.context .primary, .context .secondary { min-height: 36px; font-size: 11px; }
.instagram-profile, .facebook-profile { margin: 11px 0 14px; padding: 11px; border: 1px solid #e1eae6; background: #f8fbf9; }
.facebook-profile { background: #f8faff; border-color: #e3eaf3; }
.profile-heading .avatar-large { width: 46px; height: 46px; }
.profile-heading strong { font-size: 12px; }
.profile-heading small { font-size: 11px; }
.profile-expand { margin-top: 10px; border-top: 1px solid #e1eae6; }
.profile-expand summary { display: flex; justify-content: space-between; align-items: center; padding-top: 9px; color: #356c75; cursor: pointer; list-style: none; font-size: 11px; font-weight: 650; }
.profile-expand summary::-webkit-details-marker { display: none; }
.profile-expand[open] summary .icon { transform: rotate(90deg); }
.profile-details { margin-top: 11px; gap: 8px; }
.profile-details dt { font-size: 10px; }
.profile-details dd { font-size: 11px; }
.filters { gap: 6px; margin-bottom: 14px; }
.filters { scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-color: #e0e9e6; color: #527077; background: #fff; font-size: 12px; }
.filters button span { color: #84979a; font-size: 11px; }
.filters button.active { color: #075b68; background: #e8f5f1; border-color: #b7dcd2; }
.filters button.active span { color: #266e70; }
.lead-list { overflow: hidden; border: 1px solid #e0e9e6; border-radius: 13px; background: #fff; }
.lead-list-head, .lead-row { display: grid; grid-template-columns: minmax(0,1fr) 145px 155px 34px; align-items: center; gap: 15px; }
.lead-list-head { padding: 9px 16px; color: #84979a; background: #f8faf9; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.lead-row { min-height: 77px; padding: 11px 16px; border-top: 1px solid #edf2f0; }
.lead-row:hover { background: #fbfdfc; }
.lead-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lead-identity > div { min-width: 0; }
.lead-identity small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.lead-name { display: block; max-width: 100%; padding: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 0; color: #153f49; background: none; font-size: 13px; font-weight: 700; text-align: left; }
.lead-name:hover { color: #08758a; text-decoration: underline; }
.lead-row select { min-height: 34px; padding: 5px 8px; border-color: #e1e9e7; background: #f9fbfa; font-size: 11px; }
.lead-budget { color: #315e66; font-size: 12px; font-weight: 650; white-space: nowrap; }
.lead-open { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; color: #68838a; background: transparent; }
.lead-open:hover { color: #08758a; background: #edf7f4; }
@media (max-width: 1250px) {
  .inbox { grid-template-columns: 290px minmax(0,1fr); }
}

@media (max-width: 767px) {
  .topbar { border-top-width: 2px; }
  .inbox { height: auto; min-height: 300px; }
  .inbox.detail-open { height: calc(100dvh - 64px); min-height: 0; box-shadow: none; }
  .mobile-nav .icon { margin-bottom: 2px; }
  .contact { min-height: 76px; padding: 14px; }
  .chat-head { padding: 9px 11px; }
  .mobile-back.icon-action { display: inline-flex; }
  .chat-head .chat-head-actions { gap: 4px; }
  .chat-head-actions .header-action { width: 34px; padding: 0; }
  .chat-head-actions .header-action span { display: none; }
  .chat-body { padding: 16px 12px; }
  .bubble { max-width: 86%; }
  .composer { padding: 10px 11px calc(10px + env(safe-area-inset-bottom)); }
  .composer-title small { display: none; }
  .compose-meta > small { display: none; }
  .compose-actions { width: 100%; justify-content: flex-start; }
  .lead-list-head { display: none; }
  .lead-row { grid-template-columns: minmax(0,1fr) auto 32px; grid-template-areas: 'identity identity open' 'stage budget budget'; gap: 9px; padding: 13px; }
  .lead-identity { grid-area: identity; }
  .lead-row select { grid-area: stage; max-width: 150px; }
  .lead-budget { grid-area: budget; justify-self: end; }
  .lead-open { grid-area: open; }
}

@media (max-width: 900px) {
  .login-layout { display: block; min-height: 100dvh; }
  .login-photo { display: none; }
  .login-blue {
    min-height: 100dvh;
    justify-content: center;
    padding: 36px 20px;
    background: linear-gradient(180deg, #174dcc75, #174dcc9e);
  }
  .login-brand { margin-bottom: 20px; text-shadow: 0 2px 9px #0b2c6bb3; }
  #login-form { padding: 28px 26px; }
}