/* MIRAI — Dashboard de clientes · estilos (sección Inicio)
   Reutiliza variables y tipografía de styles.css (:root, --ink, --muted, etc.) */

.dboard {
  display: flex;
  width: 100%;
  min-height: 100vh;
  background: #f6f6f7;
  color: var(--ink);
  font-family: var(--sans);
  letter-spacing: -0.005em;
}

/* ====== Sidebar ====== */
.dash-sb {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 232px;
  flex: none;
  height: 100vh;
  background: #fff;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  padding: 8px 16px 22px;
  /* Cuentas admin (muchos items de nav + Perfil/Configuración/selector de
     cuenta al pie) pueden superar los 100vh en pantallas bajas — sin esto,
     lo que no entra queda recortado y no hay forma de llegar (ver mobile). */
  overflow-y: auto;
}
.dash-sb__logo { display: block; padding: 6px 6px 18px; }
.dash-sb__logo img { height: 145px; width: auto; display: block; }
.dash-sb__nav { display: flex; flex-direction: column; gap: 4px; }
.dash-sb__foot { margin-top: auto; }
.dash-sb__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: rgba(0,0,0,0.74);
  text-align: left;
  transition: background 200ms ease, color 200ms ease;
}
.dash-sb__item:hover { background: rgba(0,0,0,0.05); color: #000; }
.dash-sb__item.is-active { background: #000; color: #fff; }
.dash-sb__icon { display: inline-flex; width: 20px; justify-content: center; }
.dash-sb__scrim { display: none; }

/* ====== Main ====== */
.dash-main {
  flex: 1;
  min-width: 0;
  padding: 26px clamp(20px, 3vw, 40px) 56px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ====== Header ====== */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; }
.dash-head__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* Hamburger: oculto en desktop (mayor especificidad que .dash-iconbtn), visible sólo en mobile */
.dash-iconbtn.dash-head__menu { display: none; }
.dash-head__heading { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dash-head__titlerow { display: flex; align-items: center; gap: 13px; }
.dash-head__channel-icon { display: inline-flex; align-items: center; flex: none; }
.dash-head__title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.dash-head__sub { color: var(--muted); font-size: 14px; margin-top: 0; line-height: 1.3; }
.dash-head__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* ====== Filtros / pastillas ====== */
.dash-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease;
}
.dash-pill:hover { border-color: #000; }
.dash-pill--toggle.is-on { background: #000; color: #fff; border-color: #000; }

/* ====== Dropdown ====== */
.dd { position: relative; }
.dd__menu {
  position: absolute;
  top: calc(100% + 8px);
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,0.28);
  padding: 6px;
  /* Por encima de drawers/modales (z-index 80) — importante para el modo
     portal, donde el menú se saca de su contenedor y pasa a competir por
     stacking directamente contra el resto de la página. */
  z-index: 200;
}
.dd__menu--left { left: 0; }
.dd__menu--right { right: 0; }
.dd__opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 9px;
  font-family: var(--sans);
  font-size: 13px;
  color: #000;
  cursor: pointer;
  transition: background 160ms ease;
}
.dd__opt:hover { background: rgba(0,0,0,0.05); }
/* Opciones con checkbox (selección múltiple, ej. "Derivado a" del Tablero) */
.dd__opt--check { display: flex; align-items: center; gap: 9px; }
/* Opciones con ícono a la izquierda (ej. menú de Perfil) */
.dd__opt--icon { display: flex; align-items: center; gap: 9px; }
/* "Cerrar sesión": rojo fuerte, mismo tono que .btn--danger */
.dd__opt.dd__opt--danger,
.mirai-dark .dd__opt.dd__opt--danger { color: #C0003B; }
.dd__opt-check {
  flex: none; width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--rule-strong); display: inline-flex; align-items: center; justify-content: center;
  color: #fff; transition: background 140ms ease, border-color 140ms ease;
}
.dd__opt--check.is-sel .dd__opt-check { background: #4F46E5; border-color: #4F46E5; }
.dd__opt.is-sel { background: rgba(0,0,0,0.05); font-weight: 600; }

/* ====== Avatar perfil ====== */
.dash-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: #fff; color: #000; border: 1px solid var(--rule-strong);
  cursor: pointer; transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.dash-avatar:hover { background: #000; color: #fff; border-color: #000; }

/* ====== Cards base ====== */
.dash-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 20px;
}
.dash-card__title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
/* Fila título + acción (ej. botón "Crear cuenta" en Cuentas, "Nueva corrida" en Tester). */
.dash-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash-card__head .dash-card__title { margin: 0; }

/* ====== Métricas ====== */
.dash-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.dash-metric {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.dash-metric:hover { border-color: var(--rule-strong); box-shadow: 0 10px 26px -20px rgba(0,0,0,0.25); }
/* Filas de metricas con menos de 5 tarjetas (ej. gasto del monitor): columnas
   mas anchas para que valores largos (fecha + hora) no se corten a una
   segunda linea. */
.dash-metrics--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-metric__label { font-size: 12.5px; color: var(--muted); }
.dash-metric__value { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin-top: 2px; }
.dash-metric__value--text { font-size: 23px; word-break: break-word; }
.dash-metric__delta { font-size: 12.5px; font-weight: 500; }
.dash-metric__delta.is-up { color: #15803d; }
.dash-metric__delta.is-down { color: #b45309; }
.dash-metric__note { font-size: 11.5px; color: var(--muted-soft); }

/* ====== Charts grid ====== */
/* Mismas proporciones de columna que .dash-bottom (791/430/370) para que
   "Resultado de las consultas" quede del mismo ancho que "Zonas más buscadas"
   y "Canales" quede del mismo ancho que "Consultas no resueltas". */
.dash-charts {
  display: grid;
  grid-template-columns: minmax(0, 791fr) minmax(0, 430fr) minmax(0, 370fr);
  gap: 16px;
  align-items: stretch;
}
.dash-card--chart { display: flex; flex-direction: column; }
.dash-legend { display: flex; gap: 16px; margin-top: 10px; }
.dash-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.dot--dark { background: #000; }
.dot--gray { background: #b6b6b6; }

.dash-chart { position: relative; margin-top: 8px; width: 100%; }
.dash-chart svg { display: block; width: 100%; }
.dash-chart__axis { font-size: 10px; fill: var(--muted-soft); font-family: var(--mono); }
.dash-chart__tip {
  position: absolute;
  background: #000; color: #fff;
  border-radius: 10px; padding: 8px 10px;
  font-size: 11.5px; pointer-events: none;
  white-space: nowrap;
}
.dash-chart__tip-date { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.65); margin-bottom: 5px; }
.dash-chart__tip-row { display: flex; align-items: center; gap: 7px; }
.dash-chart__tip-row b { margin-left: 4px; font-weight: 600; }

/* ====== Donut ====== */
.dash-results { display: flex; align-items: center; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.dash-results--interactive { justify-content: center; }
.dash-donut { flex: none; }
.dash-donut__total { font-size: 20px; font-weight: 600; fill: #000; transition: font-size 150ms ease; }
.dash-donut__total-label { font-size: 10px; fill: var(--muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.dash-results__legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 9px; list-style: none; }
.dash-results__legend li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.dash-results__dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.dash-results__name { color: var(--muted-strong); }
.dash-results__pct { margin-left: auto; font-weight: 600; }

/* ---- Fila interactiva (tarjeta "Resultado de las consultas") ---- */
.dash-results__row {
  cursor: pointer; padding: 5px 7px; margin: -5px -7px; border-radius: 7px;
  transition: opacity 180ms ease, background 180ms ease;
}
.dash-results__row:hover, .dash-results__row.is-active { background: rgba(0,0,0,0.045); }
.dash-results__row.is-dim { opacity: 0.4; }
.dash-results__row .dash-results__name { flex: none; }
.dash-results__bar { flex: 1; min-width: 32px; height: 5px; border-radius: 999px; background: rgba(0,0,0,0.07); overflow: hidden; }
.dash-results__bar-fill { display: block; height: 100%; border-radius: 999px; transition: width 700ms cubic-bezier(.65,0,.35,1); }
.mirai-dark .dash-results__row:hover, .mirai-dark .dash-results__row.is-active { background: rgba(255,255,255,0.07); }
.mirai-dark .dash-results__bar { background: rgba(255,255,255,0.1); }

/* ====== Canales ====== */
.dash-channels { display: flex; flex-direction: column; margin-top: 6px; }
.dash-channels__row { display: flex; align-items: center; gap: 14px; padding: 16px 0; }
.dash-channels__row.has-sep { border-top: 1px solid var(--rule); }
.dash-channels__icon { display: inline-flex; }
.dash-channels__body { display: grid; grid-template-columns: 1fr auto; row-gap: 2px; flex: 1; }
.dash-channels__name { font-size: 13px; color: var(--muted-strong); }
.dash-channels__pct { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; grid-row: 2; }
.dash-channels__sub { font-size: 11.5px; color: var(--muted-soft); grid-column: 1 / -1; }

/* ====== Bottom grid ====== */
.dash-bottom {
  display: grid;
  grid-template-columns: minmax(0, 791fr) minmax(0, 430fr) minmax(0, 370fr);
  gap: 16px;
  align-items: stretch;
}

/* ====== Card "Portales" ======
   Lista minimalista: un solo grid de 4 columnas (logo / % / barra / conteo)
   compartido por todas las filas, para que las 4 columnas queden alineadas
   entre sí sin envolver cada fila en su propia card. Todo el ancho del
   contenido (mismo criterio que Análisis de IA), pero compacta en alto —
   apunta a quedar cerca de la altura de "Últimas consultas"/"Evolución de
   consultas y leads", un poco más para que entren cómodos los 7 portales. */
.dash-platforms {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  column-gap: 16px;
  row-gap: 11px;
  align-items: center;
  margin-top: 12px;
}
.dash-platforms__icon {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.dash-platforms__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dash-platforms__icon-fallback { font-size: 16px; font-weight: 700; color: var(--muted); }
.dash-platforms__pct { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.dash-platforms__bar { position: relative; height: 5px; border-radius: 999px; background: rgba(0,0,0,0.06); }
.mirai-dark .dash-platforms__bar { background: rgba(255,255,255,0.09); }
.dash-platforms__bar-fill { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 999px; transition: width 700ms cubic-bezier(.65,0,.35,1); }
.dash-platforms__count { font-size: 12px; color: var(--muted-soft); white-space: nowrap; }
.dash-platforms__count b { color: var(--ink); font-weight: 600; }

@media (max-width: 620px) {
  .dash-platforms { column-gap: 10px; row-gap: 10px; }
  .dash-platforms__icon { width: 30px; height: 30px; }
  .dash-platforms__pct { font-size: 13px; }
  .dash-platforms__count { font-size: 11px; }
}

/* ====== Análisis de IA (Inicio) ====== */
.dash-card--ai {
  border-top: 3px solid transparent;
  background: linear-gradient(180deg, rgba(124,92,252,0.05), transparent 45%), #fff;
}
.dash-ai__title { display: flex; align-items: center; gap: 10px; }
.dash-ai__badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; flex: none; }
.dash-card--ai .dash-ai__text { margin-top: 14px; line-height: 1.7; color: var(--ink); white-space: pre-line; font-size: 14px; }
.dash-card--ai .dash-ai__text strong { color: #7C5CFC; font-weight: 700; }
.dash-card--ai .dash-ai__meta { display: block; margin-top: 14px; font-size: 11.5px; color: var(--muted-soft); }

/* ====== Insights grid (intenciones, horarios pico, propiedades, tipos, motivos) ====== */
.dash-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.dash-insights--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ====== Tabla ====== */
.dash-table-wrap { margin-top: 14px; overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 600px; }
.dash-table th {
  text-align: left; font-weight: 500; color: var(--muted);
  font-size: 12px; padding: 0 10px 12px 0; white-space: nowrap;
}
.dash-table td { padding: 13px 10px 13px 0; border-top: 1px solid var(--rule); vertical-align: middle; white-space: nowrap; }
.dash-table tbody tr { cursor: pointer; transition: background 160ms ease; }
.dash-table tbody tr:hover { background: rgba(0,0,0,0.025); }
.dash-table__name { font-weight: 500; }
.dash-table__channel { display: inline-flex; align-items: center; gap: 8px; }
.dash-table__date { color: var(--muted); }
.dash-table__empty { text-align: center; color: var(--muted); padding: 30px 0; }

/* ====== Pastillas de estado ====== */
.dash-tag {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.dash-tag--btn { border: none; font: inherit; cursor: pointer; transition: filter 120ms ease; }
.dash-tag--btn:hover { filter: brightness(0.94); }
.mirai-dark .dash-tag--btn:hover { filter: brightness(1.15); }
.dash-tag.is-waiting    { background: #FEF3C7; color: #92400E; }
.dash-tag.is-qualified  { background: #DCFCE7; color: #166534; }
.dash-tag.is-emma       { background: #DCFCE7; color: #166534; }
.dash-tag.is-talking    { background: #E0F2FE; color: #075985; }
.dash-tag.is-unresolved { background: #FEE2E2; color: #991B1B; }
.dash-tag.is-manual     { background: #F1F1F1; color: #404040; }

/* ====== Listas (zonas / no resueltas) ====== */
.dash-list-card { display: flex; flex-direction: column; }
.dash-rank { list-style: none; display: flex; flex-direction: column; margin: 14px 0 4px; }
.dash-rank__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--rule); font-size: 13.5px; }
.dash-rank__row:first-child { border-top: none; }
.dash-rank__name { color: var(--ink); }
.dash-rank__val { font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-rank__val--muted { color: var(--muted); }
.dash-rank--full { margin-top: 0; }
.dash-link {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: #000;
  padding: 12px 0 0; transition: gap 180ms ease;
}
.dash-link:hover { gap: 10px; }

/* ====== Iconbtn ====== */
.dash-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: transparent; border: 1px solid transparent; color: #000;
  cursor: pointer; transition: background 160ms ease;
}
.dash-iconbtn:hover { background: rgba(0,0,0,0.06); }

/* ====== Drawer ====== */
.dash-drawer { position: fixed; inset: 0; z-index: 80; }
.dash-drawer__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.4); animation: dashFade 180ms ease; }
.dash-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(520px, 100%); background: #fff;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 50px -30px rgba(0,0,0,0.4);
  animation: dashSlide 240ms cubic-bezier(.2,.7,.2,1);
}
@keyframes dashFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dashSlide { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.dash-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 16px; border-bottom: 1px solid var(--rule); }
.dash-drawer__head-main { display: flex; gap: 12px; align-items: center; }
.dash-drawer__icon { display: inline-flex; }
.dash-drawer__name { font-size: 19px; font-weight: 600; }
.dash-drawer__meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.dash-drawer__time { font-size: 12px; color: var(--muted); }
.dash-drawer__body { padding: 8px 22px 22px; overflow-y: auto; flex: 1; }
.dash-drawer__section { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.dash-drawer__section:last-child { border-bottom: none; }
.dash-drawer__title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 12px; font-family: var(--mono); }
.dash-drawer__summary { font-size: 14px; line-height: 1.6; color: var(--muted-strong); white-space: pre-wrap; }
.dash-drawer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.dash-drawer__field { display: flex; flex-direction: column; gap: 3px; }
.dash-drawer__field-k { font-size: 11.5px; color: var(--muted-soft); }
.dash-drawer__field-v { font-size: 13.5px; color: var(--ink); }
.dash-drawer__collapse {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: transparent; border: none; cursor: pointer; padding: 0;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: #000;
}
.dash-drawer__chev { display: inline-flex; transition: transform 220ms ease; }
.dash-drawer__chev.is-open { transform: rotate(180deg); }
.dash-drawer__foot { padding: 16px 22px; border-top: 1px solid var(--rule); }

/* ====== Chat (lectura) ====== */
.dash-chat { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.dash-chat__msg { display: flex; flex-direction: column; max-width: 82%; }
.dash-chat__msg.is-lead { align-self: flex-start; align-items: flex-start; }
.dash-chat__msg.is-emma { align-self: flex-end; align-items: flex-end; }
.dash-chat__bubble { padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.dash-chat__msg.is-lead .dash-chat__bubble { background: #f1f1f2; color: #000; border-bottom-left-radius: 4px; }
.dash-chat__msg.is-emma .dash-chat__bubble { background: #000; color: #fff; border-bottom-right-radius: 4px; }
.dash-chat__time { font-size: 10.5px; color: var(--muted-soft); margin-top: 4px; }

/* ====== Modal ====== */
.dash-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dash-modal__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.4); animation: dashFade 180ms ease; }
.dash-modal__scrim--clear { background: transparent; }
.dash-modal__box {
  position: relative; background: #fff; border-radius: 18px;
  width: min(560px, 100%); max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.45); animation: dashPop 200ms cubic-bezier(.2,.7,.2,1);
}
@keyframes dashPop { from { transform: scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
.dash-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--rule); }
.dash-modal__head h3 { font-size: 16px; font-weight: 600; }
.dash-modal__body { padding: 18px 20px; overflow-y: auto; }
.dash-modal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-modal-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding-bottom: 10px; }
.dash-modal-table td { padding: 11px 12px 11px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.dash-modal-table__pct { font-weight: 600; white-space: nowrap; }
.dash-modal-table__desc { color: var(--muted); }

/* ====== Toast ====== */
.dash-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #000; color: #fff; padding: 11px 18px; border-radius: 999px;
  font-size: 13px; z-index: 90; box-shadow: 0 14px 36px -16px rgba(0,0,0,0.5);
  animation: dashToast 200ms ease;
}
@keyframes dashToast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ====== Responsive ====== */
/* 1500px (no 1180px): con la proporción 791/430/370, entre ~1180-1450px la
   columna de "Resultado de las consultas" queda demasiado angosta (título
   partido en dos líneas, dona apilada sobre la leyenda) en anchos de laptop
   muy comunes (1280-1440px). Pasar antes a 2 columnas le da más aire. */
@media (max-width: 1500px) {
  .dash-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dash-card--chart { grid-column: 1 / -1; }
  .dash-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dash-card--table { grid-column: 1 / -1; }
  .dash-insights { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* Sidebar off-canvas */
  .dash-sb {
    position: fixed; top: 0; left: 0; z-index: 70;
    transform: translateX(-100%); transition: transform 240ms cubic-bezier(.2,.7,.2,1);
    box-shadow: 20px 0 50px -30px rgba(0,0,0,0.4);
  }
  .dash-sb.is-open { transform: none; }
  .dash-sb__scrim {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 220ms ease;
  }
  .dash-sb__scrim.is-open { opacity: 1; pointer-events: auto; }
  .dash-iconbtn.dash-head__menu { display: inline-flex; }
  .dash-head__right { width: 100%; justify-content: flex-end; gap: 10px; }
}
@media (max-width: 620px) {
  /* Evitar que el main desborde horizontalmente */
  .dash-main { padding: 16px 14px 40px; overflow-x: hidden; }
  .dash-main--inbox { padding: 14px 12px 20px; }
  /* Grid: minmax(0) evita que min-content de hijos (tabla 600px) expanda el track */
  .dash-metrics, .dash-metrics--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-charts { grid-template-columns: minmax(0, 1fr); }
  .dash-bottom { grid-template-columns: minmax(0, 1fr); }
  .dash-insights, .dash-insights--2 { grid-template-columns: minmax(0, 1fr); }
  .dash-filters { width: 100%; }
  /* Título más compacto */
  .dash-head__title { font-size: 26px; }
  /* Ocultar tiempo de actualización — deja solo el ícono */
  .dash-refresh__time { display: none; }
  /* Valores de métricas más pequeños para 2 columnas */
  .dash-metric__value { font-size: 24px; }
  /* Config: botón WhatsApp debajo del texto */
  .dash-config__row { flex-wrap: wrap; gap: 10px; }
  .dash-config__wa { width: 100%; justify-content: center; }
  /* Tabla: ocultar columnas secundarias, quitar min-width fija */
  .dash-table { min-width: 0; font-size: 12px; }
  .dash-table td { white-space: normal; }
  /* Ocultar: Intención (3), Zona (4), Presupuesto (5), Fecha (7) */
  .dash-table th:nth-child(3),
  .dash-table td:nth-child(3),
  .dash-table th:nth-child(4),
  .dash-table td:nth-child(4),
  .dash-table th:nth-child(5),
  .dash-table td:nth-child(5),
  .dash-table th:nth-child(7),
  .dash-table td:nth-child(7) { display: none; }
  /* Donut: apilar verticalmente en tarjeta chica */
  .dash-results { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dash-results--interactive { align-items: center; }
  .dash-results__legend { min-width: 0; width: 100%; }
}
@media (max-width: 480px) {
  /* Título aún más compacto en teléfonos pequeños */
  .dash-head__title { font-size: 20px; }
  /* Ocultar subtítulo para ganar espacio vertical */
  .dash-head__sub { display: none; }
  /* Pills de filtro más pequeñas */
  .dash-pill { padding: 7px 10px; font-size: 12px; gap: 5px; }
  /* Valores de métricas compactos */
  .dash-metric__value { font-size: 22px; }
  /* Intenciones: label flexible, cortar con ellipsis si es muy largo */
  .dash-intents__row { grid-template-columns: 20px 1fr minmax(36px, 80px) auto; }
  .dash-intents__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Reducir gap del header */
  .dash-head { gap: 12px 16px; }
}

/* ====== Páginas de canal (WhatsApp / Instagram) ====== */
/* Sidebar activo por canal */
.dash-sb__item.is-active.is-whatsapp { background: #25D366; color: #fff; }
.dash-sb__item.is-active.is-instagram { background: linear-gradient(90deg, #8134AF 0%, #C837AB 38%, #F35369 70%, #F58529 100%); color: #fff; }
.dash-sb__item.is-active.is-crm { background: #C0003B; color: #fff; }
.dash-sb__item.is-active.is-crm:hover { background: #A0002E; }
.mirai-dark .dash-sb__item.is-active.is-crm { background: #C0003B; color: #fff; }
.mirai-dark .dash-sb__item.is-active.is-crm:hover { background: #A0002E; }
.dash-sb__item.is-active.is-tablero { background: #4F46E5; color: #fff; }
.dash-sb__item.is-active.is-tablero:hover { background: #4338CA; }
.mirai-dark .dash-sb__item.is-active.is-tablero { background: #4F46E5; color: #fff; }
.mirai-dark .dash-sb__item.is-active.is-tablero:hover { background: #4338CA; }

/* Tendencias por canal */
.dash-cmetrics.is-whatsapp .dash-metric__delta.is-up { color: #1FA855; }
.dash-cmetrics.is-instagram .dash-metric__delta.is-up { color: #E1306C; }

/* Intenciones más frecuentes */
.dash-intents { list-style: none; display: flex; flex-direction: column; gap: 17px; margin-top: 20px; }
.dash-intents__row { display: grid; grid-template-columns: auto auto minmax(40px, 1fr) auto; align-items: center; gap: 12px; font-size: 13.5px; }
.dash-intents__rank { color: var(--muted); }
.dash-intents__label { white-space: nowrap; }
.dash-intents__bar { height: 6px; border-radius: 999px; background: rgba(0,0,0,0.07); overflow: hidden; }
.dash-intents__fill { display: block; height: 100%; border-radius: 999px; transition: width 320ms cubic-bezier(.2,.7,.2,1); }
.dash-intents__pct { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Panel "Más información" (colapsable) */
.dash-more { background: #fff; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.dash-more__head { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 24px; background: transparent; border: none; cursor: pointer; text-align: left; position: relative; font-family: var(--sans); }
.dash-more__strip { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.dash-more__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; flex: none; margin-left: 8px; }
.dash-more__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.dash-more__title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.dash-more__sub { font-size: 13.5px; color: var(--muted); }
.dash-more__arrow { display: inline-flex; flex: none; transition: transform 260ms ease; }
.dash-more.is-open .dash-more__arrow { transform: rotate(90deg); }
.dash-more__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 340ms cubic-bezier(.2,.7,.2,1); }
.dash-more.is-open .dash-more__wrap { grid-template-rows: 1fr; }
.dash-more__inner { overflow: hidden; }
.dash-more__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; padding: 6px 24px 26px; border-top: 1px solid var(--rule); }
.dash-more__sectitle { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-family: var(--mono); margin-bottom: 14px; }

.dash-more__list { list-style: none; display: flex; flex-direction: column; }
.dash-more__consult { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 3px; align-items: center; padding: 11px 0; border-top: 1px solid var(--rule); }
.dash-more__consult:first-child { border-top: none; }
.dash-more__cname { grid-column: 1; grid-row: 1; font-weight: 500; font-size: 13.5px; }
.dash-more__cmeta { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--muted); }
.dash-more__consult .dash-tag { grid-column: 2; grid-row: 1; justify-self: end; }
.dash-more__ctime { grid-column: 2; grid-row: 2; justify-self: end; font-size: 11.5px; color: var(--muted-soft); }

.dash-peak { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.dash-peak__row { display: grid; grid-template-columns: 64px 1fr 38px; align-items: center; gap: 12px; font-size: 13px; }
.dash-peak__label { color: var(--muted-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-peak__bar { height: 6px; border-radius: 999px; background: rgba(0,0,0,0.07); overflow: hidden; }
.dash-peak__fill { display: block; height: 100%; border-radius: 999px; }
.dash-peak__pct { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 760px) {
  .dash-more__grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   MEJORAS v5 — interactividad, refresh, config, empty, dark mode
   ============================================================ */

/* ---- Animaciones de entrada (tarjetas y gráficos) ---- */
@keyframes dashCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dashSpin { to { transform: rotate(360deg); } }

.dash-fade > * { animation: dashCardIn 460ms cubic-bezier(.2,.7,.2,1) both; }
.dash-fade > *:nth-child(2) { animation-delay: 55ms; }
.dash-fade > *:nth-child(3) { animation-delay: 110ms; }
.dash-fade > *:nth-child(4) { animation-delay: 165ms; }
.dash-fade > *:nth-child(5) { animation-delay: 220ms; }
.dash-fade > *:nth-child(6) { animation-delay: 275ms; }
.dash-fade.is-updating { opacity: 0.55; transition: opacity 160ms ease; }

/* ---- Hover sutil en tarjetas (elevación + borde) ---- */
.dash-card, .dash-metric, .dash-more {
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease, background 220ms ease;
}
.dash-card:hover { border-color: var(--rule-strong); box-shadow: 0 14px 32px -24px rgba(0,0,0,0.32); transform: translateY(-2px); }
.dash-metric:hover { transform: translateY(-2px); }

/* ---- Transiciones suaves de elementos de datos ---- */
.dash-results__pct, .dash-metric__value { transition: color 200ms ease; }
.dash-donut__seg { transition: opacity 180ms ease; cursor: default; }
.dash-donut:hover .dash-donut__seg { opacity: 0.55; }
.dash-donut .dash-donut__seg:hover { opacity: 1; }

/* ---- Dona interactiva (tarjeta "Resultado de las consultas") ---- */
.dash-results--interactive .dash-donut__seg {
  cursor: pointer;
  transition: opacity 180ms ease,
    stroke-dasharray 700ms cubic-bezier(.65,0,.35,1), stroke-dashoffset 700ms cubic-bezier(.65,0,.35,1);
}
.dash-results--interactive .dash-donut__seg.is-dim { opacity: 0.35; }
.dash-results--interactive .dash-donut__seg.is-active { opacity: 1; }

/* ---- Control de actualización (refresh) ---- */
.dash-refresh { display: inline-flex; align-items: center; gap: 10px; }
.dash-refresh__time { font-size: 12px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.dash-refresh__btn { display: inline-flex; align-items: center; justify-content: center; }
.dash-refresh__btn svg { transition: transform 200ms ease; }
.dash-refresh__btn:not(:disabled):hover svg { transform: rotate(-35deg); }
.dash-refresh__btn.is-spinning svg { animation: dashSpin 0.8s linear infinite; }
.dash-refresh__btn:disabled { cursor: default; opacity: 0.85; }

/* ---- Empty state de canal ---- */
.dash-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; padding: 64px 24px;
  background: #fff; border: 1px dashed var(--rule-strong); border-radius: 16px;
  animation: dashCardIn 460ms cubic-bezier(.2,.7,.2,1) both;
}
.dash-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; }
.dash-empty__text { font-size: 15px; color: var(--muted-strong); margin: 0; max-width: 360px; }

/* ---- Configuración ---- */
.dash-config { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.dash-config__card { display: flex; flex-direction: column; gap: 6px; }
.dash-config__row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 0; border-top: 1px solid var(--rule);
}
.dash-config__card .dash-config__row:first-of-type { border-top: none; }
.dash-config__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-config__label { font-size: 14px; font-weight: 500; color: var(--ink); }
.dash-config__label--icon { display: inline-flex; align-items: center; gap: 7px; }
.dash-config__ch-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dash-config__value { font-size: 14px; color: var(--muted-strong); font-family: var(--mono); }
.dash-config__hint { font-size: 12.5px; color: var(--muted); max-width: 420px; line-height: 1.45; }
.dash-config__wa { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
.dash-config__row--link { cursor: pointer; text-decoration: none; color: inherit; transition: opacity 120ms ease; }
.dash-config__row--link:hover { opacity: 0.7; }

/* ---- Administración (panel admin) ---- */
.dash-sb__agency { padding: 0 6px 14px; }
/* Al pie del sidebar (debajo de Perfil/Configuración) separa con un filete
   arriba, en vez del padding pensado para cuando iba pegado al logo. */
.dash-sb__foot .dash-sb__agency { padding: 14px 6px 0; margin-top: 6px; border-top: 1px solid var(--rule); }
.dash-pill--agency { width: 100%; justify-content: space-between; }
.dash-form { display: flex; flex-direction: column; gap: 14px; }
.dash-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink); }
.dash-form input, .dash-form select, .dash-form textarea {
  font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--card-bg, transparent); color: var(--ink); resize: vertical;
}
.dash-form__error { color: #c0003b; font-size: 13px; margin: 0; }
.dash-form__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.dash-drawer__field--edit input { font: inherit; font-size: 13.5px; padding: 6px 9px; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); background: transparent; }
.dash-table__actions { display: flex; gap: 8px; white-space: nowrap; flex-wrap: wrap; justify-content: flex-end; }

/* Brokers — la tabla comparte .dash-table--admin (mismo hover gris que el
   resto de las tablas admin), pero ahí el padding-left de la celda es 0, así
   que el rectángulo del hover queda pegado al nombre del asesor. Un poco de
   aire a los costados, solo acá (no toca las otras tablas admin). */
.dash-brk__table td:first-child, .dash-brk__table th:first-child { padding-left: 14px; }
.dash-brk__table td:last-child, .dash-brk__table th:last-child { padding-right: 14px; }

/* Brokers — checklist de intenciones (chips toggle) en BrokerFormModal.
   div, no <label>, porque envuelve varios botones (ver comentario en
   BrokerFormModal). Mismo look que ".dash-form label". */
.dash-form__group { display: flex; flex-direction: column; gap: 6px; }
.dash-form__grouplabel { font-size: 13px; font-weight: 500; color: var(--ink); }
.dash-brk__intents { display: flex; flex-wrap: wrap; gap: 8px; }

/* Casilla dentro de un .dash-form__group (cuentas de Ads de un partner). En
   fila y sin el peso de ".dash-form label", que apila etiqueta sobre campo. */
.dash-form__check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.dash-form__check input { width: auto; margin: 0; }

/* Brokers — mismo layout que .dash-config (columna, gap 18px) pero SIN el
   max-width:720px de esa clase, para que la tabla y las cards de abajo
   lleguen al mismo ancho que la card "Todas las consultas" de Contactos. */
.dash-brk__body { display: flex; flex-direction: column; gap: 18px; }

/* Brokers — encabezado "Consultas derivadas" con el total animado
   (useCountUp, mismo hook que los números de Inicio — ver MetricCard). */
.dash-brk__cardshead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 22px; padding: 0 2px; }
.dash-brk__total { font-size: 13px; color: var(--muted); }
.dash-brk__total b { color: var(--ink); font-size: 16px; font-weight: 700; }

/* Brokers — cards de "consultas derivadas" por asesor, debajo de la tabla. */
.dash-brk__cards { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.dash-brk__leadcard { padding: 0; overflow: hidden; }
.dash-brk__leadcard-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; cursor: pointer; color: var(--ink); transition: background 140ms ease;
}
.dash-brk__leadcard-head:hover { background: rgba(0,0,0,0.025); }
.mirai-dark .dash-brk__leadcard-head:hover { background: rgba(255,255,255,0.035); }
.dash-brk__avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px; background: #000; color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: 0;
}
.mirai-dark .dash-brk__avatar { background: #fff; color: #000; }
.dash-brk__leadcard-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dash-brk__leadcard-name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.dash-brk__leadcard-phone { color: var(--muted); font-size: 12px; }
.dash-brk__leadcard-count { flex: 1; text-align: right; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.dash-brk__wabtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px; background: rgba(37,211,102,0.12); color: #25D366;
  transition: background 140ms ease, transform 140ms ease;
}
.dash-brk__wabtn:hover { background: rgba(37,211,102,0.22); transform: scale(1.07); }
.dash-brk__leadcard-chev { flex: none; color: var(--muted); display: inline-flex; transition: transform 160ms ease; }
.dash-brk__leadcard-chev.is-open { transform: rotate(180deg); }
.dash-brk__leadcard .dash-config__hint { margin: 0; padding: 0 20px 16px; }
.dash-brk__leadtable-wrap { margin: 0 16px 16px; }
.dash-brk__leadtable { min-width: 0; }
.dash-brk__leadtable th, .dash-brk__leadtable td { padding: 10px 10px 10px 0; }
.dash-brk__leadtable tbody tr { cursor: pointer; }
.dash-brk__leadname { font-weight: 600; }
.dash-brk__leadgo { color: var(--muted); text-align: right; }
.dash-brk__intent-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule);
  background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dash-brk__intent-chip:hover { border-color: rgba(0,0,0,0.45); color: var(--ink); }
.dash-brk__intent-chip.is-sel { background: #000; color: #fff; border-color: #000; }
.mirai-dark .dash-brk__intent-chip:hover { border-color: rgba(255,255,255,0.45); }
.mirai-dark .dash-brk__intent-chip.is-sel { background: #fff; color: #000; border-color: #fff; }

/* El rol se distingue con una pastilla (mismo lenguaje que los estados del
   Tablero — .dash-tag), no con la fila entera coloreada. */
.dash-tag.is-role-admin   { background: #000; color: #fff; }
.dash-tag.is-role-demo    { background: #FEF3C7; color: #92400E; }
.dash-tag.is-role-user    { background: #FEE2E2; color: #991B1B; }
.dash-tag.is-role-empresa { background: #DBEAFE; color: #1E40AF; }
.dash-tag.is-role-tester  { background: #D1FAE5; color: #065F46; }
/* Púrpura para partner. Los otros cinco ocupan negro, ámbar (38°), rojo (0°),
   verde (160°) y azul (220°): el único hueco real es el arco que va del azul
   al rojo. Dentro de ese arco va lo más lejos posible de sus dos vecinos
   (285°, a 65° del azul y 75° del rojo) — un violeta más cerca del azul, en
   una pastilla de 11 px y en tinte claro, se lee igual que Empresa. */
.dash-tag.is-role-partner { background: #F3E8FF; color: #6B21A8; }
.mirai-dark .dash-tag.is-role-admin   { background: #fff; color: #000; }
.mirai-dark .dash-tag.is-role-demo    { background: rgba(245,158,11,0.22); color: #fde68a; }
.mirai-dark .dash-tag.is-role-user    { background: rgba(220,60,60,0.22); color: #ffb4b4; }
.mirai-dark .dash-tag.is-role-empresa { background: rgba(59,130,246,0.22); color: #bfdbfe; }
.mirai-dark .dash-tag.is-role-tester  { background: rgba(16,185,129,0.22); color: #a7f3d0; }
.mirai-dark .dash-tag.is-role-partner { background: rgba(168,85,247,0.22); color: #e9d5ff; }

/* Segunda línea de la celda de nombre: de qué cuenta ve los datos un partner.
   Bloque, para que caiga debajo del nombre y no al lado. */
.dash-table__sub { display: block; margin-top: 2px; }

/* Divisor "Inmobiliarias" dentro de la misma tabla: separa las cuentas del
   sistema (admin/demo) de las inmobiliarias, sin cortar la tabla en dos. */
.dash-table--admin tr.dash-table__group td:first-child {
  padding: 18px 0 8px; border-top: none; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); text-align: left;
}
.dash-table__group:hover { background: transparent; }

/* Layout de Administración: cuentas + "cuenta actual" al costado */
.dash-admin__row { display: flex; flex-direction: column; gap: 18px; }
.dash-admin__accounts { width: 100%; }
.dash-cuenta-actual { width: 100%; }
.dash-cuenta-actual__btn { width: 100%; justify-content: space-between; }
.dash-admin__onboarding { width: 100%; }
.dash-admin__monitoreo { width: 100%; }

/* Monitoreo: aviso más reciente destacado (borde de color según severidad,
   clickeable) + historial en tabla debajo. El nombre del agente (MIRA/Ema/
   Servidor) es la pastilla — mismo fondo+color que tenía la vieja pastilla
   "OK" (verde/rojo, y negro en vez del ámbar/marrón de "atención"), con una
   sombra suave a tono. */
.dash-monitor__pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.dash-monitor__agent {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.dash-monitor__agent.is-ok   { background: #16A34A; color: #fff; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35); }
.dash-monitor__agent.is-warn { background: #EAB308; color: #000; box-shadow: 0 2px 8px rgba(234, 179, 8, 0.35); }
.dash-monitor__agent.is-down { background: #DC2626; color: #fff; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35); }

.dash-monitor__dot { font-size: 14px; line-height: 1; }
.dash-monitor__dot.is-ok { color: #16A34A; }
.dash-monitor__dot.is-warn { color: #EAB308; }
.dash-monitor__dot.is-down { color: #DC2626; }

/* Insignia de estado revisado/pendiente — al lado del título del modal y en
   la card destacada (el botón de acción va separado, como texto simple). */
.dash-monitor__reviewBadge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.dash-monitor__reviewBadge.is-pending { background: #F1F1F1; color: #404040; }
.dash-monitor__reviewBadge.is-reviewed { background: #DCFCE7; color: #166534; }
.mirai-dark .dash-monitor__reviewBadge.is-pending { background: rgba(255, 255, 255, 0.1); color: var(--muted-strong); }
.dash-monitor__modalTitle { display: inline-flex; align-items: center; gap: 8px; }
.dash-monitor__latestFoot { display: flex; align-items: center; gap: 8px; }
.dash-monitor__filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 2px 0 14px; }

.dash-monitor__search {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--rule-strong);
  color: var(--muted); width: 220px; flex: 1 1 200px; max-width: 280px;
  transition: border-color 160ms ease;
}
.dash-monitor__search:focus-within { border-color: #000; color: var(--ink); }
.dash-monitor__search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: var(--sans); font-size: 13px; color: var(--ink); }

.dash-monitor__selectwrap { position: relative; }
.dash-monitor__select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink);
  background: #fff; border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 9px 34px 9px 14px; outline: none;
  transition: border-color 160ms ease;
}
.dash-monitor__select:focus { border-color: #000; }
.dash-monitor__selectchev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); display: inline-flex; }

.mirai-dark .dash-monitor__search { background: #15171c; border-color: var(--rule-strong); }
.mirai-dark .dash-monitor__search:focus-within { border-color: #fff; }
.mirai-dark .dash-monitor__select { background: #15171c; border-color: var(--rule-strong); color: var(--ink); }
.mirai-dark .dash-monitor__select:focus { border-color: #fff; }

@media (max-width: 640px) {
  .dash-monitor__search { width: 100%; max-width: none; }
}

.dash-monitor__latest {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: 12px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}
.dash-monitor__latest:hover {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -24px rgba(0, 0, 0, 0.32);
}
.dash-monitor__latest.is-ok { border-left-color: #16A34A; }
.dash-monitor__latest.is-warn { border-left-color: #EAB308; }
.dash-monitor__latest.is-down { border-left-color: #DC2626; }
.dash-monitor__latestSummary { font-size: 14px; line-height: 1.4; color: var(--ink); margin: 0; }
.dash-monitor__latestDate { font-size: 12px; font-family: var(--mono); color: var(--muted-soft); }
.dash-monitor__more { margin-top: 12px; width: 100%; justify-content: center; }

.dash-table--admin tr.is-reviewed { opacity: 0.55; }

/* Modal de detalle de Onboarding: más ancho que el default (560px) para que
   entre el markdown completo sin quedar demasiado angosto. */
.dash-modal__box--wide { width: min(720px, 100%); }
/* Corridas de QA (Tester de Emma): conversación + traza técnica lado a lado
   necesitan bastante más espacio que el modal "wide" genérico. */
.dash-modal__box--xwide { width: min(1160px, 96vw); max-height: 88vh; }
.dash-onboarding__actions { flex-wrap: wrap; justify-content: flex-start; margin: 14px 0 0; }
.dash-onboarding__markdown {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.65;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0 0;
  color: var(--ink);
}
.dash-onboarding__answersTitle {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--muted); margin: 18px 0 8px;
}
.dash-onboarding__answerGroup { margin-bottom: 14px; }
.dash-onboarding__answerGroup h5 { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.dash-onboarding__answerItem {
  display: grid; grid-template-columns: minmax(140px, 240px) 1fr; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--rule); font-size: 13px;
}
.dash-onboarding__answerGroup .dash-onboarding__answerItem:first-child { border-top: none; }
.dash-onboarding__answerLabel { color: var(--muted); }
.dash-onboarding__answerValue { white-space: pre-wrap; }
@media (max-width: 480px) {
  .dash-onboarding__answerItem { grid-template-columns: 1fr; gap: 2px; }
}
.dash-cuenta-actual__empty { padding: 8px 12px; margin: 0; }
/* El menú del selector de "Cuenta actual" ocupa todo el ancho del card
   (no el min-width angosto que usan el resto de los dropdowns). */
.dash-cuenta-actual__dd { display: block; }
.dash-cuenta-actual__dd .dd__menu { left: 0; right: 0; width: auto; min-width: 0; }
.dd__search { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; color: var(--muted); }
.dd__search input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 13px; color: var(--ink); outline: none; }
.btn--danger { border-color: #c0003b; color: #c0003b; }
.btn--danger:hover { background: #c0003b; color: #fff; }

/* Toggles por canal */
.dash-switch--wa.is-on     { background: #25D366; }
.dash-switch--ig.is-on     { background: linear-gradient(90deg, #8134AF 0%, #C837AB 60%, #F58529 100%); }
.dash-switch--crm.is-on    { background: #C0003B; }
.dash-switch--rastreo.is-on { background: #1E90FF; }
.dash-switch--wa.is-on .dash-switch__knob,
.dash-switch--ig.is-on .dash-switch__knob,
.dash-switch--crm.is-on .dash-switch__knob,
.dash-switch--rastreo.is-on .dash-switch__knob { background: #fff; }

/* Switch (Dark Mode) */
.dash-switch {
  position: relative; width: 50px; height: 28px; border-radius: 999px; flex: none;
  background: rgba(0,0,0,0.16); border: none; cursor: pointer; padding: 0;
  transition: background 220ms ease;
}
.dash-switch.is-on { background: #000; }
.dash-switch__knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.dash-switch.is-on .dash-switch__knob { transform: translateX(22px); }

/* ============================================================
   DARK MODE — se activa con .mirai-dark en <html> (solo dashboard)
   ============================================================ */
.mirai-dark .dboard {
  --ink: #f2f3f5;
  --muted: rgba(255,255,255,0.60);
  --muted-soft: rgba(255,255,255,0.42);
  --muted-strong: rgba(255,255,255,0.84);
  --rule: rgba(255,255,255,0.10);
  --rule-strong: rgba(255,255,255,0.20);
  --chart-ink: #f2f3f5;
  --chart-leads: #6b7280;
  --chart-grid: rgba(255,255,255,0.12);
  --chart-bg: #15171c;
  background: #0e0f12;
  color: var(--ink);
}
/* `.btn--ghost` define `color: #000` en styles.css (la landing, que es siempre
   clara) y nadie lo revertía acá: en el panel oscuro quedaba texto negro sobre
   fondo negro. Afectaba a todos los botones fantasma del dashboard — "Anotar
   una idea", los "Cancelar" de cada modal — no solo a los nuevos.
   `.btn--primary` se deja como está: negro sobre la tarjeta oscura tiene poco
   contraste de borde, pero su texto es blanco y se lee; invertirlo a blanco
   cambiaría todos los botones del panel y eso es otra decisión. */
.mirai-dark .btn--ghost { color: var(--ink); border-color: var(--rule-strong); }
.mirai-dark .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.mirai-dark .dash-sb { background: #15171c; border-right-color: var(--rule); }
.mirai-dark .dash-card,
.mirai-dark .dash-metric,
.mirai-dark .dash-more,
.mirai-dark .dash-empty,
.mirai-dark .dash-drawer__panel,
.mirai-dark .dash-modal__box { background: #15171c; border-color: var(--rule); }
.mirai-dark .dash-card--ai { background: linear-gradient(180deg, rgba(124,92,252,0.1), transparent 45%), #15171c; }
.mirai-dark .dash-empty { border-style: dashed; border-color: var(--rule-strong); }
.mirai-dark .dash-pill,
.mirai-dark .dash-avatar { background: #15171c; color: var(--ink); border-color: var(--rule-strong); }
.mirai-dark .dash-sb__item { color: rgba(255,255,255,0.74); }
.mirai-dark .dash-sb__item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.mirai-dark .dash-sb__item.is-active { background: #fff; color: #000; }
.mirai-dark .dash-pill--toggle.is-on { background: #fff; color: #000; border-color: #fff; }
.mirai-dark .dash-avatar:hover { background: #fff; color: #000; border-color: #fff; }
.mirai-dark .dash-iconbtn:hover { background: rgba(255,255,255,0.09); }
.mirai-dark .dash-table tbody tr:hover { background: rgba(255,255,255,0.04); }
.mirai-dark .dash-switch { background: rgba(255,255,255,0.18); }
.mirai-dark .dash-switch.is-on { background: #fff; }
.mirai-dark .dash-switch.is-on .dash-switch__knob { background: #000; }
.mirai-dark .dash-donut__total { fill: var(--ink); }
.mirai-dark .dot--dark { background: #f2f3f5; }
/* Paleta gris (data-driven inline) -> invertida para leerse en oscuro */
.mirai-dark .dash-intents--grey .dash-intents__fill { filter: invert(1) brightness(1.05); }
.mirai-dark .dash-intents__bar,
.mirai-dark .dash-peak__bar { background: rgba(255,255,255,0.10); }
.mirai-dark .dash-modal__scrim,
.mirai-dark .dash-drawer__scrim { background: rgba(0,0,0,0.6); }

/* ---- Accesibilidad: respeta reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  .dash-fade > *, .dash-empty { animation: none !important; }
  .dash-refresh__btn.is-spinning svg { animation-duration: 1.6s; }
  .dash-card:hover, .dash-metric:hover { transform: none; }
}

/* ============================================================
   DARK MODE — fix de legibilidad de textos (solo color)
   La regla global `h1..h4 { color:#000 }` y varios botones con
   color:#000 quedaban ilegibles en oscuro. Acá se fuerzan a claro
   SIN tocar layout, tamaños, animaciones ni colores de marca.
   ============================================================ */
.mirai-dark .dboard h1,
.mirai-dark .dboard h2,
.mirai-dark .dboard h3,
.mirai-dark .dboard h4 { color: var(--ink); }
/* Botones e íconos que eran negros */
.mirai-dark .dash-iconbtn,
.mirai-dark .dash-link,
.mirai-dark .dash-drawer__collapse { color: var(--ink); }
.mirai-dark .dash-sb__item:hover { color: #fff; }
/* Menús desplegables (período, canal, perfil) */
.mirai-dark .dd__menu { background: #15171c; border-color: var(--rule-strong); }
.mirai-dark .dd__opt { color: var(--ink); }
.mirai-dark .dd__opt:hover,
.mirai-dark .dd__opt.is-sel { background: rgba(255,255,255,0.08); }
.mirai-dark .dd__opt-check { border-color: var(--rule-strong); }
.mirai-dark .dd__opt--check.is-sel .dd__opt-check { background: #6366F1; border-color: #6366F1; }
/* Burbuja del lead en el detalle (mantiene jerarquía, legible en oscuro) */
.mirai-dark .dash-chat__msg.is-lead .dash-chat__bubble { background: #23262e; color: var(--ink); }

/* ---- Logo del sidebar: claro por defecto, blanco en dark mode ---- */
.dash-sb__logo img.dash-sb__logo-dark { display: none; }
.mirai-dark .dash-sb__logo img.dash-sb__logo-light { display: none; }
.mirai-dark .dash-sb__logo img.dash-sb__logo-dark { display: block; }

/* Dark mode: la opción activa de canal conserva su color distintivo (igual que claro) */
.mirai-dark .dash-sb__item.is-active.is-whatsapp { background: #25D366; color: #fff; }
.mirai-dark .dash-sb__item.is-active.is-instagram { background: linear-gradient(90deg, #8134AF 0%, #C837AB 38%, #F35369 70%, #F58529 100%); color: #fff; }

/* ============================================================
   INBOX EN TIEMPO REAL (WhatsApp / Instagram)
   Vista compartida de 2 columnas: lista · conversación. El detalle del lead
   se abre como drawer lateral (mismo estilo que el de Contactos), no ocupa
   columna fija.
   Acento por canal vía --ibx-*: verde WhatsApp / gradiente Instagram.
   ============================================================ */
.dash-main--inbox { height: 100vh; overflow: hidden; padding: 22px 18px 18px 12px; gap: 14px; }

/* Barra mínima superior: solo el botón de menú mobile, alineado a la derecha */
.dash-ibx__topbar { display: flex; justify-content: flex-end; }

.dash-inbox {
  position: relative;
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(244px, 284px) minmax(0, 1fr);
  gap: 14px;
  /* WhatsApp (default) */
  --ibx-accent: #1FA855;
  --ibx-accent-soft: rgba(37,211,102,0.14);
  --ibx-grad: #25D366;
  --ibx-send: #25D366;
  --ibx-check: #53bdeb;
  --ibx-bubble-sent: #d9fdd3;
  --ibx-knob: #fff;
}
.dash-inbox.is-instagram {
  --ibx-accent: #E1306C;
  --ibx-accent-soft: rgba(225,48,108,0.10);
  --ibx-grad: linear-gradient(135deg, #F58529 0%, #DD2A7B 55%, #8134AF 100%);
  --ibx-send: linear-gradient(135deg, #F58529 0%, #DD2A7B 55%, #8134AF 100%);
  --ibx-check: #E1306C;
  --ibx-bubble-sent: #fdeaf3;
}
.dash-inbox.is-crm {
  --ibx-accent: #C0003B;
  --ibx-accent-soft: rgba(192,0,59,0.09);
  --ibx-grad: #C0003B;
  --ibx-send: #C0003B;
  --ibx-check: #C0003B;
  --ibx-bubble-sent: #fde8ed;
  --ibx-knob: #fff;
}
/* ícono circular CRM en el header */
.dash-head__crm-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
}
/* Columnas tipo card (lista y conversación) */
.dash-ibx__col {
  background: #fff; border: 1px solid var(--rule); border-radius: 18px;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}

/* Puntito de estado (semántico, igual en ambos canales) */
.dash-ibx__dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: none; }
.dash-ibx__dot.is-bot { background: #22C55E; }
.dash-ibx__dot.is-waiting { background: #F59E0B; }
.dash-ibx__dot.is-agent { background: #94A3B8; }

/* ---- Avatar (iniciales con color determinista) ---- */
.dash-ibx__avatar { position: relative; display: inline-flex; flex: none; border-radius: 50%; }
.dash-ibx__avatar.has-ring { padding: 2px; background: linear-gradient(135deg, #F58529, #DD2A7B 50%, #8134AF); }
.dash-ibx__avatar-circle {
  width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; line-height: 1; box-sizing: border-box;
}
.dash-ibx__avatar.has-ring .dash-ibx__avatar-circle { border: 2px solid #fff; }
.dash-ibx__online { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 999px; background: #22C55E; border: 2px solid #fff; }

/* ====== Columna izquierda: lista ====== */
.dash-ibx__list-head { padding: 18px 18px 0; }
.dash-ibx__list-titlerow { display: flex; align-items: center; gap: 10px; }
.dash-ibx__list-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.dash-ibx__count { background: var(--ibx-accent-soft); color: var(--ibx-accent); font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.dash-ibx__list-tools { margin-left: auto; }
.dash-ibx__toolbtn { position: relative; width: 34px; height: 34px; border-radius: 10px; border: none; background: transparent; color: var(--muted-strong); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dash-ibx__toolbtn:hover { background: rgba(0,0,0,0.06); }
.dash-ibx__toolbtn.is-active { background: var(--ibx-accent-soft); color: var(--ibx-accent); }
.dash-ibx__filter-badge {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--ibx-accent); color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* Panel de filtros de la bandeja (estado / intención / derivado a) */
.dash-ibx__filterpanel { width: 260px; display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; }
.dash-ibx__filtergroup { display: flex; flex-direction: column; gap: 2px; }
.dash-ibx__filtergroup + .dash-ibx__filtergroup { padding-top: 12px; border-top: 1px solid var(--rule); }
.dash-ibx__filtergroup-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--muted-soft); padding: 2px 12px 6px; }
.dash-ibx__filterclear {
  align-self: flex-start; background: transparent; border: none; padding: 2px 12px; margin-top: -2px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ibx-accent); cursor: pointer;
}
.dash-ibx__filterclear:disabled { color: var(--muted-soft); cursor: default; }

.dash-ibx__search {
  display: flex; align-items: center; gap: 9px; margin-top: 14px;
  padding: 10px 13px; border-radius: 12px; background: rgba(0,0,0,0.04);
  border: 1px solid transparent; color: var(--muted); transition: border-color 160ms ease, background 160ms ease;
}
.dash-ibx__search:focus-within { border-color: var(--rule-strong); background: #fff; }
.dash-ibx__search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: var(--sans); font-size: 13.5px; color: var(--ink); }

.dash-ibx__tabs { display: flex; gap: 18px; margin-top: 14px; border-bottom: 1px solid var(--rule); }
.dash-ibx__tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 1px 11px; cursor: pointer;
  background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted);
  transition: color 160ms ease, border-color 160ms ease;
}
.dash-ibx__tab:hover { color: var(--ink); }
.dash-ibx__tab.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ibx-accent); }
.dash-ibx__tab-n { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,0.06); color: var(--muted-strong); }
.dash-ibx__tab.is-on .dash-ibx__tab-n { background: var(--ibx-accent-soft); color: var(--ibx-accent); }

.dash-ibx__items { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.dash-ibx__item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: 14px; border: none; background: transparent; cursor: pointer;
  border-left: 3px solid transparent; transition: background 150ms ease;
}
.dash-ibx__item:hover { background: rgba(0,0,0,0.035); }
.dash-ibx__item.is-active { background: var(--ibx-accent-soft); border-left-color: var(--ibx-accent); }
.dash-ibx__item .dash-ibx__avatar { width: 46px; height: 46px; }
.dash-ibx__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dash-ibx__item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dash-ibx__item-name { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-ibx__item-time { font-size: 11px; color: var(--muted-soft); flex: none; }
.dash-ibx__item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-ibx__item-last { font-size: 12.5px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-ibx__item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }
.dash-ibx__badge {
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--ibx-accent); color: #fff;
  font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.dash-inbox.is-instagram .dash-ibx__badge { background: var(--ibx-grad); }
.dash-ibx__empty-list { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--muted); }

.dash-ibx__list-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.dash-ibx__live { width: 7px; height: 7px; border-radius: 999px; background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); animation: ibxPulse 2s infinite; }
@keyframes ibxPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.45); } 70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* ====== Columna central: conversación ====== */
.dash-ibx__conv { min-width: 0; }
.dash-ibx__conv--empty { align-items: center; justify-content: center; gap: 12px; color: var(--muted); padding: 40px; text-align: center; }
.dash-ibx__conv-emptyicon { display: inline-flex; color: var(--muted-soft); }

.dash-ibx__conv-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--rule); }
.dash-ibx__back { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: none; background: transparent; color: var(--ink); cursor: pointer; }
.dash-ibx__back svg { transform: rotate(90deg); }
.dash-ibx__conv-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dash-ibx__conv-name { font-size: 15px; font-weight: 600; }
.dash-ibx__conv-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dash-ibx__conv-handle { color: var(--muted); }
.dash-ibx__details-btn {
  flex: none; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  background: #fff; border: 1px solid var(--rule-strong); color: var(--ink);
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  transition: border-color 160ms ease;
}
.dash-ibx__details-btn:hover { border-color: #000; }

/* Botones del inbox */
.dash-ibx__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; border-radius: 11px; cursor: pointer; white-space: nowrap;
  background: #fff; border: 1px solid var(--rule-strong); color: var(--ink);
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
.dash-ibx__btn:hover { border-color: #000; }
.dash-ibx__btn--solid { background: #000; color: #fff; border-color: #000; }
.dash-ibx__btn--solid:hover { opacity: 0.88; }
.dash-ibx__btn--accent { background: var(--ibx-grad); color: #fff; border: none; }
.dash-ibx__btn--accent:hover { opacity: 0.92; }
.dash-ibx__btn--diagnosis { background: #22C55E; color: #fff; border: none; }
.dash-ibx__btn--diagnosis:hover { opacity: 0.9; }
.dash-ibx__kebab { width: 38px; height: 38px; padding: 0; }

/* Banner rojo de control manual (bajo el header) */
.dash-ibx__takeover {
  display: flex; align-items: center; gap: 9px; padding: 11px 18px;
  background: #FEF2F2; color: #DC2626; font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--rule);
}
.dash-ibx__takeover b { font-weight: 700; }
.dash-ibx__pausebars { display: inline-flex; gap: 2px; }
.dash-ibx__pausebars i { width: 3px; height: 12px; background: #DC2626; border-radius: 1px; display: block; }

/* Área de mensajes */
.dash-ibx__msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; }
.dash-ibx__msgs--whatsapp {
  background-color: #fff;
  background-image: none;
}
.dash-ibx__datechip { align-self: center; margin: 4px auto 10px; padding: 4px 12px; border-radius: 8px; background: rgba(255,255,255,0.85); color: #5b6b73; font-size: 11.5px; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.dash-ibx__msgs--instagram .dash-ibx__datechip { background: rgba(0,0,0,0.05); color: var(--muted); box-shadow: none; }

.dash-ibx__event {
  align-self: center; display: flex; align-items: center; gap: 6px; margin: 4px auto;
  padding: 5px 12px; border-radius: 10px; max-width: 85%;
  background: #fef3e2; color: #9a5b12; font-size: 11.5px; font-weight: 500; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.dash-ibx__event svg { flex-shrink: 0; color: #d99a3f; }
.dash-ibx__event-time { color: #b8894a; font-weight: 400; margin-left: 2px; }

.dash-ibx__msg { display: flex; flex-direction: column; max-width: 72%; }
.dash-ibx__msg.is-lead { align-self: flex-start; align-items: flex-start; }
.dash-ibx__msg.is-emma, .dash-ibx__msg.is-agent { align-self: flex-end; align-items: flex-end; }
.dash-ibx__sender { font-size: 10.5px; font-weight: 600; color: var(--ibx-accent); margin: 0 4px 2px; }
.dash-ibx__bubble {
  position: relative; padding: 7px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.42;
  box-shadow: 0 1px 1px rgba(0,0,0,0.07); word-wrap: break-word;
}
.dash-ibx__msg.is-lead .dash-ibx__bubble { background: #fff; color: #111; border-top-left-radius: 4px; }
.dash-ibx__msg.is-emma .dash-ibx__bubble, .dash-ibx__msg.is-agent .dash-ibx__bubble { background: var(--ibx-bubble-sent); color: #111; border-top-right-radius: 4px; }
.dash-ibx__msgs--instagram .dash-ibx__msg.is-lead .dash-ibx__bubble { background: #f0f0f0; box-shadow: none; }
.dash-ibx__msgs--instagram .dash-ibx__msg.is-emma .dash-ibx__bubble,
.dash-ibx__msgs--instagram .dash-ibx__msg.is-agent .dash-ibx__bubble { box-shadow: none; }
.dash-ibx__btext { white-space: pre-wrap; }
.dash-ibx__bmeta { float: right; margin: 6px 0 -2px 10px; font-size: 10.5px; color: rgba(0,0,0,0.42); display: inline-flex; align-items: center; gap: 3px; }
.dash-ibx__bmeta svg { color: var(--ibx-check); }

/* Composer */
.dash-ibx__composer { display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--rule); background: #fff; }
.dash-ibx__inputwrap { flex: 1; display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border-radius: 24px; border: 1px solid var(--rule-strong); background: #fff; transition: border-color 160ms ease; }
.dash-ibx__inputwrap:focus-within { border-color: var(--ibx-accent); }
.dash-ibx__composer-icon { flex: none; width: 34px; height: 34px; border-radius: 999px; border: none; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dash-ibx__composer-icon:hover { color: var(--ink); background: rgba(0,0,0,0.05); }
.dash-ibx__input {
  flex: 1; resize: none; max-height: 110px; padding: 8px 4px; border: none; background: transparent; outline: none;
  font-family: var(--sans); font-size: 14px; line-height: 1.4; color: var(--ink);
}
.dash-ibx__send {
  flex: none; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; background: var(--ibx-send); color: #fff; border: none;
  display: inline-flex; align-items: center; justify-content: center; transition: opacity 160ms ease, transform 160ms ease;
}
.dash-ibx__send svg { transform: translateX(-1px); }
.dash-ibx__send:disabled { opacity: 0.45; cursor: not-allowed; }
.dash-ibx__send:not(:disabled):hover { opacity: 0.92; }

.dash-ibx__composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--muted); background: #fff; }
.dash-ibx__reactivate { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; cursor: pointer; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ibx-accent); padding: 0; }
.dash-inbox.is-instagram .dash-ibx__reactivate { color: #E1306C; }

.dash-ibx__assign { width: 100%; }
.dash-ibx__assign .dd__menu { width: 100%; min-width: 0; }

/* ====== Responsive ====== */
@media (max-width: 1240px) {
  .dash-inbox { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .dash-main--inbox { height: auto; min-height: 100vh; overflow: visible; }
  .dash-inbox { min-height: calc(100vh - 140px); }
  .dash-inbox { grid-template-columns: 1fr; }
  .dash-inbox.has-selection .dash-ibx__list { display: none; }
  .dash-inbox:not(.has-selection) .dash-ibx__conv { display: none; }
  .dash-ibx__back { display: inline-flex; }
}

/* ====== Dark mode ====== */
.mirai-dark .dash-ibx__col, .mirai-dark .dash-ibx__card { background: #15171c; border-color: var(--rule); }
.mirai-dark .dash-ibx__search { background: rgba(255,255,255,0.05); }
.mirai-dark .dash-ibx__search:focus-within { background: rgba(255,255,255,0.08); }
.mirai-dark .dash-ibx__toolbtn:hover, .mirai-dark .dash-ibx__item:hover { background: rgba(255,255,255,0.05); }
.mirai-dark .dash-ibx__tab-n { background: rgba(255,255,255,0.10); }
.mirai-dark .dash-ibx__btn { background: #15171c; color: var(--ink); border-color: var(--rule-strong); }
.mirai-dark .dash-ibx__btn:hover { border-color: #fff; }
.mirai-dark .dash-ibx__details-btn { background: #15171c; color: var(--ink); border-color: var(--rule-strong); }
.mirai-dark .dash-ibx__details-btn:hover { border-color: #fff; }
.mirai-dark .dash-ibx__btn--solid { background: #fff; color: #000; border-color: #fff; }
.mirai-dark .dash-ibx__btn--accent { background: var(--ibx-grad); color: #fff; border: none; }
.mirai-dark .dash-ibx__btn--diagnosis { background: #22C55E; color: #fff; }
.mirai-dark .dash-ibx__takeover { background: rgba(220,38,38,0.14); color: #f87171; border-bottom-color: var(--rule); }
.mirai-dark .dash-ibx__pausebars i { background: #f87171; }
.mirai-dark .dash-ibx__msgs--whatsapp { background-color: #15171c; background-image: none; }
.mirai-dark .dash-ibx__msgs--instagram { background: #15171c; }
.mirai-dark .dash-ibx__datechip { background: rgba(255,255,255,0.10); color: var(--muted-strong); box-shadow: none; }
.mirai-dark .dash-ibx__event { background: rgba(217,154,63,0.16); color: #e7b374; box-shadow: none; }
.mirai-dark .dash-ibx__event svg { color: #e7b374; }
.mirai-dark .dash-ibx__event-time { color: rgba(231,179,116,0.75); }
.mirai-dark .dash-ibx__msg.is-lead .dash-ibx__bubble { background: #21262e; color: var(--ink); box-shadow: none; }
.mirai-dark .dash-ibx__msg.is-emma .dash-ibx__bubble, .mirai-dark .dash-ibx__msg.is-agent .dash-ibx__bubble { color: #fff; }
.mirai-dark .dash-inbox.is-whatsapp .dash-ibx__msg.is-emma .dash-ibx__bubble,
.mirai-dark .dash-inbox.is-whatsapp .dash-ibx__msg.is-agent .dash-ibx__bubble { background: #144d37; }
.mirai-dark .dash-inbox.is-instagram .dash-ibx__msg.is-emma .dash-ibx__bubble,
.mirai-dark .dash-inbox.is-instagram .dash-ibx__msg.is-agent .dash-ibx__bubble { background: #3a1b2c; }
.mirai-dark .dash-ibx__bmeta { color: rgba(255,255,255,0.5); }
.mirai-dark .dash-ibx__composer, .mirai-dark .dash-ibx__composer-foot { background: #15171c; }
.mirai-dark .dash-ibx__inputwrap { background: #1b1e24; border-color: var(--rule-strong); }
.mirai-dark .dash-ibx__composer-icon:hover { background: rgba(255,255,255,0.07); }
.mirai-dark .dash-ibx__edit:hover { background: rgba(255,255,255,0.08); }
.mirai-dark .dash-ibx__online, .mirai-dark .dash-ibx__avatar.has-ring .dash-ibx__avatar-circle { border-color: #15171c; }

@media (prefers-reduced-motion: reduce) { .dash-ibx__live { animation: none; } .dash-ibx__btn, .dash-ibx__send, .dash-ibx__item { transition: none; } }

/* ============================================================
   RASTREO IA — pantalla de rastreo de propiedades
   Reutiliza .dash-card, .dash-head, .dash-switch, etc.
   Acento verde MirAI (--rt-green).
   ============================================================ */
:root { --rt-green: #1E90FF; --rt-green-soft: rgba(30,144,255,0.1); }

/* Sidebar: opción activa Rastreo */
.dash-sb__item.is-active.is-rastreo { background: #1E90FF; color: #fff; }
.dash-sb__item.is-active.is-rastreo:hover { background: #1877D9; }
.mirai-dark .dash-sb__item.is-active.is-rastreo { background: #1E90FF; color: #fff; }
.mirai-dark .dash-sb__item.is-active.is-rastreo:hover { background: #1877D9; }

/* Sidebar: opción activa Ads (mismo azul de la sección) */
.dash-sb__item.is-active.is-ads { background: #1877F2; color: #fff; }
.dash-sb__item.is-active.is-ads:hover { background: #0F63D6; }
.mirai-dark .dash-sb__item.is-active.is-ads { background: #1877F2; color: #fff; }
.mirai-dark .dash-sb__item.is-active.is-ads:hover { background: #0F63D6; }

/* Layout superior: formulario (izq) + resumen/Emma (der) */
.dash-rt__top { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.dash-rt__side { display: flex; flex-direction: column; gap: 18px; }

/* ---- Formulario ---- */
.dash-rt__formcard { display: flex; flex-direction: column; gap: 18px; }
.dash-rt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-rt__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dash-rt__field.is-wide { grid-column: 1 / -1; }
.dash-rt__label { font-size: 12.5px; color: var(--muted-strong); font-weight: 500; }
.dash-rt__sublabel { font-size: 12.5px; color: var(--muted-strong); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.dash-rt__sublabel svg { color: var(--muted-soft); }

.dash-rt__input, .dash-rt__textarea, .dash-rt__select {
  width: 100%; box-sizing: border-box; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--rule-strong); border-radius: 11px; padding: 11px 13px; outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.dash-rt__input:focus, .dash-rt__textarea:focus, .dash-rt__select:focus { border-color: var(--rt-green); box-shadow: 0 0 0 3px var(--rt-green-soft); }
.dash-rt__textarea { resize: vertical; line-height: 1.5; min-height: 64px; }
.dash-rt__selectwrap { position: relative; }
.dash-rt__select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.dash-rt__selectchev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); display: inline-flex; }

/* Chips */
.dash-rt__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 44px; padding: 7px 40px 7px 10px; position: relative; background: #fff; border: 1px solid var(--rule-strong); border-radius: 11px; }
.dash-rt__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 11px; border-radius: 999px; background: var(--soft, rgba(0,0,0,0.05)); font-size: 12.5px; color: var(--ink); }
.dash-rt__chip button { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 999px; }
.dash-rt__chip button:hover { background: rgba(0,0,0,0.08); color: var(--ink); }
.dash-rt__chips-ph { font-size: 13px; color: var(--muted-soft); }
.dash-rt__chips-dd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.dash-rt__chips-add { width: 26px; height: 26px; border-radius: 8px; border: none; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dash-rt__chips-add:hover { background: rgba(0,0,0,0.06); color: var(--ink); }
.dash-rt__dd-empty { padding: 9px 12px; font-size: 12.5px; color: var(--muted); }

/* Fila inferior: imágenes / fuentes / toggles */
.dash-rt__lower { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; padding-top: 4px; border-top: 1px solid var(--rule); }
.dash-rt__lower-col { display: flex; flex-direction: column; gap: 11px; }

.dash-rt__imgs { display: flex; flex-wrap: wrap; gap: 10px; }
.dash-rt__img { position: relative; width: 70px; height: 70px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #e9eaec, #f4f4f5); flex: none; }
.dash-rt__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-rt__img-x { position: absolute; top: 3px; right: 3px; width: 19px; height: 19px; border-radius: 999px; border: none; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dash-rt__addimg { width: 70px; height: 70px; border-radius: 12px; border: 1px dashed var(--rule-strong); background: transparent; color: var(--muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; text-align: center; line-height: 1.1; }
.dash-rt__addimg span { padding: 0 4px; }
.dash-rt__addimg:hover { border-color: var(--rt-green); color: var(--rt-green); }

.dash-rt__sources { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.dash-rt__source { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--rule-strong); background: #fff; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink); transition: border-color 160ms ease, background 160ms ease; }
.dash-rt__source.is-on { border-color: var(--rt-green); background: var(--rt-green-soft); }
.dash-rt__source-logo { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; }
.dash-rt__source-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-rt__source-check { color: var(--rt-green); display: inline-flex; flex: none; }

.dash-rt__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-rt__toggle-txt { font-size: 12.5px; color: var(--muted-strong); line-height: 1.35; }
.dash-switch--green.is-on { background: var(--rt-green); }
.mirai-dark .dash-switch--green.is-on { background: var(--rt-green); }
.mirai-dark .dash-switch--green.is-on .dash-switch__knob { background: #fff; }

/* CTA */
.dash-rt__cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px; border-radius: 13px; border: none; cursor: pointer; background: var(--rt-green); color: #fff; font-family: var(--sans); font-size: 15px; font-weight: 600; transition: opacity 160ms ease; }
.dash-rt__cta:hover { opacity: 0.92; }
.dash-rt__cta:disabled { opacity: 0.7; cursor: default; }
.dash-rt__cta svg { }
.dash-rt__cta:disabled svg { animation: dashSpin 0.8s linear infinite; }

/* ---- Resumen ---- */
.dash-rt__summary-list { display: flex; flex-direction: column; margin: 14px 0 0; }
.dash-rt__summary-row { display: grid; grid-template-columns: 22px auto 1fr; align-items: start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); }
.dash-rt__summary-row:first-child { border-top: none; }
.dash-rt__summary-ico { color: var(--muted-soft); display: inline-flex; padding-top: 1px; }
.dash-rt__summary-k { font-size: 13px; color: var(--muted); white-space: nowrap; }
.dash-rt__summary-v { font-size: 13px; color: var(--ink); text-align: right; font-weight: 500; }

/* ---- Qué hará Emma ---- */
.dash-rt__steps { list-style: none; display: flex; flex-direction: column; gap: 16px; margin: 16px 0 0; }
.dash-rt__step { display: flex; align-items: flex-start; gap: 12px; }
.dash-rt__step-n { flex: none; width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--rule-strong); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; transition: all 200ms ease; }
.dash-rt__step-txt { font-size: 13.5px; color: var(--muted-strong); line-height: 1.4; padding-top: 3px; }
.dash-rt__step.is-active .dash-rt__step-n { border-color: var(--rt-green); color: var(--rt-green); box-shadow: 0 0 0 4px var(--rt-green-soft); }
.dash-rt__step.is-done .dash-rt__step-n { background: var(--rt-green); border-color: var(--rt-green); color: #fff; }
.dash-rt__step.is-done .dash-rt__step-txt, .dash-rt__step.is-active .dash-rt__step-txt { color: var(--ink); }

/* ---- Resultados ---- */
.dash-rt__results-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.dash-rt__results-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--rt-green); }
.dash-rt__results-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 24px; text-align: center; color: var(--muted); }
.dash-rt__results-empty-ico { color: var(--muted-soft); display: inline-flex; }
.dash-rt__results-empty-ico.is-spin { animation: dashSpin 0.9s linear infinite; color: var(--rt-green); }
.dash-rt__results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }

.dash-rt__prop { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; }
.dash-rt__prop:hover { border-color: var(--rule-strong); box-shadow: 0 14px 32px -24px rgba(0,0,0,0.32); transform: translateY(-2px); }
.dash-rt__prop-media { position: relative; height: 150px; background: linear-gradient(135deg, #e9eaec, #f4f4f5); }
.dash-rt__prop-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-rt__portal { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 8px; font-size: 11px; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
.dash-rt__portal-logo { width: 16px; height: 16px; border-radius: 4px; background: rgba(255,255,255,0.35); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; }
.dash-rt__fav { position: absolute; top: 9px; right: 9px; width: 32px; height: 32px; border-radius: 999px; border: none; background: rgba(255,255,255,0.9); color: #444; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 160ms ease; }
.dash-rt__fav.is-on { color: #e0245e; }
.dash-rt__prop-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.dash-rt__prop-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.dash-rt__prop-loc { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.dash-rt__prop-price { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-top: 2px; }
.dash-rt__prop-specs { font-size: 12.5px; color: var(--muted-strong); }
.dash-rt__match { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--rt-green-soft); color: #1565C0; font-size: 11.5px; font-weight: 600; margin: 2px 0 4px; }
.dash-rt__prop-actions { display: flex; gap: 8px; margin-top: 4px; }
.dash-rt__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border-radius: 10px; border: 1px solid var(--rule-strong); background: #fff; color: var(--ink); cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 500; white-space: nowrap; transition: border-color 160ms ease, background 160ms ease; }
.dash-rt__btn:hover { border-color: #000; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .dash-rt__top { grid-template-columns: 1fr; }
  .dash-rt__side { flex-direction: row; }
  .dash-rt__side > * { flex: 1; }
  .dash-rt__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .dash-rt__grid { grid-template-columns: 1fr; }
  .dash-rt__lower { grid-template-columns: 1fr; gap: 18px; }
  .dash-rt__side { flex-direction: column; }
  .dash-rt__results { grid-template-columns: 1fr; }
}

/* ---- Dark mode ---- */
.mirai-dark .dash-rt__input, .mirai-dark .dash-rt__textarea, .mirai-dark .dash-rt__select,
.mirai-dark .dash-rt__chips, .mirai-dark .dash-rt__source { background: #1b1e24; border-color: var(--rule-strong); color: var(--ink); }
.mirai-dark .dash-rt__source.is-on { background: var(--rt-green-soft); border-color: var(--rt-green); }
.mirai-dark .dash-rt__chip { background: rgba(255,255,255,0.08); }
.mirai-dark .dash-rt__prop { background: #15171c; border-color: var(--rule); }
.mirai-dark .dash-rt__btn { background: #15171c; color: var(--ink); border-color: var(--rule-strong); }
.mirai-dark .dash-rt__btn:hover { border-color: #fff; }
.mirai-dark .dash-rt__fav { background: rgba(0,0,0,0.45); color: #ddd; }
.mirai-dark .dash-rt__match { color: #4ade80; }
.mirai-dark .dash-rt__step-n { border-color: var(--rule-strong); }

/* ============================
   TICKETS
   ============================ */

/* ---- Keyframes ---- */
@keyframes tkColIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tkDetailIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tkCardPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* ---- Filtros ---- */
.dash-tk__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 0 4px;
}

.dash-tk__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease,
              background 180ms ease, box-shadow 180ms ease,
              transform 120ms ease;
}
.dash-tk__tab:hover { border-color: rgba(0,0,0,0.45); color: var(--ink); }
.dash-tk__tab:active { transform: scale(0.95); }
.dash-tk__tab.is-on {
  background: #fff;
  border-color: #000;
  color: #000;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ---- Botón crear ---- */
.dash-tk__create-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: #1F3A5C;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 150ms ease, transform 120ms ease, box-shadow 150ms ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(31,58,92,0.25);
}
.dash-tk__create-btn:hover { opacity: 0.9; box-shadow: 0 4px 14px rgba(31,58,92,0.3); }
.dash-tk__create-btn:active { transform: scale(0.97); }

/* ---- Layout: tablero + panel ---- */
.dash-tk__layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* ---- Tablero kanban ---- */
.dash-tk__board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  flex: 1;
  min-width: 0;
}

/* ---- Columna ---- */
.dash-tk__column {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: tkColIn 300ms ease both;
}
.dash-tk__column-head { display: flex; align-items: center; gap: 8px; }
.dash-tk__column-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.dash-tk__column-count {
  background: rgba(0,0,0,0.07);
  color: var(--muted-strong);
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  transition: background 200ms ease;
}
.dash-tk__column-body { display: flex; flex-direction: column; gap: 10px; }
.dash-tk__empty-col {
  font-size: 12.5px;
  color: var(--muted);
  padding: 10px 0;
  text-align: center;
}

/* ---- Tarjeta ---- */
.dash-tk__card {
  background: #fff;
  border: 1.5px solid var(--rule-strong);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: border-color 200ms ease,
              box-shadow 200ms ease,
              transform 200ms ease;
  outline: none;
  will-change: transform, box-shadow;
}
.dash-tk__card:hover {
  border-color: rgba(31,58,92,0.3);
  box-shadow: 0 6px 18px -8px rgba(31,58,92,0.22);
  transform: translateY(-2px);
}
.dash-tk__card:active { transform: scale(0.98) translateY(0); }
.dash-tk__card.is-selected {
  border-color: #1F3A5C;
  box-shadow: 0 0 0 3px rgba(31,58,92,0.1), 0 4px 14px -6px rgba(31,58,92,0.18);
  transform: translateY(-1px);
}
.dash-tk__card-id { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.dash-tk__card-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 0; }

/* ---- Badges ---- */
.dash-tk__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  align-self: flex-start;
  transition: opacity 150ms ease;
}
.dash-tk__badge.is-pending  { background: #F1F5F9; color: #64748B; }
.dash-tk__badge.is-progress { background: #EFF6FF; color: #2563EB; }
.dash-tk__badge.is-done     { background: #DCFCE7; color: #166534; }

/* ---- Panel de detalle ---- */
.dash-tk__detail {
  width: 300px;
  flex: none;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  animation: tkDetailIn 280ms ease both;
}
.dash-tk__detail--empty {
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  min-height: 200px;
  gap: 12px;
}
.dash-tk__detail-head { display: flex; flex-direction: column; gap: 8px; }
.dash-tk__detail-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-tk__agency-tag {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500; background: var(--rule); color: var(--muted-strong); white-space: nowrap;
}
.dash-tk__card-id .dash-tk__agency-tag { margin-left: 6px; vertical-align: middle; }
.dash-tk__type-tag {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; background: transparent; color: var(--muted); border: 1px solid var(--rule);
}
.dash-tk__status-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-tk__status-btn {
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--rule-strong); background: transparent;
  font-family: var(--sans); font-size: 12.5px; color: var(--muted-strong); cursor: pointer; transition: background 160ms ease;
}
.dash-tk__status-btn:hover:not(:disabled) { background: rgba(0,0,0,0.04); }
.dash-tk__status-btn:disabled { cursor: default; }
.dash-tk__status-btn.is-current { background: #000; color: #fff; border-color: #000; }
.mirai-dark .dash-tk__status-btn.is-current { background: #fff; color: #000; border-color: #fff; }
.mirai-dark .dash-tk__status-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.mirai-dark .dash-tk__agency-tag { background: rgba(255,255,255,0.08); color: var(--muted-strong); }
.dash-tk__detail-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}
.dash-tk__detail-desc {
  font-size: 13px;
  color: var(--muted-strong);
  line-height: 1.6;
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

/* ---- Pasos de progreso ---- */
.dash-tk__steps { list-style: none; display: flex; flex-direction: column; gap: 0; flex: 1; padding: 0; margin: 0; }
.dash-tk__step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}
.dash-tk__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 30px;
  width: 2px;
  height: 20px;
  background: #E5E7EB;
}
.dash-tk__step-icon { width: 20px; height: 20px; flex: none; display: inline-flex; }
.dash-tk__step-icon svg { width: 100%; height: 100%; }
.dash-tk__step-label { font-size: 13px; color: var(--muted); }
.dash-tk__step-label.is-active { color: var(--ink); font-weight: 600; }
.dash-tk__step-label.is-done   { color: var(--muted-strong); }

/* ---- Pie del panel: botones apilados ---- */
.dash-tk__detail-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--rule);
  margin-top: 4px;
}
.dash-tk__foot-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 11px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms ease,
              background 150ms ease,
              opacity 150ms ease,
              transform 120ms ease,
              box-shadow 150ms ease;
  border: 1px solid var(--rule-strong);
  background: #fff;
  color: var(--ink);
  white-space: nowrap;
  box-sizing: border-box;
}
.dash-tk__foot-btn:hover { border-color: rgba(0,0,0,0.5); background: #fafafa; }
.dash-tk__foot-btn:active { transform: scale(0.97); }
.dash-tk__foot-btn--primary {
  background: #1F3A5C;
  color: #fff;
  border-color: #1F3A5C;
  box-shadow: 0 2px 8px rgba(31,58,92,0.2);
}
.dash-tk__foot-btn--primary:hover { opacity: 0.9; background: #1F3A5C; box-shadow: 0 4px 12px rgba(31,58,92,0.28); }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .dash-tk__layout { flex-direction: column; }
  .dash-tk__detail { width: 100%; position: static; max-height: none; }
}
@media (max-width: 760px) {
  .dash-tk__board { grid-template-columns: 1fr !important; }
}

/* ---- Dark mode ---- */
.mirai-dark .dash-tk__tab.is-on { background: #1e2029; border-color: #fff; color: #fff; }
.mirai-dark .dash-tk__tab:hover { border-color: rgba(255,255,255,0.5); color: var(--ink); }
.mirai-dark .dash-tk__column,
.mirai-dark .dash-tk__card,
.mirai-dark .dash-tk__detail { background: #15171c; border-color: var(--rule); }
.mirai-dark .dash-tk__card:hover { box-shadow: 0 6px 18px -8px rgba(0,0,0,0.5); }
.mirai-dark .dash-tk__card.is-selected { border-color: #4B7DB0; box-shadow: 0 0 0 3px rgba(75,125,176,0.15); }
.mirai-dark .dash-tk__badge.is-pending  { background: rgba(255,255,255,0.07); color: #94A3B8; }
.mirai-dark .dash-tk__badge.is-progress { background: rgba(59,130,246,0.15); color: #60A5FA; }
.mirai-dark .dash-tk__badge.is-done     { background: rgba(34,197,94,0.12); color: #4ADE80; }
.mirai-dark .dash-tk__create-btn        { background: #2C5282; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.mirai-dark .dash-tk__foot-btn          { background: #1e2029; border-color: var(--rule-strong); color: var(--ink); }
.mirai-dark .dash-tk__foot-btn:hover    { border-color: rgba(255,255,255,0.4); background: #23262f; }
.mirai-dark .dash-tk__foot-btn--primary { background: #2C5282; border-color: #2C5282; color: #fff; }
.mirai-dark .dash-tk__foot-btn--primary:hover { background: #2C5282; }
.mirai-dark .dash-tk__step:not(:last-child)::after { background: var(--rule-strong); }
.mirai-dark .dash-tk__detail-foot { border-color: var(--rule); }

/* ============================
   TABLERO
   ============================ */

.dash-tb__search {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--rule-strong);
  color: var(--muted); width: 250px;
  transition: border-color 160ms ease;
}
.dash-tb__search:focus-within { border-color: #000; color: var(--ink); }
.dash-tb__search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: var(--sans); font-size: 13px; color: var(--ink); }

.dash-tb__card { padding: 0; overflow: hidden; }
.dash-tb__cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 0; }
.dash-tb__count { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.dash-tb__wrap { margin-top: 14px; overflow-x: auto; }
.dash-tb__table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.dash-tb__table thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600; color: var(--muted-soft); background: var(--rule-soft, #fafafa);
  padding: 12px 14px; border-bottom: 1px solid var(--rule-strong); border-right: 1px solid var(--rule);
}
.dash-tb__table thead th:last-child { border-right: none; }
.dash-tb__table td {
  padding: 12px 14px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
  vertical-align: middle; white-space: nowrap;
}
.dash-tb__table td:last-child { border-right: none; }
/* "Derivado a" es la última columna y la que tiene la acción principal (el
   desplegable): con más columnas en la tabla (Contacto, Pagado en empresas)
   el layout automático la comprimía de más en pantallas medianas y quedaba
   pegada al borde — este mínimo la protege, a costa de comprimir antes las
   columnas menos críticas (Canal/Contacto, ver reglas de abajo). */
.dash-tb__table th:last-child, .dash-tb__table td:last-child { min-width: 168px; }
.dash-tb__table tbody tr { cursor: pointer; transition: background 140ms ease; }
.dash-tb__table tbody tr:nth-child(even) { background: rgba(0,0,0,0.015); }
.dash-tb__table tbody tr:hover { background: rgba(79,70,229,0.06); }
.dash-tb__name { font-weight: 600; }
.dash-tb__channel { display: inline-flex; align-items: center; gap: 8px; }
.dash-tb__date { color: var(--muted); }
.dash-tb__broker {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 5px 8px; margin: -5px -8px; cursor: pointer; white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease;
}
.dash-tb__broker:hover { background: rgba(79,70,229,0.08); border-color: rgba(79,70,229,0.25); }
.dash-tb__broker.is-empty { color: var(--muted-soft); font-weight: 400; font-style: italic; }
.dash-tb__derivedfield { margin-bottom: 14px; }
.dash-tb__derivedfield .dash-tb__broker { margin: -5px 0 0 -8px; }
.dash-tb__empty { text-align: center; color: var(--muted); padding: 34px 0 !important; border-right: none !important; }

/* Acciones del detalle: ir a la conversación / copiar diagnóstico */
.dash-tb__quickactions { display: flex; flex-wrap: wrap; gap: 10px; }
.dash-tb__gochat {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1 1 220px; padding: 11px 14px; border-radius: 11px; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: #fff;
  transition: opacity 160ms ease;
}
.dash-tb__gochat:hover { opacity: 0.9; }
.dash-tb__gochat.is-whatsapp { background: #25D366; }
.dash-tb__gochat.is-instagram { background: linear-gradient(135deg, #F58529 0%, #DD2A7B 55%, #8134AF 100%); }
.dash-tb__quickactions .dash-ibx__btn--diagnosis { flex: 1 1 220px; }

/* Pantallas medianas (notebook con la ventana no maximizada, ~1000-1300px de
   contenido): con Cliente+Canal+Intención+Estado+Contacto+Fecha+Derivado a
   compitiendo por espacio, el layout automático de la tabla comprimía todo
   por igual y "Derivado a" (con el desplegable) quedaba muy pegado al borde.
   Achicar el padding y sacar el texto del canal (el ícono ya lo identifica)
   le devuelve aire a las columnas con datos que importa poder tocar/leer bien. */
@media (max-width: 1300px) {
  .dash-tb__table thead th, .dash-tb__table td { padding: 10px 8px; }
  .dash-tb__channel-label { display: none; }
}

@media (max-width: 720px) {
  .dash-tb__search { width: 170px; }
  .dash-tb__table { min-width: 0; font-size: 12px; }
  .dash-tb__table td, .dash-tb__table th { white-space: normal; }
}

.mirai-dark .dash-tb__search { background: #15171c; border-color: var(--rule-strong); }
.mirai-dark .dash-tb__search:focus-within { border-color: #fff; }
.mirai-dark .dash-tb__table thead th { background: #1b1e24; border-color: var(--rule); }
.mirai-dark .dash-tb__table td { border-color: var(--rule); }
.mirai-dark .dash-tb__table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.mirai-dark .dash-tb__table tbody tr:hover { background: rgba(129,140,248,0.1); }
.mirai-dark .dash-tb__broker:hover { background: rgba(129,140,248,0.14); border-color: rgba(129,140,248,0.35); }

/* ====== Costos (panel admin) ======
   Única página del dashboard con acento de color a propósito (pedido
   explícito del cliente): el resto del dashboard es monocromo. */
.dash-cost-metric { border-top: 3px solid transparent; }
.dash-cost-metric:hover { box-shadow: 0 14px 32px -12px rgba(22,163,74,0.5); }
.mirai-dark .dash-cost-metric:hover { box-shadow: 0 14px 32px -12px rgba(22,163,74,0.35); }
.dash-cost-metric__icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.dash-cost-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dash-cost-picker-head .dash-pill--agency { width: auto; min-width: 220px; }

.dash-cost-agency-detail { margin-top: 18px; }
.dash-cost-agency-detail__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px;
  padding: 16px 0 20px; border-bottom: 1px solid var(--rule); margin-bottom: 16px;
}
.dash-cost-agency-detail__stat { display: flex; flex-direction: column; gap: 4px; }
.dash-cost-agency-detail__subtitle { font-size: 13px; font-weight: 600; color: var(--muted-strong); margin: 0 0 4px; }

/* ====== Ads (gestión de Meta Ads) ====== */
.dash-ads-metric { border-top: 3px solid transparent; }
.dash-ads-metric:hover { box-shadow: 0 14px 32px -12px rgba(24,119,242,0.5); }
.mirai-dark .dash-ads-metric:hover { box-shadow: 0 14px 32px -12px rgba(24,119,242,0.35); }
.dash-ads-metric__icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}

/* Ranking de campañas (costo por consulta) — filas al mismo alto que las de
   "Campañas" al lado, para que las dos cards queden parejas sin espacio
   suelto abajo (ver AdsRankingList/AdsCampaignsCondensed). */
.dash-ads__ranking { list-style: none; display: flex; flex-direction: column; }
.dash-ads__ranking-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-top: 1px solid var(--rule); }
.dash-ads__ranking-row:first-child { border-top: none; }
.dash-ads__ranking-num {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(24,119,242,0.12); color: #1877F2; font-size: 11px; font-weight: 700;
}
.dash-ads__ranking-info { flex: 1; min-width: 0; }
.dash-ads__ranking-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-ads__ranking-cost { flex: none; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: #1877F2; }
.dash-head__right .dash-pill--agency { width: auto; min-width: 200px; }

/* Campañas (versión condensada, al lado del ranking) */
.dash-ads__campaigns { display: flex; flex-direction: column; }
.dash-ads__campaign-row { width: 100%; text-align: left; }
.dash-ads__campaigns .dash-ads__campaign-row:first-child { border-top: none; }
.dash-ads__campaign-row:hover { background: rgba(0,0,0,0.02); }
.mirai-dark .dash-ads__campaign-row:hover { background: rgba(255,255,255,0.04); }
.dash-ads__campaign-row.is-sel { background: rgba(24,119,242,0.08); }
.dash-ads__campaign-meta { display: flex; align-items: center; gap: 10px; flex: none; }
.dash-ads__campaign-cost { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }

/* Análisis y recomendaciones (cards de "la guía") */
.dash-ads__insight-title { display: flex; align-items: center; gap: 8px; }
.dash-ads__insight-icon {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(24,119,242,0.12); color: #1877F2;
}
.dash-ads__insight-list { list-style: none; margin-top: 8px; }
.dash-ads__insight-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.45; color: var(--ink);
}
.dash-ads__insight-row:first-child { border-top: none; }
.dash-ads__insight-meta { flex: none; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--muted); }

@media (max-width: 720px) {
  .dash-cost-agency-detail__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ====== Administración: menú de secciones + ancho de las cards ======
   Antes era una sola página larga con todas las cards apiladas; ahora es un
   menú tipo tabs (mismo lenguaje visual que .dash-tk__tab de Tickets, pero
   con su propio prefijo) y solo una sección visible a la vez. Las cards van
   a todo el ancho de .dash-main — .dash-config trae un max-width de 720px
   pensado para Configuración (formularios angostos), pero acá las tablas y
   el detalle de Tester necesitan más lugar; mismo criterio "todo el ancho"
   que ya usa PlatformsCard/AiAnalysisCard en Inicio. */
.dash-admin__tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 4px; }
.dash-admin__tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border: 1px solid var(--rule-strong); border-radius: 999px;
  background: transparent; font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  color: var(--muted); cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}
.dash-admin__tab:hover { border-color: rgba(0,0,0,0.45); color: var(--ink); }
.dash-admin__tab:active { transform: scale(0.95); }
.dash-admin__tab.is-on { background: #fff; border-color: #000; color: #000; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.mirai-dark .dash-admin__tab.is-on { background: #1e2029; border-color: #fff; color: #fff; }
.mirai-dark .dash-admin__tab:hover { border-color: rgba(255,255,255,0.5); color: var(--ink); }

.dash-config--admin { max-width: none; }

/* ====== Tester de Emma (panel admin) ======
   QA conversacional que corre en el repo aparte dlp-emma (emma-tester) — ver
   dashboard.jsx, sección "TESTER DE EMMA". Pills de estado propias (running/
   completed/failed) porque significan algo distinto a las de Monitoreo. */
.dash-admin__qa { width: 100%; }

.dash-qa__status {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.dash-qa__status.is-running   { background: #2563EB; color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35); }
.dash-qa__status.is-completed { background: #16A34A; color: #fff; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35); }
.dash-qa__status.is-failed    { background: #DC2626; color: #fff; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35); }

.dash-qa__severity {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap; vertical-align: middle;
}
.dash-qa__severity.is-alta  { background: #FEE2E2; color: #991B1B; }
.dash-qa__severity.is-media { background: #FEF3C7; color: #92400E; }
.dash-qa__severity.is-baja  { background: #F1F1F1; color: #404040; }
.mirai-dark .dash-qa__severity.is-alta  { background: rgba(220, 38, 38, 0.22); color: #fca5a5; }
.mirai-dark .dash-qa__severity.is-media { background: rgba(234, 179, 8, 0.2); color: #fde68a; }
.mirai-dark .dash-qa__severity.is-baja  { background: rgba(255, 255, 255, 0.1); color: var(--muted-strong); }

.dash-qa__statBad { color: #c0003b; font-weight: 600; }
.dash-qa__progressInline { font-size: 11.5px; color: var(--muted-soft); font-family: var(--mono); }
.dash-qa__progress {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted);
  background: var(--rule); border-radius: 10px; padding: 8px 12px; margin: 10px 0 0;
}
.mirai-dark .dash-qa__progress { background: rgba(255,255,255,0.06); }

/* Selector de escenarios en el modal "Nueva corrida" */
.dash-qa__scenarioPicker { display: flex; flex-direction: column; gap: 8px; }
.dash-qa__scenarioOption {
  display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer;
}
.dash-qa__scenarioOption input[type="checkbox"] {
  width: 16px !important; height: 16px; margin: 3px 0 0; padding: 0 !important;
  border-radius: 4px !important; flex-shrink: 0;
}
.dash-qa__scenarioOption strong { font-size: 13px; }
.dash-qa__scenarioOption p { margin: 2px 0 0; }

/* Acordeón por escenario dentro del detalle de una corrida */
.dash-qa__scenario { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.dash-qa__scenarioHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.dash-qa__scenarioTitle strong { font-size: 13.5px; }
.dash-qa__scenarioTitle p { margin: 2px 0 0; }
.dash-qa__scenarioStats { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dash-qa__meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-soft); font-family: var(--mono); margin-bottom: 10px; }

/* Fila resumen de repetición (dentro de la tabla del escenario) */
.dash-qa__repRow td { white-space: nowrap; }
.dash-qa__repChevron { color: var(--muted); }
.dash-qa__mono { font-family: var(--mono); font-size: 12.5px; }

.dash-qa__severity.is-ok { background: #DCFCE7; color: #166534; }
.mirai-dark .dash-qa__severity.is-ok { background: rgba(22, 163, 74, 0.22); color: #86efac; }

/* ---- Vista de detalle de una repetición (reemplaza la lista de escenarios
   dentro del mismo modal — ver QaRepetitionDetail) ---- */
.dash-qa__navbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; }
.dash-qa__back {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: transparent; cursor: pointer; padding: 0;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted);
  transition: color 160ms ease;
}
.dash-qa__back:hover { color: var(--ink); }

/* Navegar entre conversaciones sin volver a la lista (también con ← →) */
.dash-qa__repNav { display: flex; align-items: center; gap: 10px; }
.dash-qa__navBtn {
  width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--rule-strong);
  background: transparent; color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 140ms ease, opacity 140ms ease;
}
.dash-qa__navBtn:hover:not(:disabled) { background: rgba(0,0,0,0.06); }
.dash-qa__navBtn:disabled { opacity: 0.3; cursor: default; }
.mirai-dark .dash-qa__navBtn:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.dash-qa__navPos { font-size: 12px; font-family: var(--mono); color: var(--muted-soft); white-space: nowrap; }

.dash-qa__repDetailHead {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.dash-qa__repDetailHead h4 { margin: 0; font-size: 16px; font-weight: 600; }
.dash-qa__repDetailHead .dash-config__hint { margin: 4px 0 0; }
.dash-qa__repDetailMeta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.dash-qa__issuesPanel { margin-bottom: 22px; }
.dash-qa__issuesPanel h5 { margin: 0 0 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-soft); }
.dash-qa__issues { display: flex; flex-direction: column; gap: 8px; }
.dash-qa__issue {
  display: flex; flex-direction: column; gap: 6px;
  padding: 11px 14px; border-radius: 10px;
  background: var(--rule-soft, #fafafa); border-left: 3px solid var(--muted-soft);
}
.dash-qa__issue.is-alta  { border-left-color: #DC2626; }
.dash-qa__issue.is-media { border-left-color: #EAB308; }
.dash-qa__issueHead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dash-qa__issue p { margin: 0; color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.dash-qa__issueCategory { font-weight: 600; font-size: 13px; }
.dash-qa__issueTurn { font-size: 11.5px; color: var(--muted-soft); font-family: var(--mono); }
.mirai-dark .dash-qa__issue { background: rgba(255,255,255,0.04); }

/* Conversación (izquierda) y traza técnica (derecha) lado a lado en desktop */
.dash-qa__split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.dash-qa__panel { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.dash-qa__panel h5 { margin: 0 0 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-soft); }
@media (max-width: 760px) { .dash-qa__split { grid-template-columns: 1fr; } }

/* Panel de conversación con fondo gris propio — lo distingue de un vistazo
   del panel de traza técnica, que queda solo con borde. */
.dash-qa__panel--convo { background: #F4F4F6; border-color: transparent; }
.mirai-dark .dash-qa__panel--convo { background: rgba(255,255,255,0.045); }

/* Transcripción tipo chat: cliente a la izquierda, Emma a la derecha */
.dash-qa__transcript {
  display: flex; flex-direction: column; gap: 12px; margin: 0;
  max-height: 66vh; overflow-y: auto; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
}
.dash-qa__transcript::-webkit-scrollbar { width: 8px; }
.dash-qa__transcript::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 999px; }
.dash-qa__transcript::-webkit-scrollbar-track { background: transparent; }
.dash-qa__turn { display: flex; flex-direction: column; gap: 6px; }
.dash-qa__bubble {
  max-width: 90%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5;
  white-space: pre-wrap;
}
.dash-qa__bubbleLabel { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; margin-bottom: 3px; }
.dash-qa__bubble--client { align-self: flex-start; background: var(--rule); color: var(--ink); }
.dash-qa__bubble--emma { align-self: flex-end; background: #111; color: #fff; }
.mirai-dark .dash-qa__bubble--client { background: rgba(255,255,255,0.08); }
.mirai-dark .dash-qa__bubble--emma { background: #2563EB; }

/* Traza técnica: siempre visible (ya no colapsada en <details>), agrupada
   en tarjetas para leerla de un vistazo junto a la conversación. */
.dash-qa__trace {
  display: flex; flex-direction: column; gap: 16px;
  max-height: 66vh; overflow-y: auto; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
}
.dash-qa__trace::-webkit-scrollbar { width: 8px; }
.dash-qa__trace::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 999px; }
.dash-qa__trace::-webkit-scrollbar-track { background: transparent; }
.dash-qa__traceGroup h5 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-soft); }
.dash-qa__traceRow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--rule); border-radius: 8px;
  font-family: var(--mono); font-size: 12px;
}
.dash-qa__traceRow:last-child { margin-bottom: 0; }
.dash-qa__traceOutcome { padding: 1px 7px; border-radius: 999px; background: var(--rule); text-transform: uppercase; font-size: 10px; letter-spacing: 0.03em; }
.dash-qa__traceOutcome.is-error, .dash-qa__traceOutcome.is-rejected { background: #FEE2E2; color: #991B1B; }
.dash-qa__traceOutcome.is-accepted { background: #DCFCE7; color: #166534; }
.mirai-dark .dash-qa__traceOutcome.is-error, .mirai-dark .dash-qa__traceOutcome.is-rejected { background: rgba(220, 38, 38, 0.22); color: #fca5a5; }
.mirai-dark .dash-qa__traceOutcome.is-accepted { background: rgba(22, 163, 74, 0.22); color: #86efac; }
.dash-qa__traceReason { color: var(--muted); }
.dash-qa__tracePayload { color: var(--muted-soft); word-break: break-all; }

/* ============================================================
   MirAI Empresa — el sub-dashboard interno (dashboard-mirai.jsx)
   Reusa el esqueleto y los tokens del dashboard de cliente (--card,
   --ink, --rule…), así el modo oscuro sale gratis vía .mirai-dark.
   ============================================================ */

.mirai-body { display: flex; flex-direction: column; gap: 18px; }
.mirai-card { display: flex; flex-direction: column; gap: 14px; }
.mirai-card__actions { display: flex; align-items: center; gap: 8px; }
.mirai-muted { color: var(--muted-soft); }
.mirai-empty {
  margin: 0; padding: 26px 18px; text-align: center; font-size: 13px;
  color: var(--muted); border: 1px dashed var(--rule-strong); border-radius: 12px;
}
.mirai-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .mirai-row { grid-template-columns: 1fr; } }

/* Sidebar propio: mismo componente visual, con la etiqueta "Empresa" que
   avisa que estás en otro dashboard. */
.mirai-sb__tag {
  margin: -6px 0 10px; padding: 0 18px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-soft);
}
.mirai-sb__exit { color: #dc2626; }
.mirai-sb__exit .dash-sb__icon { color: inherit; }
.mirai-sb__exit:hover { background: rgba(220,38,38,0.10); color: #dc2626; }
.mirai-dark .mirai-sb__exit { color: #fca5a5; }
.mirai-dark .mirai-sb__exit:hover { background: rgba(220,38,38,0.18); color: #fca5a5; }

/* ============ EL COLOR DE CADA SECCIÓN ============
   Cada sección lleva su color (`accent` en MIRAI_SECTIONS) igual que Ads e
   Inversión en el dashboard de clientes: llega como --mo-i en el ítem del menú
   y como --mo-accent en la pantalla entera. Oficina, Pulso y Calendario no
   tienen: son vistas de todo, y darles color propio sería decir que la empresa
   entera es de ese color. */
.mirai-sb__item--accent .dash-sb__icon { color: var(--mo-i); opacity: 0.85; }
.mirai-sb__item--accent:hover .dash-sb__icon { opacity: 1; }
.mirai-sb__item--accent:hover { background: color-mix(in srgb, var(--mo-i) 10%, transparent); color: var(--mo-i); }
/* Texto e ícono siempre en blanco sobre el acento, sin excepciones: la pastilla
   activa tiene que verse igual en las ocho secciones. (El amarillo de Checklist
   es el único que queda flojo de contraste; se eligió consistencia.) */
.dash-sb__item.is-active.mirai-sb__item--accent,
.mirai-dark .dash-sb__item.is-active.mirai-sb__item--accent {
  background: var(--mo-i); color: #fff;
}
.dash-sb__item.is-active.mirai-sb__item--accent .dash-sb__icon,
.mirai-dark .dash-sb__item.is-active.mirai-sb__item--accent .dash-sb__icon { color: #fff; opacity: 1; }
.dash-sb__item.is-active.mirai-sb__item--accent:hover,
.mirai-dark .dash-sb__item.is-active.mirai-sb__item--accent:hover { filter: brightness(0.92); }

/* El sello del título: el "rectángulo de color" que en Ads es el ítem activo
   del menú, acá también al lado del h1 para que la pantalla se identifique sin
   mirar el costado. Sin acento se pinta con la tinta, y queda negro. */
/* flex-direction explícito: .dash-head__heading es columna, y sin resetearlo
   el sello quedaba arriba del título en vez de al lado. */
.mirai-head { display: flex; flex-direction: row; align-items: center; gap: 11px; }
.mirai-head__seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: color-mix(in srgb, var(--mo-accent, var(--ink)) 13%, transparent);
  color: var(--mo-accent, var(--ink));
}

/* El degradé de fondo: una sola mancha suave arriba de la pantalla, del color
   de la sección. Va en un ::before fijo y no en el body para que no se mueva
   con el scroll ni tape los bordes de las tarjetas. */
.mirai-dboard.is-accent .dash-main { position: relative; }
.mirai-dboard.is-accent .dash-main::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 340px; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mo-accent) 9%, transparent), transparent 75%);
}
.mirai-dark .mirai-dboard.is-accent .dash-main::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--mo-accent) 16%, transparent), transparent 75%);
}
.mirai-dboard.is-accent .dash-head,
.mirai-dboard.is-accent .mirai-body { position: relative; z-index: 1; }

/* Las tarjetas de métrica de Ads/Inversión, ahora también acá. --mo-m es el
   color de la tarjeta, que no siempre es el de la sección: en Finanzas una caja
   negativa se pinta de rojo, porque ahí el color deja de ser decoración. */
.mirai-metric__track {
  height: 5px; border-radius: 999px; margin-top: 8px; overflow: hidden;
  background: var(--rule);
}
.mirai-metric__track i {
  display: block; height: 100%; border-radius: 999px; background: var(--mo-m);
  animation: mirai-grow 0.9s cubic-bezier(0.22,1,0.36,1) both;
}
.mirai-metric--ok .dash-metric__value { color: #16A34A; }
.mirai-metric--warn .dash-metric__value { color: #B45309; }
.mirai-metric--bad .dash-metric__value { color: #DC2626; }
.mirai-dark .mirai-metric--ok .dash-metric__value { color: #86efac; }
.mirai-dark .mirai-metric--warn .dash-metric__value { color: #fcd34d; }
.mirai-dark .mirai-metric--bad .dash-metric__value { color: #fca5a5; }
.mirai-metric:hover { box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--mo-m) 45%, transparent); }
/* --card no se redefine en modo oscuro: .dash-metric trae background:#fff fijo
   y la regla oscura del dashboard ya lo cubre, pero la grilla de MirAI se monta
   dentro de .dash-config, así que se repite acá para no depender del orden. */
.mirai-dark .mirai-metric { background: #15171c; }

/* Fila seleccionada de la lista de campañas, con el azul de Ads. */
.dash-ads__campaign-row.is-sel { background: color-mix(in srgb, var(--mo-m, #1877F2) 9%, transparent); }
.dash-ads__ranking-num { flex: none; }
/* La barra del ranking es un <span> suelto dentro de un contenedor que no es
   flex, así que sin esto queda en línea y `height` no aplica: la barra existía
   en el DOM y no se veía en ninguna de las dos pantallas que la usan. */
.dash-ads__ranking-info .dash-intents__bar { display: block; }

/* El panel de Ads es un solo bloque con su separación interna, para poder
   montarlo tanto suelto en .dash-main (dashboard de clientes) como de hijo del
   flex de .mirai-body (MirAI Empresa) sin que se sumen dos espaciados. */
.dash-ads-panel > * + * { margin-top: 16px; }

/* Los filtros de Ads dentro de MirAI: en el dashboard de clientes viven en el
   encabezado, que acá es el de MirAI.
   El z-index no es decorativo. `.dash-fade > *` anima cada hijo con un
   transform, y un transform crea contexto de apilamiento: el z-index 200 del
   menú desplegable pasa a resolverse *dentro* de esta barra, que sin z-index
   propio se pinta antes que el panel de abajo. Resultado: el menú se abría
   tapado por las tarjetas de métrica. */
.mirai-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; z-index: 5; }

/* El sello de cada red en la lista de Redes: lleva el degradé de la marca, que
   es lo que la hace reconocible antes de leer el nombre. */
.mirai-net__badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px; color: #fff;
}
/* .dash-config__row reparte con space-between, y con el sello adelante eso
   dejaba un hueco enorme entre el ícono y el nombre. */
.mirai-net__row { display: flex; align-items: center; gap: 12px; }
.mirai-net__row .dash-config__info { flex: 1; min-width: 0; }

/* Tira de números de la tarjeta Redes: pares etiqueta/valor separados por una
   línea, no tarjetas. A todo el ancho, tres recuadros para tres números son
   tres recuadros vacíos. */
.mirai-netstats { display: flex; flex-wrap: wrap; gap: 0 28px; }
.mirai-netstats > div {
  display: flex; flex-direction: column; gap: 1px;
  padding-right: 28px; border-right: 1px solid var(--rule);
}
.mirai-netstats > div:last-child { border-right: none; padding-right: 0; }
.mirai-netstats span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-soft); }
.mirai-netstats strong { font-size: 21px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mirai-netstats em { font-style: normal; font-size: 11.5px; color: var(--muted); }
@media (max-width: 620px) {
  .mirai-netstats > div { border-right: none; padding-right: 0; }
}

/* Tab "MirAI" del panel de administración: navega en vez de cambiar de card. */
.dash-admin__tab--go { gap: 6px; }

/* ============ CHECKLIST (la libreta) ============ */
/* El campo de anotar es la pieza que decide si la sección se usa: si escribir
   una idea cuesta abrir un modal, no se anota. */
.mirai-jot { display: flex; flex-direction: column; gap: 10px; }
.mirai-jot__kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.mirai-jot__row { display: flex; gap: 10px; align-items: center; }
.mirai-jot__row input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px;
  padding: 11px 14px; border: 1px solid var(--rule-strong); border-radius: 12px;
  background: transparent; color: var(--ink);
}
.mirai-jot__row input:focus { outline: none; border-color: var(--ink); }
.mirai-jot__row input::placeholder { color: var(--muted-soft); }
.mirai-check__filters { margin-top: 0; }

/* ---- Carpetas de la checklist ----
   Un selector, no una tarjeta de métrica: nombre y cuántos abiertos tiene, y
   listo. Van en una fila que envuelve y no en una grilla de tarjetas — cuanto
   más chicas, más carpetas entran a la vista sin scrollear, que es lo único
   que se les pide.
   El color aparece SOLO en la que tiene algo vencido. Con todas pintadas, la
   que va tarde —lo único que hay que ver de un vistazo— no se distingue. */
.mo-folders { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mo-folder {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit;
  padding: 5px 8px 5px 11px; border: 1px solid var(--rule); border-radius: 8px;
  background: transparent; color: var(--ink); font-size: 12.5px;
  max-width: 220px; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.mo-folder__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El contador es una pastilla y no texto suelto: separa el número del nombre
   sin necesidad de una palabra ("abiertos") que se repite en cada carpeta. */
.mo-folder__n {
  flex: none; min-width: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--rule); color: var(--muted-strong);
  font-size: 11px; font-weight: 650; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.mo-folder:hover { border-color: var(--rule-strong); }
/* Vencidos: el contador se pone rojo. Es el número el que está mal, no la
   carpeta, así que se pinta el número. */
.mo-folder.has-late .mo-folder__n { background: color-mix(in srgb, #dc2626 14%, transparent); color: #dc2626; }
/* La abierta se rellena con el color del texto — el color ya significa
   "tiene algo vencido", así que la selección no puede ser otro color. */
.mo-folder.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg, #fff); }
.mo-folder.is-on .mo-folder__n { background: rgba(255,255,255,0.22); color: inherit; }
.mirai-dark .mo-folder.is-on { color: #0e0f12; }
.mirai-dark .mo-folder.is-on .mo-folder__n { background: rgba(0,0,0,0.22); }
.mirai-dark .mo-folder.has-late .mo-folder__n { background: color-mix(in srgb, #fca5a5 16%, transparent); color: #fca5a5; }
.mirai-dark .mo-folder.is-on.has-late .mo-folder__n { background: rgba(0,0,0,0.22); color: #b91c1c; }

/* Dónde va a caer lo que se anote. Sin esto, el campo de una línea escribe en
   una carpeta que no se ve desde el campo. */
.mo-jot__where { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
.mo-jot__where strong { color: var(--ink); font-weight: 650; }

/* Barra de "estás viendo un recorte". Va arriba de las listas y no en las
   tarjetas, que es donde se ve el resultado y donde uno se pregunta por qué
   falta algo. */
.mo-activo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 13px; margin-bottom: 14px;
  border: 1px dashed var(--rule-strong); border-radius: 11px;
  font-size: 12.5px; color: var(--muted);
}
.mo-activo svg { flex: none; opacity: 0.6; }
.mo-activo strong { color: var(--ink); font-weight: 650; }
.mo-activo .btn { margin-left: auto; }
.mo-activo .btn + .btn { margin-left: 0; }

/* La píldora de carpeta en una fila: neutra, porque un cliente no tiene color
   asignado, y con el ícono en vez del punto para que se distinga de las otras. */
.mirai-chip--folder { color: var(--muted-strong); border-color: var(--rule-strong); background: transparent; }
.mirai-chip--folder svg { flex: none; opacity: 0.7; }
.mirai-dark .mirai-chip--folder { color: var(--muted-strong); }

.mirai-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mirai-check__item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px; border-top: 1px solid var(--rule);
}
.mirai-check__item:first-child { border-top: none; }
.mirai-check__item.is-hecho { opacity: 0.5; }
.mirai-check__item.is-hecho .mirai-check__title { text-decoration: line-through; }
.mirai-check__item.is-descartado { opacity: 0.4; }
.mirai-check__box {
  flex: none; width: 20px; height: 20px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--rule-strong); background: transparent;
  display: grid; place-items: center; color: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.mirai-check__box:hover { border-color: var(--chk); }
.mirai-check__box.is-on { background: var(--chk); border-color: var(--chk); }
.mirai-check__main {
  flex: 1; min-width: 0; text-align: left; border: none; background: none;
  padding: 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: 2px;
}
/* El título en negrita: es lo que se busca al barrer la lista, y contra la fila
   de píldoras de abajo (11px, con color) es lo que hace que cada ítem se lea
   como una cosa y no como cuatro renglones sueltos. */
.mirai-check__title { font-size: 13.5px; color: var(--ink); font-weight: 650; }
.mirai-check__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted-soft);
}
.mirai-check__kind { display: inline-flex; align-items: center; gap: 5px; }
.mirai-check__kind i { width: 7px; height: 7px; border-radius: 999px; background: var(--chk); }
.mirai-check__prio { font-weight: 600; }

/* Píldora de dato: el mismo chip redondeado de .mirai-swatch__opt.is-on (el
   selector de "Anotar"), en tamaño de metadato. El color entra por --chip-c, así
   que la clase no sabe nada de tipos, prioridades ni áreas: cada uso le pasa el
   color que ese valor ya tenía. --chip-c y no --chip porque ese nombre ya lo usa
   .mirai-cal__key para el chip del calendario. */
.mirai-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 11px; font-weight: 600; line-height: 1.65;
  color: var(--chip-c, var(--muted));
  border: 1px solid color-mix(in srgb, var(--chip-c, var(--rule-strong)) 42%, transparent);
  background: color-mix(in srgb, var(--chip-c, transparent) 12%, transparent);
}
.mirai-chip i { width: 7px; height: 7px; border-radius: 999px; background: var(--chip-c); flex: none; }
/* El dueño no tiene color propio: queda como píldora neutra, para que la fila
   se lea como una sola familia de chips sin afirmar una categoría que no existe. */
.mirai-chip--plain { color: var(--muted); border-color: var(--rule-strong); background: transparent; }
.mirai-dark .mirai-chip { color: color-mix(in srgb, var(--chip-c) 45%, #fff); }
.mirai-dark .mirai-chip--plain { color: var(--muted); }
.mirai-check__actions { display: flex; gap: 2px; flex: none; opacity: 0; transition: opacity 0.15s; }
.mirai-check__item:hover .mirai-check__actions { opacity: 1; }
@media (hover: none) { .mirai-check__actions { opacity: 1; } }

/* ============ ESTADÍSTICAS ============ */
.mirai-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.mirai-stat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px;
}
.mirai-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-soft); }
.mirai-stat__value { font-size: 22px; line-height: 1.15; font-weight: 600; }
.mirai-stat__hint { font-size: 11px; color: var(--muted); }
.mirai-stat--ok .mirai-stat__value { color: #16a34a; }
.mirai-stat--bad .mirai-stat__value { color: #dc2626; }
.mirai-dark .mirai-stat--ok .mirai-stat__value { color: #86efac; }
.mirai-dark .mirai-stat--bad .mirai-stat__value { color: #fca5a5; }

/* ============ TABLA / CELDAS ============ */
.mirai-table td { vertical-align: middle; }
.mirai-table__actions { display: flex; gap: 2px; justify-content: flex-end; }
/* El nombre es por lo que se busca una fila en la tabla: va en negrita para
   poder barrer la columna sin leer renglón por renglón. Es el encabezado el que
   NO cambia — se pinta solo el valor. */
.mirai-cell__name { font-weight: 700; }
.mirai-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 340px; }
.mirai-dotlabel { display: inline-flex; align-items: center; gap: 6px; }
.mirai-dotlabel i { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.mirai-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mirai-money--in { color: #16a34a; }
.mirai-money--out { color: #dc2626; }
.mirai-dark .mirai-money--in { color: #86efac; }
.mirai-dark .mirai-money--out { color: #fca5a5; }
.mirai-progress { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.mirai-progress__bar { width: 70px; height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.mirai-progress__bar i { display: block; height: 100%; background: var(--ink); border-radius: 999px; }

.mirai-tag--ok { background: #DCFCE7; color: #166534; }
.mirai-tag--warn { background: #FEF3C7; color: #92400E; }
.mirai-tag--bad { background: #FEE2E2; color: #991B1B; }
.mirai-tag--neutral { background: var(--rule); color: var(--muted); }
.mirai-dark .mirai-tag--ok { background: rgba(22,163,74,0.22); color: #86efac; }
.mirai-dark .mirai-tag--warn { background: rgba(217,119,6,0.22); color: #fcd34d; }
.mirai-dark .mirai-tag--bad { background: rgba(220,38,38,0.22); color: #fca5a5; }

/* ============ FORMULARIO GENÉRICO ============ */
.mirai-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.mirai-form__field--wide { grid-column: 1 / -1; }
.mirai-form input[type="checkbox"] { width: 18px; height: 18px; justify-self: start; }
@media (max-width: 620px) { .mirai-form { grid-template-columns: 1fr; } }

/* ============ LA OFICINA (render isométrico) ============ */
/* Tokens propios de la escena: el resto del dashboard no los usa, y así el
   modo oscuro cambia la iluminación sin tocar una sola forma del SVG. */
.mirai-office__stage {
  --mo-floor: #f2f2f4;
  --mo-floor-2: #ffffff;
  --mo-seam: rgba(0,0,0,0.045);
  --mo-wall-a: #fdfdfe;
  --mo-wall-b: #ececed;
  --mo-wall-side: #eeeef1;
  --mo-wall-side-2: #dedee3;
  --mo-skirt: rgba(0,0,0,0.07);
  --mo-win-a: #dcecfb;
  --mo-win-b: #f4fbff;
  --mo-furn: #ffffff;
  --mo-furn-l: #e9e9ee;
  --mo-furn-r: #f2f2f5;
  --mo-dark: #6b7080;
  --mo-dark-l: #4c5160;
  --mo-dark-r: #5b6070;
  --mo-chair: #d9dade;
  --mo-skin: #f0c9a8;
  --mo-hair: #3b3a3e;
  --mo-shadow: #0b0d12;
  --mo-screen: #cfd3dc;
  --mo-halo: #f6f6f8;
  --mo-frame: #ffffff;
  --mo-door: #dcd6cd;
  --mo-city: rgba(120,160,200,0.42);
  --mo-edge: rgba(255,255,255,0.75);
  --mo-shelf: #e7e2da;
  --mo-shelf-2: #d3cdc3;
}

.mirai-office__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.mirai-office__modes {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: color-mix(in srgb, var(--rule) 45%, transparent);
}
.mirai-office__modes button {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 6px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}
.mirai-office__modes button:hover { color: var(--ink); }
.mirai-office__modes button.is-on {
  background: var(--card); color: var(--ink);
  box-shadow: 0 1px 3px rgba(10,12,18,0.14);
}
.mirai-dark .mirai-office__modes button.is-on { background: #262931; }
@media (max-width: 560px) { .mirai-office__bar { justify-content: flex-start; } }
.mirai-office__legend { display: flex; flex-wrap: wrap; gap: 12px; }
.mirai-office__legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.mirai-office__legend-item i { width: 9px; height: 9px; border-radius: 3px; }

.mirai-office__stage {
  position: relative; border: 1px solid var(--rule); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #fafafc 0%, #f4f4f6 100%);
}
.mirai-office__svg { display: block; width: 100%; height: auto; max-height: 70vh; cursor: grab; touch-action: none; }
.mirai-office__svg.is-dragging { cursor: grabbing; }

/* Controles de cámara, flotando sobre la esquina de la escena */
.mirai-office__cam {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--card); box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.mirai-office__cam button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 15px;
  transition: background 0.15s, color 0.15s;
}
.mirai-office__cam button:hover { background: var(--rule); color: var(--ink); }
.mirai-office__cam button.is-flip svg { transform: scaleX(-1); }
.mirai-office__cam-reset { width: auto !important; padding: 0 11px; font-size: 11.5px !important; }
.mirai-office__cam-sep { width: 1px; height: 18px; background: var(--rule); margin: 0 3px; }
.mirai-dark .mirai-office__cam { background: #1b1d23; box-shadow: 0 6px 20px rgba(0,0,0,0.5); }

/* --- Paredes y ventanal --- */
.mo-grad__wall-a { stop-color: var(--mo-wall-a); }
.mo-grad__wall-b { stop-color: var(--mo-wall-b); }
.mo-grad__win-a  { stop-color: var(--mo-win-a); }
.mo-grad__win-b  { stop-color: var(--mo-win-b); }
.mo-grad__light-a { stop-color: var(--mo-floor-2); stop-opacity: 0.95; }
.mo-grad__light-b { stop-color: var(--mo-floor-2); stop-opacity: 0; }

.mo-wall--right { fill: url(#moWallBack); }
.mo-wall--left  { fill: url(#moWallSide); }
.mo-grad__side-a { stop-color: var(--mo-wall-side); }
.mo-grad__side-b { stop-color: var(--mo-wall-side-2); }
.mo-window { fill: url(#moWindow); }
.mo-window__frame { fill: var(--mo-frame); }
.mo-window__bar { fill: var(--mo-frame); opacity: 0.9; }
.mo-wall__frame { fill: var(--mo-frame); }
.mo-wall__art { opacity: 0.55; }
.mo-skirting { fill: var(--mo-skirt); }

/* --- Piso --- */
.mo-floor__base { fill: var(--mo-floor); }
.mo-lamps ellipse { fill: url(#moLampPool); }
.mo-ao polygon { fill: var(--mo-shadow); opacity: 0.055; }
.mo-grad__pool-a { stop-color: #fffdf4; stop-opacity: 0.55; }
.mo-grad__pool-b { stop-color: #fffdf4; stop-opacity: 0; }
.mo-clock circle { fill: var(--mo-frame); stroke: var(--mo-skirt); stroke-width: 1.2; }
.mo-clock line { stroke: var(--mo-dark-l); stroke-width: 1.4; stroke-linecap: round; }
.mo-door { fill: var(--mo-door); }
.mo-door__frame { fill: var(--mo-frame); }
.mo-door__knob { fill: var(--mo-dark); }
.mo-skyline polygon { fill: var(--mo-city); }
.mo-wall__sign { fill: var(--mo-frame); opacity: 0.7; }
.mo-shelf__box { fill: var(--mo-shelf); }
.mo-shelf__plank { fill: var(--mo-shelf-2); }
.mo-shelf__book { opacity: 0.62; }
.mo-floor__light { fill: url(#moFloorLight); }
.mo-floor__seams line { stroke: var(--mo-seam); stroke-width: 1; }

/* --- Alfombras de área --- */
.mo-rug { cursor: pointer; }
.mo-rug polygon { opacity: 0.17; transition: opacity 0.25s ease; }
.mo-rug:hover polygon { opacity: 0.32; }

/* --- Volúmenes --- */
.mo-shadow { fill: var(--mo-shadow); }
.mo-prism__top   { fill: var(--mo-furn); stroke: var(--mo-edge); stroke-width: 0.5; }
.mo-prism__left  { fill: var(--mo-furn-l); }
.mo-prism__right { fill: var(--mo-furn-r); }
.mo-prism--dark .mo-prism__top   { fill: var(--mo-dark); }
.mo-prism--dark .mo-prism__left  { fill: var(--mo-dark-l); }
.mo-prism--dark .mo-prism__right { fill: var(--mo-dark-r); }
.mo-prism--chair .mo-prism__top   { fill: var(--mo-chair); }
.mo-prism--chair .mo-prism__left  { fill: #c3c5cb; }
.mo-prism--chair .mo-prism__right { fill: #ced0d6; }
.mo-prism--deskLeg .mo-prism__top,
.mo-prism--deskLeg .mo-prism__left,
.mo-prism--deskLeg .mo-prism__right { fill: #c9cbd1; }
.mo-prism--tech .mo-prism__top   { fill: #dfe1e6; }
.mo-prism--tech .mo-prism__left  { fill: #c4c7ce; }
.mo-prism--tech .mo-prism__right { fill: #d2d4da; }
.mo-prism--sofa .mo-prism__top   { fill: #dcd8dd; }
.mo-prism--sofa .mo-prism__left  { fill: #bfbbc4; }
.mo-prism--sofa .mo-prism__right { fill: #cdc9d2; }
.mo-prism--sofaSeat .mo-prism__top   { fill: #e8e5ea; }
.mo-prism--sofaSeat .mo-prism__left  { fill: #cbc7d0; }
.mo-prism--sofaSeat .mo-prism__right { fill: #d8d4dd; }
.mo-prism--cushion .mo-prism__top   { fill: #cfd3e2; }
.mo-prism--cushion .mo-prism__left  { fill: #b0b5c8; }
.mo-prism--cushion .mo-prism__right { fill: #c1c6d7; }

/* --- Puestos de trabajo --- */
.mo-ws { cursor: pointer; transition: transform 0.22s cubic-bezier(0.22,1,0.36,1); }
.mo-ws:hover { transform: translateY(-5px); }
.mo-body__neck { fill: var(--mo-skin); }
.mo-body__head { fill: var(--mo-skin); }
.mo-body__hair { fill: var(--mo-hair); }
.mo-body__torso, .mo-body__arm { opacity: 0.5; transition: opacity 0.3s ease; }
.mo-ws.is-on .mo-body__torso, .mo-ws.is-on .mo-body__arm { opacity: 1; }
.mo-body__ant line { stroke-width: 1.4; }
.mo-laptop__screen { fill: var(--mo-screen); }
.mo-laptop__glow { opacity: 0; filter: blur(4px); }
.mo-ws.is-on .mo-laptop__glow { opacity: 0.3; animation: mo-glow 3.4s ease-in-out infinite; }
@keyframes mo-glow { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.36; } }
.mo-ws__pulse { opacity: 0; color: #b6b9c0; }
.mo-ws.is-on .mo-ws__pulse { opacity: 1; animation: mo-pulse 2.4s ease-in-out infinite; }
@keyframes mo-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
.mo-ws__pulse { transform-box: fill-box; transform-origin: center; }
.mo-labels { pointer-events: none; }
.mo-label { paint-order: stroke; stroke: var(--mo-halo); stroke-width: 3.5px; stroke-linejoin: round; }
.mo-label--person { font-size: 9.5px; fill: var(--muted); }
.mo-label--obj { font-size: 9.5px; fill: var(--ink); font-weight: 600; }
.mo-label--badge { font-size: 9px; fill: var(--muted-soft); }

/* El cartel de cada mueble: es el botón que entra a su sección. Va con
   pointer-events propios porque la capa de rótulos entera los tiene apagados
   (si no, los rótulos se comerían los clics del piso y del mobiliario). */
.mo-pin { cursor: pointer; pointer-events: auto; }
.mo-pin__bg {
  fill: var(--card); stroke: var(--rule); stroke-width: 1;
  filter: drop-shadow(0 2px 5px rgba(12,14,20,0.14));
  transition: transform 0.16s ease;
}
.mo-pin__text { font-size: 10px; font-weight: 650; fill: var(--ink); }
.mo-pin:hover .mo-pin__bg,
.mo-pin:focus-visible .mo-pin__bg { stroke: var(--ink); }
.mo-pin:hover { transform-box: fill-box; }
.mo-pin:focus { outline: none; }
.mo-pin:focus-visible .mo-pin__bg { stroke-width: 2; }
.mirai-dark .mo-pin__bg { fill: #1b1d23; stroke: rgba(255,255,255,0.14); }

/* --- Plantas --- */
.mo-plant__pot { fill: #d8cfc6; }
.mo-plant__leaves path { fill: #6aa88a; }
.mo-plant__leaves { transform-box: fill-box; transform-origin: bottom center; animation: mo-sway 7s ease-in-out infinite; }
@keyframes mo-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }

/* --- Objetos clickeables --- */
.mo-obj { cursor: pointer; transition: transform 0.22s cubic-bezier(0.22,1,0.36,1); }
.mo-obj:hover { transform: translateY(-6px); }
.mo-obj__panel { fill: var(--mo-furn); }
.mo-obj__accent { opacity: 0.85; }
.mo-obj__led { opacity: 0.9; animation: mo-blink 2.8s ease-in-out infinite; }
.mo-obj__led:nth-of-type(2) { animation-delay: 0.5s; }
.mo-obj__led:nth-of-type(3) { animation-delay: 1s; }
.mo-obj__led:nth-of-type(4) { animation-delay: 1.5s; }
@keyframes mo-blink { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }
.mo-obj__dial { fill: none; stroke-width: 2; }
/* Calendario: los casilleros del mes. */
.mo-obj__cell { fill: var(--mo-screen); opacity: 0.42; }
/* Mesa de equipo: la única pieza redonda del plano. */
.mo-obj__stem { fill: var(--mo-furn-l); }
.mo-obj__disc { fill: var(--mo-furn); stroke: var(--mo-furn-l); stroke-width: 0.8; }
.mo-obj__disc-side { fill: var(--mo-furn-l); }
.mo-obj:hover .mo-obj__accent { opacity: 1; }

/* --- Detalles de escritorio y base de datos --- */
.mo-prism--mug .mo-prism__top { fill: #e8e8ec; }
.mo-prism--mug .mo-prism__left { fill: #c8c8d0; }
.mo-prism--mug .mo-prism__right { fill: #d8d8e0; }
.mo-prism--paper .mo-prism__top,
.mo-prism--paper .mo-prism__left,
.mo-prism--paper .mo-prism__right { fill: #fbfbfd; }
.mo-prism--water .mo-prism__top { fill: #cfe8f7; }
.mo-prism--water .mo-prism__left { fill: #a7cfe6; }
.mo-prism--water .mo-prism__right { fill: #bcdcf0; }
.mo-db__side { fill: var(--mo-dark-r); }
.mo-db__disc { fill: var(--mo-dark); stroke: var(--mo-dark-l); stroke-width: 0.8; }
.mo-db__glow { opacity: 0.55; animation: mo-blink 3.6s ease-in-out infinite; }

/* --- Entrada escalonada: la oficina se arma desde el fondo --- */
.mo-enter { animation: mo-in 0.5s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes mo-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mo-enter { animation: none; }
  .mo-ws.is-on .mo-ws__pulse, .mo-ws.is-on .mo-laptop__glow, .mo-obj__led,
  .mo-plant__leaves, .mo-db__glow { animation: none; }
}

/* --- Tooltip que sigue al puntero --- */
.mirai-office__tip {
  position: absolute; z-index: 2; transform: translate(14px, -50%);
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; border-radius: 12px; border: 1px solid var(--rule-strong);
  background: var(--card); box-shadow: 0 10px 30px rgba(0,0,0,0.14);
  font-size: 12px; pointer-events: none; max-width: 220px;
}
.mirai-office__tip-kind { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted-soft); }
.mirai-office__tip strong { font-size: 13px; }
.mirai-office__tip > span:not(.mirai-office__tip-kind) { color: var(--muted); }
.mirai-office__tip .dash-tag { align-self: flex-start; margin-top: 4px; }

.mirai-office__empty {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(255,255,255,0.86);
  font-size: 13px; color: var(--muted); text-align: center; padding: 20px;
}
.mirai-office__empty p { color: var(--ink); opacity: 0.82; margin: 0; }
.mirai-office__help {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12px; color: var(--muted-soft);
}
.mirai-office__help strong { color: var(--muted); font-weight: 600; }
.mirai-office__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }

/* --- Centro de agentes: la oficina de los agentes, servida por su daemon --- */
.mirai-office__stage--cc { height: min(74vh, 780px); min-height: 520px; background: none; }
.mirai-office__frame { width: 100%; height: 100%; border: 0; display: block; }
.mirai-office__off {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px;
}
.mirai-office__off h4 { margin: 0; font-size: 15px; }
.mirai-office__off p { margin: 0; font-size: 12px; color: var(--muted); max-width: 46ch; line-height: 1.6; }
.mirai-office__off code { font-size: 11px; background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 4px; }
.mirai-cc__btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
/* El punto del botón de modo: verde solo si el daemon contesta. */
.mirai-cc__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-soft); margin-left: 6px; }
.mirai-cc__dot.is-on { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }
.mirai-office__modes button { display: inline-flex; align-items: center; }
.mirai-dark .mirai-office__off code { background: rgba(255,255,255,0.08); }

/* --- Oficina de noche --- */
.mirai-dark .mirai-office__stage {
  --mo-floor: #1c1e24;
  --mo-floor-2: #2a2d36;
  --mo-seam: rgba(255,255,255,0.045);
  --mo-wall-a: #262932;
  --mo-wall-b: #1b1d24;
  --mo-wall-side: #23262f;
  --mo-wall-side-2: #16181e;
  --mo-skirt: rgba(0,0,0,0.35);
  --mo-win-a: #1e3550;
  --mo-win-b: #2b4a6d;
  --mo-furn: #363a45;
  --mo-furn-l: #272a33;
  --mo-furn-r: #2f333d;
  --mo-dark: #21242b;
  --mo-dark-l: #16181d;
  --mo-dark-r: #1c1f25;
  --mo-chair: #2c2f38;
  --mo-skin: #c9a184;
  --mo-hair: #17171a;
  --mo-shadow: #000000;
  --mo-screen: #4b5464;
  --mo-halo: #14161b;
  --mo-frame: #3d424f;
  --mo-door: #2c2f38;
  --mo-city: rgba(150,190,235,0.30);
  --mo-edge: rgba(255,255,255,0.10);
  --mo-shelf: #2e3139;
  --mo-shelf-2: #23262d;
  background: linear-gradient(180deg, #16181d 0%, #101216 100%);
}
.mirai-dark .mo-prism--chair .mo-prism__left  { fill: #212430; }
.mirai-dark .mo-prism--chair .mo-prism__right { fill: #272a35; }
.mirai-dark .mo-prism--deskLeg .mo-prism__top,
.mirai-dark .mo-prism--deskLeg .mo-prism__left,
.mirai-dark .mo-prism--deskLeg .mo-prism__right { fill: #23262e; }
.mirai-dark .mo-prism--tech .mo-prism__top   { fill: #3a3e49; }
.mirai-dark .mo-prism--tech .mo-prism__left  { fill: #24272f; }
.mirai-dark .mo-prism--tech .mo-prism__right { fill: #2e3139; }
.mirai-dark .mo-prism--sofa .mo-prism__top   { fill: #343742; }
.mirai-dark .mo-prism--sofa .mo-prism__left  { fill: #23262e; }
.mirai-dark .mo-prism--sofa .mo-prism__right { fill: #2b2e37; }
.mirai-dark .mo-prism--sofaSeat .mo-prism__top   { fill: #3b3e4a; }
.mirai-dark .mo-prism--sofaSeat .mo-prism__left  { fill: #282b34; }
.mirai-dark .mo-prism--sofaSeat .mo-prism__right { fill: #31343e; }
.mirai-dark .mo-prism--cushion .mo-prism__top   { fill: #3c4152; }
.mirai-dark .mo-prism--cushion .mo-prism__left  { fill: #282c38; }
.mirai-dark .mo-prism--cushion .mo-prism__right { fill: #333846; }
.mirai-dark .mo-grad__pool-a { stop-color: #fff3d0; stop-opacity: 0.10; }
.mirai-dark .mo-ao polygon { opacity: 0.3; }
.mirai-dark .mo-prism--water .mo-prism__top { fill: #3f5c72; }
.mirai-dark .mo-prism--water .mo-prism__left { fill: #2a4051; }
.mirai-dark .mo-prism--water .mo-prism__right { fill: #354d61; }
.mirai-dark .mo-prism--mug .mo-prism__top { fill: #4a4d58; }
.mirai-dark .mo-prism--mug .mo-prism__left { fill: #32353e; }
.mirai-dark .mo-prism--mug .mo-prism__right { fill: #3d4049; }
.mirai-dark .mo-prism--paper .mo-prism__top,
.mirai-dark .mo-prism--paper .mo-prism__left,
.mirai-dark .mo-prism--paper .mo-prism__right { fill: #565a66; }
.mirai-dark .mo-plant__pot { fill: #3a3630; }
.mirai-dark .mo-plant__leaves path { fill: #3f7a63; }
.mirai-dark .mo-shadow { opacity: 0.5 !important; }
.mirai-dark .mo-rug polygon { opacity: 0.22; }
.mirai-dark .mo-rug:hover polygon { opacity: 0.38; }
.mirai-dark .mirai-office__empty { background: rgba(16,18,22,0.88); }
.mirai-dark .mirai-office__tip { background: #1b1d23; box-shadow: 0 10px 30px rgba(0,0,0,0.6); }

/* ============ PULSO ============ */
.mirai-areas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mirai-areas__row {
  display: flex; align-items: center; gap: 10px; padding: 11px 2px;
  border-bottom: 1px solid var(--rule); cursor: pointer; font-size: 13px;
}
.mirai-areas__row:last-child { border-bottom: none; }
.mirai-areas__dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.mirai-areas__name { flex: 1; }
.mirai-areas__state { font-size: 12px; color: var(--muted); }
.mirai-areas__state--ok { color: #16a34a; }
.mirai-areas__state--bad { color: #dc2626; }
.mirai-dark .mirai-areas__state--ok { color: #86efac; }
.mirai-dark .mirai-areas__state--bad { color: #fca5a5; }

.mirai-goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mirai-goal__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.mirai-goal__title { font-weight: 550; }
.mirai-goal__pct { font-variant-numeric: tabular-nums; color: var(--muted); }
.mirai-goal__bar { height: 7px; border-radius: 999px; background: var(--rule); overflow: hidden; margin: 6px 0 4px; }
.mirai-goal__bar span { display: block; height: 100%; border-radius: 999px; transition: width 0.6s cubic-bezier(0.22,1,0.36,1); }
.mirai-goal__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted-soft); }

.mirai-gaps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mirai-gaps__list li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mirai-gaps__list li .mirai-muted { margin-left: auto; font-size: 11px; }

/* ============ KANBAN DE CONTENIDO ============ */
.mirai-kanban { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 10px; overflow-x: auto; }
@media (max-width: 900px) { .mirai-kanban { grid-template-columns: repeat(5, 150px); } }
.mirai-kanban__col { display: flex; flex-direction: column; gap: 8px; }
.mirai-kanban__head {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-soft);
  padding-bottom: 6px; border-bottom: 1px solid var(--rule);
}
.mirai-kanban__card { padding: 9px 11px; border: 1px solid var(--rule); border-radius: 10px; font-size: 12px; }
.mirai-kanban__card strong { display: block; font-weight: 550; margin-bottom: 3px; }
.mirai-kanban__meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; color: var(--muted-soft); }
.mirai-kanban__empty { margin: 0; text-align: center; color: var(--muted-soft); font-size: 12px; padding: 8px 0; }

/* ============ CREATIVOS ============ */
.mirai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.mirai-creative { position: relative; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.mirai-creative__thumb {
  aspect-ratio: 16 / 10; background: var(--rule); display: flex; align-items: center; justify-content: center;
}
.mirai-creative__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mirai-creative__ph { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-soft); }
.mirai-creative__body { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; font-size: 12px; }
.mirai-creative__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.mirai-creative__actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; opacity: 0; transition: opacity 0.2s; }
.mirai-creative:hover .mirai-creative__actions { opacity: 1; }
.mirai-creative__actions .dash-iconbtn { background: var(--card); border-radius: 8px; }

.mirai-dark .mirai-creative__actions .dash-iconbtn { background: #15171c; }

/* ============ PULSO ============ */
/* Tarjetas grandes: número que cuenta al entrar, barra de contexto y pie
   clickeable que lleva a la sección donde se edita ese número. */
.mirai-heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.mirai-hero {
  display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: left;
  padding: 16px 18px 15px; border: 1px solid var(--rule); border-radius: 16px;
  background: var(--card); color: inherit; font: inherit; cursor: default;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s, border-color 0.2s;
}
.mirai-hero.is-clickable { cursor: pointer; }
.mirai-hero.is-clickable:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.07); border-color: var(--rule-strong); }
.mirai-hero__top { display: flex; align-items: center; gap: 7px; }
/* El sello toma el color de la tarjeta (--mo-h), igual que el de las métricas
   de Finanzas: le da al número algo que lo identifique sin leer la etiqueta. */
.mirai-hero__seal {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; flex: none;
  background: color-mix(in srgb, var(--mo-h, var(--ink)) 13%, transparent);
  color: var(--mo-h, var(--ink));
}
.mirai-hero__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-soft); }
/* Tarjeta-filtro puesta: el anillo es del color de la tarjeta, porque acá el
   color ya identifica a cuál de las cuatro preguntas estás mirando. */
.mirai-hero.is-active {
  border-color: var(--mo-h, var(--ink));
  box-shadow: inset 0 0 0 1px var(--mo-h, var(--ink));
  background: color-mix(in srgb, var(--mo-h, var(--ink)) 6%, transparent);
}
.mirai-dark .mirai-hero.is-active { background: color-mix(in srgb, var(--mo-h, var(--ink)) 14%, #15171c); }
.mirai-hero__value { font-size: 27px; line-height: 1.1; font-weight: 620; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.mirai-hero__track { height: 5px; border-radius: 999px; background: var(--rule); overflow: hidden; margin-top: 2px; }
.mirai-hero__track i { display: block; height: 100%; border-radius: 999px; animation: mirai-grow 0.9s cubic-bezier(0.22,1,0.36,1) both; }
.mirai-hero__hint { font-size: 11.5px; color: var(--muted); margin-top: auto; }
.mirai-hero--ok .mirai-hero__value { color: #16a34a; }
.mirai-hero--warn .mirai-hero__value { color: #b45309; }
.mirai-hero--bad .mirai-hero__value { color: #dc2626; }
/* --card no se redefine en modo oscuro (queda en #fff), así que la tarjeta
   necesita su propio fondo acá — si no, sale blanca sobre el dashboard negro. */
.mirai-dark .mirai-hero { background: #15171c; }
.mirai-dark .mirai-hero--ok .mirai-hero__value { color: #86efac; }
.mirai-dark .mirai-hero--warn .mirai-hero__value { color: #fcd34d; }
.mirai-dark .mirai-hero--bad .mirai-hero__value { color: #fca5a5; }
.mirai-dark .mirai-hero.is-clickable:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.4); }
@keyframes mirai-grow { from { transform: scaleX(0); transform-origin: left; } to { transform: none; } }

/* Barras horizontales — desglose de gastos y embudo comercial */
.mirai-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.mirai-bars li { display: grid; grid-template-columns: 116px 1fr auto; align-items: center; gap: 12px; font-size: 12.5px; }
.mirai-bars li.is-clickable { cursor: pointer; }
.mirai-bars li.is-clickable:hover .mirai-bars__label { color: var(--ink); }
.mirai-bars__label { color: var(--muted); transition: color 0.2s; }
.mirai-bars__track { height: 9px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.mirai-bars__track i { display: block; height: 100%; border-radius: 999px; animation: mirai-grow 0.75s cubic-bezier(0.22,1,0.36,1) both; }
.mirai-bars__value { font-variant-numeric: tabular-nums; font-weight: 550; }
.mirai-foot { margin: 0; font-size: 12px; color: var(--muted); }

/* Vencimientos */
.mirai-due { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mirai-due li {
  display: flex; align-items: center; gap: 10px; padding: 11px 2px; font-size: 13px;
  border-bottom: 1px solid var(--rule); cursor: pointer;
}
.mirai-due li:last-child { border-bottom: none; }
.mirai-due li:hover .mirai-due__title { color: var(--ink); }
.mirai-due__title { flex: 1; color: var(--muted-strong, var(--ink)); transition: color 0.2s; }
.mirai-due__kind { font-size: 11px; color: var(--muted-soft); }
.mirai-due__when { font-size: 11.5px; font-weight: 550; min-width: 84px; text-align: right; }
.mirai-due__when--ok { color: var(--muted); }
.mirai-due__when--warn { color: #b45309; }
.mirai-due__when--bad { color: #dc2626; }
.mirai-dark .mirai-due__when--warn { color: #fcd34d; }
.mirai-dark .mirai-due__when--bad { color: #fca5a5; }

/* Estado por área, con medidor de avance */
.mirai-areas__name { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.mirai-areas__name em { font-style: normal; font-size: 11px; color: var(--muted-soft); }
.mirai-areas__gauge { width: 78px; height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.mirai-areas__gauge i { display: block; height: 100%; border-radius: 999px; animation: mirai-grow 0.8s cubic-bezier(0.22,1,0.36,1) both; }
.mirai-areas__state { min-width: 92px; text-align: right; }

/* Objetivos en grilla (en Pulso van de a dos por fila) */
.mirai-goals--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.mirai-goal.is-clickable { cursor: pointer; }
.mirai-goal.is-clickable:hover .mirai-goal__title { text-decoration: underline; text-underline-offset: 3px; }

/* Atajos de carga */
/* Cada atajo lleva el color de la sección a la que entra (--qk), así la fila
   se lee como el menú de la izquierda y no como ocho botones iguales. */
.mirai-quick { display: flex; flex-wrap: wrap; gap: 9px; }
.mirai-quick__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.mirai-quick__btn svg { color: var(--qk, var(--ink)); }
.mirai-quick__btn:hover {
  border-color: var(--qk, var(--ink)); transform: translateY(-1px);
  background: color-mix(in srgb, var(--qk, #64748b) 12%, transparent);
}

/* La ficha lateral de una anotación. Es un cajón (entra desde el costado y deja
   la lista visible detrás) y no un modal: abrir una tarea no debería sacarte
   del lugar donde estabas leyendo. */
.mirai-drawer .dash-drawer__panel {
  width: min(460px, 100%);
  animation: mirai-drawer-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mirai-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
.mirai-drawer .dash-drawer__head { align-items: flex-start; }
.mirai-drawer__seal {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 12px;
  background: color-mix(in srgb, var(--chk) 14%, transparent); color: var(--chk);
}
.mirai-drawer .dash-drawer__name { line-height: 1.25; }
.mirai-drawer .dash-drawer__meta { flex-wrap: wrap; }
.mirai-drawer__actions { display: flex; gap: 2px; flex: none; }
.mirai-drawer__due { font-style: normal; margin-left: 8px; font-weight: 600; }
.mirai-drawer__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-top: 1px solid var(--rule);
}
.mirai-drawer__foot .mirai-ev__del { margin-right: auto; }
@media (prefers-reduced-motion: reduce) {
  .mirai-drawer .dash-drawer__panel { animation: none; }
}

/* La flecha que abre la ficha aparece al pasar por encima, igual que el resto
   de las acciones de fila. */
.mirai-check__open { flex: none; opacity: 0; transition: opacity 0.15s; }
.mirai-check__open svg { transform: rotate(-90deg); }
.mirai-check__item:hover .mirai-check__open { opacity: 1; }
@media (hover: none) { .mirai-check__open { opacity: 1; } }

/* Checklist en versión mini (la tarjeta de la Oficina): sin checkbox
   accionable ni botones de fila — es una lectura, no la lista de trabajo. */
.mirai-check--mini .mirai-check__item { cursor: pointer; padding: 9px 4px; }
.mirai-check--mini .mirai-check__item:hover .mirai-check__title { text-decoration: underline; }
.mirai-check--mini .mirai-check__box { pointer-events: none; }
.mirai-check--mini .mirai-check__main { pointer-events: none; }

/* Inversión: la barra de cuánto se recuperó. Es una sola barra grande porque
   la pregunta también es una sola. */
.mirai-recover { display: flex; flex-direction: column; gap: 10px; }
.mirai-recover__track { height: 14px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.mirai-recover__track i {
  display: block; height: 100%; border-radius: 999px; background: #16A34A;
  animation: mirai-grow 0.9s cubic-bezier(0.22,1,0.36,1) both;
}
.mirai-recover__ends { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); }
.mirai-recover__ends b { font-weight: 600; color: var(--ink); }

/* El selector de moneda: a la derecha, a la altura del título. Va absoluto y no
   en el flujo porque en el flujo empujaba las tarjetas 42 px hacia abajo y
   Finanzas arrancaba mucho más lejos del título que el resto de las secciones.
   El -52px lo pone sobre la banda del encabezado, que del lado derecho está
   vacía. En pantallas angostas vuelve al flujo: ahí el encabezado crece y
   quedaría encima del título. */
.mirai-dboard .mirai-body { position: relative; }
.mirai-fintop { position: absolute; top: -52px; right: 0; z-index: 3; display: flex; }
@media (max-width: 720px) {
  .mirai-fintop { position: static; justify-content: flex-end; margin-bottom: -6px; }
}

/* La cotización, al pie de Finanzas: se toca una vez cada tanto, no en cada
   visita, así que no le gana el lugar a los números. */
.mirai-usd {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--rule); border-radius: 12px;
}
.mirai-usd__rate { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mirai-usd__tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 7px; border-radius: 6px;
  background: color-mix(in srgb, #16A34A 14%, transparent); color: #16A34A;
}
.mirai-usd__rate strong { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mirai-usd__rate em { font-style: normal; font-size: 11.5px; color: var(--muted-soft); }
.mirai-usd__falta { color: #B45309 !important; }
.mirai-dark .mirai-usd__falta { color: #fcd34d !important; }
.mirai-usd__actions { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; }
.mirai-usd__toggle { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 999px; overflow: hidden; }
.mirai-usd__toggle button {
  border: none; background: transparent; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; color: var(--muted);
}
.mirai-usd__toggle button.is-on { background: var(--ink); color: var(--card, #fff); }
.mirai-dark .mirai-usd__toggle button.is-on { background: #fff; color: #000; }
.mirai-usd__toggle button:disabled { opacity: 0.4; cursor: not-allowed; }
.mirai-usd__warn { flex-basis: 100%; margin: 0; font-size: 11.5px; color: #B45309; }

/* Por socio: quién puso cuánto y cuánto ya cobró. */
.mirai-socios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mirai-socio {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-top: 1px solid var(--rule);
}
.mirai-socio:first-child { border-top: none; }
.mirai-socio__avatar {
  flex: none; width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 650;
  background: color-mix(in srgb, #7C3AED 14%, transparent); color: #7C3AED;
}
.mirai-socio__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mirai-socio__name { font-size: 13.5px; color: var(--ink); }
.mirai-socio__meta { font-size: 11.5px; color: var(--muted-soft); }
.mirai-socio__meta strong { color: var(--muted); font-weight: 600; }
.mirai-socio__bar { flex: none; width: 170px; display: flex; align-items: center; gap: 10px; }
.mirai-socio__track { flex: 1; height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.mirai-socio__track i {
  display: block; height: 100%; border-radius: 999px; background: #16A34A;
  animation: mirai-grow 0.8s cubic-bezier(0.22,1,0.36,1) both;
}
.mirai-socio__bar b {
  flex: none; min-width: 34px; text-align: right; font-size: 11.5px; font-weight: 600;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.mirai-socio__falta { flex: none; min-width: 118px; text-align: right; font-size: 12px; color: var(--muted-soft); }
.mirai-socio__falta b { font-weight: 600; }
@media (max-width: 780px) { .mirai-socio__bar { width: 90px; } .mirai-socio__falta { display: none; } }

/* Cobros del mes: la lista de abonos con su tilde. */
.mirai-cobros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mirai-cobro {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-top: 1px solid var(--rule);
}
.mirai-cobro:first-child { border-top: none; }
.mirai-cobros__mes { font-size: 13px; color: var(--muted); }
.mirai-cobros__mes span { min-width: 118px; text-align: center; font-weight: 600; color: var(--ink); }
.mirai-cobro.is-paid { background: color-mix(in srgb, #16A34A 6%, transparent); }
.mirai-cobro__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mirai-cobro__name { font-size: 13.5px; color: var(--ink); }
.mirai-cobro__meta { font-size: 11.5px; color: var(--muted-soft); }
.mirai-cobro__amount { flex: none; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mirai-cobro__state {
  flex: none; min-width: 84px; text-align: right;
  font-size: 11.5px; font-weight: 600; color: var(--muted-soft);
}
.mirai-cobro__state.is-paid { color: #16A34A; }
.mirai-dark .mirai-cobro__state.is-paid { color: #86efac; }
@media (max-width: 620px) { .mirai-cobro__state { display: none; } }

/* Clientes de la Oficina: estado, proyectos abiertos y su avance promedio. */
.mirai-clientes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mirai-cliente {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 11px 4px; border-top: 1px solid var(--rule);
}
.mirai-cliente:first-child { border-top: none; }
.mirai-cliente:hover .mirai-cliente__name { text-decoration: underline; }
.mirai-cliente__dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.mirai-cliente__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mirai-cliente__name { font-size: 13.5px; color: var(--ink); }
.mirai-cliente__meta { font-size: 11.5px; color: var(--muted-soft); }
.mirai-cliente__gauge { flex: none; width: 190px; display: flex; align-items: center; gap: 10px; }
.mirai-cliente__track { flex: 1; height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.mirai-cliente__track i {
  display: block; height: 100%; border-radius: 999px; background: var(--ink);
  animation: mirai-grow 0.8s cubic-bezier(0.22,1,0.36,1) both;
}
.mirai-cliente__gauge b {
  flex: none; min-width: 34px; text-align: right; font-size: 11.5px; font-weight: 600;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.mirai-cliente__none { flex: none; font-size: 11.5px; color: var(--muted-soft); }
@media (max-width: 780px) {
  .mirai-cliente__gauge, .mirai-cliente__none { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mirai-hero__track i, .mirai-bars__track i, .mirai-areas__gauge i { animation: none; }
}
/* Fila de métricas arriba de una tabla (ver `summary` en MiraiCrud) */
/* Sin línea divisoria: la tira de métricas ya se separa de la tabla por su
   propio espacio, y el borde partía la tarjeta en dos mitades que parecían
   dos tarjetas pegadas. */
.mirai-stats--inline { padding-bottom: 2px; }

/* Estrategia: horizontes y objetivos cerrados */
.mirai-horizons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mirai-horizons li {
  display: flex; align-items: center; gap: 12px; padding: 11px 2px;
  border-bottom: 1px solid var(--rule); font-size: 13px;
}
.mirai-horizons li:last-child { border-bottom: none; }
.mirai-horizons__name { min-width: 96px; }
.mirai-horizons__chips { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.mirai-horizons__chips i { width: 16px; height: 8px; border-radius: 3px; display: block; }
.mirai-horizons__pct { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 38px; text-align: right; }

.mirai-closed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mirai-closed li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted-strong, var(--ink)); }
.mirai-closed li svg { color: #16a34a; flex: none; }
.mirai-closed li em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--muted-soft); }
.mirai-closed li.is-dropped { color: var(--muted-soft); text-decoration: line-through; }
.mirai-closed li.is-dropped svg { color: var(--muted-soft); text-decoration: none; }
.mirai-dark .mirai-closed li svg { color: #86efac; }
/* Dentro de una card a media pantalla, cuatro métricas entran mejor de a dos. */
.mirai-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ============ CALENDARIO ============ */
/* El color del calendario lo pone el tipo de actividad (`--chip`, ver
   MO_EVENT_KIND). Todo lo demás — celdas, encabezados, fichas — usa los tokens
   del dashboard, así el modo oscuro sale solo. */
.mirai-cal__nav { display: flex; align-items: center; gap: 8px; }
.mirai-cal__nav .dash-card__title { min-width: 168px; }
.mirai-cal__nav .dash-iconbtn svg { transform: rotate(90deg); }
.mirai-cal__next svg { transform: rotate(-90deg) !important; }
.mirai-cal__filter {
  padding: 6px 10px; border: 1px solid var(--chip, var(--rule-strong)); border-radius: 999px;
  background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer;
}
/* Cuando hay un tipo elegido, el filtro se pinta de ese tipo: es el mismo
   color que van a tener los chips que quedan en la grilla. */
.mirai-cal__filter.is-on {
  color: var(--chip); font-weight: 600;
  background: color-mix(in srgb, var(--chip) 12%, transparent);
}

.mirai-cal__head, .mirai-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mirai-cal__head { gap: 6px; margin-bottom: 6px; }
.mirai-cal__head span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted-soft); text-align: center;
}
.mirai-cal__grid { gap: 6px; }
.mirai-cal__day {
  position: relative; min-height: 96px; padding: 6px 6px 8px;
  border: 1px solid var(--rule); border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  /* Fondo transparente a propósito: --card no se redefine en modo oscuro (queda
     en blanco), así que la celda toma el de la tarjeta que la contiene. */
  background: transparent;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.mirai-cal__day:hover {
  border-color: var(--rule-strong); transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.mirai-dark .mirai-cal__day:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
/* El fin de semana se hunde un punto: sirve para encontrar la fila de un
   vistazo sin agregar otro color al tablero. */
.mirai-cal__day.is-weekend { background: rgba(100, 116, 139, 0.05); }
.mirai-dark .mirai-cal__day.is-weekend { background: rgba(255, 255, 255, 0.045); }
.mirai-cal__day.is-out { opacity: 0.4; }
/* El día de hoy se marca con el borde y una pastilla en el número, no con
   relleno: un bloque de color compite con los eventos, que son lo que hay que
   leer. */
.mirai-cal__day.is-today { border-color: var(--ink); }
.mirai-cal__num {
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  align-self: flex-start;
}
.mirai-cal__day.is-today .mirai-cal__num {
  font-weight: 700; color: #fff; background: var(--ink);
  min-width: 19px; height: 19px; line-height: 19px; text-align: center;
  border-radius: 999px; padding: 0 5px;
}
.mirai-dark .mirai-cal__day.is-today .mirai-cal__num { color: #0f1115; }
.mirai-cal__items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* El chip lleva el color del tipo en tres lugares a la vez — la barra, el
   relleno y la hora — porque a 10 px un borde de 3 px solo no alcanza para
   distinguir cinco categorías de un vistazo. */
.mirai-cal__chip {
  display: block; width: 100%; text-align: left;
  padding: 3px 6px 3px 7px; border: none;
  border-left: 3px solid var(--chip, var(--rule-strong)); border-radius: 5px;
  background: color-mix(in srgb, var(--chip, #64748b) 18%, transparent);
  color: color-mix(in srgb, var(--chip, #64748b) 45%, var(--ink));
  font: inherit; font-size: 10.5px; font-weight: 550; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  transition: background 0.15s;
}
.mirai-cal__chip:hover { background: color-mix(in srgb, var(--chip, #64748b) 34%, transparent); }
.mirai-cal__chip em {
  font-style: normal; font-weight: 700; margin-right: 4px;
  color: var(--chip, var(--ink));
}
.mirai-dark .mirai-cal__chip { color: color-mix(in srgb, var(--chip, #64748b) 30%, var(--ink)); }
.mirai-dark .mirai-cal__chip em { color: color-mix(in srgb, var(--chip, #64748b) 60%, #fff); }
.mirai-cal__chip.is-hecho { opacity: 0.5; text-decoration: line-through; }
.mirai-cal__chip.is-cancelado { opacity: 0.4; text-decoration: line-through; }
.mirai-cal__more { font-size: 10px; color: var(--muted-soft); padding-left: 3px; }

/* La referencia de colores es también el filtro y el conteo del mes: tres
   cosas que en tarjetas separadas se contradecían. */
.mirai-cal__legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.mirai-cal__key {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: transparent;
  color: var(--muted); font: inherit; font-size: 11.5px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.mirai-cal__key i { width: 8px; height: 8px; border-radius: 999px; background: var(--chip); flex: none; }
.mirai-cal__key b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.mirai-cal__key:hover { border-color: var(--chip); color: var(--ink); }
.mirai-cal__key.is-on {
  border-color: var(--chip); color: var(--ink);
  background: color-mix(in srgb, var(--chip) 14%, transparent);
}

/* Elegir el tipo en el formulario: las mismas cinco pastillas de la leyenda,
   así el color con el que se va a pintar la actividad se ve antes de guardarla.
   Un <select> no puede mostrar eso — el color de un <option> no es estilable de
   forma confiable. */
.mirai-swatch { display: flex; flex-wrap: wrap; gap: 6px; }
.mirai-swatch__opt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: transparent;
  color: var(--muted); font: inherit; font-size: 12.5px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.mirai-swatch__opt i { width: 9px; height: 9px; border-radius: 999px; background: var(--sw); flex: none; }
.mirai-swatch__opt:hover { border-color: var(--sw); color: var(--ink); }
.mirai-swatch__opt.is-on {
  border-color: var(--sw); color: var(--sw); font-weight: 600;
  background: color-mix(in srgb, var(--sw) 13%, transparent);
  box-shadow: inset 0 0 0 1px var(--sw);
}
.mirai-dark .mirai-swatch__opt.is-on { color: color-mix(in srgb, var(--sw) 45%, #fff); }

/* ---- Listas de actividades (Hoy, Esta semana, la ficha de un día) ---- */
.mirai-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mirai-acts--modal { margin-bottom: 4px; }
.mirai-act {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--act, var(--rule-strong));
  background: color-mix(in srgb, var(--act, #64748b) 9%, transparent);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.mirai-act:hover {
  background: color-mix(in srgb, var(--act, #64748b) 18%, transparent);
  transform: translateX(2px);
}
.mirai-act.is-hecho { opacity: 0.55; }
.mirai-act.is-hecho .mirai-act__title { text-decoration: line-through; }
.mirai-act.is-cancelado { opacity: 0.42; }
.mirai-act.is-cancelado .mirai-act__title { text-decoration: line-through; }
.mirai-act__icon {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 8px;
  background: color-mix(in srgb, var(--act, #64748b) 20%, transparent);
  color: var(--act, var(--ink));
}
.mirai-act__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mirai-act__title {
  font-size: 13px; font-weight: 550; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mirai-act__meta {
  font-size: 11px; color: var(--muted-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mirai-act__when {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  flex: none; text-align: right; font-variant-numeric: tabular-nums;
}
.mirai-act__when b { font-size: 11px; font-weight: 600; color: var(--muted); }
.mirai-act__when em { font-style: normal; font-size: 11.5px; color: var(--ink); }
.mirai-act__area { width: 7px; height: 7px; border-radius: 999px; flex: none; }

.mirai-agenda { min-height: 0; }
.mirai-week { display: flex; flex-direction: column; gap: 12px; }
.mirai-week__day { display: flex; flex-direction: column; gap: 6px; }
.mirai-week__head {
  display: inline-flex; align-items: baseline; gap: 7px; align-self: flex-start;
  border: none; background: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--muted-soft);
}
.mirai-week__head b { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; }
.mirai-week__head span { font-size: 13px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.mirai-week__head em {
  font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: #10b981;
}
.mirai-week__head:hover span { text-decoration: underline; }

/* ---- La ficha de una actividad ---- */
.mirai-ev { display: flex; flex-direction: column; gap: 8px; }
.mirai-ev__badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--ev) 16%, transparent);
  color: var(--ev); font-size: 11.5px; font-weight: 600;
}
.mirai-ev__title { margin: 0; font-size: 18px; line-height: 1.25; color: var(--ink); }
.mirai-ev__date {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0; font-size: 12.5px; color: var(--muted);
}
.mirai-ev__sep { color: var(--muted-soft); }
.mirai-ev__rows { margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.mirai-ev__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-top: 1px solid var(--rule);
}
.mirai-ev__row dt { margin: 0; font-size: 12px; color: var(--muted-soft); }
.mirai-ev__row dd { margin: 0; font-size: 12.5px; color: var(--ink); text-align: right; }
.mirai-ev__notes {
  margin: 4px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--rule); font-size: 12.5px; color: var(--muted); white-space: pre-wrap;
}
.mirai-ev__actions { margin-top: 16px; }
.mirai-ev__del { margin-right: auto; color: #dc2626; }
.mirai-ev__del:hover { border-color: #dc2626; }

@media (max-width: 780px) {
  .mirai-cal__day { min-height: 64px; padding: 4px; }
  .mirai-cal__chip { font-size: 9.5px; }
  .mirai-cal__nav .dash-card__title { min-width: 0; font-size: 15px; }
  .mirai-act__meta { display: none; }
}

/* ============================================================
   ADS — EXPLORADOR DE CAMPAÑAS
   Cómo está armada cada campaña (presupuesto, puja, grupos,
   keywords, anuncios, negativas). Ver AdsCampaignExplorer en
   frontend/dashboard-ads.jsx.
   ============================================================ */

/* Puntito "en vivo": el mismo de la home (.hero__foot .pulse en styles.css),
   en verde porque acá significa "esta campaña está corriendo ahora". Una
   campaña pausada NO lleva punto gris: en una lista, la ausencia se lee de un
   vistazo y un segundo color hay que interpretarlo. */
.dash-pulse {
  width: 8px; height: 8px; flex: none;
  background: #22C55E;
  border-radius: 999px;
  position: relative;
}
.dash-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid #22C55E;
  border-radius: 999px;
  animation: dashPulseRing 2.4s ease-out infinite;
}
@keyframes dashPulseRing {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}

.dash-adsx { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

.dash-adsx__camp { border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; }
.dash-adsx__camp.is-live { border-color: rgba(34,197,94,0.45); }

.dash-adsx__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-adsx__name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.dash-adsx__name .dash-config__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Los cuatro datos duros de la campaña. Se envuelve en pantallas chicas en vez
   de scrollear: son cuatro pares etiqueta/valor, no una tabla. */
.dash-adsx__facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 12px; }
.dash-adsx__fact { display: flex; flex-direction: column; gap: 2px; }
.dash-adsx__fact-label { font-size: 11.5px; color: var(--muted); }
.dash-adsx__fact-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Las pestañas son también los contadores (Grupos 4 · Keywords 36 …): el
   número vive una sola vez, en el control que lleva a verlo. */
.dash-adsx__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dash-adsx__tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: transparent;
  font: inherit; font-size: 12.5px; color: var(--ink);
  cursor: pointer; transition: background 140ms ease, border-color 140ms ease;
}
.dash-adsx__tab b { font-variant-numeric: tabular-nums; color: var(--muted); }
.dash-adsx__tab:hover { border-color: #000; }
.dash-adsx__tab.is-sel { background: #1877F2; border-color: #1877F2; color: #fff; }
.dash-adsx__tab.is-sel b { color: rgba(255,255,255,0.75); }

.dash-adsx__body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }

.dash-adsx__group { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); }
.dash-adsx__group:first-child { border-top: none; }
.dash-adsx__group-name { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; min-width: 0; }

/* La tabla compartida pide 600px mínimos; la de keywords tiene seis columnas
   cortas y entra en menos. */
.dash-adsx__table { min-width: 520px; }
.dash-adsx__table tbody tr { cursor: default; }

.dash-adsx__ad { padding: 12px 0; border-top: 1px solid var(--rule); }
.dash-adsx__ad:first-child { border-top: none; }
.dash-adsx__ad-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-adsx__url { display: inline-block; margin-top: 6px; font-size: 12px; color: #1877F2; word-break: break-all; }

.dash-adsx__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dash-adsx__chip {
  padding: 4px 10px; border-radius: 999px;
  background: rgba(24,119,242,0.08); color: #0F4C9E;
  font-size: 12px; line-height: 1.5;
}
.dash-adsx__chip--neg { background: rgba(0,0,0,0.05); color: var(--muted-strong); }

.dash-adsx__desc { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.dash-adsx__desc li { font-size: 12.5px; color: var(--muted-strong); }

/* ---- Modo oscuro ---- */
.mirai-dark .dash-adsx__tab { color: var(--ink); }
.mirai-dark .dash-adsx__tab:hover { border-color: var(--ink); }
.mirai-dark .dash-adsx__chip { background: rgba(24,119,242,0.18); color: #9DC7FF; }
.mirai-dark .dash-adsx__chip--neg { background: rgba(255,255,255,0.07); color: var(--muted-strong); }

/* ---- Accesibilidad ---- */
@media (prefers-reduced-motion: reduce) {
  .dash-pulse::after { animation: none; opacity: 0; }
}

@media (max-width: 720px) {
  .dash-adsx__camp { padding: 12px 13px; }
  .dash-adsx__facts { gap: 10px 20px; }
  .dash-adsx__head { flex-wrap: wrap; }
}