/*
 * Panel AgentIAYimi: layout y componentes (PLAN_PANEL_ADMIN §2).
 * Solo modo claro en v1; todos los colores salen de tokens.css.
 */

/* Inter Variable (OFL, ver fonts/OFL.txt), auto-hospedada: la CSP queda en font-src 'self'. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/admin/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family:
    "Inter Variable",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--text-link);
}

code,
.mono {
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 500;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

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

/* ---------- marca ---------- */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
}

.wordmark__logo {
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--blue-7);
}

.wordmark__suffix {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ---------- arranque ---------- */
.boot {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: var(--hero-gradient);
}

.boot__text {
  color: var(--text-secondary);
}

/* ---------- botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 30px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.btn--primary {
  background: var(--blue-7);
  color: var(--text-inverse);
}

.btn--primary:hover {
  background: var(--blue-8);
}

.btn--secondary {
  background: var(--bg-surface-0);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn--secondary:hover {
  background: var(--bg-surface-1);
}

.btn--text {
  background: transparent;
  color: var(--text-link);
  padding-left: 8px;
  padding-right: 8px;
}

.btn--text:hover {
  background: var(--bg-brand-soft);
}

.btn--danger {
  background: var(--red-70);
  color: var(--text-inverse);
}

.btn--danger:hover {
  background: var(--red-80);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--bgray-1);
  border-color: transparent;
  color: var(--gray-6);
  cursor: not-allowed;
}

.btn--sm {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 16px;
}

.btn--block {
  width: 100%;
}

.icon-btn {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--bg-surface-1);
  color: var(--text-primary);
}

.icon {
  flex: none;
}

/* ---------- formularios ---------- */
.form {
  display: grid;
  gap: 16px;
}

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

.field__label {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.field__help {
  font-size: 13px;
  line-height: 16px;
  color: var(--text-secondary);
}

.field__error {
  font-size: 13px;
  line-height: 16px;
  color: var(--text-danger);
}

.input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-0);
  font-size: 15px;
  color: var(--text-primary);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.input::placeholder {
  color: var(--text-placeholder);
}

.input:focus {
  outline: none;
  border-color: var(--blue-7);
  box-shadow: 0 0 0 3px var(--blue-2);
}

.input[aria-invalid="true"] {
  border-color: var(--red-50);
}

.input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--red-10);
}

/* Contraseña con botón de ojo dentro del campo (regla: siempre por defecto). */
.password {
  position: relative;
}

.password .input {
  padding-right: 48px;
}

.password__toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.password__toggle:hover {
  color: var(--blue-7);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  cursor: pointer;
  user-select: none;
}

.check input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--blue-7);
  cursor: pointer;
}

/* ---------- tarjetas, chips, avisos ---------- */
.card {
  background: var(--bg-surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.card__title {
  font-size: 19px;
  line-height: 28px;
  font-weight: 600;
}

.card__desc {
  margin-top: 4px;
  color: var(--text-secondary);
}

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

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bgray-0);
  color: var(--bgray-7);
}

.chip--brand {
  background: var(--blue-1);
  color: var(--blue-8);
}

.chip--success {
  background: var(--green-10);
  color: var(--green-70);
}

.chip--warning {
  background: var(--orange-10);
  color: var(--orange-80);
}

.chip--danger {
  background: var(--red-05);
  color: var(--red-70);
}

.notice {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--blue-1);
  color: var(--text-primary);
}

.notice > .icon {
  margin-top: 1px;
  color: var(--blue-7);
}

.notice--error {
  background: var(--red-05);
}

.notice--error > .icon {
  color: var(--red-70);
}

.notice--warning {
  background: var(--orange-10);
}

.notice--warning > .icon {
  color: var(--orange-70);
}

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

.notice__title {
  font-weight: 600;
}

.notice__hint {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
}

.command {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-0);
  border: 1px solid var(--blue-2);
}

.command code {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 18px;
  padding-top: 7px;
}

/* ---------- acceso (login y cambio obligatorio) ---------- */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background: var(--hero-gradient);
}

.auth__card {
  width: 100%;
  max-width: 420px;
  padding: 32px;
  box-shadow: var(--shadow-xl);
  display: grid;
  gap: 20px;
}

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

.auth__brand {
  margin-bottom: 8px;
}

.auth__title {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}

.auth__subtitle {
  color: var(--text-secondary);
}

.auth__foot {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
  text-align: center;
}

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

/* ---------- layout de la app ---------- */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border: 0;
  border-radius: 30px;
  background: var(--blue-7);
  color: var(--text-inverse);
  font-weight: 600;
  transform: translateY(-200%);
  cursor: pointer;
}

.skip-link:focus {
  transform: none;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface-0);
  border-right: 1px solid var(--border);
  transition:
    width 0.2s ease,
    transform 0.2s ease;
}

.app__main {
  min-height: 100vh;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  transition: margin-left 0.2s ease;
}

.app.is-collapsed .sidebar {
  width: var(--sidebar-w-collapsed);
}

.app.is-collapsed .app__main {
  margin-left: var(--sidebar-w-collapsed);
}

.sidebar__brand {
  height: var(--topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--border);
}

.sidebar__close {
  display: none;
}

.sidebar__nav {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  overflow-x: hidden;
  overflow-y: auto;
}

.nav-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list--bottom {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nav-item .icon {
  color: var(--text-secondary);
}

.nav-item:hover {
  background: var(--bg-surface-1);
}

.nav-item[aria-current="page"] {
  background: var(--bg-brand-soft);
  color: var(--blue-7);
}

.nav-item[aria-current="page"] .icon {
  color: var(--blue-7);
}

.nav-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item__count {
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--bgray-0);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nav-item[aria-current="page"] .nav-item__count {
  background: var(--blue-2);
  color: var(--blue-8);
}

.sidebar__footer {
  position: relative;
  flex: none;
  padding: 12px;
  border-top: 1px solid var(--border);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.user-chip:hover,
.user-chip[aria-expanded="true"] {
  background: var(--bg-surface-1);
}

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue-7);
  color: var(--text-inverse);
  font-size: 15px;
  font-weight: 700;
}

.user-chip__text {
  flex: 1;
  min-width: 0;
  display: grid;
}

.user-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.user-chip__role {
  font-size: 13px;
  line-height: 16px;
  color: var(--text-secondary);
}

.menu {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% - 4px);
  z-index: 50;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface-0);
  box-shadow: var(--shadow-lg);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu__item:hover,
.menu__item:focus-visible {
  background: var(--bg-surface-1);
}

.menu__item .icon {
  color: var(--text-secondary);
}

/* Menú contraído: solo iconos, con tooltip. */
.app.is-collapsed .sidebar__brand {
  justify-content: center;
  padding: 0;
}

.app.is-collapsed .wordmark__logo {
  font-size: 18px;
}

.app.is-collapsed .wordmark__suffix,
.app.is-collapsed .user-chip > .icon {
  display: none;
}

/* El contador queda como mini insignia en la esquina superior derecha del ícono (el tooltip dice
   «Preguntas (12)»): anclada al centro del enlace, solo se encima unos 6 × 10 px sobre el ícono.
   Con 3 cifras o más dice «99+» (shell.js) para no salirse del menú. */
.app.is-collapsed .nav-item__count {
  position: absolute;
  top: 2px;
  left: calc(50% + 4px);
  right: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 4px; /* «99+» con su anillo cabe en los 71 px del menú */
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-surface-0);
}

.app.is-collapsed .nav-item {
  justify-content: center;
  padding: 0;
}

/* Ocultos a la vista pero no al lector de pantalla (siguen dando nombre al botón). */
.app.is-collapsed .nav-item__label,
.app.is-collapsed .user-chip__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.app.is-collapsed .user-chip {
  justify-content: center;
  padding: 6px 0;
}

.app.is-collapsed .menu {
  left: calc(100% - 4px);
  right: auto;
  bottom: 12px;
  width: 220px;
}

.tooltip {
  position: fixed;
  z-index: 60;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(21, 24, 30, 0.45);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  background: var(--bg-surface-0);
  border-bottom: 1px solid var(--border);
}

.topbar__menu {
  display: none;
  flex: none;
  margin-left: -8px;
}

/* El título no se encoge antes que el chip de estado (que sí puede cortarse). */
.topbar__title {
  display: none;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}

.topbar__actions {
  flex: 0 100 auto;
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar__actions > .btn {
  flex: none;
}

/* Botón: al tocarlo muestra el estado completo (en teléfono no hay «hover» para el title). */
.agent-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-1);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  cursor: pointer;
}

.agent-status:hover {
  background: var(--bgray-0);
  color: var(--text-primary);
}

.agent-status__text,
.agent-status__short {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-status__short {
  display: none;
}

.dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bgray-4);
}

.dot--ok {
  background: var(--green-50);
}

.dot--warn {
  background: var(--yellow-50);
}

.dot--error {
  background: var(--red-50);
}

.view {
  flex: 1;
  width: 100%;
  max-width: calc(var(--content-max) + 48px);
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.view:focus {
  outline: none;
}

/* ---------- páginas ---------- */
.page {
  display: grid;
  gap: 24px;
}

.page-header {
  display: grid;
  gap: 6px;
}

.eyebrow {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--blue-7);
}

.page-title {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}

.page-title:focus {
  outline: none;
}

.page-desc {
  max-width: 720px;
  color: var(--text-secondary);
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
}

.empty-state > .icon {
  margin-bottom: 8px;
  color: var(--blue-3);
}

.empty-state__title {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}

.empty-state__text {
  max-width: 520px;
  color: var(--text-secondary);
}

.empty-state__action {
  margin-top: 12px;
}

.skeleton {
  display: block;
  height: 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--bgray-1) 0%, var(--bgray-0) 50%, var(--bgray-1) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

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

/* ---------- Mi cuenta ---------- */
.account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.account__wide {
  grid-column: 1 / -1;
}

.facts {
  display: grid;
  gap: 12px;
  margin: 0;
}

.facts__row {
  display: grid;
  gap: 2px;
}

.facts dt {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.sessions {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.session {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.session:first-child {
  border-top: 0;
  padding-top: 0;
}

.session > .icon {
  color: var(--text-secondary);
}

.session__body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.session__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.session__meta {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
}

/* ---------- toasts ---------- */
.toasts {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: grid;
  gap: 8px;
  justify-items: end;
  pointer-events: none;
}

.toast {
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in 0.2s ease-out;
}

.toast--error {
  background: var(--red-70);
  color: var(--text-inverse);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---------- diálogo ---------- */
.dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 24px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-surface-0);
  color: var(--text-primary);
  box-shadow: var(--shadow-xl);
}

.dialog::backdrop {
  background: rgba(21, 24, 30, 0.45);
}

.dialog__title {
  font-size: 19px;
  line-height: 28px;
  font-weight: 600;
}

.dialog__text {
  margin-top: 8px;
  color: var(--text-secondary);
}

.dialog__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ---------- responsive ---------- */

/* < 1024: el menú es un cajón y aparece la hamburguesa. */
@media (max-width: 1023.98px) {
  .sidebar {
    width: min(288px, 86vw);
    transform: translateX(-100%);
  }

  .app.is-drawer-open .sidebar {
    transform: none;
    box-shadow: var(--shadow-xl);
  }

  .app__main {
    margin-left: 0;
  }

  .sidebar__close,
  .topbar__menu {
    display: inline-grid;
  }

  .topbar__title {
    display: block;
  }

  .nav-item,
  .menu__item {
    min-height: 44px;
  }

  /* Cajón abierto: la página de atrás no se desplaza. */
  body.drawer-open {
    overflow: hidden;
  }
}

/* < 768: teléfono. */
@media (max-width: 767.98px) {
  .topbar {
    padding: 0 16px;
    gap: 8px;
  }

  .topbar__actions {
    gap: 8px;
  }

  .agent-status__extra,
  .btn__label--wide {
    display: none;
  }

  .view {
    padding: 24px 16px 40px;
  }

  .page-title {
    font-size: 24px;
    line-height: 32px;
  }

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

  .card {
    padding: 16px;
  }

  .auth {
    padding: 24px 16px;
    align-items: start;
  }

  .auth__card {
    padding: 24px;
  }

  .auth__title {
    font-size: 24px;
    line-height: 32px;
  }

  /* iOS hace zoom en campos de menos de 16 px. */
  .input {
    height: 44px;
    font-size: 16px;
  }

  .password__toggle {
    height: 44px;
  }

  .btn {
    min-height: 44px;
  }

  .toasts {
    left: 16px;
    right: 16px;
    bottom: 16px;
    justify-items: center;
  }
}

/* =====================================================================
 * F1 — Tablero y bandeja de Preguntas
 * ===================================================================== */

/* Colores de las gráficas (validados para daltonismo; ver charts.js). */
:root {
  --chart-replied: var(--green-70);
  --chart-pending: var(--blue-7);
  --chart-escalated: var(--orange-70);
  --chart-ignored: var(--bgray-5);
  --chart-error: var(--red-70);
  --chart-1: var(--blue-7);
  --chart-2: var(--orange-60);
  --chart-3: var(--purple-80);
  --chart-4: var(--green-70);
  --chart-5: var(--blue-5);
  --chart-other: var(--gray-4);
  --chart-grid: var(--bgray-1);
  --chart-axis: var(--bgray-2);
  --sheet-w: 520px;
}

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

/* Textos de Facebook: se respetan saltos de línea y nada rompe el ancho. */
.msg {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.clamp-1,
.clamp-2,
.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.clamp-1 {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.clamp-3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- chips de estado (PLAN §2.4) ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.chip--muted {
  background: var(--gray-1);
  color: var(--bgray-7);
}

.chip--spam {
  background: var(--gray-1);
  color: var(--gray-8); /* gray-7 se queda en 3.8:1 */
}

.chip--progress {
  background: var(--bgray-0);
  color: var(--bgray-7);
}

.chip--lead {
  background: var(--yellow-10);
  color: var(--yellow-80);
}

.chip--followup {
  background: var(--purple-10);
  color: var(--purple-80);
}

.chip__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.25;
  }
}

/* ---------- formularios extra ---------- */
.textarea {
  height: auto;
  min-height: 72px;
  padding: 10px 12px;
  line-height: 20px;
  resize: vertical;
}

/* Crece solo con el texto (textArea con `autosize`): no se redimensiona a mano. */
.textarea--auto {
  resize: none;
  overflow-y: hidden;
  transition: none;
}

.select {
  appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.field__counter {
  flex: none;
  font-size: 13px;
  line-height: 16px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.field__counter--full {
  color: var(--text-danger);
}

/* ---------- segmentado (como «Mensual | Anual» de Yimi) ---------- */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--gray-1);
}

.segmented__option {
  min-height: 32px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  cursor: pointer;
}

.segmented__option:hover {
  color: var(--text-primary);
}

.segmented__option[aria-checked="true"] {
  background: var(--bg-surface-0);
  color: var(--blue-8);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ---------- esqueletos ---------- */
.skeleton-group {
  display: grid;
  gap: 10px;
}

.skeleton-group .skeleton:nth-child(2) {
  width: 85%;
}

.skeleton-group .skeleton:nth-child(3) {
  width: 60%;
}

.skeleton-group--kpi .skeleton:nth-child(1) {
  width: 50%;
  height: 14px;
}

.skeleton-group--kpi .skeleton:nth-child(2) {
  width: 40%;
  height: 28px;
}

/* ---------- diálogo con cuerpo ---------- */
.dialog--wide {
  width: min(560px, calc(100vw - 32px));
}

.dialog__body {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.dialog__ack {
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}

/* Cita: tarjeta blanca con borde de 1 px (sin barras de acento). */
.quote-block {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.quote-block__label {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.quote {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface-0);
  color: var(--text-primary);
}

/* ---------- encabezado con controles ---------- */
.page-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

/* ---------- tablero ---------- */
.dashboard__body {
  display: grid;
  gap: 24px;
}

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

.kpi {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  color: var(--text-primary);
  text-decoration: none;
}

.kpi--link {
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.kpi--link:hover {
  border-color: var(--blue-3);
  box-shadow: var(--shadow-sm);
}

.kpi__label {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.kpi__value {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.kpi__value--soon {
  font-size: 19px;
  line-height: 36px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.kpi__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.kpi__note {
  flex: 1 1 120px;
  min-width: 0;
  font-size: 13px;
  line-height: 16px;
  color: var(--text-secondary);
}

.sparkline {
  flex: none;
  margin-left: auto;
}

.sparkline__line {
  fill: none;
  stroke: var(--bgray-3);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sparkline__dot {
  fill: var(--blue-7);
  stroke: var(--bg-surface-0);
  stroke-width: 2;
}

.shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.shortcut {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--blue-2);
  border-radius: var(--radius-md);
  background: var(--bg-brand-soft);
  color: var(--text-primary);
  text-decoration: none;
}

.shortcut > .icon:first-child {
  color: var(--blue-7);
}

.shortcut--danger {
  border-color: var(--red-10);
  background: var(--red-05);
}

.shortcut--danger > .icon:first-child {
  color: var(--red-70);
}

.shortcut__cta {
  font-weight: 600;
  color: var(--text-link);
}

.shortcut:hover .shortcut__cta {
  text-decoration: underline;
}

.dashboard__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
  align-items: start;
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

/* ---------- gráficas ---------- */
.chart-block {
  display: grid;
  gap: 12px;
}

.chart {
  position: relative;
}

.chart__plot {
  width: 100%;
  min-height: 220px;
}

.chart__svg {
  display: block;
  max-width: 100%;
  overflow: visible;
}

/*
 * Los hijos de una rejilla no deben imponer su ancho mínimo: si no, una gráfica dibujada con
 * un ancho anterior impide que la página se encoja (y aparece scroll horizontal).
 */
.page > *,
.dashboard__body > *,
.chart-block > *,
.chart-card > *,
.inbox > * {
  min-width: 0;
}

.chart__grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.chart__axis {
  stroke: var(--chart-axis);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.chart__tick {
  fill: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.chart__hit {
  fill: transparent;
  cursor: default;
}

.chart__hit.is-active {
  fill: var(--bgray-0);
  fill-opacity: 0.6;
}

.chart__hits {
  /* La banda de hover va detrás de las barras para no taparlas. */
  mix-blend-mode: multiply;
}

.mark--replied {
  fill: var(--chart-replied);
  background: var(--chart-replied);
}

.mark--pending {
  fill: var(--chart-pending);
  background: var(--chart-pending);
}

.mark--escalated {
  fill: var(--chart-escalated);
  background: var(--chart-escalated);
}

.mark--ignored {
  fill: var(--chart-ignored);
  background: var(--chart-ignored);
}

.mark--error {
  fill: var(--chart-error);
  background: var(--chart-error);
}

.mark--c1 {
  fill: var(--chart-1);
  background: var(--chart-1);
}

.mark--c2 {
  fill: var(--chart-2);
  background: var(--chart-2);
}

.mark--c3 {
  fill: var(--chart-3);
  background: var(--chart-3);
}

.mark--c4 {
  fill: var(--chart-4);
  background: var(--chart-4);
}

.mark--c5 {
  fill: var(--chart-5);
  background: var(--chart-5);
}

.mark--other {
  fill: var(--chart-other);
  background: var(--chart-other);
}

/* Separación de 2 px del color de la superficie entre segmentos de la dona. */
.mark--donut {
  stroke: var(--bg-surface-0);
  stroke-width: 2;
  transition: opacity 0.15s;
}

.chart--donut:hover .mark--donut:not(.is-active) {
  opacity: 0.55;
}

.chart__center-value {
  fill: var(--text-primary);
  font-size: 28px;
  font-weight: 700;
}

.chart__center-label {
  fill: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.chart-tip {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 4px;
  min-width: 160px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: 13px;
  line-height: 18px;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}

.chart-tip__title {
  font-weight: 600;
  color: var(--text-inverse);
}

.chart-tip__total {
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 600;
}

.chart-tip .chart-key__value {
  color: var(--text-inverse);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chart-legend--list {
  display: grid;
  gap: 8px;
  align-content: center;
}

.chart-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
}

.chart-legend--list .chart-key {
  display: flex;
}

.chart-key__swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.chart-key__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.chart-key__value {
  margin-left: auto;
  padding-left: 8px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart-legend:not(.chart-legend--list) .chart-key__value {
  margin-left: 0;
  padding-left: 0;
  color: var(--text-secondary);
}

.chart-table summary {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-link);
  cursor: pointer;
}

.chart-table[open] summary {
  margin-bottom: 8px;
}

.donut-layout {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.chart__svg--donut {
  width: 100%;
  height: auto;
}

/* ---------- tablas ---------- */
.table-scroll {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

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

.table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-surface-1);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.table th.num,
.table td.num {
  text-align: right;
}

.table tbody tr:last-child > * {
  border-bottom: 0;
}

.table tbody tr:hover {
  background: var(--blue-0);
}

.table--compact th,
.table--compact td {
  padding: 6px 10px;
  font-size: 13px;
  line-height: 18px;
}

.table--compact tbody th {
  font-weight: 500;
}

/* Tabla → tarjetas según el ancho de su contenedor (no del viewport). */
.rt,
.inbox {
  container-type: inline-size;
}

.rt__cards {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt-card {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.rt-card:last-child {
  border-bottom: 0;
}

.card--table .rt__table {
  margin: 0 -20px -20px;
  width: calc(100% + 40px);
}

.post-link {
  color: var(--text-primary);
  text-decoration: none;
}

.post-link:hover {
  color: var(--text-link);
  text-decoration: underline;
}

@container (max-width: 560px) {
  .rt__table {
    display: none;
  }

  .rt__cards {
    display: block;
  }
}

/* ---------- bandeja de Preguntas ---------- */
.filters {
  display: grid;
  gap: 16px;
}

.filters__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.search {
  position: relative;
  flex: 1 1 280px;
}

.search__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.input--search {
  padding-left: 38px;
}

.filters__sort {
  flex: 0 1 280px;
}

.filters__more {
  display: none;
}

.filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 16px;
  align-items: end;
}

.filters__checks {
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* «Solo quienes llegaron a…» (enlace de las cifras de una publicación) con su botón «Quitar». */
.filters__reached {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.filters__reached p {
  margin: 0;
}

.filters__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-surface-0);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  cursor: pointer;
}

.filter-chip:hover {
  background: var(--bg-surface-1);
}

.filter-chip__count {
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--bgray-0);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.filter-chip[aria-pressed="true"] {
  border-color: var(--blue-7);
  background: var(--bg-brand-soft);
  color: var(--blue-8);
}

.filter-chip[aria-pressed="true"] .filter-chip__count {
  background: var(--blue-2);
  color: var(--blue-8);
}

.inbox {
  display: grid;
  gap: 12px;
}

/* Avisos arriba de la bandeja (publicar bloqueado en modo prueba, pausa). */
.inbox__notices {
  display: grid;
  gap: 12px;
}

.inbox__summary {
  min-height: 20px;
  font-size: 13px;
  color: var(--text-secondary);
}

.inbox__results[aria-busy="true"] {
  opacity: 0.6;
  transition: opacity 0.15s;
}

.inbox__skeleton {
  display: grid;
  gap: 20px;
}

.inbox__cards {
  display: none;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@container (max-width: 760px) {
  .inbox__table {
    display: none;
  }

  .inbox__cards {
    display: grid;
  }
}

.cell-comment {
  width: 46%;
}

.cell-comment > * + * {
  margin-top: 4px;
}

.inbox-link {
  display: grid;
  gap: 2px;
  color: var(--text-primary);
  text-decoration: none;
}

.inbox-link:hover .inbox-link__msg {
  color: var(--text-link);
  text-decoration: underline;
}

.inbox-link__author {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.inbox-link__msg {
  color: var(--text-primary);
}

/* Nombre tomado de Messenger: el ⓘ va junto al nombre y fuera del enlace (dos enlaces al detalle). */
.inbox-link--split a {
  color: inherit;
  text-decoration: none;
}

/* Cada enlace se marca solo con su propio hover: el ⓘ o el nombre no subrayan el texto. */
.inbox-link--split:hover .inbox-link__msg {
  color: inherit;
  text-decoration: none;
}

.inbox-link--split .inbox-link__author:hover,
.inbox-link--split .inbox-link__msg:hover {
  color: var(--text-link);
  text-decoration: underline;
}

/* Un nombre con su ⓘ al lado («Nombre tomado de su conversación de Messenger»). */
.name-tip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.cell-post {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
}

.cell-date {
  white-space: nowrap;
  color: var(--text-secondary);
}

.cell-actions {
  width: 1%;
  white-space: nowrap;
}

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

.table tr.is-selected,
.inbox-card.is-selected {
  background: var(--bg-brand-soft);
}

.inbox-card.is-selected {
  border-color: var(--blue-3);
}

.inbox-card {
  display: grid;
  gap: 8px;
}

.inbox-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.inbox-card__head .inbox-link__author {
  display: block;
  color: var(--text-primary);
}

.inbox-card__msg {
  color: var(--text-primary);
}

.inbox-card .row-actions {
  justify-content: flex-start;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.pager__info {
  font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------- panel lateral del detalle ---------- */
.sheet {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  z-index: 30;
  width: min(var(--sheet-w), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface-0);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
}

.inbox-page.has-sheet {
  margin-right: calc(var(--sheet-w) + 8px);
}

.sheet__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  /* El chip de estado alinea con el borde derecho del contenido del cuerpo (20 px). */
  padding: 8px 20px 8px 8px;
  border-bottom: 1px solid var(--border);
}

.sheet__title {
  min-width: 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sheet__title:focus {
  outline: none;
}

/* Único chip de la cabecera: el estado, a la derecha. */
.sheet__status {
  margin-left: auto;
  flex: none;
}

.sheet__back-icon {
  display: none;
}

/* Detalle sobrepuesto en pantallas medianas: la bandeja de atrás se ve inactiva. Empieza bajo la
   barra superior, igual que el panel, porque la barra sigue activa (Actualizar, menú). */
.sheet-backdrop {
  position: fixed;
  inset: var(--topbar-h) 0 0;
  z-index: 29;
  background: rgba(21, 24, 30, 0.45);
}

.sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px;
}

/* Las zonas 2 y 3 (pliegues) se separan de la decisión con una línea. */
.sheet__body > .fold {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* El borde izquierdo de «Publicar respuesta» coincide con el contenido del cuerpo (20 px). */
.sheet__actions {
  flex: none;
  display: grid;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface-0);
}

/* Las acciones principales juntas a la izquierda; «Rechazar» (texto, en un seguimiento) a la
   derecha, separado de ellas. */
.sheet__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sheet__buttons .btn--text {
  margin-left: auto;
}

.sheet__note {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
}

.sheet__note a {
  color: var(--text-link);
  font-weight: 500;
}

/* ---------- publicación en una línea ---------- */
.post {
  display: grid;
  gap: 8px;
}

.post-peek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-size: 15px;
  line-height: 20px;
}

.post-peek__label {
  flex: none;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
}

.post-peek__text {
  flex: 1 1 200px;
  min-width: 0;
  color: var(--text-primary);
}

.post-peek__text--empty {
  font-style: italic;
  color: var(--text-tertiary);
}

/* Abierta, el texto completo se lee abajo: el extracto no se repite. */
.post-peek--open .post-peek__text {
  display: none;
}

.post-peek__toggle {
  margin-left: auto;
}

.post-peek__full {
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-1);
}

.post-peek__notes {
  font-size: 13px;
  line-height: 18px;
}

/* ---------- hilo de conversación (como Facebook, con el lenguaje de Yimi) ---------- */
.thread {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thread__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  min-width: 0;
}

/* Una respuesta cuelga del texto del mensaje al que responde: 36 px de avatar + 10 px de hueco. */
.thread__item--reply {
  margin-left: 46px;
}

/* Foco programático tras «Ver N mensajes anteriores»: con ratón no se marca; con teclado se ve el
   anillo de foco alrededor del mensaje, para saber dónde quedó. */
.thread__item:focus:not(:focus-visible) {
  outline: none;
}

.thread__item:focus-visible {
  border-radius: var(--radius-md);
  outline-offset: 4px;
}

.thread__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.thread__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-height: 20px;
  font-size: 13px;
  line-height: 16px;
  color: var(--text-secondary);
}

.thread__author {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.thread__dot {
  color: var(--bgray-4);
}

/* Solo el ícono del caption (el candado): el ⓘ conserva su color y su hover. */
.thread__meta > .icon {
  color: var(--text-tertiary);
}

/* --text-secondary: el terciario no llega a 4.5:1 sobre las burbujas. */
.thread__caption,
.thread__empty {
  font-size: 13px;
  line-height: 16px;
  color: var(--text-secondary);
}

.thread__empty {
  font-style: italic;
}

.thread__tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* La burbuja mide lo que mide el texto (como en Facebook) y nunca más que la columna. */
.thread__bubble {
  justify-self: start;
  max-width: 100%;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 4px 16px 16px 16px;
  background: var(--bg-surface-2); /* #f2f3f6, el gris de los comentarios de Facebook */
}

.thread__item--page .thread__bubble {
  background: var(--bg-surface-0);
  border-color: var(--border-strong);
}

/* El comentario del que trata el detalle, solo cuando hay más de una burbuja. */
.thread--multi .thread__item.is-current .thread__bubble {
  border-color: var(--blue-4);
}

.thread__text {
  font-size: 15px;
  line-height: 20px;
  color: var(--text-primary);
}

/* Acciones del comentario, alineadas con el borde izquierdo de la burbuja (los btn--sm traen 12 px). */
.thread__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 0 0 0 -12px;
}

.thread__more {
  justify-self: center;
}

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

/* Avatares del hilo (el .avatar base, 36 px azul, ya existe para el usuario del panel). */
.avatar--person {
  background: var(--bgray-1);
  color: var(--bgray-7);
  font-size: 14px;
  font-weight: 600;
}

.avatar--person > .icon {
  color: var(--bgray-5);
}

.avatar--page {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

/* ---------- tarjeta de respuesta ---------- */
.reply-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface-1);
}

.reply-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.reply-card__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.reply-card__category {
  margin-left: auto;
  font-size: 13px;
  line-height: 16px;
  color: var(--text-secondary);
}

/* Contestado en Facebook: lo que contestaron junto a lo que proponía el agente. */
.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.compare__col {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.compare__title {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.compare__when {
  margin: 0;
  font-size: 13px;
  line-height: 16px;
}

@media (min-width: 768px) {
  .compare {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.status-line {
  font-size: 15px;
  line-height: 20px;
  color: var(--text-secondary);
}

.reply-card__notice {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
}

/* Campos blancos sobre la tarjeta gris (las citas ya son blancas). */
.reply-card .input {
  background: var(--bg-surface-0);
}

.reply-card__add {
  justify-self: start;
  margin-left: -12px;
}

.reply-card__actions,
.notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: -12px;
}

.reply-card__why {
  color: var(--text-secondary);
}

.proposal__action {
  font-weight: 600;
}

.proposal__why {
  color: var(--text-secondary);
}

/* ---------- calificación ---------- */
/* La etiqueta corta depende del ancho real de la caja (Revisión ancha, panel de 480 px de
   contenido, teléfono de 343), no del viewport. */
.verdict-box {
  display: grid;
  gap: 10px;
  container-type: inline-size;
}

.verdict-box__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

/* ---------- pliegues ---------- */
.fold {
  min-width: 0;
}

.fold__summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}

.fold__summary::-webkit-details-marker {
  display: none;
}

.fold__summary .icon {
  color: var(--text-tertiary);
  transition: transform 0.15s;
}

.fold[open] > .fold__summary .icon {
  transform: rotate(90deg);
}

.fold__count {
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--bgray-0);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fold__body {
  display: grid;
  gap: 12px;
  padding: 4px 0 8px 26px;
}

.fold--quiet .fold__summary {
  min-height: 32px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-link);
}

.fold--quiet .fold__summary .icon {
  color: currentColor;
}

/* ---------- «Más detalles» ---------- */
.more__block {
  display: grid;
  gap: 8px;
}

.more__block + .more__block {
  margin-top: 4px;
}

.more__title {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--blue-7);
}

.tech-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 12px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.tech-list dt {
  color: var(--text-secondary);
}

.tech-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.tech-list__id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
}

.tech-list__rules {
  margin: 0;
  padding-left: 16px;
}

/* ---------- ayuda ⓘ ---------- */
.info-tip {
  display: inline-flex;
  vertical-align: middle;
}

.info-tip__btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

/* Área de toque de 44 px sin agrandar el ícono. */
.info-tip__btn::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.info-tip__btn:hover,
.info-tip__btn[aria-expanded="true"] {
  color: var(--blue-7);
}

.info-tip__btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.info-tip__bubble {
  position: fixed;
  z-index: 60;
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow-lg);
}

.field__label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.history__list,
.replies,
.audit {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.history__item,
.replies__item {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.history__item:last-child,
.replies__item:last-child {
  border-bottom: 0;
}

.history__meta,
.replies__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 13px;
  line-height: 16px;
}

.history__who,
.replies__kind,
.audit__who {
  font-weight: 600;
}

.history__text {
  font-size: 13px;
  line-height: 18px;
}

.audit__item {
  font-size: 13px;
  line-height: 18px;
}

/* ---------- responsive (F1) ---------- */
@media (max-width: 1279.98px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 1023.98px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .kpi {
    padding: 14px;
  }

  .kpi__value {
    font-size: 24px;
    line-height: 32px;
  }

  .sparkline {
    display: none;
  }

  .donut-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .chart--donut {
    width: min(200px, 70vw);
  }

  .chart-legend--list {
    width: 100%;
  }

  /* Filtros: lo básico a la vista y el resto tras «Más filtros». */
  .filters__more {
    display: inline-flex;
  }

  .filters__sort {
    flex: 1 1 100%;
    order: 3;
  }

  .filters:not(.is-expanded) .filters__grid,
  .filters:not(.is-expanded) .filters__foot,
  .filters:not(.is-expanded) .filters__sort {
    display: none;
  }

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

  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px 4px;
    scrollbar-width: none;
  }

  .filter-chip {
    flex: none;
  }

  /* Detalle a pantalla completa con la barra de acciones fija abajo. */
  .sheet {
    top: 0;
    z-index: 45;
    width: 100vw;
    border-left: 0;
    box-shadow: none;
  }

  .sheet__back-icon {
    display: block;
  }

  .sheet__close-icon {
    display: none;
  }

  .sheet__head {
    padding: 8px 16px 8px 8px;
  }

  .sheet__body {
    padding: 16px;
  }

  .sheet__actions {
    min-height: 56px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  }

  /* Primario a todo el ancho y el secundario debajo. Un botón de texto («Rechazar» en un
     seguimiento) comparte fila con el secundario. */
  .sheet__buttons .btn {
    flex: 1 1 100%;
  }

  .sheet__buttons .btn--secondary {
    flex: 1 1 auto;
  }

  .sheet__buttons .btn--text {
    flex: none;
  }

  /* Con el teclado abierto, el campo enfocado no queda bajo la barra fija. */
  .sheet__body {
    scroll-padding-bottom: 72px;
  }

  .reply-card__category {
    flex-basis: 100%;
    margin-left: 0;
  }

  .tech-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .tech-list dd + dt {
    margin-top: 8px;
  }

  .thread__item--reply {
    margin-left: 24px;
  }

  .card--table .rt__table {
    margin: 0;
    width: 100%;
  }
}

/* ---------- F2: comunes ---------- */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.form__actions--start,
.row-actions--start {
  justify-content: flex-start;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  justify-self: start;
  color: var(--text-link);
  font-weight: 500;
  text-decoration: none;
}

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

.help-details summary {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-link);
  cursor: pointer;
}

.help-details[open] summary {
  margin-bottom: 8px;
}

.help-steps {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
}

.chips--stack {
  flex-direction: column;
  align-items: flex-start;
}

/* ---------- Publicaciones ---------- */
.posts-table .cell-post-main {
  min-width: 220px;
}

/* Encabezados de métricas en dos líneas para que la publicación tenga espacio. */
.posts-table thead th {
  white-space: normal;
}

.posts-card .rt__cards {
  padding: 4px 16px;
}

.posts-table td.num,
.posts-table th.num {
  padding-left: 10px;
  padding-right: 10px;
}

@container (max-width: 820px) {
  .posts-card .rt__table {
    display: none;
  }

  .posts-card .rt__cards {
    display: block;
  }
}

.cell-post-main > * + * {
  margin-top: 6px;
}

.metric-link {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.metric-link:hover {
  color: var(--text-link);
  text-decoration: underline;
}

.post-card {
  gap: 6px;
}

.post-card__metrics {
  font-size: 13px;
  line-height: 20px;
}

.post-head {
  display: grid;
  gap: 12px;
}

.post-head__text {
  max-height: 200px;
  overflow: auto;
}

.post-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.facts--grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 20px;
}

/* ---------- Prospectos ---------- */
.lead-note {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
}

/* ---------- Revisión ---------- */
.review-view {
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* La tabla del resumen se desplaza dentro de su tarjeta en pantallas angostas. */
.review-view > * {
  min-width: 0;
}

.review-list {
  display: grid;
  gap: 16px;
}

.review-card {
  display: grid;
  gap: 10px;
}

.review-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 13px;
  line-height: 18px;
}

.review-card__author {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.review-card__context {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.review-card__comment {
  font-size: 17px;
  line-height: 24px;
}

.review-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: -12px;
}

/* Igual que la tarjeta de respuesta del detalle: gris muy claro, radio 16, citas blancas. */
.review-proposal {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface-1);
}

.review-proposal__title {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--blue-7);
}

/* Tres píldoras del mismo ancho y alto, con ícono y etiqueta en una sola línea. */
.verdicts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 560px; /* en Revisión (tarjeta ancha) no se estiran de lado a lado */
}

.verdict {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-surface-0);
  color: var(--text-primary);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.verdict .icon {
  flex: none;
}

.verdict__long,
.verdict__short {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.verdict__short {
  display: none;
}

/* Con menos de 460 px de ancho no caben las tres etiquetas largas en una fila. */
@container (max-width: 459.98px) {
  .verdict__long {
    display: none;
  }

  .verdict__short {
    display: inline;
  }
}

/* Cajas angostas (Revisión a 375 px deja 309 px; el detalle a 360 px, 328): ícono de 16 px y menos
   relleno, para que «Cambiar» quepa entera en su tercio sin «…». */
@container (max-width: 339.98px) {
  .verdicts {
    gap: 6px;
  }

  .verdict {
    gap: 4px;
    padding: 0 6px;
  }

  .verdict .icon {
    width: 16px;
    height: 16px;
  }
}

/* Menos de 300 px (teléfonos de 320 px): solo la etiqueta. */
@container (max-width: 299.98px) {
  .verdict .icon {
    display: none;
  }
}

.verdict:hover {
  background: var(--bg-surface-1);
}

.verdict:disabled {
  cursor: default;
  opacity: 0.6;
}

.verdict--ok[aria-pressed="true"],
.verdict--ok:hover {
  border-color: var(--green-60);
  background: var(--green-10);
  color: var(--green-80);
}

.verdict--edit[aria-pressed="true"],
.verdict--edit:hover {
  border-color: var(--orange-60);
  background: var(--orange-10);
  color: var(--orange-80);
}

.verdict--no[aria-pressed="true"],
.verdict--no:hover {
  border-color: var(--red-50);
  background: var(--red-05);
  color: var(--red-70);
}

.review-saved {
  display: grid;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-1);
}

.review-saved--ok {
  background: var(--green-10);
}

.review-saved--edit {
  background: var(--orange-10);
}

.review-saved--no_reply {
  background: var(--red-05);
}

.review-saved__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.review-saved__verdict {
  font-weight: 600;
}

.review-saved__detail {
  font-size: 13px;
  line-height: 18px;
}

.review-saved__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: -12px;
}

.review-more {
  display: flex;
  justify-content: center;
}

.review-hero {
  display: grid;
  gap: 10px;
}

.review-hero__value {
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.review-bar {
  display: flex;
  gap: 2px;
  height: 12px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--bgray-1);
}

.review-bar__seg {
  height: 100%;
}

.review-legend {
  padding: 0;
  list-style: none;
}

@media (max-width: 767.98px) {
  .page-actions {
    width: 100%;
  }

  .page-actions .btn {
    flex: 1 1 auto;
  }

  /* «Cancelar» y «Guardar» de «La cambiaría»: mitad y mitad de la fila. */
  .review-form .form__actions .btn {
    flex: 1 1 0;
  }

  .review-card__comment {
    font-size: 15px;
    line-height: 22px;
  }
}

/* ---------- seguimientos ---------- */
.followups__notices {
  display: grid;
  gap: 12px;
}

.followup-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.followup-card {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.followup-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.followup-card__head .inbox-link__author {
  color: var(--text-primary);
}

.followup-card__when {
  margin-left: auto;
  font-size: 13px;
  line-height: 16px;
  white-space: nowrap;
}

.followup-card__reason {
  font-size: 13px;
  line-height: 18px;
}

@media (max-width: 767.98px) {
  .followup-card__when {
    margin-left: 0;
  }
}

/* ---------- F4: comunes ---------- */
.icon-btn--sm {
  width: 32px;
  height: 32px;
}

/* ---------- Inteligencia ---------- */
.insights__body {
  display: grid;
  gap: 24px;
}

/* «Incluir histórico» (casilla + ⓘ) y el periodo, centrados en la misma línea. */
.insights__controls {
  align-items: center;
  gap: 12px 16px;
}

.insights__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.insights__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.insights__card {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.insights__card > .card__head {
  margin-bottom: 4px;
}

.insights__subtitle {
  margin-top: 8px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

.insights__lead {
  color: var(--text-secondary);
}

.insights__lead strong {
  color: var(--text-primary);
  font-weight: 600;
}

.rank-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rank;
}

.rank-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.rank-list__item:last-child {
  border-bottom: 0;
}

.rank-list__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

a.rank-list__text {
  color: var(--text-primary);
  text-decoration: none;
}

a.rank-list__text:hover {
  color: var(--text-link);
  text-decoration: underline;
}

.rank-list__count {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.term-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.term {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-surface-0);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: none;
}

.term:hover {
  border-color: var(--blue-4);
  background: var(--blue-0);
}

.term__count {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bgray-0);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.gap-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gap {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.gap:first-child {
  padding-top: 0;
}

.gap:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.gap__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
  line-height: 16px;
}

.gap__author {
  font-weight: 600;
}

.gap__note,
.gap__why {
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.gap__label {
  font-weight: 600;
  color: var(--text-secondary);
}

/* Barras horizontales (ranking de una sola serie). */
.hbars {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hbars__row {
  display: grid;
  grid-template-columns: minmax(96px, 200px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.hbars__label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

a.hbars__label {
  color: var(--text-link);
  text-decoration: none;
}

a.hbars__label:hover {
  text-decoration: underline;
}

.hbars__track {
  display: block;
  height: 12px;
  border-radius: 0 4px 4px 0;
  background: var(--bgray-1);
  overflow: hidden;
}

.hbars__fill {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
}

.hbars__value {
  min-width: 48px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hbars__note {
  font-weight: 500;
  color: var(--text-secondary);
}

/* Mapa de calor: un solo tono, de claro a oscuro (0 = sin comentarios). */
.chart--heat .chart__plot {
  min-height: 150px;
}

.heat-cell {
  stroke: none;
}

.heat-cell.is-active {
  stroke: var(--bgray-10);
  stroke-width: 1.5;
}

.heat--0 {
  fill: var(--bgray-1);
  background: var(--bgray-1);
}

.heat--1 {
  fill: var(--blue-2);
  background: var(--blue-2);
}

.heat--2 {
  fill: var(--blue-3);
  background: var(--blue-3);
}

.heat--3 {
  fill: var(--blue-5);
  background: var(--blue-5);
}

.heat--4 {
  fill: var(--blue-7);
  background: var(--blue-7);
}

.heat--5 {
  fill: var(--blue-9);
  background: var(--blue-9);
}

.heat-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 16px;
  color: var(--text-secondary);
}

.heat-legend__swatch {
  width: 16px;
  height: 12px;
  border-radius: 3px;
}

.heat-legend__label {
  margin: 0 4px;
}

.heat-legend__total {
  margin-left: auto;
  font-weight: 600;
  color: var(--text-primary);
}

/* ---------- Configuración ---------- */
.settings__body {
  display: grid;
  gap: 24px;
}

.settings__body > .card {
  display: grid;
  gap: 16px;
}

.settings__body > .card > .card__head {
  margin-bottom: 0;
}

.agent-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.agent-line__mode {
  font-weight: 600;
}

.settings__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.settings__foot .btn {
  margin-left: auto;
}

.runs .table th,
.runs .table td {
  white-space: nowrap;
}

.runs .table td.runs__notes {
  white-space: normal;
  min-width: 200px;
  overflow-wrap: anywhere;
}

.kb-hash {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kb-amounts {
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}

.kb-text {
  max-height: 420px;
  margin: 0;
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface-1);
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kb-text:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Usuarios ---------- */
.users__list {
  display: grid;
  gap: 24px;
}

.users__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.users__name {
  font-weight: 600;
}

.users__email,
.users__sessions {
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.users__actions {
  min-width: 260px;
}

.table tr.is-muted > td {
  color: var(--text-secondary);
}

.users__card {
  gap: 8px;
}

@container (max-width: 900px) {
  .users-card .rt__table {
    display: none;
  }

  .users-card .rt__cards {
    display: block;
  }
}

.secret-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.secret-row > .field {
  flex: 1;
  min-width: 0;
}

/* ---------- Actividad (bitácora) ---------- */
.activity__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin-bottom: 16px;
}

.activity__filters > .field {
  min-width: 200px;
}

.activity__summary {
  margin-left: auto;
  font-size: 13px;
}

.activity {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity__item {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  line-height: 20px;
}

.activity__item:last-child {
  border-bottom: 0;
}

.activity__target {
  justify-self: start;
  max-width: 100%;
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
  color: var(--text-link);
}

.activity__target--plain {
  color: var(--text-secondary);
}

.activity__meta {
  font-size: 13px;
  line-height: 16px;
  color: var(--text-tertiary);
}

.activity__more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

@media (max-width: 1023.98px) {
  .insights__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .hbars__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
  }

  .hbars__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .activity__filters > .field {
    min-width: 0;
    flex: 1 1 140px;
  }

  .activity__summary {
    margin-left: 0;
    flex-basis: 100%;
  }

  .secret-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settings__foot .btn {
    margin-left: 0;
  }
}

/* =====================================================================
 * F5 — Pulido: teléfono y accesibilidad
 * ===================================================================== */

/* Teléfono angosto: el chip de estado se abrevia («Prueba», «En pausa») para que el título de la
   vista se lea completo; al tocarlo se ve el estado entero. */
@media (max-width: 519.98px) {
  .agent-status {
    padding: 6px 10px;
  }

  .agent-status__text {
    display: none;
  }

  .agent-status__short {
    display: inline;
  }
}

/* Teléfono: áreas táctiles de al menos 44 px (PLAN §2.6). */
@media (max-width: 767.98px) {
  .btn--sm,
  .segmented__option,
  .filter-chip,
  .term,
  .agent-status,
  .back-link,
  .help-details summary,
  .chart-table summary,
  .fold__summary,
  .fold--quiet .fold__summary,
  .post-peek__toggle {
    min-height: 44px;
  }

  .icon-btn,
  .icon-btn--sm {
    width: 44px;
    height: 44px;
  }

  a.hbars__label {
    padding-block: 3px;
  }
}

/* Detalle sobrepuesto: la página de atrás no se desplaza. */
body.sheet-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Prospectos: embudo comentario → Messenger → cliente (PLAN_EMBUDO_MESSENGER §6) ---------- */
.leads-convs-link {
  margin: -8px 0 0;
}

.leads-convs-link a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  color: var(--text-link);
  font-weight: 500;
  text-decoration: none;
}

.leads-convs-link a:hover {
  text-decoration: underline;
}

.leads-page .filters__checks {
  flex-wrap: wrap;
  gap: 4px 20px;
}

.check__count {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.lead-legacy .notice__actions {
  margin-top: 8px;
}

.lead-signal {
  font-size: 13px;
  line-height: 16px;
}

.cell-next {
  max-width: 260px;
  color: var(--text-secondary);
}

.lead-next-line {
  color: var(--text-secondary);
}

.chip-link {
  display: inline-flex;
  text-decoration: none;
}

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

.chip-with-tip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Encabezado del detalle */
.lead-detail {
  display: grid;
  gap: 20px;
}

.lead-head {
  display: grid;
  gap: 10px;
}

.lead-head__title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lead-head__title .page-title {
  margin: 0;
}

.lead-head p {
  margin: 0;
}

.lead-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.lead-warn {
  color: var(--orange-80);
  font-size: 13px;
  line-height: 18px;
}

/* «Qué sigue» y la conversación lado a lado en pantallas anchas. */
.lead-detail__grid {
  display: grid;
  gap: 20px;
  align-items: start;
}

@media (min-width: 1100px) {
  .lead-detail__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.lead-next,
.lead-conv {
  display: grid;
  gap: 16px;
}

.lead-next .card__title,
.lead-conv .card__title {
  margin: 0;
}

.lead-block {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.lead-next > .lead-block:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.lead-block p {
  margin: 0;
}

.lead-block__label {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.lead-window {
  margin: 0;
  font-weight: 500;
}

.lead-window--open {
  color: var(--text-success);
}

.lead-window--closed {
  color: var(--text-secondary);
}

/* Texto que escribió el agente: siempre texto plano (los enlaces no se abren). */
.lead-ai-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lead-draft {
  margin: 0;
  white-space: pre-wrap;
}

.lead-contact {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lead-contact__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.lead-contact__row .muted {
  min-width: 64px;
}

.lead-contact__value {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.lead-contact__inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.lead-actions .btn--text {
  margin-left: auto;
}

/* Liga y candidatos */
.lead-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}

.lead-link__text {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  font-weight: 500;
}

.lead-cands {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lead-cand {
  display: grid;
  gap: 4px;
  justify-items: start;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface-0);
}

.lead-cand p {
  margin: 0;
}

.lead-cand .btn[aria-pressed="true"] {
  border-color: var(--blue-7);
  background: var(--bg-brand-soft);
}

/* Línea de tiempo: la nota de Meta como separador discreto, lo anterior al comentario en gris. */
.thread__sep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
  text-align: center;
}

.thread__sep--before {
  justify-content: flex-start;
  border-bottom: 1px dashed var(--border-strong);
  font-weight: 600;
}

/* Lo anterior a la liga: burbuja sin relleno y texto secundario. Sin opacidad: la hora y el pie
   ya son secundarios y bajarían de 4.5:1. */
.thread__item--before .thread__bubble {
  border-color: var(--border);
  background: transparent;
}

.thread__item--before .thread__text {
  color: var(--text-secondary);
}

.lead-history {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Embudo */
.leads-funnel {
  display: grid;
  gap: 20px;
}

.funnel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.funnel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px;
}

.funnel-col {
  display: grid;
  gap: 16px;
  align-content: start;
}

.funnel-col .card__title {
  display: flex;
  align-items: center;
  gap: 2px;
}

.funnel-col__lost,
.funnel-col__conv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
}

.funnel-col__conv {
  font-weight: 600;
}

/* Inteligencia y Configuración */
.insights__section {
  margin: 8px 0 0;
  font-size: 19px;
  line-height: 28px;
  font-weight: 600;
}

.insights__more {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.insights__more a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-link);
  font-weight: 500;
  text-decoration: none;
}

.settings__subtitle {
  margin: 20px 0 4px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

.tpl-list {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.tpl {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.tpl__text {
  margin: 0;
  white-space: pre-wrap;
}

@media (max-width: 767.98px) {
  .filters:not(.is-expanded) .filters__grid.filters__grid--open {
    display: grid;
  }

  .lead-actions .btn--text {
    margin-left: 0;
  }

  .cell-next {
    max-width: none;
  }
}

/* === D1 shell === */
/* Lote 1 del rediseño para marketing (REDISENO_PANEL_MARKETING §1, §2, §2.2): marca «Yimi Social»
   con la red bajo el logo, menú por tarea con separador, chip único del estado del agente con su
   popover, franja del agente (solo si algo está roto) y encabezado de página con ⓘ y acciones. */

/* Marca + red (texto, no control). */
.sidebar__brand {
  padding-top: 8px;
  padding-bottom: 8px;
}

.brand {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.brand .wordmark__suffix {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
}

.brand__network {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
}

.brand__network-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue-7);
  color: var(--text-inverse);
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
}

.brand__network-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app.is-collapsed .brand {
  justify-items: center;
}

.app.is-collapsed .brand__network-text {
  display: none;
}

/* Agente y Equipo justo después del separador, no pegados al fondo; el revisor no tiene ninguno. */
.nav-list--bottom {
  margin-top: 8px;
}

.nav-list--bottom:empty {
  display: none;
}

/* Cajón (< 1024): marca y red arriba, lista principal, separador, Agente/Equipo y luego el chip
   del usuario, sin huecos. */
@media (max-width: 1023.98px) {
  .sidebar__nav {
    flex: 0 1 auto;
  }

  .sidebar__footer {
    border-top: 0;
  }
}

/* Chip del estado del agente (única fuente del modo y la pausa). */
.agent-chip-wrap {
  position: relative;
  min-width: 0;
  display: flex;
}

.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px 6px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-1);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.agent-chip:hover,
.agent-chip[aria-expanded="true"] {
  background: var(--bgray-0);
}

.agent-chip > .icon {
  flex: none;
  color: var(--text-secondary);
}

.agent-chip__pause {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agent-chip__pause[hidden] {
  display: none;
}

.agent-chip__sep {
  color: var(--text-secondary);
}

.agent-chip__pause-short {
  display: none;
}

.dot--info {
  background: var(--blue-7);
}

.agent-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 340px;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface-0);
  box-shadow: var(--shadow-lg);
  white-space: normal;
}

.agent-pop[hidden] {
  display: none;
}

.agent-pop:focus {
  outline: none;
}

.agent-pop__title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

.agent-pop__rows {
  display: grid;
  gap: 8px;
  margin: 0;
}

.agent-pop__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.agent-pop__label {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 20px;
}

.agent-pop__value {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  text-align: right;
}

.agent-pop__text,
.agent-pop__ask {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 18px;
}

.agent-pop__problems {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 8px 12px 8px 28px;
  border-radius: var(--radius-sm);
  background: var(--red-05);
  color: var(--text-danger);
  font-size: 13px;
  line-height: 18px;
}

.agent-pop__label {
  flex: none;
}

.agent-pop__value .dot {
  margin-top: 6px;
}

.agent-pop__go {
  justify-self: start;
}

/* Franja del agente: una línea bajo la barra superior, solo si algo está roto. */
.agent-bar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 19;
  min-height: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 6px 24px;
  background: var(--orange-10);
  color: var(--orange-80);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.agent-bar[hidden] {
  display: none;
}

.agent-bar--error {
  background: var(--red-05);
  color: var(--text-danger);
}

.agent-bar__go {
  color: var(--text-link);
  font-weight: 600;
}

.agent-bar__ask {
  color: var(--text-secondary);
}

/* Encabezado de página: título + ⓘ y, a la derecha, las acciones de la vista. */
.page-header__main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.page-header__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.page-header--split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* 768 a 1023: el chip abrevia la pausa («Prueba · Pausa»). */
@media (max-width: 1023.98px) {
  .agent-chip__pause-long {
    display: none;
  }

  .agent-chip__pause-short {
    display: inline;
  }
}

/* Teléfono. */
@media (max-width: 767.98px) {
  .agent-chip {
    min-height: 44px;
  }

  .agent-bar {
    padding: 6px 16px;
  }

  .page-header__actions {
    width: 100%;
  }
}

/* Teléfono angosto: solo el punto + «Prueba» o «Pausa»; el popover ocupa el ancho de la pantalla. */
@media (max-width: 519.98px) {
  .agent-chip.is-paused > .dot,
  .agent-chip.is-paused > .agent-chip__mode,
  .agent-chip__sep,
  .agent-chip > .icon {
    display: none;
  }

  .agent-pop {
    position: fixed;
    top: calc(var(--topbar-h) + 8px);
    left: 16px;
    right: 16px;
    width: auto;
  }
}

/* === D1 comentarios === */
/* Lote 2 del rediseño para marketing (REDISENO_PANEL_MARKETING §3.2): pestañas con contador
   (Por atender, Seguimientos, Contestados, Históricos), «Más filtros» en todos los tamaños,
   Publicación como columna y línea gris de publicar bloqueado. Solo reglas nuevas. */

.comments-tabs .segmented__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.comments-tabs__short {
  display: none;
}

.comments-tabs__count {
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--bgray-0);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.comments-tabs .segmented__option[aria-checked="true"] .comments-tabs__count {
  background: var(--blue-2);
  color: var(--blue-8);
}

/* «Más filtros» pliega selects y casillas en todos los tamaños, no solo en teléfono. */
.comments-page .filters__more {
  display: inline-flex;
}

.comments-page .filters:not(.is-expanded) .filters__grid,
.comments-page .filters:not(.is-expanded) .filters__foot {
  display: none;
}

.comments-filters__foot {
  justify-content: flex-end;
}

.comments-filters__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.comments-cell-post {
  width: 24%;
}

.comments-cell-post .cell-post {
  margin: 0;
}

/* Una sola línea gris pequeña junto a «Publicar respuesta» deshabilitado. */
.comments-note {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-tertiary);
}

.comments-status-tip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Calificación dentro de la tarjeta, justo debajo de la propuesta. */
.reply-card > .verdict-box {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Seguimientos montado dentro de su pestaña. */
.comments-followups > .followups-page {
  display: grid;
  gap: 16px;
}

.followups__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 767.98px) {
  .comments-page .page-header__actions .comments-tabs {
    display: flex;
    width: 100%;
  }

  .comments-tabs .segmented__option {
    flex: 1 1 0;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Teléfono angosto: etiquetas cortas, dos filas de dos; nunca scroll horizontal. */
@media (max-width: 519.98px) {
  .comments-tabs__long {
    display: none;
  }

  .comments-tabs__short {
    display: inline;
  }

  .comments-tabs .segmented__option {
    flex: 1 1 calc(50% - 2px);
  }
}

/* === D1 prospectos === */
/* Lote 3 del rediseño para marketing (REDISENO_PANEL_MARKETING §3.3, §5): pestañas Lista · Embudo ·
   Conversaciones, «Filtros (n)» plegado en todos los tamaños, «Espera respuesta» con texto en
   tabla y tarjeta, y el detalle con la etapa en la cabecera, menú «Más» y pestañas
   Resumen · Conversación en < 1100 px. Solo reglas nuevas, con alcance a estas vistas. */

/* Cuerpo de cada pestaña. */
.leads-tab {
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* «Filtros (n)»: casillas y selects plegados en todos los tamaños; las etapas siempre a la vista. */
.leads-page .filters__more {
  display: inline-flex;
}

.leads-page .filters:not(.is-expanded) .leads-more {
  display: none;
}

.leads-more {
  display: grid;
  gap: 16px;
}

.leads-filter-group {
  display: grid;
  gap: 4px;
}

.leads-filter-group__label {
  margin: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.leads-date-label {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* «Conversaciones» se abrevia en teléfono angosto para que las tres opciones quepan en una fila. */
.leads-tab__short {
  display: none;
}

/* Lista: «Espera respuesta» en su columna y, en tarjeta, junto al nombre. */
.cell-attention {
  white-space: nowrap;
}

.leads-card__who {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

/* Conversaciones: tipo como etiqueta pequeña gris bajo el nombre. */
.convs-person {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.convs-kind {
  font-size: 13px;
  line-height: 16px;
  color: var(--text-secondary);
}

/* Detalle: miga «Prospectos › Nombre». */
.lead-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
}

.lead-crumb__sep {
  color: var(--text-tertiary);
}

.lead-crumb__name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

/* Detalle: cabecera con nombre y chips a la izquierda; etapa, primario y «Más» a la derecha. */
.lead-head__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.lead-head__main {
  flex: 1 1 280px;
  min-width: 0;
  display: grid;
  gap: 10px;
}

.lead-head__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lead-stage-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lead-stage-field .field__label {
  margin: 0;
  white-space: nowrap;
}

.lead-stage-field .select {
  width: auto;
  min-width: 180px;
  height: 44px;
}

.lead-more {
  position: relative;
}

.lead-more__menu {
  top: calc(100% + 4px);
  right: 0;
  bottom: auto;
  left: auto;
  min-width: 240px;
}

.lead-more__menu .menu__item {
  min-height: 44px;
}

/* Pestañas Resumen · Conversación: solo en < 1100 px. */
.lead-detail__tabs .segmented {
  display: flex;
  flex-wrap: nowrap;
}

.lead-detail__tabs .segmented__option {
  flex: 1 1 0;
  min-height: 40px;
}

@media (max-width: 1099.98px) {
  .lead-detail__grid[data-tab="resumen"] > .lead-conv,
  .lead-detail__grid[data-tab="conversacion"] > .lead-next {
    display: none;
  }
}

/* ≥ 1100: dos columnas; la izquierda es sticky solo si cabe (con su propio scroll), así la
   calificación del borrador siempre se alcanza en 1366×768. */
@media (min-width: 1100px) {
  .lead-detail__tabs {
    display: none;
  }

  .lead-detail__grid > .lead-next {
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
    max-height: calc(100vh - var(--topbar-h) - 32px);
    overflow: auto;
    overscroll-behavior: contain;
  }
}

/* Teléfono y tablet vertical: el segmentado de pestañas a lo ancho y los controles del detalle
   debajo del nombre. */
@media (max-width: 767.98px) {
  .leads-page .page-header__actions .segmented {
    flex: 1 1 auto;
    flex-wrap: nowrap;
  }

  .leads-page .page-header__actions .segmented__option {
    flex: 1 1 0;
    min-height: 40px;
  }

  .lead-head__controls {
    width: 100%;
  }

  .lead-stage-field {
    flex: 1 1 100%;
  }

  .lead-stage-field .select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .lead-head__controls > .btn--primary {
    flex: 1 1 auto;
  }
}

@media (max-width: 519.98px) {
  .leads-tab__long {
    display: none;
  }

  .leads-tab__short {
    display: inline;
  }
}

/* === D1 publicaciones, inicio === */

/* ---------- Inicio: «Hoy te toca» ---------- */
.home-today,
.home-block {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.home-section__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-section__title {
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
}

.home-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-tiles > li {
  min-width: 0;
}

.home-tile {
  display: grid;
  align-content: start;
  gap: 4px;
  height: 100%;
  min-height: 44px;
  padding: 16px;
  border: 1px solid var(--blue-2);
  border-radius: var(--radius-lg);
  background: var(--blue-1);
  color: var(--text-primary);
  text-decoration: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.home-tile:hover {
  border-color: var(--blue-3);
  box-shadow: var(--shadow-sm);
}

.home-tile__value {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  color: var(--blue-8);
  font-variant-numeric: tabular-nums;
}

.home-tile.is-zero .home-tile__value {
  color: var(--text-tertiary);
}

.home-tile__label {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.home-tile__label .icon {
  flex: none;
  color: var(--blue-7);
}

/* ---------- Inicio: KPIs (3 / 2 / 1 columnas) ---------- */
.home .kpi-grid.home-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kpi__nocompare {
  font-size: 13px;
  line-height: 16px;
  color: var(--text-tertiary);
}

.home .fold__body > .home-kpis {
  margin-top: 12px;
}

/* ---------- Inicio: actividad + publicaciones con más movimiento ---------- */
.home__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px;
  align-items: start;
}

.home__grid > * {
  min-width: 0;
}

.home-top__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-top__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.home-top__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.home-top__row > .icon {
  flex: none;
  margin-top: 2px;
  color: var(--text-tertiary);
}

.home-top__main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.home-top__text {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-top__meta {
  margin: 0;
  font-size: 13px;
  line-height: 16px;
}

/* ---------- Publicaciones: encabezado y menú «Actualizar» ---------- */
.posts-update {
  position: relative;
}

.posts-update__caret {
  transform: rotate(90deg);
}

.posts-update__btn[aria-expanded="true"] .posts-update__caret {
  transform: rotate(-90deg);
}

/* Más específico que `.app.is-collapsed .menu` (menú de cuenta con la barra contraída). */
.posts-page .posts-update .menu.posts-update__menu {
  top: calc(100% + 4px);
  right: 0;
  bottom: auto;
  left: auto;
  width: 300px;
  max-width: calc(100vw - 32px);
}

.posts-update__menu[hidden] {
  display: none;
}

.posts-menu__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
}

.posts-menu__item > .icon {
  grid-row: span 2;
}

.posts-menu__label {
  font-weight: 600;
}

.posts-menu__help {
  grid-column: 2;
  font-size: 13px;
  line-height: 16px;
  color: var(--text-secondary);
}

.posts-menu__item:disabled {
  cursor: default;
  opacity: 0.6;
}

.posts-status {
  margin: -8px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
  text-align: right;
}

.posts-status__tip {
  margin-left: 4px;
  vertical-align: middle;
}

/* ---------- Publicaciones: filtros (chips + «Más filtros» en todos los tamaños) ---------- */
.posts-filters .filters__more {
  display: inline-flex;
}

.posts-filters:not(.is-expanded) .filters__grid {
  display: none;
}

.posts-filters .filter-chips {
  flex-wrap: wrap;
  overflow: visible;
  margin: 0;
  padding: 0;
}

.posts-none-watched {
  margin: -8px 0 0;
}

.posts-chip-tip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.posts-comments {
  white-space: nowrap;
}

@media (max-width: 1279.98px) {
  .home__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1023.98px) {
  .home-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* Teléfono: mosaicos 2×2 compactos para que el primer número se vea sin desplazar. */
@media (max-width: 767.98px) {
  .home-tiles {
    gap: 8px;
  }

  .home-tile {
    padding: 12px;
  }

  .home-tile__value {
    font-size: 24px;
    line-height: 30px;
  }

  .home .kpi-grid.home-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .posts-page .page-header__actions {
    flex-wrap: nowrap;
  }

  .posts-page .page-header__actions > .btn--primary {
    flex: 1 1 auto;
  }

  .posts-status {
    margin-top: -4px;
    text-align: left;
  }

  .posts-comments {
    white-space: normal;
  }
}

/* === D1 calidad, análisis, agente, equipo === */
/* Lote 5 del rediseño para marketing (REDISENO_PANEL_MARKETING §3.5 a §3.9). Solo reglas nuevas,
   con prefijos propios: cal- (Calidad), ana- (Análisis), agt- (Agente), team- (Equipo) y acct-
   (Mi cuenta). */

/* Pestañas sobre el segmentado: nombre largo, corto (teléfono) y contador. */
.cal-tab__short,
.team-tab__short {
  display: none;
}

.cal-tab__count {
  color: var(--text-secondary);
  font-weight: 500;
}

@media (max-width: 767.98px) {
  .cal-tab__long,
  .team-tab__long {
    display: none;
  }

  .cal-tab__short,
  .team-tab__short {
    display: inline;
  }

  .cal-page .segmented,
  .team .page-header__actions .segmented {
    display: flex;
    width: 100%;
  }

  .cal-page .segmented__option,
  .team .segmented__option {
    flex: 1 1 auto;
    min-height: 40px;
  }
}

/* ---------- Calidad ---------- */
.cal-view,
.cal-section,
.cal-drafts {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.cal-section__head,
.cal-card__title,
.ana-card__title,
.agt-card__title,
.team-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}

.cal-section__title {
  margin: 0;
}

.cal-list {
  gap: 12px;
}

.cal-row {
  gap: 8px;
}

.cal-row__comment,
.cal-row__proposal {
  margin: 0;
}

.cal-row__proposal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-1);
  color: var(--text-primary);
}

.cal-row__label {
  color: var(--text-secondary);
  font-weight: 600;
}

.cal-row__proposal .clamp-2 {
  flex: 1 1 240px;
  min-width: 0;
}

.cal-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.cal-row__more {
  margin: 0;
}

.cal-row__more[open] > :not(summary) {
  margin-top: 8px;
}

.cal-row__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
}

.cal-row__foot > .verdict-box {
  flex: 1 1 320px;
  min-width: 0;
}

.cal-row__view {
  flex: none;
}

/* En tarjetas táctiles los 3 botones de calificación son el primario de la fila (44 px). */
@media (max-width: 1023.98px) {
  .cal-row .verdict {
    min-height: 44px;
  }

  .cal-row__view {
    min-height: 44px;
  }
}

.cal-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.cal-gap__actions {
  margin-top: 4px;
}

/* ---------- Análisis ---------- */
.ana-kpi__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--text-link);
  text-decoration: none;
}

.ana-kpi__link:hover {
  text-decoration: underline;
}

.ana-not-enough {
  margin: 0;
  padding: 24px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}

.insights__card .rank-list__text .info-tip__btn {
  vertical-align: middle;
}

/* ---------- Agente ---------- */
.agt {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.agt .card__head,
.agt-card__head {
  flex-wrap: wrap;
}

.agt .dot--muted {
  background: var(--bgray-4);
}

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

.agt-tile {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-0);
}

.agt-tile__label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}

.agt-tile__value {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-primary);
  font-size: 19px;
  line-height: 28px;
  font-weight: 700;
}

.agt-tile__value .dot {
  width: 10px;
  height: 10px;
}

.agt-tile__text,
.agt-tile__note {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 18px;
}

.agt-tile__note--error {
  color: var(--red-70);
  font-weight: 600;
}

.agt-tile__action {
  margin-top: 6px;
}

.agt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.agt-card {
  min-width: 0;
}

.agt-word {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}

.agt-card__line {
  margin: 0;
  color: var(--text-secondary);
}

.agt-tech {
  display: grid;
  gap: 16px;
  min-width: 0;
}

@media (max-width: 1279.98px) {
  .agt-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023.98px) {
  .agt-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 519.98px) {
  .agt-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .agt-tile__action .btn {
    width: 100%;
    min-height: 44px;
  }
}

/* ---------- Equipo ---------- */
.team-email {
  display: block;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.team-table__email {
  max-width: 280px;
}

.team-table__actions {
  white-space: nowrap;
}

.team-actions {
  flex-wrap: nowrap;
}

.team-more {
  position: relative;
  display: inline-flex;
}

.team-more__btn {
  gap: 4px;
}

.team-more__menu {
  position: fixed;
  left: auto;
  right: auto;
  bottom: auto;
  min-width: 220px;
}

.team-more__item--danger,
.team-more__item--danger .icon {
  color: var(--red-70);
}

.team-more__menu .menu__item:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

@media (max-width: 1023.98px) {
  .team-actions .btn,
  .team .menu__item {
    min-height: 44px;
  }
}

.team-activity__day {
  list-style: none;
  padding: 16px 0 4px;
}

.team-activity__day:first-child {
  padding-top: 0;
}

.team-activity__day-title {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}

/* ---------- Mi cuenta ---------- */
.acct-role {
  display: grid;
  gap: 4px;
}

.acct-role__line,
.acct-agent__line,
.acct-agent__ask {
  margin: 0;
}

.acct-role__line {
  color: var(--text-primary);
}

.acct-role__name {
  font-weight: 600;
}

.acct-role__line .info-tip__btn {
  vertical-align: middle;
}

.acct-agent {
  display: grid;
  gap: 2px;
  font-size: 13px;
  line-height: 18px;
}

/* === Ayuda === */

/* Botón «¿Cómo funciona?» del encabezado de cada módulo: discreto, al final de las acciones. */
.guide-btn {
  padding-left: 10px;
  padding-right: 12px;
}

/* Panel lateral de la guía (<dialog> modal). En teléfono ocupa toda la pantalla. */
.guide-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(480px, 100vw);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--bg-surface-0);
  color: var(--text-primary);
  box-shadow: var(--shadow-xl);
  animation: guide-in 0.2s ease-out;
}

.guide-panel::backdrop {
  background: rgba(21, 24, 30, 0.45);
}

@keyframes guide-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}

body.guide-open {
  overflow: hidden;
}

.guide-panel__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.guide-panel__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 12px 16px 20px;
  border-bottom: 1px solid var(--border);
}

.guide-panel__heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.guide-panel__eyebrow {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--blue-7);
}

.guide-panel__title {
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
}

.guide-panel__title:focus {
  outline: none;
}

.guide-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
}

.guide-panel__foot {
  flex: none;
  display: flex;
  justify-content: flex-start;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}

/* Contenido de una guía (panel y módulo Ayuda). */
.guide {
  display: grid;
  align-content: start;
  gap: 24px;
}

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

.guide__title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.guide__purpose {
  color: var(--text-secondary);
}

.guide__note {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 20px;
}

/* Pasos numerados con el número en una pastilla azul suave. */
.guide-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guide-step;
}

.guide-steps__item {
  position: relative;
  min-height: 24px;
  padding-left: 36px;
  counter-increment: guide-step;
}

.guide-steps__item::before {
  content: counter(guide-step);
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--bg-brand-soft);
  color: var(--blue-8);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.guide-terms {
  display: grid;
  gap: 12px;
  margin: 0;
}

.guide-terms__term {
  font-weight: 600;
}

.guide-terms__text {
  margin: 2px 0 0;
  color: var(--text-secondary);
}

.guide-faq {
  display: grid;
}

.guide-faq .fold + .fold {
  border-top: 1px solid var(--border);
}

.guide-faq .fold__summary {
  min-height: 44px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-primary);
}

.guide-faq .fold__summary .icon {
  color: var(--text-tertiary);
}

.guide-faq__answer {
  color: var(--text-secondary);
}

/* Módulo Ayuda (#/ayuda). */
.help {
  max-width: 820px;
}

.help__search {
  flex: none;
}

.help__body {
  display: grid;
  gap: 16px;
}

.help-card {
  display: grid;
  gap: 12px;
}

.help-card > .card__desc {
  margin-top: -8px;
}

.help-guides {
  display: grid;
}

.help-guides > .fold + .fold {
  border-top: 1px solid var(--border);
}

.help-guides > .fold > .fold__summary {
  min-height: 48px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}

.help-guide {
  padding-top: 4px;
}

.help-guide__go {
  justify-self: start;
}

.help-terms {
  gap: 14px;
}

.help-ask {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.help-ask > .icon {
  flex: none;
  margin-top: 2px;
  color: var(--blue-7);
}

.help-ask__text {
  margin-top: 4px;
  color: var(--text-secondary);
}

/* Teléfono: el botón queda solo con el ícono, arriba a la derecha del título, y el panel ocupa
   toda la pantalla. */
@media (max-width: 767.98px) {
  .page-header--guide {
    position: relative;
  }

  .page-header--guide .page-header__main {
    padding-right: 52px;
  }

  .page-header--guide-only .page-header__actions {
    width: auto;
  }

  .guide-btn {
    position: absolute;
    top: -6px;
    right: 0;
    width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .guide-btn__label {
    display: none;
  }

  .guide-panel {
    width: 100vw;
    border-left: 0;
  }

  .guide-panel__body {
    padding: 20px 16px;
  }

  .guide-panel__head {
    padding-left: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-panel {
    animation: none;
  }
}

/* === Conocimiento (PLAN_CONOCIMIENTO_Y_BOT §3.10) === */
/* Prefijo kb-. Reutiliza las pestañas de Calidad (cal-tab) y el panel lateral de la guía. */
.kb-body,
.kb-tab,
.kb-list,
.kb-summary {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.kb-list {
  gap: 12px;
}

.kb-summary__card {
  display: grid;
  gap: 10px;
}

.kb-summary__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}

.kb-summary__text {
  margin: 0;
  min-width: 0;
}

.kb-summary__warn {
  margin: 0;
  color: var(--orange-80);
  font-weight: 600;
}

.kb-warning {
  margin: 4px 0 0;
}

.kb-filters {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
}

.kb-filters__more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
  gap: 12px;
  margin-top: 8px;
}

.kb-row {
  display: grid;
  gap: 8px;
  padding: 16px 20px;
}

.kb-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.kb-row__title {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.kb-tag {
  border: 1px solid var(--border);
  background: var(--bg-surface-0);
  color: var(--text-secondary);
}

.kb-row__answer {
  margin: 0;
}

.kb-row__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.kb-row__meta {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.kb-row__hint {
  color: var(--orange-80);
  font-weight: 600;
}

.kb-row__actions,
.kb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Panel lateral de la ficha: un poco más ancho que el de la guía. */
.kb-sheet {
  width: min(560px, 100vw);
}

.kb-sheet__foot {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
}

.kb-form {
  gap: 18px;
}

.kb-form__more {
  margin-top: 12px;
}

.kb-notices {
  display: grid;
  gap: 8px;
}

.kb-notices:empty {
  display: none;
}

/* Frases de ejemplo como chips. */
.kb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kb-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 2px 2px 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-surface-1);
  font-size: 14px;
  line-height: 20px;
}

.kb-chip__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.kb-chip__remove {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.kb-chip__remove:hover {
  background: var(--bgray-0);
  color: var(--text-primary);
}

.kb-amounts {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-1);
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.kb-devices {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.kb-devices__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

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

.kb-versions .fold__body,
.kb-version {
  display: grid;
  gap: 8px;
}

.kb-version {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.kb-version:last-child {
  border-bottom: 0;
}

.kb-version__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.kb-compiled {
  margin: 0;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-1);
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 19px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kb-examples {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 20px;
}

/* Probador. */
.kb-test {
  gap: 14px;
}

.kb-test__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.kb-test__drafts {
  display: grid;
  gap: 2px;
}

.kb-test__go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.kb-test__spend {
  margin: 0;
}

.kb-test__card {
  display: grid;
  gap: 12px;
}

.kb-test__entries {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.kb-understood {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-brand-soft);
}

.kb-history__card {
  display: grid;
  gap: 12px;
}

@media (max-width: 767.98px) {
  .kb-filters,
  .kb-dates {
    grid-template-columns: minmax(0, 1fr);
  }

  .kb-row {
    padding: 14px 16px;
  }

  .kb-sheet {
    width: 100vw;
  }

  .kb-sheet__foot > .btn {
    flex: 1 1 auto;
  }
}

/* === Lo real frente al borrador === */
/* Lo que ya pasó en Facebook (sólido, blanco, sello verde «Publicado») frente a lo que redacta el
   agente y no ha salido (borde punteado morado, fondo tenue, ícono del agente, «No publicado»). */
.origin-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--blue-1);
  color: var(--blue-8);
}

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.stamp--sent {
  background: var(--green-10);
  color: var(--green-70);
}

.stamp--draft {
  border-style: dashed;
  border-color: var(--purple-60);
  background: var(--gray-0);
  color: var(--purple-80);
}

.stamp--muted {
  border-style: dashed;
  border-color: var(--bgray-4);
  background: var(--gray-0);
  color: var(--bgray-7);
}

.stamp--danger {
  border-style: dashed;
  border-color: var(--red-70);
  background: var(--gray-0);
  color: var(--red-70);
}

/* Línea de estado del detalle: qué pasó en Facebook, en una frase. */
.fb-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface-1);
}

.fb-status__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bgray-1);
  color: var(--bgray-7);
}

.fb-status__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.fb-status__title {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.fb-status__detail {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

.fb-status--done {
  border-color: var(--green-20);
  background: var(--green-10);
}

.fb-status--done .fb-status__icon {
  background: var(--green-20);
  color: var(--green-80);
}

.fb-status--open {
  border-color: var(--blue-2);
  background: var(--blue-0);
}

.fb-status--open .fb-status__icon {
  background: var(--blue-2);
  color: var(--blue-8);
}

.fb-status--person {
  border-color: var(--orange-20);
  background: var(--orange-10);
}

.fb-status--person .fb-status__icon {
  background: var(--orange-20);
  color: var(--orange-80);
}

/* Sección «En Facebook»: el hilo real. */
.fb-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-0);
}

.fb-section__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.net-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue-7);
  color: var(--text-inverse);
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
}

.fb-section__note {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
}

/* Las respuestas de la página que ya salieron: borde verde suave en la burbuja. */
.fb-section .thread__item--page .thread__bubble {
  border-color: var(--green-20);
}

/* Borrador del agente: borde punteado y fondo tenue; «habría contestado» en gris. */
.reply-card--draft,
.draft-box {
  border: 1px dashed var(--purple-60);
  background: var(--purple-10);
}

.reply-card--shadow,
.draft-box--shadow {
  border: 1px dashed var(--bgray-4);
  background: var(--bg-surface-1);
}

.draft-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.draft-head__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gray-0);
  color: var(--purple-80);
}

.reply-card--shadow .draft-head__icon,
.draft-box--shadow .draft-head__icon {
  color: var(--bgray-7);
}

.draft-head__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.draft-head__aside {
  margin-left: auto;
  font-size: 13px;
  line-height: 16px;
  color: var(--text-secondary);
}

.draft-line {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
}

/* Bandeja: en cada fila, si ya se contestó en Facebook o si hay un borrador por revisar. */
.row-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.row-state__fb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--green-70);
}

.row-state__draft {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1px dashed var(--purple-60);
  border-radius: var(--radius-pill);
  background: var(--purple-10);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  color: var(--purple-80);
  white-space: nowrap;
}

.row-state__note {
  font-size: 13px;
  line-height: 16px;
  color: var(--text-secondary);
}

/* Calidad: lo que se publicó en Facebook frente al borrador. */
.cal-row__fb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--green-20);
  border-radius: var(--radius-md);
  background: var(--bg-surface-0);
  color: var(--text-primary);
}

.cal-row__fb .clamp-2 {
  flex: 1 1 240px;
  min-width: 0;
}

.cal-row__proposal.draft-box,
.cal-row__proposal.draft-box--shadow {
  align-items: center;
}

/* Prospecto: el borrador de Messenger dentro de «Qué sigue». */
.lead-draft-box {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
}

.detail-status:empty {
  display: none;
}

/* === Casos (docs/auditoria-loop/05 §8) === */
/* Lista con mosaicos, detalle en panel lateral de dos columnas (relojes, «Qué hacer ahora» y
   línea de tiempo) y Resumen. Solo reglas nuevas; reutiliza bandeja, hoja y tarjetas. */

/* Inicio: «Hoy te toca» con el quinto mosaico (Casos por atender). */
@media (min-width: 1024px) {
  .home-tiles--5,
  .case-tiles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.home-tile.is-alert {
  border-color: var(--red-10);
  background: var(--red-05);
}

.home-tile.is-alert .home-tile__value {
  color: var(--red-70);
}

/* El envoltorio no cambia el layout de #view; solo da un panel más ancho al detalle. */
.cases-root {
  display: contents;
}

@media (min-width: 1280px) {
  .cases-root {
    --sheet-w: 560px;
  }
}

@media (min-width: 1600px) {
  .cases-root {
    --sheet-w: 820px;
  }
}

.cases-tabs .segmented__option {
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .cases-page .page-header__actions .cases-tabs {
    display: flex;
    width: 100%;
  }
}

/* Teléfono angosto: seis pestañas en dos filas de tres. */
@media (max-width: 519.98px) {
  .cases-tabs .segmented__option {
    flex: 1 1 calc(33.33% - 2px);
  }
}

.cases-hours {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
}

.cases-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cases-filters__row .filters__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.case-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
}

.case-row__code {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.case-row__sla--late {
  color: var(--red-70);
  font-weight: 600;
}

.case-row__owner {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.case-owner--none {
  color: var(--red-70);
  font-weight: 600;
}

.case-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ---------- detalle ---------- */
.case-sheet .sheet__body {
  container-type: inline-size;
}

.case-head__code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.case-head__copy {
  flex: none;
  margin-left: auto;
}

.case-title {
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}

.case-owner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.case-owner__who {
  margin: 0;
}

.case-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.case-clocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-clock {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface-0);
}

.case-clock--danger {
  border-color: var(--red-10);
  background: var(--red-05);
}

.case-clock--warn {
  border-color: var(--orange-10);
  background: var(--orange-10);
}

.case-clock__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.case-clock__value {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.case-clock--danger .case-clock__value {
  color: var(--red-70);
  font-weight: 600;
}

.case-clock--warn .case-clock__value {
  color: var(--orange-80);
}

/* Barra del SLA: <progress> nativo (sin estilos inline por la CSP). */
.case-clock__bar {
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bgray-1);
  color: var(--green-70);
  appearance: none;
  overflow: hidden;
}

.case-clock__bar::-webkit-progress-bar {
  background: var(--bgray-1);
}

.case-clock__bar::-webkit-progress-value {
  background: var(--green-70);
}

.case-clock__bar::-moz-progress-bar {
  background: var(--green-70);
}

.case-clock__bar--warn::-webkit-progress-value {
  background: var(--orange-70);
}

.case-clock__bar--warn::-moz-progress-bar {
  background: var(--orange-70);
}

.case-clock__bar--danger::-webkit-progress-value {
  background: var(--red-70);
}

.case-clock__bar--danger::-moz-progress-bar {
  background: var(--red-70);
}

/* «Qué hacer ahora» primero; desde 700 px de panel, línea de tiempo a la izquierda. */
.case-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.case-cols__todo,
.case-cols__timeline {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

@container (min-width: 700px) {
  .case-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .case-cols__timeline {
    order: -1;
  }
}

.case-todo__lead {
  margin: 0;
  font-weight: 600;
}

.case-drafts {
  display: grid;
  gap: 12px;
}

.case-draft,
.case-wa {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.case-drafts > .case-draft + .case-draft,
.case-wa {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.case-draft > .verdict-box {
  padding-top: 8px;
}

.case-draft__guard {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.case-variant {
  display: grid;
  gap: 8px;
}

.case-block__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.case-wa__link {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.case-summary {
  margin: 0;
}

.case-notes {
  display: grid;
  gap: 8px;
}

.case-timeline {
  display: grid;
  align-content: start;
  gap: 12px;
}

.case-event {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
}

.case-event__dot {
  justify-self: center;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--bgray-4);
}

.case-event--note .case-event__dot {
  background: var(--blue-7);
}

.case-event__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.case-event__text {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}

.case-event__note {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-1);
  font-size: 14px;
  line-height: 20px;
}

.case-event__meta {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-tertiary);
}

/* ---------- Resumen ---------- */
.cases-stats,
.cases-stats__body {
  display: grid;
  gap: 16px;
}

.cases-stats__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (min-width: 1280px) {
  .cases-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

@media (max-width: 1023.98px) {
  .cases-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cases-chart,
.cases-funnel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.cases-chart__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

/* ---------- Olas 0 a 4 (docs/auditoria-loop/06) ---------- */

/* Rúbrica de 5 preguntas en «La cambiaría» (O1-04). */
.rubric {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rubric__legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.rubric__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.rubric__question {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
}

.rubric .segmented {
  justify-self: start;
}

/* Reglas de estilo que rompe la propuesta y privado imposible (O1-04). */
.proposal-checks {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--orange-20);
  border-radius: var(--radius-sm);
  background: var(--orange-10);
}

.proposal-checks__private,
.proposal-checks__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--orange-80);
}

.proposal-checks__private .icon,
.proposal-checks__title .icon {
  flex: none;
}

.proposal-checks__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 22px;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-primary);
}

/* Prospectos: qué tan caliente (O1-02) y la cola «La persona espera». */
.lead-heat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lead-heat__track {
  width: 40px;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--bgray-1);
}

.lead-heat__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bgray-4);
}

.lead-heat--warm .lead-heat__fill {
  background: var(--orange-60);
}

.lead-heat--hot .lead-heat__fill {
  background: var(--red-50);
}

.lead-heat--cool {
  color: var(--text-secondary);
}

.lead-heat--warm {
  color: var(--orange-80);
}

.lead-heat--hot {
  color: var(--red-70);
}

.leads-queue-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.leads-queue {
  border-color: var(--orange-20);
}

/* Detalle del prospecto: misma persona, «Preparar respuesta» y enlace a la app. */
.lead-same {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.lead-same .icon {
  color: var(--text-tertiary);
}

.prepare__steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prepare__step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.prepare__num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--bg-brand-soft);
  color: var(--blue-8);
  font-size: 12px;
  font-weight: 700;
}

.prepare__text {
  font-size: 14px;
  line-height: 20px;
}

.app-link__row {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.app-link__url {
  min-width: 0;
  font-size: 13px;
}

.app-link__msg,
.pfu__msg,
.conv-send__msg,
.case-feedback__msg {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--orange-80);
  font-weight: 500;
}

@media (max-width: 519.98px) {
  .prepare__step {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .prepare__step > .btn {
    grid-column: 2;
    justify-self: start;
  }
}

/* Publicaciones: interruptores por publicación y rendimiento (O0-10, O2-04, O2-10). */
.post-flags__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-flags__row,
.post-flags__label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  cursor: pointer;
}

.switch__input {
  position: absolute;
  width: 40px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch__track {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--bgray-3);
  transition: background 0.15s;
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-surface-0);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s;
}

.switch__input:checked + .switch__track {
  background: var(--blue-7);
}

.switch__input:checked + .switch__track::after {
  transform: translateX(16px);
}

.switch__input:focus-visible + .switch__track {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.switch__input:disabled + .switch__track {
  opacity: 0.6;
}

.switch__label {
  font-size: 14px;
  line-height: 20px;
}

.post-perf .fold__body {
  padding-left: 0;
}

.post-perf__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.post-perf__head .card__desc {
  margin: 0;
}

/* Agente: autonomía, aprendizaje y primer mensaje (O1-11, O1-12, O2-03, O2-07). */
.agt-more__host {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.agt-more {
  display: grid;
  gap: 12px;
}

.agt-issues {
  margin: 0;
  padding-left: 18px;
}

.auto-default {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.auto-default__label {
  margin: 0;
  font-weight: 600;
}

.auto-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auto-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  container-type: inline-size;
}

.auto-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(200px, 260px);
  align-items: center;
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

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

.auto-row__name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.auto-row__name .muted {
  font-size: 12px;
  line-height: 16px;
}

.auto-row__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-secondary);
}

.auto-row .field {
  margin: 0;
}

@container (max-width: 459.98px) {
  .auto-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.learn-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.learn-list__item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.learn-list__item p {
  margin: 0;
}

.learn-list__notes {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 20px;
}

.ft-groups {
  display: grid;
  gap: 16px;
}

.ft-group {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.ft-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.ft-group__head .field {
  flex: 1 1 260px;
  min-width: 0;
}

.ft-variants {
  display: grid;
  gap: 12px;
}

.ft-variant {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.ft-variant:first-child {
  padding-top: 0;
  border-top: 0;
}

/* Seguimiento público (O2-04). */
.pfu {
  display: grid;
  gap: 12px;
}

.pfu > .muted {
  margin: 0;
}

.pfu-card {
  display: grid;
  gap: 10px;
}

.pfu-card > p {
  margin: 0;
}

/* Inicio: clics a la app y «¿Quién resolvió?» (O1-14, O2-09). */
.home-growth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px;
  align-items: start;
}

.home-resolved__title {
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 767.98px) {
  .home-growth {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Conversación: escribirle desde el panel (O3-03). */
.conv-send {
  display: grid;
  gap: 10px;
}

.conv-send > p {
  margin: 0;
}

.conv-send__log {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

/* Caso: encuesta por Messenger (O3-05). */
.case-feedback {
  display: grid;
  gap: 6px;
}

.case-feedback > p {
  margin: 0;
}