:root {
  font-family: Poppins, Arial, Helvetica, sans-serif;
  color: #111410;
  background: #f7f8f5;
  font-synthesis: none;
  --lime: #b5e600;
  --muted: #697066;
  --line: #e4e8df;
  --button-gap: 12px; /* one gap for every group of buttons */
  /* One button shape for the whole app: subtle rounding, never pill or square.
     Round on purpose (not buttons): avatars, toggles, pills/badges, circular
     icon-only buttons, spinners. */
  --btn-radius: 8px;
  --btn-radius-sm: 6px; /* .small buttons */
  --btn-radius-lg: 10px; /* large / CTA buttons (max) */
  --field-radius: 8px; /* inputs, selects and textareas next to buttons */
  /* Spacing scale (superadmin first; reuse for new screens). */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  outline-offset: 4px;
}
button,
a {
  touch-action: manipulation;
}
button,
.btn {
  border: 1px solid var(--line);
  background: white;
  border-radius: var(--btn-radius);
  padding: 12px 20px;
  cursor: pointer;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
button:hover,
.btn:hover {
  filter: brightness(0.96);
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
/* Large / call-to-action buttons: a touch more rounding, never more than 10px. */
.hero .actions .btn,
.hero .actions button,
.cta .btn,
.how-copy .btn,
.nav-start,
[data-plan-choose]:not(.small) {
  border-radius: var(--btn-radius-lg);
}
.primary {
  background: var(--lime);
  border-color: var(--lime);
}
.dark {
  background: #141810;
  color: white;
  border-color: #141810;
}
a {
  color: inherit;
}
.brand {
  font-weight: 900;
  letter-spacing: -1px;
  font-size: 27px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand img {
  width: 170px;
  height: 40px;
  object-fit: contain;
}
.brand .fallback {
  display: none;
}
.brand.failed img {
  display: none;
}
.brand.failed .fallback {
  display: block;
}
.brand em {
  color: #8ebc00;
  font-style: normal;
}
h1,
h2,
h3 {
  letter-spacing: -0.045em;
  line-height: 1.05;
}
h1 {
  font-size: clamp(42px, 5.4vw, 78px);
  font-weight: 800;
  margin: 22px 0;
}
h2 {
  font-size: 34px;
  margin: 10px 0 20px;
}
h3 {
  font-size: 21px;
}
p {
  line-height: 1.65;
  color: var(--muted);
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-size: 11px;
  font-weight: 800;
  color: #62695c;
}
.pill {
  display: inline-block;
  border-radius: 50px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  background: #eff6d9;
  color: #4b6400;
}
.muted {
  color: var(--muted);
  font-size: 13px;
}
.landing {
  background: white;
}
.landing .site-nav {
  max-width: 1320px;
  padding: 28px 30px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.links {
  display: flex;
  gap: 24px;
  font-size: 13px;
  font-weight: 700;
  align-items: center;
}
.links a {
  text-decoration: none;
}
.hero {
  max-width: 1320px;
  margin: 65px auto 70px;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  align-items: center;
}
.hero p {
  font-size: 18px;
  max-width: 550px;
}
.lime {
  color: #9fcf00;
}
.actions {
  display: flex;
  gap: var(--button-gap);
  flex-wrap: wrap;
  margin: 25px 0;
}
.preview {
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 24px 70px #2c3c0a10;
  overflow: hidden;
  background: #fafbf8;
  transform: rotate(-1deg);
}
.preview-top {
  background: white;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
}
.preview-body {
  padding: 25px;
}
.bubble {
  background: #edf6ce;
  border-radius: 18px 18px 4px 18px;
  padding: 17px;
  margin: 18px 0 18px 40px;
  line-height: 1.6;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bubble.in {
  background: #f0f2ed;
  border-radius: 18px 18px 18px 4px;
  margin: 18px 40px 18px 0;
}
.bubble small {
  display: block;
  font-size: 10px;
  color: #71776a;
  margin-top: 8px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.stat {
  padding: 23px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 22px;
}
.stat strong {
  display: block;
  font-size: 32px;
  letter-spacing: -1px;
  margin: 10px 0;
}
.section {
  max-width: 1250px;
  margin: auto;
  padding: 65px 30px;
}
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 25px;
}
.feature-icon {
  width: 42px;
  height: 42px;
  background: #eff6d9;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 22px;
}
.cta {
  background: #151a11;
  color: white;
  border-radius: 32px;
  padding: 40px;
}
.cta p {
  color: #cad1c1;
}
.auth {
  max-width: 460px;
  margin: 60px auto;
  padding: 30px;
}
.auth .brand {
  margin-bottom: 35px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 700;
}
input,
textarea,
select {
  width: 100%;
  border: 1px solid #dce2d4;
  border-radius: var(--field-radius);
  padding: 12px;
  background: white;
  color: #20261a;
}
textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}
.shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  background: white;
  border-right: 1px solid var(--line);
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.sidebar .brand {
  padding: 0 10px;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar nav a {
  padding: 13px 16px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  color: #3d4436;
}
.sidebar nav a:hover {
  background: #f4f8e8;
}
/* Icon slot: fixed width so every label starts on the same line. */
.sidebar nav a > span {
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  color: inherit;
}
/* Items without an icon: the empty icon slot must not push the label off-centre. */
.sidebar nav a span:empty {
  display: none;
}
.sidebar nav a.active {
  background: #eef7cf;
  color: #1c2412;
}
.sidebar .bottom {
  margin-top: auto;
  font-size: 12px;
}
/* Sidebar workspace card: tenant, app version and release notes. */
.workspace-card {
  background: linear-gradient(180deg, #fbfdf6 0%, #ffffff 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    0 1px 2px #11141008,
    0 6px 18px #1114100a;
}
.workspace-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.workspace-mark {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px #11141010;
}
.workspace-mark img {
  display: block;
  width: 22px;
  height: 22px;
}
.workspace-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.workspace-name {
  font-size: 14px;
  font-weight: 700;
  color: #111410;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workspace-role {
  color: var(--muted);
  font-size: 11px;
}
.workspace-app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.workspace-product {
  font-size: 12px;
  font-weight: 600;
  color: #2b3127;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.version-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 100px;
  background: #eef7cf;
  color: #3d5200;
  border: 1px solid #d9eda0;
  font-variant-numeric: tabular-nums;
}
button.release-notes-link {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: var(--btn-radius-sm);
  border: 1px solid var(--line);
  background: white;
  font-size: 12px;
  font-weight: 600;
  color: #111410;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  line-height: 1.2;
  transition:
    background 0.15s,
    border-color 0.15s;
}
button.release-notes-link:hover,
button.release-notes-link:focus-visible {
  background: #eef7cf;
  border-color: #cfe58a;
}
button.release-notes-link span {
  color: #5b7a00;
}
/* Release notes dialog. */
.release-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #11141066;
  display: grid;
  place-items: center;
  padding: 20px;
}
.release-dialog {
  background: white;
  border-radius: 22px;
  width: min(560px, 100%);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px #11141033;
  overflow: hidden;
}
.release-dialog:focus {
  outline: none;
}
.release-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.release-dialog-head h2 {
  margin: 6px 0 4px;
  font-size: 22px;
  line-height: 1.2;
}
.release-dialog-head p {
  margin: 0;
}
button.release-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
}
button.release-close:hover,
button.release-close:focus-visible {
  background: #eef7cf;
}
.release-list {
  list-style: none;
  margin: 0;
  padding: 8px 24px 24px;
  overflow-y: auto;
}
.release {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.release:last-child {
  border-bottom: 0;
}
.release-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.release-head h3 {
  margin: 0;
  font-size: 16px;
}
.release-head time {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}
.release-current {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--lime);
  color: #151512;
  border-radius: 100px;
  padding: 3px 8px;
}
.release ul {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #2b3127;
}
.release ul li + li {
  margin-top: 4px;
}
.main {
  min-width: 0;
}
.topbar {
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: white;
}
.avatar {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #edf4d5;
  font-weight: bold;
}
.content {
  padding: 28px 32px;
  max-width: 1450px;
  margin: auto;
}
.heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin-bottom: 22px;
}
.heading h1 {
  font-size: 32px;
  margin: 0 0 10px;
}
.banner {
  padding: 12px 18px;
  border: 1px solid #dce9bb;
  background: #f3f8e8;
  border-radius: 14px;
  font-size: 12px;
  margin-bottom: 24px;
  line-height: 1.5;
}
/* Channel filters above the inbox: wrap on desktop, scroll on phones. */
.inbox-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.inbox-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--btn-radius);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  background: white;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.inbox-filter.active {
  background: var(--lime);
  border-color: var(--lime);
}
.inbox-count {
  display: inline-block;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  background: #eff6d9;
  color: #4b6400;
}
.inbox-filter.active .inbox-count {
  background: #141810;
  color: white;
}
.threads {
  overflow-anchor: none;
  max-height: 75vh;
  overflow-y: auto;
}
.inbox {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: white;
  overflow: hidden;
  min-height: 540px;
}
.threads {
  border-right: 1px solid var(--line);
  padding: 14px;
}
.thread {
  display: block;
  text-align: left;
  border-radius: 15px;
  width: 100%;
  padding: 16px;
  margin-bottom: 8px;
  border-color: transparent;
}
.thread.active {
  background: #f0f7db;
  border-color: #deebb9;
}
.thread small {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  color: var(--muted);
}
.chat {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.chat-head {
  padding: 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}
.chat-head h3 {
  margin: 0 0 7px;
}
.messages {
  padding: 15px 25px;
  max-height: 420px;
  overflow: auto;
  flex: 1;
}
.messages-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.messages {
  overflow-anchor: none;
}
.new-messages {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 7px 14px;
  font-size: 12px;
  background: #141810;
  color: white;
  border-color: #141810;
  box-shadow: 0 6px 18px rgba(20, 24, 16, 0.18);
  z-index: 2;
}
.new-messages[hidden] {
  display: none;
}
.inbox-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.inbox-tool[aria-pressed="true"] {
  border-color: #deebb9;
  background: #f0f7db;
}
.thread-name {
  display: block;
}
.compose {
  padding: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: var(--button-gap);
}
.compose input {
  min-width: 0;
}
.compose-hint {
  margin: 0;
  padding: 10px 18px 0;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}
.compose-hint:not([hidden]) + .compose {
  border-top: 0;
}
.compose-hint[data-window="closed"] {
  color: var(--danger, #b42318);
}
.empty {
  padding: 60px 25px;
  text-align: center;
  margin: auto;
  color: var(--muted);
  line-height: 1.7;
}
.formgrid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 25px;
}
.step {
  font-size: 11px;
  color: #7d9c2b;
  letter-spacing: 1px;
  margin: 15px 0;
}
.lead-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.lead-grid h3 {
  margin: 4px 0 10px;
}
.lead-grid textarea {
  min-height: 60px;
}
.row {
  display: flex;
  gap: var(--button-gap);
  align-items: center;
  flex-wrap: wrap;
}
.plan strong {
  font-size: 30px;
  display: block;
  margin: 20px 0;
}
#notice {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px));
  background: #151b10;
  color: white;
  border-radius: 15px;
  padding: 15px 24px;
  z-index: 100;
  box-shadow: 0 8px 40px #0002;
  display: none;
}
#notice.visible {
  display: block;
}
.error {
  background: #fff1ed;
  border: 1px solid #f0cec3;
  color: #873e2a;
  padding: 14px;
  border-radius: 12px;
  margin-bottom: 18px;
}
.wide {
  width: 100%;
}
.table-wrap {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
th,
td {
  padding: 15px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
button.small,
.btn.small {
  font-size: 12px;
  padding: 9px 12px;
  border-radius: var(--btn-radius-sm);
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  margin-top: 22px;
}
ol {
  padding-left: 22px;
  line-height: 2.2;
}
.logo-note {
  font-size: 10px;
  color: #777;
}
@media (max-width: 1000px) {
  .hero {
    gap: 22px;
  }
  .shell {
    grid-template-columns: 190px 1fr;
  }
  .sidebar {
    padding: 24px 10px;
  }
  .content {
    padding: 24px 20px;
  }
  .inbox {
    grid-template-columns: 230px 1fr;
  }
  .lead-grid {
    grid-template-columns: 1fr 1fr;
  }
  .brand img {
    width: 150px;
  }
  .formgrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .hero {
    grid-template-columns: 1fr;
    margin: 30px auto;
    padding: 0 22px;
  }
  .hero h1 {
    font-size: 50px;
  }
  .hero p {
    font-size: 16px;
  }
  .preview {
    margin-top: 12px;
  }
  .features,
  .stats,
  .dashboard-grid,
  .lead-grid {
    grid-template-columns: 1fr;
  }
  .section {
    padding: 40px 22px;
  }
  .shell {
    display: block;
  }
  .sidebar {
    padding: 15px;
    border: 0;
    border-bottom: 1px solid var(--line);
    gap: 15px;
  }
  .sidebar nav {
    flex-direction: row;
    overflow: auto;
    gap: 5px;
  }
  .sidebar nav a {
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 12px;
    flex: 0 0 auto;
    gap: 7px;
  }
  .sidebar nav a > span {
    flex-basis: 16px;
  }
  .sidebar nav a span svg {
    width: 16px;
    height: 16px;
  }
  /* Mobile: compact one-row workspace card under the menu. */
  .sidebar .workspace-card {
    margin-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 12px;
    gap: 8px 12px;
    border-radius: 14px;
  }
  .workspace-card .workspace-id {
    flex: 1 1 140px;
  }
  .workspace-card .workspace-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .workspace-card .workspace-mark img {
    width: 18px;
    height: 18px;
  }
  .workspace-card .workspace-role {
    display: none;
  }
  .workspace-card .workspace-app {
    border-top: 0;
    padding-top: 0;
    flex: 0 0 auto;
  }
  .workspace-card button.release-notes-link {
    width: auto;
    flex: 1 0 100%;
    justify-content: center;
  }
  .release-modal {
    padding: 0;
    align-items: end;
  }
  .release-dialog {
    width: 100%;
    max-height: 88vh;
    border-radius: 22px 22px 0 0;
  }
  .release-dialog-head,
  .release-list {
    padding-left: 18px;
    padding-right: 18px;
  }
  .topbar {
    padding: 15px 20px;
    font-size: 12px;
  }
  .content {
    padding: 22px 15px;
  }
  .heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .heading h1 {
    font-size: 29px;
  }
  .inbox {
    grid-template-columns: 1fr;
  }
  .inbox-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .threads {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    overflow: auto;
  }
  .thread {
    min-width: 170px;
    width: auto;
    margin: 0;
  }
  .chat {
    min-height: 380px;
  }
  .messages {
    padding: 10px 15px;
  }
  .chat-head {
    padding: 16px;
  }
  .compose {
    padding: 12px;
  }
  .compose button {
    padding: 10px 12px;
  }
  .auth {
    margin: 20px auto;
  }
  .stats {
    gap: 10px;
  }
  .stat {
    padding: 18px;
  }
  .stat strong {
    font-size: 27px;
  }
  .bubble {
    margin-left: 20px;
  }
  .bubble.in {
    margin-right: 20px;
  }
  .cta {
    padding: 28px;
  }
  .heading .actions {
    margin: 0;
  }
  .card {
    padding: 20px;
  }
}

/* «Asistente de IA»: summary cards (collapsed) that open one block. */
.ai-blocks-intro {
  margin: 0 0 14px;
}
.ai-block {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  margin: 0 0 12px;
  overflow: hidden;
}
.ai-block.open {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(181, 230, 0, 0.18);
}
button.ai-block-head {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr auto 18px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111410;
  text-align: left;
  min-height: 64px;
  cursor: pointer;
}
button.ai-block-head:hover,
button.ai-block-head:focus-visible {
  background: #f8fbea;
}
.ai-block-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f4f6f1;
  font-size: 18px;
}
.ai-block.open .ai-block-icon {
  background: var(--lime);
}
.ai-block-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ai-block-text b {
  font-size: 16px;
}
.ai-block-text small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}
.ai-block-status {
  white-space: nowrap;
  font-size: 12px;
}
.ai-block-chevron {
  font-size: 22px;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.ai-block.open .ai-block-chevron {
  transform: rotate(90deg);
}
.ai-block-body {
  padding: 4px 16px 4px;
  border-top: 1px solid var(--line);
}
.ai-block-body > .welcome-settings:last-child {
  margin-bottom: 16px;
}
.ai-rules {
  margin: 0 0 12px;
  padding-left: 18px;
}
.cap-max {
  margin: 0 0 12px;
}
@media (max-width: 640px) {
  button.ai-block-head {
    grid-template-columns: 36px 1fr 14px;
  }
  .ai-block-status {
    grid-column: 2 / 3;
    justify-self: start;
  }
}
.welcome-settings {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  margin: 0 0 22px;
  background: #fafcf6;
}
.switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.switch-label input {
  appearance: none;
  flex: 0 0 48px;
  width: 48px;
  height: 28px;
  min-height: 28px;
  border: 1px solid #89927f;
  border-radius: 30px;
  padding: 3px;
  background: #dce1d5;
  cursor: pointer;
}
.switch-label input::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px #0003;
  transition: transform 0.15s;
}
.switch-label input:checked {
  background: var(--lime);
  border-color: #779e00;
}
.switch-label input:checked::before {
  transform: translateX(19px);
}
.footer-preview {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.footer-preview p {
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ig-card,
.ig-operations {
  margin-bottom: 24px;
}
.ig-state {
  flex-shrink: 0;
}
.ig-state.connected {
  background: #d7ff6b;
}
.ig-state.error {
  background: #ffe3dc;
}
.ig-connect-form {
  max-width: 620px;
  margin-top: 24px;
}
.ig-account {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid #e4e6df;
  padding: 20px 0;
}
.ig-account h3,
.ig-account p {
  margin: 0 0 8px;
}
.ig-requirements,
.ig-review {
  background: #f5f7ef;
  padding: 22px;
  border-radius: 18px;
  margin: 20px 0;
}
.ig-requirements li {
  margin-bottom: 10px;
}
.ig-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--button-gap);
  margin-top: 20px;
}
.ig-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ig-metrics div {
  background: #f5f7ef;
  padding: 18px;
  border-radius: 16px;
}
.ig-metrics span,
.ig-metrics strong {
  display: block;
  overflow-wrap: anywhere;
}
.ig-metrics strong {
  margin-top: 8px;
  font-size: 14px;
}
.ig-outbox li {
  padding: 8px 0;
  overflow-wrap: anywhere;
}
#ig-feedback:empty {
  display: none;
}
#ig-feedback {
  padding: 12px 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ig-review .button-group {
  margin-top: 8px;
}
/* Buttons in a form row (e.g. assistant preview) get the same gap. */
form .button-group {
  margin-top: 4px;
}
@media (max-width: 700px) {
  .ig-account {
    align-items: flex-start;
    flex-direction: column;
  }
  .ig-metrics {
    grid-template-columns: 1fr;
  }
  .ig-card .heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .ig-toolbar button,
  .ig-review .button-group button {
    width: 100%;
  }
  .ig-requirements,
  .ig-review {
    padding: 16px;
  }
}

.agency-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  align-items: end;
}
.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.account-card {
  min-width: 0;
  overflow-wrap: anywhere;
}
.account-side {
  display: grid;
  gap: 24px;
  min-width: 0;
}
.account-security {
  grid-column: 1 / -1;
}
.account-grid + .account-security {
  margin-top: 24px;
}
.account-security form {
  max-width: 540px;
}
.account-delete-ack {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  margin: 18px 0;
  padding: 10px 0;
  font-size: 13px;
  line-height: 1.6;
  cursor: pointer;
}
.account-delete-ack input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  accent-color: var(--lime);
}
.account-delete-ack input[type="checkbox"]:focus-visible {
  outline: 2px solid currentColor;
}
.account-delete-ack span {
  min-width: 0;
}
.account-image-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0 28px;
}
.account-image-row > div {
  min-width: 0;
  flex: 1;
}
.account-avatar {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 20px;
  flex-shrink: 0;
}
.account-initials {
  display: grid;
  place-items: center;
  background: #edf4d8;
  font-weight: 700;
  font-size: 24px;
}
.account-card input[readonly] {
  background: #f5f7ef;
}
.password-control {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.password-control input {
  flex: 1;
  min-width: 0;
}
.password-control .password-toggle,
.account-card .password-toggle {
  width: auto;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 12px;
  white-space: nowrap;
}
.account-card input[type="file"] {
  max-width: 100%;
}
@media (max-width: 700px) {
  .account-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .account-side {
    gap: 20px;
  }
  .account-security {
    grid-column: auto;
  }
  .account-grid + .account-security {
    margin-top: 20px;
  }
  .account-card button {
    width: 100%;
    white-space: normal;
  }
  .account-image-row {
    align-items: flex-start;
    gap: 12px;
  }
  .account-avatar {
    width: 64px;
    height: 64px;
  }
}
.agency-actions {
  margin-top: 20px;
  align-items: start;
}
.agency-actions form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.agency-actions form > h3,
.agency-actions form > p,
.agency-actions .field {
  margin: 0;
}
.agency-actions .agency-confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.agency-actions button {
  align-self: flex-start;
  margin: 0;
}
.agency-actions input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 4px 0 0;
}
@media (max-width: 700px) {
  .agency-actions button {
    width: 100%;
  }
}
/* Login / registro con el diseño de la web de producción (beartflow.app). */
.auth-shell {
  min-height: 100vh;
  margin: 0;
  padding: 26px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      circle at 54% 18%,
      rgba(196, 230, 84, 0.16),
      transparent 35%
    ),
    linear-gradient(180deg, #fbfcf8 0%, #f4f7ef 100%);
  color: #10120f;
}
.auth-layout {
  width: min(1440px, 100%);
  min-height: min(860px, calc(100vh - 52px));
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(390px, 0.72fr);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(24, 30, 20, 0.08);
  border-radius: 32px;
  box-shadow: 0 34px 90px rgba(38, 47, 29, 0.1);
  overflow: hidden;
}
.auth-hero {
  position: relative;
  min-width: 0;
  padding: 46px 56px 34px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(
      circle at 52% 42%,
      rgba(183, 225, 0, 0.15),
      transparent 31%
    ),
    linear-gradient(145deg, #fff 0%, #fbfcf7 100%);
  border-right: 1px solid rgba(18, 22, 17, 0.07);
  overflow: hidden;
}
.auth-hero::before {
  content: "";
  position: absolute;
  width: 570px;
  height: 570px;
  border-radius: 50%;
  right: -160px;
  top: 95px;
  background: radial-gradient(
    circle,
    rgba(188, 230, 58, 0.18),
    rgba(188, 230, 58, 0) 67%
  );
  pointer-events: none;
}
.auth-hero::after {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  left: 31%;
  top: 210px;
  border: 1px solid rgba(170, 200, 16, 0.08);
  box-shadow:
    0 0 0 54px rgba(170, 200, 16, 0.025),
    0 0 0 108px rgba(170, 200, 16, 0.015);
  pointer-events: none;
}
.auth-shell .brand img {
  width: 170px;
  height: auto;
}
.auth-hero-brand,
.auth-hero-copy,
.auth-product-preview,
.auth-benefits {
  position: relative;
  z-index: 3;
}
.auth-hero-brand {
  width: max-content;
}
.auth-hero-copy {
  max-width: 590px;
  margin-top: 60px;
}
.auth-kicker {
  width: max-content;
  min-height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f3f6ed;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #68705f;
}
.auth-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #aac810;
  box-shadow: 0 0 0 4px rgba(170, 200, 16, 0.12);
}
.auth-hero h1 {
  display: flex;
  flex-direction: column;
  margin: 22px 0 20px;
  font-size: clamp(48px, 4.7vw, 73px);
  line-height: 0.91;
  letter-spacing: -0.067em;
  font-weight: 800;
}
.auth-hero h1 em {
  font-style: normal;
  color: #a8d600;
}
.auth-hero-copy > p {
  max-width: 590px;
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: #6f776c;
}
.auth-product-preview {
  width: min(650px, 88%);
  height: 320px;
  margin-top: 34px;
}
.auth-preview-window {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 82%;
  height: 296px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e6ebe2;
  box-shadow: 0 22px 50px rgba(34, 44, 29, 0.09);
  overflow: hidden;
}
.auth-preview-bar {
  height: 38px;
  border-bottom: 1px solid #eef1eb;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  padding: 0 11px;
}
.auth-preview-bar > div {
  display: flex;
  gap: 5px;
}
.auth-preview-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a9d873;
}
.auth-preview-bar i:first-child {
  background: #f4a29c;
}
.auth-preview-bar i:nth-child(2) {
  background: #f3d36c;
}
.auth-preview-bar > span {
  height: 22px;
  border-radius: 7px;
  background: #f7f8f5;
  color: #a0a69c;
  font-size: 8px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  max-width: 210px;
}
.auth-preview-body {
  height: calc(100% - 38px);
  display: grid;
  grid-template-columns: 118px 1fr;
}
.auth-preview-sidebar {
  padding: 13px 9px;
  border-right: 1px solid #edf0eb;
  background: #fafbf8;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.auth-preview-sidebar > span {
  min-height: 27px;
  padding: 0 7px;
  border-radius: 7px;
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 4px;
  color: #7f867c;
  font-size: 7px;
}
.auth-preview-sidebar > span b {
  font-weight: 600;
}
.auth-preview-sidebar > span.auth-preview-logo {
  color: #111;
  font-size: 9px;
}
.auth-preview-sidebar > span.auth-preview-logo b {
  font-weight: 800;
}
.auth-preview-sidebar > span.active {
  background: #eff8ca;
  color: #334000;
}
.auth-preview-sidebar > span em {
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #a9da00;
  color: #172000;
  font-style: normal;
  font-size: 6px;
  font-weight: 800;
}
.auth-preview-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.auth-preview-head {
  height: 47px;
  border-bottom: 1px solid #edf0eb;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 7px;
}
.auth-preview-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #edc9b5;
  color: #674837;
  font-size: 9px;
  font-weight: 800;
}
.auth-preview-head strong,
.auth-preview-head small {
  display: block;
}
.auth-preview-head strong {
  font-size: 8px;
}
.auth-preview-head small {
  font-size: 6.5px;
  color: #a0a59d;
}
.auth-preview-head > span {
  padding: 5px 7px;
  border-radius: 999px;
  background: #eff8c9;
  color: #668500;
  font-size: 6.5px;
  font-weight: 800;
}
.auth-preview-messages {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-preview-messages p {
  max-width: 76%;
  margin: 0;
  padding: 8px 9px;
  border-radius: 9px;
  font-size: 7px;
  line-height: 1.45;
  color: #474d45;
}
.auth-preview-messages .incoming {
  align-self: flex-start;
  background: #f2f4f1;
  border-bottom-left-radius: 3px;
}
.auth-preview-messages .outgoing {
  align-self: flex-end;
  background: #eef8c8;
  border-bottom-right-radius: 3px;
}
.auth-preview-compose {
  flex: none;
  height: 36px;
  margin: 0 9px 9px;
  border: 1px solid #e7ebe5;
  border-radius: 9px;
  display: grid;
  grid-template-columns: 1fr 25px;
  align-items: center;
  padding-left: 10px;
  color: #a0a69e;
  font-size: 7px;
}
.auth-preview-compose b {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #aee000;
  color: #182000;
  font-size: 9px;
}
.auth-stat {
  position: absolute;
  width: 128px;
  padding: 12px;
  border: 1px solid #e4e9df;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 34px rgba(33, 42, 27, 0.11);
}
.auth-stat span,
.auth-stat strong,
.auth-stat small {
  display: block;
}
.auth-stat span {
  font-size: 8px;
  color: #868d82;
}
.auth-stat strong {
  font-size: 22px;
  letter-spacing: -0.05em;
  margin-top: 2px;
}
.auth-stat small {
  font-size: 7px;
  color: #9ca298;
  margin-top: 1px;
}
.auth-stat-leads {
  right: 0;
  top: 4px;
}
.auth-stat-conversion {
  right: 0;
  top: 106px;
}
.auth-benefits {
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.auth-benefits span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #7f877b;
}
.auth-benefits i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eff8c9;
  color: #708e00;
  font-style: normal;
  font-weight: 900;
}
.auth-panel {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 72px 42px 42px;
  background: linear-gradient(180deg, #fefefe, #fbfcfa);
}
/* Accepted payment methods, at the foot of the sign-in panel (v0.1.17). */
.auth-pay-note {
  align-self: end;
  max-width: 460px;
  margin: 18px auto 0;
  color: #6b7064;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}
.auth-back-home {
  position: absolute;
  right: 30px;
  top: 28px;
  z-index: 20;
  font-size: 12px;
  font-weight: 650;
  color: #7b8379;
  text-decoration: none;
}
.auth-back-home:hover {
  color: #111;
}
.auth-panel-card {
  width: min(100%, 460px);
  padding: 38px 38px 32px;
  border: 1px solid #e6eae3;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 60px rgba(31, 40, 26, 0.08);
}
.auth-panel-brand {
  margin-bottom: 28px;
}
.auth-shell .auth-panel-brand img {
  width: 156px;
}
.login-kicker {
  margin-bottom: 8px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #799900;
}
.login-form h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: #111310;
}
.login-form .subtitle {
  margin: 8px 0 28px;
  color: #80877d;
  font-size: 13px;
  line-height: 1.6;
}
.input-box {
  display: block;
  margin-bottom: 16px;
}
.input-box > label {
  display: block;
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 650;
  color: #424840;
}
.input-box > div {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.input-box i {
  position: absolute;
  left: 14px;
  top: 26px;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  color: #70776d;
  pointer-events: none;
}
.input-box input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 52px;
  padding: 0 15px 0 43px;
  border: 1px solid #dfe4dc;
  border-radius: var(--btn-radius-lg);
  background: #fff;
  color: #171a16;
  font-size: 14px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.input-box input::placeholder {
  color: #a1a79e;
}
.input-box input:focus {
  border-color: #b8cf4a;
  box-shadow: 0 0 0 4px rgba(170, 200, 16, 0.1);
  outline: none;
}
.input-box:focus-within i {
  color: #718e00;
}
.input-box .password-toggle {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 14px;
  border-radius: var(--btn-radius-lg);
  border-color: #dfe4dc;
  font-size: 12px;
  color: #5d6559;
}
.login-button {
  width: 100%;
  height: 50px;
  margin-top: 8px;
  border: 0;
  border-radius: var(--btn-radius-lg);
  background: linear-gradient(135deg, #b9ea00, #9bd000);
  color: #142000;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(150, 194, 0, 0.22);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(150, 194, 0, 0.29);
  filter: saturate(1.04);
}
.login-button:disabled {
  transform: none;
}
.auth-request-row {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #ecefe9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  color: #899087;
  flex-wrap: wrap;
}
.auth-request-row a {
  color: #688500;
  font-weight: 750;
  text-decoration: none;
}
.auth-request-row a:hover {
  color: #3f5200;
}
.auth-security {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  color: #80877e;
}
.auth-security > span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f2f7df;
  color: #6d8c00;
}
.auth-security p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}
.auth-security small {
  display: block;
  margin-top: 2px;
  color: #9aa097;
  font-size: 10px;
}
.auth-security small a {
  color: #688500;
}
@media (max-width: 1180px) {
  .auth-shell {
    padding: 18px;
  }
  .auth-layout {
    min-height: calc(100vh - 36px);
    grid-template-columns: minmax(0, 1.15fr) minmax(370px, 0.8fr);
  }
  .auth-hero {
    padding: 36px 38px 28px;
  }
  .auth-hero-copy {
    margin-top: 45px;
  }
  .auth-hero h1 {
    font-size: 54px;
  }
  .auth-product-preview {
    width: 100%;
  }
  .auth-panel {
    padding: 65px 26px 32px;
  }
  .auth-panel-card {
    padding: 32px 30px 28px;
  }
}
@media (max-width: 900px) {
  .auth-shell {
    display: block;
    min-height: 100svh;
    background:
      radial-gradient(
        circle at 50% 100%,
        rgba(175, 224, 0, 0.14),
        transparent 34%
      ),
      #f8faf5;
  }
  .auth-layout {
    display: block;
    min-height: calc(100svh - 36px);
    border-radius: 28px;
  }
  .auth-hero {
    display: none;
  }
  .auth-panel {
    min-height: calc(100svh - 36px);
    padding: 72px 24px 28px;
  }
  .auth-back-home {
    left: 26px;
    right: auto;
    top: 27px;
  }
  .auth-panel-card {
    width: min(100%, 520px);
    margin: auto;
    padding: 42px 46px 34px;
  }
}
@media (max-width: 560px) {
  .auth-shell {
    padding: 0;
    background: #fff;
  }
  .auth-layout {
    min-height: 100svh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
  }
  .auth-panel {
    min-height: 100svh;
    padding: calc(60px + env(safe-area-inset-top)) 18px
      calc(28px + env(safe-area-inset-bottom));
    align-items: start;
    background: #fff;
  }
  .auth-back-home {
    left: 20px;
    top: calc(20px + env(safe-area-inset-top));
  }
  .auth-panel-card {
    width: 100%;
    padding: 20px 2px 24px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .auth-panel-brand {
    margin-bottom: 36px;
  }
  .auth-shell .auth-panel-brand img {
    width: 142px;
  }
  .login-form h1 {
    font-size: 31px;
  }
  .input-box input,
  .input-box .password-toggle {
    height: 50px;
    min-height: 50px;
  }
  .input-box i {
    top: 25px;
  }
  .input-box input {
    font-size: 16px;
  }
}
/* Login / registro v2: paleta de marca, Inter para texto, Poppins para títulos,
   teléfono con prefijo, Recuérdame, ayuda de contraseña y captcha. */
.auth-shell {
  --bf-lime: #aac810;
  --bf-ink: #151512;
  --bf-cream: #f4f3ef;
  background: var(--bf-cream);
  color: var(--bf-ink);
  font-family:
    Inter, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", Arial,
    Helvetica, sans-serif;
}
.auth-shell h1,
.auth-shell .login-kicker,
.auth-shell .auth-kicker,
.auth-shell .login-button,
.auth-shell .auth-stat strong {
  font-family: Poppins, Arial, Helvetica, sans-serif;
}
.auth-layout {
  background: #fff;
  border-color: rgba(21, 21, 18, 0.08);
}
.auth-hero {
  background:
    radial-gradient(
      circle at 52% 42%,
      rgba(170, 200, 16, 0.14),
      transparent 31%
    ),
    linear-gradient(150deg, #f8f7f3 0%, var(--bf-cream) 55%, #efeee8 100%);
  border-right-color: rgba(21, 21, 18, 0.07);
}
.auth-kicker {
  background: #fff;
  border: 1px solid rgba(21, 21, 18, 0.07);
  color: #55574e;
}
.auth-kicker i {
  background: var(--bf-lime);
}
.auth-hero h1,
.login-form h1 {
  color: var(--bf-ink);
}
.auth-hero h1 em {
  color: var(--bf-lime);
}
.auth-hero-copy > p,
.login-form .subtitle {
  color: #6b6c63;
}
.auth-benefits span {
  color: #5f6157;
  font-size: 12px;
}
.auth-benefits i {
  background: rgba(170, 200, 16, 0.18);
  color: #5d7000;
}
.login-kicker {
  color: #7a9100;
}
.input-box > label {
  color: #3c3d36;
}
.input-box input,
.input-box select {
  font-family: inherit;
  color: var(--bf-ink);
}
.input-box input:focus,
.input-box select:focus {
  border-color: var(--bf-lime);
  box-shadow: 0 0 0 4px rgba(170, 200, 16, 0.16);
  outline: none;
}
.input-box-phone select {
  flex: 0 0 auto;
  width: 124px;
  height: 52px;
  padding: 0 26px 0 43px;
  border: 1px solid #dfe4dc;
  border-radius: var(--btn-radius-lg);
  background:
    linear-gradient(45deg, transparent 50%, #70776d 50%) right 15px top 23px /
      5px 5px no-repeat,
    linear-gradient(135deg, #70776d 50%, transparent 50%) right 10px top 23px /
      5px 5px no-repeat,
    #fff;
  appearance: none;
  font-size: 14px;
  cursor: pointer;
}
.input-box-phone input {
  padding-left: 15px;
}
.auth-options {
  margin: -2px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.auth-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #3c3d36;
  cursor: pointer;
  user-select: none;
}
.auth-switch input {
  position: absolute;
  opacity: 0;
  width: 38px;
  height: 22px;
  margin: 0;
  cursor: pointer;
}
.auth-switch span {
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #dcdcd4;
  position: relative;
  transition: background 0.2s ease;
}
.auth-switch span::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(21, 21, 18, 0.25);
  transition: transform 0.2s ease;
}
.auth-switch input:checked + span {
  background: var(--bf-lime);
}
.auth-switch input:checked + span::after {
  transform: translateX(16px);
}
.auth-switch input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(170, 200, 16, 0.25);
}
.auth-forgot {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #5d7000;
  cursor: pointer;
}
.auth-forgot:hover {
  color: var(--bf-ink);
  text-decoration: underline;
}
a.auth-forgot {
  text-decoration: none;
}
.auth-done {
  margin-bottom: 8px;
}
.auth-forgot-panel,
.auth-closed {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(170, 200, 16, 0.45);
  border-radius: 14px;
  background: #f8faeb;
  font-size: 13px;
  line-height: 1.55;
  color: #3c3d36;
}
.auth-forgot-panel[hidden] {
  display: none;
}
.auth-forgot-panel b,
.auth-closed b {
  display: block;
  margin-bottom: 4px;
  color: var(--bf-ink);
}
.auth-forgot-panel p,
.auth-closed p {
  margin: 0;
}
.auth-forgot-panel a,
.auth-closed a {
  color: #5d7000;
  font-weight: 600;
}
.auth-captcha {
  width: 100%;
  min-height: 78px;
  margin: 4px 0 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #6b6c63;
  text-align: center;
}
.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bf-lime);
  color: var(--bf-ink);
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(170, 200, 16, 0.3);
}
.login-button:hover {
  box-shadow: 0 16px 34px rgba(170, 200, 16, 0.38);
}
.auth-request-row a,
.auth-security small a {
  color: #5d7000;
}
@media (max-width: 900px) {
  .auth-shell {
    background: var(--bf-cream);
  }
}
@media (max-width: 560px) {
  .auth-shell,
  .auth-layout,
  .auth-panel {
    background: #fff;
  }
  .input-box-phone select {
    width: 132px;
    height: 50px;
    padding: 0 24px 0 40px;
    font-size: 16px;
  }
}
@media (max-width: 350px) {
  .auth-captcha > div {
    transform: scale(0.88);
    transform-origin: center;
  }
}

/* "Registro próximamente" (BEARTFLOW_SIGNUP_CLOSED). */
.auth-soon {
  position: relative;
  margin: 4px 0 18px;
  padding: 22px 20px 18px;
  border: 1px solid rgba(170, 200, 16, 0.45);
  border-radius: 18px;
  background: linear-gradient(160deg, #fbfdf1 0%, #f3f8dc 100%);
  color: #3c3d36;
  font-size: 14px;
  line-height: 1.6;
}
.auth-soon-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--bf-lime, #aac810);
  color: var(--bf-ink, #151512);
  box-shadow: 0 10px 24px rgba(170, 200, 16, 0.35);
}
.auth-soon-badge {
  position: absolute;
  top: 22px;
  right: 20px;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--bf-ink, #151512);
  color: var(--bf-lime, #aac810);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-soon p {
  margin: 14px 0 10px;
  color: var(--bf-ink, #151512);
  font-weight: 500;
}
.auth-soon-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: #50524a;
}
.auth-soon-list li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-top: 6px;
}
.auth-soon-list i {
  font-style: normal;
  font-weight: 700;
  color: #5d7000;
}
.auth-soon-contact {
  margin: 14px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: var(--muted);
}
.auth-soon-contact a {
  color: #5d7000;
  font-weight: 600;
}

/* Landing: "Cómo funciona" and "Reseñas de Google" sections. */
.landing .section[id] {
  scroll-margin-top: 16px;
}
.how {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
}
.how-steps {
  list-style: none;
  padding: 0;
  margin: 26px 0 30px;
  display: grid;
  gap: 18px;
}
.how-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.how-steps h3 {
  font-size: 18px;
  margin: 4px 0 4px;
}
.how-steps p {
  margin: 0;
  font-size: 15px;
}
.how-number {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--lime);
  color: #141810;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.how-shot {
  margin: 0;
}
.how-shot video,
.how-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 24px 70px #2c3c0a1a;
  background: #0c0d0a; /* first/last frame of the loop */
}
/* Poster still: only with reduced motion (also after a settings change). */
.how-shot .how-still {
  display: none;
}
.how-shot > .how-still:first-child {
  display: block;
}
@media (max-width: 700px) {
  .how-shot video,
  .how-shot img {
    width: auto;
    max-width: 100%;
    max-height: 78svh;
    margin: 0 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .how-shot .how-video {
    display: none;
  }
  .how-shot .how-still {
    display: block;
  }
}
.how-shot figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.reviews-sub {
  margin: 0 0 24px;
  max-width: 620px;
}
.reviews-fallback {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px;
}
.reviews-fallback > div {
  flex: 1 1 280px;
}
.reviews-fallback h3 {
  margin: 0 0 6px;
}
.reviews-fallback p {
  margin: 0;
}
.google-mark {
  flex: 0 0 auto;
}
.reviews-fallback .google-mark {
  width: 42px;
  height: 42px;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media (max-width: 1000px) {
  .how {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
@media (max-width: 700px) {
  .how-steps h3 {
    font-size: 17px;
  }
  .reviews-fallback {
    padding: 22px;
  }
  .reviews-fallback .btn {
    width: 100%;
  }
}
/* Login/registro: on desktop the hero (left) already shows the logo, so the
   form panel (right) starts at its kicker. Below 901px the hero is hidden and
   the panel logo remains the only brand mark. */
@media (min-width: 901px) {
  .auth-panel-brand {
    display: none;
  }
}
/* In-app header: round account image (or initials) first, then the name. */
.topbar-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar-identity b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #fff;
}
.topbar-initials {
  display: grid;
  place-items: center;
  background: var(--lime);
  border-color: var(--lime);
  color: #141810;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
@media (max-width: 700px) {
  /* "Conversaciones" at 50px was wider than a 390px screen. */
  .hero h1 {
    font-size: clamp(34px, 11vw, 50px);
  }
}
/* ---------------------------------------------------------------------------
   Public site: header with compact mobile menu, ES/EN switch, Trustindex-style
   Google reviews, FAQ accordion and footer.
   ------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 40;
}
.landing .site-nav {
  position: relative;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}
.nav-menu .links a {
  color: #20251c;
  padding: 6px 0;
}
.nav-menu .links a:hover {
  color: #000;
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Signed-in user chip on the public home: avatar + name, opens the user menu. */
.nav-actions .user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 240px;
  min-height: 44px;
  padding: 5px 16px 5px 6px;
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  background: #fff;
  color: #151a11;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}
.nav-actions .user-chip:hover {
  border-color: var(--lime);
  background: #f6f8f1;
  text-decoration: none;
}
.nav-actions .user-chip:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}
.user-chip .topbar-avatar {
  flex: 0 0 32px;
}
.user-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-chip-caret {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted, #5c6455);
}
.user-menu {
  position: relative;
  min-width: 0;
}
.user-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  display: grid;
  gap: 2px;
  min-width: 220px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 48px #11141024;
}
.user-menu-list[hidden] {
  display: none;
}
.user-menu-list [role="menuitem"] {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--btn-radius);
  background: transparent;
  color: #151a11;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}
.user-menu-list [role="menuitem"]:hover,
.user-menu-list [role="menuitem"]:focus-visible {
  background: #f1f5e8;
  outline: none;
}
.user-menu-list [data-user-logout] {
  border-top: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
}
/* Configuración over the home page (reuses the release-notes dialog shell). */
.settings-dialog {
  width: min(600px, 100%);
  max-height: min(88vh, 860px);
}
.settings-body {
  overflow-y: auto;
  padding: 8px 24px 24px;
}
.settings-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.settings-section h3 {
  margin: 0 0 10px;
  font-size: 17px;
}
.settings-section form {
  display: grid;
  gap: 12px;
}
.settings-section .field input {
  width: 100%;
}
.settings-section input[readonly] {
  background: #f4f5f1;
  color: #5c6455;
}
.settings-photo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.settings-photo .topbar-avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  font-size: 20px;
}
.settings-photo p {
  margin: 6px 0;
  font-size: 13px;
}
.settings-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.settings-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  cursor: pointer;
}
.settings-status:empty {
  display: none;
}
.settings-status {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f1f5e8;
  font-weight: 600;
}
.settings-more {
  margin: 16px 0 0;
}
@media (max-width: 520px) {
  .settings-body {
    padding: 4px 16px 18px;
  }
  .settings-modal {
    padding: 10px;
  }
  .settings-dialog {
    max-height: 94vh;
  }
}
@media (max-width: 900px) {
  .nav-actions {
    min-width: 0;
  }
  .nav-actions .user-chip {
    max-width: 150px;
    padding-right: 12px;
    font-size: 13px;
  }
}
@media (max-width: 359px) {
  .nav-actions .user-chip {
    padding-right: 5px;
  }
  .nav-actions .user-chip-name,
  .nav-actions .user-chip-caret {
    display: none;
  }
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border-color: #dfe4d9;
  color: #151a11;
  place-items: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  position: relative;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle span::before {
  top: -6px;
}
.nav-toggle span::after {
  top: 6px;
}
.site-nav.open .nav-toggle span {
  background: transparent;
}
.site-nav.open .nav-toggle span::before {
  transform: translateY(6px) rotate(45deg);
}
.site-nav.open .nav-toggle span::after {
  transform: translateY(-6px) rotate(-45deg);
}
.lang-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid #dfe4d9;
  border-radius: 100px;
  background: #fff;
  flex: 0 0 auto;
}
.lang-switch button {
  border: 0;
  border-radius: 100px; /* ES/EN toggle: stays round */
  background: transparent;
  padding: 6px 11px;
  min-width: 40px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #6b7266;
}
.lang-switch button[aria-pressed="true"] {
  background: #151a11;
  color: var(--lime);
}
.lang-switch button:not([aria-pressed="true"]):hover {
  color: #111;
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    transition: none;
  }
}
@media (max-width: 900px) {
  .landing .site-nav {
    padding: 16px 18px;
    gap: 12px;
  }
  .site-nav .brand img {
    width: 132px;
    height: 36px;
  }
  .nav-toggle {
    display: grid;
  }
  .nav-actions .nav-start {
    padding: 11px 16px;
    font-size: 13px;
    white-space: nowrap;
  }
  .nav-menu {
    display: none;
    position: absolute;
    top: calc(100% - 4px);
    left: 12px;
    right: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin: 0;
    padding: 10px 12px 14px;
    background: #fff;
    border: 1px solid #e4e8df;
    border-radius: 22px;
    box-shadow: 0 22px 48px rgba(21, 26, 17, 0.14);
  }
  .site-nav.open .nav-menu {
    display: flex;
  }
  .nav-menu .links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 15px;
  }
  .nav-menu .links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 10px;
    border-bottom: 1px solid #eef1ea;
  }
  .nav-menu .links a:hover {
    text-decoration: none;
    background: #f6f8f1;
    border-radius: 12px;
  }
  .nav-menu .links a.nav-login {
    border-bottom: 0;
  }
  .nav-menu .lang-switch {
    align-self: flex-start;
    margin-left: 10px;
  }
}
@media (max-width: 359px) {
  .nav-actions .nav-start {
    display: none;
  }
}
/* Reviews: dark band, Trustindex "slider" layout (summary + carousel). */
.section.reviews {
  max-width: 1250px;
  margin: 30px auto;
  background: #151a11;
  color: #fff;
  border-radius: 32px;
  padding: 52px 44px 32px;
}
.reviews .eyebrow {
  color: var(--lime);
}
/* Eyebrow row: [Google G] GOOGLE REVIEWS ★★★★★, left-aligned with the title. */
.reviews-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.reviews-brand .google-mark {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.reviews-brand .eyebrow {
  line-height: 1;
}
.reviews-stars {
  padding-left: 10px;
  border-left: 1px solid #343c2d;
  color: #fbbc05;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2px;
}
.reviews h2 {
  color: #fff;
  margin: 0 0 12px;
}
.reviews-sub {
  margin: 0 0 22px;
  max-width: 620px;
  color: #c7cebf;
}
.reviews .muted {
  color: #aab2a2;
}
/* Loading state: small status line on the left plus skeleton cards the size
   of the slider, so nothing floats in the middle and the page does not jump.
   Removed by app.js once the widget has rendered. */
.reviews-loading-text {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 12px;
  color: #8f9887;
}
.reviews-loading-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  animation: reviews-pulse 1.2s ease-in-out infinite;
}
.reviews-skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.reviews-skeleton span {
  height: 190px;
  border-radius: 12px;
  background: linear-gradient(100deg, #1d2318 30%, #262e20 50%, #1d2318 70%) 0
    0 / 300% 100%;
  animation: reviews-shimmer 1.6s linear infinite;
}
@keyframes reviews-pulse {
  50% {
    opacity: 0.3;
  }
}
@keyframes reviews-shimmer {
  to {
    background-position: -150% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-loading-dot,
  .reviews-skeleton span {
    animation: none;
  }
}
.reviews-body:has(> .ti-host[data-state="ready"]) > .reviews-loading {
  display: none;
}
/* Trustindex widget host (#resenas): the widget brings its own CSS from
   cdn.trustindex.io; only keep it inside the section. The skeleton above
   reserves the height while it loads. */
.ti-host {
  max-width: 100%;
  overflow-x: clip;
}
.reviews .reviews-fallback {
  background: #20271a;
  border-color: #2f372a;
  color: #fff;
}
.reviews .reviews-fallback p {
  color: #c7cebf;
}
@media (max-width: 700px) {
  .section.reviews {
    margin: 20px 10px;
    padding: 36px 16px 24px;
    border-radius: 24px;
  }
  .reviews-skeleton {
    grid-template-columns: minmax(0, 1fr);
  }
  .reviews-skeleton span {
    height: 210px;
  }
  .reviews-skeleton span:nth-child(n + 2) {
    display: none;
  }
}
/* FAQ accordion (native details/summary). */
/* Widescreen: header full width on top, then the accordion across the full
   content width in two independent columns (one on mobile). */
.faq {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.faq-head {
  max-width: 760px;
}
.faq-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  align-items: start;
}
.faq-head p {
  color: var(--muted);
}
.faq-head a {
  color: #20251c;
  font-weight: 700;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.faq-item[open] {
  border-color: #cfe58a;
  box-shadow: 0 12px 30px rgba(21, 26, 17, 0.06);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-weight: 750;
  font-size: 15px;
  color: #151a11;
  border-radius: 18px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary i {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5e6;
  position: relative;
}
.faq-item summary i::before,
.faq-item summary i::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 13px;
  height: 2px;
  border-radius: 2px;
  background: #4b6400;
}
.faq-item summary i::after {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}
.faq-item[open] summary i {
  background: var(--lime);
}
.faq-item[open] summary i::before,
.faq-item[open] summary i::after {
  background: #151a11;
}
.faq-item[open] summary i::after {
  transform: rotate(0deg);
}
.faq-answer {
  padding: 0 20px 18px;
}
.faq-answer p {
  margin: 0;
  color: #4a5146;
  font-size: 14px;
  line-height: 1.65;
}
.faq-answer a {
  color: #20251c;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .faq-item summary i::after {
    transition: none;
  }
}
@media (max-width: 900px) {
  .faq {
    gap: 20px;
  }
  .faq-cols {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .faq-item summary {
    padding: 16px;
    font-size: 14px;
  }
  .faq-answer {
    padding: 0 16px 16px;
  }
}
/* Footer: dark, logo + tagline, three columns, legal line. */
.site-footer {
  margin-top: 20px;
  background: #151a11;
  color: #c7cebf;
  font-size: 14px;
  text-align: left;
  border: 0;
  padding: 0;
}
.footer-inner {
  max-width: 1250px;
  margin: auto;
  padding: 56px 30px 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
}
.footer-logo {
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
}
.footer-logo img {
  display: block;
  width: 150px;
  height: 42px;
  object-fit: contain;
}
.footer-brand p {
  margin: 16px 0 0;
  max-width: 340px;
  line-height: 1.6;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.footer-col h2 {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--lime);
}
.footer-col a {
  color: #fff;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.footer-col a:hover {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-col p {
  margin: 0;
  font-size: 13px;
  color: #9da694;
}
/* Accepted payment methods, under the legal links (v0.1.17). */
.footer-col .footer-pay {
  margin-top: 4px;
  max-width: 300px;
  font-size: 12.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.footer-bottom {
  max-width: 1250px;
  margin: auto;
  padding: 20px 30px 28px;
  border-top: 1px solid #2c3326;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  font-size: 13px;
  color: #9da694;
}
.footer-signature {
  margin: 0;
}
.footer-signature a {
  color: #fff;
  text-decoration: none;
}
.footer-signature a:hover {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom .lang-switch {
  margin-left: auto;
  background: #20271a;
  border-color: #3a4233;
}
.footer-bottom .lang-switch button {
  color: #c7cebf;
}
.footer-bottom .lang-switch button[aria-pressed="true"] {
  background: var(--lime);
  color: #151a11;
}
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  .footer-inner {
    grid-template-columns: 1fr;
    padding: 44px 22px 28px;
    gap: 28px;
  }
  .footer-bottom {
    padding: 18px 22px 26px;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-bottom .lang-switch {
    margin-left: 0;
  }
}
/* Auth panel: back link + language switch on one row. */
.auth-top-row {
  position: absolute;
  top: 22px;
  left: 30px;
  right: 30px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.auth-top-row .auth-back-home {
  position: static;
}
@media (max-width: 900px) {
  .auth-top-row {
    left: 24px;
    right: 24px;
    top: 18px;
  }
}

/* Brand loader ("b" mark): the black stroke draws in, the lime bowl sweeps
   and fills, on a soft lime glow; one smooth 2.4 s loop. */
.bf-loader {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  min-height: 220px;
  padding: 40px 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  animation: bf-loader-in 0.35s ease 0.15s both;
}
.bf-loader-compact {
  min-height: 0;
  padding: 24px 12px;
  gap: 10px;
}
.bf-loader-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  min-height: 100vh;
  background: #fff;
}
.bf-loader-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
}
.bf-loader-compact .bf-loader-orb {
  width: 56px;
  height: 56px;
}
.bf-loader-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #aac81038 0%, #aac81000 68%);
  animation: bf-glow 2.4s ease-in-out infinite;
}
.bf-loader-mark {
  position: relative;
  width: 60px;
  height: 60px;
  overflow: visible;
}
.bf-loader-compact .bf-loader-mark {
  width: 36px;
  height: 36px;
}
.bf-loader-mark path {
  stroke-width: 7;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  fill-opacity: 0;
}
.bf-loader-mark .bf-l {
  fill: #1d1d1b;
  stroke: #1d1d1b;
  animation: bf-draw-l 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.bf-loader-mark .bf-bowl {
  fill: #aac810;
  stroke: #aac810;
  animation: bf-draw-bowl 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes bf-loader-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bf-draw-l {
  0% {
    stroke-dashoffset: 1;
    fill-opacity: 0;
    opacity: 1;
  }
  32% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  46%,
  82% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    opacity: 0;
  }
}
@keyframes bf-draw-bowl {
  0%,
  20% {
    stroke-dashoffset: 1;
    fill-opacity: 0;
    opacity: 1;
  }
  50% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  62%,
  82% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    opacity: 0;
  }
}
@keyframes bf-glow {
  0%,
  35% {
    transform: scale(0.7);
    opacity: 0;
  }
  62% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bf-loader-mark path {
    animation: none;
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
  .bf-loader-mark .bf-l,
  .bf-loader-mark .bf-bowl {
    animation: none;
  }
  .bf-loader-orb::before {
    animation: none;
    opacity: 0.6;
  }
  .bf-loader-mark {
    animation: bf-breathe 1.8s ease-in-out infinite alternate;
  }
}
@keyframes bf-breathe {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}
/* Example placeholders (e.g. «Asistente de IA»): faint but readable. */
.field input::placeholder,
.field textarea::placeholder {
  color: #7d8577;
  opacity: 1;
  font-style: normal;
}

/* ---------- CRM de leads, citas y notificaciones (v0.1.1) ---------- */
.crm-filters {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(120px, 1fr));
  gap: 12px;
  align-items: end;
  padding: 18px;
  margin-bottom: 16px;
}
.crm-filters .field {
  margin: 0;
}
.crm-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--button-gap);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.crm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.crm-layout:has(#lead-detail) {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
}
.crm-table-wrap {
  padding: 6px 0 0;
  overflow-x: auto;
}
.crm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.crm-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.crm-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.crm-table td small {
  display: block;
}
.crm-row {
  cursor: pointer;
}
.crm-row:hover,
.crm-row:focus-visible,
.crm-row.selected {
  background: #f6faea;
  outline: none;
}
.crm-row.selected td:first-child {
  box-shadow: inset 3px 0 0 #aac810;
}
.crm-phone {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crm-count {
  padding: 4px 16px 14px;
  margin: 0;
  font-size: 12px;
}
.crm-channel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.crm-channel::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9aa294;
}
.crm-channel.c-instagram::before {
  background: #d6249f;
}
.crm-channel.c-facebook::before {
  background: #1877f2;
}
.crm-channel.c-whatsapp::before {
  background: #25d366;
}
.crm-channel.c-simulator::before {
  background: #aac810;
}
.lead-status {
  white-space: nowrap;
}
.lead-status.s-new {
  background: #eef6d2;
}
.lead-status.s-contacted {
  background: #e8f0fb;
}
.lead-status.s-appointment,
.lead-status.s-requested {
  background: #fff3d6;
}
.lead-status.s-won {
  background: #1d1d1b;
  color: white;
}
.lead-status.s-lost {
  background: #f3e6e6;
  color: #7a2b2b;
}
.crm-detail {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 14px;
}
.crm-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.crm-detail h2 {
  margin: 6px 0 0;
  font-size: 22px;
}
.crm-detail h2:focus {
  outline: none;
}
.crm-detail p {
  margin: 2px 0 0;
}
.crm-close {
  padding: 6px 11px;
  align-self: start;
}
.crm-actions,
.crm-edit-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.crm-wa {
  background: #e7f9ee;
  border-color: #bfe9cf;
}
.crm-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 14px;
}
.crm-facts dt {
  color: var(--muted);
}
.crm-facts dd {
  margin: 0;
}
.crm-source {
  margin: 0;
  font-size: 13px;
}
.crm-source figcaption {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.crm-source blockquote {
  margin: 0;
  padding: 10px 14px;
  background: #f0f2ed;
  border-radius: 14px 14px 14px 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.crm-edit .field {
  margin-bottom: 10px;
}
.crm-new {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}
.crm-new h3,
.crm-new .crm-edit-actions {
  grid-column: 1 / -1;
  margin: 0;
}
button.danger,
.btn.danger {
  color: #a12626;
  border-color: #efcaca;
}
/* System notes in the chat (appointment booked, etc.). */
.bubble.note {
  background: #fff8e1;
  border: 1px dashed #e9cf7a;
  border-radius: 14px;
  margin: 14px auto;
  max-width: 520px;
  text-align: center;
  font-size: 13px;
}
.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 14px 40px;
  justify-content: flex-end;
}
.quick-reply {
  border-color: #aac810;
  background: white;
  padding: 7px 14px;
}
.quick-reply:hover {
  background: #f3f9df;
}
/* Google Calendar card */
.gcal-card {
  margin-top: 20px;
  display: grid;
  gap: 14px;
  justify-items: start;
}
.gcal-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.gcal-head h3,
.gcal-head p {
  margin: 0 0 4px;
}
.gcal-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #eff6d9;
  flex: none;
}
.pill.ok {
  background: #1d1d1b;
  color: #d8f064;
}
.banner.warn {
  background: #fff3d6;
}
.gcal-settings {
  width: 100%;
  display: grid;
  gap: 12px;
}
.gcal-settings .field,
.booking-builder .field {
  margin: 0;
}
/* Conexiones: read-only schedule summary (edited in Citas). */
.gcal-schedule {
  display: grid;
  gap: 6px;
  justify-items: start;
}
.gcal-schedule p {
  margin: 0;
}
.gcal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.gcal-days {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.gcal-days legend {
  font-size: 13px;
  padding: 0 4px;
}
.check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
}
/* Booking form builder (Citas) */
.booking-grid {
  align-items: start;
}
.booking-builder,
.bk-cards {
  display: grid;
  gap: 16px;
}
.bk-gcal-wrap {
  margin-top: 16px;
}
.booking-builder fieldset.bk-ask {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 16px 14px;
  display: grid;
  gap: 8px;
  margin: 0;
}
.booking-builder legend {
  font-weight: 600;
  font-size: 14px;
  padding: 0 6px;
}
.booking-builder p,
.bk-gcal-wrap p {
  margin: 0;
  font-size: 13px;
}
/* Citas: one numbered card per step, short title + one-line help. */
.bk-card {
  display: grid;
  gap: 12px;
  margin: 0;
}
.bk-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 17px;
}
.bk-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lime);
  color: #1d1d1b;
  font-size: 13px;
  font-weight: 800;
}
.booking-builder .bk-help {
  margin-top: -6px;
}
.booking-builder .bk-hint {
  margin-top: -6px;
  font-size: 12px;
}
.booking-builder .bk-missing {
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff6e5;
  color: #6b4a00;
}
.booking-builder .bk-missing[hidden] {
  display: none;
}
.bk-gcal-note {
  margin: 0;
}
.bk-gcal-note .pill {
  margin-right: 4px;
}
.bk-toggle {
  margin: 0;
}
.bk-switch > span {
  display: grid;
  gap: 2px;
}
.bk-switch b {
  font-size: 16px;
}
.bk-switch small {
  font-weight: 500;
  font-size: 13px;
}
.msg-field {
  display: grid;
  gap: 8px;
}
.msg-help {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: -4px;
}
.booking-builder .msg-field textarea {
  min-height: 72px;
}
.var-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.var-chip {
  min-height: 0;
  padding: 3px 9px;
  border: 1px solid #c9d3b8;
  border-radius: 999px;
  background: #f4f8e8;
  color: #1d1d1b;
  font:
    600 12px/1.4 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  cursor: pointer;
}
.var-chip:hover,
.var-chip:focus-visible {
  background: var(--lime);
  border-color: #779e00;
}
.bk-reminder {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 8px 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.bk-reminder .check {
  align-self: center;
  font-weight: 700;
}
.bk-hours-before {
  flex: 0 1 170px;
}
/* Optional English versions of fixed messages (Citas, Asistente de IA). */
.bk-en,
.lang-en {
  margin-top: 10px;
  border-left: 3px solid var(--line);
  padding-left: 12px;
}
.bk-one-lang .bk-en,
.lang-only-es .lang-en {
  display: none;
}
/* Citas off: the steps stay editable but look dimmed. */
.booking-off .bk-block {
  opacity: 0.55;
  filter: grayscale(0.6);
  transition:
    opacity 0.2s,
    filter 0.2s;
}
.booking-off .bk-block:hover,
.booking-off .bk-block:focus-within,
.booking-off .bk-block.open {
  opacity: 0.85;
  filter: none;
}
.booking-off > button[type="submit"],
.booking-off .bk-cards > button[type="submit"] {
  opacity: 0.8;
}
.builder-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.builder-head h3 {
  margin: 0;
}
.switch {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}
.appt-title {
  margin: 0 0 12px;
}
.appt-list {
  display: grid;
  gap: 12px;
}
.appt {
  padding: 16px 18px;
  display: grid;
  gap: 6px;
}
.appt > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.appt p {
  margin: 0;
  font-size: 14px;
}
.appt.s-cancelled {
  opacity: 0.6;
}
.appt-reminder.r-window_closed,
.appt-reminder.r-failed {
  color: #a15d00;
}
/* Notification center */
.notif-wrap {
  position: relative;
}
/* Icon-only circle: stays round (beats button.small). */
button.notif-bell {
  border-radius: 50%;
}
.notif-bell {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
}
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: #aac810;
  color: #1d1d1b;
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  border: 2px solid white;
}
.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(360px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow: auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(17, 20, 16, 0.14);
  z-index: 60;
}
.notif-head,
.notif-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.notif-head {
  border-bottom: 1px solid var(--line);
}
.notif-foot {
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.notif-head .small,
.notif-foot .small {
  padding: 6px 12px;
  font-size: 12px;
}
.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.notif a {
  display: grid;
  gap: 2px;
  padding: 12px 16px 12px 26px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: 13px;
}
.notif a:hover,
.notif a:focus-visible {
  background: #f6faea;
}
.notif.unread a::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #aac810;
}
.notif small {
  color: var(--muted);
  font-size: 11px;
}
.notif.k-reminder_window_closed b {
  color: #a15d00;
}
.notif-empty {
  padding: 18px 16px;
  margin: 0;
}
@media (max-width: 900px) {
  .crm-filters {
    grid-template-columns: 1fr 1fr;
  }
  .crm-search {
    grid-column: 1 / -1;
  }
  .crm-layout:has(#lead-detail) {
    grid-template-columns: minmax(0, 1fr);
  }
  .crm-detail {
    position: static;
    order: -1;
  }
  .crm-new {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .crm-table thead {
    display: none;
  }
  .crm-table,
  .crm-table tbody,
  .crm-table tr,
  .crm-table td {
    display: block;
  }
  .crm-table tr {
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
  }
  .crm-table td {
    border: 0;
    padding: 4px 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .crm-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
  }
  .crm-table td:first-child {
    display: block;
  }
  .crm-table td:first-child::before {
    content: none;
  }
  .quick-replies {
    margin-left: 0;
  }
}
.appt-move {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin-top: 10px;
}
.appt-move[hidden] {
  display: none;
}
.appt-move label {
  display: grid;
  gap: 4px;
  font-size: 0.85rem;
}
/* Checkboxes in the CRM/Calendar/booking forms keep their natural size. */
.check input,
.gcal-days input,
.booking-builder .switch input {
  width: auto;
  flex: none;
  margin: 3px 0 0;
  accent-color: #1d1d1b;
}
.gcal-days label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.gcal-days input {
  margin: 0;
}
/* Notification panel: the list scrolls, header and footer stay visible. */
.notif-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notif-list {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.notif-head,
.notif-foot {
  flex: none;
}

/* Consent checkbox (sign-up and pay buttons) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  font-size: 13px;
  line-height: 1.45;
  color: #3c3d36;
}
.consent-check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #aac810;
  cursor: pointer;
}
.consent-check input:focus-visible {
  outline: 3px solid rgba(170, 200, 16, 0.45);
  outline-offset: 2px;
}
.consent-check label {
  cursor: pointer;
}
.consent-check a {
  color: #1d1d1b;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plan-checkout {
  display: grid;
  gap: 4px;
  margin-top: 12px;
}
.plan-checkout .consent-check {
  margin-bottom: 8px;
}
.plan-checkout button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.consents-table td {
  vertical-align: top;
  font-size: 13px;
}
.consents-table .consent-ua {
  max-width: 260px;
  overflow-wrap: anywhere;
  color: #5b5c55;
}
.consents-table td:first-child,
.consents-table td:nth-child(5) {
  white-space: nowrap;
}

/* Flowy support chat (owner panel pages). Bottom-right; #notice stays bottom-center. */
body.has-flowy .content {
  padding-bottom: 104px;
}
.flowy-avatar {
  display: block;
  overflow: visible;
}
.flowy-avatar .flowy-eyes,
.flowy-avatar .flowy-smile {
  transform-box: fill-box;
  transform-origin: center;
}
.flowy-avatar .flowy-eyes {
  animation: flowy-blink 4.2s infinite;
}
.flowy-avatar .flowy-smile {
  animation: flowy-smile 4.2s infinite ease-in-out;
}
.flowy-launcher .flowy-avatar .flowy-bob {
  animation: flowy-bob 3.2s infinite ease-in-out;
}
@keyframes flowy-blink {
  0%,
  44%,
  50%,
  100% {
    transform: scaleY(1);
  }
  47% {
    transform: scaleY(0.1);
  }
}
@keyframes flowy-smile {
  0%,
  60%,
  100% {
    transform: scaleX(1);
  }
  75% {
    transform: scaleX(1.18);
  }
}
@keyframes flowy-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
.flowy-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 62px;
  height: 62px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #1d1d1b;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px #1d1d1b33;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.flowy-launcher:hover {
  transform: translateY(-2px);
}
.flowy-launcher:focus-visible {
  outline: 3px solid #aac810;
  outline-offset: 3px;
}
.flowy-launcher-dot {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #aac810;
  border: 2px solid #fff;
}
.flowy.open .flowy-launcher-dot {
  display: none;
}
.flowy-panel {
  /* Bottom edge above the launcher (22 + 62 + 14 px). The height is capped
     to the visible screen: 16 px under the top (Chrome's bar, notch), dvh
     with a vh fallback; flowy-ui.js (watchFlowyViewport) sets --flowy-room
     from visualViewport and --flowy-bottom-now over the soft keyboard. */
  --flowy-bottom: 98px;
  position: fixed;
  right: 22px;
  bottom: calc(
    var(--flowy-bottom-now, var(--flowy-bottom)) +
      env(safe-area-inset-bottom, 0px)
  );
  z-index: 91;
  width: min(390px, calc(100vw - 32px));
  height: min(580px, calc(100vh - 130px));
  height: min(580px, calc(100dvh - 130px));
  max-height: calc(
    100vh - var(--flowy-bottom) - 16px - env(safe-area-inset-top, 0px) -
      env(safe-area-inset-bottom, 0px)
  );
  max-height: calc(
    var(--flowy-room, 100dvh - var(--flowy-bottom)) - 16px -
      env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  );
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e3e5da;
  border-radius: 22px;
  box-shadow: 0 18px 60px #1d1d1b33;
  overflow: hidden;
}
.flowy-panel[hidden] {
  display: none;
}
.flowy-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  background: #1d1d1b;
  color: #fff;
}
.flowy-head-text {
  flex: 1;
  min-width: 0;
}
.flowy-head h2 {
  margin: 0;
  font-size: 16px;
  color: #fff;
}
.flowy-status {
  display: block;
  font-size: 12px;
  color: #d7e98a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flowy-panel.is-unavailable .flowy-status {
  color: #c9c9c2;
}
.flowy-head button {
  background: transparent;
  color: #fff;
  border: 1px solid #ffffff33;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
}
.flowy-head button:hover,
.flowy-head button:focus-visible {
  background: #ffffff1f;
}
.flowy-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f6f7f1;
}
.flowy-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 88%;
}
.flowy-msg.mine {
  align-self: flex-end;
}
.flowy-msg-avatar {
  flex: none;
}
.flowy-bubble-text {
  padding: 9px 13px;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  border: 1px solid #e6e8de;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  color: #1d1d1b;
}
.flowy-msg.mine .flowy-bubble-text {
  background: #aac810;
  border-color: #aac810;
  border-radius: 16px 16px 4px 16px;
}
.flowy-msg.unavailable .flowy-bubble-text {
  background: #fff8e8;
  border-color: #f0dfb0;
}
.flowy-bubble-text a {
  color: inherit;
  font-weight: 600;
}
.flowy-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 36px;
}
.flowy-chip {
  border: 1px solid #c9d88a;
  background: #fff;
  color: #1d1d1b;
  border-radius: var(--btn-radius);
  padding: 6px 11px;
  font-size: 13px;
}
.flowy-chip:hover,
.flowy-chip:focus-visible {
  background: #f1f7d6;
}
.flowy-typing {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 12px;
  color: #5b5c55;
  background: #f6f7f1;
}
.flowy-typing[hidden] {
  display: none;
}
.flowy-dots {
  display: inline-flex;
  gap: 3px;
}
.flowy-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8a9a3a;
  animation: flowy-dot 1.2s infinite ease-in-out;
}
.flowy-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.flowy-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes flowy-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.flowy-form {
  flex: none;
  border-top: 1px solid #e6e8de;
  padding: 10px;
  background: #fff;
  position: relative;
}
.flowy-composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.flowy-tools:empty {
  display: none;
}
.flowy-composer textarea {
  flex: 1;
  resize: none;
  min-height: 42px;
  max-height: 120px;
  border-radius: 21px;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
}
.flowy-send {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  flex: none;
}
@media (max-width: 700px) {
  body.has-flowy .content {
    padding-bottom: 92px;
  }
  .flowy-launcher {
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
  }
  .flowy-launcher .flowy-avatar {
    width: 38px;
    height: 38px;
  }
  .flowy-panel {
    --flowy-bottom: 78px;
    right: 8px;
    left: 8px;
    width: auto;
    height: min(560px, calc(100vh - 96px));
    height: min(560px, calc(100dvh - 96px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .flowy-avatar .flowy-eyes,
  .flowy-avatar .flowy-smile,
  .flowy-launcher .flowy-avatar .flowy-bob,
  .flowy-dots i {
    animation: none;
  }
  .flowy-launcher {
    transition: none;
  }
}

/* «¿Necesitas ayuda?» bubble just above the Flowy launcher (flowy-ui.js):
   white, dark text, lime accent, tail pointing at the launcher. Never covers
   the launcher (it sits above it) and fits the viewport on mobile. */
.flowy-nudge {
  position: fixed;
  right: 22px;
  bottom: 98px;
  z-index: 91;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: min(280px, calc(100vw - 44px));
  padding: 4px;
  background: #fff;
  color: #1d1d1b;
  border: 1px solid #1d1d1b1f;
  border-left: 4px solid #aac810;
  border-radius: 14px;
  box-shadow: 0 8px 24px #1d1d1b26;
  animation: flowy-nudge-in 0.28s ease-out both;
}
.flowy-nudge::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 1px solid #1d1d1b1f;
  border-bottom: 1px solid #1d1d1b1f;
  transform: rotate(45deg);
}
.flowy-nudge-open {
  min-height: 0;
  padding: 8px 6px 8px 10px;
  border: 0;
  border-radius: var(--btn-radius-sm);
  background: transparent;
  color: #1d1d1b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flowy-nudge-close {
  flex: none;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5b5c55;
  font-size: 18px;
  line-height: 1;
}
.flowy-nudge-open:hover {
  filter: none;
  color: #4f5e00;
}
.flowy-nudge-close:hover {
  filter: none;
  background: #aac81033;
  color: #1d1d1b;
}
.flowy-nudge-open:focus-visible,
.flowy-nudge-close:focus-visible {
  outline: 3px solid #aac810;
  outline-offset: 1px;
}
.flowy.open .flowy-nudge {
  display: none;
}
/* Desktop inbox with a conversation open: its composer and send button sit
   in the same corner (mobile: body.inbox-thread-open below). */
@media (min-width: 768px) {
  body:has(.inbox .compose) .flowy-nudge {
    display: none;
  }
}
@keyframes flowy-nudge-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 700px) {
  .flowy-nudge {
    right: 14px;
    bottom: 80px;
    max-width: calc(100vw - 28px);
  }
  .flowy-nudge::after {
    right: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flowy-nudge {
    animation: none;
  }
}

/* Emoji picker (shared by Inbox, comment replies and Flowy), WhatsApp-like. */
.emoji-toggle {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: grayscale(1);
  opacity: 0.7;
  transition:
    filter 0.15s ease,
    opacity 0.15s ease,
    background 0.15s ease;
}
.emoji-toggle:hover,
.emoji-toggle:focus-visible,
.emoji-toggle.active {
  filter: none;
  opacity: 1;
  background: #f1f5e0;
}
.emoji-toggle:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: transparent;
}
.compose .emoji-toggle {
  align-self: center;
}
.flowy-tools {
  display: flex;
  align-items: flex-end;
}
.flowy-tools .emoji-toggle {
  width: 36px;
  height: 36px;
  font-size: 20px;
}
.field.emoji-anchor {
  position: relative;
}
.field.emoji-anchor > .emoji-toggle {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 34px;
  height: 34px;
  font-size: 19px;
}
.field.emoji-anchor > textarea,
.field.emoji-anchor > input {
  padding-right: 44px;
}
.emoji-panel {
  position: fixed;
  z-index: 120;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line, #e6e6e0);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(29, 29, 27, 0.18);
  color: #1d1d1b;
}
.emoji-panel[hidden] {
  display: none;
}
.emoji-panel.emoji-full {
  animation: emoji-shake 0.3s ease;
}
@keyframes emoji-shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
.emoji-tabs,
.emoji-search {
  flex: 0 0 auto;
}
.emoji-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line, #e6e6e0);
}
.emoji-tab {
  flex: 1 0 28px;
  min-height: 0;
  height: 36px;
  padding: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0.6;
}
.emoji-tab:hover,
.emoji-tab:focus-visible {
  opacity: 1;
  filter: none;
}
.emoji-tab.active {
  filter: none;
  opacity: 1;
  border-bottom-color: #aac810;
}
.emoji-search {
  padding: 8px 10px 4px;
}
.emoji-search-input {
  width: 100%;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--field-radius);
  background: #f2f2ee;
  font: inherit;
  font-size: 14px;
}
.emoji-search-input:focus {
  outline: 2px solid #aac810;
  outline-offset: 0;
}
.emoji-scroll {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 8px 8px;
}
.emoji-section h3 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 8px 4px 4px;
  background: #fff;
  color: #6b6b63;
  font-size: 12px;
  font-weight: 600;
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
}
.emoji-item {
  -webkit-tap-highlight-color: transparent;
  min-height: 0;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.emoji-item:hover,
.emoji-item:focus-visible {
  background: #f1f5e0;
}
.emoji-item:focus-visible {
  outline: 2px solid #aac810;
  outline-offset: -2px;
}
.emoji-empty {
  margin: 24px 0;
  text-align: center;
  color: #6b6b63;
  font-size: 14px;
}
@media (max-width: 700px) {
  .emoji-panel {
    border-radius: 16px;
  }
  .emoji-item {
    height: 42px;
    font-size: 26px;
  }
  .emoji-grid {
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .emoji-panel.emoji-full {
    animation: none;
  }
  .emoji-toggle {
    transition: none;
  }
}
/* Productos (v0.1.2). */
.sidebar nav a span svg {
  display: block;
  width: 18px;
  height: 18px;
}
.products-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Same breathing room as between the dashboard stats and its cards. */
  margin-bottom: 22px;
}
.products-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 12px;
}
.products-search {
  flex: 1;
  margin: 0;
}
.products-table td {
  vertical-align: middle;
}
.products-table tr.inactive td {
  opacity: 0.55;
}
.products-table .stock-input {
  width: 110px;
  min-height: 36px;
  padding: 6px 10px;
}
.products-table .stock-input.out {
  border-color: #e0a090;
  background: #fff6f3;
}
.products-table .out-label {
  display: block;
  color: #a33a1f;
  font-weight: 600;
}
.products-table .row-actions {
  white-space: nowrap;
}
.products-table .row-actions button + button {
  margin-left: 6px;
}
.product-switch {
  justify-content: flex-start;
}
.sheet-pill {
  font-size: 11px;
  padding: 2px 8px;
  background: #e6f4ea;
}
.products-empty .placeholder-table {
  margin-top: 20px;
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
}
/* Productos: section switch (same component as «Citas activadas»). */
.products-toggle {
  margin: 0 0 22px;
}
/* Productos off: catalog stays editable but looks dimmed, like Citas. */
.products-off .products-stats,
.products-off .products-toolbar,
.products-off .products-table,
.products-off .products-empty {
  opacity: 0.55;
  filter: grayscale(0.6);
  transition:
    opacity 0.2s,
    filter 0.2s;
}
.products-off .products-stats:hover,
.products-off .products-toolbar:focus-within,
.products-off .products-table:hover,
.products-off .products-table:focus-within,
.products-off .products-empty:hover {
  opacity: 0.85;
  filter: none;
}
/* Productos: Google Sheets notice (linked from Conexiones). */
.products-sheet-note {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding: 20px 25px;
}
.products-sheet-note p,
.sheets-card p,
#gcal-card > p {
  margin: 0;
}
/* Google cards: head row spans the card, status pill on the right. */
.gcal-card > .conn-card-head {
  justify-self: stretch;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.gcal-card > .conn-card-head .pill {
  flex: none;
}
.products-sheet-note .actions,
.sheets-card .actions,
.bk-gcal .actions {
  margin: 4px 0 0;
}
.products-sheet-note.warn {
  border-color: #f0c674;
}
.sheet-error {
  color: #a33a1f;
}
.products-dialog {
  width: min(760px, 100%);
  max-height: min(88vh, 900px);
}
.products-dialog-body {
  padding: 18px 24px 24px;
  overflow: auto;
}
.product-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.product-form input::placeholder,
.product-form textarea::placeholder,
.products-dialog input::placeholder {
  color: #9aa294;
  opacity: 0.75;
}
.products-table {
  position: relative;
}
.mapping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px 12px;
}
.mapping-preview {
  margin-top: 12px;
  max-height: 220px;
  overflow: auto;
  font-size: 12px;
}
.sheet-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}
.sheet-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
}
.sheet-option:has(input:checked) {
  border-color: #779e00;
  background: #f6fbe6;
}
.sheet-option input {
  width: auto;
  flex: 0 0 auto;
  margin: 3px 0 0;
}
.sheet-option small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.import-errors ul {
  max-height: 200px;
  overflow: auto;
  font-size: 13px;
}
.crm-interests {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.crm-interest {
  font-size: 11px;
  padding: 2px 8px;
}
.crm-interest.out {
  background: #fff1e8;
}
.crm-interest.missing {
  background: #eef1ff;
}
@media (max-width: 760px) {
  .products-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 16px;
  }
  .products-toggle {
    margin-bottom: 16px;
  }
  .products-sheet-note {
    margin-top: 16px;
    padding: 18px;
  }
  .sheet-options,
  .product-form .form-row {
    grid-template-columns: 1fr;
  }
  .products-table .row-actions button {
    display: block;
    margin: 4px 0 0 !important;
  }
}

/* Inline SVG icons (replace Unicode symbols that render as emoji on mobile). */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.125em;
}
.with-ico,
a:has(> .ico-external),
button:has(> .ico-external) {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.pill.with-ico .ico {
  width: 1.1em;
  height: 1.1em;
  color: #5c7c00;
}
.feature-icon .ico {
  width: 22px;
  height: 22px;
  color: #3f5600;
}
/* Planes: landing section and «Planes y pagos». */
.pricing-sub {
  max-width: 640px;
  margin: 0 0 16px;
  color: var(--muted);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 14px;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-card.current {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px var(--lime) inset;
}
.pricing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pricing-card h3,
.pricing-card p {
  margin: 0;
}
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pricing-price strong {
  color: #111410;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.pricing-price > span {
  color: var(--muted);
  font-size: 14px;
}
/* Store-style price (priceHtml): big "$24", smaller ".99" aligned to the
   top of the digits. Same markup on the landing, Plan y pagos, the plan
   card, the gateway chooser and the superadmin. */
.price {
  display: inline-flex;
  align-items: flex-start;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.price-int {
  color: inherit;
  font-size: 1em;
}
.price-cents {
  color: inherit;
  font-size: 0.55em;
  line-height: 1;
  margin: 0.1em 0 0 0.04em;
  letter-spacing: 0;
}
.pay-plan .price-cents,
.banner .price-cents {
  font-size: 0.7em;
}
.admin-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-price .price-suffix {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.custom-plan-form .cp-price-preview {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #f5f7ef;
}
.custom-plan-form .cp-price-preview .pricing-price strong {
  font-size: 32px;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 6px 0 10px;
  display: grid;
  gap: 9px;
  flex: 1;
}
.pricing-features li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 15px;
}
.pricing-features .ico {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #5d7a00;
}
.pricing-card > .btn,
.pricing-card .plan-checkout {
  margin-top: auto;
}
.pricing-card > .btn {
  text-align: center;
}
.pricing-note {
  margin: 0 0 18px;
}
/* «¿Quieres un plan personalizado? Comunícate con nosotros» under the cards. */
.pricing-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 4px;
  padding: 12px 20px;
  max-width: 560px;
  border: 1px solid var(--line, #e3e6dc);
  border-radius: 999px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}
.pricing-custom .ico {
  flex: 0 0 auto;
  color: #5d7a00;
}
.pricing-custom a {
  color: #111410;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Custom plan offer in «Plan y pagos» (only when activated for the client). */
.custom-offer-wrap {
  margin: 0 0 22px;
}
.custom-offer {
  border-color: var(--lime);
}
.custom-summary {
  font-weight: 600;
}
/* Superadmin: custom plan form. */
.custom-plan-form .formrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.custom-plan-form details {
  margin: 4px 0;
}
.custom-plan-form summary {
  cursor: pointer;
  font-weight: 600;
}
@media (max-width: 860px) {
  .custom-plan-form .formrow {
    grid-template-columns: 1fr;
  }
}
.custom-plan-form {
  display: grid;
  gap: 14px;
}
.custom-plan-form .cp-status {
  margin: 0;
  color: var(--muted);
}
.custom-plan-form .cp-step {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid #e3e6dc;
  border-radius: 14px;
  background: #fcfdf9;
  min-width: 0;
}
.custom-plan-form .cp-step legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  font-weight: 700;
}
.custom-plan-form .cp-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lime);
  color: #111410;
  font-size: 12px;
  font-weight: 700;
}
.custom-plan-form .cp-help {
  display: block;
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
}
.custom-plan-form .cp-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.custom-plan-form .cp-advanced {
  padding: 10px 16px;
  border: 1px dashed #d6dacb;
  border-radius: 14px;
}
.custom-plan-form .cp-advanced[open] {
  display: grid;
  gap: 8px;
}
.custom-plan-form .cp-submit {
  display: grid;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid #e3e6dc;
}
.custom-plan-form .cp-submit button {
  justify-self: start;
}
@media (max-width: 700px) {
  .custom-plan-form .cp-pair {
    grid-template-columns: 1fr;
  }
  .custom-plan-form .cp-step {
    padding: 12px;
  }
}
/* Productos: plan with a manual-only catalog (Basic). */
.products-plan-note {
  display: grid;
  gap: 8px;
  margin: 0 0 22px;
  padding: 18px 25px;
  background: #fbfdf3;
}
.products-plan-note p {
  margin: 0;
}
.products-plan-note .actions {
  margin: 4px 0 0;
}
/* At (or over) the plan's product cap. */
.products-plan-note.products-cap-full {
  background: #fff3d6;
  border-color: #f0d48a;
}
.products-cap-msg {
  font-weight: 600;
}
.sheet-cap {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}
.sheet-cap p,
.import-cap p {
  margin: 0;
}
/* «Ocultar mensaje» / «Ver aviso de plan» (v0.1.16): small text buttons,
   44px tap target height, keyboard focus ring kept. */
button.cap-hide,
button.cap-show {
  border: 0;
  background: transparent;
  padding: 6px 4px;
  min-height: 32px;
  font-size: 13px;
  font-weight: 600;
  color: #4f6a00;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: var(--btn-radius-sm);
}
button.cap-hide:hover,
button.cap-show:hover,
button.cap-hide:focus-visible,
button.cap-show:focus-visible {
  background: #eef7cf;
  filter: none;
}
.products-plan-note .actions {
  align-items: center;
}
.products-plan-note.products-cap-near-note {
  background: #fbfdf3;
  border-color: #cfe58a;
}
.products-cap-hidden p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.sheet-cap-hidden {
  display: block;
}
@media (max-width: 860px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .pricing-price strong {
    font-size: 34px;
  }
}

/* Conexiones: one full-width column of cards, logos in the titles */
.conn-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.conn-stack > div:empty {
  display: none;
}
.conn-stack .card,
.conn-stack .ig-card,
.conn-stack .ig-operations,
.conn-stack .gcal-card {
  margin: 0;
}
#instagram-panel {
  display: grid;
  gap: 20px;
}
.conn-card {
  display: grid;
  gap: 12px;
  align-content: start;
}
.conn-card > * {
  margin: 0;
}
.conn-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.channel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.channel-title .brand-logo {
  flex: none;
  display: block;
}
.channel-title .brand-logo + .brand-logo {
  margin-left: -4px;
}
.gcal-icon.brand {
  background: #fff;
  border: 1px solid var(--line);
}
.conn-disconnect,
.ig-account [data-ig-disconnect] {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  justify-content: center;
}
.ig-account:has([data-ig-disconnect]) {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.conn-card-error .pill.error {
  background: #ffe3dc;
}
/* «Conectar con Facebook»: actions and page picker (0.1.20). */
.fb-actions {
  display: grid;
  gap: 10px;
}
[data-fb-login][hidden] {
  display: none;
}
.fb-actions [data-fb-login] {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}
.fb-picker {
  display: grid;
  gap: 10px;
}
.fb-picker[hidden] {
  display: none;
}
.fb-pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.fb-page {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 12px;
  justify-content: flex-start;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.fb-page:not(:disabled):hover {
  border-color: #1d1d1b;
}
.fb-page:disabled {
  opacity: 0.6;
}
.fb-page img,
.fb-page-initial {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.fb-page-initial {
  display: grid;
  place-items: center;
  background: #e7f0ff;
  color: #1877f2;
  font-weight: 700;
}
.fb-page-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.fb-page-name {
  font-weight: 600;
  overflow-wrap: break-word;
}
.fb-page-note {
  font-size: 13px;
  color: #6b6d66;
}
.fb-page-id {
  font-size: 12px;
  color: #8a8c85;
  font-variant-numeric: tabular-nums;
}
.fb-pages-search input {
  width: 100%;
}
.fb-pages-count {
  margin: 0;
  font-size: 13px;
}
/* Long page lists scroll inside the card (touch too); «Cancelar» stays below. */
.fb-pages-scroll {
  max-height: min(420px, 55vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 2px 4px 2px 0;
  border-radius: 12px;
}
.fb-pages li[hidden],
.fb-pages-empty[hidden] {
  display: none;
}
.fb-pages-help {
  margin: 0;
  font-size: 13px;
}
.fb-picker-actions {
  display: flex;
  gap: 8px;
}
@media (max-width: 700px) {
  .conn-stack {
    gap: 16px;
  }
  #instagram-panel {
    gap: 16px;
  }
}

/* Pricing: ✓ included / muted ✗ not included, no payment gateway yet */
.pricing-features li.off {
  color: #9a9c94;
}
.pricing-features li.off .ico {
  color: #b9bbb2;
  margin-top: 4px;
}
.pricing-features li.off > span {
  text-decoration: line-through;
  text-decoration-color: rgba(154, 156, 148, 0.5);
}
.pricing-card.featured {
  border-color: #1d1d1b;
  box-shadow: 0 18px 40px rgba(29, 29, 27, 0.08);
}
.plan-soon {
  margin-top: auto;
  display: grid;
  gap: 10px;
}
.plan-soon .btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pill.soon {
  background: rgba(255, 255, 255, 0.7);
  color: #1d1d1b;
  font-size: 11px;
  padding: 2px 8px;
}
.plan-soon-note {
  margin: 0;
  font-size: 14px;
  background: #f5f7ef;
  border-radius: 14px;
  padding: 12px 14px;
}

/* Conexiones: per-channel AI switch */
.conn-ai {
  display: grid;
  gap: 6px;
  background: #f5f7ef;
  border-radius: 16px;
  padding: 14px 16px;
}
.conn-ai .switch-label {
  margin: 0;
}
.conn-ai p {
  margin: 0;
  font-size: 14px;
}
.conn-ai-error {
  color: #b42318;
}

/* Landing: «Todo tu negocio en un solo lugar» */
.suite-head {
  max-width: 760px;
}
.suite-head p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}
.suite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.suite-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.suite-card h3 {
  margin: 10px 0 4px;
}
.suite-card p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.55;
}
.suite-ai {
  border-color: #c9e36a;
  box-shadow: 0 18px 50px #2c3c0a14;
}
.suite-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.suite-logos {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.suite-shot {
  margin: auto 0 0;
}
.suite-shot img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fafbf8;
}
.suite-extras-title {
  margin: 40px 0 16px;
}
.suite-extras {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.suite-extras li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  line-height: 1.5;
  font-size: 15px;
}
.suite-extras .feature-icon {
  flex: 0 0 auto;
  margin: 0;
}
@media (max-width: 900px) {
  .suite-grid,
  .suite-extras {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* AI model comparison (no prices): table on desktop, stacked cards on mobile. */
.model-compare {
  margin: 34px auto 0;
  max-width: 1080px;
  text-align: left;
}
.model-compare h3 {
  margin: 0 0 4px;
  font-size: 22px;
}
.model-compare > .muted {
  margin: 0 0 14px;
}
.compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--line, #e3e6dc);
  border-radius: 16px;
  background: #fff;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.compare-table th,
.compare-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #e3e6dc);
  vertical-align: middle;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}
.compare-table thead th {
  background: #f6f8f1;
  text-align: center;
}
.compare-table tbody th {
  font-weight: 600;
  color: #111410;
  min-width: 220px;
}
.compare-table td {
  text-align: center;
  color: #2a2f25;
  white-space: nowrap;
}
.compare-table td span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
}
.compare-plan {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #111410;
}
.compare-model {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.compare-col .pill {
  margin-top: 6px;
}
.compare-table .current {
  background: #f4fbe0;
  box-shadow:
    inset 2px 0 0 var(--lime),
    inset -2px 0 0 var(--lime);
}
.compare-table thead .current {
  background: #ecf8c8;
}
.rating-dots circle {
  fill: #e3e6dc;
}
.rating-dots circle.on {
  fill: #5d7a00;
}
@media (max-width: 700px) {
  .compare-scroll {
    overflow: visible;
    border: 0;
    background: none;
  }
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td {
    display: block;
    width: 100%;
  }
  .compare-table thead {
    display: none;
  }
  .compare-table tbody tr {
    margin: 0 0 12px;
    border: 1px solid var(--line, #e3e6dc);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
  }
  .compare-table tbody th {
    min-width: 0;
    background: #f6f8f1;
  }
  .compare-table td {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-align: left;
    white-space: normal;
  }
  .compare-table td::before {
    content: attr(data-label);
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--muted);
  }
  .compare-table td span {
    margin: 0;
    min-width: 92px;
    font-weight: 600;
  }
  .compare-table .current {
    box-shadow: inset 3px 0 0 var(--lime);
  }
}
.compare-cap {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  color: #4a5143;
  white-space: normal;
}
.compare-table thead th.compare-col {
  width: 24%;
  vertical-align: top;
}
/* Landing: custom-plan section under the three plans. */
.pricing-custom-section {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  max-width: 1080px;
  margin: 26px auto 0;
  padding: 26px 28px;
  text-align: left;
  border: 1px solid var(--line, #e3e6dc);
}
.pricing-custom-section .custom-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #f1fad6;
  color: #5d7a00;
}
.pricing-custom-section h3 {
  margin: 0 0 6px;
  font-size: 21px;
}
.pricing-custom-section p {
  margin: 0 0 10px;
  color: var(--muted);
}
.pricing-custom-section ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.pricing-custom-section li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pricing-custom-section li .ico {
  color: #5d7a00;
}
.pricing-custom-section .custom-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pricing-custom-section .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.pricing-custom-section .custom-email {
  font-size: 14px;
  color: #111410;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 700px) {
  .pricing-custom-section {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 20px;
  }
  .pricing-custom-section .custom-action {
    align-items: stretch;
  }
  .pricing-custom-section .btn {
    justify-content: center;
  }
  .pricing-custom-section .custom-email {
    text-align: center;
  }
}
.compare-legend {
  display: none;
}
@media (max-width: 700px) {
  .compare-legend {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
  }
  .compare-legend li {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #e3e6dc;
    border-radius: 12px;
    background: #fff;
    font-size: 13.5px;
  }
  .compare-legend li.current {
    background: #f4fbe0;
    box-shadow: inset 3px 0 0 var(--lime);
  }
  .compare-legend li span {
    color: #4a5143;
  }
}

/* Plan y pagos: activated custom plan as a full-width banner at the top. */
.custom-plan-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 28px;
  border-color: var(--lime);
  background: linear-gradient(135deg, #ffffff 0%, #f8fbea 100%);
}
.custom-plan-banner.current {
  box-shadow: 0 0 0 2px var(--lime) inset;
}
.cpb-main h2 {
  margin: 10px 0 4px;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.cpb-main .custom-summary {
  margin: 0 0 8px;
}
.cpb-features {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
  margin-bottom: 0;
}
.cpb-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  border-radius: 20px;
  background: #1d1d1b;
  color: white;
}
.cpb-side .pricing-price strong {
  color: var(--lime);
  font-size: 52px;
}
.cpb-side .pricing-price > span,
.cpb-side .cpb-monthly {
  color: #d9dccf;
  margin: 0;
}
.cpb-side .plan-soon {
  margin-top: 6px;
}
.cpb-side .btn.primary {
  min-height: 48px;
  font-size: 16px;
}
@media (max-width: 860px) {
  .custom-plan-banner {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .cpb-features {
    grid-template-columns: minmax(0, 1fr);
  }
  .cpb-main h2 {
    font-size: 24px;
  }
  .cpb-side .pricing-price strong {
    font-size: 44px;
  }
}

/* «Pagar»: gateway chooser dialog (760px wide on desktop, full width on
   mobile). Methods are full-width rows: icon, title + description, chevron. */
.release-dialog.pay-dialog {
  width: min(760px, 100%);
}
.pay-dialog-body {
  padding: 18px 24px 24px;
  overflow: auto;
  display: grid;
  gap: 12px;
}
.pay-dialog-body p {
  margin: 0;
}
.pay-plan {
  font-size: 17px;
}
.pay-chooser {
  display: grid;
  gap: 12px;
}
/* Embedded checkout open: the method list is hidden (only the chosen
   method's own summary stays above the iframe). */
.pay-chooser[hidden] {
  display: none;
}
.pay-embed-summary {
  padding: 10px 14px;
  border: 1px solid #aac810;
  border-radius: 12px;
  background: #f7fbe6;
}
.pay-embed-summary[hidden] {
  display: none;
}
.pay-embed-summary p {
  margin: 0;
}
.pay-embed-summary-label {
  font-weight: 600;
}
.pay-embed-summary-text {
  margin-top: 4px !important;
  font-size: 14px;
}
.pay-pick {
  font-weight: 600;
}
.pay-gateways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
button.pay-gateway {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: stretch;
  align-items: start;
  gap: 2px;
  justify-items: start;
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--btn-radius-lg);
  border: 1px solid var(--line);
  background: white;
  color: #111410;
  min-height: 64px;
}
button.pay-gateway:not(:disabled):hover,
button.pay-gateway:not(:disabled):focus-visible {
  border-color: var(--lime);
  background: #f8fbea;
}
button.pay-gateway:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Method logo / icon (inline SVG) left of the label. */
button.pay-gateway:has(.pay-gw-icon) {
  grid-template-columns: 36px 1fr;
  align-items: center;
  column-gap: 12px;
}
button.pay-gateway {
  position: relative;
  padding-right: 44px;
}
button.pay-gateway::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid #6b7166;
  border-right: 2px solid #6b7166;
  transform: translateY(-50%) rotate(45deg);
}
button.pay-gateway:not(:disabled):hover::after,
button.pay-gateway:not(:disabled):focus-visible::after {
  border-color: #111410;
}
.pay-gw-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f4f6f1;
}
.pay-gw-icon svg {
  display: block;
}
.pay-gw-text {
  display: grid;
  gap: 2px;
}
.pay-gw-label {
  font-weight: 700;
  font-size: 16px;
}
.pay-gw-desc {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}
.pay-status:empty {
  display: none;
}

/* Plan status card: «Mi plan» (/billing#plan) and Resumen. */
.plan-status-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 18px;
}
.stats + .plan-status-card {
  margin: 24px 0;
}
.psc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.psc-id h2 {
  margin: 6px 0 2px;
  font-size: 26px;
  line-height: 1.15;
}
.psc-sub {
  margin: 0;
}
.pill.warn {
  background: #fff3d6;
  color: #7a4b00;
}
.psc-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.psc-facts > div {
  background: #f5f7ef;
  border-radius: 16px;
  padding: 14px 16px;
  min-width: 0;
}
.psc-facts dt {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 4px;
}
.psc-facts dd {
  margin: 0;
  font-size: 15px;
}
.psc-facts dd strong {
  font-size: 24px;
  letter-spacing: -0.01em;
}
.psc-none {
  display: block;
  font-weight: 600;
}
.psc-link {
  color: #111410;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
}
.psc-usage {
  display: grid;
  gap: 8px;
}
.psc-usage p {
  margin: 0;
}
.psc-usage-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
progress.psc-bar {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 12px;
  border: 0;
  border-radius: 999px;
  background: #eef0e8;
  overflow: hidden;
}
progress.psc-bar::-webkit-progress-bar {
  background: #eef0e8;
  border-radius: 999px;
}
progress.psc-bar::-webkit-progress-value {
  background: var(--lime);
  border-radius: 999px;
}
progress.psc-bar::-moz-progress-bar {
  background: var(--lime);
  border-radius: 999px;
}
progress.psc-bar.full::-webkit-progress-value {
  background: #e0a100;
}
progress.psc-bar.full::-moz-progress-bar {
  background: #e0a100;
}
.psc-includes summary {
  cursor: pointer;
  font-weight: 700;
  padding: 4px 0;
}
.psc-features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 22px;
  margin: 10px 0 0;
}
.psc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.psc-note {
  margin: 0;
}
@media (max-width: 1100px) {
  .psc-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .psc-facts,
  .psc-features {
    grid-template-columns: minmax(0, 1fr);
  }
  .psc-id h2 {
    font-size: 22px;
  }
  .psc-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Planes y pagos tabs: «Planes y pagos» · «Mi plan» · «Facturas». */
.billing-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--line, #e4e2da);
}
.billing-tabs a {
  padding: 10px 14px;
  border-bottom: 3px solid transparent;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.billing-tabs a.active,
.billing-tabs a[aria-selected="true"] {
  border-bottom-color: #aac810;
}
.no-plan {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.renewal-banner p {
  margin: 0 0 6px;
}
/* Embedded checkout inside «Elige cómo pagar» (VEXPay / NOWPayments). */
.pay-embed {
  display: grid;
  gap: 10px;
}
.pay-embed[hidden] {
  display: none;
}
.pay-embed-back {
  justify-self: start;
}
.pay-embed-frame {
  min-height: 120px;
}
.pay-embed-frame iframe {
  display: block;
  border: 0;
  width: 100%;
  max-width: 100%;
}
.pay-embed-frame .pay-widget {
  width: 410px;
  max-width: 100%;
  height: 696px;
  max-height: 80vh;
  margin: 0 auto;
}
.pay-recurring {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 12px 14px;
  margin: 0 0 12px;
  border: 2px solid #aac810;
  border-radius: 12px;
  background: #f7fbe6;
  cursor: pointer;
}
.pay-recurring input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #aac810;
  cursor: pointer;
}
.pay-recurring-notice p {
  margin: 0 0 6px;
}
.pay-gw-mode[hidden] {
  display: none;
}
/* Productos: variantes (color y talla) y fotos. */
.product-cell .product-thumb {
  float: left;
  width: 40px;
  height: 40px;
  margin: 0 10px 4px 0;
  border-radius: 10px;
  object-fit: cover;
  background: #f5f7ef;
}
.products-table .variant-summary {
  color: var(--muted);
}
.products-table .stock-sum {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.products-table .stock-sum-note {
  display: block;
  font-size: 12px;
}
.products-table .product-price,
.variants-table .product-price {
  font-size: 1.05em;
}
.price-currency {
  margin-left: 0.3em;
  color: var(--muted);
  font-size: 0.75em;
  align-self: center;
}
.variants-editor,
.photos-editor {
  margin: 14px 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line, #e3e7da);
  border-radius: 14px;
}
.variants-editor legend,
.photos-editor legend {
  padding: 0 6px;
  font-size: 15px;
  font-weight: 700;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 8px 0;
}
.photo-card {
  position: relative;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line, #e3e7da);
  border-radius: 12px;
  background: #fff;
}
.photo-card img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  background: #f5f7ef;
}
.photo-card .photo-main {
  position: absolute;
  top: 12px;
  left: 12px;
}
.photo-card figcaption {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.photo-card.is-main {
  border-color: #a8d400;
  box-shadow: 0 0 0 1px #a8d400;
}
/* «Principal» and «Quitar»: one row, two equal buttons (desktop and phone). */
.photo-card .photo-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.photo-card .photo-actions button {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 6px 4px;
  font-size: 12px;
  white-space: nowrap;
}
/* The main photo's «Principal» is a state, not an action. */
.photo-card button.photo-first.is-main,
.photo-card button.photo-first.is-main:hover {
  background: #f2f9dc;
  border-color: #a8d400;
  color: #3d5200;
  opacity: 1;
  filter: none;
  cursor: default;
}
.photo-upload {
  cursor: pointer;
}
.inventory-photo-limit {
  max-width: 260px;
}

/* Superadmin «Banco de pruebas de modelos». */
.bench-models {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.bench-table table {
  min-width: 900px;
}
.bench-table th,
.bench-table td {
  vertical-align: top;
  text-align: left;
}
.bench-q {
  min-width: 220px;
  max-width: 320px;
  font-weight: 400;
}
.bench-cell {
  min-width: 240px;
}
.bench-text {
  white-space: pre-wrap;
  margin: 0.4rem 0;
}
.bench-meta {
  font-size: 0.8rem;
  color: var(--muted, #667);
  margin: 0.2rem 0 0;
}
.bench-error {
  color: #b42318;
  font-size: 0.85rem;
  margin: 0.3rem 0 0;
}
.bench-raw {
  white-space: pre-wrap;
  font-size: 0.8rem;
  max-height: 16rem;
  overflow: auto;
}
.pill.error {
  background: #fee4e2;
  color: #b42318;
}
.bench-turns {
  margin: 0.3rem 0;
  padding-left: 1.2rem;
  font-size: 0.85rem;
}
.bench-turns p {
  margin: 0.15rem 0;
  white-space: pre-wrap;
}
.bench-checks {
  list-style: none;
  margin: 0.3rem 0;
  padding: 0;
  font-size: 0.8rem;
}
.bench-checks .ok {
  color: #067647;
}
.bench-checks .fail {
  color: #b42318;
}

/* «Editar producto»: helpers, stock row and responsive variants table. */
.product-form .field {
  margin-bottom: 16px;
}
.product-form .form-row {
  column-gap: 16px;
  align-items: start;
}
.product-form .field-hint,
.products-dialog .field-hint {
  display: block;
  margin-top: -2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}
.product-form .section-hint {
  margin: 0 0 14px;
}
.product-form .stock-row .stock-toggle {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  /* Same top offset as the Stock input (label line + 8px gap). */
  padding-top: 26px;
}
.switch-label.switch-inline {
  justify-content: flex-start;
  gap: 10px;
  min-height: 46px;
  font-size: 14px;
}
.product-form .stock-row.is-computed #pf-stock {
  background: #f5f7ef;
  color: #20261a;
  font-weight: 700;
}
.product-form .stock-row.is-computed .stock-toggle {
  opacity: 0.6;
}
.product-form .active-row {
  display: grid;
  gap: 4px;
  margin: 4px 0 8px;
}
.product-form .active-row .switch-inline {
  min-height: 32px;
}
.product-form .form-actions {
  margin: 18px 0 0;
}
.variants-actions,
.photos-actions {
  margin: 4px 0 6px;
  align-items: center;
}
.variants-actions button .ico,
.photos-actions .ico {
  width: 14px;
  height: 14px;
}
.variants-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.variants-sum {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
}
.variants-sum:empty {
  display: none;
}
@media (max-width: 760px) {
  .products-dialog-body {
    padding: 14px 16px 18px;
  }
  /* Precio + Moneda stay side by side; the rest stacks. */
  .product-form .form-row.price-row {
    grid-template-columns: 2fr 1fr;
  }
  .product-form .stock-row .stock-toggle {
    padding-top: 0;
    margin-top: -6px;
  }
  .variants-editor,
  .photos-editor {
    padding: 10px 12px 12px;
  }
}

/* Fotos por color (editor) and per-color chips (Productos table). */
.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  background: var(--sw, #d9ddd2);
  border: 1px solid #0002;
  vertical-align: -2px;
}
.photos-subhead {
  margin: 14px 0 4px;
  font-size: 14px;
}
.vc-photo img,
.color-photo-empty {
  display: flex;
  width: 100%;
  height: 96px;
  border-radius: 10px;
  object-fit: contain;
  background: #f5f7ef;
}
.color-photo-empty {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed #c9cfbf;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.color-photo-empty .swatch {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}
.photo-grid .photo-empty {
  grid-column: 1 / -1;
  margin: 0;
}
/* Variantes: one card per color (photo, name, tallas with stock, subtotal). */
.variant-color-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 10px 0 0;
}
.variants-empty {
  margin: 4px 0;
}
.variant-color-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line, #e3e7da);
  border-radius: 14px;
  background: #fff;
}
.variant-color-card.out {
  background: #fbfbf8;
}
.vc-photo {
  display: grid;
  gap: 6px;
  align-content: start;
}
.vc-photo .photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.vc-photo .btn.small,
.vc-photo button.small {
  flex: 1 1 auto;
  justify-content: center;
  padding: 6px 8px;
  font-size: 12px;
}
.vc-photo-off .color-photo-empty {
  padding: 6px;
  text-align: center;
}
.vc-body {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: start;
}
.vc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.vc-name {
  display: flex;
  flex: 1 1 160px;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.vc-name .swatch {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}
.vc-name input {
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  border-radius: var(--field-radius);
  font-size: 15px;
  font-weight: 700;
}
.vc-sub {
  padding: 3px 10px;
  border-radius: 100px;
  background: #f1f4ea;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.vc-head .vc-remove-color {
  padding: 6px 10px;
  font-size: 12px;
}
.vc-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.size-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 3px 3px 10px;
  border: 1px solid var(--line, #e3e7da);
  border-radius: 100px;
  background: #fafbf7;
}
.size-chip.out {
  border-style: dashed;
}
.size-chip .size-name {
  min-width: 1.4em;
  font-size: 13px;
  text-align: center;
}
.size-chip input {
  width: 52px;
  min-width: 0;
  padding: 5px 6px;
  border-radius: 100px;
  font-size: 13px;
  text-align: center;
}
.size-chip .size-remove {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}
.size-chip .size-remove:hover,
.size-chip .size-remove:focus-visible {
  background: #fde8e6;
  color: #b42318;
}
.vc-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.vc-add .vc-size-new {
  width: 190px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: var(--field-radius);
  font-size: 13px;
}
.vc-add .vc-size-add {
  padding: 6px 10px;
}
.vc-add .vc-size-add .ico {
  width: 13px;
  height: 13px;
}
.size-pick {
  padding: 4px 9px;
  border: 1px dashed #c9cfbf;
  border-radius: var(--btn-radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.size-pick:hover,
.size-pick:focus-visible {
  border-style: solid;
  color: inherit;
}
.vc-more summary {
  width: fit-content;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.vc-more-grid {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.vc-more-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 6px;
  align-items: center;
}
.vc-more-row b {
  font-size: 13px;
}
.vc-more-row input {
  min-width: 0;
  padding: 6px 9px;
  border-radius: var(--field-radius);
  font-size: 13px;
}
@media (max-width: 760px) {
  /* Photo + color name side by side; tallas, añadir and más opciones below at full width. */
  .variant-color-card {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 10px;
  }
  .vc-body {
    display: contents;
  }
  .vc-head {
    align-self: start;
  }
  .vc-sizes,
  .vc-add,
  .vc-more {
    grid-column: 1 / -1;
  }
  .vc-photo img,
  .vc-photo .color-photo-empty {
    height: 84px;
  }
  .vc-photo .btn.small,
  .vc-photo button.small {
    padding: 5px 4px;
    font-size: 11px;
  }
  .vc-photo .btn.small .ico {
    display: none;
  }
  .vc-name {
    flex-basis: 100%;
  }
  .vc-head .vc-remove-color {
    margin-left: auto;
  }
  .vc-add .vc-size-new {
    flex: 1 1 140px;
    width: auto;
  }
  .size-chip input {
    width: 46px;
    font-size: 16px;
  }
  /* 16px: iOS does not zoom into the field. */
  .vc-name input,
  .vc-add .vc-size-new,
  .vc-more-row input {
    font-size: 16px;
  }
  .vc-more-row {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 0.8fr);
  }
}
.color-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 6px 0 2px;
}
.color-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 3px;
  border: 1px solid var(--line, #e3e7da);
  border-radius: 100px;
  background: #fff;
  font-size: 11px;
  line-height: 1.6;
}
.color-chip img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.color-chip .swatch {
  width: 16px;
  height: 16px;
  margin-left: 2px;
}
.color-chip b {
  font-variant-numeric: tabular-nums;
}
.color-chip.out {
  color: #b42318;
  border-color: #f3c6c1;
}

/* ---------------------------------------------- Configuración (company) */
.settings-page {
  max-width: 1120px;
}
.settings-intro h1 {
  margin: 12px 0 10px;
}
.settings-intro p {
  max-width: 760px;
  margin: 0 0 28px;
}
.settings-page .settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "perfil seguridad"
    "idioma idioma";
  gap: 24px;
  align-items: stretch;
}
.settings-grid > #perfil {
  grid-area: perfil;
}
.settings-grid > #idioma {
  grid-area: idioma;
}
.settings-grid > #seguridad {
  grid-area: seguridad;
}
/* Idioma: one compact row on desktop (title left, control right). */
@media (min-width: 861px) {
  .settings-grid > #idioma {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .settings-grid > #idioma .settings-card-head {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .settings-grid > #idioma .settings-card-body {
    flex: 0 0 auto;
  }
}
.settings-fields-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
/* Sub-blocks inside «Seguridad»: Contraseña, Correo de acceso, … */
.settings-subblock {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.settings-subblock + .settings-subblock {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.settings-subblock h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.settings-subblock > .settings-help {
  margin: 4px 0 16px;
  font-size: 13px;
}
.settings-subblock .settings-actions {
  margin-top: 0;
}
.settings-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border-radius: 20px;
}
.settings-card-head {
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.settings-card-head h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.settings-help {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
.settings-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.settings-card-body > p {
  margin: 0 0 14px;
}
.settings-form {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.settings-page .field {
  margin-bottom: 16px;
  color: #20261a;
}
.settings-page .field input {
  min-height: 46px;
  font-size: 14px;
}
.settings-page .field input:focus {
  outline: none;
  border-color: #8ebc00;
  box-shadow: 0 0 0 3px rgba(181, 230, 0, 0.28);
}
.settings-page input[readonly] {
  background: #f5f7ef;
  color: #5c6455;
}
.settings-note {
  margin: -6px 0 16px;
  font-size: 13px;
  line-height: 1.5;
}
.settings-status-line:empty {
  display: none;
}
.settings-status-line {
  margin: 14px 0 0;
  font-size: 13px;
}
/* Primary action at the bottom-left of every card. */
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--button-gap);
  margin-top: 4px;
}
.settings-actions button {
  min-height: 46px;
  padding: 12px 22px;
}
/* «Mostrar» inside the password field. */
.settings-page .password-control {
  position: relative;
  display: block;
}
.settings-page .password-control input {
  width: 100%;
  padding-right: 92px;
}
.settings-page .password-control .password-toggle {
  position: absolute;
  width: auto;
  top: 50%;
  right: 6px;
  min-height: 34px;
  padding: 6px 12px;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--btn-radius-sm);
  background: #f1f4ea;
  color: #3d4536;
  font-size: 12px;
  font-weight: 700;
}
.settings-page .password-control .password-toggle:hover {
  background: #e6ebdc;
}
.settings-page .password-control .password-toggle:focus-visible {
  outline: 2px solid #8ebc00;
  outline-offset: 1px;
}
/* Logo: preview + drop zone + styled button (native input hidden). */
.logo-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.logo-preview .account-avatar {
  width: 84px;
  height: 84px;
  border-radius: 18px;
  border: 1px solid var(--line);
}
.logo-drop {
  display: grid;
  flex: 1;
  min-width: 220px;
  gap: 4px;
  justify-items: start;
  padding: 16px 18px;
  border: 1.5px dashed #cfd8c2;
  border-radius: 16px;
  background: #fafbf7;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.logo-drop:hover,
.logo-drop.dragging {
  border-color: #8ebc00;
  background: #f4f9e6;
}
.logo-drop:focus-within {
  outline: 2px solid #8ebc00;
  outline-offset: 2px;
}
.logo-drop.busy {
  opacity: 0.6;
  pointer-events: none;
}
.logo-drop-title {
  font-size: 13px;
  font-weight: 700;
  color: #20261a;
}
.logo-drop-text,
.logo-drop-hint {
  font-size: 13px;
  color: var(--muted);
}
.logo-drop-button {
  margin: 6px 0 4px;
  background: var(--lime);
  border-color: var(--lime);
}
.link-button {
  border: 0;
  background: none;
  padding: 6px 0;
  color: #a3301f;
  text-decoration: underline;
}
/* Idioma: segmented control. */
.segmented {
  display: inline-grid;
  grid-auto-columns: minmax(120px, 1fr);
  grid-auto-flow: column;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--btn-radius-lg);
  background: #f5f7ef;
}
.segmented-option {
  position: relative;
  cursor: pointer;
}
.segmented-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.segmented-option span {
  display: block;
  padding: 10px 18px;
  border-radius: var(--btn-radius-sm);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  color: #5c6455;
}
.segmented-option input:checked + span {
  background: white;
  color: #141810;
  box-shadow: 0 1px 3px rgba(20, 24, 16, 0.12);
}
.segmented-option input:focus-visible + span {
  outline: 2px solid #8ebc00;
  outline-offset: 1px;
}
/* Danger zone: full width, last. */
.settings-danger {
  margin-top: 24px;
  border-color: #f0d6d0;
}
.settings-danger .settings-card-head h2 {
  color: #a3301f;
}
.danger-outline {
  border-color: #e3b7ad;
  color: #a3301f;
  background: white;
}
.settings-danger form {
  max-width: 520px;
}
@media (max-width: 860px) {
  .settings-page .settings-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "perfil" "seguridad" "idioma";
    grid-template-rows: none;
    gap: 18px;
  }
  .settings-fields-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-card {
    padding: 22px 18px;
  }
  .settings-danger {
    margin-top: 18px;
  }
  .settings-actions button {
    width: 100%;
  }
  .segmented {
    display: grid;
    width: 100%;
  }
}
/* «Doble verificación» (Configuración › Seguridad) */
.twofa-state {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: 2px;
}
.twofa-state.on {
  background: #eaf7c2;
  color: #3d4b00;
}
.twofa-state.off {
  background: #f0f1ed;
  color: var(--muted);
}
.twofa-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.twofa-methods legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}
.twofa-method {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.twofa-method:has(input:checked) {
  border-color: #8fb300;
  box-shadow: 0 0 0 3px rgb(181 230 0 / 25%);
}
.twofa-method.unavailable {
  cursor: not-allowed;
  background: #f7f8f5;
}
.twofa-method input {
  margin-top: 3px;
  accent-color: #5d7000;
}
.twofa-method-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.twofa-method-body b {
  font-size: 14px;
}
.twofa-method-body span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.twofa-steps {
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.6;
}
.twofa-qr-row {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
}
.twofa-qr svg {
  display: block;
  width: 168px;
  height: 168px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.twofa-key {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
}
.twofa-key code {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f0f1ed;
  font-size: 14px;
  letter-spacing: 0.06em;
  word-break: break-all;
}
.twofa-code {
  font-size: 18px;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}
.twofa-summary {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
}
.settings-fields-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.twofa-recovery {
  margin-bottom: 8px;
  padding: 16px;
  border: 1px dashed #8fb300;
  border-radius: 12px;
  background: #fbfdf3;
}
.twofa-recovery h4 {
  margin: 0;
  font-size: 15px;
}
.twofa-recovery-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 14px;
}
.twofa-recovery-list code {
  letter-spacing: 0.08em;
}
.twofa-login .auth-2fa-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  margin: 14px 0 4px;
}
.twofa-login .auth-2fa-error {
  margin: 6px 0 10px;
  color: #b42318;
  font-size: 13px;
}
@media (max-width: 860px) {
  .twofa-methods,
  .settings-fields-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .twofa-qr-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* «Doble verificación» modal (same shell as «Elige cómo pagar»). */
.twofa-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: space-between;
}
.twofa-row .twofa-summary {
  margin: 0;
}
.twofa-row .twofa-open {
  flex: 0 0 auto;
  min-width: 132px;
}
.twofa-dialog-body {
  gap: 16px;
}
.twofa-dialog .twofa-methods {
  margin: 0;
}
.twofa-card {
  padding: 16px;
  border-radius: 16px;
  min-height: 100%;
}
.twofa-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.twofa-card:has(input:focus-visible) {
  outline: 2px solid #5d7000;
  outline-offset: 2px;
}
.twofa-card {
  position: relative;
}
.twofa-card-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #f0f1ed;
  font-size: 18px;
}
.twofa-card:has(input:checked) .twofa-card-icon {
  background: #eaf7c2;
}
.twofa-card.danger:has(input:checked) {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgb(217 45 32 / 15%);
}
.twofa-stepper {
  display: grid;
  gap: 8px;
}
.twofa-step-of {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.twofa-stepper ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.twofa-stepper li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 4px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.twofa-stepper li span {
  font-weight: 700;
}
.twofa-stepper li.done {
  border-top-color: #b5e600;
}
.twofa-stepper li.current {
  border-top-color: #5d7000;
  color: var(--ink, #111410);
  font-weight: 600;
}
.twofa-error {
  margin: 0;
  color: #b42318;
  font-size: 13px;
}
.twofa-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.twofa-done {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 0 4px;
  text-align: center;
}
.twofa-done h3 {
  margin: 0;
  font-size: 19px;
}
.twofa-done-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #eaf7c2;
  color: #3d4b00;
  font-size: 28px;
  font-weight: 700;
}
.twofa-dialog .twofa-recovery {
  margin: 0;
}
.twofa-dialog [hidden] {
  display: none !important;
}
@media (max-width: 760px) {
  .twofa-dialog .twofa-methods {
    grid-template-columns: minmax(0, 1fr);
  }
  .twofa-stepper li {
    font-size: 0;
  }
  .twofa-stepper li span {
    font-size: 12px;
  }
  .twofa-actions > button {
    flex: 1 1 auto;
  }
  .twofa-row .twofa-open {
    width: 100%;
  }
}
/* `hidden` must win over .settings-form { display: grid } in the 2FA steps. */
.twofa-dialog .twofa-methods + .settings-help,
.twofa-dialog .twofa-methods ~ .settings-help {
  margin-top: 14px;
}
#doble-verificacion [hidden] {
  display: none !important;
}
/* «Periodo de pago» in «Elige cómo pagar»: 4 options + total / monthly / savings. */
.pay-periods {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.pay-periods legend {
  padding: 0;
  margin: 0 0 8px;
  font-weight: 700;
}
.pay-period-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pay-period {
  position: relative;
  display: flex;
  cursor: pointer;
}
.pay-period input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.pay-period span {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 8px 6px;
  border: 1.5px solid #e2e5dc;
  border-radius: var(--btn-radius);
  background: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}
.pay-period input:checked + span {
  border-color: #aac810;
  background: #f7fbe6;
  box-shadow: 0 0 0 1px #aac810 inset;
}
.pay-period input:focus-visible + span {
  outline: 2px solid #111410;
  outline-offset: 2px;
}
.pay-period-off {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #4f6b00;
  background: #e7f6b0;
  border-radius: 999px;
  padding: 1px 8px;
}
.pay-quote {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f6f7f3;
}
.pay-quote p {
  margin: 0;
}
.pay-quote-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.pay-quote-total strong {
  font-size: 26px;
  line-height: 1.1;
}
.pay-quote-label {
  font-weight: 600;
  margin-right: 4px;
}
.pay-quote-unit {
  color: #5d6459;
  font-size: 13px;
}
.pay-quote-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 4px !important;
  color: #3d4339;
}
.pay-quote-save {
  font-weight: 700;
  color: #4f6b00;
}
.pay-recurring[hidden],
.pay-recurring-off[hidden] {
  display: none;
}
.pay-recurring-off {
  margin: 0 0 12px;
  font-size: 13px;
}
@media (max-width: 560px) {
  .pay-period-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Superadmin (/admin, /modelos): one spacing scale. Scoped to `.superadmin`
   so the client panel and the landing keep their own spacing. Button radii
   stay on --btn-radius (8/6/10px). */
.superadmin {
  --sa-gap: var(--space-6); /* between cards */
  --sa-pad: var(--space-6); /* inside cards */
}
.superadmin > h1 {
  margin: var(--space-3) 0 var(--space-4);
}
.superadmin > h2 {
  margin: calc(var(--space-6) * 2) 0 var(--space-3);
}
.superadmin > h2 + p {
  margin: 0 0 var(--space-4);
}
.superadmin .banner {
  margin: 0 0 var(--space-6);
}
.superadmin .card {
  padding: var(--sa-pad);
}
.superadmin .card > h2,
.superadmin .card > h3,
.superadmin form > h3 {
  margin: 0 0 var(--space-3);
}
.superadmin .card > h3:not(:first-child),
.superadmin .card > h2 ~ h3 {
  margin-top: var(--space-6);
}
.superadmin .card p {
  margin: 0 0 var(--space-3);
}
.superadmin .card > :last-child {
  margin-bottom: 0;
}
.superadmin .formgrid,
.superadmin .features {
  gap: var(--sa-gap);
}
.superadmin .field {
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.superadmin .agency-confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.superadmin .agency-confirm input[type="checkbox"],
.superadmin .agency-confirm input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  margin: 4px 0 0;
}
.superadmin .actions {
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-6);
}
/* Company search + list rows. */
.superadmin .agency-filters {
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.superadmin .agency-filters .field {
  margin-bottom: 0;
}
.superadmin #agency-companies > p {
  margin: 0 0 var(--space-3);
}
.superadmin .table-wrap.card {
  padding: var(--space-2) var(--space-4);
}
.superadmin th,
.superadmin td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}
.superadmin th {
  padding-top: var(--space-4);
}
.superadmin tr:last-child td {
  border-bottom: 0;
}
/* Company detail, actions and «Facturas». */
.superadmin #agency-detail > * + * {
  margin-top: var(--sa-gap);
}
.superadmin #agency-detail > article p {
  margin-bottom: var(--space-2);
}
.superadmin .agency-actions {
  margin-top: var(--sa-gap);
  gap: var(--sa-gap);
}
.superadmin .agency-actions form {
  gap: var(--space-4);
}
.superadmin .agency-actions form > h3,
.superadmin .agency-actions form > p,
.superadmin .agency-actions .field,
.superadmin .agency-actions .agency-confirm {
  margin: 0;
}
/* Model override + custom plan (cp steps). */
.superadmin .custom-plan-form {
  gap: var(--space-4);
}
.superadmin .custom-plan-form .cp-step {
  gap: var(--space-3);
  padding: var(--space-4);
}
.superadmin .custom-plan-form .cp-step .field {
  margin-bottom: 0;
}
.superadmin .custom-plan-form .cp-pair {
  gap: var(--space-4);
}
.superadmin .custom-plan-form .cp-advanced {
  padding: var(--space-3) var(--space-4);
}
.superadmin .custom-plan-form .cp-advanced[open] {
  gap: var(--space-3);
}
.superadmin .custom-plan-form .cp-submit {
  gap: var(--space-3);
  padding-top: var(--space-4);
}
/* /modelos panels. */
.superadmin #bench-run > h3:not(:first-child) {
  margin-top: var(--space-6);
}
.superadmin .bench-sandbox {
  margin: 0 0 var(--space-4);
}
.superadmin .bench-models {
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.superadmin .bench-models .agency-confirm {
  margin: 0;
}
.superadmin #bench-progress > .card,
.superadmin #bench-results > * {
  margin-top: var(--sa-gap);
}
@media (max-width: 700px) {
  .superadmin {
    --sa-gap: var(--space-4);
    --sa-pad: var(--space-4);
  }
  .superadmin > h2 {
    margin-top: var(--space-6);
  }
  .superadmin .card > h3:not(:first-child),
  .superadmin #bench-run > h3:not(:first-child) {
    margin-top: var(--space-4);
  }
  .superadmin .custom-plan-form .cp-step {
    padding: var(--space-3);
  }
  .superadmin .custom-plan-form .cp-pair {
    gap: var(--space-3);
  }
  .superadmin th,
  .superadmin td {
    padding: var(--space-2) var(--space-3);
  }
}

/* «Modo IA»: one radio per line, label next to it. */
.superadmin .ai-mode-options {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}
.superadmin .ai-mode-options .agency-confirm {
  justify-content: flex-start;
  text-align: left;
}

/* ---------- v0.1.8: version card at the end of the page ---------- */
.app-footer {
  /* Bottom room so the fixed Flowy launcher never covers the card. */
  padding: 8px 32px 96px;
  max-width: 1450px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.app-version-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdf6 0%, #ffffff 100%);
  box-shadow: 0 1px 2px #11141008;
}
.app-version-id {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* BeartFlow's own mark (never the client's logo). */
.app-version-mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px #11141010;
}
.app-version-mark img {
  display: block;
  width: 20px;
  height: 20px;
}
.app-version-card .workspace-product {
  font-size: 14px;
  font-weight: 700;
  color: #1d1d1b;
}
.app-version-card button.release-notes-link {
  width: auto;
}
@media (max-width: 700px) {
  .app-footer {
    /* Room for the Flowy launcher (fixed, bottom right). */
    padding: 4px 15px 96px;
  }
  .app-version-card {
    padding: 10px 12px;
    border-radius: 14px;
  }
  .app-version-card button.release-notes-link {
    flex: 1 0 100%;
    justify-content: center;
  }
}

/* ---------- v0.1.8: notifications panel always inside the screen ---------- */
@media (max-width: 700px) {
  .topbar {
    position: relative;
  }
  /* Full-width sheet under the header, 12 px from each edge. */
  .notif-wrap {
    position: static;
  }
  .notif-panel {
    left: 12px;
    right: 12px;
    top: calc(100% + 6px);
    width: auto;
    max-height: min(70vh, 520px);
  }
}

/* ---------- v0.1.8: inbox like a messaging app ---------- */
.inbox-heading {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.inbox-title {
  min-width: 0;
}
.inbox-head-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.inbox-tool {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
}
.inbox-tool:disabled {
  opacity: 0.45;
}
.inbox-filters-wrap {
  position: relative;
  margin-bottom: 14px;
}
.inbox-filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 4px;
}
.inbox-filterbar::-webkit-scrollbar {
  display: none;
}
.inbox-status-toggle,
.inbox-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  color: #1d1d1b;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
}
.inbox-status-toggle {
  padding: 0 12px 0 14px;
  gap: 4px;
}
.inbox-status-toggle .ico-chevron {
  color: #697066;
}
.inbox-status-label {
  margin-left: 4px;
}
.inbox-status-toggle.active,
.inbox-pill.active {
  background: var(--lime);
  border-color: var(--lime);
  color: #141810;
}
.inbox-status-toggle.active .ico-chevron {
  color: #141810;
}
.inbox-pill .brand-logo {
  flex: none;
}
.inbox-pill .inbox-count {
  min-width: 20px;
  padding: 1px 6px;
}
.inbox-pill.active .inbox-count {
  background: #141810;
  color: white;
}
.inbox-status-toggle:focus-visible,
.inbox-pill:focus-visible,
.thread:focus-visible,
.chat-back:focus-visible,
.chat-menu-toggle:focus-visible {
  outline: 2px solid #141810;
  outline-offset: 2px;
}
.inbox-status-menu {
  position: absolute;
  z-index: 70;
  padding: 6px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(17, 20, 16, 0.16);
  display: flex;
  flex-direction: column;
}
.inbox-status-menu[hidden] {
  display: none;
}
.inbox-status-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  box-shadow: none;
}
.inbox-status-option:hover,
.inbox-status-option:focus-visible {
  background: #f4f8e8;
}
.inbox-status-check {
  display: inline-grid;
  color: #4b6400;
  visibility: hidden;
}
.inbox-status-option[aria-checked="true"] .inbox-status-check {
  visibility: visible;
}
/* Conversation rows: avatar, bold name, preview · time, unread dot. */
.threads {
  padding: 8px;
}
.thread {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 72px;
  margin: 0 0 2px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  box-shadow: none;
}
.thread:hover {
  background: #f7f9f2;
}
.thread.active {
  background: #f0f7db;
  border-color: #deebb9;
}
/* Instagram-DM-sized avatars: 52px desktop list, 56px phones, 40px header.
   Black circle (brand ink) with white initials or the channel logo. */
.thread-avatar {
  --size: 52px;
  position: relative;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #111410;
  color: #ffffff;
  font-weight: 700;
  font-size: calc(var(--size) * 0.38);
  letter-spacing: 0.01em;
}
.thread-avatar > .brand-logo {
  width: calc(var(--size) * 0.56);
  height: calc(var(--size) * 0.56);
}
.chat-head .thread-avatar {
  --size: 40px;
}
.thread-badge {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px white;
}
.thread-badge .brand-logo {
  width: 15px;
  height: 15px;
}
.chat-head .thread-badge {
  width: 16px;
  height: 16px;
}
.chat-head .thread-badge .brand-logo {
  width: 12px;
  height: 12px;
}
.thread-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.thread-top,
.thread-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.thread-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  color: #1d1d1b;
}
.thread-time {
  flex: none;
  font-size: 12px;
  color: var(--muted);
}
.thread-preview {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
}
.thread-preview.unread {
  color: #1d1d1b;
  font-weight: 600;
}
.thread-chip {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f0f2ed;
  color: #4d5447;
}
.thread-chip.human {
  background: #fff1d6;
  color: #7a4b00;
}
.thread-chip.ai {
  background: #eef7cf;
  color: #3d5200;
}
.thread-unread {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2f7cf6;
}
/* Thread header: back (phones), avatar, name, actions. Instagram-DM-like
   bar: at least 72px tall, 14px top/bottom, 40px avatar, 28px back / more
   glyphs in 44px tap targets. */
.chat-head {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 12px;
  min-height: 72px;
  padding: 14px 20px;
  position: relative;
}
.chat-title {
  flex: 1 1 auto;
  min-width: 0;
}
.chat-title h3 {
  margin: 0 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}
.chat-title .muted {
  display: block;
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-back,
.chat-menu-toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  place-items: center;
  box-shadow: none;
  color: #1d1d1b;
}
.chat-back .ico,
.chat-menu-toggle .ico {
  width: 28px;
  height: 28px;
}
.chat-actions {
  flex: none;
}
/* «Eliminar conversación»: inline confirmation under the thread header. */
.chat-confirm {
  flex: none;
  margin: 12px 16px 0;
  padding: 14px 16px;
  border: 1px solid #efcaca;
  border-radius: 12px;
  background: #fff7f6;
  color: #1d1d1b;
}
.chat-confirm[hidden] {
  display: none;
}
.chat-confirm h4 {
  margin: 0 0 6px;
  font-size: 15px;
  color: #a12626;
}
.chat-confirm p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.5;
}
.chat-confirm-actions {
  justify-content: flex-end;
  gap: var(--button-gap);
  margin-top: 10px;
}
button.danger-solid {
  background: #b42318;
  border-color: #b42318;
  color: #ffffff;
}
button.danger-solid:hover,
button.danger-solid:focus-visible {
  background: #912018;
  border-color: #912018;
}
button.danger-solid:disabled {
  opacity: 0.7;
}
/* Chat bubbles: customer left (grey), business / AI right (brand green). */
.messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fbfcf8;
}
.messages .bubble {
  align-self: flex-end;
  width: fit-content;
  max-width: min(78%, 560px);
  margin: 2px 0;
  padding: 9px 13px 7px;
  border-radius: 18px 18px 5px 18px;
  background: #dff0a6;
  color: #1d1d1b;
  line-height: 1.45;
}
.messages .bubble.in {
  align-self: flex-start;
  margin: 2px 0;
  border-radius: 18px 18px 18px 5px;
  background: #eef0eb;
}
.messages .bubble.note {
  align-self: center;
  max-width: min(90%, 520px);
  border-radius: 14px;
  background: #fff8e1;
}
.messages .bubble small {
  margin-top: 4px;
  font-size: 10.5px;
  color: #6b7264;
  text-align: right;
}
.messages .bubble.in small {
  text-align: left;
}
@media (max-width: 767px) {
  .inbox-heading h1 {
    font-size: 24px;
    margin-bottom: 4px;
  }
  .inbox-heading .muted {
    font-size: 12px;
    line-height: 1.4;
  }
  /* Phones: the list sits on the page, edge to edge, like Instagram DMs
     (no card); rows keep 16px side padding. */
  .inbox {
    display: block;
    min-height: 0;
    margin: 0 -20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .threads {
    display: block;
    max-height: none;
    overflow: visible;
    border: 0;
    padding: 0;
    background: transparent;
  }
  .thread {
    min-width: 0;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 8px 8px;
    gap: 14px;
  }
  .threads .thread-avatar {
    --size: 56px;
  }
  .threads .thread {
    padding: 8px 16px;
    border: 0;
    border-radius: 0;
  }
  .threads .empty {
    padding: 24px 16px;
  }
  .thread.active {
    background: transparent;
    border-color: transparent;
  }
  .chat {
    display: none;
    min-height: 0;
  }
  /* Thread: a full-screen view with a top bar and the composer at the end. */
  .inbox.thread-open .chat {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 95;
    height: 100vh;
    height: 100dvh;
    background: white;
  }
  .inbox.thread-open .chat-head {
    min-height: 72px;
    padding: 14px 4px;
    padding-top: max(14px, env(safe-area-inset-top));
    gap: 6px;
    background: white;
    border-bottom: 1px solid var(--line);
  }
  .chat-back,
  .chat-menu-toggle {
    display: inline-grid;
  }
  .chat-actions {
    display: none;
    position: absolute;
    right: 10px;
    top: calc(100% - 4px);
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 220px;
    padding: 6px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(17, 20, 16, 0.16);
  }
  .chat-actions.open {
    display: flex;
  }
  .chat-actions .small {
    border: 0;
    box-shadow: none;
    text-align: left;
    justify-content: flex-start;
    padding: 11px 12px;
    font-size: 14px;
  }
  .chat-actions .small:hover,
  .chat-actions .small:focus-visible {
    background: #f4f8e8;
  }
  .inbox.thread-open .messages {
    max-height: none;
    flex: 1 1 auto;
    padding: 12px;
  }
  .inbox.thread-open .compose-hint {
    padding: 8px 14px 0;
  }
  .inbox.thread-open .compose {
    padding: 8px 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    background: white;
    align-items: center;
  }
  .inbox.thread-open .compose input {
    border-radius: 999px;
    padding-left: 16px;
  }
  .messages .bubble {
    max-width: 82%;
  }
  body.inbox-thread-open {
    overflow: hidden;
  }
  body.inbox-thread-open .flowy-launcher,
  body.inbox-thread-open .flowy-nudge,
  body.inbox-thread-open .flowy-panel {
    display: none;
  }
}

@media (max-width: 700px) {
  .inbox {
    margin: 0 -15px;
  }
}
/* «Reportar respuesta»: one small per-reply action on AI replies (Flowy and
   the inbox) and its modal (feedback-ui.js). */
button.report-reply {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 6px;
  border: 0;
  border-radius: var(--btn-radius-sm);
  background: transparent;
  color: #6b7064;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  min-height: 0;
  box-shadow: none;
}
button.report-reply:hover,
button.report-reply:focus-visible {
  background: #eef0e6;
  color: #1d1d1b;
}
.bubble button.report-reply {
  display: flex;
  margin-left: auto;
}
.flowy-bubble-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.flowy-msg.mine .flowy-bubble-col {
  align-items: flex-end;
}
.report-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  background: #11141066;
  display: grid;
  place-items: center;
  padding: 20px;
}
.report-dialog {
  background: white;
  border-radius: 20px;
  width: min(460px, 100%);
  box-shadow: 0 24px 70px #11141033;
  overflow: hidden;
}
.report-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.report-head h2 {
  margin: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
button.report-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--btn-radius-sm);
  font-size: 20px;
  line-height: 1;
}
.report-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 20px 18px;
}
.report-form p {
  margin: 0;
  font-size: 13px;
}
.report-form label {
  font-weight: 600;
  font-size: 13px;
}
.report-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
}
.report-count {
  align-self: flex-end;
  font-size: 11px;
}
/* v0.1.18: the generic `input { width: 100% }` made the box take the row
   and pushed the text to the right; box at its own size, text right beside it. */
.report-form label.report-check {
  display: flex;
  width: auto;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  font-weight: 500;
}
.report-form label.report-check input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
}
.report-form label.report-check span {
  flex: 0 1 auto;
  min-width: 0;
}
.report-context {
  font-size: 12px;
}
.report-status:empty {
  display: none;
}
.report-status {
  color: #9a3412;
}
.report-status.ok {
  color: #3f6212;
}
.report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Flowy v0.1.16: allowlisted link buttons and step images under an answer. */
.flowy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.flowy-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 11px;
  border-radius: var(--btn-radius);
  border: 1px solid #1d1d1b;
  background: #1d1d1b;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.flowy-link-btn:hover,
.flowy-link-btn:focus-visible {
  background: #aac810;
  border-color: #aac810;
  color: #1d1d1b;
}
.flowy-step {
  align-self: stretch;
  min-width: 220px;
  margin: 8px 0 0;
  border: 1px solid #e6e8de;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.flowy-step img {
  display: block;
  width: 100%;
  height: auto;
}
.flowy-step figcaption {
  padding: 5px 9px;
  font-size: 12px;
  color: #5d5f55;
}
.section-flash {
  animation: section-flash 1.6s ease-out;
}
@keyframes section-flash {
  0%,
  35% {
    box-shadow: 0 0 0 3px #aac810;
  }
  100% {
    box-shadow: 0 0 0 0 #aac81000;
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-flash {
    animation: none;
    box-shadow: 0 0 0 3px #aac810;
  }
}
/* Logged-out help («¿Necesitas ayuda?» on /login, /forgot, /reset). */
.public-help-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed #c9d88a;
  border-radius: 14px;
  background: #fafcf0;
  color: #1d1d1b;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.public-help-entry:hover,
.public-help-entry:focus-visible {
  background: #f1f7d6;
}
.public-help-entry strong {
  display: block;
  font-size: 14px;
}
.public-help-entry span.hint {
  display: block;
  font-size: 12.5px;
  color: #5d5f55;
}
.flowy.public-help .flowy-launcher {
  display: none;
}
.public-help-captcha {
  flex: none;
  padding: 4px 14px 0;
}
.public-help-captcha:empty {
  display: none;
}

/* v0.1.18: landing hero demo (public/landing-demo.js). Sample data only;
   pure CSS animations, paused offscreen / on the pause button (.ld-paused),
   static frame with prefers-reduced-motion. */
.ld .preview-top {
  align-items: center;
  gap: 10px;
}
/* «Asistente de IA · Activada»: the panel's channel AI switch (.switch-label
   input:checked) drawn ON, decorative only. */
.ld-ai {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.ld-ai-short {
  display: none;
}
.ld-ai-switch {
  flex: 0 0 48px;
  box-sizing: border-box;
  width: 48px;
  height: 28px;
  border: 1px solid #779e00;
  border-radius: 30px;
  padding: 3px;
  background: var(--lime);
}
.ld-ai-switch::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px #0003;
  transform: translateX(19px);
}
.ld-top-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
button.ld-toggle {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--btn-radius-sm);
  color: #4b5244;
}
.ld-toggle .ld-ico-play,
.ld-toggle[aria-pressed="true"] .ld-ico-pause {
  display: none;
}
.ld-toggle[aria-pressed="true"] .ld-ico-play {
  display: block;
}
.ld-body {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  height: 430px;
}
.ld-list {
  list-style: none;
  margin: 0;
  padding: 10px 8px;
  border-right: 1px solid var(--line);
  background: white;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ld-thread {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 8px;
  border-radius: 12px;
  transition: background 0.3s;
}
.ld-thread.active {
  background: #eff6d9;
  box-shadow: inset 3px 0 0 var(--lime);
}
.ld-avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* Same black circle and white initials as the panel (.thread-avatar). */
  background: #111410;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}
/* Sample photo over the initial; a failed image is removed (JS) and the
   initial shows. */
.ld-initial {
  line-height: 1;
}
.ld-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  background: #111410;
}
.ld-chan {
  z-index: 1;
  position: absolute;
  right: -4px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 1px var(--line);
}
.ld-thread-text {
  min-width: 0;
  display: grid;
  line-height: 1.3;
}
.ld-thread-text b {
  font-size: 12.5px;
}
.ld-thread-text small {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ld-unread {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--lime);
  color: #1d2400;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  animation: ld-pop 0.35s ease-out both;
}
.ld-chat {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ld-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: white;
  border-bottom: 1px solid var(--line);
}
.ld-who {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}
.ld-who b {
  font-size: 13.5px;
}
.ld-who small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}
.ld-tag {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 50px;
  background: #f0f2ed;
  color: #4b5244;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.ld-tag.done {
  background: var(--lime);
  color: #1d2400;
}
.ld-tag.ld-flip {
  animation: ld-flip 0.5s ease-out both;
}
.ld-msgs {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px 14px;
  overflow: hidden;
}
.ld-msg {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 16px 16px 16px 4px;
  background: #f0f2ed;
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.ld-msg p {
  max-width: none;
  margin: 0;
  font-size: inherit;
}
.ld-msg.in {
  align-self: flex-start;
  background: white;
  border: 1px solid var(--line);
}
.ld-msg.out {
  align-self: flex-end;
  background: #edf6ce;
  border-radius: 16px 16px 4px 16px;
}
.ld-new {
  animation: ld-in 0.38s ease-out both;
}
.ld-msg.out .ld-cards,
.ld-msg.out .ld-slots {
  margin-top: 8px;
}
.ld-typing {
  display: inline-flex;
  gap: 4px;
  padding: 11px 13px;
}
.ld-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8b9381;
  animation: ld-dot 1s infinite ease-in-out;
}
.ld-typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.ld-typing i:nth-child(3) {
  animation-delay: 0.3s;
}
.ld-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.ld-card {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 5px 5px 7px;
  border: 2px solid transparent;
  border-radius: 11px;
  background: white;
  font-size: 11px;
  line-height: 1.25;
  transition:
    border-color 0.25s,
    transform 0.25s;
}
.ld-card b {
  font-size: 11px;
}
.ld-price {
  color: #4b6400;
  font-weight: 800;
}
.ld-ph {
  display: grid;
  place-items: center;
  height: 46px;
  margin-bottom: 3px;
  border-radius: 8px;
}
.ld-ph-a {
  background: linear-gradient(135deg, #e6f5b0, #c9ea4f);
  color: #3d4a12;
}
.ld-ph-b {
  background: linear-gradient(135deg, #e3ebf7, #b8c8e6);
  color: #2d3d5c;
}
.ld-ph-c {
  background: linear-gradient(135deg, #f6e6df, #e7bfae);
  color: #5c3424;
}
.ld-card.tapping,
.ld-slot.tapping {
  animation: ld-tap 0.9s ease-in-out infinite;
}
.ld-card.picked {
  border-color: var(--lime);
  animation: ld-pop 0.35s ease-out both;
}
.ld-check {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lime);
  color: #1d2400;
}
.ld-sample {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}
.ld-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ld-slot {
  padding: 6px 10px;
  border: 1.5px solid #c9d1bd;
  border-radius: 50px;
  background: white;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.ld-slot.picked {
  border-color: var(--lime);
  background: var(--lime);
  color: #1d2400;
}
.ld-sys {
  align-self: center;
}
.ld-event {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 8px 9px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--lime);
  border-radius: 12px;
  background: white;
  box-shadow: 0 6px 18px #2c3c0a14;
  font-size: 11.5px;
}
.ld-event-day {
  display: grid;
  text-align: center;
  line-height: 1.15;
}
.ld-event-day small {
  color: #4b6400;
  font-size: 9.5px;
  font-weight: 800;
}
.ld-event-day b {
  font-size: 13px;
}
.ld-event-text {
  display: grid;
  line-height: 1.3;
}
.ld-event-text small {
  color: var(--muted);
}
.ld-toast {
  position: absolute;
  top: 62px;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  border-radius: 50px;
  background: #1d1d1b;
  color: white;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 10px 24px #11141033;
}
.ld-toast.ld-show {
  animation: ld-toast 2.6s ease-out both;
}
.ld-toast[hidden] {
  display: none;
}
.ld.ld-paused *,
.ld.ld-static * {
  animation-play-state: paused;
}
.ld.ld-static .ld-toast.ld-show,
.ld.ld-static .ld-new,
.ld.ld-static .ld-flip,
.ld.ld-static .ld-unread,
.ld.ld-static .ld-card.picked {
  animation: none;
}
@keyframes ld-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
@keyframes ld-dot {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@keyframes ld-pop {
  0% {
    transform: scale(0.85);
  }
  60% {
    transform: scale(1.06);
  }
}
@keyframes ld-tap {
  50% {
    transform: scale(0.95);
    box-shadow: 0 0 0 4px #b5e60066;
  }
}
@keyframes ld-flip {
  0% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes ld-toast {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  12%,
  85% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ld *,
  .ld *::before {
    animation: none !important;
    transition: none !important;
  }
}
/* Phones/tablets: the inbox list collapses into a row of avatars on top. */
@media (max-width: 760px) {
  .ld-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: 470px;
  }
  .ld-list {
    flex-direction: row;
    gap: 6px;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .ld-thread {
    padding: 4px;
    border-radius: 50%;
  }
  .ld-thread.active {
    box-shadow: 0 0 0 2px var(--lime);
  }
  .ld-thread-text {
    display: none;
  }
  .ld-unread {
    top: -2px;
    right: -4px;
  }
  .ld .preview-top {
    padding: 14px 16px;
    font-size: 14px;
  }
  .ld-ai {
    gap: 8px;
    font-size: 12px;
  }
  .ld-ai-long {
    display: none;
  }
  .ld-ai-short {
    display: inline;
  }
}

/* v0.1.18: payment-method marks next to the payments notice. */
.pay-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.pay-marks li {
  display: block;
  line-height: 0;
}
.pay-mark {
  display: block;
  height: 24px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.72;
  transition:
    filter 0.2s,
    opacity 0.2s;
}
.pay-mark:hover,
.pay-marks li:hover .pay-mark {
  filter: none;
  opacity: 1;
}
.auth-pay-marks {
  justify-content: center;
  margin: 8px auto 0;
}
.ld-toggle[hidden],
.ld.ld-static .ld-toast {
  display: none;
}

/* v0.1.20: «Por qué BeartFlow» benefits, bento layout.
   Desktop (>= 1100px): 6-column grid, dark AI hero card (4 cols) next to
   the inbox card (2 cols), then citas / inventario / clientes (2 each).
   Tablet: 2 columns, hero full width, then 2 x 2. Phones: one column. */
#features.benefits .bn-head {
  max-width: 780px;
}
#features.benefits h2 {
  font-size: clamp(32px, 4vw, 48px);
  margin: 10px 0 14px;
}
.bn-mark {
  background: linear-gradient(
    transparent 58%,
    var(--lime) 58%,
    var(--lime) 92%,
    transparent 92%
  );
  padding: 0 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.bn-lead {
  font-size: 17px;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 0 30px;
}
#features .bn-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
.bn-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}
.bn-card h3 {
  margin: 16px 0 6px;
  font-size: 22px;
}
.bn-card p {
  margin: 0 0 16px;
}
.bn-card:hover {
  transform: translateY(-4px);
  border-color: #9fcf00;
  box-shadow: 0 18px 40px rgb(29 29 27 / 8%);
}
.bn-card.bn-hero {
  grid-column: span 4;
  background: #151a11;
  border-color: #151a11;
  color: #ffffff;
  padding: 30px;
}
.bn-hero h3 {
  font-size: clamp(26px, 2.6vw, 34px);
  color: #ffffff;
  max-width: 560px;
}
.bn-hero p {
  color: #cad1c1;
  font-size: 16px;
  max-width: 600px;
}
.bn-hero .feature-icon {
  background: var(--lime);
  color: #111410;
}
.bn-hero:hover {
  border-color: var(--lime);
  box-shadow: 0 20px 48px rgb(181 230 0 / 22%);
}
.bn-snippet {
  margin-top: auto;
  display: grid;
  gap: 10px;
}
.bn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.bn-arrow {
  color: #8a9285;
  font-weight: 700;
}
.bn-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #1d1d1b;
  background: #ffffff;
  white-space: nowrap;
}
.bn-chip.on {
  background: var(--lime);
  border-color: #779e00;
  color: #111410;
}
.bn-chip.soft {
  background: #f4f7ee;
}
.bn-hero .bn-chip {
  background: transparent;
  border-color: #3a4233;
  color: #e9eee3;
}
.bn-hero .bn-chip.lime {
  background: var(--lime);
  border-color: var(--lime);
  color: #111410;
}
.bn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bn-chat {
  display: grid;
  gap: 8px;
  max-width: 520px;
}
.bn-msg {
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 85%;
}
.bn-hero .bn-msg.in {
  background: #262d20;
  color: #e9eee3;
  justify-self: start;
  border-bottom-left-radius: 6px;
}
.bn-hero .bn-msg.out {
  background: var(--lime);
  color: #111410;
  justify-self: end;
  border-bottom-right-radius: 6px;
}
.bn-threads {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.bn-threads li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 13px;
}
.bn-threads b {
  color: #1d1d1b;
  white-space: nowrap;
}
.bn-threads span {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bn-stock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 8px 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1b;
}
.bn-cta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px 24px;
  background: #f7faef;
}
.bn-cta p {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1b;
}
@media (max-width: 1099px) {
  #features .bn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bn-card {
    grid-column: span 1;
  }
  .bn-card.bn-hero {
    grid-column: span 2;
  }
}
@media (max-width: 700px) {
  #features .bn-grid {
    grid-template-columns: 1fr;
  }
  .bn-card,
  .bn-card.bn-hero {
    grid-column: auto;
  }
  .bn-card.bn-hero {
    padding: 24px;
  }
  .bn-cta .btn {
    width: 100%;
    justify-content: center;
  }
}
/* Entrance: only when JS confirmed motion is allowed (bindBenefits). A
   keyframe (not a transition) so hover timing is never delayed. */
@media (prefers-reduced-motion: no-preference) {
  .bn-ready .bn-card {
    opacity: 0;
  }
  .bn-ready.bn-in .bn-card {
    opacity: 1;
    animation: bn-rise 0.55s ease both;
  }
  .bn-ready.bn-in .bn-card:nth-child(2) {
    animation-delay: 0.08s;
  }
  .bn-ready.bn-in .bn-card:nth-child(3) {
    animation-delay: 0.16s;
  }
  .bn-ready.bn-in .bn-card:nth-child(4) {
    animation-delay: 0.24s;
  }
  .bn-ready.bn-in .bn-card:nth-child(5) {
    animation-delay: 0.32s;
  }
}
@keyframes bn-rise {
  from {
    opacity: 0;
    translate: 0 18px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bn-card,
  .bn-card:hover {
    transition: none;
    transform: none;
  }
}

/* v0.1.19: nine «También incluye» items fill the existing 3-column grid
   (3 x 3); one column on phones (max-width 900px rule above). */

/* v0.1.19: panel screenshots light up on hover / tap (.is-lit): a thin
   lime light sweeps around the rounded edge (a rotating conic gradient in
   a 2px ring behind the image: transform only, no @property needed), a soft
   lime glow behind, a small lift and a touch more brightness. Reduced
   motion: static lime ring + glow, no movement. */
.suite-shot {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  transition: transform 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
.suite-shot img {
  transition:
    filter 0.22s ease,
    box-shadow 0.22s ease;
}
.suite-shot-ring {
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: 18px;
  overflow: hidden;
  opacity: 0;
  background: rgb(181 230 0 / 35%);
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.suite-shot-ring::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160%;
  aspect-ratio: 1;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 210deg,
    rgb(181 230 0 / 60%) 280deg,
    var(--lime) 330deg,
    #f4ffd0 350deg,
    transparent 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
}
.suite-shot::after {
  content: "";
  position: absolute;
  inset: 8% 6%;
  z-index: -1;
  border-radius: 28px;
  background: radial-gradient(closest-side, rgb(181 230 0 / 55%), transparent);
  filter: blur(24px);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.suite-shot:hover,
.suite-shot.is-lit,
.suite-shot:focus-within {
  transform: translateY(-4px) scale(1.02);
}
.suite-shot:hover img,
.suite-shot.is-lit img,
.suite-shot:focus-within img {
  filter: brightness(1.05) saturate(1.03);
  box-shadow: 0 14px 34px -16px rgb(110 140 0 / 55%);
}
.suite-shot:hover .suite-shot-ring,
.suite-shot.is-lit .suite-shot-ring,
.suite-shot:focus-within .suite-shot-ring,
.suite-shot:hover::after,
.suite-shot.is-lit::after,
.suite-shot:focus-within::after {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .suite-shot:hover .suite-shot-ring::before,
  .suite-shot.is-lit .suite-shot-ring::before,
  .suite-shot:focus-within .suite-shot-ring::before {
    animation: suite-shot-sweep 3.2s linear infinite;
  }
}
@keyframes suite-shot-sweep {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .suite-shot,
  .suite-shot img {
    transition: none;
  }
  .suite-shot:hover,
  .suite-shot.is-lit,
  .suite-shot:focus-within {
    transform: none;
  }
  .suite-shot-ring {
    background: var(--lime);
  }
  .suite-shot-ring::before {
    display: none;
  }
}

/* AI Assistant: configuration on top, rehearsal simulator below, both full width. */
.formgrid.ai-layout {
  grid-template-columns: minmax(0, 1fr);
}
.formgrid.ai-layout > * {
  min-width: 0;
}

/* AI Assistant page polish: one spacing scale (8 / 12 / 16 / 20 / 24 px),
   inset select arrows and comfortable chevrons. Scoped to .ai-layout. */
.formgrid.ai-layout {
  gap: 24px;
}
.ai-layout .ai-blocks-intro {
  margin: 0 0 16px;
}
.ai-layout .ai-block {
  margin: 0 0 16px;
}
.ai-layout button.ai-block-head {
  grid-template-columns: 40px minmax(0, 1fr) auto 24px;
  gap: 16px;
  padding: 16px 24px 16px 20px;
}
.ai-layout .ai-block-chevron {
  justify-self: center;
  line-height: 1;
}
.ai-layout .ai-block-body {
  padding: 20px 24px 8px;
}
.ai-layout .ai-block-body .field,
.ai-layout .ai-sim-bottom .field {
  gap: 8px;
  margin-bottom: 20px;
}
.ai-layout .ai-block-body p.muted,
.ai-layout .ai-block-body .muted:not(span) {
  margin: 8px 0 20px;
  line-height: 1.6;
}
.ai-layout .ai-block-body .field + p.muted {
  margin-top: -12px;
}
.ai-layout .ai-block-body .step {
  margin: 24px 0 12px;
}
.ai-layout .welcome-settings {
  padding: 20px;
  margin: 0 0 20px;
}
.ai-layout .switch-label {
  gap: 16px;
  margin: 0 0 8px;
}
.ai-layout .button-group {
  gap: 12px;
}
.ai-layout .footer-preview {
  margin-top: 16px;
  padding-top: 16px;
}
.ai-layout .footer-preview p {
  margin: 8px 0 0;
}
.ai-layout .ai-sim-bottom > p.muted {
  margin: 12px 4px 0;
  line-height: 1.6;
}
.ai-layout select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235f6857' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}
@media (max-width: 640px) {
  .ai-layout button.ai-block-head {
    grid-template-columns: 36px minmax(0, 1fr) 24px;
    gap: 12px;
    padding: 14px 16px;
  }
  .ai-layout .ai-block-body {
    padding: 16px 16px 4px;
  }
  .ai-layout .welcome-settings {
    padding: 16px;
  }
}
.ai-layout .ai-block-icon {
  color: #111410;
}
.ai-layout .ai-block-icon .ico {
  display: block;
}
.ai-layout .ai-block-icon-alert {
  background: #fff4e0;
  color: #b45309;
}
.ai-layout .ai-block.open .ai-block-icon-alert {
  background: #ffe3b3;
}

/* Citas (v0.1.25): the «Asistente de IA» collapsible panels, full width,
   with the step number outside each panel (1 → 6, all closed on entry). */
.bk-blocks .booking-builder,
.bk-blocks .bk-cards {
  gap: 0;
}
.bk-blocks .bk-gcal-wrap {
  margin-top: 0;
}
.bk-blocks .bk-toggle {
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: none;
  padding: 16px 20px;
  margin: 0 0 16px;
}
.bk-blocks .bk-blocks-intro {
  margin: 0 0 16px;
}
.bk-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.bk-step-num {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: white;
  color: #111410;
  font-size: 14px;
  font-weight: 800;
}
.bk-step:has(.ai-block.open) .bk-step-num {
  border-color: var(--lime);
  background: var(--lime);
}
.ai-layout .bk-step > .ai-block {
  margin: 0 0 16px;
}
.bk-blocks .bk-cards > button[type="submit"] {
  justify-self: start;
  margin: 0 0 24px 44px;
}
.bk-blocks .bk-block-body .gcal-grid,
.bk-blocks .bk-block-body fieldset {
  margin: 0 0 20px;
}
.bk-blocks .bk-block-body .msg-field {
  margin: 0 0 20px;
}
.bk-blocks .bk-block-body .bk-reminder {
  padding-top: 16px;
}
.bk-blocks #appt-list {
  padding: 0 0 16px;
}
@media (max-width: 640px) {
  .bk-step {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
  }
  .bk-step-num {
    width: 28px;
    height: 28px;
    margin-top: 18px;
    font-size: 13px;
  }
  .bk-blocks .bk-cards > button[type="submit"] {
    margin-left: 36px;
  }
  .bk-blocks .bk-toggle {
    padding: 14px 16px;
  }
  .card.bk-blocks {
    padding: 16px 12px;
  }
}