/* Anima el cambio entre paginas (Inicio/Conversaciones/Agenda/etc.) con un
   fundido suave en vez del parpadeo tipico de una recarga -- el navegador
   lo hace solo, sigue siendo una pagina nueva de verdad, no un SPA. Los
   navegadores que no lo soportan todavia simplemente lo ignoran. */
@view-transition {
  navigation: auto;
}

/* El router chico de soft-nav.js le pone esta clase al <html> mientras
   trae la pagina nueva por atras -- una atenuacion sutil para que no se
   sienta "colgado" en el instante que tarda la conexion. */
html.is-soft-navigating body { cursor: progress; }

:root {
  --ink: #1d1d1f;
  --navy: #1d1d1f;
  --muted: #6e6e73;
  --blue: #0071e3;
  --blue-dark: #0068d1;
  --green: #34c759;
  --red: #ff3b30;
  --surface: rgba(255, 255, 255, .86);
  --line: rgba(60, 60, 67, .12);
  --shadow: 0 16px 40px rgba(0, 0, 0, .06);
  --font: "SF Pro Text", "SF Pro Icons", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", "Segoe UI", sans-serif;
  --font-display: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", "Segoe UI", sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 22px;
  --text-xl: 28px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
}

* { box-sizing: border-box; }

html { min-width: 320px; }

body {
  margin: 0;
  color: var(--ink);
  background: #f5f5f7;
  font-family: var(--font);
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.01em;
}

button, input, textarea, select { font: inherit; }
input, textarea, select { font-size: var(--text-base); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

h1, h2, h3, h4, h5, h6,
.brand,
.conversation-page-title,
.stat-value {
  font-family: var(--font-display);
  font-synthesis: none;
}

input, textarea, select,
.conversation-list-meta,
.message-time,
.stat-value {
  font-variant-numeric: tabular-nums;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-size: var(--text-xl);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -1.3px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 11px;
  background: url("../assets/sahyez-logo-light-ui.png") center / cover no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .08));
}

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(440px, .88fr) minmax(520px, 1.12fr);
  background: #fff;
}

.auth-panel {
  min-height: 100vh;
  padding: 42px clamp(36px, 6vw, 100px);
  display: flex;
  flex-direction: column;
}

.auth-panel .brand { margin-bottom: auto; }

.auth-content {
  width: min(100%, 430px);
  margin: 80px auto;
}

.auth-kicker {
  margin: 0 0 13px;
  color: var(--blue);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.auth-content h1 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.04;
  letter-spacing: -2.7px;
}

.auth-subtitle {
  margin: 15px 0 34px;
  color: var(--muted);
  font-size: var(--text-md);
  line-height: 1.55;
}

.form-stack { display: grid; gap: 20px; }

.field { display: grid; gap: 8px; }

.field label {
  color: #25304a;
  font-size: var(--text-sm);
  font-weight: 600;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  color: var(--ink);
  border: 1px solid #dce2ec;
  border-radius: 12px;
  outline: none;
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 2px rgba(10, 25, 48, .02), inset 0 1px #fff;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.field textarea {
  min-height: 126px;
  padding-top: 14px;
  resize: vertical;
  line-height: 1.5;
}

.field input::placeholder,
.field textarea::placeholder { color: #5f6b7f; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(8,119,255,.55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(8,119,255,.09);
}

.field-note {
  color: #5f6b7f;
  font-size: var(--text-xs);
  line-height: 1.45;
}

.connect-checklist {
  list-style: none;
  margin: 0 0 28px;
  padding: 18px 20px;
  background: #f7f9fc;
  border: 1px solid #e9edf3;
  border-radius: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.connect-checklist li {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink, #1c2434);
  padding-left: 24px;
  position: relative;
}

.connect-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue);
  font-weight: 600;
}

.connect-heads-up {
  font-size: var(--text-sm);
  color: #5f6b7f;
  line-height: 1.5;
  margin: 14px 0 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.submit-button {
  width: 100%;
  min-height: 54px;
  margin-top: 7px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: #fff;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #0a82ff, #0768ef);
  box-shadow: 0 14px 28px rgba(8, 112, 246, .19), inset 0 1px rgba(255,255,255,.24);
  cursor: pointer;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease;
}

.submit-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 17px 34px rgba(8, 112, 246, .24), inset 0 1px rgba(255,255,255,.24);
}

.submit-button:active { transform: translateY(0); }

.form-message {
  min-height: 20px;
  margin: 14px 0 0;
  color: var(--red);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.auth-switch {
  margin: 8px 0 0;
  color: var(--muted);
  text-align: center;
  font-size: var(--text-base);
}

.auth-switch a { color: var(--blue-dark); font-weight: 600; }

.auth-visual {
  min-height: 100vh;
  padding: 54px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 55% 42%, rgba(79, 160, 255, .23), transparent 31%),
    linear-gradient(145deg, #f3f8ff, #eaf3ff 54%, #f8fbff);
}

.auth-visual::before,
.auth-visual::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
}

.auth-visual::before { width: 620px; height: 620px; }
.auth-visual::after { width: 430px; height: 430px; }

.demo-window {
  width: min(610px, 92%);
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(24px);
  box-shadow: 0 35px 90px rgba(31, 78, 143, .18), inset 0 1px #fff;
}

.demo-topbar {
  height: 58px;
  padding: 0 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(24, 62, 112, .08);
}

.demo-dots { display: flex; gap: 7px; }
.demo-dots span { width: 8px; height: 8px; border-radius: 50%; background: #dbe3ef; }

.demo-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #64728b;
  font-size: var(--text-xs);
}

.demo-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22b98a; box-shadow: 0 0 0 4px rgba(34,185,138,.11); }

.demo-body { padding: 25px; }

.demo-title {
  margin: 0 0 22px;
  color: #34415a;
  font-size: var(--text-sm);
  font-weight: 600;
}

.chat-line {
  max-width: 82%;
  margin-bottom: 11px;
  padding: 12px 14px;
  border-radius: 13px;
  color: #46536a;
  background: #fff;
  box-shadow: 0 5px 18px rgba(30, 63, 107, .06);
  font-size: var(--text-sm);
  line-height: 1.42;
}

.chat-line.customer { margin-left: auto; color: #174b35; background: #ddfbe9; }

.agent-row {
  margin-top: 24px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
}

.agent-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(239, 247, 255, .85);
}

.agent-icon img { width: 55px; height: 55px; object-fit: contain; }

.agent-row strong { display: block; font-size: var(--text-sm); }
.agent-row small { color: #5f6b7f; font-size: var(--text-xs); }

.visual-caption {
  width: min(610px, 92%);
  position: absolute;
  z-index: 3;
  bottom: 55px;
  color: #5d6c85;
  font-size: var(--text-base);
  text-align: center;
}

.onboarding-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -10%, rgba(56,145,255,.12), transparent 34%),
    #f7f9fc;
}

.setup-header {
  height: 82px;
  padding: 0 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(18px);
}

.setup-help { color: #6d768a; font-size: var(--text-sm); }
.setup-help a { color: var(--blue-dark); font-weight: 600; }

.setup-shell {
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  padding: 62px 0 80px;
}

.progress {
  width: min(520px, 100%);
  margin: 0 auto 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.progress span { height: 4px; border-radius: 999px; background: #e3e8f0; }
.progress span:first-child { background: var(--blue); }
.progress span.is-done { background: var(--blue); }

.setup-card {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 45px 48px 48px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 25px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow), inset 0 1px #fff;
}

.setup-heading { margin-bottom: 37px; text-align: center; }
.setup-step { color: var(--blue); font-size: var(--text-xs); font-weight: 600; letter-spacing: 1.35px; text-transform: uppercase; }
.setup-heading h1 { margin: 10px 0 12px; font-size: var(--text-xl); line-height: 1.06; letter-spacing: -2.3px; }
.setup-heading p { max-width: 520px; margin: 0 auto; color: var(--muted); font-size: var(--text-base); line-height: 1.55; }
.setup-form { display: grid; gap: 23px; }
.setup-form .submit-button { min-height: 58px; margin-top: 9px; }

.dashboard-page { min-height: 100vh; background: #f5f7fa; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 238px 1fr;
}

.sidebar {
  height: 100vh;
  padding: 27px 20px 22px;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(20px);
}

.sidebar .brand { padding: 3px 11px 31px; font-size: var(--text-xl); }
.sidebar .brand-mark { width: 32px; height: 32px; }

.sidebar-label {
  padding: 0 12px;
  margin: 7px 0 8px;
  color: #5f6b7f;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.sidebar-nav { display: grid; gap: 4px; }

.nav-item {
  min-height: 43px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #667086;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 500;
}

.nav-item svg { width: 18px; height: 18px; stroke-width: 1.8; }
.nav-item.active { color: #075fdc; background: #edf5ff; font-weight: 600; }
.nav-item:hover { background: #f3f6fa; }

.sidebar-bottom { margin-top: auto; }

.plan-card {
  margin-bottom: 15px;
  padding: 15px;
  border: 1px solid #dce8f7;
  border-radius: 13px;
  background: linear-gradient(145deg, #f4f9ff, #fff);
}

.plan-card small { color: #5f6b7f; font-size: var(--text-xs); }
.plan-card strong { display: block; margin: 5px 0 11px; font-size: var(--text-sm); }
.plan-bar { height: 4px; overflow: hidden; border-radius: 10px; background: #e1e9f4; }
.plan-bar span { display: block; width: 18%; height: 100%; background: var(--blue); }

.main-area { min-width: 0; }

.topbar {
  height: 74px;
  padding: 0 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
}

.business-block { display: flex; align-items: center; gap: 12px; }
.business-avatar { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; border-radius: 11px; background: linear-gradient(145deg, #17243d, #071022); font-size: var(--text-base); font-weight: 600; }
.business-block h1 { margin: 0; font-size: var(--text-base); letter-spacing: -.2px; }
.business-status { margin: 3px 0 0; color: var(--green); font-size: var(--text-xs); }
.business-status::before { content: ""; width: 6px; height: 6px; margin-right: 6px; display: inline-block; border-radius: 50%; background: currentColor; }
.business-status[data-status="pending"] { color: #b77816; }
.business-status[data-status="paused"] { color: #5f6b7f; }

.topbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { width: 37px; height: 37px; display: grid; place-items: center; color: #536078; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.icon-button svg { width: 17px; }
.user-avatar { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--blue); font-size: var(--text-xs); font-weight: 600; }

.dashboard-content { padding: 34px 35px 55px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 28px; }
.page-heading h2 { margin: 0 0 7px; font-size: var(--text-xl); letter-spacing: -1.2px; }
.page-heading p { margin: 0; color: var(--muted); font-size: var(--text-sm); }

.primary-small { min-height: 39px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; color: #fff; border-radius: 10px; background: var(--blue); font-size: var(--text-xs); font-weight: 600; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.stat-card {
  padding: 19px 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 25px rgba(25, 55, 98, .035);
}

.stat-label { display: flex; align-items: center; gap: 8px; color: #5f6b7f; font-size: var(--text-xs); }
.stat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.stat-dot.green { background: var(--green); }
.stat-dot.orange { background: #f0a22d; }
.stat-value { margin-top: 13px; display: block; font-size: var(--text-xl); letter-spacing: -1px; }

.inbox-card {
  min-height: 430px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 11px 35px rgba(28, 59, 101, .045);
}

.inbox-toolbar {
  min-height: 61px;
  padding: 0 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.tabs { display: flex; align-items: center; gap: 22px; height: 61px; }
.tab { height: 61px; display: flex; align-items: center; color: #5f6b7f; border-bottom: 2px solid transparent; font-size: var(--text-xs); }
.tab.active { color: #1267df; border-color: var(--blue); font-weight: 600; }
.search-pill { width: 200px; min-height: 35px; padding: 0 12px; display: flex; align-items: center; gap: 8px; color: #5f6b7f; border: 1px solid var(--line); border-radius: 9px; background: #fafbfc; font-size: var(--text-xs); }

.conversations-list { min-height: 360px; }
.conversations-list > div { min-height: 70px; padding: 0 20px; display: flex; align-items: center; color: #4d586e; border-bottom: 1px solid #eef1f5; font-size: var(--text-sm); }
.conversations-list > div:last-child { border-bottom: 0; }
.conversations-list > div:hover { background: #fafcff; }

.conversation-avatar {
  width: 39px;
  height: 39px;
  margin-right: 13px;
  display: grid;
  place-items: center;
  flex: none;
  color: #2568c8;
  border-radius: 12px;
  background: #edf5ff;
  font-size: var(--text-xs);
  font-weight: 600;
}

.conversation-main { min-width: 0; flex: 1; }
.conversation-main strong { display: block; margin-bottom: 5px; color: #263148; font-size: var(--text-sm); }
.conversation-main span { display: block; overflow: hidden; color: #5f6b7f; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.conversation-meta { margin-left: 18px; text-align: right; }
.conversation-meta time { display: block; margin-bottom: 7px; color: #5f6b7f; font-size: var(--text-xs); }

.status-badge {
  padding: 4px 8px;
  display: inline-block;
  color: #20704f;
  border-radius: 999px;
  background: #eaf9f2;
  font-size: var(--text-xs);
  font-weight: 600;
}

.status-badge.needs-human { color: #a56408; background: #fff5df; }
.status-badge.human { color: #275da6; background: #eaf3ff; }

.empty-state {
  min-height: 350px !important;
  padding: 50px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center;
  border: 0 !important;
}

.empty-icon { width: 55px; height: 55px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 18px; background: #edf5ff; }
.empty-icon img { width: 76px; height: 76px; object-fit: contain; }
.empty-state strong { display: block; margin-bottom: 6px; color: #1d293d; font-size: var(--text-base); }
.empty-state p { max-width: 310px; margin: 0; color: #5f6b7f; font-size: var(--text-xs); line-height: 1.5; }

@media (max-width: 950px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-panel { min-height: 100vh; }
  .auth-visual { display: none; }
  .app-shell { grid-template-columns: 76px 1fr; }
  .sidebar { padding: 27px 12px; }
  .sidebar .brand { padding: 3px 12px 31px; }
  .sidebar .brand span:last-child, .sidebar-label, .nav-item span, .sidebar-bottom { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .stats { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .auth-panel { padding: 25px 20px; }
  .auth-content { margin: 65px auto 35px; }
  .auth-panel .brand { margin-bottom: 0; }
  .form-row { grid-template-columns: 1fr; }
  .setup-header { height: 70px; padding: 0 20px; }
  .setup-header .brand { font-size: var(--text-lg); }
  .setup-help { display: none; }
  .setup-shell { width: min(100% - 24px, 560px); padding: 35px 0 50px; }
  .setup-card { padding: 32px 20px; border-radius: 20px; }
  .app-shell { display: block; }
  .sidebar { height: 65px; padding: 0 14px; position: fixed; inset: auto 0 0; z-index: 30; flex-direction: row; border-top: 1px solid var(--line); border-right: 0; }
  .sidebar .brand, .sidebar-label, .sidebar-bottom { display: none; }
  .sidebar-nav { width: 100%; grid-template-columns: repeat(5, 1fr); align-items: center; }
  .nav-item { min-height: 46px; }
  .nav-item span { display: none; }
  .topbar { height: 67px; padding: 0 16px; }
  .dashboard-content { padding: 25px 14px 90px; }
  .page-heading { align-items: flex-start; }
  .page-heading h2 { font-size: var(--text-xl); }
  .primary-small { display: none; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card:last-child { grid-column: 1 / -1; }
  .search-pill { width: 36px; padding: 0; justify-content: center; }
  .search-pill span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Panel design system ----------------------------------------------------- */
.dashboard-page {
  --panel-bg: #f5f5f7;
  --panel-surface: rgba(255, 255, 255, .92);
  --panel-surface-solid: #fff;
  --panel-ink: #1d1d1f;
  --panel-secondary: #6e6e73;
  --panel-tertiary: #5f6b7f;
  --panel-line: rgba(60, 60, 67, .12);
  --panel-blue: #0071e3;
  --panel-blue-hover: #0077ed;
  --panel-green: #30a46c;
  --panel-orange: #d9850b;
  min-height: 100vh;
  color: var(--panel-ink);
  background:
    radial-gradient(circle at 78% -12%, rgba(0, 113, 227, .09), transparent 28rem),
    var(--panel-bg);
}

.dashboard-page .app-shell {
  grid-template-columns: 252px minmax(0, 1fr);
}

.dashboard-page .sidebar {
  width: 252px;
  padding: 26px 18px 20px;
  z-index: 20;
  border-right-color: var(--panel-line);
  background: rgba(250, 250, 252, .82);
  backdrop-filter: saturate(180%) blur(28px);
}

.dashboard-page .sidebar .brand {
  min-height: 44px;
  padding: 0 12px;
  margin-bottom: 30px;
  gap: 9px;
  color: var(--panel-ink);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -.8px;
}

.dashboard-page .sidebar .brand-mark { width: 32px; height: 32px; }

.dashboard-page .sidebar-label {
  margin: 0 0 8px;
  padding: 0 13px;
  color: var(--panel-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}

.dashboard-page .sidebar-nav { gap: 5px; }
.dashboard-page .sidebar-nav > .nav-item[href="#"] { display: none; }

.dashboard-page .nav-item {
  min-height: 44px;
  padding: 0 13px;
  gap: 12px;
  color: #5c5c62;
  border-radius: 12px;
  font-size: var(--text-base);
  font-weight: 500;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.dashboard-page .nav-item svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.75;
}

.dashboard-page .nav-item:hover {
  color: var(--panel-ink);
  background: rgba(118, 118, 128, .08);
}

.dashboard-page .nav-item.active {
  color: #065eb8;
  background: rgba(0, 113, 227, .10);
  box-shadow: inset 0 0 0 1px rgba(0, 113, 227, .04);
  font-weight: 600;
}

.dashboard-page .plan-card {
  margin-bottom: 12px;
  padding: 16px;
  border-color: rgba(0, 113, 227, .13);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(237,246,255,.9));
  box-shadow: 0 10px 30px rgba(0, 67, 134, .05);
}

.dashboard-page .plan-card small { color: var(--panel-secondary); font-size: var(--text-xs); }
.dashboard-page .plan-card strong { margin: 6px 0 13px; font-size: var(--text-sm); line-height: 1.35; }
.dashboard-page .plan-bar { height: 5px; background: rgba(0, 113, 227, .10); }
.dashboard-page .plan-bar span { border-radius: inherit; background: var(--panel-blue); transition: width .35s ease; }

.dashboard-page .main-area { min-width: 0; }

.dashboard-page .topbar {
  height: 76px;
  padding: 0 clamp(24px, 4vw, 56px);
  position: sticky;
  top: 0;
  z-index: 15;
  border-bottom-color: var(--panel-line);
  background: rgba(245, 245, 247, .76);
  backdrop-filter: saturate(180%) blur(24px);
}

.dashboard-page .business-block { gap: 11px; }
.dashboard-page .business-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(145deg, #323237, #111113);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.10);
  font-size: var(--text-base);
}

.dashboard-page .business-block h1 { font-size: var(--text-base); font-weight: 600; }
.dashboard-page .business-status { margin-top: 2px; color: var(--panel-green); font-size: var(--text-xs); }
.dashboard-page .business-status[data-status="pending"] { color: var(--panel-orange); }
.dashboard-page .business-status[data-status="paused"] { color: var(--panel-tertiary); }

.dashboard-page .topbar-actions { gap: 9px; }
.dashboard-page .icon-button {
  width: 38px;
  height: 38px;
  color: #55555b;
  border-color: var(--panel-line);
  border-radius: 50%;
  background: rgba(255,255,255,.76);
  transition: background .18s ease, transform .18s ease;
}
.dashboard-page .icon-button:hover { background: #fff; transform: translateY(-1px); }
.dashboard-page .user-avatar { width: 38px; height: 38px; background: var(--panel-blue); }

.dashboard-page .dashboard-content {
  width: min(100%, 1340px);
  margin: 0 auto;
  padding: 48px clamp(24px, 4vw, 56px) 72px;
}

.dashboard-page .page-heading {
  align-items: center;
  margin-bottom: 30px;
}

.dashboard-page .page-heading h2 {
  margin-bottom: 8px;
  color: var(--panel-ink);
  font-size: var(--text-xl);
  line-height: 1.08;
  letter-spacing: -1.7px;
}

.dashboard-page .page-heading p {
  color: var(--panel-secondary);
  font-size: var(--text-base);
  line-height: 1.5;
}

.dashboard-page .page-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--panel-blue);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dashboard-page .primary-small {
  min-height: 42px;
  padding: 0 17px;
  border-radius: 11px;
  background: var(--panel-blue);
  box-shadow: 0 5px 14px rgba(0, 113, 227, .16);
  font-size: var(--text-sm);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.dashboard-page .primary-small:hover {
  background: var(--panel-blue-hover);
  box-shadow: 0 7px 18px rgba(0, 113, 227, .20);
  transform: translateY(-1px);
}

.dashboard-page .stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.dashboard-page .stat-card {
  min-height: 132px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  border-color: var(--panel-line);
  border-radius: 20px;
  background: var(--panel-surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.02), 0 12px 35px rgba(0,0,0,.035);
}

.dashboard-page .stat-label { color: var(--panel-secondary); font-size: var(--text-sm); }
.dashboard-page .stat-dot { width: 8px; height: 8px; background: var(--panel-blue); box-shadow: 0 0 0 4px rgba(0,113,227,.08); }
.dashboard-page .stat-dot.green { background: var(--panel-green); box-shadow: 0 0 0 4px rgba(48,164,108,.08); }
.dashboard-page .stat-dot.orange { background: var(--panel-orange); box-shadow: 0 0 0 4px rgba(217,133,11,.08); }
.dashboard-page .stat-value { margin-top: 18px; font-size: var(--text-xl); line-height: 1; letter-spacing: -1.8px; }

.dashboard-page .inbox-card {
  min-height: 0;
  border-color: var(--panel-line);
  border-radius: 20px;
  background: var(--panel-surface-solid);
  box-shadow: 0 1px 2px rgba(0,0,0,.02), 0 12px 38px rgba(0,0,0,.035);
}

.dashboard-page .inbox-toolbar {
  min-height: 64px;
  padding: 0 22px;
  border-bottom-color: var(--panel-line);
}

.dashboard-page .tabs { height: 64px; gap: 24px; }
.dashboard-page .tab { height: 64px; color: var(--panel-secondary); font-size: var(--text-sm); }
.dashboard-page .tab.active { color: var(--panel-ink); border-color: var(--panel-blue); }
.dashboard-page .search-pill { min-height: 38px; border-color: var(--panel-line); border-radius: 10px; background: #f7f7f8; font-size: var(--text-xs); }

.dashboard-page .conversations-list { min-height: 0; }
.dashboard-page .conversations-list > div,
.dashboard-page .conversations-list > a {
  min-height: 76px;
  padding: 0 22px;
  border-bottom-color: var(--panel-line);
}

.dashboard-page .conversation-avatar { border-radius: 13px; background: rgba(0,113,227,.08); }
.dashboard-page .conversation-main strong { font-size: var(--text-base); }
.dashboard-page .conversation-main span { font-size: var(--text-xs); }
.dashboard-page .status-badge { padding: 5px 9px; font-size: var(--text-xs); }

.dashboard-page .empty-state {
  min-height: 260px !important;
  padding: 38px 24px !important;
}

.dashboard-page .empty-icon { background: rgba(0,113,227,.07); }
.dashboard-page .empty-state strong { color: var(--panel-ink); font-size: var(--text-md); }
.dashboard-page .empty-state p { color: var(--panel-secondary); font-size: var(--text-sm); }

/* Home */
.home-content .page-heading { margin-bottom: 26px; }

.agent-overview {
  min-height: 216px;
  margin-bottom: 18px;
  padding: clamp(26px, 3.5vw, 42px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  color: #fff;
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 20%, rgba(108, 181, 255, .48), transparent 18rem),
    linear-gradient(132deg, #111b2d 0%, #063f7d 58%, #0878e8 100%);
  box-shadow: 0 18px 48px rgba(5, 57, 112, .15);
}

.agent-overview::after {
  content: "";
  width: 330px;
  height: 330px;
  position: absolute;
  right: -80px;
  top: -145px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.025);
}

.agent-overview-copy { max-width: 650px; position: relative; z-index: 1; }
.agent-overview-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; color: rgba(255,255,255,.74); font-size: var(--text-xs); font-weight: 600; }
.agent-overview-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5de0a1; box-shadow: 0 0 0 5px rgba(93,224,161,.12); }
.agent-overview[data-status="pending"] .agent-overview-kicker::before { background: #ffc45c; }
.agent-overview[data-status="paused"] .agent-overview-kicker::before { background: #b4b4ba; }
.agent-overview h3 { margin: 0 0 11px; font-size: var(--text-xl); line-height: 1.12; letter-spacing: -1.2px; }
.agent-overview p { max-width: 580px; margin: 0; color: rgba(255,255,255,.72); font-size: var(--text-base); line-height: 1.6; }

.agent-overview-action {
  min-height: 44px;
  padding: 0 18px;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: #0757a7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(0,0,0,.12);
  font-size: var(--text-sm);
  font-weight: 600;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 18px;
}

.home-panel { min-width: 0; }
.home-panel-header { min-height: 68px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--panel-line); }
.home-panel-title h3 { margin: 0 0 4px; font-size: var(--text-md); letter-spacing: -.3px; }
.home-panel-title p { margin: 0; color: var(--panel-secondary); font-size: var(--text-xs); }
.home-panel-link { color: var(--panel-blue); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.home-list { min-height: 260px; padding: 8px 14px; }

.home-list-item {
  min-height: 72px;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: inherit;
  border-bottom: 1px solid var(--panel-line);
}
.home-list-item:last-child { border-bottom: 0; }
.home-list-item:hover { background: #fafafa; border-radius: 12px; }
.home-list-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: none; color: var(--panel-blue); border-radius: 12px; background: rgba(0,113,227,.08); font-size: var(--text-xs); font-weight: 600; }
.home-list-main { min-width: 0; flex: 1; }
.home-list-main strong { display: block; margin-bottom: 4px; font-size: var(--text-sm); }
.home-list-main span { display: block; overflow: hidden; color: var(--panel-secondary); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.home-list-meta { color: var(--panel-tertiary); font-size: var(--text-xs); white-space: nowrap; }

.home-list .empty-state { min-height: 244px !important; }
.empty-symbol { width: 50px; height: 50px; margin: 0 auto 15px; display: grid; place-items: center; color: var(--panel-blue); border-radius: 16px; background: rgba(0,113,227,.07); }
.empty-symbol svg { width: 23px; height: 23px; stroke-width: 1.6; }

@media (max-width: 1050px) {
  .dashboard-page .app-shell { grid-template-columns: 84px minmax(0, 1fr); }
  .dashboard-page .sidebar { width: 84px; padding-inline: 14px; }
  .dashboard-page .sidebar .brand { justify-content: center; padding-inline: 0; }
  .dashboard-page .sidebar .brand span:last-child,
  .dashboard-page .sidebar-label,
  .dashboard-page .nav-item span,
  .dashboard-page .sidebar-bottom { display: none; }
  .dashboard-page .nav-item { justify-content: center; padding: 0; }
  .home-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .dashboard-page { padding-bottom: 74px; }
  .dashboard-page .app-shell { display: block; }
  .dashboard-page .sidebar {
    width: auto;
    height: 72px;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    flex-direction: row;
    border-top: 1px solid var(--panel-line);
    border-right: 0;
    background: rgba(249,249,251,.90);
  }
  .dashboard-page .sidebar .brand,
  .dashboard-page .sidebar-label,
  .dashboard-page .sidebar-bottom { display: none; }
  .dashboard-page .sidebar-nav { width: 100%; grid-template-columns: repeat(4, 1fr); align-items: center; }
  .dashboard-page .nav-item { min-height: 54px; flex-direction: column; justify-content: center; gap: 3px; border-radius: 11px; font-size: var(--text-xs); }
  .dashboard-page .nav-item span { display: block; }
  .dashboard-page .nav-item svg { width: 20px; height: 20px; }
  .dashboard-page .topbar { height: 64px; padding: 0 17px; }
  .dashboard-page .business-avatar { width: 34px; height: 34px; border-radius: 10px; }
  .dashboard-page .business-status { display: none; }
  .dashboard-page .icon-button { display: none; }
  .dashboard-page .user-avatar { width: 34px; height: 34px; }
  .dashboard-page .dashboard-content { padding: 30px 16px 34px; }
  .dashboard-page .page-heading { align-items: flex-start; margin-bottom: 24px; }
  .dashboard-page .page-heading h2 { font-size: var(--text-xl); letter-spacing: -1.3px; }
  .dashboard-page .page-heading p { font-size: var(--text-base); }
  .dashboard-page .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dashboard-page .stat-card { min-height: 116px; padding: 18px; border-radius: 17px; }
  .dashboard-page .stat-card:last-child { grid-column: 1 / -1; }
  .dashboard-page .stat-label { font-size: var(--text-xs); }
  .dashboard-page .stat-value { margin-top: 16px; font-size: var(--text-xl); }
  .dashboard-page .inbox-card { border-radius: 18px; }
  .agent-overview { min-height: 0; padding: 28px 23px; display: block; border-radius: 22px; }
  .agent-overview h3 { font-size: var(--text-xl); }
  .agent-overview p { font-size: var(--text-sm); }
  .agent-overview-action { margin-top: 22px; }
  .home-grid { gap: 14px; }
  .home-panel-header { padding: 0 18px; }
  .home-list { min-height: 230px; padding-inline: 10px; }
}

@media (max-width: 420px) {
  .dashboard-page .stats { grid-template-columns: 1fr; }
  .dashboard-page .stat-card:last-child { grid-column: auto; }
  .dashboard-page .page-heading h2 { font-size: var(--text-xl); }
  .agent-overview-action { width: 100%; justify-content: center; }
}

/* Conversations workspace ------------------------------------------------ */
.conversation-workspace-page {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.95), transparent 28rem),
    #f0f1f3;
}

.conversation-workspace {
  height: calc(100vh - 40px);
  min-height: 620px;
  margin: 20px;
  display: grid;
  grid-template-columns: auto minmax(390px, 44%) minmax(0, 1fr);
  gap: 14px;
}

.icon-rail {
  width: 68px;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(60,60,67,.08);
  border-radius: 28px;
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 60px rgba(24,32,46,.06), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: saturate(160%) blur(26px);
}
.icon-rail-brand { margin-bottom: 10px; }
.icon-rail-brand .brand-mark { width: 30px; height: 30px; }
.icon-rail-item {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #6b7280;
  border-radius: 13px;
  transition: background .15s ease, color .15s ease;
}
.icon-rail-item svg { width: 21px; height: 21px; stroke-width: 1.8; }
.icon-rail-item:hover { color: #121417; background: rgba(18,20,23,.06); }
.icon-rail-item.active { color: #fff; background: #121417; }

.conversation-inbox,
.conversation-detail {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(60,60,67,.08);
  border-radius: 28px;
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 60px rgba(24,32,46,.06), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: saturate(160%) blur(26px);
}

.conversation-inbox {
  padding: 18px 14px 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.conversation-inbox-header {
  min-height: 62px;
  padding: 0 12px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.conversation-page-title {
  overflow: hidden;
  color: #111218;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -1.4px;
  text-overflow: ellipsis;
}

.conversation-header-actions,
.chat-header-actions { display: flex; align-items: center; gap: 12px; }

.soft-icon-button,
.dark-icon-button {
  width: 50px;
  height: 50px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: none;
  color: #111827;
  border: 1px solid rgba(60,60,67,.10);
  border-radius: 17px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 4px 14px rgba(24,32,46,.04);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.soft-icon-button:hover,
.dark-icon-button:hover { transform: translateY(-1px); }
.soft-icon-button svg,
.dark-icon-button svg { width: 22px; height: 22px; stroke-width: 1.8; }
.dark-icon-button { color: #fff; border-color: #15171b; background: linear-gradient(145deg, #25272b, #090a0c); box-shadow: 0 9px 20px rgba(0,0,0,.14); }

.conversation-search {
  min-height: 50px;
  margin: 0 12px 13px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #697386;
  border: 1px solid rgba(60,60,67,.06);
  border-radius: 16px;
  background: rgba(118,118,128,.075);
}
.conversation-search:focus-within { background: rgba(255,255,255,.94); box-shadow: 0 0 0 4px rgba(0,113,227,.09); }
.conversation-search svg { width: 21px; height: 21px; flex: none; stroke-width: 1.8; }
.conversation-search input { min-width: 0; width: 100%; color: #1d1d1f; border: 0; outline: 0; background: transparent; font-size: var(--text-md); }
.conversation-search input::placeholder { color: #5f6b7f; }

.conversation-filters {
  padding: 0 12px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
.conversation-filters::-webkit-scrollbar { display: none; }
.conversation-filter {
  min-height: 43px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: #1f2937;
  border: 1px solid rgba(60,60,67,.06);
  border-radius: 999px;
  background: rgba(118,118,128,.055);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 500;
}
.conversation-filter span { min-width: 24px; height: 24px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(118,118,128,.10); font-size: var(--text-xs); font-weight: 600; }
.conversation-filter.active { color: #fff; border-color: #141518; background: #141518; box-shadow: 0 7px 16px rgba(0,0,0,.10); }
.conversation-filter.active span { color: #17181c; background: #fff; }

.conversation-list-modern { min-height: 0; padding: 0 0 12px; overflow-y: auto; }
.conversation-list-modern::-webkit-scrollbar,
.message-thread-modern::-webkit-scrollbar { width: 7px; }
.conversation-list-modern::-webkit-scrollbar-thumb,
.message-thread-modern::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(60,60,67,.14); }

.conversation-list-item {
  width: 100%;
  min-height: 82px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #151823;
  border: 0;
  border-bottom: 1px solid rgba(60,60,67,.09);
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.conversation-list-item:hover { background: rgba(255,255,255,.58); }
.conversation-list-item.active { margin: 2px 0; border-bottom-color: transparent; border-radius: 17px; background: linear-gradient(135deg, rgba(220,235,255,.92), rgba(237,244,255,.82)); box-shadow: inset 0 0 0 1px rgba(78,135,212,.04); }

.conversation-contact-avatar,
.chat-customer-avatar {
  width: 52px;
  height: 52px;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #556b83, #172535);
  box-shadow: inset 0 1px rgba(255,255,255,.24);
  font-size: var(--text-base);
  font-weight: 600;
}
.conversation-contact-avatar i { width: 18px; height: 18px; position: absolute; right: -1px; bottom: 0; display: block; border: 2px solid #fff; border-radius: 50%; background: #20c565; }
.conversation-contact-avatar i::after { content: ""; width: 6px; height: 8px; position: absolute; left: 5px; top: 3px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; border-radius: 0 0 5px; transform: rotate(38deg); }
.conversation-list-copy { min-width: 0; flex: 1; }
.conversation-list-copy strong { display: block; overflow: hidden; margin-bottom: 6px; font-size: var(--text-base); text-overflow: ellipsis; white-space: nowrap; }
.conversation-list-copy > span { display: block; overflow: hidden; color: #667085; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.conversation-list-meta { min-width: 38px; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; color: #5f6b7f; font-size: var(--text-xs); }
.conversation-list-item.active .conversation-list-meta time { color: #0877e9; }
.conversation-list-meta b { min-width: 25px; height: 25px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #087bf2; font-size: var(--text-xs); }
.conversation-loading { min-height: 180px; display: grid; place-items: center; color: #5f6b7f; font-size: var(--text-sm); text-align: center; }
.conversation-list-empty { min-height: 300px; padding: 30px; display: grid; place-content: center; justify-items: center; color: #6e6e73; text-align: center; }
.conversation-list-empty strong { margin-bottom: 6px; color: #1d1d1f; }
.conversation-list-empty p { margin: 0; font-size: var(--text-sm); }

.conversation-detail { position: relative; }
.conversation-detail-empty { height: 100%; display: grid; place-content: center; justify-items: center; color: #6e6e73; text-align: center; }
.conversation-detail-empty[hidden] { display: none; }
.conversation-detail-empty strong { margin: 0 0 6px; color: #1d1d1f; font-size: var(--text-md); }
.conversation-detail-empty p { margin: 0; font-size: var(--text-base); }
.conversation-detail-content { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.conversation-detail-content[hidden] { display: none; }

.chat-header {
  min-height: 104px;
  padding: 14px 22px 14px 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(60,60,67,.08);
  background: rgba(255,255,255,.42);
}
.chat-back-button { display: none; }
.chat-customer-avatar { width: 60px; height: 60px; font-size: var(--text-md); }
.chat-customer-info { min-width: 0; flex: 1; }
.chat-customer-info h1 { overflow: hidden; margin: 0 0 5px; font-size: var(--text-lg); letter-spacing: -.45px; text-overflow: ellipsis; white-space: nowrap; }
.chat-customer-info p { margin: 0; color: #697386; font-size: var(--text-base); }
.chat-header .soft-icon-button { width: 48px; height: 48px; }
.chat-agent-toggle { min-height: 38px; padding: 4px 5px 4px 11px; display: flex; align-items: center; gap: 8px; color: #8a5a00; border: 1px solid rgba(181,119,12,.14); border-radius: 999px; background: rgba(255,247,226,.88); white-space: nowrap; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.chat-agent-toggle.is-active { color: #087a43; border-color: rgba(20,151,84,.13); background: rgba(231,248,238,.9); }
.chat-agent-toggle>span { font-size: 11px; font-weight: 600; }
.chat-agent-toggle>button { width: 38px; height: 22px; padding: 2px; display: flex; align-items: center; border: 0; border-radius: 999px; background: #c9cbd0; cursor: pointer; transition: background .2s ease; }
.chat-agent-toggle>button>span { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .2s cubic-bezier(.22,.8,.3,1); }
.chat-agent-toggle>button.active { background: #34c759; }
.chat-agent-toggle>button.active>span { transform: translateX(16px); }
.chat-agent-toggle>button:disabled { opacity: .55; cursor: wait; }
.chat-control-button { min-height: 40px; padding: 5px 13px 5px 10px; display: inline-flex; align-items: center; gap: 7px; color: #087a43; border: 1px solid rgba(20,151,84,.16); border-radius: 999px; background: rgba(231,248,238,.9); font: inherit; white-space: nowrap; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.chat-control-button>i { font-size: 17px; }
.chat-control-state { font-size: 12px; font-weight: 700; }
.chat-control-action { padding-left: 8px; border-left: 1px solid currentColor; font-size: 11px; font-weight: 600; opacity: .75; }
.chat-control-button:hover .chat-control-action { opacity: 1; text-decoration: underline; }
.chat-control-button:disabled { opacity: .6; cursor: wait; }
.chat-control-button[data-status="human"] { color: #0876df; border-color: rgba(0,113,227,.18); background: #eaf4ff; }
.chat-control-button[data-status="needs_human"] { color: #9b6100; border-color: rgba(196,106,0,.25); background: #fff4d6; }
@media (max-width: 980px) { .chat-control-action { display: none; } }

.chat-agent-banner {
  min-height: 74px;
  margin: 10px 18px 8px;
  padding: 9px 14px 9px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(48,164,108,.05);
  border-radius: 22px;
  background: linear-gradient(110deg, rgba(218,248,224,.86), rgba(237,249,241,.82));
}
.chat-agent-banner[data-status="needs_human"] { background: linear-gradient(110deg, rgba(255,242,210,.88), rgba(255,249,236,.82)); }
.chat-agent-banner[data-status="human"] { background: linear-gradient(110deg, rgba(224,238,255,.88), rgba(241,247,255,.82)); }
.chat-agent-state { min-width: 0; display: flex; align-items: center; gap: 12px; }
.chat-agent-state > div { min-width: 0; }
.chat-agent-state strong { display: block; margin-bottom: 3px; font-size: var(--text-base); }
.chat-agent-state small { display: block; overflow: hidden; color: #627066; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.bot-avatar { width: 36px; height: 36px; position: relative; display: grid; place-items: center; flex: none; color: #fff; border-radius: 11px; background: #15171b; font-size: var(--text-md); }
.bot-avatar::after { content: ""; width: 9px; height: 9px; position: absolute; right: -2px; bottom: 1px; border: 2px solid #fff; border-radius: 50%; background: #24c56b; }
.take-control-button { min-height: 43px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: none; color: #14171d; border: 1px solid rgba(60,60,67,.10); border-radius: 999px; background: rgba(255,255,255,.72); box-shadow: 0 4px 12px rgba(0,0,0,.035); cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
.take-control-button svg { width: 19px; height: 19px; stroke-width: 1.8; }

.message-thread-modern {
  min-height: 0;
  padding: 26px 30px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
  background-color: #f5f6f7;
  background-image: url("/assets/shalia-chat-pattern.svg");
  background-position: center top;
  background-size: 180px 180px;
  background-attachment: local;
}
.message-thread-modern[data-wallpaper="plain"] { background-color: #f5f6f7; background-image: none; }
.message-group { max-width: min(72%, 560px); display: flex; align-items: flex-end; gap: 9px; }
.message-group.incoming { align-self: flex-start; }
.message-group.outgoing { align-self: flex-end; flex-direction: row-reverse; }
.message-bubble { padding: 13px 16px; color: #17181d; border: 1px solid rgba(60,60,67,.08); border-radius: 18px; background: #fff; box-shadow: 0 5px 16px rgba(31,38,52,.06); font-size: var(--text-base); line-height: 1.5; white-space: pre-wrap; }
.message-bubble.customer { border-bottom-left-radius: 6px; }
.message-bubble.bot,
.message-bubble.human { border-color: rgba(47,169,91,.10); border-bottom-right-radius: 6px; background: #dcf8df; }
.message-group time { padding-bottom: 4px; color: #5f6b7f; font-size: var(--text-xs); white-space: nowrap; }
.message-group.outgoing time { color: #5f6b7f; }
.chat-empty { margin: auto; color: #6e6e73; text-align: center; }
.chat-empty strong { display: block; margin-bottom: 6px; color: #1d1d1f; }
.chat-empty p { margin: 0; font-size: var(--text-sm); }

.chat-composer {
  min-height: 84px;
  margin: 0;
  padding: 11px 16px;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 11px;
  border-top: 1px solid rgba(60,60,67,.08);
  background: rgba(255,255,255,.72);
}
.composer-add-button,
.composer-send-button { width: 52px; height: 52px; display: grid; place-items: center; flex: none; border: 1px solid rgba(60,60,67,.10); border-radius: 50%; background: rgba(255,255,255,.92); cursor: pointer; font-size: var(--text-xl); font-weight: 400; }
.composer-send-button { color: #fff; border-color: #121417; background: #121417; box-shadow: 0 7px 18px rgba(0,0,0,.13); }
.composer-send-button svg { width: 23px; height: 23px; stroke-width: 1.8; }
.composer-send-button:disabled { opacity: .5; }
.chat-composer textarea { min-width: 0; min-height: 50px; max-height: 120px; padding: 14px 92px 12px 18px; flex: 1; color: #20242c; border: 1px solid rgba(60,60,67,.10); border-radius: 25px; outline: 0; background: rgba(248,248,249,.92); resize: none; font-size: var(--text-base); line-height: 1.4; }
.chat-composer textarea:focus { border-color: rgba(0,113,227,.28); box-shadow: 0 0 0 4px rgba(0,113,227,.07); }
.composer-tools { margin-left: -91px; padding: 0 12px 14px 0; display: flex; align-items: center; gap: 14px; color: #111827; font-size: var(--text-lg); position: relative; }
.composer-tools svg { width: 21px; height: 21px; stroke-width: 1.8; pointer-events: none; }
.composer-tool-button { border: 0; background: none; padding: 0; margin: 0; font-size: var(--text-lg); line-height: 1; cursor: pointer; color: inherit; }
.emoji-picker {
  position: absolute;
  bottom: calc(100% + 10px);
  left: -6px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(60,60,67,.10);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  z-index: 5;
}
.emoji-picker[hidden] { display: none; }
.emoji-picker button { border: 0; background: none; padding: 6px; font-size: var(--text-lg); line-height: 1; cursor: pointer; border-radius: 8px; }
.emoji-picker button:hover { background: rgba(60,60,67,.08); }
#mic-button[aria-pressed="true"] { color: #dc3f55; }

.tags-menu-wrap { position: relative; }
.wallpaper-menu-wrap { position: relative; }
.wallpaper-menu { width: 224px; padding: 8px; position: absolute; z-index: 7; top: calc(100% + 10px); right: 0; border: 1px solid rgba(60,60,67,.11); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 16px 38px rgba(15,23,42,.15); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.wallpaper-menu[hidden] { display: none; }
.wallpaper-menu>strong { padding: 6px 8px 8px; display: block; color: #1d1d1f; font-size: var(--text-xs); }
.wallpaper-menu>button { width: 100%; min-height: 54px; padding: 7px 8px; display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 9px; color: #263247; border: 0; border-radius: 11px; background: transparent; cursor: pointer; text-align: left; }
.wallpaper-menu>button:hover,.wallpaper-menu>button.active { background: rgba(0,113,227,.07); }
.wallpaper-menu>button>span:nth-child(2) { font-size: var(--text-xs); font-weight: 600; }
.wallpaper-menu small { margin-top: 2px; display: block; color: #7a8494; font-size: 9px; font-weight: 400; }
.wallpaper-menu>button>i { color: #0878ed; visibility: hidden; }
.wallpaper-menu>button.active>i { visibility: visible; }
.wallpaper-preview { width: 42px; height: 38px; border: 1px solid rgba(60,60,67,.09); border-radius: 9px; background-color: #f5f6f7; }
.wallpaper-preview.shalia { background-image: url("/assets/shalia-chat-pattern.svg"); background-size: 72px; }
.tags-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 240px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(60,60,67,.10);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  z-index: 6;
}
.tags-menu[hidden] { display: none; }
.tags-menu-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tags-menu-list:empty::before { content: "Sin etiquetas todavía."; color: #5f6b7f; font-size: var(--text-xs); }
.tag-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; color: #0665e8; border-radius: 999px; background: rgba(8,119,255,.09); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.tag-pill button { border: 0; background: none; padding: 0; color: inherit; font-size: var(--text-sm); line-height: 1; cursor: pointer; opacity: .6; }
.tag-pill button:hover { opacity: 1; }
#tags-menu-form { display: flex; gap: 6px; }
#tags-menu-input { min-width: 0; flex: 1; padding: 8px 10px; border: 1px solid rgba(60,60,67,.14); border-radius: 8px; font-size: var(--text-sm); }
#tags-menu-form button { padding: 0 12px; color: #fff; border: 0; border-radius: 8px; background: #121417; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.conversation-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.conversation-tags .tag-pill { padding: 2px 7px; font-size: var(--text-xs); }
.recording-indicator { display: flex; align-items: center; gap: 6px; color: #dc3f55; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.recording-indicator[hidden] { display: none; }
.composer-message { position: absolute; left: 82px; bottom: 2px; margin: 0; color: #c33; font-size: var(--text-xs); }

@media (max-width: 980px) {
  .conversation-workspace { grid-template-columns: auto minmax(330px, 42%) minmax(0, 1fr); }
  .conversation-header-actions { gap: 7px; }
  .conversation-header-actions .soft-icon-button,
  .conversation-header-actions .dark-icon-button { width: 44px; height: 44px; }
  .conversation-page-title { font-size: var(--text-xl); }
  .chat-header-actions .soft-icon-button:nth-child(1) { display: none; }
}

@media (max-width: 760px) {
  .conversation-workspace-page { padding: 0; overflow: hidden; }
  .conversation-workspace { height: 100dvh; min-height: 0; margin: 0; display: block; }
  .icon-rail { display: none; }
  .conversation-inbox,
  .conversation-detail { height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .conversation-inbox { padding: 10px 8px 0; }
  .conversation-detail { display: none; }
  .conversation-workspace.is-thread-open .conversation-inbox { display: none; }
  .conversation-workspace.is-thread-open .conversation-detail { display: block; }
  .conversation-page-title { font-size: var(--text-xl); }
  .conversation-inbox-header { min-height: 58px; }
  .conversation-search { margin-inline: 8px; }
  .conversation-filters { padding-inline: 8px; }
  .conversation-list-item { min-height: 78px; padding-inline: 10px; }
  .chat-header { min-height: 76px; padding: 10px 12px; gap: 10px; }
  .chat-back-button { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; flex: none; color: #111827; border: 0; background: transparent; }
  .chat-back-button svg { width: 24px; height: 24px; }
  .chat-customer-avatar { width: 44px; height: 44px; }
  .chat-customer-info h1 { font-size: var(--text-md); }
  .chat-customer-info p { font-size: var(--text-xs); }
  .chat-header-actions { gap: 5px; }
  .chat-header-actions .soft-icon-button { width: 38px; height: 38px; border-radius: 13px; }
  .chat-header-actions .soft-icon-button:nth-child(1),
  .chat-header-actions .soft-icon-button:nth-child(2) { display: none; }
  .chat-agent-banner { min-height: 62px; margin: 8px 10px 6px; padding: 8px 10px; border-radius: 17px; }
  .chat-agent-state small { display: none; }
  .bot-avatar { width: 32px; height: 32px; }
  .take-control-button { min-height: 39px; padding-inline: 13px; }
  .message-thread-modern { padding: 18px 13px; }
  .message-group { max-width: 86%; }
  .message-bubble { padding: 11px 13px; font-size: var(--text-base); }
  .message-group time { font-size: var(--text-xs); }
  .chat-composer { min-height: 72px; padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); gap: 7px; }
  .composer-add-button { width: 44px; height: 44px; font-size: var(--text-xl); }
  .composer-send-button { width: 46px; height: 46px; }
  .chat-composer textarea { min-height: 46px; padding: 12px 14px; }
  .composer-tools { display: none; }
}

/* Conversations polish --------------------------------------------------- */
@media (min-width: 761px) {
  .conversation-workspace { grid-template-columns: auto minmax(360px, 420px) minmax(0, 1fr); }
}

.conversation-inbox { padding: 14px 10px 0; }
.conversation-inbox-header { min-height: 54px; padding: 0 10px 8px; }
.conversation-page-title { font-size: 30px; letter-spacing: -1.15px; }
.conversation-header-actions { display: none; }
.conversation-search { min-height: 44px; margin: 0 10px 10px; border-radius: 14px; }
.conversation-search input { font-size: var(--text-base); }
.conversation-filters { gap: 6px; padding: 0 10px 10px; }
.conversation-filter { min-height: 36px; padding-inline: 12px; gap: 7px; font-size: var(--text-sm); }
.conversation-filter span { min-width: 21px; height: 21px; padding-inline: 6px; }

.conversation-list-item {
  min-height: 76px;
  padding-block: 8px;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.conversation-list-item:hover { transform: translateX(2px); }
.conversation-list-item.active {
  background: linear-gradient(108deg, rgba(218,233,255,.90), rgba(240,246,255,.72));
  box-shadow: inset 3px 0 #147ce5, inset 0 0 0 1px rgba(20,124,229,.035);
}
.conversation-contact-avatar { width: 48px; height: 48px; }
.conversation-list-copy strong { margin-bottom: 4px; font-size: var(--text-base); letter-spacing: -.15px; }
.conversation-list-copy > span { color: #5f6b7f; }

.chat-header { min-height: 78px; padding: 10px 18px 10px 22px; gap: 12px; }
.chat-customer-avatar { width: 48px; height: 48px; }
.chat-header-actions { gap: 7px; }
.chat-header .soft-icon-button { width: 40px; height: 40px; border-radius: 13px; }
.chat-header .soft-icon-button svg { width: 19px; height: 19px; }
.chat-customer-info h1 { margin-bottom: 3px; font-size: var(--text-md); }
.chat-customer-info p { font-size: var(--text-xs); }
@media (max-width: 980px) { .chat-agent-toggle>span { display: none; } .chat-agent-toggle { padding-left: 5px; } }

.chat-agent-banner {
  min-height: 56px;
  margin: 8px 12px 5px;
  padding: 7px 11px;
  border-radius: 16px;
  transition: background .2s ease, border-color .2s ease;
}
.bot-avatar { width: 32px; height: 32px; border-radius: 10px; }
.take-control-button { min-height: 36px; padding-inline: 14px; transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.take-control-button:hover { background: #fff; box-shadow: 0 7px 18px rgba(0,0,0,.06); transform: translateY(-1px); }
.take-control-button:disabled { opacity: .5; cursor: wait; }

.message-thread-modern { gap: 8px; padding: 20px 24px; }
.message-group { max-width: min(70%, 540px); }
.message-group.is-continuation { margin-top: -4px; }
.message-bubble {
  min-width: 105px;
  padding: 11px 13px 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 12px;
  border-radius: 17px;
  line-height: 1.45;
  transition: transform .16s ease, box-shadow .16s ease;
}
.message-bubble:hover { box-shadow: 0 7px 20px rgba(31,38,52,.075); transform: translateY(-1px); }
.message-copy { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-time { padding-bottom: 1px; color: #5f6b7f; font-size: var(--text-xs); line-height: 1; white-space: nowrap; }
.message-bubble.bot .message-time,
.message-bubble.human .message-time { color: #398d70; }
.message-group.is-continuation .message-bubble.customer { border-top-left-radius: 7px; }
.message-group.is-continuation .message-bubble.bot,
.message-group.is-continuation .message-bubble.human { border-top-right-radius: 7px; }

.chat-composer { min-height: 76px; padding-block: 10px; }
.composer-add-button,
.composer-send-button { width: 48px; height: 48px; transition: opacity .16s ease, transform .16s ease, background .16s ease; }
.composer-add-button:hover,
.composer-send-button:not(:disabled):hover { transform: translateY(-1px) scale(1.02); }
.composer-send-button:disabled { color: #5f6b7f; border-color: rgba(60,60,67,.08); background: #e9eaec; box-shadow: none; cursor: default; }
.chat-composer textarea { min-height: 48px; padding-block: 13px 11px; background: rgba(246,246,248,.92); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.chat-composer:focus-within textarea { background: #fff; }
.composer-tools { opacity: .55; transition: opacity .16s ease; }
.chat-composer:focus-within .composer-tools { opacity: 1; }

.conversation-skeleton-list { padding: 4px 8px; }
.conversation-skeleton-row {
  height: 76px;
  position: relative;
  display: block;
  border-bottom: 1px solid rgba(60,60,67,.07);
}
.conversation-skeleton-row::before,
.conversation-skeleton-row::after,
.message-skeleton span {
  content: "";
  position: absolute;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, #eceef1 25%, #f7f8fa 42%, #eceef1 62%);
  background-size: 300% 100%;
  animation: conversation-shimmer 1.35s ease-in-out infinite;
}
.conversation-skeleton-row::before { width: 46px; height: 46px; left: 8px; top: 15px; border-radius: 50%; }
.conversation-skeleton-row::after { width: calc(100% - 88px); height: 31px; left: 68px; top: 19px; border-radius: 7px; }
.message-skeleton { min-height: 100%; position: relative; }
.message-skeleton span { width: 42%; height: 58px; position: absolute; }
.message-skeleton span:nth-child(1) { left: 0; top: 10%; }
.message-skeleton span:nth-child(2) { right: 0; top: 31%; background-position: 50% 0; }
.message-skeleton span:nth-child(3) { left: 0; top: 53%; }

@keyframes conversation-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (max-width: 760px) {
  .conversation-list-item { min-height: 74px; }
  .conversation-list-item:hover { transform: none; }
  .chat-header { min-height: 72px; }
  .chat-agent-banner { min-height: 58px; }
  .message-thread-modern { gap: 7px; padding-block: 15px; }
  .message-group { max-width: 88%; }
  .message-bubble { padding: 10px 11px 7px; column-gap: 9px; }
  .chat-composer { min-height: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .conversation-skeleton-row::before,
  .conversation-skeleton-row::after,
  .message-skeleton span { animation: none; }
}

/* Conversation details --------------------------------------------------- */
.message-date-divider {
  width: 100%;
  margin: 9px 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.message-date-divider span {
  padding: 6px 11px;
  color: #5f6b7f;
  border: 1px solid rgba(60,60,67,.07);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 3px 10px rgba(31,38,52,.035);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .02em;
}

.attachment-preview {
  min-width: 245px;
  max-width: min(420px, calc(100% - 150px));
  min-height: 72px;
  padding: 8px 10px;
  position: absolute;
  left: 76px;
  bottom: calc(100% + 9px);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 11px;
  overflow: hidden;
  border: 1px solid rgba(60,60,67,.10);
  border-radius: 17px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 38px rgba(24,32,46,.13);
  backdrop-filter: blur(20px);
  animation: attachment-enter .18s ease both;
}
.attachment-preview[hidden] { display: none; }
.attachment-preview img { width: 55px; height: 55px; flex: none; border-radius: 12px; object-fit: cover; background: #eee; }
.attachment-preview > div { min-width: 0; flex: 1; }
.attachment-preview strong,
.attachment-preview span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview strong { margin-bottom: 5px; color: #202229; font-size: var(--text-xs); }
.attachment-preview span { color: #5f6b7f; font-size: var(--text-xs); }
.attachment-preview button { width: 29px; height: 29px; padding: 0; flex: none; color: #575c66; border: 0; border-radius: 50%; background: #eff0f2; cursor: pointer; font-size: var(--text-lg); line-height: 1; }
.attachment-preview button:hover { color: #b42318; background: #fff0ef; }

.customer-drawer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 24;
  border: 0;
  background: rgba(30,34,42,.10);
  backdrop-filter: blur(2px);
  cursor: default;
  animation: drawer-fade .2s ease both;
}
.customer-drawer-backdrop[hidden],
.customer-drawer[hidden] { display: none; }
.customer-drawer {
  width: min(370px, 86%);
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 25;
  padding: 24px;
  overflow-y: auto;
  border-left: 1px solid rgba(60,60,67,.10);
  background: rgba(250,250,251,.97);
  box-shadow: -18px 0 50px rgba(24,32,46,.12);
  backdrop-filter: saturate(170%) blur(24px);
  animation: drawer-enter .22s cubic-bezier(.22,.8,.3,1) both;
}
.customer-drawer > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.customer-drawer > header span { display: block; margin-bottom: 6px; color: #0877e9; font-size: var(--text-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.customer-drawer h2 { margin: 0; font-size: var(--text-lg); letter-spacing: -.55px; }
.customer-drawer > header button { width: 34px; height: 34px; padding: 0; color: #5c616b; border: 0; border-radius: 50%; background: #ebedf0; cursor: pointer; font-size: var(--text-lg); }
.customer-drawer-profile { padding: 35px 0 30px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.customer-drawer-profile .chat-customer-avatar { width: 76px; height: 76px; margin-bottom: 14px; font-size: var(--text-lg); }
.customer-drawer-profile strong { margin-bottom: 5px; font-size: var(--text-md); }
.customer-drawer-profile small { color: #5f6b7f; font-size: var(--text-xs); }
.customer-detail-list { margin: 0; border-top: 1px solid rgba(60,60,67,.10); }
.customer-detail-list > div { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(60,60,67,.10); }
.customer-detail-list dt { color: #5f6b7f; font-size: var(--text-xs); }
.customer-detail-list dd { margin: 0; color: #24262c; font-size: var(--text-xs); font-weight: 600; text-align: right; }
.channel-dot { width: 7px; height: 7px; margin-right: 6px; display: inline-block; border-radius: 50%; background: #20c565; }
.customer-drawer-action { min-height: 46px; margin-top: 24px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; color: #1269c5; border-radius: 13px; background: rgba(0,113,227,.08); font-size: var(--text-xs); font-weight: 600; }

@keyframes attachment-enter {
  from { opacity: 0; transform: translateY(7px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes drawer-enter {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes drawer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 760px) {
  .attachment-preview { left: 10px; right: 10px; bottom: calc(100% + 7px); max-width: none; }
  .customer-drawer { width: min(345px, 92%); padding: 20px; }
  .message-date-divider { margin-block: 7px 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .attachment-preview,
  .customer-drawer,
  .customer-drawer-backdrop { animation: none; }
}

/* Delivery and connection states ---------------------------------------- */
.conversation-workspace { position: relative; }
.connection-alert {
  min-height: 48px;
  padding: 7px 9px 7px 8px;
  position: absolute;
  z-index: 45;
  right: 24px;
  bottom: 92px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6f3b00;
  border: 1px solid rgba(196,106,0,.16);
  border-radius: 15px;
  background: rgba(255,248,231,.96);
  box-shadow: 0 12px 32px rgba(70,45,12,.12);
  backdrop-filter: blur(18px);
  transform: none;
}
.connection-alert[hidden] { display: none; }
.connection-alert > span { width: 30px; height: 30px; display: grid; place-items: center; flex: none; color: #fff; border-radius: 10px; background: #d9850b; font-size: var(--text-base); font-weight: 600; }
.connection-alert > div { min-width: 0; }
.connection-alert strong,
.connection-alert small { display: block; white-space: nowrap; }
.connection-alert strong { margin-bottom: 2px; font-size: var(--text-xs); }
.connection-alert small { color: #8b6332; font-size: var(--text-xs); }
.connection-alert a,
.connection-alert button { min-height: 32px; padding: 0 11px; display: inline-flex; align-items: center; color: #754000; border: 0; border-radius: 9px; background: rgba(217,133,11,.12); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }

.message-time { display: inline-flex; align-items: center; gap: 4px; }
.message-status { min-width: 12px; display: inline-flex; align-items: center; justify-content: center; color: #5f6b7f; font-size: var(--text-xs); font-weight: 600; letter-spacing: -2px; }
.message-status.is-sending { color: #5f6b7f; letter-spacing: 0; animation: status-pulse 1s ease-in-out infinite; }
.message-status.is-read { color: #087be8; }
.message-status.is-failed { width: 15px; height: 15px; color: #fff; border-radius: 50%; background: #d64545; letter-spacing: 0; font-size: var(--text-xs); }
.message-group.is-optimistic .message-bubble { opacity: .78; }
.message-group.is-failed { align-items: center; }
.message-group.is-failed .message-bubble { border-color: rgba(214,69,69,.20); background: #fff0ef; }
.message-retry-button { min-height: 28px; padding: 0 9px; color: #b42318; border: 1px solid rgba(180,35,24,.16); border-radius: 9px; background: #fff; cursor: pointer; font-size: var(--text-xs); font-weight: 600; }
.message-retry-button:hover { background: #fff5f4; }
/* 👍 / 👎 a las respuestas del bot (dashboard.js, createFeedbackButtons):
   aparecen al pasar el mouse; si ya se califico, quedan visibles. */
.message-feedback { align-self: flex-end; display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity .15s ease; }
.message-group:hover .message-feedback, .message-feedback.has-feedback, .message-feedback:focus-within { opacity: 1; }
.message-feedback button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; color: #8a94a6; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 15px; }
.message-feedback button:hover { color: #3a4458; background: rgba(118,118,128,.1); }
.message-feedback button[data-feedback="1"].active { color: #1f9d55; background: rgba(52,199,89,.12); }
.message-feedback button[data-feedback="-1"].active { color: #d92d20; background: rgba(217,45,32,.1); }
.message-feedback.has-feedback button:not(.active) { display: none; }
.message-group:hover .message-feedback.has-feedback button { display: grid; }
@media (hover: none) { .message-feedback { opacity: .55; } }
.chat-composer.is-disconnected { background: rgba(245,245,246,.92); }
.chat-composer.is-disconnected textarea { color: #5f6b7f; background: #ececef; cursor: not-allowed; }

@keyframes status-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

@media (max-width: 760px) {
  .connection-alert { width: calc(100% - 24px); right: 12px; bottom: 82px; justify-content: center; }
  .connection-alert small { overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
  .message-status.is-sending { animation: none; }
}

/* Agenda -------------------------------------------------------------- */
.agenda-page {
  --agenda-card: rgba(255, 255, 255, .92);
  --agenda-border: rgba(41, 54, 75, .10);
  overflow-x: clip;
}

.agenda-page .topbar {
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: rgba(245,245,247,.76);
  box-shadow: none;
}

.agenda-page .main-area,
.agenda-page .agenda-content,
.agenda-toolbar,
.agenda-layout { min-width: 0; }
.dashboard-page .agenda-content { padding-top: 14px !important; }
.agenda-section-title { min-width: 0; }
.agenda-section-title h1 { margin: 0; color: #171f31; font-size: var(--text-lg); font-weight: 650; letter-spacing: -.55px; line-height: 1.1; }
.agenda-section-title p { margin: 4px 0 0; color: #6b7689; font-size: var(--text-xs); line-height: 1; }
.agenda-topbar .topbar-actions { margin-left: auto; gap: 9px; }
.agenda-topbar .agenda-new-button { min-width: 0; min-height: 40px; padding: 0 15px; border-radius: 10px; background: #0878ed; box-shadow: 0 3px 9px rgba(8,113,237,.14); font-size: var(--text-sm); }
.agenda-topbar .agenda-new-button > span { font-size: inherit; font-weight: inherit; line-height: inherit; }
.agenda-topbar .icon-button { width: 40px; height: 40px; box-shadow: none; }
.agenda-topbar .user-avatar { margin-left: 5px; }
.agenda-heading { margin-bottom: 22px !important; }
.agenda-heading h2 { font-size: var(--text-xl) !important; letter-spacing: -2.2px !important; }

.agenda-toolbar {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto minmax(155px, auto) 40px;
  align-items: center;
  gap: 10px;
}

.agenda-search,
.agenda-date-range {
  min-height: 42px;
  display: flex;
  align-items: center;
  border: 1px solid var(--agenda-border);
  border-radius: 12px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 26px rgba(34, 63, 105, .035);
}

.agenda-search { padding: 0 17px; gap: 12px; }
.agenda-search svg,
.agenda-date-range svg { width: 19px; height: 19px; flex: none; color: #64718a; stroke-width: 1.8; }
.agenda-search input { width: 100%; min-width: 0; padding: 0; color: var(--panel-ink); border: 0; outline: 0; background: transparent; font-size: var(--text-sm); }
.agenda-search input::placeholder { color: #5f6b7f; }

.agenda-range-button,
.agenda-more-button,
.agenda-new-button,
.agenda-card-header button {
  min-height: 48px;
  padding: 0 20px;
  color: #35415a;
  border: 1px solid var(--agenda-border);
  border-radius: 12px;
  background: rgba(255,255,255,.88);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.agenda-range-button:hover,
.agenda-more-button:hover,
.agenda-card-header button:hover { background: #fff; transform: translateY(-1px); }
.agenda-range-button.active { color: #0064cc; border-color: rgba(0,113,227,.26); background: #edf6ff; box-shadow: inset 0 0 0 1px rgba(0,113,227,.04); }
.agenda-range-button,
.agenda-more-button { min-height: 42px; padding-inline: 15px; }
.agenda-date-range { min-width: 155px; padding: 0 13px; gap: 8px; color: #35415a; font-size: var(--text-xs); font-weight: 600; }
.agenda-more-button { width: 40px; padding: 0; color: #526078; border-radius: 50%; font-size: var(--text-md); letter-spacing: 1px; }
.agenda-new-button { min-width: 150px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: #fff; border-color: transparent; background: linear-gradient(180deg, #2b82f6, #0069e8); box-shadow: 0 9px 24px rgba(0,105,232,.22); }
.agenda-new-button:hover { background: linear-gradient(180deg, #368bfa, #0071ed); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,105,232,.27); }
.agenda-new-button span { font-size: var(--text-lg); font-weight: 400; line-height: 1; }

.agenda-stats {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.agenda-stat-card {
  min-height: 96px;
  padding: 15px 17px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--agenda-border);
  border-radius: 19px;
  background: var(--agenda-card);
  box-shadow: 0 12px 35px rgba(31, 58, 98, .045);
}
.agenda-stat-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; }
.agenda-stat-icon svg { width: 27px; height: 27px; stroke-width: 1.9; }
.agenda-stat-card.blue .agenda-stat-icon { color: #0875eb; background: #eaf4ff; }
.agenda-stat-card.green .agenda-stat-icon { color: #0aad74; background: #e4f8f1; }
.agenda-stat-card.orange .agenda-stat-icon { color: #ef641f; background: #fff0e8; }
.agenda-stat-card > div > span { display: block; margin-bottom: 5px; color: #586682; font-size: var(--text-xs); font-weight: 600; }
.agenda-stat-card strong { display: block; color: #0b1834; font-size: var(--text-xl); line-height: .95; letter-spacing: -1px; }
.agenda-stat-card small { display: block; margin-top: 8px; overflow: hidden; color: #5f6b7f; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.agenda-stat-arrow { color: #5f6b7f; font-size: var(--text-xl); font-weight: 400; }

.agenda-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(280px, .72fr);
  align-items: start;
  gap: 14px;
}
.agenda-table-card,
.agenda-side-card {
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--agenda-border);
  border-radius: 19px;
  background: var(--agenda-card);
  box-shadow: 0 12px 38px rgba(31, 58, 98, .045);
}
.agenda-table-card { overflow: visible; }
.agenda-card-header {
  min-height: 62px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--agenda-border);
}
.agenda-card-header h3 { margin: 0; color: #14203b; font-size: var(--text-md); letter-spacing: -.35px; }
.agenda-card-header h3 span { color: #5f6b7f; font-weight: 500; }
.agenda-card-header button { min-height: 36px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; border-radius: 11px; font-size: var(--text-xs); }
.agenda-card-header button svg { width: 16px; height: 16px; stroke-width: 1.8; }

.agenda-tabs { min-height: 55px; padding: 10px 18px; display: flex; align-items: center; gap: 7px; }
.agenda-tabs button { min-height: 34px; padding: 0 16px; color: #65738d; border: 1px solid rgba(50,65,92,.08); border-radius: 999px; background: #f8f9fb; cursor: pointer; font-size: var(--text-xs); font-weight: 600; }
.agenda-tabs button.active { color: #0570e4; border-color: rgba(0,113,227,.08); background: #e8f3ff; }

.agenda-table-head,
.agenda-table-row {
  display: grid;
  grid-template-columns: minmax(132px, 1.35fr) minmax(104px, 1fr) minmax(82px, .76fr) minmax(48px, .46fr) minmax(76px, .7fr) minmax(88px, .78fr);
  align-items: center;
  gap: 7px;
}
.agenda-table-head > *,
.agenda-table-row > * { min-width: 0; }
.agenda-table-head { min-height: 33px; padding: 0 68px 0 18px; color: #65738d; border-bottom: 1px solid var(--agenda-border); font-size: var(--text-xs); font-weight: 600; }
.agenda-table-head > :last-child { display: none; }
.agenda-table-head > :nth-child(5),
.agenda-table-head > :nth-child(6) { text-align: center; }
.agenda-table-row { min-height: 63px; padding: 8px 68px 8px 18px; position: relative; border-bottom: 1px solid var(--agenda-border); transition: background .16s ease; }
.agenda-table-row:last-child { border-bottom: 0; border-radius: 0 0 19px 19px; }
.agenda-table-row:hover { background: rgba(247,250,254,.84); }

.agenda-client-cell { min-width: 0; display: flex; align-items: center; gap: 10px; }
.agenda-client-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: none; color: #285782; border: 1px solid rgba(0,90,170,.08); border-radius: 50%; background: linear-gradient(145deg, #e5f3ff, #d6e9f7); font-size: var(--text-xs); font-weight: 600; }
.agenda-client-cell > div,
.agenda-service-cell,
.agenda-date-cell { min-width: 0; }
.agenda-client-cell strong,
.agenda-client-cell small,
.agenda-service-cell strong,
.agenda-service-cell small,
.agenda-date-cell strong,
.agenda-date-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-client-cell strong,
.agenda-service-cell strong,
.agenda-date-cell strong { color: #17233d; font-size: var(--text-xs); font-weight: 600; }
.agenda-client-cell small,
.agenda-service-cell small,
.agenda-date-cell small { margin-top: 3px; color: #5f6b7f; font-size: var(--text-xs); }
.agenda-time-cell { color: #263550; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.agenda-channel-cell { display: flex; align-items: center; justify-content: center; gap: 5px; overflow: hidden; color: #25344d; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.agenda-channel-cell span { width: 26px; height: 26px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #13bf67; font-size: var(--text-xs); }
.agenda-status { width: 100%; min-width: 0; min-height: 25px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; justify-self: center; gap: 4px; overflow: hidden; border-radius: 999px; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.agenda-status i { display: none; }
.agenda-status.scheduled { width: 28px; height: 28px; min-height: 28px; padding: 0; justify-self: center; color: #07925c; border: 1px solid rgba(7,146,92,.42); border-radius: 50%; background: #f2fbf7; }
.agenda-status.scheduled i { display: inline-flex; font-size: var(--icon-sm); }
.agenda-status.completed { color: #0872df; background: #e7f2ff; }
.agenda-status.cancelled { color: #df552d; background: #fff0e9; }

.agenda-row-actions { width: 30px; position: absolute; z-index: 4; top: 50%; right: 12px; transform: translateY(-50%); }
.agenda-row-more { width: 30px; height: 30px; padding: 0; color: #526078; border: 1px solid rgba(0,113,227,.11); border-radius: 9px; background: #fff; cursor: pointer; font-size: var(--text-xs); letter-spacing: 1px; }
.agenda-action-menu { min-width: 154px; padding: 6px; position: absolute; z-index: 30; top: 36px; right: 0; border: 1px solid var(--agenda-border); border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 14px 36px rgba(24,42,70,.15); }
.agenda-action-menu[hidden] { display: none; }
.agenda-action-menu button { width: 100%; min-height: 34px; padding: 0 10px; color: #25344d; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; font-size: var(--text-xs); }
.agenda-action-menu button:hover { background: #f3f5f8; }
.agenda-action-menu button.destructive { color: #d34832; }

.agenda-empty,
.agenda-error { min-height: 265px; padding: 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #5f6b7f; text-align: center; }
.agenda-loading { min-height: 210px; display: grid; place-items: center; color: #5f6b7f; font-size: var(--text-xs); }
.agenda-empty > span { width: 48px; height: 48px; margin-bottom: 13px; display: grid; place-items: center; color: #1676dc; border-radius: 15px; background: #eaf4ff; font-size: var(--text-lg); }
.agenda-empty strong,
.agenda-error strong { color: #1b2943; font-size: var(--text-base); }
.agenda-empty p,
.agenda-error span { margin: 6px 0 0; font-size: var(--text-xs); }

.agenda-rail { display: grid; gap: 12px; }
.agenda-side-card { padding: 18px; }
.agenda-side-card > header { margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agenda-side-card > header h3 { margin: 0; color: #15213b; font-size: var(--text-base); letter-spacing: -.25px; }
.agenda-side-card > header > span { padding: 6px 10px; color: #0870d9; border-radius: 999px; background: #e9f4ff; font-size: var(--text-xs); font-weight: 600; }
.agenda-side-card > header > .coming-soon { color: #5f6b7f; background: #f0f2f5; }
.today-appointments { display: grid; }
.today-appointment { min-height: 54px; display: grid; grid-template-columns: 45px 34px minmax(0,1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--agenda-border); }
.today-appointment time { color: #1d2c47; font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.today-appointment .agenda-client-avatar { width: 32px; height: 32px; font-size: var(--text-xs); }
.today-appointment div { min-width: 0; }
.today-appointment strong,
.today-appointment small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-appointment strong { color: #1d2941; font-size: var(--text-xs); }
.today-appointment small { margin-top: 3px; color: #5f6b7f; font-size: var(--text-xs); }
.today-appointment .agenda-status { min-height: 23px; padding: 0 8px; font-size: var(--text-xs); }
.agenda-side-empty { margin: 8px 0 18px; padding: 20px 0; color: #5f6b7f; text-align: center; font-size: var(--text-xs); }
.agenda-ai-note { margin-top: 14px; padding: 12px; display: flex; align-items: flex-start; gap: 11px; color: #0868d1; border-radius: 13px; background: linear-gradient(135deg, #eef7ff, #f8fbff); }
.agenda-ai-note > span { font-size: var(--text-lg); line-height: 1; }
.agenda-ai-note strong { display: block; font-size: var(--text-xs); }
.agenda-ai-note p { margin: 4px 0 0; color: #5f6b7f; font-size: var(--text-xs); line-height: 1.45; }
.reminder-copy { display: flex; align-items: center; gap: 12px; }
.reminder-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: none; color: #0875e8; border-radius: 50%; background: #eaf4ff; }
.reminder-icon svg { width: 21px; height: 21px; stroke-width: 1.8; }
.reminder-copy strong { display: block; color: #25324a; font-size: var(--text-xs); }
.reminder-copy p { margin: 4px 0 0; color: #5f6b7f; font-size: var(--text-xs); line-height: 1.5; }

.appointment-dialog { width: min(560px, calc(100% - 28px)); padding: 0; color: var(--panel-ink); border: 1px solid rgba(60,60,67,.15); border-radius: 22px; background: rgba(255,255,255,.98); box-shadow: 0 30px 90px rgba(20,35,58,.22); }
.appointment-dialog::backdrop { background: rgba(19,28,42,.28); backdrop-filter: blur(7px); }
.appointment-dialog form > header { padding: 22px 24px 18px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--agenda-border); }
.appointment-dialog form > header span { display: block; margin-bottom: 5px; color: #0872df; font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.appointment-dialog h2 { margin: 0; font-size: var(--text-lg); letter-spacing: -.7px; }
.appointment-dialog form > header button { width: 34px; height: 34px; padding: 0; color: #606873; border: 0; border-radius: 50%; background: #f0f1f3; cursor: pointer; font-size: var(--text-lg); }
.appointment-form-grid { padding: 22px 24px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.appointment-notes-field { grid-column: 1 / -1; }
.appointment-dialog .field span { display: block; margin-bottom: 7px; color: #4e596b; font-size: var(--text-xs); font-weight: 600; }
.appointment-dialog input,
.appointment-dialog textarea { width: 100%; padding: 11px 12px; color: #1d2738; border: 1px solid rgba(60,60,67,.15); border-radius: 11px; outline: 0; background: #f8f8fa; font-size: var(--text-xs); transition: border .16s ease, box-shadow .16s ease; }
.appointment-dialog textarea { resize: vertical; }
.appointment-dialog input:focus,
.appointment-dialog textarea:focus { border-color: rgba(0,113,227,.5); box-shadow: 0 0 0 3px rgba(0,113,227,.09); background: #fff; }
.appointment-form-message { min-height: 17px; margin: 0; padding: 0 24px; color: #65738b; font-size: var(--text-xs); }
.appointment-form-message.error { color: #d34832; }
.appointment-dialog footer { padding: 16px 24px 22px; display: flex; justify-content: flex-end; gap: 9px; }
.appointment-dialog footer button { min-height: 40px; padding: 0 17px; border-radius: 11px; cursor: pointer; font-size: var(--text-xs); font-weight: 600; }
.dialog-secondary { color: #424c5c; border: 1px solid rgba(60,60,67,.13); background: #fff; }
.dialog-primary { color: #fff; border: 0; background: #0874e4; box-shadow: 0 7px 18px rgba(0,113,227,.18); }
.dialog-primary:disabled { opacity: .58; cursor: wait; }

@media (max-width: 1220px) {
  .agenda-toolbar { grid-template-columns: minmax(260px, 1fr) auto auto minmax(185px, auto) auto; }
  .agenda-more-button { display: none; }
  .agenda-layout { grid-template-columns: 1fr; }
  .agenda-rail { grid-template-columns: 1fr 1fr; }
  .agenda-table-head,
  .agenda-table-row { grid-template-columns: minmax(150px, 1.35fr) minmax(120px, 1.1fr) minmax(95px, .8fr) 58px 95px 96px; }
}

@media (max-width: 900px) {
  .agenda-page .topbar { margin: 0; }
  .agenda-toolbar { grid-template-columns: 1fr auto auto; }
  .agenda-search { grid-column: 1 / -1; }
  .agenda-date-range { display: none; }
  .agenda-new-button { margin-left: auto; }
  .agenda-stats { grid-template-columns: 1fr; }
  .agenda-stat-card { min-height: 105px; }
  .agenda-table-card { overflow: hidden; }
  .agenda-table-head { display: none; }
  .agenda-table-row { grid-template-columns: minmax(150px,1.25fr) minmax(110px,1fr) 80px 90px; }
  .agenda-time-cell { display: none; }
  .agenda-channel-cell { display: none; }
  .agenda-rail { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .agenda-page .topbar { margin: 0; border-width: 0 0 1px; border-radius: 0; }
  .dashboard-page .agenda-content { padding-top: 12px !important; }
  .agenda-heading { margin-bottom: 18px !important; }
  .agenda-heading h2 { font-size: var(--text-xl) !important; }
  .agenda-toolbar { grid-template-columns: 1fr 1fr; }
  .agenda-range-button { min-height: 42px; padding: 0 12px; }
  .agenda-new-button { min-height: 44px; grid-column: 1 / -1; }
  .agenda-topbar .agenda-new-button { width: 40px; min-height: 40px; padding: 0; }
  .agenda-topbar .agenda-new-button > span { display: none; }
  .agenda-stat-card { grid-template-columns: 52px minmax(0,1fr) auto; padding: 16px; gap: 14px; }
  .agenda-stat-icon { width: 50px; height: 50px; }
  .agenda-tabs { overflow-x: auto; scrollbar-width: none; }
  .agenda-tabs::-webkit-scrollbar { display: none; }
  .agenda-tabs button { flex: none; }
  .agenda-table-row { min-height: 82px; grid-template-columns: minmax(132px,1.3fr) minmax(102px,1fr) auto; padding: 8px 58px 8px 13px; gap: 7px; }
  .agenda-date-cell { display: none; }
  .agenda-status { justify-self: end; }
  .agenda-client-avatar { width: 33px; height: 33px; }
  .today-appointment { grid-template-columns: 39px 32px minmax(0,1fr); }
  .today-appointment .agenda-status { display: none; }
  .appointment-form-grid { grid-template-columns: 1fr; }
  .appointment-notes-field { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .agenda-range-button,
  .agenda-more-button,
  .agenda-new-button,
  .agenda-card-header button,
  .agenda-table-row { transition: none; }
}

/* Settings ------------------------------------------------------------ */
.settings-page {
  --settings-card: rgba(255,255,255,.92);
  --settings-border: rgba(44,58,82,.10);
  overflow-x: clip;
}

.settings-page .main-area,
.settings-page .settings-content,
.settings-layout,
.settings-sections,
.settings-form-card,
.settings-main-column,
.settings-rail { min-width: 0; }
.dashboard-page .settings-content { padding-top: 14px !important; }
.settings-section-title { min-width: 0; }
.settings-section-title h1 { margin: 0; color: #171f31; font-size: var(--text-lg); font-weight: 650; letter-spacing: -.55px; line-height: 1.1; }
.settings-section-title p { margin: 4px 0 0; color: #6b7689; font-size: var(--text-xs); line-height: 1; }
.settings-heading { margin-bottom: 25px !important; }
.settings-heading h2 { font-size: var(--text-xl) !important; letter-spacing: -2px !important; }
.settings-notification { position: relative; }
.settings-notification > span { width: 7px; height: 7px; position: absolute; top: 3px; right: 2px; z-index: 2; border: 2px solid #f5f5f7; border-radius: 50%; background: #ff3b30; }

.settings-plan-card {
  margin-top: auto;
  padding: 16px;
  border: 1px solid var(--settings-border);
  border-radius: 17px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 32px rgba(27,49,82,.05);
}
.settings-plan-card > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-plan-card > div strong { color: #17243e; font-size: var(--text-sm); }
.settings-plan-card > div span { padding: 5px 9px; color: #148252; border-radius: 999px; background: #e2f6eb; font-size: var(--text-xs); font-weight: 600; }
.settings-plan-card p { margin: 16px 0 3px; color: #1a2841; font-size: var(--text-xs); font-weight: 600; }
.settings-plan-card small { color: #5f6b7f; font-size: var(--text-xs); }
.settings-plan-card > a { min-height: 38px; margin-top: 15px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; color: #38445b; border-radius: 10px; background: #f3f5f8; font-size: var(--text-xs); font-weight: 600; }
.settings-plan-card > a span { color: #66748e; font-size: var(--text-lg); font-weight: 400; }
.settings-page .sidebar-bottom { margin-top: auto; }

.settings-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1.45fr) minmax(270px, .82fr);
  align-items: start;
  gap: 14px;
}

.settings-sections {
  padding: 6px;
  position: sticky;
  top: 96px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--settings-border);
  border-radius: 18px;
  background: rgba(255,255,255,.69);
  box-shadow: 0 12px 38px rgba(31,58,98,.035);
  backdrop-filter: blur(18px);
}
.settings-sections > a,
.settings-section-disabled {
  min-height: 62px;
  padding: 9px 12px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #354058;
  border-radius: 13px;
  transition: background .18s ease, color .18s ease;
}
.settings-sections > a::before { content: ""; width: 2px; position: absolute; inset: 10px auto 10px -6px; border-radius: 2px; background: transparent; }
.settings-sections > a:hover { background: rgba(118,118,128,.06); }
.settings-sections > a.active { color: #075ebc; background: #e9f3ff; }
.settings-sections > a.active::before { background: #0877ed; }
.settings-section-icon { width: 25px; height: 25px; display: grid; place-items: center; flex: none; color: #67748c; font-size: var(--text-md); }
.settings-sections > a.active .settings-section-icon { color: #0874e7; }
.settings-sections strong,
.settings-sections small { display: block; }
.settings-sections strong { margin-bottom: 4px; color: inherit; font-size: var(--text-xs); font-weight: 600; }
.settings-sections small { color: #5f6b7f; font-size: var(--text-xs); line-height: 1.25; }
.settings-section-disabled { opacity: .58; cursor: default; }

.settings-form-card,
.settings-side-card {
  min-width: 0;
  border: 1px solid var(--settings-border);
  border-radius: 19px;
  background: var(--settings-card);
  box-shadow: 0 12px 38px rgba(31,58,98,.045);
}
.settings-form-card { overflow: hidden; }
.settings-form-card[hidden],
.settings-field[hidden],
.behavior-settings[hidden] { display: none !important; }
.settings-main-column { display: grid; gap: 14px; }
.settings-form-card > header { padding: 20px 24px 12px; }
.settings-form-card > header h3 { margin: 0 0 5px; color: #111e38; font-size: var(--text-md); letter-spacing: -.55px; }
.settings-form-card > header p { margin: 0; color: #5f6b7f; font-size: var(--text-xs); line-height: 1.45; }
.settings-form-card form { padding: 10px 24px 0; display: grid; gap: 14px; }

.settings-field { display: grid; gap: 6px; }
.settings-field > span { color: #243149; font-size: var(--text-xs); font-weight: 600; }
.settings-field input,
.settings-field textarea,
.settings-field select {
  width: 100%;
  padding: 11px 13px;
  color: #202b3f;
  border: 1px solid rgba(44,58,82,.14);
  border-radius: 11px;
  outline: 0;
  background: rgba(249,250,252,.9);
  box-shadow: inset 0 1px 1px rgba(20,35,60,.015);
  font-size: var(--text-xs);
  line-height: 1.45;
  transition: border .16s ease, box-shadow .16s ease, background .16s ease;
}
.settings-field input { min-height: 42px; }
.settings-field select { min-height: 42px; appearance: none; background-image: linear-gradient(45deg,transparent 50%,#667085 50%),linear-gradient(135deg,#667085 50%,transparent 50%); background-position: calc(100% - 17px) 18px,calc(100% - 12px) 18px; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; }
.settings-field textarea { min-height: 102px; resize: vertical; }
.settings-field input:focus,
.settings-field textarea:focus,
.settings-field select:focus { border-color: rgba(0,113,227,.52); background-color: #fff; box-shadow: 0 0 0 3px rgba(0,113,227,.08); }
.settings-field > small { display: flex; justify-content: space-between; gap: 12px; color: #5f6b7f; font-size: var(--text-xs); }
.behavior-settings { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--settings-border); scroll-margin-top: 90px; }
.behavior-settings > header { margin-bottom: 14px; }
.behavior-settings > header h4 { margin: 0 0 4px; color: #17243a; font-size: var(--text-md); letter-spacing: -.35px; }
.behavior-settings > header p { margin: 0; color: #657187; font-size: var(--text-xs); line-height: 1.45; }
.behavior-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.behavior-settings-grid .full { grid-column: 1 / -1; }
.behavior-settings-grid textarea { min-height: 76px; }
.settings-form-message { min-height: 16px; margin: -3px 0 0; color: #248458; font-size: var(--text-xs); }
.settings-form-message.warning { color: #9a6309; }
.settings-form-message.error { color: #d14434; }
.settings-form-card footer { margin: 0 -24px; padding: 14px 24px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--settings-border); background: rgba(250,250,251,.76); }
.settings-form-card footer button { min-width: 112px; min-height: 38px; padding: 0 16px; border-radius: 10px; cursor: pointer; font-size: var(--text-xs); font-weight: 600; }
.settings-cancel-button { color: #48546a; border: 0; background: #eef0f4; }
.settings-save-button { color: #fff; border: 0; background: linear-gradient(180deg,#2783f5,#006ae8); box-shadow: 0 7px 20px rgba(0,105,232,.20); }
.settings-save-button:disabled { opacity: .58; cursor: wait; }

.settings-rail { display: grid; gap: 12px; }
.settings-side-card { overflow: hidden; }
.settings-side-card > header { padding: 20px 19px 4px; }
.settings-side-card > header h3 { margin: 0; color: #15213a; font-size: var(--text-base); letter-spacing: -.35px; }
.agent-status-row { padding: 11px 19px 7px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.agent-status-pill { min-height: 31px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; color: #59667b; border-radius: 999px; background: #f0f2f5; font-size: var(--text-xs); font-weight: 600; }
.agent-status-pill i { width: 8px; height: 8px; border-radius: 50%; background: #8d96a5; }
.agent-status-pill.active { color: #158052; background: #e7f8ef; }
.agent-status-pill.active i { background: #14bb67; box-shadow: 0 0 0 3px rgba(20,187,103,.08); }
.agent-status-pill.paused { color: #9b690e; background: #fff5df; }
.agent-status-pill.paused i { background: #dc9414; }
.apple-switch { width: 49px; height: 29px; padding: 2px; display: flex; align-items: center; flex: none; border: 0; border-radius: 999px; background: #d6d9df; cursor: pointer; transition: background .2s ease; }
.apple-switch span { width: 25px; height: 25px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.20); transition: transform .2s cubic-bezier(.22,.8,.3,1); }
.apple-switch.active { background: #0878ed; }
.apple-switch.active span { transform: translateX(20px); }
.apple-switch:disabled { opacity: .58; cursor: wait; }
.agent-status-card > p { min-height: 36px; margin: 4px 19px 14px; color: #5f6b7f; font-size: var(--text-xs); line-height: 1.5; }
.settings-inline-message { min-height: 0 !important; margin-top: -8px !important; color: #46745e !important; font-size: var(--text-xs) !important; }

.settings-card-link,
.settings-connection-action { min-height: 55px; padding: 10px 14px; display: flex; align-items: center; gap: 11px; color: #344158; border: 0; border-top: 1px solid var(--settings-border); background: rgba(249,250,252,.78); text-align: left; }
.settings-card-link > span:nth-child(2),
.settings-connection-action > span:nth-child(2) { min-width: 0; flex: 1; }
.settings-card-link strong,
.settings-card-link small,
.settings-connection-action strong,
.settings-connection-action small { display: block; }
.settings-card-link strong,
.settings-connection-action strong { margin-bottom: 3px; color: #263249; font-size: var(--text-xs); }
.settings-card-link small,
.settings-connection-action small { overflow: hidden; color: #5f6b7f; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.settings-card-link b,
.settings-connection-action b { color: #5f6b7f; font-size: var(--text-lg); font-weight: 400; }
.link-icon { width: 24px; display: grid; place-items: center; flex: none; color: #0875e7; font-size: var(--text-lg); }
.link-icon.eye { color: #53627a; font-size: var(--text-base); }

.whatsapp-settings-status { padding: 16px 19px 14px; display: flex; align-items: center; gap: 13px; }
.whatsapp-settings-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: none; color: #fff; border-radius: 50%; background: #2cc86e; box-shadow: 0 7px 16px rgba(44,200,110,.18); font-size: var(--text-md); }
.whatsapp-settings-status > div { min-width: 0; }
.connection-pill { width: fit-content; margin-bottom: 7px; padding: 4px 8px; display: block; color: #5f6b7f; border-radius: 999px; background: #f0f1f3; font-size: var(--text-xs); font-weight: 600; }
.connection-pill.connected { color: #137849; background: #ddf6e8; }
.connection-pill.disconnected { color: #a46b0c; background: #fff3d9; }
.whatsapp-settings-status strong,
.whatsapp-settings-status small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-settings-status strong { color: #202c43; font-size: var(--text-xs); }
.whatsapp-settings-status small { margin-top: 4px; color: #5f6b7f; font-size: var(--text-xs); }
.whatsapp-settings-card > .settings-inline-message { margin: 0 19px 8px !important; }
.whatsapp-settings-panel { scroll-margin-top: 90px; }
.whatsapp-settings-panel .whatsapp-panel-content { padding: 4px 24px 20px; }
.whatsapp-settings-panel .whatsapp-settings-status { padding: 13px 0 15px; }
.whatsapp-settings-panel .whatsapp-settings-icon { width: 48px; height: 48px; }
.whatsapp-settings-panel .whatsapp-settings-status strong { font-size: var(--text-sm); }
.whatsapp-settings-panel > .whatsapp-panel-content > .settings-inline-message { margin: -5px 0 10px !important; }
.whatsapp-capabilities { margin-bottom: 14px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.whatsapp-capabilities span { min-height: 42px; padding: 8px 10px; display: flex; align-items: center; gap: 7px; color: #425169; border: 1px solid var(--settings-border); border-radius: 11px; background: #fafbfd; font-size: var(--text-xs); }
.whatsapp-capabilities i { color: #12a45c; font-size: var(--icon-sm); }
.whatsapp-settings-panel .settings-connection-action { min-height: 48px; border: 1px solid var(--settings-border); border-radius: 11px; }
.settings-connection-action { width: 100%; cursor: pointer; }
.settings-connection-action > span:first-child { width: 23px; display: grid; place-items: center; flex: none; color: #0875e7; font-size: var(--text-base); }
.settings-connection-action.danger strong { color: #354158; }
.settings-connection-action:hover { background: #f4f7fb; }
.profile-preview-card .settings-card-link { border-top: 0; }

.security-settings-content { padding: 20px; display: flex; align-items: flex-start; gap: 13px; }
.security-lock { width: 31px; height: 34px; display: grid; place-items: center; flex: none; color: #fff; border-radius: 7px; background: #202124; font-size: var(--text-xs); }
.security-settings-content strong { display: block; color: #202c43; font-size: var(--text-xs); }
.security-settings-content p { margin: 9px 0; color: #5f6b7f; font-size: var(--text-xs); line-height: 1.55; }
.security-settings-content a { color: #0870dc; font-size: var(--text-xs); font-weight: 600; }

@media (max-width: 1260px) {
  .settings-layout { grid-template-columns: 220px minmax(430px, 1fr); }
  .settings-rail { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .profile-preview-card,
  .security-settings-card { align-self: stretch; }
}

@media (max-width: 1050px) {
  .settings-plan-card { display: none; }
  .settings-page .sidebar-bottom { margin-top: auto; }
}

@media (max-width: 850px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-sections { padding: 5px; position: static; grid-template-columns: repeat(4, minmax(0,1fr)); }
  .settings-sections > a,
  .settings-section-disabled { min-height: 72px; padding: 9px; justify-content: center; text-align: center; }
  .settings-sections > a::before { inset: auto 12px -6px; width: auto; height: 2px; }
  .settings-section-icon { display: none; }
  .settings-section-disabled { display: none; }
  .settings-rail { grid-column: auto; }
}

@media (max-width: 720px) {
  .settings-content { padding-top: 25px !important; }
  .settings-heading { margin-bottom: 18px !important; }
  .settings-heading h2 { font-size: var(--text-xl) !important; }
  .settings-sections { grid-template-columns: repeat(3, minmax(130px,1fr)); overflow-x: auto; }
  .settings-sections > a { justify-content: flex-start; text-align: left; }
  .settings-form-card > header { padding: 19px 18px 10px; }
  .settings-form-card form { padding: 10px 18px 0; }
  .settings-form-card footer { margin-inline: -18px; padding-inline: 18px; }
  .settings-rail { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .whatsapp-capabilities { grid-template-columns: 1fr; }
  .behavior-settings-grid { grid-template-columns: 1fr; }
  .behavior-settings-grid .full { grid-column: auto; }
  .settings-form-card footer { flex-direction: column-reverse; }
  .settings-form-card footer button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .settings-sections > a,
  .settings-field input,
  .settings-field textarea,
  .apple-switch,
  .apple-switch span { transition: none; }
}

/* Home dashboard ------------------------------------------------------ */
.home-dashboard-page {
  --home-card: rgba(255,255,255,.91);
  --home-border: rgba(44,58,82,.10);
}
.home-section-title { min-width: 0; }
.home-section-title h1 { margin: 0; color: #171f31; font-size: var(--text-lg); font-weight: 650; letter-spacing: -.55px; line-height: 1.1; }
.home-section-title p { margin: 4px 0 0; color: #6b7689; font-size: var(--text-xs); line-height: 1; }
.home-topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 15px; }
.home-notification { position: relative; }
.home-notification > span { width: 7px; height: 7px; position: absolute; top: 3px; right: 2px; border: 2px solid #f5f5f7; border-radius: 50%; background: #ff3b30; }

.home-plan-card { padding: 16px; display: block; border: 1px solid var(--home-border); border-radius: 16px; background: rgba(255,255,255,.84); box-shadow: 0 12px 34px rgba(28,50,84,.04); }
.home-plan-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home-plan-card strong { color: #17233c; font-size: var(--text-xs); }
.home-plan-card > div:first-child span { padding: 4px 8px; color: #198052; border-radius: 999px; background: #e1f6ea; font-size: var(--text-xs); font-weight: 600; }
.home-plan-card p { margin: 14px 0 4px; color: #1c2941; font-size: var(--text-xs); font-weight: 600; }
.home-plan-card small { display: block; margin-bottom: 10px; color: #5f6b7f; font-size: var(--text-xs); }
.home-plan-card .plan-bar { height: 6px; overflow: hidden; border-radius: 999px; background: #e9edf3; }
.home-plan-card .plan-bar span { width: 0; height: 100%; display: block; border-radius: inherit; background: #0877eb; transition: width .3s ease; }

.home-redesign { padding-top: 18px !important; }
.home-hero { min-height: 226px; margin-bottom: 12px; padding: 20px 374px 20px 16px; position: relative; display: flex; align-items: center; }
.home-hero-copy { position: relative; z-index: 2; }
.home-hero-copy > span { display: block; margin-bottom: 8px; color: #172137; font-size: var(--text-sm); font-weight: 600; }
.home-hero-copy h2 { margin: 0 0 8px; color: #080f20; font-size: var(--text-xl); line-height: .98; letter-spacing: -2.6px; }
.home-hero-copy p { margin: 0; color: #647089; font-size: var(--text-sm); line-height: 1.45; }
.home-hero-actions { margin-top: 17px; display: flex; align-items: center; gap: 10px; }
.home-hero-actions a { min-height: 42px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; color: #fff; border: 1px solid transparent; border-radius: 11px; background: linear-gradient(180deg,#2882f4,#006be9); box-shadow: 0 8px 22px rgba(0,105,232,.18); font-size: var(--text-xs); font-weight: 600; }
.home-hero-actions a.secondary { gap: 8px; color: #273249; border-color: var(--home-border); background: rgba(255,255,255,.76); box-shadow: none; }
.home-hero-actions svg { width: 16px; height: 16px; stroke-width: 1.8; }

.home-orb { width: 250px; height: 190px; position: absolute; z-index: 1; top: 18px; right: 330px; filter: drop-shadow(0 22px 25px rgba(33,92,176,.12)); }
.home-orb span { width: 130px; height: 130px; position: absolute; top: 39px; left: 75px; border-radius: 50%; background: radial-gradient(circle at 62% 35%, rgba(255,255,255,.98), rgba(165,207,255,.78) 30%, rgba(45,124,239,.82) 68%, rgba(5,85,207,.74)); box-shadow: inset -18px -25px 45px rgba(0,73,184,.28), inset 22px 18px 38px rgba(255,255,255,.72), 0 20px 38px rgba(26,102,220,.18); }
.home-orb i { position: absolute; z-index: 2; inset: 44px 15px; border: 1px solid rgba(70,137,238,.35); border-radius: 50%; transform: rotate(-17deg); }
.home-orb i:nth-child(2) { inset: 22px 56px; border-color: rgba(255,255,255,.82); transform: rotate(24deg); }
.home-orb i:nth-child(3) { inset: 62px 28px; border-color: rgba(13,108,239,.27); transform: rotate(9deg); }

.home-system-status { width: 326px; padding: 7px 15px; position: absolute; z-index: 3; top: 0; right: 0; border: 1px solid var(--home-border); border-radius: 18px; background: var(--home-card); box-shadow: 0 14px 42px rgba(29,54,94,.05); }
.home-system-status a { min-height: 51px; display: grid; grid-template-columns: 8px 38px minmax(0,1fr) 14px; align-items: center; gap: 10px; border-bottom: 1px solid var(--home-border); }
.home-system-status a:last-child { border-bottom: 0; }
.home-system-status .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #15b959; }
.home-system-status .status-dot.neutral { background: #cbd2de; }
.home-system-status .status-dot.offline { background: #f09b23; }
.system-icon { width: 38px; height: 38px; display: grid; place-items: center; color: #0874e8; border-radius: 50%; background: #e9f3ff; font-size: var(--text-lg); }
.system-icon.whatsapp { color: #0aad5d; background: #e8f9f0; }
.home-system-status strong,
.home-system-status small { display: block; }
.home-system-status strong { margin-bottom: 3px; color: #172139; font-size: var(--text-xs); }
.home-system-status small { overflow: hidden; color: #5f6b7f; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.home-system-status b { color: #65738b; font-size: var(--text-lg); font-weight: 400; }

.home-health-status { width: 326px; position: absolute; z-index: 3; top: 50%; right: 0; transform: translateY(-50%); }
.home-health-status > a { min-height: 82px; padding: 14px 16px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; color: #172139; border: 1px solid var(--home-border); border-radius: 18px; background: var(--home-card); box-shadow: 0 14px 42px rgba(29,54,94,.05); }
.home-health-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #078b55; border-radius: 50%; background: #e5f7ed; font-size: var(--text-md); }
.home-health-status strong,
.home-health-status small { display: block; }
.home-health-status strong { margin-bottom: 4px; font-size: var(--text-xs); }
.home-health-status small { overflow: hidden; color: #5f6b7f; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.home-health-cta { color: #0870dc; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.home-health-status > a.warning .home-health-icon { color: #a76600; background: #fff1d8; }
.home-health-status > a.warning { border-color: rgba(196,106,0,.15); }

.home-metrics { min-height: 80px; margin-bottom: 12px; padding: 8px 17px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--home-border); border-radius: 17px; background: var(--home-card); box-shadow: 0 12px 38px rgba(31,58,98,.04); }
.home-metrics article { min-width: 0; padding: 4px 18px; display: flex; align-items: center; gap: 14px; border-right: 1px solid var(--home-border); }
.home-metrics article:first-child { padding-left: 2px; }
.home-metrics article:last-child { border-right: 0; }
.home-metric-icon { width: 43px; height: 43px; display: grid; place-items: center; flex: none; border-radius: 13px; font-size: var(--text-lg); }
.home-metric-icon.blue { color: #0874e8; background: #eaf4ff; }
.home-metric-icon.green { color: #0aaa65; background: #e7f8f0; }
.home-metric-icon.orange { color: #ec6334; background: #fff0ea; }
.home-metric-icon.dark { color: #26334e; background: #f0f2f5; }
.home-metrics article > div { min-width: 0; position: relative; }
.home-metrics small { display: block; margin-bottom: 5px; overflow: hidden; color: #5f6b7f; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.home-metrics strong { color: #101a31; font-size: var(--text-xl); line-height: 1; letter-spacing: -.8px; }
.home-metrics em { margin-left: 9px; padding: 4px 7px; color: #0c985b; border-radius: 999px; background: #e5f8ed; font-size: var(--text-xs); font-style: normal; white-space: nowrap; }
.home-metrics article:last-child em { color: #5f6b7f; background: transparent; }

.home-dashboard-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(360px,1fr); align-items: stretch; gap: 14px; }
.home-dashboard-column,
.home-dashboard-card { height: 100%; }
.home-dashboard-column { min-width: 0; display: grid; gap: 14px; }
.home-dashboard-card { min-width: 0; overflow: hidden; border: 1px solid var(--home-border); border-radius: 17px; background: var(--home-card); box-shadow: 0 12px 38px rgba(31,58,98,.04); }
.home-dashboard-card > header { min-height: 59px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--home-border); }
.home-dashboard-card > header h3 { margin: 0 0 3px; color: #131e35; font-size: var(--text-sm); letter-spacing: -.25px; }
.home-dashboard-card > header h3 > i { width: 8px; height: 8px; margin-right: 10px; display: inline-block; border-radius: 50%; background: #ff3044; }
.home-dashboard-card > header h3 > span:not(.activity-title-icon):not(.appointments-title-icon):not(.insight-spark) { margin-left: 8px; padding: 3px 7px; color: #dc3547; border-radius: 999px; background: #ffe8eb; font-size: var(--text-xs); }
.home-dashboard-card > header p { margin: 0; color: #5f6b7f; font-size: var(--text-xs); }
.home-dashboard-card > header a { color: #0870dc; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.home-dashboard-card > header a span { margin-left: 7px; font-size: var(--text-sm); }
.activity-title-icon,
.appointments-title-icon,
.insight-spark { margin-right: 10px; color: #10ad6a; }
.appointments-title-icon { color: #4e5c73; }
.insight-spark { color: #0874e8; }

.home-compact-list { min-height: 198px; padding: 0 17px; }
.home-attention-item { min-height: 49px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto 43px 8px; align-items: center; gap: 9px; border-bottom: 1px solid var(--home-border); }
.home-attention-item:last-child { border-bottom: 0; }
.home-attention-item:hover { background: rgba(247,249,252,.82); }
.home-contact-avatar { width: 32px; height: 32px; display: grid; place-items: center; color: #315577; border-radius: 50%; background: linear-gradient(145deg,#e3f1fc,#d4e6f3); font-size: var(--text-xs); font-weight: 600; }
.home-item-copy { min-width: 0; }
.home-item-copy strong,
.home-item-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-item-copy strong { margin-bottom: 3px; color: #1b273d; font-size: var(--text-xs); }
.home-item-copy small { color: #5f6b7f; font-size: var(--text-xs); }
.home-attention-tag { padding: 5px 10px; color: #b85a1b; border-radius: 999px; background: #fff1e7; font-size: var(--text-xs); white-space: nowrap; }
.home-item-time { color: #5f6b7f; font-size: var(--text-xs); text-align: right; white-space: nowrap; }
.home-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: #0879ef; }

.home-activity-list { min-height: 150px; padding: 5px 17px; }
.home-activity-item { min-height: 45px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--home-border); }
.home-activity-item:last-child { border-bottom: 0; }
.activity-item-icon { width: 29px; height: 29px; display: grid; place-items: center; color: #0aaa65; border-radius: 50%; background: #e7f8f0; font-size: var(--text-xs); }
.activity-item-icon.appointment { color: #ef495c; background: #ffeaed; }
.activity-item-icon.message { color: #0874e8; background: #e9f3ff; }

.home-appointments-timeline { min-height: 198px; padding: 7px 17px; }
.home-timeline-item { min-height: 57px; display: grid; grid-template-columns: 50px 9px 37px minmax(0,1fr) auto; align-items: center; gap: 8px; position: relative; border-bottom: 1px solid var(--home-border); }
.home-timeline-item:last-child { border-bottom: 0; }
.home-timeline-item time { color: #172239; font-size: var(--text-xs); font-weight: 600; text-align: right; }
.timeline-marker { width: 7px; height: 7px; position: relative; z-index: 2; border-radius: 50%; background: #0878ed; }
.home-timeline-item:not(:last-child) .timeline-marker::after { content: ""; width: 1px; height: 51px; position: absolute; z-index: -1; top: 7px; left: 3px; background: #d7dce5; }
.timeline-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #0874e8; border-radius: 50%; background: #eaf4ff; font-size: var(--text-base); }
.home-timeline-item em { padding: 5px 9px; color: #0870dc; border-radius: 999px; background: #e9f4ff; font-size: var(--text-xs); font-style: normal; white-space: nowrap; }

.insight-card > header { border-bottom: 0; }
.home-insight { min-height: 132px; margin: 0 13px 13px; padding: 18px; display: grid; grid-template-columns: 58px minmax(0,1fr) 92px; align-items: center; gap: 15px; overflow: hidden; border-radius: 13px; background: linear-gradient(130deg,#edf6ff,#f7fbff); }
.home-insight > p { margin: 0; color: #273249; font-size: var(--text-xs); line-height: 1.45; }
.home-insight > p strong { display: inline-block; color: #0d1a34; font-size: var(--text-lg); line-height: 1; }
.insight-chart { width: 56px; height: 56px; padding: 14px 12px; display: flex; align-items: flex-end; gap: 4px; border-radius: 12px; background: rgba(255,255,255,.54); }
.insight-chart i { width: 7px; border-radius: 3px 3px 1px 1px; background: #0878ed; }
.insight-chart i:nth-child(1) { height: 12px; }.insight-chart i:nth-child(2) { height: 21px; }.insight-chart i:nth-child(3) { height: 29px; }
.insight-bars { height: 72px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 7px; }
.insight-bars i { width: 13px; border-radius: 5px 5px 2px 2px; background: linear-gradient(#6daef8,#bad9ff); }
.insight-bars i:nth-child(1) { height: 21px; }.insight-bars i:nth-child(2) { height: 37px; }.insight-bars i:nth-child(3) { height: 52px; }.insight-bars i:nth-child(4) { height: 69px; }

.home-loading { min-height: 140px; margin: 0; display: grid; place-items: center; color: #5f6b7f; font-size: var(--text-xs); }
.home-small-empty { min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #5f6b7f; text-align: center; }
.home-small-empty strong { margin-bottom: 5px; color: #253149; font-size: var(--text-xs); }
.home-small-empty small { font-size: var(--text-xs); }

@media (max-width: 1250px) {
  .home-hero { padding-right: 340px; }
  .home-system-status { width: 315px; }
  .home-orb { right: 285px; opacity: .72; }
  .home-dashboard-grid { grid-template-columns: minmax(0,1.25fr) minmax(300px,.9fr); }
}

@media (max-width: 1050px) {
  .home-orb { display: none; }
  .home-hero { min-height: 270px; padding-right: 330px; }
  .home-system-status { width: 305px; }
  .home-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-dashboard-grid { grid-template-columns: 1fr; }
  .home-dashboard-column.side { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .home-hero { padding: 18px 0 0; display: block; }
  .home-hero-copy { padding: 0 4px; }
  .home-health-status { width: 100%; margin-top: 22px; position: static; transform: none; }
  .home-system-status { width: 100%; margin-top: 22px; padding-block: 7px; position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .home-system-status a:nth-child(2) { border-right: 0; }
  .home-system-status a:nth-child(-n+2) { border-bottom: 1px solid var(--home-border); }
  .home-system-status a { padding-inline: 8px; border-right: 1px solid var(--home-border); }
  .home-dashboard-column.side { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .home-redesign { padding-top: 24px !important; }
  .home-hero-copy h2 { font-size: var(--text-xl); letter-spacing: -2px; }
  .home-hero-copy p br { display: none; }
  .home-system-status { grid-template-columns: 1fr; }
  .home-system-status a { border-right: 0; }
  .home-system-status a:nth-child(3) { border-bottom: 1px solid var(--home-border); }
  .home-metrics { grid-template-columns: 1fr; padding-block: 5px; }
  .home-metrics article { min-height: 68px; padding-inline: 5px; border-right: 0; border-bottom: 1px solid var(--home-border); }
  .home-metrics article:nth-child(3) { border-bottom: 1px solid var(--home-border); }
  .home-metrics article:last-child { border-bottom: 0; }
  .home-attention-item { grid-template-columns: 34px minmax(0,1fr) 38px 7px; }
  .home-attention-tag { display: none; }
  .home-insight { grid-template-columns: 52px minmax(0,1fr); }
  .insight-bars { display: none; }
}

@media (max-width: 460px) {
  .home-hero-actions { align-items: stretch; flex-direction: column; }
  .home-hero-actions a { width: 100%; }
  .home-dashboard-card > header { padding-inline: 14px; }
  .home-compact-list,
  .home-activity-list,
  .home-appointments-timeline { padding-inline: 12px; }
  .home-timeline-item { grid-template-columns: 43px 8px 32px minmax(0,1fr); }
  .home-timeline-item em { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-plan-card .plan-bar span { transition: none; }
}

/* Visual audit refinements ------------------------------------------- */
.system-icon svg,
.home-metric-icon svg,
.timeline-icon svg,
.activity-item-icon svg,
.settings-section-icon svg,
.link-icon svg,
.whatsapp-settings-icon svg,
.security-lock svg,
.settings-connection-action svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.system-icon svg { width: 20px; height: 20px; stroke-width: 1.7; }
.home-metric-icon svg { width: 21px; height: 21px; stroke-width: 1.7; }
.timeline-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }
.activity-item-icon svg { width: 14px; height: 14px; stroke-width: 1.8; }
.settings-section-icon svg { width: 20px; height: 20px; stroke-width: 1.65; }
.link-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.whatsapp-settings-icon svg { width: 21px; height: 21px; stroke-width: 1.8; }
.security-lock svg { width: 17px; height: 17px; stroke-width: 1.8; }
.settings-connection-action svg { width: 17px; height: 17px; stroke-width: 1.8; }
.activity-title-icon,
.appointments-title-icon { display: inline-flex; vertical-align: -3px; }
.activity-title-icon svg,
.appointments-title-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Readable minimums for operational UI text */
.agenda-date-cell small,
.agenda-client-cell small,
.agenda-service-cell small,
.today-appointment small,
.agenda-ai-note p,
.reminder-copy p { font-size: var(--text-xs); }
.agenda-status,
.agenda-side-card > header > span,
.today-appointment .agenda-status { font-size: var(--text-xs); }
.settings-sections strong { font-size: var(--text-xs); }
.settings-sections small,
.settings-field > small,
.settings-inline-message,
.settings-card-link small,
.settings-connection-action small,
.whatsapp-settings-status small,
.security-settings-content p,
.security-settings-content a { font-size: var(--text-xs) !important; }
.connection-pill,
.settings-plan-card > div span,
.settings-plan-card small { font-size: var(--text-xs); }
.settings-card-link strong,
.settings-connection-action strong,
.security-settings-content strong { font-size: var(--text-xs); }
.home-plan-card > div:first-child span,
.home-plan-card small,
.home-metrics em,
.home-attention-tag,
.home-item-time,
.home-timeline-item em { font-size: var(--text-xs); }
.home-system-status small,
.home-metrics small,
.home-dashboard-card > header p,
.home-loading,
.home-small-empty small { font-size: var(--text-xs); }
.home-dashboard-card > header a,
.home-item-copy small { font-size: var(--text-xs); }
.home-item-copy strong { font-size: var(--text-xs); }

.agenda-more-wrap { position: relative; }
.agenda-toolbar-menu { min-width: 156px; padding: 6px; position: absolute; z-index: 35; top: 54px; right: 0; border: 1px solid var(--agenda-border); border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 14px 34px rgba(25,43,72,.15); }
.agenda-toolbar-menu[hidden] { display: none; }
.agenda-toolbar-menu button,
.agenda-toolbar-menu a { width: 100%; min-height: 35px; padding: 0 10px; display: flex; align-items: center; color: #2d394f; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: var(--text-xs); font-weight: 600; }
.agenda-toolbar-menu button:hover,
.agenda-toolbar-menu a:hover { background: #f2f5f8; }

.settings-card-link.is-static { cursor: default; }
.settings-card-link.is-static em { padding: 4px 7px; color: #5f6b7f; border-radius: 999px; background: #eceff3; font-size: var(--text-xs); font-style: normal; font-weight: 600; white-space: nowrap; }

.agenda-empty { min-height: 200px; }
.home-compact-list:has(.home-small-empty),
.home-activity-list:has(.home-small-empty),
.home-appointments-timeline:has(.home-small-empty) { min-height: 140px; }

@media (max-width: 1220px) {
  .agenda-more-wrap { display: none; }
}

@media (max-width: 850px) {
  .settings-sections > a[href="#plan-summary"] { display: none; }
}

@media (max-width: 720px) {
  .settings-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .agenda-new-button { width: 100%; margin-left: 0; }
  .settings-card-link.is-static em { font-size: var(--text-xs); }
}

/* Knowledge base ---------------------------------------------------- */
.knowledge-page { --kb-border: #e1e6ee; --kb-text: #111a2e; --kb-muted: #5f6b7f; --kb-blue: #0878f4; }
.dashboard-page .knowledge-content { padding: 14px 30px 34px; }
.knowledge-topbar { justify-content: space-between; }
.knowledge-section-title { min-width: 0; }
.knowledge-section-title h1 { margin: 0; color: #171f31; font-size: var(--text-lg); font-weight: 650; letter-spacing: -.55px; line-height: 1.1; }
.knowledge-section-title p { margin: 4px 0 0; color: #6b7689; font-size: var(--text-xs); line-height: 1; }
.knowledge-topbar-actions { display: flex; align-items: center; gap: 9px; }
.knowledge-topbar-actions .knowledge-primary-button { min-height: 40px; padding: 0 15px; border-radius: 10px; background: #0878ed; box-shadow: 0 3px 9px rgba(8,113,237,.14); font-size: var(--text-sm); }
.knowledge-topbar-actions .icon-button { width: 40px; height: 40px; box-shadow: none; }
.knowledge-topbar-actions .user-avatar { margin-left: 5px; }
.knowledge-global-search { width: 335px; height: 39px; padding: 0 9px 0 13px; display: flex; align-items: center; gap: 9px; border: 1px solid #dfe4ec; border-radius: 12px; background: rgba(249,250,252,.8); }
.knowledge-global-search svg { width: 16px; height: 16px; flex: 0 0 auto; stroke-width: 1.8; }
.knowledge-global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--kb-text); font: inherit; font-size: var(--text-xs); }
.knowledge-global-search kbd { padding: 3px 6px; color: #5c687d; border: 1px solid #dfe4ec; border-radius: 6px; background: #fff; font-family: inherit; font-size: var(--text-xs); }
.knowledge-heading { margin-bottom: 23px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.knowledge-heading h2 { margin: 7px 0 3px; color: #0c1528; font-size: var(--text-xl); line-height: 1.04; letter-spacing: -1.5px; }
.knowledge-heading p { margin: 0; color: #5f6b7f; font-size: var(--text-xs); }
.knowledge-primary-button { min-height: 45px; padding: 0 21px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: white; border: 0; border-radius: 11px; background: linear-gradient(180deg,#1684ff,#066cea); box-shadow: 0 9px 22px rgba(8,113,234,.2); cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 600; }
.knowledge-primary-button span { font-size: inherit; font-weight: inherit; line-height: inherit; }
.knowledge-type-tabs { margin-bottom: 12px; padding: 4px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 3px; border: 1px solid var(--kb-border); border-radius: 13px; background: rgba(255,255,255,.72); box-shadow: 0 3px 12px rgba(35,58,95,.035); }
.knowledge-type-tabs > button { min-width: 0; min-height: 44px; padding: 6px 9px; display: flex; align-items: center; gap: 7px; color: #4d5a70; border: 0; border-radius: 9px; background: transparent; cursor: pointer; text-align: left; transition: background .18s,color .18s; }
.mobile-knowledge-brand,.mobile-knowledge-summary,.mobile-knowledge-filter,.mobile-knowledge-all,.mobile-knowledge-detail-back{display:none}
.knowledge-type-tabs > button:hover { border-color: #bfd6f5; background: #fff; }
.knowledge-type-tabs > button.active { color: #0871df; background: #edf5ff; box-shadow: none; }
.knowledge-type-icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; color: #617087; border-radius: 8px; background: transparent; }
.knowledge-type-tabs .active .knowledge-type-icon { color: #0878ef; background: #dfeeff; }
.knowledge-type-icon svg { width: 21px; height: 21px; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.knowledge-type-tabs strong,.knowledge-type-tabs small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-type-tabs > button > span:last-child { min-width: 0; display: flex; align-items: center; gap: 5px; }
.knowledge-type-tabs strong { margin: 0; color: inherit; font-size: var(--text-xs); }
.knowledge-type-tabs small { min-width: 16px; color: #68758a; font-size: var(--text-xs); }
.knowledge-type-tabs b { font-weight: 600; }
.knowledge-workspace { display: grid; grid-template-columns: minmax(560px,1.72fr) minmax(320px,.78fr); align-items: start; gap: 14px; }
.knowledge-list-card,.knowledge-detail-card { min-width: 0; overflow: hidden; border: 1px solid var(--kb-border); border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 14px 42px rgba(30,55,88,.045); }
.knowledge-list-card > header { min-height: 68px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--kb-border); }
.knowledge-list-card > header h3 { margin: 0 0 4px; color: var(--kb-text); font-size: var(--text-base); letter-spacing: -.2px; }
.knowledge-list-card > header p { margin: 0; color: var(--kb-muted); font-size: var(--text-xs); }
/* Preguntas que Sahyez no supo responder (conocimiento.js, loadKnowledgeGaps). */
.knowledge-gaps { margin-bottom: 14px; padding: 14px 16px; border: 1px solid rgba(255,159,10,.28); border-radius: 16px; background: linear-gradient(180deg, rgba(255,248,235,.95), rgba(255,255,255,.92)); box-shadow: 0 14px 42px rgba(30,55,88,.04); }
.knowledge-gaps[hidden] { display: none; }
.knowledge-gaps.is-empty { padding: 11px 16px; border-color: var(--kb-border); background: rgba(255,255,255,.88); }
.knowledge-gaps.is-empty .knowledge-gaps-icon { color: #1f9d55; background: rgba(52,199,89,.12); }
.knowledge-gaps.is-empty .knowledge-gaps-list { display: none; }
.knowledge-gaps > header { display: flex; align-items: center; gap: 12px; }
.knowledge-gaps-icon { width: 36px; height: 36px; display: grid; flex: none; place-items: center; color: #c26a00; border-radius: 11px; background: rgba(255,159,10,.14); font-size: 19px; }
.knowledge-gaps h3 { margin: 0 0 3px; color: var(--kb-text); font-size: var(--text-base); letter-spacing: -.2px; }
.knowledge-gaps h3 span { margin-left: 6px; padding: 2px 8px; color: #b35c00; border-radius: 999px; background: rgba(255,159,10,.16); font-size: var(--text-xs); }
.knowledge-gaps header p { margin: 0; color: var(--kb-muted); font-size: var(--text-xs); }
.knowledge-gaps-list { margin: 12px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.knowledge-gaps-list li { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border: 1px solid var(--kb-border); border-radius: 12px; background: #fff; }
.knowledge-gaps-list li > div:first-child { min-width: 0; flex: 1 1 260px; }
.knowledge-gaps-list strong { display: block; color: var(--kb-text); font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.knowledge-gaps-list small { display: block; margin-top: 3px; color: var(--kb-muted); font-size: var(--text-xs); }
.knowledge-gap-actions { display: flex; gap: 6px; }
.knowledge-gap-actions button { min-height: 32px; padding: 0 12px; color: #0872dc; border: 1px solid rgba(8,114,220,.22); border-radius: 9px; background: #fff; cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 600; }
.knowledge-gap-actions button.primary { color: #fff; border-color: #0878ed; background: #0878ed; }
/* Producto agotado (conocimiento.js, toggleOutOfStock). */
.knowledge-stock-badge { margin-left: 4px; padding: 2px 7px; color: #b42318; border-radius: 999px; background: rgba(217,45,32,.1); font-size: 10px; font-weight: 600; vertical-align: 1px; }
.knowledge-stock-toggle { margin: 10px 0 2px; min-height: 32px; padding: 0 12px; color: #b42318; border: 1px solid rgba(217,45,32,.22); border-radius: 9px; background: #fff; cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 600; }
.knowledge-stock-toggle.is-out { color: #1f7a45; border-color: rgba(52,199,89,.35); }
.knowledge-stock-toggle:disabled { opacity: .6; }
.knowledge-import-button { min-height: 35px; padding: 0 12px; flex: 0 0 auto; color: #28354b; border: 1px solid #dce2eb; border-radius: 9px; background: #fff; cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 600; }
.knowledge-import-button span { margin-left: 8px; color: #5f6b7f; }
.knowledge-toolbar { padding: 10px 16px; display: grid; grid-template-columns: minmax(170px,1fr) minmax(118px,.55fr) minmax(100px,.42fr) auto; gap: 8px; border-bottom: 1px solid var(--kb-border); }
.knowledge-toolbar label,.knowledge-toolbar select { height: 36px; border: 1px solid #dfe5ed; border-radius: 9px; background: #fafbfc; }
.knowledge-toolbar label { padding: 0 11px; display: flex; align-items: center; gap: 8px; }
.knowledge-toolbar label svg { width: 16px; height: 16px; color: #5f6b7f; stroke-width: 1.8; }
.knowledge-toolbar input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--text-xs); }
.knowledge-toolbar select { min-width: 0; padding: 0 9px; color: #344158; outline: 0; font: inherit; font-size: var(--text-xs); }
.knowledge-view-toggle { padding: 3px; display: flex; border: 1px solid #dfe5ed; border-radius: 9px; background: #fafbfc; }
.knowledge-view-toggle button { width: 30px; height: 28px; display: grid; place-items: center; color: #5f6b7f; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.knowledge-view-toggle button.active { color: #0878ef; background: #e9f3ff; }
.knowledge-view-toggle svg { width: 16px; height: 16px; stroke-width: 1.8; }
.knowledge-list { min-height: 365px; padding: 0 16px 10px; }
.knowledge-loading,.knowledge-empty,.knowledge-error { min-height: 330px; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #5f6b7f; text-align: center; }
.knowledge-empty span,.knowledge-error span { width: 48px; height: 48px; margin-bottom: 12px; display: grid; place-items: center; color: #0878ef; border-radius: 14px; background: #edf5ff; }
.knowledge-empty svg { width: 24px; height: 24px; }
.knowledge-empty strong,.knowledge-error strong { margin-bottom: 5px; color: #253149; font-size: var(--text-xs); }
.knowledge-empty p,.knowledge-error p { max-width: 310px; margin: 0; font-size: var(--text-xs); line-height: 1.5; }
.knowledge-empty button { min-height: 35px; margin-top: 14px; padding: 0 13px; color: #0871db; border: 1px solid #cfe2f9; border-radius: 9px; background: #f3f8ff; cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 600; }
.knowledge-error small { margin-top: 8px; font-size: var(--text-xs); }
.knowledge-item { min-height: 57px; display: grid; grid-template-columns: 7px 49px minmax(150px,1fr) minmax(86px,.4fr) 58px 28px; align-items: center; gap: 9px; border-bottom: 1px solid #e7eaf0; cursor: pointer; }
.knowledge-item::before { content: ""; width: 4px; height: 20px; justify-self: center; border-radius: 4px; background: transparent; }
.knowledge-item:hover { background: #fafcff; }
.knowledge-item.selected::before { background: #0878ef; }
.knowledge-item-visual { width: 44px; height: 39px; overflow: hidden; display: grid; place-items: center; color: #5b6b83; border-radius: 9px; background: #f0f3f7; }
.knowledge-item-visual img { width: 100%; height: 100%; object-fit: cover; }
.knowledge-item-visual svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.knowledge-item-copy { min-width: 0; }
.knowledge-item-copy strong,.knowledge-item-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-item-copy strong { margin-bottom: 4px; color: #152139; font-size: var(--text-xs); }
.knowledge-item-copy small { color: #5f6b7f; font-size: var(--text-xs); }
.knowledge-item-value { overflow: hidden; color: #26344a; font-size: var(--text-xs); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-status { justify-self: start; padding: 5px 9px; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.knowledge-status.active { color: #087e4a; background: #e2f7ec; }
.knowledge-status.inactive { color: #667389; background: #edf0f4; }
.knowledge-item-actions { position: relative; }
.knowledge-item-actions > button { width: 27px; height: 27px; display: grid; place-items: center; color: #526179; border: 0; border-radius: 7px; background: transparent; cursor: pointer; font-size: var(--text-md); }
.knowledge-item-actions > button:hover { background: #edf2f8; }
.knowledge-item-menu { min-width: 140px; padding: 5px; position: absolute; z-index: 20; top: 29px; right: 0; border: 1px solid #dfe4ec; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(30,48,78,.16); }
.knowledge-item-menu[hidden] { display: none; }
.knowledge-item-menu button { width: 100%; min-height: 31px; padding: 0 9px; color: #2d3a50; border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left; font: inherit; font-size: var(--text-xs); }
.knowledge-item-menu button:hover { background: #f1f5f9; }
.knowledge-list.grid-view { padding-top: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 10px; }
.knowledge-list.grid-view .knowledge-item { min-height: 126px; padding: 12px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 8px; border: 1px solid #e3e8ef; border-radius: 12px; }
.knowledge-list.grid-view .knowledge-item::before { display: none; }
.knowledge-list.grid-view .knowledge-item-visual { width: 46px; height: 46px; grid-row: 1; }
.knowledge-list.grid-view .knowledge-item-copy { grid-column: 2; }
.knowledge-list.grid-view .knowledge-item-value { grid-column: 1 / 3; }
.knowledge-list.grid-view .knowledge-status { grid-column: 1 / 3; }
.knowledge-list.grid-view .knowledge-item-actions { grid-column: 3; grid-row: 1; }
.knowledge-detail-card { min-height: 480px; position: sticky; top: 88px; }
.knowledge-detail-media { min-height: 160px; position: relative; overflow: hidden; background: #f7f8fa; }
.knowledge-detail-media > img { width: 100%; height: 180px; display: block; object-fit: contain; }
.knowledge-detail-media > button { min-height: 32px; padding: 0 13px; position: absolute; top: 12px; right: 12px; color: #233047; border: 1px solid rgba(215,223,232,.8); border-radius: 9px; background: rgba(255,255,255,.93); backdrop-filter: blur(8px); cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 600; }
.knowledge-detail-placeholder { min-height: 180px; display: grid; place-items: center; color: rgba(255,255,255,.85); }
.knowledge-detail-placeholder svg { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.knowledge-detail-body { padding: 14px 14px 15px; }
.knowledge-detail-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.knowledge-detail-title > div > span { color: #0874df; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.knowledge-detail-title h3 { margin: 4px 0 0; color: #111c32; font-size: var(--text-base); letter-spacing: -.3px; }
.knowledge-detail-summary { margin: 6px 0 11px; color: #5f6b7f; font-size: var(--text-xs); line-height: 1.45; }
.knowledge-detail-facts { margin: 0 0 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.knowledge-detail-facts div { min-width: 0; padding: 9px 10px; border: 1px solid #e3e7ed; border-radius: 10px; background: #fafbfc; }
.knowledge-detail-facts dt { margin-bottom: 4px; color: #5f6b7f; font-size: var(--text-xs); }
.knowledge-detail-facts dd { margin: 0; overflow: hidden; color: #243148; font-size: var(--text-xs); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-detail-content { margin-bottom: 12px; }
.knowledge-detail-content strong { color: #2c394f; font-size: var(--text-xs); }
.knowledge-detail-content p { margin: 6px 0 0; color: #66748a; font-size: var(--text-xs); line-height: 1.55; white-space: pre-line; }
.knowledge-source-link { margin-bottom: 12px; display: inline-flex; gap: 5px; color: #0873dc; font-size: var(--text-xs); font-weight: 600; }
.knowledge-agent-note { padding: 11px; display: flex; align-items: center; gap: 10px; border-radius: 11px; background: #f2f7ff; }
.knowledge-agent-note > span { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; color: #0878ef; border-radius: 9px; background: #e1efff; }
.knowledge-agent-note strong { color: #1567c3; font-size: var(--text-xs); }
.knowledge-agent-note p { margin: 3px 0 0; color: #5f6b7f; font-size: var(--text-xs); line-height: 1.4; }
.knowledge-detail-empty { min-height: 478px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #5f6b7f; text-align: center; }
.knowledge-detail-empty > span { width: 54px; height: 54px; margin-bottom: 14px; display: grid; place-items: center; color: #0878ef; border-radius: 16px; background: #edf5ff; }
.knowledge-detail-empty svg { width: 27px; height: 27px; }
.knowledge-detail-empty strong { margin-bottom: 5px; color: #27334a; font-size: var(--text-xs); }
.knowledge-detail-empty p { max-width: 230px; margin: 0; font-size: var(--text-xs); line-height: 1.5; }
.knowledge-dialog { width: min(650px,calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: auto; border: 0; border-radius: 19px; background: #fff; box-shadow: 0 30px 80px rgba(18,35,62,.25); }
.knowledge-dialog::backdrop { background: rgba(15,25,42,.35); backdrop-filter: blur(4px); }
.knowledge-dialog form > header { padding: 19px 21px 16px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--kb-border); }
.knowledge-dialog header span { color: #0876e7; font-size: var(--text-xs); font-weight: 600; letter-spacing: .7px; text-transform: uppercase; }
.knowledge-dialog header h2 { margin: 5px 0 0; color: #111b30; font-size: var(--text-lg); letter-spacing: -.6px; }
.knowledge-dialog header button { width: 33px; height: 33px; color: #526076; border: 1px solid #e0e5ec; border-radius: 9px; background: #fafbfc; cursor: pointer; font-size: var(--text-lg); }
.knowledge-form-grid { padding: 18px 21px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.knowledge-form-grid label { min-width: 0; }
.knowledge-form-grid label[hidden] { display: none; }
.knowledge-form-grid label.full { grid-column: 1 / -1; }
.knowledge-form-grid label > span { margin-bottom: 6px; display: block; color: #344056; font-size: var(--text-xs); font-weight: 600; }
.knowledge-form-grid input,.knowledge-form-grid select,.knowledge-form-grid textarea { width: 100%; min-height: 39px; padding: 9px 11px; color: #1f2c43; border: 1px solid #dce2ea; border-radius: 9px; outline: 0; background: #fbfcfd; font: inherit; font-size: var(--text-xs); resize: vertical; }
.knowledge-form-grid input:focus,.knowledge-form-grid select:focus,.knowledge-form-grid textarea:focus { border-color: #66aaf4; box-shadow: 0 0 0 3px rgba(8,120,244,.09); }
.knowledge-form-grid textarea { min-height: 110px; }
.knowledge-form-grid label > small { margin-top: 5px; display: block; color: #5f6b7f; font-size: var(--text-xs); }
.knowledge-hours-fields[hidden] { display: none; }
.knowledge-hours-fields>span { margin-bottom: 8px; display: block; color: #344056; font-size: var(--text-xs); font-weight: 600; }
.knowledge-weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.knowledge-weekdays label { cursor: pointer; }
.knowledge-weekdays input { position: absolute; opacity: 0; pointer-events: none; }
.knowledge-weekdays span { min-height: 36px; display: grid; place-items: center; color: #59677e; border: 1px solid #dce2ea; border-radius: 9px; background: #fbfcfd; font-size: 10px; font-weight: 600; transition: .16s ease; }
.knowledge-weekdays input:checked+span { color: #0876e7; border-color: #b9d9fb; background: #eaf4ff; }
.knowledge-time-range { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.knowledge-time-range label>span { margin-bottom: 6px; display: block; color: #59677e; font-size: 10px; }
.knowledge-media-field { grid-column: 1 / -1; }
.knowledge-media-field > span { margin-bottom: 6px; display: block; color: #344056; font-size: var(--text-xs); font-weight: 600; }
.knowledge-image-upload { padding: 12px; display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; gap: 14px; border: 1px solid #dce2ea; border-radius: 12px; background: #fbfcfd; }
.knowledge-image-preview { width: 112px; height: 88px; overflow: hidden; display: grid; place-items: center; color: #65748a; border: 1px dashed #cbd5e1; border-radius: 10px; background: #f2f5f8; }
.knowledge-image-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.knowledge-image-preview img[hidden],
.knowledge-image-preview > span[hidden] { display: none; }
.knowledge-image-preview > span { display: grid; place-items: center; }
.knowledge-image-preview svg { width: 28px; height: 28px; stroke-width: 1.6; }
.knowledge-image-actions { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.knowledge-image-actions small { width: 100%; color: #5f6b7f; font-size: var(--text-xs); line-height: 1.4; }
.knowledge-image-button,
.knowledge-image-remove { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; cursor: pointer; font-size: var(--text-base); font-weight: 600; }
.knowledge-image-button { color: #fff; border: 1px solid #0878ef; background: #0878ef; }
.knowledge-image-remove { color: #b42318; border: 1px solid #efc9c5; background: #fff7f6; }
.knowledge-price-input { display: grid; grid-template-columns: 70px 1fr; }
.knowledge-price-input select { border-radius: 9px 0 0 9px; border-right: 0; }
.knowledge-price-input input { border-radius: 0 9px 9px 0; }
.knowledge-form-message { min-height: 16px; margin: -8px 21px 4px; color: #0b8750; font-size: var(--text-xs); }
.knowledge-form-message.error { color: #d03c4c; }
.knowledge-dialog footer { padding: 13px 21px 18px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 9px; border-top: 1px solid var(--kb-border); }
.knowledge-dialog footer button { min-height: 38px; padding: 0 16px; border-radius: 9px; cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 600; }
.knowledge-delete-button { color: #d33b4a; border: 1px solid #f1ccd1; background: #fff6f7; }
.knowledge-secondary-button { color: #3a465b; border: 1px solid #dce2ea; background: #f8f9fb; }
.knowledge-save-button { color: #fff; border: 0; background: #0878ef; }

@media (max-width: 1220px) {
  .dashboard-page .knowledge-content { padding-inline: 22px; }
  .knowledge-type-tabs { grid-template-columns: repeat(3,1fr); }
  .knowledge-workspace { grid-template-columns: minmax(500px,1.45fr) minmax(285px,.75fr); }
  .knowledge-toolbar { grid-template-columns: minmax(180px,1fr) 120px 105px auto; }
}
@media (max-width: 980px) {
  .knowledge-global-search { display: none; }
  .knowledge-workspace { grid-template-columns: 1fr; }
  .knowledge-detail-card { min-height: 0; position: static; }
  .knowledge-detail-empty { min-height: 260px; }
  .knowledge-detail-media > img { height: 260px; }
}
@media (max-width: 720px) {
  .dashboard-page .knowledge-content { padding: 12px 14px 100px; }
  .knowledge-heading { align-items: stretch; flex-direction: column; }
  .knowledge-heading h2 { font-size: var(--text-xl); }
  .knowledge-heading .knowledge-primary-button { width: 100%; }
  .knowledge-topbar-actions .knowledge-primary-button { width: 40px; min-height: 40px; padding: 0; }
  .knowledge-topbar-actions .knowledge-primary-button > span { display: none; }
  .knowledge-type-tabs { margin-inline: -14px; padding: 0 14px 5px; display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .knowledge-type-tabs > button { min-width: 155px; scroll-snap-align: start; }
  .knowledge-list-card > header { align-items: flex-start; flex-direction: column; }
  .knowledge-import-button { width: 100%; }
  .knowledge-toolbar { grid-template-columns: 1fr 1fr; }
  .knowledge-toolbar label { grid-column: 1 / -1; }
  .knowledge-view-toggle { justify-self: end; }
  .knowledge-item { grid-template-columns: 4px 45px minmax(0,1fr) 27px; padding-block: 7px; }
  .knowledge-item-value,.knowledge-item > .knowledge-status { display: none; }
  .knowledge-list.grid-view { grid-template-columns: 1fr; }
  .knowledge-form-grid { grid-template-columns: 1fr; }
  .knowledge-form-grid label.full { grid-column: auto; }
  .knowledge-media-field.full { grid-column: auto; }
  .knowledge-image-upload { grid-template-columns: 88px minmax(0,1fr); }
  .knowledge-image-preview { width: 88px; height: 88px; }
  .knowledge-dialog footer { grid-template-columns: 1fr 1fr; }
  .knowledge-dialog footer > span { display: none; }
  .knowledge-dialog footer button { padding-inline: 10px; }
  .knowledge-delete-button { grid-column: 1 / -1; }
  .dashboard-page .sidebar-nav { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (max-width: 430px) {
  .knowledge-toolbar { grid-template-columns: 1fr; }
  .knowledge-toolbar label { grid-column: auto; }
  .knowledge-view-toggle { width: 100%; justify-content: center; }
  .knowledge-view-toggle button { flex: 1; }
}

/* Fixed panel type scale and accessible controls -------------------- */
body { font-weight: 400; }
button { font-size: var(--text-base); }
input,
textarea,
select { font-size: var(--text-base) !important; }

.conversation-page-title,
.agenda-heading h2,
.settings-heading h2,
.home-hero-copy h2,
.knowledge-heading h2 {
  font-size: clamp(var(--text-xl), 3vw, 32px) !important;
  font-weight: 700;
}

@media (max-width: 900px) {
  input,
  textarea,
  select { font-size: 16px !important; }
}

/* Unified icon system: Phosphor UI + Simple Icons brands ----------- */
:where(.ph, .ph-fill, .ph-light) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: currentColor;
  font-size: var(--icon-md);
  line-height: 1;
}

.nav-item > :where(.ph, .ph-fill),
.icon-rail-item > :where(.ph, .ph-fill),
.icon-button > :where(.ph, .ph-fill),
.dark-icon-button > :where(.ph, .ph-fill),
.soft-icon-button > :where(.ph, .ph-fill),
.agenda-more-button > :where(.ph, .ph-fill),
.knowledge-item-actions > button > :where(.ph, .ph-fill) {
  width: var(--icon-md);
  height: var(--icon-md);
  font-size: var(--icon-md);
}

.conversation-search > :where(.ph, .ph-light),
.agenda-search > :where(.ph, .ph-light),
.knowledge-global-search > :where(.ph, .ph-light),
.knowledge-toolbar label > :where(.ph, .ph-light),
.agenda-date-range > :where(.ph, .ph-light),
.agenda-card-header button > :where(.ph, .ph-light),
.home-hero-actions :where(.ph, .ph-light),
.submit-button :where(.ph, .ph-light),
.customer-drawer-action :where(.ph, .ph-light) {
  width: var(--icon-sm);
  height: var(--icon-sm);
  font-size: var(--icon-sm);
}

.activity-title-icon > :where(.ph, .ph-fill),
.appointments-title-icon > :where(.ph, .ph-fill),
.agenda-stat-icon > :where(.ph, .ph-fill),
.knowledge-detail-empty > span > :where(.ph, .ph-fill),
.knowledge-detail-placeholder > :where(.ph, .ph-fill),
.empty-symbol > :where(.ph, .ph-fill),
.insight-spark > :where(.ph, .ph-fill),
.agenda-ai-note > span > :where(.ph, .ph-fill) {
  width: var(--icon-lg);
  height: var(--icon-lg);
  font-size: var(--icon-lg);
}

.knowledge-type-icon > .ph-fill { display: none; }
.knowledge-type-tabs > button.active .knowledge-type-icon > .ph { display: none; }
.knowledge-type-tabs > button.active .knowledge-type-icon > .ph-fill { display: inline-flex; }
.knowledge-type-icon > :where(.ph, .ph-fill) { font-size: var(--icon-md); }

.simple-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
}
.whatsapp-settings-icon .simple-icon,
.agenda-channel-cell > span .simple-icon,
.conversation-brand-badge .simple-icon { filter: invert(1); }

.conversation-brand-badge {
  width: 18px;
  height: 18px;
  position: absolute;
  right: -1px;
  bottom: 0;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #20c565;
}
.conversation-brand-badge .simple-icon { width: 10px; height: 10px; }
.agenda-channel-cell > span .simple-icon { width: 16px; height: 16px; }

/* Contacts --------------------------------------------------------- */
.contacts-page { --contacts-border: rgba(33,55,90,.10); overflow-x: clip; background: radial-gradient(circle at 62% 0,rgba(219,233,255,.45),transparent 38%),#f5f7fa; }
.mobile-contacts-brand,
.mobile-contacts-filter-button,
.contacts-page > .mobile-tab-bar,
.contacts-page .main-area > .mobile-tab-bar { display: none; }
.mobile-contacts-search-row { display: contents; }
.contacts-page .app-shell,
.contacts-page .main-area,
.contacts-page .contacts-content,
.contacts-heading,
.contacts-filterbar,
.contacts-workspace { min-width: 0; }
.contacts-section-title { min-width: 0; }
.contacts-section-title h1 { margin: 0; color: #171f31; font-size: var(--text-lg); font-weight: 650; letter-spacing: -.55px; line-height: 1.1; }
.contacts-section-title p { margin: 4px 0 0; color: #6b7689; font-size: var(--text-xs); line-height: 1; }
.contacts-topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.contacts-topbar-tools .contacts-primary-button { min-height: 40px; padding: 0 15px; gap: 7px; border-radius: 10px; font-size: var(--text-sm); box-shadow: 0 3px 9px rgba(8,113,237,.14); transition: background .18s ease, box-shadow .18s ease; }
.contacts-topbar-tools .contacts-primary-button:hover { background: #0077ed; box-shadow: 0 4px 12px rgba(8,113,237,.18); }
.contacts-topbar-tools .contacts-actions-menu > summary,
.contacts-topbar-tools .icon-button { width: 40px; height: 40px; border-color: var(--panel-line); border-radius: 50%; background: rgba(255,255,255,.72); box-shadow: none; }
.contacts-topbar-tools .contacts-actions-menu > summary:hover,
.contacts-topbar-tools .contacts-actions-menu[open] > summary,
.contacts-topbar-tools .icon-button:hover { background: #fff; transform: none; }
.contacts-topbar-tools .user-avatar { width: 38px; height: 38px; margin-left: 5px; }
.contacts-global-search { width: min(330px,30vw); min-height: 40px; padding: 0 8px 0 13px; display: flex; align-items: center; gap: 9px; color: #536077; border: 1px solid #dce3ec; border-radius: 11px; background: rgba(248,250,253,.88); }
.contacts-global-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #243047; background: transparent; }
.contacts-global-search kbd { padding: 3px 7px; color: #58657b; border: 1px solid #dfe4eb; border-radius: 6px; background: #fff; font: inherit; font-size: var(--text-xs); white-space: nowrap; }
.dashboard-page .contacts-content { padding: 14px clamp(18px,2.5vw,38px) 34px; }
.contacts-heading { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.contacts-heading h2 { margin: 0 0 4px; color: #10182b; font-size: clamp(var(--text-xl),3vw,32px); font-weight: 700; letter-spacing: -1.25px; line-height: 1.08; }
.contacts-heading p { margin: 0; color: #5f6b7f; font-size: var(--text-base); }
.contacts-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.contacts-primary-button,
.contacts-secondary-button { min-height: 42px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; cursor: pointer; font-size: var(--text-base); font-weight: 600; white-space: nowrap; }
.contacts-primary-button { color: #fff; border: 1px solid #0875ee; background: #0878ed; box-shadow: 0 4px 12px rgba(8,113,237,.16); }
.contacts-secondary-button { color: #263349; border: 1px solid #dce3ec; background: rgba(255,255,255,.88); box-shadow: 0 2px 7px rgba(31,54,88,.04); }
.contacts-primary-button:disabled,
.contacts-secondary-button:disabled { opacity: .55; cursor: wait; }
.contacts-actions-menu { position: relative; }
.contacts-actions-menu > summary { width: 42px; height: 42px; display: grid; place-items: center; color: #445168; border: 1px solid #dce3ec; border-radius: 11px; background: rgba(255,255,255,.88); box-shadow: 0 2px 7px rgba(31,54,88,.04); cursor: pointer; list-style: none; }
.contacts-actions-menu > summary::-webkit-details-marker { display: none; }
.contacts-actions-menu > summary:hover,
.contacts-actions-menu[open] > summary { color: #18253b; background: #fff; }
.contacts-actions-menu > summary:focus-visible { outline: 3px solid rgba(8,119,239,.18); outline-offset: 2px; }
.contacts-actions-popover { width: 218px; padding: 6px; position: absolute; z-index: 25; top: calc(100% + 8px); right: 0; border: 1px solid rgba(33,55,90,.12); border-radius: 13px; background: rgba(255,255,255,.96); box-shadow: 0 16px 42px rgba(28,48,79,.16); backdrop-filter: saturate(180%) blur(20px); }
.contacts-actions-popover button { width: 100%; min-height: 40px; padding: 0 11px; display: flex; align-items: center; gap: 10px; color: #253248; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; font-size: var(--text-sm); }
.contacts-actions-popover button:hover { color: #075fae; background: rgba(0,113,227,.08); }
.contacts-filterbar { min-height: 50px; margin-bottom: 12px; padding: 5px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--contacts-border); border-radius: 13px; background: rgba(255,255,255,.78); box-shadow: 0 3px 12px rgba(35,58,95,.035); }
.contacts-filter-tabs { display: flex; align-items: center; gap: 3px; }
.contacts-filter-tabs button { min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; color: #506077; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-size: var(--text-sm); }
.contacts-filter-tabs button span { min-width: 18px; padding: 0; color: #68758a; border-radius: 0; background: transparent; font-size: var(--text-xs); font-weight: 600; }
.contacts-filter-tabs button.active { color: #0873e8; background: #edf5ff; font-weight: 600; }
.contacts-filter-tabs button.active span { color: #0873e8; background: transparent; }
.contacts-table-search { width: min(385px,36vw); min-height: 40px; padding: 0 8px 0 13px; display: flex; align-items: center; gap: 9px; color: #607087; border: 1px solid #dfe5ed; border-radius: 10px; background: #fbfcfe; }
.contacts-table-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: #27354b; background: transparent; }
.contacts-table-search kbd { padding: 3px 7px; color: #657187; border: 1px solid #dfe4eb; border-radius: 6px; background: #fff; font: inherit; font-size: var(--text-xs); white-space: nowrap; }
.contacts-workspace { min-height: 630px; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(380px,.8fr); gap: 12px; }
.contacts-list-card,
.contact-detail-card { overflow: hidden; border: 1px solid var(--contacts-border); border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 12px 34px rgba(35,58,95,.06); }
.contacts-list-card { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; }
.contacts-table-head,
.contact-row { display: grid; grid-template-columns: minmax(165px,1.3fr) minmax(140px,1fr) minmax(85px,.68fr) minmax(88px,.62fr); align-items: center; gap: 10px; }
.contacts-table-head { min-height: 42px; padding: 0 14px; color: #5e6b80; border-bottom: 1px solid #e8ebf0; font-size: var(--text-xs); }
.contacts-list { min-height: 0; }
.contact-row { width: 100%; min-height: 64px; padding: 7px 14px; color: #27344a; border: 0; border-bottom: 1px solid #edf0f4; background: transparent; cursor: pointer; text-align: left; }
.contact-row:hover { background: #f8fafd; }
.contact-row.selected { background: linear-gradient(90deg,#edf5ff,#f4f8ff); box-shadow: inset 3px 0 #0877f5; }
.contact-row-client,
.contact-row-last { min-width: 0; display: flex; align-items: center; gap: 10px; }
.contact-avatar { width: 40px; height: 40px; position: relative; display: grid; place-items: center; flex: 0 0 auto; overflow: visible; color: #45536a; border-radius: 50%; background: linear-gradient(145deg,#eef1f6,#e1e6ee); font-size: var(--text-sm); font-style: normal; font-weight: 600; }
.contact-avatar.large { width: 64px; height: 64px; font-size: var(--text-md); }
.contact-avatar > img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.contact-whatsapp-badge { width: 17px; height: 17px; position: absolute; right: -1px; bottom: -1px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #19be60; }
.contact-whatsapp-badge .simple-icon { width: 9px; height: 9px; filter: invert(1); }
.contact-row-copy { min-width: 0; display: block; }
.contact-row-copy strong,
.contact-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-row-copy strong { color: #18243a; font-size: var(--text-sm); font-weight: 600; }
.contact-row-copy small { margin-top: 4px; color: #657187; font-size: var(--text-xs); font-weight: 400; }
.contact-row-tags { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; }
.contact-tag { max-width: 90px; padding: 4px 8px; overflow: hidden; flex: 0 0 auto; color: #93600a; border-radius: 999px; background: #fff0d8; font-size: var(--text-xs); font-style: normal; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.contact-tag.client { color: #076bd0; background: #e8f3ff; }
.contact-tag.prospect { color: #7a3bd1; background: #f2e9ff; }
.contact-row-turns { min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; color: #526078; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.contact-row-more { display: grid; place-items: center; color: #526078; font-size: var(--icon-md); }
.contacts-loading,
.contact-tab-loading { margin: 30px; color: #5f6b7f; font-size: var(--text-sm); text-align: center; }
.contacts-empty,
.contacts-error { min-height: 420px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #657187; text-align: center; }
.contacts-empty > span,
.contacts-error > i { width: 52px; height: 52px; margin-bottom: 14px; display: grid; place-items: center; color: #0877ef; border-radius: 16px; background: #edf5ff; font-size: var(--icon-lg); }
.contacts-empty strong,
.contacts-error strong { color: #202d43; font-size: var(--text-md); }
.contacts-empty p,
.contacts-error span { max-width: 330px; margin: 7px 0 0; font-size: var(--text-sm); line-height: 1.5; }
.contacts-error button { min-height: 38px; margin-top: 15px; padding: 0 14px; color: #fff; border: 0; border-radius: 9px; background: #0877ef; cursor: pointer; }
.contacts-pagination { min-height: 48px; padding: 6px 13px; display: flex; align-items: center; justify-content: space-between; color: #627087; border-top: 1px solid #e8ebf0; font-size: var(--text-xs); }
.contacts-pagination > div { display: flex; align-items: center; gap: 8px; }
.contacts-pagination button { width: 32px; height: 32px; display: grid; place-items: center; color: #4c5b72; border: 1px solid #dfe5ed; border-radius: 8px; background: #fff; cursor: pointer; }
.contacts-pagination button:disabled { opacity: .42; cursor: default; }
.contact-detail-card {
  min-width: 0;
  position: sticky;
  top: 88px;
  align-self: start;
  container-type: inline-size;
}
.contact-detail-empty { min-height: 628px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #657187; text-align: center; }
.contact-detail-empty > span { width: 58px; height: 58px; margin-bottom: 14px; display: grid; place-items: center; color: #0877ef; border-radius: 18px; background: #edf5ff; font-size: var(--icon-lg); }
.contact-detail-empty strong { color: #202d43; font-size: var(--text-md); }
.contact-detail-empty p { max-width: 260px; margin: 7px 0 0; font-size: var(--text-sm); line-height: 1.5; }
.contact-detail-header { min-height: 106px; padding: 17px; display: flex; align-items: center; gap: 13px; }
.contact-detail-identity { min-width: 0; flex: 1; }
.contact-detail-identity h3 { margin: 0; overflow: hidden; color: #162238; font-size: var(--text-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.contact-detail-identity > p { margin: 4px 0 7px; color: #657187; font-size: var(--text-sm); }
.contact-detail-identity > div { display: flex; gap: 4px; overflow: hidden; }
.contact-edit-button { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; align-self: flex-start; flex: 0 0 auto; color: #536178; border: 1px solid #dfe5ed; border-radius: 9px; background: #fff; cursor: pointer; }
.contact-quick-actions { padding: 0 12px 13px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; border-bottom: 1px solid #e7ebf0; }
.contact-quick-actions button { min-width: 0; min-height: 63px; padding: 7px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #405069; border: 0; border-radius: 10px; background: #f7f9fc; cursor: pointer; }
.contact-quick-actions button:disabled { opacity: .5; cursor: default; }
.contact-quick-actions button > span { height: 23px; display: grid; place-items: center; color: #4c5c74; font-size: var(--icon-md); }
.contact-quick-actions button > span.whatsapp { width: 23px; color: #fff; border-radius: 50%; background: #1fbd62; }
.contact-quick-actions .simple-icon { width: 13px; height: 13px; filter: invert(1); }
.contact-quick-actions small { overflow: hidden; max-width: 100%; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.contact-detail-tabs { height: 43px; padding: 0 11px; display: flex; align-items: stretch; gap: 5px; overflow-x: auto; border-bottom: 1px solid #e7ebf0; }
.contact-detail-tabs button { min-width: max-content; padding: 0 7px; position: relative; color: #5d6a80; border: 0; background: transparent; cursor: pointer; font-size: var(--text-xs); }
.contact-detail-tabs button.active { color: #0874e6; font-weight: 600; }
.contact-detail-tabs button.active::after { content: ""; height: 2px; position: absolute; right: 6px; bottom: 0; left: 6px; border-radius: 2px 2px 0 0; background: #0877ef; }
.contact-detail-tabs button span { color: inherit; }
.contact-detail-content { padding: 15px; }
.contact-information-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.contact-information-grid > div { min-width: 0; min-height: 55px; padding: 7px 10px; border-right: 1px solid #edf0f4; }
.contact-information-grid > div:nth-child(2n) { border-right: 0; }
.contact-information-grid dt { margin-bottom: 4px; color: #657187; font-size: var(--text-xs); }
.contact-information-grid dd { min-width: 0; margin: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; color: #26344a; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.contact-information-grid dd button { margin-left: auto; padding: 2px; flex: 0 0 auto; color: #678; border: 0; background: transparent; cursor: pointer; }
.contact-active-value > i { width: 7px; height: 7px; border-radius: 50%; background: #19b964; }
.contact-note-preview,
.contact-summary { margin-top: 12px; padding: 13px; border: 1px solid #e6eaf0; border-radius: 11px; background: #fcfdfe; }
.contact-note-preview header { display: flex; justify-content: space-between; gap: 12px; }
.contact-note-preview strong,
.contact-summary h4 { margin: 0; color: #202d43; font-size: var(--text-sm); font-weight: 600; }
.contact-note-preview button { padding: 0; color: #0874e7; border: 0; background: transparent; cursor: pointer; font-size: var(--text-xs); }
.contact-note-preview p { margin: 8px 0 0; color: #59677d; font-size: var(--text-xs); line-height: 1.5; white-space: pre-wrap; }
.contact-summary > div { margin-top: 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.contact-summary article { min-width: 0; padding: 0 9px; display: grid; grid-template-columns: 34px auto; grid-template-rows: 34px auto; justify-content: center; align-items: center; column-gap: 8px; border-right: 1px solid #edf0f4; }
.contact-summary article:last-child { border-right: 0; }
.contact-summary article > span { width: 34px; height: 34px; display: grid; place-items: center; color: #0877ef; border-radius: 10px; background: #eaf4ff; font-size: var(--icon-md); }
.contact-summary article > span.green { color: #10a761; background: #e9f9f0; }
.contact-summary article > span.purple { color: #8249d8; background: #f2eaff; }
.contact-summary article strong { min-width: 0; white-space: nowrap; }
.contact-summary article strong { color: #17243a; font-size: var(--text-md); }
.contact-summary article small { grid-column: 1 / -1; margin-top: 6px; color: #68758a; font-size: var(--text-xs); text-align: center; white-space: nowrap; }
.contact-tab-empty { min-height: 265px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #657187; text-align: center; }
.contact-tab-empty > span { width: 48px; height: 48px; margin-bottom: 12px; display: grid; place-items: center; color: #0877ef; border-radius: 14px; background: #edf5ff; font-size: var(--icon-lg); }
.contact-tab-empty strong { color: #263349; font-size: var(--text-md); }
.contact-tab-empty p { max-width: 270px; margin: 6px 0 0; font-size: var(--text-sm); line-height: 1.5; }
.contact-message-history,
.contact-appointment-history { display: grid; gap: 8px; }
.contact-message-history article { max-width: 88%; padding: 9px 11px; border: 1px solid #e8ebef; border-radius: 11px; background: #fff; }
.contact-message-history article.bot,
.contact-message-history article.human { margin-left: auto; background: #e9f8ed; }
.contact-message-history article > span,
.contact-message-history article time { color: #657187; font-size: var(--text-xs); }
.contact-message-history article p { margin: 4px 0; color: #253349; font-size: var(--text-sm); line-height: 1.4; }
.contact-appointment-history article { min-height: 56px; padding: 8px; display: flex; align-items: center; gap: 10px; border: 1px solid #e8ebef; border-radius: 10px; }
.contact-appointment-history article > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #0877ef; border-radius: 10px; background: #eaf4ff; }
.contact-appointment-history article > span.completed { color: #14975c; background: #e7f8ef; }
.contact-appointment-history article > span.cancelled { color: #d14a45; background: #fff0ef; }
.contact-appointment-history article > div { min-width: 0; flex: 1; }
.contact-appointment-history strong,
.contact-appointment-history small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-appointment-history strong { color: #263349; font-size: var(--text-sm); }
.contact-appointment-history small { margin-top: 4px; color: #657187; font-size: var(--text-xs); }
.contact-appointment-history em { padding: 4px 7px; color: #0874e7; border-radius: 999px; background: #eaf4ff; font-size: var(--text-xs); font-style: normal; }
.contact-appointment-history em.completed { color: #158353; background: #e8f8ef; }
.contact-appointment-history em.cancelled { color: #b6403c; background: #fff0ef; }
.contact-open-related { width: 100%; min-height: 38px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #0874e7; border: 1px solid #dce7f4; border-radius: 9px; background: #f4f8fd; cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
.contact-notes-full { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.contact-notes-full > span { width: 48px; height: 48px; display: grid; place-items: center; color: #0877ef; border-radius: 14px; background: #edf5ff; font-size: var(--icon-lg); }
.contact-notes-full h4 { margin: 12px 0 6px; color: #263349; font-size: var(--text-md); }
.contact-notes-full p { max-width: 320px; margin: 0; color: #657187; font-size: var(--text-sm); line-height: 1.55; white-space: pre-wrap; }
.contact-notes-full button { min-height: 36px; margin-top: 15px; padding: 0 13px; color: #0874e7; border: 1px solid #dce7f4; border-radius: 9px; background: #f4f8fd; cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
.contacts-page-message { min-height: 18px; margin: 8px 2px 0; color: #526078; font-size: var(--text-sm); }
.contacts-page-message.error { color: #b42318; }
.contacts-page-message.success { color: #087f4e; }
.contact-dialog { width: min(640px,calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: auto; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(18,35,62,.25); }
.contact-dialog::backdrop { background: rgba(15,25,42,.35); backdrop-filter: blur(4px); }
.contact-dialog form > header { padding: 19px 21px 16px; display: flex; justify-content: space-between; border-bottom: 1px solid #e7ebf0; }
.contact-dialog header span { color: #0876e7; font-size: var(--text-xs); font-weight: 600; letter-spacing: .7px; text-transform: uppercase; }
.contact-dialog header h2 { margin: 5px 0 0; color: #111b30; font-size: var(--text-lg); font-weight: 600; }
.contact-dialog header button { width: 34px; height: 34px; display: grid; place-items: center; color: #526076; border: 1px solid #e0e5ec; border-radius: 9px; background: #fafbfc; cursor: pointer; }
.contact-form-grid { padding: 18px 21px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form-grid label.full { grid-column: 1 / -1; }
.contact-form-grid label > span { margin-bottom: 6px; display: block; color: #344056; font-size: var(--text-sm); font-weight: 600; }
.contact-form-grid label > small { margin-top: 5px; display: block; color: #657187; font-size: var(--text-xs); }
.contact-form-grid input,
.contact-form-grid select,
.contact-form-grid textarea { width: 100%; min-height: 42px; padding: 9px 11px; color: #1f2c43; border: 1px solid #dce2ea; border-radius: 9px; outline: 0; background: #fbfcfd; resize: vertical; }
.contact-form-grid textarea { min-height: 100px; }
.contact-form-grid input:focus,
.contact-form-grid select:focus,
.contact-form-grid textarea:focus { border-color: #66aaf4; box-shadow: 0 0 0 3px rgba(8,120,244,.09); }
.contact-form-message { min-height: 18px; margin: -7px 21px 5px; color: #0b8750; font-size: var(--text-sm); }
.contact-form-message.error { color: #b42318; }
.contact-dialog footer { padding: 13px 21px 18px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 9px; border-top: 1px solid #e7ebf0; }
.contact-delete-button { min-height: 40px; padding: 0 14px; color: #b42318; border: 1px solid #efc9c5; border-radius: 10px; background: #fff7f6; cursor: pointer; font-size: var(--text-sm); font-weight: 600; }

@media (max-width: 1450px) {
  .contacts-workspace { grid-template-columns: minmax(0,1.35fr) minmax(360px,.75fr); }
  .contacts-table-head,
  .contact-row { grid-template-columns: minmax(155px,1.25fr) minmax(130px,1fr) minmax(80px,.65fr) minmax(82px,.6fr); gap: 8px; }
}

@media (max-width: 1180px) {
  .contacts-heading { align-items: flex-start; flex-direction: column; }
  .contacts-heading-actions { width: 100%; justify-content: flex-start; }
  .contacts-workspace { grid-template-columns: 1fr; }
  .contact-detail-card { min-height: 420px; position: static; }
  .contact-detail-empty { min-height: 420px; }
}

@media (max-width: 760px) {
  .contacts-topbar-tools .contacts-global-search { display: none; }
  .dashboard-page .contacts-content { padding: 12px 14px 100px; }
  .contacts-topbar-tools { gap: 7px; }
  .contacts-topbar-tools .contacts-primary-button { width: 40px; min-height: 40px; padding: 0; }
  .contacts-topbar-tools .contacts-primary-button > span { display: none; }
  .contacts-heading-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .contacts-primary-button { grid-column: 1 / -1; }
  .contacts-filterbar { align-items: stretch; flex-direction: column; }
  .contacts-filter-tabs { padding-bottom: 2px; overflow-x: auto; }
  .contacts-filter-tabs button { flex: 0 0 auto; }
  .contacts-table-search { width: 100%; }
  .contacts-table-head { display: none; }
  .contact-row { grid-template-columns: minmax(0,1fr); min-height: 76px; }
  .contact-row-last { grid-column: 1; padding-left: 50px; margin-top: -21px; }
  .contact-row-last .contact-row-copy strong { color: #657187; font-size: var(--text-xs); font-weight: 400; }
  .contact-row-last .contact-row-copy small,
  .contact-row-tags,
  .contact-row-turns { display: none; }
  .contact-detail-header { align-items: flex-start; }
  .contact-quick-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .contact-information-grid { grid-template-columns: 1fr; }
  .contact-information-grid > div { border-right: 0; border-bottom: 1px solid #edf0f4; }
  .contact-summary > div { grid-template-columns: 1fr; gap: 12px; }
  .contact-summary article { border-right: 0; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-form-grid label.full { grid-column: auto; }
  .contact-dialog footer { grid-template-columns: 1fr 1fr; }
  .contact-dialog footer > span { display: none; }
  .contact-delete-button { grid-column: 1 / -1; }
  .dashboard-page .sidebar-nav { grid-template-columns: repeat(6,minmax(0,1fr)); }
}

@media (max-width: 430px) {
  .contacts-heading-actions { grid-template-columns: 1fr; }
  .contacts-primary-button { grid-column: auto; }
  .contact-detail-header { flex-wrap: wrap; }
  .contact-edit-button { margin-left: 77px; }
}

/* My plan ---------------------------------------------------------- */
.plan-page { background: radial-gradient(circle at 58% 0,rgba(219,233,255,.46),transparent 38%),#f5f7fa; }
.plan-section-title { min-width: 0; }
.plan-section-title h1 { margin: 0; color: #171f31; font-size: var(--text-lg); font-weight: 650; letter-spacing: -.55px; line-height: 1.1; }
.plan-section-title p { margin: 4px 0 0; color: #6b7689; font-size: var(--text-xs); line-height: 1; }
.plan-topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.plan-global-search { width: min(320px,30vw); min-height: 40px; padding: 0 8px 0 13px; display: flex; align-items: center; gap: 9px; color: #536077; border: 1px solid #dce3ec; border-radius: 11px; background: rgba(248,250,253,.88); }
.plan-global-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #243047; background: transparent; }
.plan-global-search kbd { padding: 3px 7px; color: #58657b; border: 1px solid #dfe4eb; border-radius: 6px; background: #fff; font: inherit; font-size: var(--text-xs); white-space: nowrap; }
.plan-content { padding: 18px clamp(18px,3vw,42px) 42px; }
.plan-heading { margin-bottom: 21px; }
.plan-heading h2 { margin: 7px 0 4px; color: #10182b; font-size: clamp(var(--text-xl),3vw,32px); font-weight: 700; letter-spacing: -1.25px; line-height: 1.08; }
.plan-heading p { margin: 0; color: #5f6b7f; font-size: var(--text-base); }
.plan-layout { display: grid; grid-template-columns: minmax(560px,1.45fr) minmax(320px,.7fr); align-items: start; gap: 14px; }
.plan-main-column,
.plan-side-column { display: grid; gap: 14px; }
.plan-hero-card,
.plan-usage-card,
.plan-features-card,
.billing-status-card,
.billing-action-card,
.plan-support-card,
.plan-upgrade-card { overflow: hidden; border: 1px solid rgba(33,55,90,.10); border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 12px 34px rgba(35,58,95,.05); }
.plan-hero-card { min-height: 158px; padding: 22px 26px; position: relative; display: flex; align-items: center; background: linear-gradient(120deg,#f7faff,#edf5ff); }
.plan-hero-copy { width: 100%; position: relative; z-index: 2; }
.plan-hero-copy > div:first-child { display: flex; align-items: center; gap: 12px; }
.plan-hero-copy h3 { margin: 0; color: #10182b; font-size: var(--text-xl); font-weight: 700; letter-spacing: -1px; }
.plan-hero-copy > div:first-child span { padding: 5px 10px; color: #076edc; border-radius: 999px; background: #dcecff; font-size: var(--text-xs); font-weight: 600; }
.plan-hero-copy p { max-width: 560px; margin: 7px 0 16px; color: #40506a; font-size: var(--text-sm); line-height: 1.45; }
.plan-hero-copy > div:last-child { display: flex; align-items: center; gap: 10px; }
.plan-primary-action,
.plan-secondary-action { min-height: 43px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 10px; font-size: var(--text-sm); font-weight: 600; }
.plan-primary-action { color: #fff; background: linear-gradient(180deg,#2587fa,#0871ed); box-shadow: 0 8px 20px rgba(8,113,237,.18); }
.plan-secondary-action { color: #263349; border: 1px solid #d5dfec; background: rgba(255,255,255,.46); }
.plan-crown-art { width: 42%; position: absolute; inset: 0 0 0 auto; display: grid; place-items: center; color: #2f83f4; }
.plan-crown-art > .ph-fill { position: relative; z-index: 2; font-size: 126px; filter: drop-shadow(0 17px 16px rgba(46,120,231,.25)); transform: rotate(-7deg); }
.plan-crown-art > span { width: 170px; height: 72px; position: absolute; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; transform: rotate(-14deg); }
.plan-crown-art > span:last-child { width: 205px; height: 96px; border-color: rgba(79,143,245,.22); transform: rotate(18deg); }
.plan-usage-card { padding: 18px 22px 20px; }
.plan-usage-card > header,
.plan-features-card > header { display: flex; align-items: center; gap: 11px; }
.plan-section-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; color: #0877ef; border-radius: 11px; background: #edf5ff; font-size: var(--icon-md); }
.plan-usage-card header > div,
.plan-features-card header > div { min-width: 0; flex: 1; }
.plan-usage-card h3,
.plan-features-card h3,
.billing-status-card h3,
.billing-action-card h3,
.plan-upgrade-card h3 { margin: 0; color: #17243a; font-size: var(--text-md); font-weight: 600; }
.plan-usage-card header p,
.plan-features-card header p { margin: 4px 0 0; color: #657187; font-size: var(--text-sm); }
.plan-usage-card header > small { color: #657187; font-size: var(--text-xs); white-space: nowrap; }
.plan-usage-total { margin: 18px 0 9px; display: flex; align-items: baseline; gap: 5px; color: #243149; }
.plan-usage-total > strong { color: #111a2c; font-size: var(--text-xl); font-weight: 600; letter-spacing: -1px; }
.plan-usage-total > span { color: #536078; font-size: var(--text-md); }
.plan-usage-total > span b { font-weight: 500; }
.plan-usage-total > em { margin-left: auto; color: #27354b; font-size: var(--text-sm); font-style: normal; font-weight: 600; }
.plan-usage-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #e9eef6; }
.plan-usage-progress span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#0a7bfa,#1767f1); transition: width .35s ease; }
.plan-usage-stats { margin-top: 17px; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.plan-usage-stats article { min-width: 0; min-height: 62px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #e6eaf0; border-radius: 11px; background: #fcfdfe; }
.plan-usage-stats article > span,
.plan-feature-grid article > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #0877ef; border-radius: 10px; background: #eaf4ff; font-size: var(--icon-md); }
.plan-usage-stats article > span.green,
.plan-feature-grid article > span.green { color: #0caa60; background: #e9f9f0; }
.plan-usage-stats article > span.purple { color: #8249d8; background: #f2eaff; }
.plan-usage-stats article > span.orange { color: #de6d24; background: #fff1e8; }
.plan-usage-stats article > div { min-width: 0; }
.plan-usage-stats strong,
.plan-usage-stats small { display: block; }
.plan-usage-stats strong { color: #17243a; font-size: var(--text-base); font-weight: 600; }
.plan-usage-stats small { margin-top: 3px; color: #657187; font-size: var(--text-xs); }
.plan-data-message { min-height: 0; margin: 9px 0 0; color: #657187; font-size: var(--text-xs); }
.plan-data-message:empty { display: none; }
.plan-data-message.warning { color: #9a6309; }
.plan-data-message.error { color: #b42318; }
.plan-features-card { padding: 18px 22px 21px; scroll-margin-top: 90px; }
.plan-features-card header > a { display: inline-flex; align-items: center; gap: 6px; color: #0874e7; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.plan-feature-grid { margin-top: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 24px; }
.plan-feature-grid article { min-width: 0; display: flex; align-items: center; gap: 11px; }
.plan-feature-grid article > div { min-width: 0; }
.plan-feature-grid strong,
.plan-feature-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-feature-grid strong { color: #223047; font-size: var(--text-sm); font-weight: 600; }
.plan-feature-grid small { margin-top: 3px; color: #657187; font-size: var(--text-xs); }
.billing-status-card > header { padding: 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #e7ebf0; }
.billing-status-card > header > span { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; color: #0877ef; border-radius: 12px; background: #edf5ff; font-size: var(--icon-lg); }
.billing-status-card header p { margin: 4px 0 0; color: #657187; font-size: var(--text-sm); }
.billing-status-card dl { margin: 0; }
.billing-status-card dl > div { min-height: 52px; padding: 0 18px; display: grid; grid-template-columns: minmax(160px,1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid #edf0f4; }
.billing-status-card dl > div:last-child { border-bottom: 0; }
.billing-status-card dt { display: flex; align-items: center; gap: 9px; color: #4e5d74; font-size: var(--text-sm); }
.billing-status-card dt > .ph { color: #3c4d66; font-size: var(--icon-md); }
.billing-status-card dd { margin: 0; color: #28364d; font-size: var(--text-sm); text-align: right; }
.billing-action-card { padding: 19px; }
.billing-action-card > p { margin: 6px 0 13px; color: #657187; font-size: var(--text-sm); line-height: 1.45; }
.billing-action-card button { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; border: 0; border-radius: 10px; background: #9ebce4; cursor: not-allowed; font-size: var(--text-sm); font-weight: 600; }
.billing-action-card button.secondary { margin-top: 8px; color: #788397; border: 1px solid #dfe4eb; background: #f4f6f9; }
.plan-support-card { min-height: 82px; padding: 14px 17px; display: flex; align-items: center; gap: 11px; }
.plan-support-card > span { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; color: #0877ef; border-radius: 11px; background: #edf5ff; font-size: var(--icon-md); }
.plan-support-card > div { min-width: 0; flex: 1; }
.plan-support-card strong,
.plan-support-card small { display: block; }
.plan-support-card strong { color: #243149; font-size: var(--text-sm); font-weight: 600; }
.plan-support-card small { margin-top: 4px; color: #657187; font-size: var(--text-xs); }
.plan-support-card a { min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; color: #0874e7; border: 1px solid #cddff5; border-radius: 9px; background: #f7fbff; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.plan-upgrade-card { min-height: 194px; padding: 22px; position: relative; display: flex; align-items: center; background: radial-gradient(circle at 85% 50%,rgba(93,155,255,.23),transparent 36%),linear-gradient(120deg,#f7fbff,#edf5ff); }
.plan-upgrade-card > div:first-child { width: 68%; position: relative; z-index: 2; }
.plan-upgrade-card p { margin: 8px 0 17px; color: #536179; font-size: var(--text-sm); line-height: 1.5; }
.plan-upgrade-card a { min-height: 40px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; color: #0874e7; border: 1px solid #c7dcf6; border-radius: 9px; background: rgba(255,255,255,.72); font-size: var(--text-sm); font-weight: 600; }
.plan-bars-art { height: 125px; position: absolute; right: 28px; bottom: 23px; display: flex; align-items: flex-end; gap: 10px; }
.plan-bars-art i { width: 30px; height: 48px; border-radius: 10px 10px 4px 4px; background: linear-gradient(90deg,#80b7ff,#4a94fb); box-shadow: 0 12px 22px rgba(57,124,231,.18); }
.plan-bars-art i:nth-child(2) { height: 82px; }
.plan-bars-art i:nth-child(3) { height: 118px; background: linear-gradient(90deg,#68a8ff,#1979f2); }

@media (max-width: 1180px) {
  .plan-layout { grid-template-columns: 1fr; }
  .plan-side-column { grid-template-columns: 1fr 1fr; }
  .billing-status-card { grid-row: auto; }
  .plan-upgrade-card { min-height: 180px; }
}

@media (max-width: 760px) {
  .plan-topbar-tools .plan-global-search { display: none; }
  .plan-content { padding: 24px 14px 100px; }
  .plan-layout { grid-template-columns: minmax(0,1fr); }
  .plan-side-column { grid-template-columns: minmax(0,1fr); }
  .billing-status-card { grid-row: auto; }
  .plan-hero-card { min-height: 0; padding: 20px; align-items: center; }
  .plan-hero-copy { width: 100%; }
  .plan-hero-copy h3 { font-size: var(--text-lg); }
  .plan-hero-copy > div:last-child { align-items: stretch; flex-direction: column; }
  .plan-primary-action,
  .plan-secondary-action { width: 100%; }
  .plan-crown-art { width: 100%; height: 145px; inset: 8px 0 auto; }
  .plan-crown-art > .ph-fill { font-size: 90px; }
  .plan-crown-art > span { width: 125px; height: 50px; }
  .plan-crown-art > span:last-child { width: 155px; height: 68px; }
  .plan-usage-card { padding-inline: 15px; }
  .plan-usage-card > header { align-items: flex-start; flex-wrap: wrap; }
  .plan-usage-card header > small { width: 100%; padding-left: 47px; }
  .plan-usage-stats { grid-template-columns: 1fr 1fr; }
  .plan-features-card { padding-inline: 15px; }
  .plan-features-card > header { align-items: flex-start; flex-wrap: wrap; }
  .plan-features-card header > a { width: 100%; padding-left: 47px; }
  .plan-feature-grid { grid-template-columns: 1fr; }
  .plan-support-card { align-items: flex-start; flex-wrap: wrap; }
  .plan-support-card a { width: 100%; justify-content: center; }
  .plan-upgrade-card > div:first-child { width: 78%; }
  .plan-bars-art { right: 16px; opacity: .72; }
  .dashboard-page .sidebar-nav { display: flex; overflow-x: auto; scrollbar-width: none; }
  .dashboard-page .sidebar-nav::-webkit-scrollbar { display: none; }
  .dashboard-page .sidebar-nav > .nav-item { min-width: 72px; flex: 1 0 72px; }
}

@media (max-width: 430px) {
  .plan-usage-stats { grid-template-columns: 1fr; }
  .plan-usage-stats article { min-height: 62px; }
  .billing-status-card dl > div { grid-template-columns: 1fr; gap: 4px; padding-block: 10px; }
  .billing-status-card dd { padding-left: 29px; text-align: left; }
  .plan-upgrade-card > div:first-child { width: 100%; }
  .plan-bars-art { display: none; }
}

/* Apple-like color balance ----------------------------------------------
   Neutral surfaces carry the interface; blue is reserved for actions,
   selection and focus instead of tinting entire pages and shadows. */
.dashboard-page,
.contacts-page,
.agenda-page,
.settings-page,
.plan-page,
.home-dashboard-page {
  background: #f5f5f7;
}

.dashboard-page .main-area,
.dashboard-page .dashboard-content,
.dashboard-page .contacts-content,
.dashboard-page .agenda-content,
.dashboard-page .settings-content,
.dashboard-page .plan-content,
.dashboard-page .home-content {
  background-color: transparent;
}

.dashboard-page .topbar {
  background: rgba(250,250,252,.86);
  backdrop-filter: saturate(160%) blur(20px);
}

.dashboard-page :where(
  .home-dashboard-card,
  .home-metrics,
  .home-health-status > a,
  .agenda-stat-card,
  .agenda-table-card,
  .agenda-side-card,
  .contacts-toolbar,
  .contacts-table-card,
  .contact-detail,
  .knowledge-browser,
  .knowledge-detail,
  .settings-form-card,
  .settings-side-card,
  .plan-hero-card,
  .plan-usage-card,
  .plan-features-card,
  .billing-status-card,
  .plan-support-card
) {
  border-color: rgba(60,60,67,.10);
  background-color: rgba(255,255,255,.88);
  box-shadow: 0 10px 30px rgba(0,0,0,.045);
}

.dashboard-page :where(
  .contacts-primary-button,
  .knowledge-primary-button,
  .agenda-new-button,
  .settings-save-button,
  .plan-primary-action,
  .home-hero-actions > a:first-child
) {
  border-color: #0071e3;
  background: #0071e3;
  box-shadow: 0 4px 12px rgba(0,113,227,.16);
}

.dashboard-page :where(
  .contacts-primary-button,
  .knowledge-primary-button,
  .agenda-new-button,
  .settings-save-button,
  .plan-primary-action,
  .home-hero-actions > a:first-child
):hover {
  background: #0077ed;
  box-shadow: 0 5px 14px rgba(0,113,227,.18);
}

.dashboard-page :where(input, textarea, select):focus {
  border-color: rgba(0,113,227,.52);
  box-shadow: 0 0 0 3px rgba(0,113,227,.09);
}

.dashboard-page :where(.nav-item.active, .settings-sections > a.active) {
  color: #0068d1;
  background: rgba(0,113,227,.10);
}

/* Statistics ------------------------------------------------------------- */
.statistics-page { background: #f5f5f7; }
.statistics-section-title h1 { margin: 0; color: #171f31; font-size: var(--text-lg); letter-spacing: -.55px; line-height: 1.1; }
.statistics-section-title p { margin: 4px 0 0; color: #6e6e73; font-size: var(--text-xs); }
.statistics-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.statistics-period { padding: 4px; display: flex; border: 1px solid rgba(60,60,67,.10); border-radius: 11px; background: rgba(255,255,255,.7); }
.statistics-period button { min-height: 32px; padding: 0 13px; color: #5f6b7f; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: var(--text-xs); }
.statistics-period button.active { color: #0068d1; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.08); }
.statistics-content { padding-top: 20px !important; }
.statistics-heading { margin-bottom: 16px; }
.statistics-heading > span { color: #0071e3; font-size: var(--text-xs); font-weight: 700; letter-spacing: .6px; }
.statistics-heading h2 { margin: 0 0 4px; color: #11131a; font-size: clamp(26px,3vw,38px); letter-spacing: -1.8px; line-height: 1.05; }
.statistics-heading p { margin: 0; color: #6e6e73; font-size: var(--text-sm); }
.statistics-metrics { margin-bottom: 14px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.statistics-metrics article { min-width: 0; min-height: 116px; padding: 14px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: start; gap: 10px; border: 1px solid rgba(60,60,67,.10); border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 8px 25px rgba(0,0,0,.04); }
.statistics-metrics article > span { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 11px; font-size: var(--icon-md); }
.statistics-metrics .blue { color:#0071e3; background:#eaf4ff; }.statistics-metrics .green { color:#16a765; background:#e8f8ef; }.statistics-metrics .orange { color:#ed6334; background:#fff0ea; }.statistics-metrics .purple { color:#8b45e6; background:#f3eaff; }
.statistics-metrics article > div { min-width: 0; }
.statistics-metrics small { min-height: 30px; display: block; margin-bottom: 5px; color: #5f6b7f; font-size: var(--text-xs); line-height: 1.25; }
.statistics-metrics strong { display:block; color:#111827; font-size: var(--text-xl); line-height:1; letter-spacing:-.8px; }
.statistics-metrics em { width:fit-content; margin:7px 0 0; padding:3px 6px; display:block; color:#168553; border-radius:999px; background:#e8f8ef; font-size:10px; font-style:normal; white-space:nowrap; }
.statistics-metrics em.negative { color:#c14d36; background:#fff0eb; }
.statistics-metrics em.neutral { color:#657187; background:#f0f2f5; }
.statistics-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; }
.statistics-card { min-width:0; overflow:hidden; border:1px solid rgba(60,60,67,.10); border-radius:16px; background:rgba(255,255,255,.9); box-shadow:0 8px 25px rgba(0,0,0,.04); }
.statistics-card > header { min-height:52px; padding:12px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.statistics-card h3 { margin:0; color:#151922; font-size:var(--text-sm); }
.statistics-card header p { margin:5px 0 0; color:#718096; font-size:var(--text-xs); }.statistics-card header p i { width:7px; height:7px; margin:0 5px 0 10px; display:inline-block; border-radius:50%; background:#2d86ef; }.statistics-card header p i:first-child { margin-left:0; background:#9fc8fb; }
.statistics-card header a { color:#0071e3; font-size:var(--text-xs); font-weight:600; }
.statistics-chart-card { grid-column:span 7; min-height:270px; }
.statistics-heatmap-card { grid-column:span 5; }
.statistics-bars { height:205px; padding:10px 16px 14px; display:flex; align-items:stretch; gap:4px; border-top:1px solid rgba(60,60,67,.07); }
.statistics-bar { min-width:0; display:flex; flex:1; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; }
.statistics-bar > i { width:100%; max-width:18px; min-height:4px; position:relative; display:flex; align-items:flex-end; overflow:hidden; border-radius:4px 4px 2px 2px; background:#bdd9fb; }
.statistics-bar b { width:100%; display:block; background:linear-gradient(#57a0f5,#187ce9); }.statistics-bar small { min-height:12px; color:#7a8495; font-size:9px; white-space:nowrap; }
.statistics-heatmap { padding:8px 15px 13px; }.statistics-heatmap > div { margin-bottom:5px; display:grid; grid-template-columns:22px repeat(8,1fr); gap:4px; }.statistics-heatmap small { color:#657187; font-size:10px; }.statistics-heatmap i { aspect-ratio:1; border-radius:3px; background:color-mix(in srgb,#0071e3 calc(var(--intensity) * 90%),#f0f4f9); }.statistics-heatmap footer { margin-left:26px; display:flex; justify-content:space-between; color:#7a8495; font-size:9px; }.heatmap-legend { margin:12px 0 0 26px; display:flex; align-items:center; justify-content:flex-end; gap:4px; color:#7a8495; font-size:9px; }.heatmap-legend i { width:11px; height:11px; aspect-ratio:auto; }.heatmap-legend i:nth-of-type(1){background:#edf2f8}.heatmap-legend i:nth-of-type(2){background:#b9d7f8}.heatmap-legend i:nth-of-type(3){background:#68a9ef}.heatmap-legend i:nth-of-type(4){background:#087ce5}
.statistics-channel-card { padding-bottom:14px; }.channel-ring { width:120px; height:120px; margin:6px auto 14px; display:grid; place-content:center; text-align:center; border-radius:50%; background:radial-gradient(circle,#fff 55%,transparent 56%),conic-gradient(#21c16b 0 100%); }.channel-ring strong { font-size:var(--text-lg); }.channel-ring small { color:#657187; font-size:10px; }.channel-row { padding:0 16px; display:flex; justify-content:space-between; font-size:var(--text-xs); }.channel-row span { display:flex; align-items:center; gap:7px; }.simple-whatsapp { width:17px; height:17px; border-radius:50%; background:#20c565; }
.statistics-ranking { min-height:220px; grid-column:span 4; }.statistics-ranking ol { min-height:168px; margin:0; padding:0 15px 12px; list-style:none; }.statistics-ranking li { min-height:33px; display:grid; grid-template-columns:23px minmax(0,1fr) auto 65px; align-items:center; gap:8px; border-top:1px solid rgba(60,60,67,.07); font-size:var(--text-xs); }.statistics-ranking li > b { width:21px; height:21px; display:grid; place-items:center; color:#526078; border-radius:50%; background:#f1f3f6; font-size:10px; }.statistics-ranking li > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.statistics-ranking li > strong { font-size:10px; }.statistics-ranking li > i { height:7px; overflow:hidden; border-radius:999px; background:#e9edf3; }.statistics-ranking li > i em { height:100%; display:block; border-radius:inherit; background:#2d87ee; }.statistics-ranking li.statistics-empty { min-height:168px; display:grid; place-items:center; padding:20px; color:#6e6e73; border-top:1px solid rgba(60,60,67,.07); text-align:center; line-height:1.45; }
.statistics-comparison { grid-column:span 4; }
.statistics-comparison > div { padding:0 15px 12px; }.statistics-comparison p { min-height:36px; margin:0; display:grid; grid-template-columns:minmax(0,1fr) auto 52px; align-items:center; gap:8px; border-top:1px solid rgba(60,60,67,.07); font-size:var(--text-xs); }.statistics-comparison p > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.statistics-comparison p em { padding:3px 5px; color:#168553; border-radius:999px; background:#e8f8ef; font-size:9px; font-style:normal; text-align:center; }.statistics-comparison p em.negative { color:#c14d36; background:#fff0eb; }
.statistics-comparison p em.neutral { color:#657187; background:#f0f2f5; }
.statistics-insight { min-height:76px; margin-top:12px; padding:14px 18px; display:flex; align-items:center; gap:13px; border:1px solid rgba(60,60,67,.10); border-radius:16px; background:linear-gradient(120deg,#fff,#f0f7ff); }.statistics-insight > span { width:38px; height:38px; display:grid; place-items:center; color:#0071e3; border-radius:50%; background:#eaf4ff; }.statistics-insight strong { font-size:var(--text-sm); }.statistics-insight p { margin:4px 0 0; color:#5f6b7f; font-size:var(--text-xs); }.statistics-message { margin:10px 0 0; color:#6e6e73; font-size:var(--text-xs); }
@media(max-width:1250px){.statistics-metrics{grid-template-columns:repeat(3,1fr)}.statistics-chart-card,.statistics-heatmap-card{grid-column:span 6}.statistics-ranking,.statistics-comparison{grid-column:span 6}}
@media(max-width:850px){.statistics-period button{padding-inline:8px}.statistics-chart-card,.statistics-heatmap-card,.statistics-ranking,.statistics-comparison{grid-column:1/-1}.statistics-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.statistics-period{display:none}.statistics-heading h2{font-size:var(--text-xl)}.statistics-metrics{grid-template-columns:1fr}.statistics-ranking li{grid-template-columns:23px minmax(0,1fr) auto}.statistics-ranking li>i{display:none}}

/* Statistics — original visual composition, with corrected data ---------- */
.statistics-heading h2 { max-width: 920px; margin-top: 0; font-size: clamp(28px, 2.7vw, 34px); letter-spacing: -1.35px; }
.statistics-metrics article { min-height: 105px; padding: 15px; display: flex; align-items: flex-start; gap: 11px; }
.statistics-metrics small { min-height: 30px; overflow: visible; margin-bottom: 4px; line-height: 1.25; text-overflow: clip; white-space: normal; }
.statistics-metrics strong { display: block; font-size: 24px; letter-spacing: -.55px; }
.statistics-metrics em,
.statistics-metrics article:nth-child(4) em { margin: 6px 0 0; display: block; vertical-align: initial; }
.statistics-card { box-shadow: 0 6px 20px rgba(0,0,0,.025); }
.statistics-chart-card { min-height: 250px; }
.statistics-bars { height: 185px; background-image: linear-gradient(to bottom, rgba(60,60,67,.055) 1px, transparent 1px); background-size: 100% 25%; }
.statistics-grid { grid-template-columns: minmax(0,1.6fr) minmax(280px,.9fr) minmax(220px,.65fr); }
.statistics-chart-card,
.statistics-heatmap-card,
.statistics-channel-card,
.statistics-ranking,
.statistics-comparison { grid-column: auto; }
.statistics-ranking ol { min-height: 0; }
.statistics-ranking li.statistics-empty { min-height: 168px; }
.statistics-heatmap > div { grid-template-columns: 22px repeat(8,1fr); }
/* Resultados de ventas (estadisticas.js, renderResults). */
.statistics-results { margin-top:12px; display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,.75fr) minmax(0,1.25fr) minmax(0,1.25fr); gap:12px; }
.statistics-results .statistics-ranking { grid-column:auto; }
.statistics-result { padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.statistics-result small { color:#657187; font-size:var(--text-xs); }
.statistics-result strong { color:#111827; font-size:28px; letter-spacing:-.8px; }
.statistics-result span { color:#657187; font-size:var(--text-xs); }
.result-detail { display:block; margin-top:1px; color:#8a94a6; font-size:10px; }
@media(max-width:1250px){.statistics-results{grid-template-columns:1fr 1fr}}
@media(max-width:850px){.statistics-results{grid-template-columns:1fr}}
@media(max-width:1250px){.statistics-grid{grid-template-columns:1.4fr 1fr}.statistics-channel-card{grid-column:auto}.statistics-ranking,.statistics-comparison{grid-column:auto}.statistics-comparison{grid-column:span 2}}
@media(max-width:850px){.statistics-grid{grid-template-columns:1fr}.statistics-chart-card,.statistics-heatmap-card,.statistics-channel-card,.statistics-ranking,.statistics-comparison{grid-column:auto}}
@media(max-width:600px){.statistics-metrics article{display:grid}.statistics-metrics strong{display:block;font-size:22px}.statistics-metrics em{margin:7px 0 0;display:block;vertical-align:initial}.statistics-metrics small{white-space:normal}}

/* Orders --------------------------------------------------------------- */
.orders-page{--orders-line:rgba(60,60,67,.11);background:#f5f5f7}.orders-section-title h1{margin:0;color:#171f31;font-size:var(--text-lg);letter-spacing:-.55px}.orders-section-title p{margin:4px 0 0;color:#6e6e73;font-size:var(--text-xs)}.orders-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.orders-content{padding:24px clamp(18px,3vw,42px) 42px!important}.orders-heading{margin-bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.orders-heading h2{margin:0 0 5px;color:#11131a;font-size:clamp(28px,3vw,36px);letter-spacing:-1.5px;line-height:1.05}.orders-heading p{margin:0;color:#667085;font-size:var(--text-sm)}.orders-heading-actions{display:flex;gap:9px;flex:none}.orders-heading-actions button{min-height:40px;padding:0 14px;border-radius:10px;font-size:var(--text-xs)}
.mobile-orders-brand,.mobile-new-order,.mobile-orders-metrics,.mobile-orders-list-heading,.mobile-order-detail-back,.mobile-orders-filter{display:none}
.orders-metrics{margin-bottom:12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.orders-metrics article{min-width:0;min-height:102px;padding:15px;display:flex;align-items:flex-start;gap:11px;border:1px solid var(--orders-line);border-radius:16px;background:rgba(255,255,255,.92);box-shadow:0 6px 20px rgba(0,0,0,.025)}.orders-metrics article>span{width:40px;height:40px;display:grid;place-items:center;flex:none;border-radius:12px;font-size:var(--icon-md)}.orders-metrics .green{color:#0cab60;background:#e8f8ef}.orders-metrics .blue{color:#0878ed;background:#e9f3ff}.orders-metrics .purple{color:#8b45e6;background:#f3eaff}.orders-metrics .orange{color:#ed6334;background:#fff0ea}.orders-metrics article>div{min-width:0}.orders-metrics small{display:block;color:#667085;font-size:var(--text-xs)}.orders-metrics strong{margin-top:6px;display:block;overflow:hidden;color:#172033;font-size:22px;letter-spacing:-.6px;text-overflow:ellipsis;white-space:nowrap}.orders-metrics em{margin-top:6px;display:block;color:#6e7788;font-size:10px;font-style:normal}
.orders-workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(330px,.72fr);gap:12px;align-items:start}.orders-list-card,.order-detail{min-width:0;overflow:hidden;border:1px solid var(--orders-line);border-radius:17px;background:rgba(255,255,255,.94);box-shadow:0 7px 22px rgba(0,0,0,.03)}.orders-tabs{padding:7px 8px;display:flex;gap:3px;overflow-x:auto;border-bottom:1px solid rgba(60,60,67,.07);scrollbar-width:none}.orders-tabs button{min-height:30px;padding:0 10px;display:flex;align-items:center;gap:6px;flex:none;color:#59677e;border:0;border-radius:8px;background:transparent;cursor:pointer;font-size:11px}.orders-tabs button.active{color:#0874e7;background:#eaf4ff}.orders-tabs b{min-width:19px;padding:2px 5px;border-radius:999px;background:rgba(100,116,139,.09);font-size:9px}.orders-toolbar{padding:10px 12px;display:grid;grid-template-columns:minmax(220px,1fr) 180px;gap:9px;border-bottom:1px solid rgba(60,60,67,.07)}.orders-toolbar label{min-height:40px;padding:0 12px;display:flex;align-items:center;gap:9px;border:1px solid #dfe4ec;border-radius:10px;background:#fafbfc}.orders-toolbar input,.orders-toolbar select{width:100%;min-width:0;color:#28364d;border:0;outline:0;background:transparent;font:inherit;font-size:var(--text-xs)}.orders-toolbar>select{padding:0 11px;border:1px solid #dfe4ec;border-radius:10px;background:#fafbfc}.orders-table-head,.order-row{display:grid;grid-template-columns:minmax(180px,1.35fr) minmax(130px,1fr) 105px 120px 105px 24px;align-items:center;gap:10px}.orders-table-head{min-height:38px;padding:0 13px;color:#718096;border-bottom:1px solid rgba(60,60,67,.08);font-size:10px}.order-row{min-height:67px;padding:7px 13px;position:relative;color:#28364d;border-bottom:1px solid rgba(60,60,67,.07);cursor:pointer;font-size:var(--text-xs)}.order-row:last-child{border-bottom:0}.order-row:hover{background:#f8fbff}.order-row.selected{background:#edf5ff}.order-row.selected:before{width:3px;position:absolute;inset:0 auto 0 0;background:#0878ed;content:""}.order-customer{min-width:0;display:flex;align-items:center;gap:10px}.order-customer>span{width:36px;height:36px;display:grid;place-items:center;flex:none;color:#33506f;border-radius:50%;background:#e7f2ff;font-weight:600}.order-customer div,.order-products{min-width:0}.order-customer strong,.order-products strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.order-customer small,.order-products small{margin-top:3px;display:block;overflow:hidden;color:#718096;text-overflow:ellipsis;white-space:nowrap}.order-row>time{color:#657187;font-size:11px}.order-row>.ph-dots-three{font-size:var(--icon-md)}.order-status{width:fit-content;padding:5px 8px;border-radius:999px;font-size:10px;white-space:nowrap}.order-status.pending{color:#c55b15;background:#fff0e5}.order-status.confirmed{color:#0874e7;background:#e7f2ff}.order-status.preparing{color:#a66a00;background:#fff4d7}.order-status.shipping{color:#7541d5;background:#f1eaff}.order-status.delivered{color:#0b8c4d;background:#e5f8ed}.order-status.cancelled{color:#697386;background:#eef0f3}.orders-empty{min-height:260px;padding:30px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#718096;text-align:center}.orders-empty>i{margin-bottom:10px;font-size:34px}.orders-empty strong{color:#28364d}.orders-empty span{margin-top:5px;font-size:var(--text-xs)}
.order-detail{position:sticky;top:88px}.order-detail>header{padding:15px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(60,60,67,.08)}.order-detail-avatar{width:43px;height:43px;display:grid;place-items:center;flex:none;color:#33506f;border-radius:50%;background:#e7f2ff;font-weight:600}.order-detail header>div:nth-child(2){min-width:0}.order-detail header h3{margin:0;overflow:hidden;color:#172033;font-size:var(--text-sm);text-overflow:ellipsis;white-space:nowrap}.order-detail header p{margin:3px 0 0;color:#718096;font-size:var(--text-xs)}.order-detail header a{margin-left:auto;padding:7px 9px;color:#0874e7;border:1px solid #d6e6f8;border-radius:8px;font-size:10px;white-space:nowrap}.order-detail-title{padding:14px 15px;display:flex;align-items:center;justify-content:space-between}.order-detail-title small{color:#0874e7;font-size:9px;font-weight:700}.order-detail-title h3{margin:3px 0 0;color:#172033;font-size:var(--text-sm)}.order-detail dl{margin:0;padding:0 15px 14px;display:grid;grid-template-columns:125px minmax(0,1fr);gap:10px;color:#536078;font-size:11px}.order-detail dt{display:flex;align-items:center;gap:7px}.order-detail dt i{font-size:15px}.order-detail dd{margin:0;color:#28364d;text-align:right}.order-detail-items{padding:13px 15px;border-top:1px solid rgba(60,60,67,.08)}.order-detail-items h4{margin:0 0 9px;color:#172033;font-size:var(--text-xs)}.order-detail-items article{min-height:46px;display:flex;align-items:center;gap:9px}.order-detail-items article>span{width:34px;height:34px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:#f1f3f6}.order-detail-items img{width:100%;height:100%;object-fit:cover}.order-detail-items article>div{min-width:0;flex:1}.order-detail-items article strong,.order-detail-items article small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.order-detail-items article strong{font-size:11px}.order-detail-items article small{margin-top:3px;color:#718096;font-size:10px}.order-detail-items article>b{font-size:10px;white-space:nowrap}.order-detail-items footer{margin-top:10px;padding:11px 12px;display:flex;justify-content:space-between;border-radius:10px;background:#f4f5f7;font-size:var(--text-sm)}.order-detail-actions{padding:12px 15px;display:flex;gap:8px;border-top:1px solid rgba(60,60,67,.08)}.order-detail-actions button{min-height:38px;flex:1;border-radius:9px;font-size:10px}.order-detail-empty{min-height:430px;padding:30px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#718096;text-align:center}.order-detail-empty i{font-size:38px}.order-detail-empty strong{margin-top:12px;color:#28364d}.order-detail-empty p{max-width:240px;margin:6px 0 0;font-size:var(--text-xs);line-height:1.45}.orders-message{min-height:18px;margin:9px 2px 0;color:#587086;font-size:var(--text-xs)}
.order-dialog{width:min(620px,calc(100vw - 28px));padding:0;border:0;border-radius:18px;background:#fff;box-shadow:0 24px 80px rgba(0,0,0,.22)}.order-dialog::backdrop{background:rgba(15,23,42,.28);backdrop-filter:blur(4px)}.order-dialog form>header{padding:18px 20px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--orders-line)}.order-dialog header span{color:#0874e7;font-size:10px;font-weight:700;letter-spacing:.6px}.order-dialog h2{margin:4px 0 0;font-size:var(--text-lg)}.order-dialog header button{width:34px;height:34px;border:0;border-radius:50%;background:#f1f2f4;cursor:pointer}.order-form-grid{padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.order-form-grid label>span{margin-bottom:6px;display:block;color:#344056;font-size:var(--text-xs);font-weight:600}.order-form-grid :is(input,select,textarea){width:100%;min-height:42px;padding:9px 11px;color:#28364d;border:1px solid #dce2ea;border-radius:10px;background:#fafbfc;font:inherit;font-size:var(--text-xs)}.order-form-grid textarea{resize:vertical}.order-form-grid .wide{grid-column:1/-1}.order-dialog form>footer{padding:13px 20px;display:flex;justify-content:flex-end;gap:9px;border-top:1px solid var(--orders-line)}.order-dialog footer button{min-height:40px;padding:0 15px;border-radius:10px}
@media(max-width:1180px){.orders-workspace{grid-template-columns:1fr}.order-detail{position:static}.orders-metrics{grid-template-columns:1fr 1fr}}@media(max-width:850px){.orders-heading{align-items:flex-start;flex-direction:column}.orders-table-head{display:none}.order-row{grid-template-columns:minmax(160px,1.3fr) minmax(110px,1fr) 90px 105px}.order-row>time,.order-row>.ph-dots-three{display:none}}@media(max-width:600px){.orders-content{padding:16px 14px 100px!important}.orders-heading h2{font-size:var(--text-xl)}.orders-heading-actions{width:100%}.orders-heading-actions button{flex:1}.orders-metrics{grid-template-columns:1fr}.orders-toolbar{grid-template-columns:1fr}.orders-table-head{display:none}.order-row{grid-template-columns:1fr auto;gap:5px}.order-row>.order-products,.order-row>time,.order-row>.ph-dots-three{display:none}.order-row>.order-status{grid-column:2}.order-form-grid{grid-template-columns:1fr}.order-form-grid .wide{grid-column:auto}}

/* Pending inbox -------------------------------------------------------- */
.nav-item{position:relative}.pending-nav-count{min-width:20px;height:20px;margin-left:auto;padding:0 5px;display:grid;place-items:center;color:#fff;border-radius:999px;background:#ff3b30;font-size:9px}.pending-nav-count[hidden]{display:none}.icon-rail-item .pending-nav-count{position:absolute;top:4px;right:3px;min-width:16px;height:16px;margin:0;padding:0 4px;font-size:8px}.pending-page{--pending-line:rgba(60,60,67,.11);background:#f5f5f7}.pending-section-title h1{margin:0;color:#171f31;font-size:var(--text-lg);letter-spacing:-.55px}.pending-section-title p{margin:4px 0 0;color:#6e6e73;font-size:var(--text-xs)}.pending-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.pending-content{padding:24px clamp(18px,3vw,42px) 42px!important}.pending-heading{margin-bottom:18px}.pending-heading h2{margin:0 0 5px;color:#11131a;font-size:clamp(28px,3vw,36px);letter-spacing:-1.5px;line-height:1.05}.pending-heading p{margin:0;color:#667085;font-size:var(--text-sm)}
.pending-metrics{margin-bottom:12px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.pending-metrics article{min-width:0;min-height:91px;padding:14px;display:flex;align-items:flex-start;gap:10px;border:1px solid var(--pending-line);border-radius:15px;background:rgba(255,255,255,.94);box-shadow:0 6px 20px rgba(0,0,0,.025)}.pending-metrics article>span{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:11px;font-size:var(--icon-md)}.pending-metrics .red{color:#f12d3a;background:#ffecee}.pending-metrics .orange{color:#ef6a1d;background:#fff0e7}.pending-metrics .yellow{color:#e39100;background:#fff5da}.pending-metrics .purple{color:#8b45e6;background:#f3eaff}.pending-metrics .green{color:#0bab5e;background:#e6f8ee}.pending-metrics small{display:block;color:#667085;font-size:11px;white-space:nowrap}.pending-metrics strong{margin-top:7px;display:block;color:#172033;font-size:24px;line-height:1}
.pending-workspace{display:grid;grid-template-columns:minmax(390px,.9fr) minmax(420px,1.1fr);gap:12px;align-items:start}.pending-list-card,.pending-detail{min-width:0;overflow:hidden;border:1px solid var(--pending-line);border-radius:17px;background:rgba(255,255,255,.94);box-shadow:0 7px 22px rgba(0,0,0,.03)}.pending-tabs{padding:7px 8px;display:flex;gap:3px;overflow-x:auto;border-bottom:1px solid rgba(60,60,67,.07);scrollbar-width:none}.pending-tabs button{min-height:30px;padding:0 9px;display:flex;align-items:center;gap:6px;flex:none;color:#59677e;border:0;border-radius:8px;background:transparent;cursor:pointer;font-size:10px}.pending-tabs button.active{color:#0874e7;background:#eaf4ff}.pending-tabs b{min-width:18px;padding:2px 5px;border-radius:999px;background:rgba(100,116,139,.09);font-size:9px}.pending-toolbar{padding:10px 12px;display:grid;grid-template-columns:minmax(190px,1fr) 135px;gap:8px;border-bottom:1px solid rgba(60,60,67,.07)}.pending-toolbar label{min-height:39px;padding:0 11px;display:flex;align-items:center;gap:8px;border:1px solid #dfe4ec;border-radius:10px;background:#fafbfc}.pending-toolbar input,.pending-toolbar select{width:100%;min-width:0;color:#28364d;border:0;outline:0;background:transparent;font:inherit;font-size:11px}.pending-toolbar>select{padding:0 9px;border:1px solid #dfe4ec;border-radius:10px;background:#fafbfc}.pending-row{min-height:70px;padding:9px 12px;display:grid;grid-template-columns:38px minmax(0,1fr) auto auto 14px;align-items:center;gap:9px;border-bottom:1px solid rgba(60,60,67,.07);cursor:pointer}.pending-row:hover{background:#f8fbff}.pending-row.selected{background:#edf5ff;box-shadow:inset 3px 0 #0878ed}.pending-kind{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;font-size:var(--icon-md)}.pending-kind.conversation{color:#ed6334;background:#fff0ea}.pending-kind.order{color:#0b9b57;background:#e8f8ef}.pending-kind.appointment{color:#8642dc;background:#f3eaff}.pending-kind.followup{color:#0874e7;background:#e9f3ff}.pending-row>div{min-width:0}.pending-row strong,.pending-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pending-row strong{color:#263349;font-size:var(--text-xs)}.pending-row small{margin-top:4px;color:#718096;font-size:10px}.pending-type-label{padding:5px 7px;border-radius:999px;font-size:9px;white-space:nowrap}.pending-type-label.conversation{color:#c44927;background:#fff0ea}.pending-type-label.order{color:#078649;background:#e8f8ef}.pending-type-label.appointment{color:#7541d5;background:#f1eaff}.pending-type-label.followup{color:#0874e7;background:#e7f2ff}.pending-row time{color:#718096;font-size:9px}.pending-empty{min-height:310px;padding:30px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#718096;text-align:center}.pending-empty i{font-size:36px}.pending-empty strong{margin-top:10px;color:#28364d}.pending-empty span{margin-top:5px;font-size:var(--text-xs)}
.pending-detail{position:sticky;top:88px}.pending-detail>header{padding:16px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(60,60,67,.08)}.pending-detail header>div{min-width:0}.pending-detail header small{color:#0874e7;font-size:9px;font-weight:700;letter-spacing:.45px}.pending-detail header h3{margin:3px 0;overflow:hidden;color:#172033;font-size:var(--text-md);text-overflow:ellipsis;white-space:nowrap}.pending-detail header p{margin:0;color:#718096;font-size:var(--text-xs)}.pending-reason{padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;border-bottom:1px solid rgba(60,60,67,.08)}.pending-reason small{grid-column:1/-1;color:#718096;font-size:10px}.pending-reason strong{color:#28364d;font-size:var(--text-xs)}.pending-reason time{color:#718096;font-size:10px}.pending-context{padding:14px 16px}.pending-context h4{margin:0 0 10px;font-size:var(--text-xs)}.pending-context>p{width:fit-content;max-width:86%;margin:7px 0;padding:9px 11px;color:#28364d;border-radius:11px;background:#f1f2f4;font-size:11px;line-height:1.4}.pending-context>p.bot,.pending-context>p.human{margin-left:auto;background:#e8f3ff}.pending-context p small{margin-top:4px;display:block;color:#718096;font-size:9px;text-align:right}.pending-facts{padding:8px 16px 14px}.pending-facts p{min-height:40px;margin:0;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(60,60,67,.07);font-size:var(--text-xs)}.pending-facts span{color:#718096}.pending-facts strong{color:#28364d;text-align:right}.pending-detail>footer{padding:13px 16px;display:flex;gap:8px;border-top:1px solid rgba(60,60,67,.08)}.pending-detail>footer :is(a,button){min-height:40px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:1;border-radius:10px;font-size:var(--text-xs)}.pending-detail-empty{min-height:365px;padding:30px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#718096;text-align:center}.pending-detail-empty i{font-size:38px}.pending-detail-empty strong{margin-top:12px;color:#28364d}.pending-detail-empty p{max-width:230px;margin:6px 0 0;font-size:var(--text-xs);line-height:1.45}.pending-message{min-height:18px;margin:9px 2px 0;color:#587086;font-size:var(--text-xs)}
@media(max-width:1250px){.pending-metrics{grid-template-columns:repeat(3,1fr)}.pending-workspace{grid-template-columns:1fr}.pending-detail{position:static}}@media(max-width:760px){.pending-content{padding:16px 14px 100px!important}.pending-heading h2{font-size:var(--text-xl)}.pending-metrics{grid-template-columns:1fr 1fr}.pending-toolbar{grid-template-columns:1fr}.pending-row{grid-template-columns:38px minmax(0,1fr) auto}.pending-row time,.pending-row>.ph-caret-right{display:none}}@media(max-width:480px){.pending-metrics{grid-template-columns:1fr}.pending-type-label{display:none}.pending-row{grid-template-columns:38px minmax(0,1fr)}}

/* Sidebar — quiet Apple-style hierarchy -------------------------------- */
@media (min-width: 1101px) {
  .dashboard-page .app-shell { grid-template-columns: 244px minmax(0, 1fr); }
  .dashboard-page .sidebar { width: 244px; padding: 22px 16px 18px; background: rgba(248,248,250,.88); }
  .dashboard-page .sidebar .brand { min-height: 40px; margin-bottom: 20px; padding: 0 11px; font-size: 21px; letter-spacing: -.65px; }
  .dashboard-page .sidebar .brand-mark { width: 30px; height: 30px; filter: none; }
  .dashboard-page .sidebar-label { display: none; }
  .dashboard-page .sidebar-nav { display: grid; gap: 2px; }
  .dashboard-page .sidebar-nav::before,
  .dashboard-page .sidebar-nav > .nav-item:nth-child(6)::before,
  .dashboard-page .sidebar-nav > .nav-item:nth-child(10)::before {
    color: #86868b;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
  }
  .dashboard-page .sidebar-nav::before { margin: 0 11px 5px; content: "Principal"; }
  .dashboard-page .sidebar-nav > .nav-item:nth-child(6),
  .dashboard-page .sidebar-nav > .nav-item:nth-child(10) { margin-top: 22px; }
  .dashboard-page .sidebar-nav > .nav-item:nth-child(6)::before,
  .dashboard-page .sidebar-nav > .nav-item:nth-child(10)::before { position: absolute; bottom: calc(100% + 6px); left: 11px; }
  .dashboard-page .sidebar-nav > .nav-item:nth-child(6)::before { content: "Negocio"; }
  .dashboard-page .sidebar-nav > .nav-item:nth-child(10)::before { content: "Cuenta"; }
  .dashboard-page .nav-item { min-height: 40px; padding: 0 11px; gap: 10px; border-radius: 10px; font-size: 14px; font-weight: 450; }
  .dashboard-page .nav-item > :where(i,.ph,.ph-fill) { width: 19px; display: inline-grid; place-items: center; flex: none; font-size: 19px; }
  .dashboard-page .nav-item:hover { background: rgba(118,118,128,.07); }
  .dashboard-page .nav-item.active { color: #0071e3; background: rgba(0,113,227,.08); box-shadow: none; font-weight: 550; }
  .dashboard-page .pending-nav-count { min-width: 18px; height: 18px; padding-inline: 5px; font-size: 9px; }
  .dashboard-page .sidebar-bottom .nav-item { color: #6e6e73; }
}

/* Creation actions — one Apple-style component ------------------------- */
.dashboard-page :where(
  #new-contact-button,
  #add-knowledge-button,
  #new-appointment-button,
  #new-order,
  #contact-save-button,
  .knowledge-save-button,
  .appointment-dialog .dialog-primary,
  .order-dialog .primary-action[type="submit"]
) {
  min-width: 0;
  min-height: 40px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  border: 1px solid #0071e3;
  border-radius: 10px;
  background: #0071e3;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 10px rgba(0,113,227,.12);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .08s ease;
}
.dashboard-page :where(
  #new-contact-button,
  #add-knowledge-button,
  #new-appointment-button,
  #new-order,
  #contact-save-button,
  .knowledge-save-button,
  .appointment-dialog .dialog-primary,
  .order-dialog .primary-action[type="submit"]
) > :where(i,.ph,.ph-light,.ph-fill) { font-size: 17px; font-weight: 500; }
.dashboard-page :where(
  #new-contact-button,
  #add-knowledge-button,
  #new-appointment-button,
  #new-order,
  #contact-save-button,
  .knowledge-save-button,
  .appointment-dialog .dialog-primary,
  .order-dialog .primary-action[type="submit"]
):hover {
  border-color: #0077ed;
  background: #0077ed;
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 5px 12px rgba(0,113,227,.14);
  transform: none;
}
.dashboard-page :where(
  #new-contact-button,
  #add-knowledge-button,
  #new-appointment-button,
  #new-order,
  #contact-save-button,
  .knowledge-save-button,
  .appointment-dialog .dialog-primary,
  .order-dialog .primary-action[type="submit"]
):active { border-color: #0068d1; background: #0068d1; box-shadow: 0 1px 3px rgba(0,0,0,.08); transform: scale(.98); }
.dashboard-page :where(
  #new-contact-button,
  #add-knowledge-button,
  #new-appointment-button,
  #new-order,
  #contact-save-button,
  .knowledge-save-button,
  .appointment-dialog .dialog-primary,
  .order-dialog .primary-action[type="submit"]
):focus-visible { outline: 3px solid rgba(0,113,227,.22); outline-offset: 2px; }
.dashboard-page :where(
  #new-contact-button,
  #add-knowledge-button,
  #new-appointment-button,
  #new-order,
  #contact-save-button,
  .knowledge-save-button,
  .appointment-dialog .dialog-primary,
  .order-dialog .primary-action[type="submit"]
):disabled { opacity: .48; box-shadow: none; cursor: not-allowed; transform: none; }

/* IDs intentionally add enough specificity to replace older page styles. */
.dashboard-page #new-contact-button,
.dashboard-page #add-knowledge-button,
.dashboard-page #new-appointment-button,
.dashboard-page #new-order {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #0071e3;
  border-radius: 10px;
  background: #0071e3;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 10px rgba(0,113,227,.12);
  font-size: 13px;
  transform: none;
}
.dashboard-page #new-contact-button:hover,
.dashboard-page #add-knowledge-button:hover,
.dashboard-page #new-appointment-button:hover,
.dashboard-page #new-order:hover { border-color: #0077ed; background: #0077ed; box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 5px 12px rgba(0,113,227,.14); transform: none; }
.dashboard-page #new-contact-button:active,
.dashboard-page #add-knowledge-button:active,
.dashboard-page #new-appointment-button:active,
.dashboard-page #new-order:active { border-color: #0068d1; background: #0068d1; box-shadow: 0 1px 3px rgba(0,0,0,.08); transform: scale(.98); }

/* Payments ------------------------------------------------------------- */
.payments-page{--payments-line:rgba(60,60,67,.11);background:#f5f5f7}.payments-section-title h1{margin:0;color:#171f31;font-size:var(--text-lg);letter-spacing:-.55px}.payments-section-title p{margin:4px 0 0;color:#6e6e73;font-size:var(--text-xs)}.payments-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.payments-content{padding:24px clamp(18px,3vw,42px) 42px!important}.payments-heading{margin-bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.payments-heading h2{margin:0 0 5px;color:#11131a;font-size:clamp(28px,3vw,36px);letter-spacing:-1.5px;line-height:1.05}.payments-heading p{margin:0;color:#667085;font-size:var(--text-sm)}.payments-configure{min-height:40px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;color:#263349;border:1px solid #dce3ec;border-radius:10px;background:rgba(255,255,255,.9);font-size:var(--text-xs);font-weight:600}.payments-gateway{min-height:92px;margin-bottom:12px;padding:15px 17px;display:flex;align-items:center;gap:14px;border:1px solid var(--payments-line);border-radius:16px;background:rgba(255,255,255,.92)}.payments-gateway>span{width:48px;height:48px;display:grid;place-items:center;flex:none;color:#0874e7;border-radius:14px;background:#eaf4ff;font-size:var(--icon-lg)}.payments-gateway>div{min-width:0;flex:1}.payments-gateway strong{color:#172033;font-size:var(--text-sm)}.payments-gateway p{max-width:680px;margin:5px 0 0;color:#667085;font-size:var(--text-xs);line-height:1.45}.payments-gateway>a{min-height:37px;padding:0 12px;display:inline-flex;align-items:center;color:#0874e7;border:1px solid #cfe1f7;border-radius:9px;background:#f5faff;font-size:var(--text-xs);font-weight:600;white-space:nowrap}
.payments-metrics{margin-bottom:12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.payments-metrics article{min-width:0;min-height:96px;padding:14px;display:flex;align-items:flex-start;gap:10px;border:1px solid var(--payments-line);border-radius:15px;background:rgba(255,255,255,.94);box-shadow:0 6px 20px rgba(0,0,0,.025)}.payments-metrics article>span{width:40px;height:40px;display:grid;place-items:center;flex:none;border-radius:12px;font-size:var(--icon-md)}.payments-metrics .green{color:#0b9b57;background:#e8f8ef}.payments-metrics .orange{color:#db7d00;background:#fff3dd}.payments-metrics .red{color:#ec3d4a;background:#ffecee}.payments-metrics .blue{color:#0874e7;background:#eaf4ff}.payments-metrics small{display:block;color:#667085;font-size:11px}.payments-metrics strong{margin-top:7px;display:block;overflow:hidden;color:#172033;font-size:20px;letter-spacing:-.4px;text-overflow:ellipsis;white-space:nowrap}.payments-metrics em{margin-top:5px;display:block;color:#718096;font-size:10px;font-style:normal}
.payments-workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.72fr);gap:12px;align-items:start}.payments-list-card,.payment-detail{min-width:0;overflow:hidden;border:1px solid var(--payments-line);border-radius:17px;background:rgba(255,255,255,.94);box-shadow:0 7px 22px rgba(0,0,0,.03)}.payments-tabs{padding:7px 8px;display:flex;gap:3px;overflow-x:auto;border-bottom:1px solid rgba(60,60,67,.07);scrollbar-width:none}.payments-tabs button{min-height:30px;padding:0 10px;display:flex;align-items:center;gap:6px;flex:none;color:#59677e;border:0;border-radius:8px;background:transparent;cursor:pointer;font-size:10px}.payments-tabs button.active{color:#0874e7;background:#eaf4ff}.payments-tabs b{min-width:18px;padding:2px 5px;border-radius:999px;background:rgba(100,116,139,.09);font-size:9px}.payments-toolbar{padding:10px 12px;display:grid;grid-template-columns:minmax(200px,1fr) 180px;gap:8px;border-bottom:1px solid rgba(60,60,67,.07)}.payments-toolbar label{min-height:39px;padding:0 11px;display:flex;align-items:center;gap:8px;border:1px solid #dfe4ec;border-radius:10px;background:#fafbfc}.payments-toolbar input,.payments-toolbar select{width:100%;min-width:0;color:#28364d;border:0;outline:0;background:transparent;font:inherit;font-size:11px}.payments-toolbar>select{padding:0 9px;border:1px solid #dfe4ec;border-radius:10px;background:#fafbfc}.payments-table-head,.payment-row{display:grid;grid-template-columns:90px minmax(160px,1.3fr) 100px minmax(100px,.8fr) 92px 20px;align-items:center;gap:9px}.payments-table-head{min-height:38px;padding:0 12px;color:#718096;border-bottom:1px solid rgba(60,60,67,.08);font-size:10px}.payment-row{min-height:66px;padding:7px 12px;color:#28364d;border-bottom:1px solid rgba(60,60,67,.07);cursor:pointer;font-size:11px}.payment-row:hover{background:#f8fbff}.payment-row.selected{background:#edf5ff;box-shadow:inset 3px 0 #0878ed}.payment-row>time{color:#657187;font-size:10px}.payment-customer{min-width:0;display:flex;align-items:center;gap:9px}.payment-customer>span,.payment-client>span{width:36px;height:36px;display:grid;place-items:center;flex:none;color:#33506f;border-radius:50%;background:#e7f2ff;font-weight:600}.payment-customer>div{min-width:0}.payment-customer strong,.payment-customer small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.payment-customer small{margin-top:3px;color:#718096;font-size:10px}.payment-method{overflow:hidden;color:#657187;text-overflow:ellipsis;white-space:nowrap}.payment-status{width:fit-content;padding:5px 8px;border-radius:999px;font-size:10px;white-space:nowrap}.payment-status.paid{color:#078649;background:#e5f8ed}.payment-status.pending{color:#b86c00;background:#fff3dd}.payment-status.overdue{color:#cf3744;background:#ffecee}.payment-status.refunded{color:#657187;background:#eef0f3}.payments-empty{min-height:290px;padding:30px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#718096;text-align:center}.payments-empty i{font-size:36px}.payments-empty strong{margin-top:10px;color:#28364d}.payments-empty span{margin-top:5px;font-size:var(--text-xs)}
.payment-detail{position:sticky;top:88px}.payment-detail>header{padding:15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(60,60,67,.08)}.payment-detail header small{color:#0874e7;font-size:9px;font-weight:700}.payment-detail header h3{margin:4px 0 0;color:#172033;font-size:var(--text-sm)}.payment-client{padding:14px 15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(60,60,67,.08)}.payment-client>div{min-width:0}.payment-client strong,.payment-client small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.payment-client strong{font-size:var(--text-xs)}.payment-client small{margin-top:3px;color:#718096;font-size:10px}.payment-client a{margin-left:auto;padding:7px 9px;color:#0874e7;border:1px solid #d6e6f8;border-radius:8px;font-size:10px;white-space:nowrap}.payment-detail dl{margin:0;padding:10px 15px 15px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:11px;color:#657187;font-size:11px}.payment-detail dd{margin:0;color:#28364d;text-align:right}.payment-receipt{padding:13px 15px;border-top:1px solid rgba(60,60,67,.08)}.payment-receipt h4{margin:0 0 9px;font-size:var(--text-xs)}.payment-receipt img{width:100%;max-height:250px;object-fit:contain;border-radius:10px;background:#f4f5f7}.payment-receipt a{min-height:36px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:7px;color:#0874e7;border:1px solid #d6e6f8;border-radius:9px;font-size:10px}.payment-detail>footer{padding:12px 15px;display:flex;gap:8px;border-top:1px solid rgba(60,60,67,.08)}.payment-detail>footer :is(a,button){min-height:38px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1;border-radius:9px;font-size:10px}.payment-detail-empty{min-height:390px;padding:30px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#718096;text-align:center}.payment-detail-empty i{font-size:38px}.payment-detail-empty strong{margin-top:12px;color:#28364d}.payment-detail-empty p{max-width:230px;margin:6px 0 0;font-size:var(--text-xs);line-height:1.45}.payments-message{min-height:18px;margin:9px 2px 0;color:#587086;font-size:var(--text-xs)}
@media(max-width:1180px){.payments-workspace{grid-template-columns:1fr}.payment-detail{position:static}.payments-metrics{grid-template-columns:1fr 1fr}}@media(max-width:760px){.payments-content{padding:16px 14px 100px!important}.payments-heading{align-items:flex-start;flex-direction:column}.payments-heading h2{font-size:var(--text-xl)}.payments-gateway{align-items:flex-start}.payments-gateway>a{display:none}.payments-toolbar{grid-template-columns:1fr}.payments-table-head{display:none}.payment-row{grid-template-columns:80px minmax(140px,1fr) 90px 90px}.payment-row>.payment-method,.payment-row>.ph-dots-three{display:none}}@media(max-width:520px){.payments-metrics{grid-template-columns:1fr}.payment-row{grid-template-columns:minmax(0,1fr) auto}.payment-row>time,.payment-row>strong{display:none}}

/* Pagos: datos de cobro, comprobante y estados nuevos (review, cancelled). */
.payments-gateway>button{min-height:37px;padding:0 12px;display:inline-flex;align-items:center;color:#0874e7;border:1px solid #cfe1f7;border-radius:9px;background:#f5faff;font:inherit;font-size:var(--text-xs);font-weight:600;white-space:nowrap;cursor:pointer}
.payments-configure{cursor:pointer;font-family:inherit}
.payment-methods-field{margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;border:0}
.payment-methods-field legend{margin-bottom:8px;padding:0;color:#344056;font-size:var(--text-xs);font-weight:600}
.payment-methods-field label,.payment-auto-send{display:inline-flex;align-items:center;gap:8px;color:#28364d;font-size:var(--text-xs)}
.order-form-grid .payment-methods-field input,.order-form-grid .payment-auto-send input{width:16px;min-height:16px;height:16px;padding:0;accent-color:#0874e7}
.payment-status.review{color:#8a5a00;background:#fff4d6}
.payment-status.cancelled{color:#6b7280;background:#f1f2f4}
.payment-receipt img{max-height:320px;object-fit:contain;background:#f5f5f7}
.payment-receipt-loading{color:#6b7280;font-size:var(--text-xs)}
.pending-kind.payment{color:#8a5a00;background:#fff4d6}.pending-type-label.payment{color:#8a5a00;background:#fff4d6}

/* Conversaciones: archivos del cliente (fotos, audios, videos, stickers, documentos). */
.message-bubble.has-media{display:flex;flex-direction:column;gap:6px}
.message-media img{display:block;max-width:min(280px,100%);max-height:320px;border-radius:12px;object-fit:cover;background:#f2f3f5}
.message-media-sticker img{max-width:140px;max-height:140px;object-fit:contain;background:transparent}
.message-media audio{width:min(280px,72vw);height:40px}
.message-media video{display:block;max-width:min(300px,100%);max-height:320px;border-radius:12px;background:#000}
.message-media-file{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:12px;background:rgba(15,23,42,.05);color:#0874e7;font-weight:600;text-decoration:none;word-break:break-word}
.message-media-loading,.message-media-heavy{color:#6b7280;font-size:13px;font-style:italic}
.message-transcript{font-style:italic;color:#4b5563}
.message-copy[hidden]{display:none}
.thread-load-older{display:block;margin:6px auto 14px;padding:7px 14px;border:1px solid rgba(15,23,42,.1);border-radius:999px;background:rgba(255,255,255,.9);color:#0874e7;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.thread-load-older:disabled{color:#9ca3af;cursor:default}
.conversation-load-more{display:block;width:calc(100% - 24px);margin:10px 12px 16px;padding:10px;border:1px dashed rgba(15,23,42,.14);border-radius:14px;background:transparent;color:#0874e7;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.conversation-load-more:disabled{color:#9ca3af;cursor:default}
.topic-gap{margin-left:6px;padding:1px 6px;border-radius:999px;background:#fff4d6;color:#8a5a00;font-size:10px;font-weight:600;white-space:nowrap}
.topic-gap-hint{display:block!important;margin-top:4px;font-size:12px}
.topic-gap-hint a{color:#0874e7;font-weight:600;text-decoration:none}
.message-contact-card{display:flex;align-items:center;gap:10px;min-width:230px;padding:10px 12px;border-radius:12px;background:rgba(15,23,42,.05)}
.message-contact-avatar{display:grid;flex:0 0 38px;width:38px;height:38px;place-items:center;border-radius:50%;font-size:13px;font-weight:700}
.message-contact-card>div{flex:1;min-width:0}
.message-contact-card strong{display:block;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.message-contact-card small{color:#6b7280;font-size:12px}
.message-contact-card button{flex:0 0 auto;padding:6px 10px;border:1px solid rgba(8,116,231,.25);border-radius:999px;background:#fff;color:#0874e7;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.message-contact-card button:disabled{color:#16a05a;border-color:rgba(22,160,90,.3);cursor:default}
.message-quote{display:block;max-width:320px;margin-bottom:6px;padding:6px 10px;border-left:3px solid #0874e7;border-radius:8px;background:rgba(15,23,42,.05);font-size:12px;line-height:1.35}
.message-quote.is-customer{border-left-color:#16a05a}
.message-quote strong{display:block;margin-bottom:2px;color:#0874e7;font-size:11px;font-weight:700}
.message-quote.is-customer strong{color:#16a05a}
.message-quote span{display:-webkit-box;overflow:hidden;color:#4b5563;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wallpaper-menu.in-drawer{position:static;width:auto;margin-top:16px;padding:8px 0 0;border:0;border-top:1px solid rgba(60,60,67,.09);border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* Elementos que existen solo en celular (su diseño esta en mobile.css). */
@media (min-width: 768px) {
  .solo-movil {
    display: none !important;
  }
}