:root {
  color-scheme: light;
  --bg: #eef3f8;
  --bg-soft: #f6f8fb;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --text: #172231;
  --muted: #68788c;
  --border: #d7e1eb;
  --border-strong: #bdcbd9;
  --accent: #243f86;
  --accent-2: #248fd3;
  --accent-soft: #eaf4fc;
  --danger: #a93238;
  --danger-soft: #f9ecee;
  --success: #2f7d56;
  --success-soft: #edf7f2;
  --warning: #b36b18;
  --shadow-sm: 0 8px 22px rgba(24, 38, 55, .07);
  --shadow-md: 0 18px 45px rgba(24, 38, 55, .11);
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", Arial, sans-serif;
  background:
    linear-gradient(180deg, #f7f9fc 0%, var(--bg) 42%, #e8eef5 100%);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

.topbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 clamp(18px, 3vw, 34px);
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid rgba(215, 225, 235, .82);
  box-shadow: 0 1px 18px rgba(23, 34, 49, .05);
  backdrop-filter: blur(14px);
}

.portal-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(250,253,255,.98) 100%);
  border-right: 1px solid rgba(215, 225, 235, .76);
  box-shadow: 16px 0 42px rgba(24, 38, 55, .07);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

.sidebar-brand-mark {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #344da6 0%, #142b76 100%);
  color: #fff;
  font-size: 24px;
  font-weight: 950;
  box-shadow: 0 14px 26px rgba(36, 63, 134, .20);
}

.sidebar-brand-mark::before,
.sidebar-brand-mark::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #2d459d;
}

.sidebar-brand-mark::before {
  left: 2px;
}

.sidebar-brand-mark::after {
  right: 2px;
}

.sidebar-brand strong,
.sidebar-brand small {
  display: block;
}

.sidebar-brand strong {
  color: var(--accent);
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: 0;
}

.sidebar-brand small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sidebar-user {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  min-height: 98px;
  padding: 13px 68px 13px 13px;
  background: #fff;
  border: 1px solid #d9e4ee;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 10px 24px rgba(30, 51, 74, .05);
}

.user-avatar,
.profile-photo-preview {
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 900;
}

.user-avatar {
  width: 68px;
  height: 68px;
  font-size: 21px;
  border: 4px solid #f0f5fa;
  box-shadow: 0 10px 24px rgba(24, 38, 55, .08);
}

.user-avatar img,
.profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-meta {
  min-width: 0;
}

.user-meta strong,
.user-meta span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-meta strong {
  color: #111827;
  font-size: 17px;
  line-height: 1.22;
  font-weight: 950;
}

.user-meta span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sidebar-user-bear {
  position: absolute;
  right: 8px;
  bottom: -1px;
  width: 62px;
  height: 59px;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(145deg, #c48955 0%, #9a633b 100%);
  box-shadow: inset -10px -11px 18px rgba(74, 39, 21, .18);
}

.sidebar-user-bear::before,
.sidebar-user-bear::after {
  content: "";
  position: absolute;
}

.sidebar-user-bear::before {
  top: -8px;
  left: 7px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #9b613a;
  box-shadow: 32px 0 0 #9b613a, 14px 22px 0 -5px #111827, 30px 22px 0 -7px #111827;
}

.sidebar-user-bear::after {
  left: 23px;
  top: 28px;
  width: 19px;
  height: 15px;
  border-radius: 50%;
  background: #f6d9bd;
  box-shadow: inset 0 -5px 0 rgba(129, 75, 42, .12), -23px 19px 0 -3px #b97849, 27px 19px 0 -3px #b97849;
}

.side-nav {
  display: grid;
  gap: 5px;
}

.side-link {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #4d5d72;
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.side-link:hover {
  background: #eef6ff;
  color: var(--accent);
  border-color: #d9e8f5;
}

.side-link.active {
  background: linear-gradient(135deg, #092467 0%, #244cad 100%);
  color: #fff;
  border-color: #173b94;
  box-shadow: 0 12px 28px rgba(24, 54, 124, .22);
  transform: translateY(-1px);
}

.side-link-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-bear-icon {
  position: relative;
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #f6faff 0%, #e8f2ff 100%);
  box-shadow: 0 8px 18px rgba(37, 73, 135, .08);
}

.mini-bear {
  position: relative;
  width: 25px;
  height: 24px;
  border-radius: 50% 50% 44% 44%;
  background: linear-gradient(145deg, #c58b58 0%, #9d623a 100%);
  box-shadow: inset -4px -5px 8px rgba(76, 39, 20, .14);
}

.mini-bear::before,
.mini-bear::after {
  content: "";
  position: absolute;
}

.mini-bear::before {
  top: -4px;
  left: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9b613a;
  box-shadow: 15px 0 0 #9b613a;
}

.mini-bear::after {
  left: 8px;
  top: 10px;
  width: 10px;
  height: 9px;
  border-radius: 50%;
  background: #f6d9bd;
  box-shadow: 0 -6px 0 -4px #111827, -7px -6px 0 -5px #111827, 7px -6px 0 -5px #111827;
}

.side-bear-icon::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #3f7fe8;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 4px 8px rgba(24, 54, 124, .18);
}

.bear-misiones::after { content: "O"; }
.bear-control::after { content: "V"; }
.bear-calendario::after { content: "D"; }
.bear-visitas::after { content: ".."; font-size: 9px; }
.bear-tareas::after { content: "V"; }
.bear-clientes::after { content: "C"; }
.bear-teamup::after { content: "2"; }
.bear-viviendas::after { content: "H"; }
.bear-email::after { content: "@"; font-size: 10px; }
.bear-perfil::after { content: "i"; }
.bear-salir::after {
  content: "!";
  background: #c44242;
}

.side-link.active .side-bear-icon {
  background: rgba(255,255,255,.12);
  box-shadow: none;
}

.sidebar-footer {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.profile-link {
  background: #eef6ff;
  color: var(--accent);
  border-color: rgba(36, 143, 211, .18);
}

.profile-link.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.logout-link {
  color: var(--danger);
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.page-head h1 {
  margin: 4px 0 0;
}

.page-head p {
  margin: 6px 0 0;
}

.commercial-help-button {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(185, 211, 246, .95);
  border-radius: 50%;
  background: #fff;
  color: #17377d;
  box-shadow: 0 14px 34px rgba(29, 57, 92, .12);
  font-size: 22px;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
}

.commercial-help-button:hover {
  color: #fff;
  background: #17377d;
  border-color: #17377d;
}

.visitas-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.commercial-help-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  background: rgba(15, 31, 56, .45);
  backdrop-filter: blur(3px);
}

.commercial-help-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 81;
  display: none;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 42px);
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(185, 211, 246, .95);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(15, 31, 56, .28);
}

body.show-commercial-help .commercial-help-backdrop,
body.show-commercial-help .commercial-help-modal {
  display: block;
}

.commercial-help-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(202, 221, 245, .82);
  background: linear-gradient(180deg, rgba(246,249,254,.98), rgba(255,255,255,.96));
}

.commercial-help-head span {
  display: block;
  color: #68778b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.commercial-help-head h2 {
  margin: 4px 0 0;
  color: #142034;
  font-size: 24px;
}

.commercial-help-body {
  display: grid;
  gap: 12px;
  padding: 18px 22px 22px;
}

.commercial-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.commercial-help-item {
  padding: 13px 14px;
  border: 1px solid rgba(202, 221, 245, .78);
  border-radius: 10px;
  background: rgba(248, 251, 255, .78);
}

.commercial-help-current {
  border-color: rgba(202, 221, 245, .78);
  background: rgba(248, 251, 255, .78);
}

.commercial-help-item strong {
  display: block;
  margin-bottom: 4px;
  color: #17377d;
  font-size: 14px;
}

.commercial-help-item p {
  margin: 0;
  color: #50698c;
  line-height: 1.5;
}

.eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.text-link {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0;
}

.brand::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(36, 143, 211, .12);
}

.shell {
  width: min(100%, 1260px);
  margin: 0 auto;
  padding: clamp(18px, 2.5vw, 30px);
}

.app-shell { padding-bottom: 48px; }

.portal-layout .tabs {
  display: none;
}

.teamup-shell {
  width: min(100%, 1480px);
}

.teamup-frame-panel {
  padding: 0;
  overflow: hidden;
}

.teamup-frame {
  display: block;
  width: 100%;
  height: min(78vh, 900px);
  min-height: 680px;
  border: 0;
  background: #fff;
}

.teamup-empty {
  display: grid;
  gap: 12px;
  max-width: 780px;
}

.teamup-empty h2,
.teamup-empty p {
  margin: 0;
}

.teamup-empty pre {
  overflow-x: auto;
  margin: 4px 0 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-soft);
}

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.4vw, 26px);
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.9) 0 22%, transparent 42%),
    linear-gradient(135deg, #f7f9fc 0%, #e9f0f7 44%, #dfe8f2 100%);
}

.login-shell {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(210, 220, 232, .92);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(20, 38, 62, .18);
}

.login-box {
  width: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 74%, rgba(244,248,252,.96) 100%);
  border: 0;
  padding: clamp(18px, 3vw, 26px) clamp(28px, 6vw, 92px) 18px;
}

.login-brand {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  margin-bottom: 14px;
}

.login-logo {
  display: block;
  width: min(230px, 58%);
  max-height: 96px;
  object-fit: contain;
}

.login-illustration {
  position: relative;
  width: min(560px, 100%);
  height: clamp(188px, 28vw, 252px);
  margin-top: -2px;
}

.login-oval {
  position: absolute;
  inset: 24px 46px 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eef6fe 0%, #dcebf8 100%);
}

.login-pillow {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 24px;
  height: 54px;
  border-radius: 44px 44px 30px 30px;
  background: linear-gradient(180deg, #6d93bd 0%, #3f648d 100%);
  box-shadow: inset 0 5px 9px rgba(255,255,255,.18), 0 13px 22px rgba(29, 52, 84, .18);
}

.login-bear {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 310px;
  height: 172px;
  transform: translateX(-50%);
}

.login-bear span {
  position: absolute;
  display: block;
}

.login-bear .body {
  left: 38px;
  right: 16px;
  bottom: 4px;
  height: 114px;
  border-radius: 90px 100px 46px 58px;
  background: radial-gradient(circle at 40% 32%, #c48a57 0 18%, #9c653e 56%, #714427 100%);
  box-shadow: inset -18px -18px 32px rgba(67, 35, 18, .23);
}

.login-bear .head {
  left: 76px;
  top: 22px;
  width: 146px;
  height: 116px;
  border-radius: 48% 52% 52% 48%;
  background: radial-gradient(circle at 48% 38%, #d3a173 0 20%, #a96f43 64%, #744423 100%);
  transform: rotate(7deg);
  box-shadow: inset -12px -16px 24px rgba(67, 35, 18, .22);
}

.login-bear .ear {
  width: 52px;
  height: 52px;
  top: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 52% 52%, #6c3f24 0 36%, #9a623b 38% 100%);
}

.login-bear .ear.left {
  left: 58px;
}

.login-bear .ear.right {
  right: 72px;
}

.login-bear .nose {
  left: 138px;
  top: 82px;
  width: 48px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #1f2630 0 28%, #0d1320 72%);
  transform: rotate(8deg);
}

.login-bear .nose::before,
.login-bear .nose::after {
  content: "";
  position: absolute;
  top: -26px;
  width: 32px;
  height: 16px;
  border-bottom: 4px solid rgba(35, 26, 24, .72);
  border-radius: 0 0 28px 28px;
}

.login-bear .nose::before {
  left: -38px;
  transform: rotate(6deg);
}

.login-bear .nose::after {
  right: -36px;
  transform: rotate(-5deg);
}

.login-bear .paw {
  bottom: 2px;
  width: 72px;
  height: 56px;
  border-radius: 40px;
  background: linear-gradient(160deg, #9a633d 0%, #6f4228 100%);
  box-shadow: inset -8px -9px 14px rgba(67, 35, 18, .2);
}

.login-bear .paw.left {
  left: 14px;
  transform: rotate(5deg);
}

.login-bear .paw.right {
  right: 0;
  transform: rotate(-10deg);
}

.login-house {
  position: absolute;
  right: 70px;
  bottom: 54px;
  width: 58px;
  height: 76px;
  border: 3px solid rgba(34, 56, 88, .34);
  border-top: 0;
}

.login-house::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -26px;
  width: 70px;
  height: 70px;
  border-top: 3px solid rgba(34, 56, 88, .34);
  border-left: 3px solid rgba(34, 56, 88, .34);
  transform: rotate(45deg);
}

.login-house::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 24px;
  width: 11px;
  height: 16px;
  border: 2px solid rgba(34, 56, 88, .34);
  box-shadow: 20px 0 0 -2px #fff, 20px 0 0 0 rgba(34, 56, 88, .34);
}

.login-sleep-bubble {
  position: absolute;
  right: 108px;
  top: 12px;
  min-width: 72px;
  min-height: 50px;
  display: grid;
  place-items: center;
  border: 2px solid #32476a;
  border-radius: 50%;
  color: #3975e5;
  font-size: 21px;
  font-weight: 950;
  transform: rotate(-8deg);
  background: rgba(255, 255, 255, .66);
}

.login-sleep-bubble::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: -12px;
  width: 18px;
  height: 18px;
  border-left: 2px solid #32476a;
  border-bottom: 2px solid #32476a;
  transform: rotate(-18deg);
  background: rgba(255, 255, 255, .66);
}

.login-plant {
  position: absolute;
  bottom: 32px;
  width: 72px;
  height: 92px;
  opacity: .42;
}

.login-plant.left {
  left: 28px;
}

.login-plant.right {
  right: 18px;
  transform: scaleX(-1);
}

.login-plant::before {
  content: "";
  position: absolute;
  left: 34px;
  bottom: 0;
  width: 2px;
  height: 78px;
  background: #a9c8e8;
  transform: rotate(-22deg);
}

.login-plant::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 18px;
  width: 22px;
  height: 44px;
  border-radius: 100% 0 100% 0;
  background: #9dc0e4;
  box-shadow: 24px 18px 0 -4px #b0cdea, 3px 42px 0 -5px #b8d3ed;
}

.login-brand h1 {
  margin: 0;
  color: #3f83db;
  font-size: clamp(32px, 7vw, 56px);
  line-height: .95;
  font-weight: 950;
  letter-spacing: 0;
}

.login-brand h1 span {
  display: block;
  color: #0f2341;
}

.login-brand h1 em {
  display: block;
  color: #3f83db;
  font-style: normal;
}

.login-subtitle {
  position: relative;
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #748196;
  font-size: 18px;
  font-weight: 700;
}

.login-subtitle::before,
.login-subtitle::after {
  content: "";
  width: 108px;
  max-width: 18vw;
  height: 1px;
  background: #d2dbe7;
}

.login-field {
  min-height: 64px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0 14px;
  border: 1px solid #d7e1eb;
  border-radius: 13px;
  background: rgba(255, 255, 255, .96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.login-field-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #edf4ff 0%, #dceaff 100%);
  color: #3975e5;
}

.login-field svg,
.login-actions svg,
.password-toggle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-field input {
  width: 100%;
  min-height: 56px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #172231;
  font-size: 18px;
  outline: none;
  box-shadow: none;
}

.login-field input::placeholder {
  color: #78869a;
  opacity: 1;
}

.password-toggle {
  width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  color: #9aa7b8;
  border: 0;
  box-shadow: none;
}

.password-toggle:hover {
  transform: none;
  box-shadow: none;
  color: var(--accent);
}

.login-actions {
  display: grid;
  justify-items: center;
  margin-top: 16px;
}

.login-actions button {
  width: min(320px, 100%);
  min-height: 50px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3f5df4 0%, #4b94e1 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 14px 24px rgba(51, 98, 205, .28);
}

.login-actions svg {
  width: 22px;
  height: 22px;
}

.login-actions .login-resend-link {
  width: auto;
  min-height: 0;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2f5fbd;
  box-shadow: none;
  font-size: 14px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.login-actions .login-resend-link:hover {
  transform: none;
  color: #183f8c;
}

.login-promise {
  display: grid;
  grid-template-columns: 88px auto 88px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  color: #6e7d91;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.login-promise span {
  height: 1px;
  background: #d0dae7;
}

.login-promise strong {
  position: relative;
  width: 26px;
  height: 24px;
  overflow: hidden;
  color: transparent;
}

.login-promise strong::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 11px;
  height: 12px;
  border-radius: 50%;
  background: #3678df;
  box-shadow:
    -8px -6px 0 -3px #3678df,
    -3px -10px 0 -3px #3678df,
    4px -10px 0 -3px #3678df,
    9px -6px 0 -3px #3678df;
}

.login-promise p {
  grid-column: 1 / -1;
  margin: 0;
}

.login-promise b {
  color: #3678df;
}

.login-quote {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 174px;
  padding: 42px 34px 24px;
  background:
    radial-gradient(120% 80% at 92% 0%, rgba(140, 178, 223, .72) 0 28%, transparent 29%),
    radial-gradient(120% 86% at 12% 0%, rgba(45, 81, 129, .72) 0 24%, transparent 25%),
    linear-gradient(135deg, #102442 0%, #091d38 74%);
  color: #fff;
  text-align: center;
}

.login-quote::before {
  content: "";
  position: absolute;
  inset: -38px -8% auto -8%;
  height: 80px;
  border-radius: 0 0 50% 50%;
  background: #fff;
}

.quote-kicker {
  align-self: center;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(98, 144, 230, .88);
  border-radius: 999px;
  padding: 8px 18px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  background: rgba(37, 76, 143, .62);
}

.quote-text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.18;
  font-weight: 900;
}

.quote-text::first-letter {
  color: #69a0ff;
}

.quote-author {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 3px;
}

@media (min-width: 761px) {
  .login-wrap {
    padding: clamp(8px, 1.8vw, 20px);
  }

  .login-shell {
    width: min(532px, 100%);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(20, 38, 62, .16);
  }

  .login-box {
    padding: clamp(13px, 2.1vw, 18px) clamp(20px, 4.2vw, 64px) 13px;
  }

  .login-brand {
    gap: 7px;
    margin-bottom: 10px;
  }

  .login-logo {
    width: min(161px, 58%);
    max-height: 68px;
  }

  .login-illustration {
    width: min(392px, 100%);
    height: clamp(132px, 19.6vw, 176px);
  }

  .login-oval {
    inset: 17px 32px 20px;
  }

  .login-pillow {
    bottom: 17px;
    height: 38px;
  }

  .login-bear {
    bottom: 24px;
    width: 217px;
    height: 120px;
  }

  .login-bear .body {
    left: 27px;
    height: 80px;
  }

  .login-bear .head {
    left: 53px;
    top: 15px;
    width: 102px;
    height: 81px;
  }

  .login-bear .ear {
    width: 36px;
    height: 36px;
    top: 8px;
  }

  .login-bear .ear.left { left: 41px; }
  .login-bear .ear.right { right: 50px; }

  .login-bear .nose {
    left: 97px;
    top: 57px;
    width: 34px;
    height: 24px;
  }

  .login-bear .nose::before,
  .login-bear .nose::after {
    top: -18px;
    width: 22px;
    height: 11px;
    border-bottom-width: 3px;
  }

  .login-bear .nose::before { left: -27px; }
  .login-bear .nose::after { right: -25px; }

  .login-bear .paw {
    width: 50px;
    height: 39px;
  }

  .login-house {
    right: 49px;
    bottom: 38px;
    width: 41px;
    height: 53px;
    border-width: 2px;
  }

  .login-house::before {
    left: -6px;
    top: -18px;
    width: 49px;
    height: 49px;
    border-top-width: 2px;
    border-left-width: 2px;
  }

  .login-house::after {
    left: 10px;
    top: 17px;
    width: 8px;
    height: 11px;
    border-width: 1px;
    box-shadow: 14px 0 0 -1px #fff, 14px 0 0 0 rgba(34, 56, 88, .34);
  }

  .login-sleep-bubble {
    right: 76px;
    top: 8px;
    min-width: 50px;
    min-height: 35px;
    font-size: 15px;
  }

  .login-sleep-bubble::after {
    left: 7px;
    bottom: -8px;
    width: 13px;
    height: 13px;
  }

  .login-plant {
    bottom: 22px;
    width: 50px;
    height: 64px;
  }

  .login-plant.left { left: 20px; }
  .login-plant.right { right: 13px; }

  .login-plant::before {
    left: 24px;
    height: 55px;
  }

  .login-plant::after {
    left: 14px;
    top: 13px;
    width: 15px;
    height: 31px;
    box-shadow: 17px 13px 0 -3px #b0cdea, 2px 29px 0 -4px #b8d3ed;
  }

  .login-brand h1 {
    font-size: clamp(25px, 4.9vw, 39px);
  }

  .login-subtitle {
    gap: 11px;
    font-size: 13px;
  }

  .login-subtitle::before,
  .login-subtitle::after {
    width: 76px;
  }

  .login-field {
    min-height: 45px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 7px;
    margin-top: 11px;
    padding: 0 10px;
    border-radius: 10px;
  }

  .login-field-icon {
    width: 29px;
    height: 29px;
    border-radius: 9px;
  }

  .login-field svg,
  .login-actions svg,
  .password-toggle svg {
    width: 17px;
    height: 17px;
  }

  .login-field input {
    min-height: 39px;
    font-size: 13px;
  }

  .password-toggle {
    width: 31px;
    min-height: 31px;
  }

  .login-actions {
    margin-top: 11px;
  }

  .login-actions button {
    width: min(244px, 100%);
    min-height: 38px;
    border-radius: 9px;
    font-size: 14px;
    box-shadow: 0 10px 17px rgba(51, 98, 205, .24);
  }

  .login-actions svg {
    width: 17px;
    height: 17px;
  }

  .login-promise {
    grid-template-columns: 62px auto 62px;
    gap: 8px;
    margin-top: 14px;
    font-size: 11px;
  }

  .login-promise strong {
    width: 18px;
    height: 17px;
  }

  .login-promise strong::before {
    left: 6px;
    top: 6px;
    width: 8px;
    height: 8px;
  }

  .login-quote {
    gap: 8px;
    min-height: 122px;
    padding: 30px 24px 17px;
  }

  .login-quote::before {
    inset: -27px -8% auto -8%;
    height: 56px;
  }

  .quote-kicker {
    padding: 6px 13px;
    font-size: 9px;
  }

  .quote-text {
    font-size: clamp(15px, 2.4vw, 21px);
  }

  .quote-author {
    font-size: 11px;
    letter-spacing: 2px;
  }
}

h1 {
  margin: 0 0 6px;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: 0;
}

h2 {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.25;
}

.muted { color: var(--muted); }

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.kpi,
.panel,
.cliente-card,
.mission-card,
.answer-modal,
.calendar-modal {
  background: var(--panel);
  border: 1px solid rgba(215, 225, 235, .94);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.kpi {
  min-height: 108px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kpi-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.kpi-link:hover {
  border-color: rgba(36, 143, 211, .62);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.kpi span {
  font-size: 13px;
  font-weight: 700;
}

.kpi strong {
  display: block;
  font-size: 32px;
  line-height: 1;
  margin-top: 8px;
  letter-spacing: 0;
}

.control-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.control-subtabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.control-subtab {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: var(--text);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.control-subtab:hover {
  border-color: rgba(36, 143, 211, .58);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.control-subtab.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.control-subtab span,
.control-subtab strong {
  display: block;
}

.control-subtab span {
  font-weight: 900;
}

.control-subtab strong {
  min-width: 32px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, .76);
  border-radius: 999px;
  color: var(--accent);
  text-align: center;
}

.control-subtab.active strong {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.danger-kpi {
  border-color: rgba(169, 50, 56, .22);
  background: linear-gradient(180deg, #fff, var(--danger-soft));
}

.danger-kpi strong {
  color: var(--danger);
}

.panel {
  padding: 20px;
  margin-top: 18px;
}

.control-dashboard {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 18px;
}

.control-panel {
  min-width: 0;
  scroll-margin-top: 18px;
}

.control-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.control-panel-head h2,
.control-panel-head p {
  margin: 0;
}

.control-panel-head p {
  margin-top: 4px;
}

.portfolio-table-head {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.commercial-alert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.commercial-alert-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  color: var(--text);
  text-decoration: none;
  background: #fff8f8;
  border: 1px solid rgba(169, 50, 56, .2);
  border-radius: 8px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.commercial-alert-card:hover {
  border-color: rgba(169, 50, 56, .36);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.commercial-alert-card strong,
.commercial-alert-card small {
  display: block;
}

.commercial-alert-card small {
  color: var(--muted);
  font-weight: 700;
}

.commercial-alert-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.commercial-alert-metrics span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid rgba(169, 50, 56, .18);
  border-radius: 999px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 900;
}

.control-detail-panel {
  scroll-margin-top: 18px;
}

.control-section-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.control-section-summary div {
  min-height: 76px;
  padding: 13px 14px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.control-section-summary span,
.control-section-summary strong {
  display: block;
}

.control-section-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.control-section-summary strong {
  margin-top: 6px;
  font-size: 23px;
  line-height: 1.1;
}

.control-jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.control-jump-list a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 10px;
  color: var(--text);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.control-jump-list a:hover {
  border-color: rgba(36, 143, 211, .58);
  color: var(--accent);
}

.control-jump-list strong {
  min-width: 22px;
  padding: 2px 6px;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 999px;
  font-size: 12px;
  text-align: center;
}

.control-group-list {
  display: grid;
  gap: 12px;
}

.control-group {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  scroll-margin-top: 18px;
}

.control-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--border);
  font-weight: 900;
}

.control-group summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.control-compact-table {
  overflow-x: auto;
}

.control-compact-table table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.control-compact-table th,
.control-compact-table td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.control-compact-table tr:last-child td {
  border-bottom: 0;
}

.control-compact-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.table-client-link {
  color: var(--accent);
  font-weight: 900;
  text-decoration: none;
}

.table-client-link:hover {
  text-decoration: underline;
}

.conversion-funnel {
  display: grid;
  gap: 13px;
}

.funnel-row {
  display: grid;
  gap: 7px;
}

.funnel-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
}

.funnel-label span {
  color: var(--muted);
}

.funnel-track {
  height: 10px;
  overflow: hidden;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.funnel-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: inherit;
}

.control-list {
  display: grid;
  gap: 9px;
}

.control-list-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  color: var(--text);
  text-decoration: none;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.control-list-card:hover {
  border-color: rgba(36, 143, 211, .62);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.control-list-card.alert {
  background: #fff8f8;
  border-color: rgba(169, 50, 56, .2);
}

.control-list-card strong,
.control-list-card span,
.control-list-card small {
  display: block;
}

.control-list-card span,
.control-list-card small {
  color: var(--muted);
  font-weight: 700;
}

.control-list-card span {
  margin-top: 3px;
  font-size: 13px;
}

.control-card-side {
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}

.control-card-side span {
  color: var(--text);
  font-weight: 900;
}

.control-table {
  overflow-x: auto;
}

.control-table table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.control-table th,
.control-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.control-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.control-table tbody tr:last-child td {
  border-bottom: 0;
}

.portfolio-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.portfolio-state.green {
  color: var(--success);
  background: var(--success-soft);
}

.portfolio-state.amber {
  color: var(--warning);
  background: #fff6e9;
}

.portfolio-state.red {
  color: var(--danger);
  background: var(--danger-soft);
}

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.list {
  display: grid;
  gap: 10px;
}

.cliente-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 16px;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.cliente-card:hover {
  border-color: rgba(36, 143, 211, .7);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.cliente-card-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
  align-content: start;
}

.assigned-panel {
  padding: 24px 30px 28px;
  border-color: rgba(181, 210, 242, .9);
  box-shadow: 0 18px 42px rgba(24, 48, 82, .08);
}

.assigned-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(210, 224, 240, .86);
}

.assigned-head h2,
.assigned-head p {
  margin: 0;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.section-kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4f95d6;
  box-shadow: 0 0 0 6px rgba(79, 149, 214, .12);
}

.assigned-page-pill {
  min-width: 118px;
  padding: 10px 14px;
  border: 1px solid rgba(181, 210, 242, .95);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #f5f9ff);
  text-align: center;
  box-shadow: 0 10px 22px rgba(34, 68, 112, .08);
}

.assigned-page-pill span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.assigned-page-pill strong {
  display: block;
  color: var(--accent);
  font-size: 18px;
}

.assigned-list {
  display: grid;
  gap: 8px;
}

.assigned-list .cliente-card {
  min-height: 74px;
  align-items: center;
  padding: 12px 16px;
  border-color: rgba(206, 222, 239, .92);
  border-left: 5px solid #29408b;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(241, 247, 255, .76), #fff 38%);
  box-shadow: none;
}

.assigned-list .cliente-card strong {
  font-size: 16px;
}

.assigned-list .cliente-card .muted {
  margin-top: 3px;
  font-size: 14px;
}

.assigned-list .cliente-card > .muted {
  justify-self: end;
  padding: 8px 12px;
  border: 1px solid rgba(210, 224, 240, .9);
  border-radius: 999px;
  background: #fff;
  color: #50698c;
  font-size: 13px;
  font-weight: 900;
}

.assigned-date span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.assigned-pager,
.pager-pages {
  display: flex;
  align-items: center;
  gap: 8px;
}

.assigned-pager {
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(210, 224, 240, .86);
}

.pager-pages {
  justify-content: center;
  flex-wrap: wrap;
}

.pager-pages a,
.pager-pages span {
  min-width: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0 9px;
  border: 1px solid rgba(210, 224, 240, .95);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  font-weight: 900;
  text-decoration: none;
}

.pager-pages span:not(.active) {
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}

.pager-pages .active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 20px rgba(41, 64, 139, .2);
}

@media (max-width: 760px) {
  .assigned-panel {
    padding: 18px;
  }

  .assigned-head,
  .assigned-pager {
    align-items: stretch;
    flex-direction: column;
  }

  .assigned-page-pill {
    width: fit-content;
  }

  .assigned-list .cliente-card > .muted {
    justify-self: start;
  }
}

.clients-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.client-search {
  width: min(520px, 52vw);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.client-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 14px;
  margin: 0 0 18px;
}

.client-summary {
  min-height: 84px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid rgba(215, 225, 235, .94);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.client-summary span,
.client-row-side small,
.client-row-main span {
  display: block;
  color: var(--muted);
  font-weight: 700;
}

.client-summary strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  line-height: 1;
}

.client-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 13px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.client-list-head h2,
.client-list-head p {
  margin: 0;
}

.client-list-head p { margin-top: 4px; }

.client-list {
  display: grid;
  gap: 0;
}

.client-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 4px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.client-row:last-child { border-bottom: 0; }

.client-row-link {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) minmax(260px, 1fr) minmax(160px, .7fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.client-row:hover .client-row-main strong {
  color: var(--accent);
}

.client-row-main strong {
  display: block;
  font-size: 17px;
  transition: color .16s ease;
}

.client-row-main span {
  margin-top: 4px;
  font-size: 13px;
}

.client-row-side {
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}

.client-row-side span {
  font-weight: 800;
}

.client-row-side small {
  font-size: 12px;
}

.client-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.client-row-actions .compact {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.relation-chip {
  color: var(--accent);
  border-color: rgba(36, 143, 211, .26);
  background: rgba(36, 143, 211, .08);
  text-decoration: none;
}

.client-create-backdrop,
.client-relation-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  background: rgba(15, 28, 42, .58);
  backdrop-filter: blur(3px);
}

.client-create-modal,
.client-relation-modal {
  position: fixed;
  z-index: 71;
  top: 50%;
  left: 50%;
  width: min(860px, calc(100vw - 34px));
  max-height: calc(100vh - 44px);
  overflow: auto;
  display: none;
  transform: translate(-50%, -50%);
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.client-create-modal {
  width: min(880px, calc(100vw - 34px));
  padding: 0;
  overflow: hidden;
  background: var(--bg-soft);
  border-color: rgba(36, 63, 134, .18);
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(23, 34, 49, .22);
}

body.show-client-create .client-create-backdrop,
body.show-client-create .client-create-modal {
  display: block;
}

body.show-client-relation .client-relation-backdrop,
body.show-client-relation .client-relation-modal {
  display: block;
}

.client-relation-modal {
  width: min(720px, calc(100vw - 34px));
}

.merge-keep-fields {
  display: none;
  margin-top: 10px;
}

body[data-client-relation-action="fusion"] .merge-keep-fields {
  display: block;
}

.radio-line {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0 0;
  color: var(--text);
}

.radio-line input {
  width: auto;
}

.client-create-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.client-create-head h2,
.client-create-head p {
  margin: 0;
}

.client-create-head p { margin-top: 5px; }

.client-create-modal .client-create-head {
  padding: 18px 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, #1f6fac 100%);
  border-bottom: 0;
}

.client-create-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.client-create-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

.client-create-eyebrow {
  display: block;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.client-create-modal .client-create-head h2 {
  color: #fff;
  font-size: 23px;
  line-height: 1.15;
}

.client-create-modal .client-create-head p {
  color: rgba(255, 255, 255, .78);
}

.client-modal-close {
  min-width: 96px;
  min-height: 38px;
  color: #fff !important;
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .3) !important;
}

.client-create-form {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 126px);
  overflow: auto;
  padding: 14px 16px 16px;
  background: var(--bg-soft);
}

.client-create-section {
  padding: 13px 14px 15px;
  background: #fff;
  border: 1px solid rgba(215, 225, 235, .94);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(24, 38, 55, .045);
}

.client-create-section:first-of-type {
  padding-top: 13px;
  border-top: 1px solid rgba(215, 225, 235, .94);
}

.client-create-section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}

.client-create-section-title h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 950;
  text-transform: uppercase;
}

.client-create-section-title h3::before {
  content: "";
  width: 7px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
}

.client-create-modal label {
  margin-top: 8px;
  color: #5f7084;
  font-size: 12px;
  font-weight: 900;
}

.client-create-modal input,
.client-create-modal select {
  min-height: 42px;
  background: #fbfdff;
  border-radius: 7px;
}

.client-create-modal .compact-grid {
  gap: 0 14px;
}

.client-create-modal textarea {
  min-height: 88px;
  background: #fbfdff;
  border-radius: 7px;
}

.client-create-form .actions {
  position: sticky;
  bottom: -16px;
  margin: 2px -16px -16px;
  padding: 13px 16px 15px;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 24px rgba(24, 38, 55, .06);
}

.client-create-form .actions button {
  min-width: 132px;
}

.compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 5px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
  padding: 10px 11px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(36, 143, 211, .75);
  box-shadow: 0 0 0 4px rgba(36, 143, 211, .12);
}

input:disabled {
  background: #f1f5f9;
  color: var(--muted);
  cursor: not-allowed;
}

textarea {
  min-height: 180px;
  resize: vertical;
}

button,
.button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  padding: 10px 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  box-shadow: 0 7px 18px rgba(36, 63, 134, .16);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

button:hover,
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 24px rgba(36, 63, 134, .2);
}

button:disabled,
.button.disabled {
  cursor: not-allowed;
  opacity: .56;
  transform: none;
  box-shadow: none;
}

.button.secondary,
button.secondary {
  background: #fff;
  color: var(--text);
  border-color: var(--border);
  box-shadow: none;
}

.button.secondary:hover,
button.secondary:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.button.compact {
  min-height: 34px;
  padding: 7px 13px;
  font-size: 14px;
}

.notice {
  padding: 11px 13px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-soft);
  font-weight: 700;
}

.notice.error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(169, 50, 56, .22);
}

.notice.success {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(47, 125, 86, .22);
}

.notice.warning {
  color: var(--warning);
  background: #fff8ec;
  border-color: rgba(179, 107, 24, .24);
}

.duplicate-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.duplicate-notice p,
.duplicate-notice small {
  display: block;
  margin: 4px 0 0;
}

.duplicate-notice small {
  color: #6b7890;
  font-weight: 800;
}

.duplicate-access-note {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid rgba(179, 107, 24, .24);
  border-radius: 999px;
  background: #fff;
  color: var(--warning);
  font-size: 12px;
  font-weight: 900;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.actions.login-actions {
  display: grid;
  justify-content: center;
  justify-items: center;
  width: 100%;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 6px;
  margin-top: 18px;
  padding: 5px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.tabs a {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  padding: 12px 16px;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.tabs a:hover {
  background: var(--panel);
  color: var(--accent);
}

.tabs a.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 9px 18px rgba(36, 63, 134, .18);
}

.lead-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lead-kpi {
  position: relative;
  overflow: hidden;
  min-height: 118px;
}

.lead-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--accent);
}

.lead-kpi.total::before { background: var(--accent); }
.lead-kpi.new::before { background: var(--warning); }
.lead-kpi.today::before { background: var(--accent-2); }
.lead-kpi.interested::before { background: var(--success); }
.lead-kpi.high::before { background: var(--danger); }

.lead-kpi span,
.lead-kpi small {
  font-size: 12px;
  font-weight: 900;
}

.lead-kpi strong {
  margin-top: 6px;
  font-size: 34px;
  line-height: 1;
}

.lead-kpi small {
  display: block;
  color: var(--muted);
}

.mission-stage { margin-top: 20px; }

.mission-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(185, 211, 246, .92);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 100%);
  box-shadow: 0 24px 70px rgba(29, 57, 92, .13);
}

.mission-card::before {
  content: none;
}

.mission-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  min-height: 86px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(204, 222, 244, .82);
  background:
    radial-gradient(circle at 8% 0%, rgba(61, 132, 224, .14), transparent 30%),
    linear-gradient(135deg, rgba(246, 250, 255, .98), rgba(255,255,255,.94) 54%, rgba(238, 246, 255, .88));
}

.mission-title-block {
  min-width: 0;
}

.mission-top p {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
}

.mission-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0f58d8;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 6px;
}

.mission-label::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 28%, transparent 30%),
    linear-gradient(135deg, #dceaff, #bcd5ff);
  box-shadow: inset 0 0 0 9px rgba(36, 103, 230, .16);
}

.mission-top h1 {
  margin-top: 0;
  max-width: 880px;
  color: #071733;
  font-size: clamp(25px, 3.1vw, 36px);
  line-height: .98;
  letter-spacing: 0;
  text-shadow: 0 10px 24px rgba(9, 28, 66, .08);
}

.mission-objective {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 24px;
  margin-top: 6px;
  padding: 4px 9px;
  color: #264a86;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(185, 211, 246, .9);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.mission-commercial-status {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  min-height: 25px;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(185, 211, 246, .9);
  background: rgba(255,255,255,.9);
  color: #263f6f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.mission-commercial-status::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #aab7ca;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.55);
}

.mission-commercial-status.is-assigned {
  border-color: rgba(47, 125, 86, .24);
  background: #f3fbf6;
  color: #1f6848;
}

.mission-commercial-status.is-assigned::before {
  background: #2f9d67;
}

.mission-commercial-status.is-unassigned {
  border-color: rgba(169, 50, 56, .24);
  background: #fff4f3;
  color: #9b252b;
}

.mission-commercial-status.is-unassigned::before {
  background: #c6283d;
}

.mission-objective::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1f65e5;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.55);
}

.priority-badge,
.priority-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(169, 50, 56, .24);
  background: #fff4f3;
  color: #9b252b;
  font-weight: 950;
  letter-spacing: 0;
}

.priority-badge {
  margin: 0 0 10px 0;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
}

.priority-badge-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #a93238;
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

.mission-status-box {
  align-self: flex-start;
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 126px;
  margin-top: -2px;
}

.mission-status-box > span {
  color: #31496d;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.mission-status {
  display: inline-flex;
  align-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(185, 211, 246, .96);
  border-radius: 999px;
  padding: 5px 14px;
  min-height: 30px;
  font-weight: 900;
  font-size: 13px;
  text-transform: capitalize;
  white-space: nowrap;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(25, 67, 145, .09);
}

.mission-status.is-new,
.new-lead-chip {
  color: var(--warning);
  background: #fff6e9;
  border-color: rgba(179, 107, 24, .24);
}

.new-lead-star {
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
  color: var(--warning);
  line-height: 1;
}

.mission-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 14px 20px 0;
}

.mission-facts div {
  position: relative;
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-content: center;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(202, 221, 245, .92);
  border-radius: 8px;
  padding: 8px 9px;
  box-shadow: 0 12px 28px rgba(26, 58, 100, .05);
}

.mission-facts div::before {
  content: "";
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 55% 45%, #1f65e5 0 16%, transparent 18%),
    linear-gradient(135deg, #eff5ff, #ddeaff);
}

.mission-facts span {
  display: block;
  color: #3b5578;
  font-size: 11px;
  font-weight: 900;
  margin: 0 0 3px;
  text-transform: uppercase;
}

.mission-facts strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: #071733;
  font-size: 13px;
  line-height: 1.2;
}

.last-note {
  margin: 18px 28px 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  padding: 16px 17px;
  max-height: 170px;
  overflow: auto;
  line-height: 1.55;
}

.last-note::-webkit-scrollbar {
  width: 10px;
}

.last-note::-webkit-scrollbar-thumb {
  background: #c4cfdb;
  border: 3px solid #fff;
  border-radius: 999px;
}

.mission-property {
  margin: 12px 20px 0;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 11px;
  background: linear-gradient(135deg, rgba(247,251,255,.98), rgba(255,255,255,.94));
  border: 1px solid rgba(185, 211, 246, .9);
  border-radius: 12px;
}

.mission-property.is-pending {
  grid-template-columns: 132px minmax(0, 1fr);
}

.mission-property.is-pending .mission-property-media {
  min-height: 118px;
}

.mission-property.is-identified {
  background: #f6fbf8;
  border-color: rgba(47, 125, 86, .24);
}

.mission-property-media {
  min-height: 102px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e7eef6 0%, #f4f8fc 100%);
  border: 1px solid rgba(215, 225, 235, .9);
  border-radius: 12px;
}

.mission-property-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mission-property-media img.bear-avatar {
  width: clamp(74px, 7vw, 106px);
  height: auto;
  object-fit: contain;
  padding: 0;
  border-radius: 16px;
  filter: drop-shadow(0 12px 18px rgba(34, 68, 112, .14));
}

.mission-property-media span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(36, 63, 134, .18);
}

.mission-property-body {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 2px 0;
}

.mission-property-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mission-property-kicker {
  color: #0f58d8;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.mission-property-state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid rgba(36, 143, 211, .24);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.mission-property.is-identified .mission-property-state {
  border-color: rgba(47, 125, 86, .22);
  background: var(--success-soft);
  color: var(--success);
}

.mission-property h2 {
  margin: 0;
  max-width: 920px;
  color: #071733;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.22;
}

.mission-property-subtitle {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.mission-property-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.mission-property-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(202, 221, 245, .92);
  border-radius: 999px;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.mission-property-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.lead-raw-text {
  margin: 9px 20px 0;
  border: 1px solid rgba(202, 221, 245, .92);
  border-radius: 8px;
  background: #fff;
}

.lead-raw-text summary {
  cursor: pointer;
  padding: 8px 11px;
  color: #50698c;
  font-weight: 900;
}

.lead-raw-text summary:hover {
  color: var(--accent);
}

.lead-raw-text > div {
  max-height: 190px;
  overflow: auto;
  padding: 0 14px 14px;
  color: var(--muted);
  line-height: 1.55;
}

.mission-history-details {
  margin-top: 8px;
}

.mission-history-details > summary {
  color: #17377d;
}

.lead-raw-text > .mission-history-body {
  max-height: 260px;
  color: var(--text);
}

.mission-history-body .muted {
  margin: 2px 0 0;
}

.mission-history-list {
  gap: 8px;
}

.mission-history-list .activity-item {
  background: linear-gradient(180deg, #fff, rgba(246, 250, 255, .92));
  border-color: rgba(202, 221, 245, .95);
  box-shadow: none;
}

.mission-history-list .activity-comment {
  background: rgba(255, 255, 255, .86);
}

.call-actions,
.mission-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.mission-action-panel {
  margin-top: 10px;
  padding: 11px 20px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(242, 248, 255, .78));
  border-top: 1px solid var(--border);
}

.call-actions {
  margin: 0;
  align-items: center;
  gap: 8px;
}

.call-actions .button,
.call-actions button {
  min-height: 34px;
  padding-inline: 11px;
  background: rgba(255,255,255,.95);
  border-color: rgba(202, 221, 245, .95);
  box-shadow: 0 10px 24px rgba(26, 58, 100, .06);
}

.call-actions .button.call,
.call-actions button.call {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}

.mission-buttons {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: stretch;
}

.button.call {
  background: var(--success);
  box-shadow: 0 7px 18px rgba(47, 125, 86, .16);
}

.mission-buttons form { margin: 0; }

.mission-buttons button,
.mission-buttons .button {
  min-width: 0;
  min-height: 58px;
  justify-content: flex-start;
  padding: 11px 16px 11px 62px;
  position: relative;
  overflow: hidden;
  font-size: 17px;
  letter-spacing: 0;
  border-radius: 9px;
  text-transform: none;
  text-align: left;
}

.mission-buttons button::before,
.mission-buttons .button::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 18px rgba(255,255,255,.22);
}

.mission-buttons button::after,
.mission-buttons .button::after {
  position: absolute;
  left: 62px;
  top: calc(50% + 11px);
  color: rgba(255,255,255,.88);
  font-size: 11px;
  font-weight: 700;
}

.mission-buttons .answer::after {
  content: "El lead ha respondido";
}

.mission-buttons .no-answer::after {
  content: "No ha respondido";
}

.mission-buttons .next-mission::after {
  content: "Ir al siguiente lead";
}

.mission-buttons .answer {
  background: linear-gradient(135deg, #16864f, #11a365);
  box-shadow: 0 18px 34px rgba(21, 128, 79, .24);
}

.mission-buttons .next-mission {
  background: linear-gradient(135deg, #1f65e5, #0b55ff);
  color: #fff;
  box-shadow: 0 18px 34px rgba(31, 101, 229, .24);
}

.mission-buttons .no-answer {
  background: linear-gradient(135deg, #c6283d, #e52f49);
  box-shadow: 0 18px 34px rgba(198, 40, 61, .22);
}

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 28, 42, .56);
  z-index: 10;
  backdrop-filter: blur(3px);
}

.answer-modal {
  display: none;
  position: fixed;
  z-index: 11;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 28px));
  padding: 22px;
  box-shadow: 0 24px 70px rgba(17, 31, 46, .28);
}

.call-result-modal {
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 58%);
}

.call-result-modal > h2 {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 18px 22px;
  background:
    linear-gradient(135deg, rgba(36, 63, 134, .08), rgba(36, 143, 211, .04)),
    rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(24, 38, 55, .06);
}

.call-script-panel {
  margin: 18px 22px;
  padding: 0;
  border: 1px solid rgba(202, 221, 245, .9);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(24, 38, 55, .06);
}

.call-script-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(215, 225, 235, .9);
  background: var(--panel-soft);
}

.call-script-head > div strong,
.call-script-head > div span {
  display: block;
}

.call-script-head > div strong {
  font-size: 22px;
  line-height: 1.15;
}

.call-script-head > div span {
  color: var(--muted);
  margin-top: 5px;
  font-weight: 800;
}

.call-script-panel h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 18px 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.call-script-panel h3::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 5px rgba(36, 143, 211, .11);
}

.call-script-panel .form-grid {
  padding: 0 18px 4px;
  gap: 0 16px;
}

.call-script-panel .form-grid + h3 {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(215, 225, 235, .76);
}

.call-result-modal > label,
.call-result-modal > select,
.call-result-modal > textarea,
.call-result-modal > .visit-fields,
.call-result-modal > .exact-schedule-fields {
  margin-left: 22px;
  margin-right: 22px;
}

.call-result-modal > label {
  margin-top: 14px;
}

.call-result-modal > select,
.call-result-modal > textarea {
  background: #fff;
}

.call-result-modal > textarea {
  min-height: 112px;
}

.call-result-modal > .actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 18px 0 0;
  padding: 14px 22px;
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 24px rgba(24, 38, 55, .07);
}

body.show-answer .modal-backdrop:not(.no-answer-backdrop):not(.whatsapp-modal-backdrop),
body.show-answer .answer-modal:not(.no-answer-modal):not(.whatsapp-modal) { display: block; }
body.show-no-answer .no-answer-backdrop,
body.show-no-answer .no-answer-modal { display: block; }
body.show-client-call .client-call-backdrop,
body.show-client-call .client-call-modal { display: block; }
body.show-client-edit .client-edit-backdrop,
body.show-client-edit .client-edit-modal { display: block; }
body.show-visit-create .visit-create-backdrop,
body.show-visit-create .visit-create-modal { display: block; }
body.show-whatsapp-modal .whatsapp-modal-backdrop,
body.show-whatsapp-modal .whatsapp-modal { display: block; }

.visit-fields {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

body[data-resultado="visita"] .visit-fields { display: grid; }
.assign-fields { display: none; }
body[data-resultado="interesado"] .assign-fields { display: block; }
.discard-fields { display: none; }
body[data-resultado="descartado"] .discard-fields { display: block; }

.visitas-head {
  align-items: center;
  min-height: 132px;
  padding: 24px 26px;
  background:
    linear-gradient(135deg, rgba(36, 63, 134, .11), rgba(36, 143, 211, .05) 44%, rgba(47, 125, 86, .06)),
    var(--panel);
  border: 1px solid rgba(215, 225, 235, .94);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.visitas-title-block {
  min-width: 0;
}

.page-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  color: var(--accent);
  background: rgba(36, 63, 134, .08);
  border: 1px solid rgba(36, 63, 134, .14);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.visit-primary-action {
  min-width: 138px;
  min-height: 48px;
}

.visitas-summary {
  margin-top: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.visit-kpi {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  border-color: rgba(215, 225, 235, .98);
}

.visit-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--accent);
}

.visit-kpi.total::before { background: var(--accent); }
.visit-kpi.buyer::before { background: var(--accent-2); }
.visit-kpi.capture::before { background: var(--success); }
.visit-kpi.follow::before { background: var(--warning); }

.visit-kpi span,
.visit-kpi small,
.visit-meta-grid span,
.visit-date-pill span {
  font-size: 12px;
  font-weight: 900;
}

.visit-kpi strong {
  margin-top: 6px;
  font-size: 34px;
  line-height: 1;
}

.visit-kpi small {
  display: block;
  color: var(--muted);
}

.visitas-filter-panel,
.visit-list-panel {
  padding: 18px;
}

.visit-section-head {
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}

.visit-section-head h2,
.visit-section-head p {
  margin: 0;
}

.visit-section-head p {
  margin-top: 4px;
}

.visitas-filterbar {
  display: grid;
  grid-template-columns: minmax(132px, .7fr) minmax(132px, .7fr) minmax(260px, 1.25fr) minmax(140px, .72fr) minmax(140px, .72fr) minmax(140px, .72fr) auto;
  gap: 12px;
  align-items: end;
}

.visitas-search-field {
  min-width: 0;
}

.visitas-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 1px;
}

.visitas-filter-actions .button,
.visitas-filter-actions button {
  min-height: 42px;
  white-space: nowrap;
}

.visit-list {
  display: grid;
  gap: 14px;
}

.visit-row {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .43fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.visit-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--accent-2);
}

.visit-row-seguimiento::before { background: var(--warning); }
.visit-row-vendida::before { background: var(--success); }
.visit-row-perdida::before { background: var(--danger); }
.visit-row-cancelada::before { background: var(--border-strong); }

.visit-row:hover {
  border-color: rgba(36, 143, 211, .42);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.visit-row.focus {
  border-color: rgba(36, 143, 211, .72);
  box-shadow: 0 16px 36px rgba(36, 143, 211, .16);
}

.visit-row-main {
  min-width: 0;
}

.visit-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.visit-title-line {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.visit-title-line strong {
  font-size: 19px;
  line-height: 1.25;
}

.visit-id {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 8px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.visit-date-pill {
  flex: 0 0 auto;
  min-width: 132px;
  padding: 9px 11px;
  text-align: right;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.visit-date-pill span,
.visit-date-pill strong {
  display: block;
}

.visit-date-pill span {
  color: var(--muted);
  text-transform: uppercase;
}

.visit-date-pill strong {
  margin-top: 2px;
  font-size: 14px;
}

.visit-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.visit-meta-grid div {
  min-width: 0;
  padding: 10px 11px;
  background: var(--panel-soft);
  border: 1px solid rgba(215, 225, 235, .82);
  border-radius: 8px;
}

.visit-meta-grid span,
.visit-meta-grid strong {
  display: block;
}

.visit-meta-grid span {
  color: var(--muted);
  text-transform: uppercase;
}

.visit-meta-grid strong {
  overflow: hidden;
  margin-top: 3px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.visit-state {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: var(--panel-soft);
  color: var(--muted);
}

.visit-state.seguimiento {
  color: var(--warning);
  background: #fff6e9;
}

.visit-state.vendida {
  color: var(--success);
  background: var(--success-soft);
}

.visit-state.perdida {
  color: var(--danger);
  background: var(--danger-soft);
}

.visit-state.cancelada {
  color: var(--muted);
  background: #eef3f7;
}

.visit-last-note {
  margin-top: 12px;
  padding: 12px 13px;
  background: #f6f9fc;
  border: 1px solid rgba(215, 225, 235, .86);
  border-left: 4px solid rgba(36, 143, 211, .42);
  border-radius: 8px;
}

.visit-last-note span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 5px;
}

.visit-last-note p {
  margin: 0;
  line-height: 1.45;
}

.visit-links {
  margin-top: 12px;
}

.visit-followup {
  display: grid;
  align-content: start;
  padding-left: 18px;
  border-left: 1px solid var(--border);
}

.visit-followup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.visit-followup-head strong,
.visit-followup-head span {
  display: inline-flex;
  align-items: center;
}

.visit-followup-head strong {
  color: var(--accent);
  font-size: 15px;
}

.visit-followup-head span {
  min-height: 24px;
  padding: 4px 8px;
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.visit-followup textarea {
  min-height: 78px;
}

.visit-loss-fields {
  display: none;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.visit-followup[data-estado="perdida"] .visit-loss-fields {
  display: grid;
}

.visit-followup .actions {
  margin-top: 10px;
}

.visit-followup .actions button {
  width: 100%;
}

.visit-sold-note {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px;
  border-radius: 6px;
  background: var(--success-soft);
  color: var(--success);
}

.visit-sold-note span {
  color: var(--text);
}

.visit-create-modal {
  width: min(700px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.visit-client-search {
  position: relative;
  display: grid;
  gap: 8px;
}

.visit-client-results {
  position: absolute;
  z-index: 3;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow-md);
}

.visit-client-results[hidden],
.visit-client-selected[hidden] {
  display: none;
}

.visit-client-option {
  width: 100%;
  min-height: 0;
  display: grid;
  justify-items: start;
  gap: 3px;
  padding: 11px 13px;
  color: var(--text);
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.visit-client-option:hover,
.visit-client-option:focus {
  background: var(--panel-soft);
  color: var(--text);
  transform: none;
}

.visit-client-option strong,
.visit-client-option span {
  display: block;
}

.visit-client-option span,
.visit-client-empty,
.visit-client-selected {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.visit-client-empty {
  padding: 12px 13px;
}

.visit-client-selected {
  padding: 9px 11px;
  background: var(--success-soft);
  border: 1px solid rgba(47, 125, 86, .22);
  border-radius: 6px;
  color: var(--success);
}

.assignment-suggestion {
  display: grid;
  gap: 10px;
  margin: 12px 0 14px;
  padding: 12px;
  background: var(--success-soft);
  border: 1px solid rgba(47, 125, 86, .24);
  border-radius: 8px;
}

.assignment-suggestion-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.assignment-suggestion strong,
.assignment-suggestion span,
.assignment-suggestion p {
  display: block;
}

.assignment-kicker {
  color: var(--success);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.assignment-suggestion p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.assignment-suggestion-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.assignment-suggestion-facts span {
  min-height: 24px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.load-pill {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.load-pill.green {
  color: var(--success);
  background: #fff;
  border: 1px solid rgba(47, 125, 86, .26);
}

.load-pill.amber {
  color: var(--warning);
  background: #fff8eb;
  border: 1px solid rgba(179, 107, 24, .24);
}

.load-pill.red {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid rgba(169, 50, 56, .24);
}

.assignment-warning {
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.assignment-warning.red {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(169, 50, 56, .24);
}

.assignment-warning.amber {
  color: var(--warning);
  background: #fff8eb;
  border-color: rgba(179, 107, 24, .24);
}

.assignment-warning.green {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(47, 125, 86, .24);
}

.client-call-modal {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 62%);
}

.client-call-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  background:
    linear-gradient(135deg, rgba(36, 63, 134, .08), rgba(36, 143, 211, .04)),
    rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(24, 38, 55, .06);
}

.client-call-head h2 {
  margin: 2px 0 0;
  font-size: 24px;
}

.client-modal-close {
  width: auto;
  margin: 0;
}

.client-call-summary-card,
.client-call-section,
.client-call-assignment-fields,
.client-call-next-fields,
.client-call-discard-fields,
.client-call-modal > label,
.client-call-modal > textarea {
  margin-left: 22px;
  margin-right: 22px;
}

.client-call-summary-card {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(202, 221, 245, .9);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(24, 38, 55, .06);
}

.client-call-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.client-avatar.small {
  width: 46px;
  height: 46px;
  font-size: 16px;
}

.client-call-person strong,
.client-call-person span {
  display: block;
}

.client-call-person strong {
  font-size: 20px;
  line-height: 1.2;
}

.client-call-person span {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.client-call-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.client-call-section {
  margin-top: 16px;
}

.client-call-section-title {
  margin: 18px 0 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.client-call-assignment-fields {
  padding: 0;
}

.whatsapp-modal {
  width: min(620px, calc(100vw - 28px));
}

.whatsapp-modal textarea {
  min-height: 150px;
}

.whatsapp-help {
  margin-top: 6px;
}

.client-call-followup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.client-call-discard-fields {
  display: none;
}

body[data-client-call-result="descartar"] .client-call-next-fields,
body[data-client-call-result="descartar"] .client-call-assignment-fields {
  display: none;
}

body[data-client-call-result="descartar"] .client-call-discard-fields {
  display: block;
}

body[data-client-call-result="no_contesta"] .client-call-assignment-fields {
  display: none;
}

body[data-client-call-result="anotacion"] .client-call-assignment-fields {
  display: none;
}

.client-call-summary .compact-note {
  margin: 10px 0 0;
  max-height: 150px;
}

.client-call-modal > textarea {
  min-height: 150px;
  background: #fff;
}

.client-call-modal .actions {
  position: sticky;
  bottom: 0;
  margin: 18px 0 0;
  padding: 14px 22px;
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 24px rgba(24, 38, 55, .07);
}

.client-call-priority {
  margin-top: 0;
  align-self: end;
  min-height: 50px;
}

@media (max-width: 700px) {
  .client-call-followup-fields {
    grid-template-columns: 1fr;
  }

  .client-call-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.priority-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(169, 50, 56, .2);
  background: #fff8f7;
  border-radius: 6px;
  cursor: pointer;
}

.priority-toggle input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

.priority-toggle-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: #a93238;
  color: #fff;
  font-weight: 950;
}

.priority-toggle strong,
.priority-toggle small {
  display: block;
}

.priority-toggle small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.calendar-date {
  font-weight: 800;
  color: var(--accent);
}

.calendar-panel { padding: 20px; }

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.calendar-head h2 {
  margin: 0;
  text-align: center;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  margin-bottom: 14px;
}

.calendar-legend span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 6px 10px;
  font-weight: 700;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
  gap: 1px;
  overflow: hidden;
}

.calendar-dow {
  background: #f3f6fa;
  color: var(--muted);
  min-height: 40px;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.calendar-day {
  background: #fff;
  min-height: 128px;
  padding: 9px;
  position: relative;
}

.calendar-day.empty {
  background: #f1f5f9;
}

.calendar-day.today {
  box-shadow: inset 0 0 0 3px rgba(36, 143, 211, .42);
}

.day-number {
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 8px;
}

.day-badges {
  display: grid;
  gap: 5px;
}

.day-badge {
  width: 100%;
  min-height: 27px;
  padding: 4px 7px;
  font-size: 12px;
  justify-content: flex-start;
  border: 1px solid transparent;
  box-shadow: none;
}

.day-badge.th { background: var(--success); }
.day-badge.tp { background: var(--accent); }
.day-badge.cit { background: var(--warning); }

.day-badge.zero {
  background: #f7fafc;
  color: var(--muted);
  border-color: var(--border);
}

.calendar-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 28, 42, .56);
  z-index: 20;
  backdrop-filter: blur(3px);
}

.calendar-modal {
  display: none;
  position: fixed;
  z-index: 21;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(17, 31, 46, .28);
}

body.show-calendar-modal .calendar-modal,
body.show-calendar-modal .calendar-modal-backdrop {
  display: block;
}

.calendar-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.calendar-modal-head h2 { margin: 0; }

.calendar-modal-body {
  padding: 18px;
  max-height: calc(100vh - 140px);
  overflow: auto;
  display: grid;
  gap: 10px;
  background: var(--panel-soft);
}

.modal-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 13px;
}

.modal-item-actions { margin-top: 10px; }

.empty-state {
  text-align: center;
  padding: 42px;
}

.daily-empty-state {
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 42px);
  background: transparent;
}

.daily-empty-state img {
  display: block;
  width: min(100%, 980px);
  max-height: min(66vh, 620px);
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 22px 52px rgba(24, 48, 82, .14);
}

.status-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-pill.success {
  color: var(--success);
  background: var(--success-soft);
  border-color: rgba(47, 125, 86, .22);
}

.status-pill.error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(169, 50, 56, .22);
}

.email-layout {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.email-summary,
.email-wizard {
  margin-top: 0;
}

.email-account {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.email-avatar {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 900;
}

.email-account strong,
.email-account span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-account span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.email-details {
  margin: 18px 0 0;
  display: grid;
  gap: 12px;
}

.email-details div {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.email-details dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.email-details dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.notice.compact {
  margin: 16px 0 0;
}

.disconnect-form {
  margin-top: 16px;
}

button.danger-link {
  color: var(--danger);
}

.wizard-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.wizard-step {
  min-height: 48px;
  justify-content: flex-start;
  background: #fff;
  color: var(--muted);
  border-color: var(--border);
  box-shadow: none;
}

.wizard-step span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
}

.wizard-step.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 9px 18px rgba(36, 63, 134, .18);
}

.wizard-step.active span {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.wizard-page {
  display: none;
}

.wizard-page.active {
  display: block;
}

.provider-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.provider-option {
  margin: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-soft);
  padding: 12px;
  color: var(--text);
  cursor: pointer;
}

.provider-option input {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  box-shadow: none;
}

.provider-option span,
.provider-option strong,
.provider-option small {
  display: block;
}

.provider-option small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.viviendas-head {
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding: 4px 0 2px;
}

.viviendas-head > div:first-child {
  min-width: 0;
  max-width: 780px;
}

.viviendas-head h1 {
  font-size: 32px;
}

.viviendas-head .muted {
  max-width: 760px;
  font-size: 15px;
}

.viviendas-head .page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.viviendas-head .page-actions button {
  min-height: 44px;
  padding: 0 18px;
}

.viviendas-head #enable-selection,
.viviendas-head #cancel-selection {
  border-color: #c7d4df;
  background: #fff;
  color: #111827;
  box-shadow: 0 8px 20px rgba(23, 34, 49, .06);
}

.viviendas-kpis {
  gap: 10px;
  margin-bottom: 12px;
}

.viviendas-kpis .kpi {
  position: relative;
  overflow: hidden;
  min-height: 86px;
  padding: 14px 18px 14px 20px;
  background: linear-gradient(180deg, #fff 0%, #f8fbfd 100%);
  border-color: #d5e1ea;
}

.viviendas-kpis .kpi::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: var(--accent-2);
}

.viviendas-kpis .kpi:nth-child(2)::before {
  background: var(--success);
}

.viviendas-kpis .kpi:nth-child(3)::before {
  background: #5b7fa8;
}

.viviendas-kpis .kpi:nth-child(4)::before {
  background: var(--accent);
}

.viviendas-kpis .kpi span {
  font-size: 13px;
  font-weight: 800;
}

.viviendas-kpis .kpi strong {
  margin-top: 8px;
  font-size: 29px;
}

.viviendas-filterbar {
  display: grid;
  grid-template-columns: minmax(88px, .6fr) minmax(145px, 1fr) minmax(145px, 1fr) minmax(135px, .95fr) minmax(122px, .76fr) minmax(122px, .76fr) minmax(104px, .64fr) minmax(160px, .95fr) auto auto;
  gap: 10px;
  align-items: flex-end;
  margin: 14px 0 10px;
  padding: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #f2f7fb 100%);
  border: 1px solid #d0dde8;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.filter-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.filter-field label {
  color: #42576a;
  font-size: 12px;
  font-weight: 900;
}

.filter-field input,
.filter-field select,
.multi-select summary {
  width: 100%;
  min-height: 40px;
  border: 1px solid #c9d7e3;
  border-radius: 6px;
  background: #fff;
  color: #20303a;
  box-shadow: none;
}

.multi-field {
  position: relative;
}

.multi-select {
  position: relative;
}

.multi-select summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
}

.multi-select summary::-webkit-details-marker {
  display: none;
}

.multi-select summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid #20303a;
  border-bottom: 2px solid #20303a;
  transform: rotate(45deg) translateY(-2px);
}

.multi-select.is-disabled summary {
  background: #eef3f7;
  color: #718294;
  cursor: not-allowed;
}

.multi-select.is-disabled summary::after {
  border-color: #8fa0af;
}

.multi-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  width: max(100%, 240px);
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: 2px;
  padding: 8px;
  background: #fff;
  border: 1px solid #c9d7e3;
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(24, 38, 55, .15);
}

.multi-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 7px;
  border-radius: 6px;
  color: #20303a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.multi-options label:hover {
  background: #f1f6fa;
}

.multi-options input {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  padding: 0;
  box-shadow: none;
}

.multi-options span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-field.search input {
  min-width: 0;
}

.viviendas-filterbar button,
.viviendas-filterbar .button {
  min-height: 40px;
  padding-inline: 18px;
  white-space: nowrap;
}

.viviendas-filterbar button[type="submit"] {
  min-width: 96px;
}

.viviendas-filterbar .button.secondary {
  background: transparent;
  color: var(--accent);
  border-color: rgba(36, 63, 134, .28);
  box-shadow: none;
}

.viviendas-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.viviendas-status span,
.viviendas-status strong {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  background: #eaf1f5;
  color: #20303a;
  font-size: 12px;
  font-weight: 800;
}

.viviendas-status span.own { background: #dff3ea; }
.viviendas-status span.external { background: #dceff8; }
.viviendas-status strong {
  margin-left: auto;
  color: var(--muted);
  background: transparent;
}

.viviendas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(284px, 1fr));
  gap: 18px;
}

.vivienda-card {
  min-height: 402px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 184px 1fr;
  background: #f4f7f9;
  border: 1px solid #dce4e9;
  border-radius: 8px;
  box-shadow: 4px 5px 0 #43515b;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.vivienda-card:hover {
  background: #fff;
  border-color: #2b8dbc;
  box-shadow: 5px 6px 0 #2b8dbc;
  transform: translateY(-1px);
}

.vivienda-card.selected {
  border-color: #2178a6;
  box-shadow: 5px 6px 0 #2178a6;
}

.vivienda-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 184px;
  background: #172331;
  color: #fff;
  font-size: 42px;
  font-weight: 900;
}

.vivienda-select-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #20303a;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
  cursor: pointer;
}

body.selection-mode .vivienda-select-pill {
  display: inline-flex;
}

#cancel-selection {
  display: none;
}

body.selection-mode #enable-selection {
  display: none;
}

body.selection-mode #cancel-selection {
  display: inline-flex;
}

.vivienda-select-pill input {
  width: 15px;
  height: 15px;
  padding: 0;
  box-shadow: none;
}

.vivienda-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vivienda-media mark {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.vivienda-media mark.own { background: #3ba273; }
.vivienda-media mark.external { background: #2e9ed0; }

.vivienda-body {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 9px;
  padding: 14px;
}

.vivienda-body small {
  display: block;
  color: #7a8892;
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.vivienda-body h2 {
  display: -webkit-box;
  min-height: 40px;
  margin: 3px 0 0;
  overflow: hidden;
  color: #20303a;
  font-size: 16px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.vivienda-price {
  color: #2178a6;
  font-size: 19px;
  line-height: 1.1;
}

.vivienda-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
}

.vivienda-chips span {
  min-height: 25px;
  padding: 4px 8px;
  background: #e8f0f4;
  border: 1px solid #dce4e9;
  border-radius: 999px;
  color: #5a6974;
  font-size: 12px;
  font-weight: 800;
}

.vivienda-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #dce4e9;
  color: #7a8892;
  font-size: 12px;
  font-weight: 700;
}

.vivienda-card footer span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viviendas-actions {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0 0;
}

.selection-bar {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding: 12px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 -10px 26px rgba(24, 38, 55, .08);
  backdrop-filter: blur(12px);
}

body.has-selection .selection-bar {
  display: flex;
}

.selection-bar strong {
  margin-right: auto;
  color: #20303a;
}

.selection-hint {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.selection-client-search {
  display: grid;
  grid-template-columns: auto minmax(180px, 260px);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.selection-client-search input {
  min-height: 36px;
}

.selection-client-chip {
  padding: 7px 10px;
  background: var(--success-soft);
  border: 1px solid rgba(47, 125, 86, .22);
  border-radius: 999px;
  color: var(--success);
  font-size: 12px;
  font-weight: 900;
}

.selection-bar button:disabled {
  cursor: not-allowed;
  opacity: .52;
  transform: none;
}

.proposal-modal-backdrop,
.proposal-modal {
  display: none;
}

.proposal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(23, 34, 49, .42);
}

.proposal-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 31;
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 22px 70px rgba(23, 34, 49, .22);
}

body.show-proposal-modal .proposal-modal,
body.show-proposal-modal .proposal-modal-backdrop {
  display: block;
}

.proposal-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.proposal-modal-head h2 {
  margin: 0;
}

.selected-summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-weight: 800;
}

.landing-created a {
  overflow-wrap: anywhere;
  font-weight: 900;
}

.client-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #edf7f2;
  border: 1px solid rgba(47, 125, 86, .28);
  border-radius: 8px;
}

.client-context-bar div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.client-context-bar span {
  color: var(--success);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.client-context-bar strong {
  color: #20303a;
}

.client-context-bar small {
  color: var(--muted);
  font-weight: 800;
}

.client-quick-actions {
  margin-top: 14px;
}

.client-profile-card {
  display: grid;
  gap: 18px;
}

.client-profile-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.client-profile-main {
  min-width: 0;
}

.client-profile-main h1 {
  margin-top: 5px;
  font-size: 34px;
}

.client-contact-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

.client-contact-line span {
  overflow-wrap: anywhere;
}

.client-profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.client-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.client-profile-grid div {
  min-height: 74px;
  padding: 12px 13px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.client-profile-grid span,
.client-profile-grid small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.client-profile-grid strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 16px;
}

.client-profile-grid small {
  margin-top: 4px;
}

.client-edit-modal {
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.client-edit-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-bottom: 13px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.client-edit-head h2 {
  margin: 0;
}

.activity-list {
  display: grid;
  gap: 10px;
}

.activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.activity-item p {
  margin: 4px 0 0;
  color: var(--muted);
}

.activity-comment {
  margin-top: 9px;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.activity-item small {
  display: inline-block;
  margin-top: 6px;
  color: var(--accent);
  font-weight: 900;
}

.activity-meta {
  display: grid;
  gap: 6px;
  justify-items: end;
  align-content: start;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.activity-meta a {
  color: var(--accent);
  font-size: 13px;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 24px;
}

.wizard-actions {
  min-height: 46px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mail-layout {
  display: grid;
  grid-template-columns: 210px minmax(300px, 390px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.mail-folders,
.inbox-panel,
.mail-reader {
  margin-top: 0;
}

.mail-reader {
  min-height: 520px;
}

.mail-folders {
  padding: 16px;
  position: sticky;
  top: 18px;
}

.mail-account-card {
  display: grid;
  gap: 4px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.mail-account-card strong {
  color: var(--text);
  font-size: 16px;
}

.mail-account-card span {
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-folder-list {
  display: grid;
  gap: 6px;
}

.mail-folder-list a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--text);
  text-decoration: none;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.mail-folder-list a:hover,
.mail-folder-list a.active {
  background: var(--accent-soft);
  color: var(--navy);
}

.mail-folder-list a.active {
  box-shadow: inset 4px 0 0 var(--navy);
}

.mail-folder-list span {
  font-weight: 900;
}

.mail-folder-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.mail-toolbar h2 {
  margin: 0;
}

.mail-toolbar p {
  margin: 2px 0 0;
}

.mail-search {
  width: 100%;
  margin-bottom: 10px;
  min-height: 42px;
}

.inbox-list {
  display: grid;
  gap: 7px;
  max-height: calc(100vh - 250px);
  overflow: auto;
  padding-right: 4px;
}

.inbox-item {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.inbox-item:hover,
.inbox-item.active {
  border-color: rgba(36, 143, 211, .62);
  background: var(--accent-soft);
  box-shadow: var(--shadow-sm);
}

.inbox-item.unseen strong {
  font-weight: 900;
}

.inbox-item.seen strong {
  color: var(--text);
}

.inbox-item span,
.inbox-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-item span {
  color: var(--muted);
}

.inbox-item small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mail-reader-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.mail-reader-head h2 {
  margin: 0 0 6px;
}

.mail-reader-head p {
  margin: 0;
}

.mail-recipients {
  margin-top: 5px !important;
  overflow-wrap: anywhere;
}

.mail-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.mail-action-bar form {
  margin: 0;
}

.mail-action-bar button {
  min-height: 36px;
  padding: 8px 11px;
}

.mail-body-frame {
  width: 100%;
  min-height: 420px;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

.reply-box {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.reply-box.collapsed {
  display: none;
}

.hidden {
  display: none !important;
}

.client-match-box {
  margin: 14px 0 4px;
  padding: 12px 13px;
  border: 1px solid rgba(47, 125, 86, .24);
  border-radius: 6px;
  background: var(--success-soft);
}

.client-match-box .checkbox-row {
  margin-top: 0;
  color: var(--text);
}

.client-match-box p {
  margin: 7px 0 0;
  font-size: 13px;
}

.reply-box textarea {
  min-height: 150px;
}

.signature-note {
  margin: 8px 0 0;
}

.profile-panel {
  display: grid;
  gap: 18px;
}

.profile-photo-block {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.profile-photo-preview {
  width: 96px;
  height: 96px;
  font-size: 30px;
}

.profile-photo-block h2,
.profile-password h2 {
  margin-bottom: 6px;
}

.profile-photo-block p {
  margin: 0;
}

.profile-signature-block {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.signature-preview {
  min-height: 120px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-weight: 900;
  overflow: hidden;
}

.signature-preview img {
  display: block;
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
}

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-weight: 800;
}

.checkbox-row input {
  width: auto;
}

.profile-password {
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.dossier-page,
.proposal-page {
  background: #eef3f8;
}

.dossier-shell,
.proposal-shell {
  width: min(1120px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 28px 0 42px;
}

.dossier-cover,
.proposal-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.proposal-hero {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
}

.proposal-hero img {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

.proposal-hero h1,
.dossier-cover h1 {
  margin: 0;
}

.proposal-hero p {
  margin: 8px 0 0;
}

.proposal-contact,
.dossier-facts,
.proposal-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.proposal-contact span,
.dossier-facts span,
.proposal-facts span {
  padding: 5px 9px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.dossier-property,
.proposal-property {
  break-inside: avoid;
  overflow: hidden;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.dossier-main-image,
.proposal-media {
  min-height: 230px;
  background: #172331;
}

.dossier-main-image img,
.proposal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dossier-property-body,
.proposal-body {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.dossier-property-body strong,
.proposal-body strong {
  color: #2178a6;
  font-size: 22px;
}

.dossier-property-body small,
.proposal-body small {
  color: var(--muted);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.proposal-grid {
  display: grid;
  gap: 18px;
}

.proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.proposal-actions form {
  margin: 0;
}

.proposal-page {
  background: #edf2f6;
}

.proposal-shell {
  width: min(1240px, calc(100vw - 40px));
  padding: 28px 0 54px;
}

.proposal-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: stretch;
  gap: 26px;
  min-height: 390px;
  padding: 34px;
  background: #ffffff;
  border: 1px solid #d7e2ec;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(18, 34, 55, .12);
}

.proposal-hero-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 18px;
}

.proposal-brandbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 8px;
}

.proposal-brandbar img {
  width: 138px;
  height: auto;
  object-fit: contain;
}

.proposal-brandbar span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid #d7e2ec;
  border-radius: 999px;
  color: #17345a;
  background: #f7fafc;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.proposal-hero .eyebrow {
  margin: 0;
  color: #2778a8;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.proposal-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #0d2238;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1;
  letter-spacing: 0;
}

.proposal-message {
  max-width: 920px;
  margin: 0;
  color: #24384f;
  font-size: 20px;
  line-height: 1.5;
}

.proposal-contact {
  margin-top: 6px;
}

.proposal-contact span,
.proposal-facts span {
  min-height: 34px;
  padding: 7px 12px;
  background: #f5f8fb;
  border: 1px solid #d8e3ec;
  color: #52677d;
}

.proposal-agent {
  display: grid;
  grid-template-rows: 180px minmax(0, 1fr);
  overflow: hidden;
  background: #10243a;
  border-radius: 8px;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.proposal-agent-photo {
  min-height: 180px;
  display: grid;
  place-items: center;
  background: #dfe8ef;
}

.proposal-agent-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proposal-agent-photo span {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: #17345a;
  font-size: 34px;
  font-weight: 900;
}

.proposal-agent-body {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px;
}

.proposal-agent-body small {
  color: #8fd0e8;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.proposal-agent-body h2 {
  margin: 0;
  color: #ffffff;
  font-size: 25px;
}

.proposal-agent-body p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
}

.proposal-agent-links {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.proposal-agent-links a {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  color: #ffffff;
  background: rgba(255, 255, 255, .08);
  text-decoration: none;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.proposal-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 22px;
}

.proposal-summary div {
  padding: 18px;
  background: #ffffff;
  border: 1px solid #d7e2ec;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(18, 34, 55, .07);
}

.proposal-summary span {
  display: block;
  color: #6a7d90;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.proposal-summary strong {
  display: block;
  margin-top: 4px;
  color: #10243a;
  font-size: 22px;
}

.proposal-grid {
  gap: 22px;
}

.proposal-property {
  grid-template-columns: minmax(360px, 42%) minmax(0, 1fr);
  min-height: 430px;
  border: 1px solid #d7e2ec;
  border-radius: 8px;
  box-shadow: 0 18px 52px rgba(18, 34, 55, .1);
}

.proposal-media {
  min-height: 430px;
  display: grid;
  place-items: center;
  background: #10243a;
}

.proposal-media img {
  transition: transform .25s ease;
}

.proposal-property:hover .proposal-media img {
  transform: scale(1.018);
}

.proposal-media span {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: #17345a;
  font-size: 24px;
  font-weight: 900;
}

.proposal-body {
  align-content: start;
  gap: 14px;
  padding: 28px;
}

.proposal-property-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.proposal-property-head small {
  color: #66788b;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.proposal-property-head strong {
  color: #2778a8;
  font-size: 26px;
  white-space: nowrap;
}

.proposal-body h2 {
  margin: 0;
  color: #0d2238;
  font-size: 24px;
  line-height: 1.22;
}

.proposal-location {
  margin: 0;
  color: #5d6f82;
  font-size: 18px;
}

.proposal-description {
  margin: 4px 0 0;
  color: #23364d;
  font-size: 16px;
  line-height: 1.58;
}

.proposal-actions {
  margin-top: 8px;
  padding-top: 16px;
}

.proposal-actions button {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 900;
}

@media print {
  body {
    background: #fff;
  }

  .sidebar,
  .selection-bar,
  .dossier-cover button,
  .proposal-actions {
    display: none !important;
  }

  .dossier-shell,
  .proposal-shell {
    width: 100%;
    padding: 0;
  }

  .dossier-property,
  .proposal-property,
  .dossier-cover,
  .proposal-hero {
    box-shadow: none;
  }
}

@media (max-width: 920px) {
  .grid,
  .mission-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-subtabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-dashboard {
    grid-template-columns: 1fr;
  }

  .viviendas-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-layout,
  .email-layout,
  .mail-layout {
    grid-template-columns: 1fr;
  }

  .mail-folders {
    position: static;
  }

  .mail-folder-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar {
    position: static;
    min-height: auto;
    height: auto;
  }
}

@media (max-width: 760px) {
  .portal-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    min-height: auto;
    height: auto;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-user {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .user-avatar {
    width: 56px;
    height: 56px;
    font-size: 18px;
  }

  .side-nav {
    grid-template-columns: 1fr;
  }

  .page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .visitas-head-actions {
    width: 100%;
  }

  .visitas-head-actions {
    justify-content: space-between;
  }

  .commercial-help-grid {
    grid-template-columns: 1fr;
  }

  .clients-actions {
    width: 100%;
    display: grid;
  }

  .client-profile-top,
  .client-profile-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .client-profile-actions .button,
  .client-profile-actions button {
    width: 100%;
  }

  .client-search {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .client-summary-grid,
  .client-row {
    grid-template-columns: 1fr;
  }

  .client-row-side {
    justify-items: start;
    text-align: left;
  }

  .compact-grid {
    grid-template-columns: 1fr;
  }

  .client-create-modal {
    width: min(100vw - 18px, 880px);
  }

  .client-create-modal .client-create-head {
    align-items: stretch;
    flex-direction: column;
  }

  .client-modal-close {
    width: 100%;
  }

  .profile-photo-block {
    grid-template-columns: 1fr;
  }

  .topbar {
    height: auto;
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 16px;
  }

  .shell { padding: 16px; }

  .login-wrap { padding: 12px; }
  .login-shell {
    width: min(430px, 100%);
    grid-template-columns: 1fr;
    border-radius: 16px;
  }
  .login-box { padding: 18px 18px 16px; }
  .login-logo { width: min(188px, 72%); }
  .login-illustration {
    height: 172px;
    width: 100%;
  }
  .login-bear {
    width: 238px;
    height: 132px;
  }
  .login-bear .head {
    left: 58px;
    top: 17px;
    width: 112px;
    height: 88px;
  }
  .login-bear .body {
    left: 30px;
    height: 88px;
  }
  .login-bear .ear {
    width: 40px;
    height: 40px;
  }
  .login-bear .ear.left { left: 44px; }
  .login-bear .ear.right { right: 56px; }
  .login-bear .nose {
    left: 106px;
    top: 63px;
    width: 38px;
    height: 27px;
  }
  .login-bear .paw {
    width: 56px;
    height: 43px;
  }
  .login-house {
    right: 30px;
    bottom: 42px;
    transform: scale(.82);
  }
  .login-sleep-bubble {
    right: 64px;
    top: 10px;
    transform: rotate(-8deg) scale(.82);
  }
  .login-plant {
    transform: scale(.82);
  }
  .login-plant.right {
    transform: scaleX(-1) scale(.82);
  }
  .login-brand h1 { font-size: 34px; }
  .login-subtitle {
    font-size: 15px;
    gap: 10px;
  }
  .login-subtitle::before,
  .login-subtitle::after {
    width: 58px;
  }
  .login-field {
    min-height: 58px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    margin-top: 12px;
  }
  .login-field-icon {
    width: 36px;
    height: 36px;
  }
  .login-field input {
    min-height: 50px;
    font-size: 16px;
  }
  .login-actions button {
    min-height: 54px;
    font-size: 19px;
  }
  .login-promise {
    grid-template-columns: 62px auto 62px;
    font-size: 14px;
    margin-top: 16px;
  }
  .login-quote {
    min-height: 156px;
    padding: 38px 22px 22px;
  }
  .quote-text { font-size: 20px; }

  .grid,
  .viviendas-grid,
  .form-grid,
  .mission-facts,
  .control-section-summary,
  .control-kpis,
  .control-subtabs,
  .visitas-filterbar,
  .tabs,
  .provider-options,
  .wizard-steps,
  .profile-signature-block {
    grid-template-columns: 1fr;
  }

  .wizard-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .viviendas-filterbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .filter-field,
  .filter-field.compact,
  .filter-field.search {
    flex-basis: 100%;
  }

  .viviendas-filterbar button,
  .viviendas-filterbar .button,
  .viviendas-head .page-actions,
  .viviendas-head .page-actions button {
    width: 100%;
  }

  .viviendas-status strong {
    width: 100%;
    margin-left: 0;
  }

  .selection-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .selection-bar strong {
    margin-right: 0;
  }

  .selection-client-search {
    grid-template-columns: 1fr;
  }

  .proposal-modal-head {
    flex-direction: column;
  }

  .dossier-cover,
  .proposal-hero,
  .dossier-property,
  .proposal-property {
    grid-template-columns: 1fr;
  }

  .dossier-cover {
    flex-direction: column;
  }

  .proposal-hero {
    display: grid;
  }

  .wizard-actions button {
    width: 100%;
  }

  .cliente-card { grid-template-columns: 1fr; }
  .cliente-card-actions { justify-items: start; }
  .client-row,
  .client-row-link {
    grid-template-columns: 1fr;
  }
  .client-row-actions {
    justify-content: flex-start;
  }
  .visit-row,
  .visit-loss-fields {
    grid-template-columns: 1fr;
  }
  .visit-card-top,
  .visit-followup-head {
    align-items: stretch;
    flex-direction: column;
  }
  .visit-date-pill {
    width: 100%;
    text-align: left;
  }
  .visit-meta-grid {
    grid-template-columns: 1fr;
  }
  .visit-followup {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 14px;
  }
  .visitas-filter-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .visitas-filter-actions .button,
  .visitas-filter-actions button,
  .visitas-head button {
    width: 100%;
  }
  .control-panel-head,
  .control-list-card {
    grid-template-columns: 1fr;
  }
  .control-panel-head {
    flex-direction: column;
  }
  .control-card-side {
    justify-items: start;
    text-align: left;
  }
  .control-group summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .mission-top { flex-direction: column; }

  .mission-top,
  .mission-facts,
  .mission-property,
  .mission-action-panel {
    padding-left: 18px;
    padding-right: 18px;
  }

  .mission-property {
    grid-template-columns: 1fr;
  }

  .mission-property-media {
    min-height: 190px;
  }

  .mission-property.is-pending .mission-property-media {
    min-height: 150px;
  }

  .mission-property-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .mission-property,
  .last-note,
  .lead-raw-text {
    margin-left: 18px;
    margin-right: 18px;
  }

  .mission-buttons button,
  .mission-buttons .button,
  .mission-buttons form {
    width: 100%;
  }

  .mission-status-box {
    justify-items: start;
  }

  .mission-top h1 {
    font-size: 24px;
  }

  .mission-objective {
    align-items: flex-start;
  }

  .mission-buttons {
    grid-template-columns: 1fr;
  }

  .mission-buttons button,
  .mission-buttons .button {
    min-height: 58px;
    padding: 11px 14px 11px 60px;
    font-size: 17px;
  }

  .mission-buttons button::before,
  .mission-buttons .button::before {
    left: 18px;
    width: 30px;
    height: 30px;
  }

  .mission-buttons button::after,
  .mission-buttons .button::after {
    left: 60px;
    font-size: 11px;
  }

  .calendar-grid { grid-template-columns: 1fr; }
  .calendar-dow { display: none; }
  .calendar-day.empty { display: none; }
  .calendar-day { min-height: 112px; }
  .calendar-head { flex-direction: column; }
  .calendar-head .button { width: 100%; }

  h1 { font-size: 25px; }
}

@media (max-width: 980px) {
  .proposal-shell {
    width: min(100% - 24px, 1240px);
    padding-top: 16px;
  }

  .proposal-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 22px;
  }

  .proposal-agent {
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .proposal-agent-photo {
    min-height: 100%;
  }

  .proposal-summary {
    grid-template-columns: 1fr;
  }

  .proposal-property {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .proposal-media {
    min-height: 260px;
  }
}

@media (max-width: 640px) {
  .proposal-brandbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .proposal-brandbar img {
    width: 126px;
  }

  .proposal-hero h1 {
    font-size: 34px;
  }

  .proposal-message {
    font-size: 17px;
  }

  .proposal-agent {
    grid-template-columns: 1fr;
  }

  .proposal-agent-photo {
    min-height: 220px;
  }

  .proposal-property-head {
    flex-direction: column;
    gap: 6px;
  }

  .proposal-property-head strong {
    white-space: normal;
  }

  .proposal-body {
    padding: 20px;
  }

  .proposal-actions,
  .proposal-actions form,
  .proposal-actions button {
    width: 100%;
  }
}

.proposal-agent {
  grid-template-columns: 132px minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 22px;
  padding: 22px;
  background: #f8fbfd;
  border: 1px solid #d7e2ec;
  color: #10243a;
  box-shadow: 0 14px 34px rgba(18, 34, 55, .08);
}

.proposal-agent-photo {
  width: 132px;
  height: 132px;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #e5edf3;
  box-shadow: inset 0 0 0 1px rgba(16, 36, 58, .08);
}

.proposal-agent-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.proposal-agent-photo span {
  width: 74px;
  height: 74px;
  font-size: 26px;
}

.proposal-agent-body {
  gap: 8px;
  padding: 0;
  align-content: center;
}

.proposal-agent-body small {
  color: #2778a8;
}

.proposal-agent-body h2 {
  color: #0d2238;
  font-size: 24px;
}

.proposal-agent-body p {
  max-width: 360px;
  color: #52677d;
  font-size: 17px;
  line-height: 1.45;
}

.proposal-agent-links {
  grid-template-columns: minmax(0, 1fr);
  max-width: 340px;
}

.proposal-agent-links a {
  min-height: 36px;
  padding: 7px 10px;
  border-color: #d7e2ec;
  color: #17345a;
  background: #ffffff;
}

@media (max-width: 980px) {
  .proposal-agent {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .proposal-agent-photo {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .proposal-agent {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  .proposal-agent-photo {
    width: 96px;
    height: 96px;
  }

  .proposal-agent-body h2 {
    font-size: 20px;
  }
}

.proposal-hero {
  grid-template-columns: minmax(0, 1fr) minmax(500px, 560px);
  align-items: center;
  gap: 34px;
}

.proposal-hero h1 {
  font-size: 58px;
}

.proposal-agent {
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  min-height: 246px;
  padding: 28px;
}

.proposal-agent-photo {
  width: 190px;
  height: 190px;
  align-self: center;
}

.proposal-agent-body {
  min-width: 0;
  gap: 10px;
  text-align: left;
}

.proposal-agent-body small {
  line-height: 1.25;
}

.proposal-agent-body h2 {
  font-size: 30px;
  line-height: 1.1;
}

.proposal-agent-body p {
  max-width: 290px;
}

.proposal-agent-links {
  max-width: 100%;
}

.proposal-agent-links a {
  overflow-wrap: anywhere;
}

.proposal-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.proposal-section-head .eyebrow {
  margin: 0;
  color: #2778a8;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.proposal-section-head h2 {
  margin: 2px 0 0;
  color: #0d2238;
  font-size: 26px;
}

.proposal-compare {
  margin: 0 0 22px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid #d7e2ec;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(18, 34, 55, .08);
}

.proposal-compare-table-wrap {
  overflow-x: auto;
}

.proposal-compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.proposal-compare-table th {
  padding: 10px 12px;
  border-bottom: 1px solid #d7e2ec;
  color: #6a7d90;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
}

.proposal-compare-table td {
  padding: 13px 12px;
  border-bottom: 1px solid #edf2f6;
  color: #23364d;
  vertical-align: top;
}

.proposal-compare-table tr:last-child td {
  border-bottom: 0;
}

.proposal-compare-table td:first-child a {
  display: grid;
  gap: 3px;
  color: #0d2238;
  text-decoration: none;
}

.proposal-compare-table td:first-child span {
  color: #6a7d90;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.proposal-compare-link,
.proposal-advisor-action {
  border-radius: 8px;
  text-decoration: none;
  font-weight: 900;
}

.proposal-compare-link {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  background: #edf7fb;
  color: #0d5d85;
}

.proposal-advisor-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid #d7e2ec;
  background: #ffffff;
  color: #17345a;
}

.proposal-floating-cta {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 50;
  width: min(560px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  background: #10243a;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(16, 36, 58, .25);
  color: #ffffff;
  transform: translateX(-50%);
}

.proposal-floating-cta span {
  min-width: 0;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proposal-floating-cta a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  background: #7fd1ad;
  border-radius: 8px;
  color: #082018;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.proposal-page {
  padding-bottom: 84px;
}

@media (max-width: 1280px) {
  .proposal-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .proposal-agent {
    width: min(100%, 680px);
  }
}

@media (max-width: 980px) {
  .proposal-hero h1 {
    font-size: 42px;
  }

  .proposal-agent {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .proposal-agent-photo {
    width: 170px;
    height: 170px;
  }
}

@media (max-width: 640px) {
  .proposal-agent {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    padding: 16px;
  }

  .proposal-agent-photo {
    width: 112px;
    height: 112px;
  }

  .proposal-agent-body {
    gap: 7px;
  }

  .proposal-agent-body h2 {
    font-size: 22px;
  }

  .proposal-agent-body p {
    max-width: none;
    font-size: 15px;
  }

  .proposal-agent-links a {
    min-height: 34px;
    font-size: 14px;
  }

  .proposal-compare {
    padding: 16px;
  }

  .proposal-section-head h2 {
    font-size: 22px;
  }

  .proposal-floating-cta {
    bottom: 10px;
    align-items: stretch;
    flex-direction: column;
  }

  .proposal-floating-cta span {
    white-space: normal;
  }

  .proposal-floating-cta a {
    width: 100%;
  }
}

@media print {
  .proposal-floating-cta {
    display: none !important;
  }

  .proposal-page {
    padding-bottom: 0;
  }
}

.proposal-live-status,
.proposal-cart,
.proposal-chat {
  margin: 0 0 22px;
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid #d7e2ec;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(18, 34, 55, .08);
}

.proposal-live-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.proposal-live-status strong,
.proposal-chat-head > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0d2238;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.proposal-live-status strong::before,
.proposal-chat-head > span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9aa8b5;
}

.proposal-live-status.is-online strong::before,
.proposal-chat-head > span.is-online::before {
  background: #2f9d67;
  box-shadow: 0 0 0 5px rgba(47, 157, 103, .12);
}

.proposal-live-status.is-away strong::before,
.proposal-chat-head > span.is-away::before {
  background: #d99a2b;
  box-shadow: 0 0 0 5px rgba(217, 154, 43, .13);
}

.proposal-live-status span {
  color: #52677d;
  font-weight: 800;
}

.proposal-cart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.proposal-cart h2,
.proposal-chat h2 {
  margin: 2px 0 0;
  color: #0d2238;
  font-size: 24px;
}

.proposal-cart .eyebrow,
.proposal-chat .eyebrow {
  margin: 0;
  color: #2778a8;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.proposal-cart p {
  max-width: 560px;
  margin: 0;
  color: #52677d;
}

.proposal-cart-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.proposal-cart-list a,
.proposal-compare-link.is-selected {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 8px;
  background: #e8f7ef;
  color: #17613c;
  font-weight: 900;
  text-decoration: none;
}

.proposal-property.is-favorite {
  border-color: rgba(47, 157, 103, .42);
  box-shadow: 0 18px 42px rgba(47, 157, 103, .12);
}

.proposal-actions button.selected {
  background: #2f9d67;
  border-color: #2f9d67;
}

.proposal-chat {
  display: grid;
  gap: 14px;
}

.proposal-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.proposal-chat-log {
  min-height: 150px;
  max-height: 320px;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding: 14px;
  background: #f6f9fc;
  border: 1px solid #d7e2ec;
  border-radius: 8px;
}

.proposal-chat-message {
  max-width: min(78%, 560px);
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #d7e2ec;
}

.proposal-chat-message.from-client {
  justify-self: end;
  background: #10243a;
  border-color: #10243a;
  color: #ffffff;
}

.proposal-chat-message p {
  margin: 0;
  line-height: 1.45;
}

.proposal-chat-message span {
  color: #6a7d90;
  font-size: 12px;
  font-weight: 800;
}

.proposal-chat-message.from-client span {
  color: rgba(255, 255, 255, .7);
}

.proposal-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.proposal-chat-form textarea {
  min-height: 58px;
  resize: vertical;
}

.panel-head-inline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.panel-head-inline h2 {
  margin: 2px 0 0;
}

.panel-head-inline strong {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
}

.client-favorite-grid,
.client-chat-list {
  display: grid;
  gap: 12px;
}

.client-favorite-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.client-favorite-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.client-favorite-media {
  min-height: 104px;
  overflow: hidden;
  border-radius: 8px;
  background: #e6edf4;
}

.client-favorite-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-favorite-card h3 {
  margin: 3px 0 5px;
  font-size: 17px;
}

.client-favorite-card p {
  margin: 0;
  color: var(--muted);
}

.client-favorite-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.client-favorite-meta span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.client-chat-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.client-chat-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.client-chat-card-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.client-chat-thread {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.client-chat-bubble {
  max-width: min(82%, 620px);
  padding: 9px 11px;
  border-radius: 8px;
  background: #eef5fb;
}

.client-chat-bubble.from-agent {
  justify-self: end;
  background: #10243a;
  color: #ffffff;
}

.client-chat-bubble p {
  margin: 0;
}

.client-chat-bubble span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.client-chat-bubble.from-agent span {
  color: rgba(255, 255, 255, .68);
}

.client-chat-reply {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

@media (max-width: 640px) {
  .proposal-live-status,
  .proposal-cart,
  .proposal-chat-head,
  .client-chat-card-head,
  .client-chat-reply,
  .proposal-chat-form {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .proposal-cart {
    display: grid;
  }

  .proposal-cart-list {
    justify-content: flex-start;
  }

  .proposal-chat-message,
  .client-chat-bubble {
    max-width: 100%;
  }

  .client-favorite-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}

/* Ficha comercial premium refresh */
.client-back-row {
  margin: 0 0 14px;
}

.commercial-client-profile {
  padding: clamp(18px, 2.4vw, 26px);
  border-color: rgba(215, 225, 235, .72);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(23, 34, 49, .08);
}

.commercial-client-profile .client-profile-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}

.client-identity {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.client-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #1f3d86 0%, #248fd3 100%);
  color: #fff;
  border: 4px solid #eef5fb;
  box-shadow: 0 14px 30px rgba(36, 63, 134, .18);
  font-size: 20px;
  font-weight: 950;
}

.commercial-client-profile .client-profile-main h1 {
  margin: 2px 0 4px;
  color: #101a2a;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.04;
  letter-spacing: 0;
}

.commercial-client-profile .client-contact-line {
  gap: 6px 12px;
  color: #607287;
  font-size: 14px;
  font-weight: 800;
}

.commercial-client-profile .client-contact-line span + span::before {
  content: "/";
  margin-right: 12px;
  color: #a9b7c7;
}

.commercial-client-profile .chips {
  gap: 6px;
  margin-top: 10px;
}

.commercial-client-profile .chip {
  padding: 5px 9px;
  border-radius: 999px;
  background: #f5f8fb;
  border: 1px solid rgba(215, 225, 235, .86);
  color: #526276;
  font-size: 12px;
}

.commercial-client-profile .client-profile-actions {
  max-width: 520px;
  align-items: center;
  gap: 8px;
}

.commercial-client-profile .client-profile-actions .button,
.commercial-client-profile .client-profile-actions button {
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 900;
  box-shadow: none;
}

.commercial-client-profile .client-profile-actions .call {
  background: #17377d;
  border-color: #17377d;
}

.commercial-client-profile .client-profile-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(215, 225, 235, .72);
}

.commercial-client-profile .client-stat-card {
  min-height: 86px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
  border: 1px solid rgba(215, 225, 235, .72);
  border-radius: 12px;
}

.client-stat-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eef6ff;
  color: #17377d;
  font-size: 13px;
  font-weight: 950;
}

.commercial-client-profile .client-stat-card span:not(.client-stat-icon) {
  color: #738197;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.commercial-client-profile .client-stat-card strong {
  margin-top: 3px;
  color: #142034;
  font-size: 17px;
  line-height: 1.25;
}

.commercial-client-profile .client-stat-card small {
  margin-top: 3px;
  color: #6b7a90;
}

.client-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.client-compact-panel,
.client-history-panel {
  border-color: rgba(215, 225, 235, .72);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(23, 34, 49, .06);
}

.client-compact-panel .panel-head-inline,
.client-history-panel .panel-head-inline {
  align-items: center;
  margin-bottom: 12px;
}

.client-compact-panel .panel-head-inline strong {
  min-width: 34px;
  min-height: 34px;
  border-radius: 10px;
  background: #eef6ff;
  border: 0;
  color: #17377d;
}

.client-compact-panel > .muted {
  margin: 0;
  color: #8290a2;
  font-size: 13px;
}

.client-compact-panel .client-favorite-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.client-compact-panel .client-favorite-card {
  grid-template-columns: 86px minmax(0, 1fr);
  padding: 10px;
  border-color: rgba(215, 225, 235, .72);
  border-radius: 12px;
  background: #fbfdff;
}

.client-compact-panel .client-favorite-media {
  min-height: 78px;
  border-radius: 10px;
}

.client-compact-panel .client-favorite-card h3 {
  margin: 2px 0 4px;
  font-size: 15px;
}

.client-compact-panel .client-chat-card {
  gap: 10px;
  padding: 12px;
  border-color: rgba(215, 225, 235, .72);
  border-radius: 12px;
  background: #fbfdff;
}

.client-compact-panel .client-chat-thread {
  max-height: 168px;
  border-color: rgba(215, 225, 235, .72);
}

.client-history-panel {
  margin-top: 14px;
}

.client-timeline {
  position: relative;
  gap: 0;
}

.client-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 14px;
  width: 2px;
  background: #dbe7f3;
}

.client-timeline-item {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-left: 34px;
  padding: 0 0 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.client-timeline-item:last-child {
  padding-bottom: 0;
}

.client-timeline-dot {
  position: absolute;
  left: -27px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #17377d;
  border: 3px solid #eef6ff;
  box-shadow: 0 0 0 1px #bfd4ee;
}

.client-timeline-content {
  min-width: 0;
  padding: 12px 14px;
  background: #fbfdff;
  border: 1px solid rgba(215, 225, 235, .78);
  border-radius: 12px;
}

.client-timeline-content strong {
  color: #142034;
}

.client-timeline-content p {
  color: #5d6d80;
}

.client-timeline .activity-meta {
  padding-top: 12px;
  white-space: nowrap;
}

.client-history-panel .is-hidden-history {
  display: none;
}

body.show-full-client-history .client-history-panel .is-hidden-history {
  display: grid;
}

body.show-full-client-history .client-history-panel .panel-head-inline button {
  display: none;
}

@media (max-width: 1180px) {
  .commercial-client-profile .client-profile-top {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .commercial-client-profile .client-profile-actions {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (max-width: 920px) {
  .commercial-client-profile .client-profile-grid,
  .client-insight-grid {
    grid-template-columns: 1fr;
  }

  .client-timeline-item {
    grid-template-columns: 1fr;
  }

  .client-timeline .activity-meta {
    justify-items: start;
    padding-top: 6px;
    padding-left: 14px;
  }
}

@media (max-width: 640px) {
  .client-identity {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .client-avatar {
    width: 52px;
    height: 52px;
    font-size: 17px;
  }

  .commercial-client-profile .client-contact-line span + span::before {
    content: "";
    margin-right: 0;
  }

  .commercial-client-profile .client-profile-actions .button,
  .commercial-client-profile .client-profile-actions button {
    width: auto;
  }

  .client-compact-panel .client-favorite-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }
}