/* 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); }
}
/* Barra de arriba del celular (DashMobileBar): no existe en escritorio. */
.dash-mbar { display: none; }

@media (max-width: 860px) {
  /* Sidebar off-canvas. Queda fijo a la pantalla y no a la página porque el
     wrapper de la ruta ya no conserva su transform (ver styles.css). */
  .dash-sb {
    position: fixed; top: 0; left: 0; z-index: 70;
    /* 100dvh y no 100vh: en un teléfono 100vh es el alto con la barra del
       navegador escondida, así que "Perfil" quedaba debajo de esa barra. */
    height: 100dvh;
    transform: translateX(-100%);
    /* Cerrado no se ve ni recibe foco: sin esto sus links seguían en el orden
       del Tab aunque estuvieran fuera de pantalla. El delay es lo que deja
       terminar la animación de salida antes de esconderlo. */
    visibility: hidden;
    transition: transform 240ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 240ms;
    /* El scroll del menú no se le pasa a la página cuando llega al final, y un
       arrastre horizontal es nuestro (cierra el menú), no del navegador. */
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  /* La sombra va solo abierto: cerrado, el panel queda justo afuera del borde
     izquierdo y su sombra se colaba como una franja gris sobre el contenido. */
  .dash-sb.is-open {
    transform: none; visibility: visible;
    transition: transform 240ms cubic-bezier(.2,.7,.2,1);
    box-shadow: 20px 0 50px -30px rgba(0,0,0,0.4);
  }
  .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;
    touch-action: none;
  }
  .dash-sb__scrim.is-open { opacity: 1; pointer-events: auto; }
  /* Con el menú abierto la página de atrás no scrollea (useDashDrawer). */
  html.dash-nav-open, html.dash-nav-open body { overflow: hidden; }

  .dash-iconbtn.dash-head__menu { display: inline-flex; }
  .dash-head__right { width: 100%; justify-content: flex-end; gap: 10px; }

  /* La barra de arriba: entra cuando el encabezado de la página ya salió de la
     pantalla. Mismo fondo que la página y mismo botón, alineado donde estaba el
     del encabezado, para que parezca ese encabezado que se quedó arriba. */
  .dash-mbar {
    display: flex; align-items: center; gap: 14px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    height: 52px; padding: 0 clamp(20px, 3vw, 40px);
    background: #f6f6f7; border-bottom: 1px solid var(--rule);
    transform: translateY(-100%); visibility: hidden;
    transition: transform 200ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 200ms;
  }
  .dash-mbar.is-shown { transform: none; visibility: visible; transition: transform 200ms cubic-bezier(.2,.7,.2,1); }
  .dash-mbar__title {
    flex: 1; min-width: 0; padding: 0; background: transparent; border: none; cursor: pointer;
    font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--ink); text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mirai-dark .dash-mbar { background: #0e0f12; }

  /* El detalle y los modales tampoco le pasan su scroll a la página de atrás. */
  .dash-drawer__body, .dash-modal__body { overscroll-behavior: contain; }
}
@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; }
  .dash-mbar { padding: 0 14px; }
  /* 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(6px); } to { opacity: 1; transform: none; } }
@keyframes dashSpin { to { transform: rotate(360deg); } }

/* Corta a propósito (antes 460 ms y hasta 275 de escalonado): con el fundido
   de la ruta encima, cada cambio de sección tardaba casi un segundo en
   terminar de armarse. */
.dash-fade > * { animation: dashCardIn 240ms cubic-bezier(.2,.7,.2,1) both; }
.dash-fade > *:nth-child(2) { animation-delay: 25ms; }
.dash-fade > *:nth-child(3) { animation-delay: 50ms; }
.dash-fade > *:nth-child(4) { animation-delay: 75ms; }
.dash-fade > *:nth-child(5) { animation-delay: 100ms; }
.dash-fade > *:nth-child(6) { animation-delay: 125ms; }
.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--ads.is-on { background: #1877F2; }
.dash-switch--contenido.is-on { background: #EA580C; }
.mirai-dark .dash-switch--ads.is-on .dash-switch__knob,
.mirai-dark .dash-switch--contenido.is-on .dash-switch__knob { background: #fff; }
.dash-config__foot { padding-top: 12px; }
.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)
   ============================================================ */
/* El fondo de la PÁGINA también, no solo el del panel. Al cambiar de sección
   el panel se funde a transparente por un instante y lo que se veía atrás era
   el blanco del body: un fogonazo blanco en cada clic. La clase solo existe
   mientras el panel está montado, así que la web pública sigue blanca. */
html.mirai-dark, html.mirai-dark body { background: #0e0f12; }
/* Un menú abierto con `portal` (Perfil, el selector de cuenta) se dibuja en
   <body>, FUERA de .dboard, y ahí las variables de abajo no existen: tomaba el
   --ink claro de la web y "Configuración" quedaba en negro sobre el menú
   oscuro. Se las damos al menú mismo. */
.mirai-dark .dd__menu {
  --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);
  color: var(--ink);
}
.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; }
/* …salvo el ítem activo, que en oscuro es una pastilla BLANCA: con la regla de
   arriba, pasarle el mouse por encima dejaba el texto blanco sobre blanco (se
   notaba en "Perfil" con su menú abierto, y en Inicio). Los ítems con color
   propio (WhatsApp, Agente, Mercado…) están definidos más abajo y no cambian. */
.mirai-dark .dash-sb__item.is-active:hover { background: #fff; color: #000; }
/* 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; }

/* Sidebar: opción activa Inversión (el mismo verde que usa la sección adentro) */
.dash-sb__item.is-active.is-costos,
.mirai-dark .dash-sb__item.is-active.is-costos { background: #16A34A; color: #fff; }
.dash-sb__item.is-active.is-costos:hover,
.mirai-dark .dash-sb__item.is-active.is-costos:hover { background: #15803D; }

/* 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-ink, 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); }
/* Solo la foto (hijo directo): la insignia del portal también trae un <img>
   —su logo— y con el selector abierto se estiraba a toda la tarjeta. */
.dash-rt__prop-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fondo blanco fijo (también en oscuro): el logo real ya trae el color de su
   marca, y sobre el naranja de ZonaProp la llave naranja desaparecía. */
.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; background: #fff; color: #111; box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
.dash-rt__logo { display: block; flex: none; object-fit: contain; }
.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: var(--rt-ink, #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: var(--rt-ink, #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; }
/* El nombre es la única celda que parte en dos renglones, y la única con tope
   de ancho. Con `nowrap` como el resto, la columna medía lo que su nombre más
   largo: un solo cliente con nombre y apellidos completos (o "Fulano —
   Inmobiliaria Tal") la estiraba para las demás filas, la tabla pasaba el
   ancho de la tarjeta y lo que quedaba afuera era justo "Derivado a". Ahora
   ese nombre baja a un segundo renglón en vez de empujar: no se corta ninguno
   (por eso no es un `…`) y la columna cede antes que cualquier otra cuando
   falta lugar, hasta el mínimo. `anywhere` es para el nombre de una sola
   palabra larguísima, que sin eso volvía a fijar el ancho. Lleva
   `.dash-tb__table` adelante para ganarle al `nowrap` de `td`. */
.dash-tb__table .dash-tb__name {
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
  min-width: 120px; max-width: 220px;
}
.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; }
/* El desplegable de "Elegir inmobiliaria" se abre hacia abajo, sobre las
   tarjetas que siguen (monitor, análisis, tester). Esas tarjetas vienen después
   en la página y cada una arma su propia capa (la animación de entrada, el
   hover), así que lo tapaban. La tarjeta y su encabezado van una capa arriba. */
.dash-cost-picker-card { position: relative; z-index: 6; }
.dash-cost-picker-head { position: relative; z-index: 2; }

.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 conversión) — 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); }

/* Métricas de Google Ads: ocho mosaicos chicos debajo de los cinco totales.
   Son secundarios a propósito — más chicos, sin borde de color ni ícono —
   para que la vista caiga primero en las tarjetas de arriba. La grilla se
   dibuja con el fondo del contenedor asomando 1 px entre celdas: así las
   líneas quedan parejas tenga 4 columnas o 2, sin bordes dobles. */
.dash-ads-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin-top: 14px; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: var(--rule);
}
.dash-ads-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px; background: #fff; }
.mirai-dark .dash-ads-stat { background: #15171c; }
.dash-ads-stat__label { font-size: 12.5px; color: var(--muted); }
.dash-ads-stat__value {
  font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.dash-ads-stat__hint { font-size: 11.5px; line-height: 1.35; color: var(--muted-soft); }

/* Tendencias y análisis: la tarjeta grande, a todo el ancho. El titular es una
   oración y se lee primero; las secciones van de a dos y cada una es un
   recuadro apenas marcado, para que se puedan recorrer por título sin leer
   todo de corrido. */
.dash-ads-analysis__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dash-ads-analysis__by { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dash-ads-analysis__again {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
  border: 1px solid var(--rule-strong); border-radius: 999px; background: transparent;
  font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink); cursor: pointer;
  transition: border-color 160ms ease, opacity 160ms ease;
}
.dash-ads-analysis__again:hover { border-color: var(--ink); }
.dash-ads-analysis__again:disabled { opacity: 0.5; cursor: default; }
.dash-ads-analysis__headline {
  margin-top: 14px; max-width: 76ch;
  font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink);
}
.dash-ads-analysis__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.dash-ads-analysis__item { padding: 14px 16px; border-radius: 12px; background: rgba(0,0,0,0.03); }
.mirai-dark .dash-ads-analysis__item { background: rgba(255,255,255,0.045); }
/* Con una cantidad impar de secciones, la última ocupa las dos columnas en vez
   de dejar un hueco al lado. */
.dash-ads-analysis__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* min-height = el alto de una etiqueta: así el título queda a la misma altura
   en las secciones que la llevan y en las que no. */
.dash-ads-analysis__item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.dash-ads-analysis__item-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.dash-ads-analysis__item-text { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.dash-ads-analysis__item-text strong { font-weight: 600; }
.dash-ads-analysis__text { margin-top: 14px; font-size: 14px; line-height: 1.7; white-space: pre-line; color: var(--ink); }

/* Las cuentas de ejemplo tienen tres tarjetas de novedades. Cuando la grilla
   baja a dos columnas, la tercera ocupa todo el ancho en vez de quedar sola a
   la izquierda con un hueco al lado. */
@media (max-width: 1500px) {
  .dash-ads-news > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .dash-ads-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-ads-analysis__grid { grid-template-columns: minmax(0, 1fr); }
}

@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; }
}


/* ============================================================
   RASTREO Y TASACIÓN — el color de cada modo, adentro
   Rastrear es verde y Tasar es bordó. Cada modo vive en un contenedor que
   redefine --rt-green, la variable que ya usaba todo lo celeste de la
   pantalla: botón principal, portales elegidos, foco de los campos,
   interruptores, pasos. --rt-ink es ese color cuando va como texto o ícono
   (en oscuro tiene que aclararse; el relleno no).
   ============================================================ */
.dash-rt-view { display: flex; flex-direction: column; gap: 22px; min-width: 0; --rt-card: #fff; }
/* display: flex le gana al [hidden] del navegador: sin esto, la vista
   "escondida" se dibujaba igual debajo de la otra. */
.dash-rt-view[hidden] { display: none; }
.dash-rt--rastrear { --rt-green: #15803D; --rt-green-soft: rgba(21,128,61,0.10); --rt-ink: #15803D; }
.dash-rt--tasar { --rt-green: #7D1F3A; --rt-green-soft: rgba(125,31,58,0.09); --rt-ink: #7D1F3A; }
.mirai-dark .dash-rt-view { --rt-card: #15171c; }
.mirai-dark .dash-rt--rastrear { --rt-green: #1F9D55; --rt-green-soft: rgba(34,197,94,0.16); --rt-ink: #5ad18a; }
.mirai-dark .dash-rt--tasar { --rt-green: #B8325A; --rt-green-soft: rgba(214,69,110,0.18); --rt-ink: #ee8fa8; }

/* El ítem del menú acompaña al modo (la clase la pone RastreoPage en .dboard):
   celeste mientras se elige, verde en Rastrear, bordó en Tasar. Se repite con
   .mirai-dark porque la regla celeste del tema oscuro pesa lo mismo. */
.dboard--rt-rastrear .dash-sb__item.is-active.is-rastreo,
.mirai-dark .dboard--rt-rastrear .dash-sb__item.is-active.is-rastreo { background: #15803D; color: #fff; }
.dboard--rt-rastrear .dash-sb__item.is-active.is-rastreo:hover,
.mirai-dark .dboard--rt-rastrear .dash-sb__item.is-active.is-rastreo:hover { background: #166534; }
.dboard--rt-tasar .dash-sb__item.is-active.is-rastreo,
.mirai-dark .dboard--rt-tasar .dash-sb__item.is-active.is-rastreo { background: #7D1F3A; color: #fff; }
.dboard--rt-tasar .dash-sb__item.is-active.is-rastreo:hover,
.mirai-dark .dboard--rt-tasar .dash-sb__item.is-active.is-rastreo:hover { background: #691930; }

/* ---- Un poco más de color en los formularios ----
   El color va en lo que rodea a los campos —el sello del título, el rótulo
   de cada grupo, un lavado arriba de la tarjeta, los chips— y no en los
   campos, que tienen que seguir leyéndose como campos. */
.dash-rt-view .dash-rt__formcard { background: linear-gradient(180deg, var(--rt-green-soft) 0, rgba(255,255,255,0) 170px), var(--rt-card); gap: 22px; }
.dash-rt__cardhead { display: flex; align-items: center; gap: 12px; }
.dash-rt__cardhead p { margin-top: 2px; font-size: 13px; color: var(--muted); }
.dash-rt__seal { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--rt-green); color: #fff; box-shadow: 0 8px 18px -10px var(--rt-green); }
.dash-rt__summary .dash-rt__seal, .dash-rt__emma .dash-rt__seal { width: 32px; height: 32px; border-radius: 10px; background: var(--rt-green-soft); color: var(--rt-ink, var(--rt-green)); box-shadow: none; }
.dash-rt__group { display: flex; flex-direction: column; gap: 14px; }
.dash-rt__grouphead { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--rt-ink, var(--rt-green)); }
.dash-rt__grouphead::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.dash-rt-view .dash-rt__chip { background: var(--rt-green-soft); color: var(--rt-ink); font-weight: 500; }
.dash-rt-view .dash-rt__chip button { color: var(--rt-ink); }
.dash-rt-view .dash-rt__summary-ico { color: var(--rt-ink); }
.dash-rt-view .dash-rt__cta { box-shadow: 0 14px 26px -16px var(--rt-green); }
.dash-rt-view .dash-rt__source.is-on .dash-rt__source-name { font-weight: 600; }

/* ============================================================
   RASTREO Y TASACIÓN — elegir qué hacer al entrar
   ============================================================ */
.dash-rt__picker { display: flex; flex-direction: column; gap: 18px; }
.dash-rt__modes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dash-rt__mode {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  min-height: 236px; padding: 26px; border-radius: 18px; border: 1px solid var(--rule); background: #fff;
  cursor: pointer; text-align: left; font-family: var(--sans); color: var(--ink);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
/* El color de cada modo: verde para rastrear, bordó para tasar. --rt-mode es
   el relleno (lleva texto blanco encima); --rt-mode-ink es ese color cuando
   va como texto o ícono sobre la tarjeta, que en oscuro tiene que aclararse. */
.dash-rt__mode.is-rastrear, .dash-rt__seg-btn.is-rastrear { --rt-mode: #15803D; --rt-mode-ink: #15803D; --rt-mode-soft: rgba(21,128,61,0.10); --rt-mode-glow: rgba(21,128,61,0.55); }
.dash-rt__mode.is-tasar, .dash-rt__seg-btn.is-tasar { --rt-mode: #7D1F3A; --rt-mode-ink: #7D1F3A; --rt-mode-soft: rgba(125,31,58,0.09); --rt-mode-glow: rgba(125,31,58,0.55); }
.mirai-dark .dash-rt__mode.is-rastrear { --rt-mode-ink: #5ad18a; --rt-mode-soft: rgba(34,197,94,0.16); }
.mirai-dark .dash-rt__mode.is-tasar { --rt-mode-ink: #ee8fa8; --rt-mode-soft: rgba(214,69,110,0.20); }
.dash-rt__mode:hover { border-color: var(--rt-mode-ink); box-shadow: 0 18px 40px -28px var(--rt-mode-glow); transform: translateY(-2px); }
.dash-rt__mode-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 15px; background: var(--rt-mode-soft); color: var(--rt-mode-ink); }
.dash-rt__mode-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
.dash-rt__mode-desc { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 44ch; }
.dash-rt__mode-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--rt-mode-ink); }
.dash-rt__mode-go svg { transition: transform 200ms ease; }
.dash-rt__mode:hover .dash-rt__mode-go svg { transform: translateX(3px); }
.dash-rt__portals { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 14px 18px; border-radius: 14px; border: 1px dashed var(--rule-strong); font-size: 13px; color: var(--muted); }
.dash-rt__portals-item { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }

/* Rastrear | Tasar, en el encabezado una vez que ya se eligió */
.dash-rt__seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0,0,0,0.06); }
.dash-rt__seg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: none; background: transparent; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted-strong); cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.dash-rt__seg-btn.is-on { background: var(--rt-mode); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.18); }

.mirai-dark .dash-rt__mode { background: #15171c; }
.mirai-dark .dash-rt__seg { background: rgba(255,255,255,0.08); }
@media (max-width: 760px) { .dash-rt__modes { grid-template-columns: 1fr; } .dash-rt__mode { min-height: 0; } }

/* ============================================================
   TASACIÓN — el informe en pantalla (prefijo tz-)
   Bordó, el color del modo Tasar. En los gráficos el bordó es "suma" y el
   azul "resta" (par validado para daltonismo, en claro y en oscuro); los
   números van siempre en tinta, nunca en el color de la serie.
   ============================================================ */
.tz-report {
  display: flex; flex-direction: column; gap: 18px;
  --tz-accent: #8E2443; --tz-accent-ink: #7D1F3A; --tz-down: #2B7CB0;
  --tz-wash: rgba(125,31,58,0.11); --tz-surface: #fff;
}
.mirai-dark .tz-report { --tz-accent: #D6456E; --tz-accent-ink: #ee8fa8; --tz-down: #3D8FC2; --tz-wash: rgba(214,69,110,0.2); --tz-surface: #15171c; }
.tz-hint { font-size: 12px; color: var(--muted-soft); line-height: 1.4; }
.tz-link { background: transparent; border: none; padding: 0; margin-left: 8px; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--tz-accent-ink, #1565C0); text-decoration: underline; cursor: pointer; }
.tz-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.tz-sub--inline { margin: 0; }
.tz-empty { font-size: 13.5px; color: var(--muted); padding: 16px 0 4px; }
.tz-tag { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,0.07); color: var(--muted-strong); margin-left: 8px; white-space: nowrap; }
.tz-tag--demo { margin-left: 0; }
.tz-tag--part { background: rgba(232,115,12,0.15); color: #9a4a05; }
.mirai-dark .tz-tag { background: rgba(255,255,255,0.1); }
.mirai-dark .tz-tag--part { background: rgba(232,115,12,0.2); color: #f5b47a; }

/* Estado: siempre ícono + texto, nunca el color solo */
.tz-status { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tz-status--alta { background: rgba(22,163,74,0.13); color: #166534; }
.tz-status--media, .tz-status--warn { background: rgba(217,119,6,0.15); color: #92400e; }
.tz-status--baja { background: rgba(220,38,38,0.12); color: #991b1b; }
.mirai-dark .tz-status--alta { color: #6ee7a0; }
.mirai-dark .tz-status--media, .mirai-dark .tz-status--warn { color: #fbbf6b; }
.mirai-dark .tz-status--baja { color: #fca5a5; }

/* ---- Encabezado del informe ---- */
/* z-index propio: .dash-fade transforma cada hijo, y sin esto el menú de
   "Descargar PDF" quedaba debajo de la tarjeta siguiente. */
.tz-top { position: relative; z-index: 3; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.tz-top__media { width: 96px; height: 96px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #e9eaec, #f4f4f5); display: flex; align-items: center; justify-content: center; color: var(--muted-soft); }
.tz-top__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tz-top__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tz-top__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); }
.tz-top__title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.tz-top__sub { font-size: 13.5px; color: var(--muted); }
.tz-top__specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tz-top__specs span { padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.05); font-size: 12px; color: var(--muted-strong); }
.mirai-dark .tz-top__specs span { background: rgba(255,255,255,0.08); }
.tz-top__actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.dash-pill.tz-pill--solid { background: #000; color: #fff; border-color: #000; }
.dash-pill.tz-pill--solid:disabled { opacity: 0.5; cursor: default; }
.mirai-dark .dash-pill.tz-pill--solid { background: #fff; color: #000; border-color: #fff; }

/* ---- Valor ---- */
.tz-hero { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); gap: 26px 36px; align-items: center; }
.tz-hero__value { display: flex; flex-direction: column; gap: 8px; }
.tz-hero__label { font-size: 13px; color: var(--muted); }
.tz-hero__num { font-size: clamp(34px, 4vw, 48px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.tz-hero__note { font-size: 13px; color: var(--muted); }
.tz-hero__tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 20px; border-top: 1px solid var(--rule); }
.tz-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tz-tile span { font-size: 12.5px; color: var(--muted); }
.tz-tile b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.tz-tile i { font-style: normal; font-size: 11.5px; color: var(--muted-soft); line-height: 1.35; }

/* ---- Rango ---- */
.tz-range { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tz-range__plot { position: relative; height: 34px; }
.tz-range__track { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule-strong); }
.tz-range__band { position: absolute; top: 50%; height: 12px; margin-top: -6px; border-radius: 4px; background: var(--tz-wash); }
.tz-range__mark { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; box-sizing: border-box; box-shadow: 0 0 0 2px var(--tz-surface); }
.tz-range__mark--val { background: var(--tz-accent); }
/* Hueca además de otro color: las dos marcas se distinguen también por forma. */
.tz-range__mark--sug { background: var(--tz-surface); border: 2.5px solid var(--ink); }
.tz-range__ends { position: relative; height: 16px; font-size: 12px; color: var(--muted-strong); font-variant-numeric: tabular-nums; }
.tz-range__ends span { position: absolute; top: 0; white-space: nowrap; }
.tz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.tz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tz-legend i { display: inline-block; flex: none; box-sizing: border-box; }
.tz-legend__band { width: 16px; height: 9px; border-radius: 3px; background: var(--tz-wash); }
.tz-legend__val, .tz-legend__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tz-accent); }
.tz-legend__dot.is-off { background: transparent; border: 1.5px solid var(--muted-soft); }
.tz-legend__sug { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); }
.tz-legend__line { width: 2px; height: 12px; background: var(--ink); }
.tz-legend__up { width: 14px; height: 8px; border-radius: 0 3px 3px 0; background: var(--tz-accent); }
.tz-legend__down { width: 14px; height: 8px; border-radius: 3px 0 0 3px; background: var(--tz-down); }

/* ---- USD/m² por comparable ---- */
.tz-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tz-dots { margin-top: 14px; }
.tz-dots svg { display: block; max-width: 100%; }
.tz-dots text { font-family: var(--sans); }
.tz-dots__band { fill: var(--tz-wash); }
.tz-dots__grid { stroke: var(--rule); stroke-width: 1; }
.tz-dots__tick { fill: var(--muted); font-size: 11px; }
.tz-dots__mean { stroke: var(--ink); stroke-width: 2; }
.tz-dots__meanlabel { fill: var(--ink); font-size: 11.5px; font-weight: 600; }
.tz-dots__label { fill: var(--muted-strong); font-size: 12px; }
.tz-dots__value { fill: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tz-dots__dot { fill: var(--tz-accent); stroke: var(--tz-surface); stroke-width: 2; }
.tz-dots .is-off .tz-dots__dot { fill: var(--tz-surface); stroke: var(--muted-soft); stroke-width: 1.5; }
.tz-dots .is-off text { fill: var(--muted-soft); font-weight: 400; }

/* ---- Qué suma y qué resta ---- */
.tz-factors { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.tz-factors__row { display: grid; grid-template-columns: minmax(104px, 160px) minmax(80px, 1fr) 54px; gap: 12px; align-items: center; }
.tz-factors__label { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tz-factors__label b { font-size: 13px; font-weight: 600; }
.tz-factors__label i { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-factors__track { position: relative; height: 12px; background: linear-gradient(var(--rule-strong), var(--rule-strong)) center / 1px 100% no-repeat; }
.tz-factors__track i { position: absolute; top: 1px; bottom: 1px; min-width: 3px; }
.tz-factors__track i.is-up { left: 50%; background: var(--tz-accent); border-radius: 0 4px 4px 0; }
.tz-factors__track i.is-down { right: 50%; background: var(--tz-down); border-radius: 4px 0 0 4px; }
.tz-factors__value { text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tz-factors__total { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--muted-strong); }
.tz-factors__total b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Publicaciones existentes ---- */
.tz-pubs__lead { margin-top: 12px; font-size: 13.5px; line-height: 1.7; color: var(--muted-strong); }
.tz-pubs__lead .tz-status { margin-right: 10px; vertical-align: middle; }
.tz-pubs { display: flex; flex-direction: column; margin-top: 12px; }
.tz-pub { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); }
.tz-pub__media { width: 112px; height: 84px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #e9eaec, #f4f4f5); }
.tz-pub__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tz-pub__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tz-pub__portal { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted-strong); }
.tz-pub__title { font-size: 14.5px; font-weight: 600; }
.tz-pub__by { font-size: 13px; color: var(--muted-strong); }
.tz-pub__by b { color: var(--ink); font-weight: 600; }
.tz-pub__meta, .tz-pub__match { font-size: 12.5px; color: var(--muted); }
.tz-pub__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tz-pub__price { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.tz-pub__m2 { font-size: 12px; color: var(--muted); }
.tz-pub__side .dash-rt__btn { flex: none; margin-top: 6px; padding: 8px 12px; }

/* ---- Comparables ---- */
.tz-table { min-width: 880px; }
.tz-table tbody tr { cursor: default; }
.tz-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.tz-table__n { color: var(--muted); }
.tz-table__pub { display: inline-flex; align-items: center; gap: 10px; }
.tz-table__pub > span { display: flex; flex-direction: column; line-height: 1.3; }
.tz-table__pub b { font-weight: 600; }
.tz-table__pub i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.tz-table tr.is-off td { color: var(--muted-soft); }
.tz-table tr.is-off b { font-weight: 500; }
.tz-table tr.is-off .dash-rt__logo { opacity: 0.4; }
.dash-switch.tz-switch { transform: scale(0.8); transform-origin: left center; }

/* ---- Ajustes y descarga ---- */
.tz-adjust { display: flex; flex-direction: column; gap: 14px; }
.tz-adjust__grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.tz-download__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.tz-doc { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--rule-strong); background: var(--tz-surface); cursor: pointer; text-align: left; font-family: var(--sans); color: var(--ink); transition: border-color 160ms ease, transform 160ms ease; }
.tz-doc:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); }
.tz-doc:disabled { opacity: 0.5; cursor: default; }
.tz-doc__ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--rt-green-soft); color: var(--tz-accent-ink); }
.tz-doc__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tz-doc__txt b { font-size: 14.5px; font-weight: 600; }
.tz-doc__txt i { font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

@media (max-width: 1100px) {
  .tz-hero, .tz-cols { grid-template-columns: minmax(0, 1fr); }
  .tz-hero__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tz-top { grid-template-columns: 72px minmax(0, 1fr); }
  .tz-top__media { width: 72px; height: 72px; }
  .tz-top__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .tz-pub { grid-template-columns: 84px minmax(0, 1fr); }
  .tz-pub__media { width: 84px; height: 64px; }
  .tz-pub__side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .tz-adjust__grid, .tz-download__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   TASACIÓN — los PDF (prefijo tzp-)
   TzPrintDoc va por portal a <body> y solo existe para imprimirse: en
   pantalla no se ve, y al imprimir es lo único que se ve. Colores fijos y
   claros a propósito: un PDF no hereda el modo oscuro del panel.
   ============================================================ */
.tzp { display: none; }
@media print {
  @page { margin: 14mm; }
  body.tz-printing { background: #fff !important; }
  body.tz-printing > *:not(.tzp) { display: none !important; }
  body.tz-printing > .tzp { display: block; }
}
.tzp { font-family: var(--sans); font-size: 10.5pt; line-height: 1.5; color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.tzp p { margin: 0; }
.tzp h1, .tzp h2, .tzp h3 { color: #111; margin: 0; }
.tzp h2 { font-size: 13pt; font-weight: 600; letter-spacing: -0.01em; }
.tzp h3 { font-size: 11.5pt; font-weight: 600; margin-bottom: 6pt; }
.tzp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12pt; padding-bottom: 8pt; margin-bottom: 18pt; border-bottom: 1.5pt solid #111; font-size: 9pt; }
.tzp-head__agency { font-size: 11pt; font-weight: 700; letter-spacing: -0.01em; }
.tzp-head__kind { color: #555; }
.tzp-title { font-size: 24pt; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.tzp p.tzp-lead { margin: 6pt 0 16pt; font-size: 11.5pt; color: #444; }
.tzp-block { margin-top: 16pt; }
.tzp-avoid { break-inside: avoid; }
.tzp-prop { display: flex; align-items: center; gap: 14pt; padding: 10pt; border: 0.75pt solid #ddd; border-radius: 10pt; break-inside: avoid; }
.tzp-prop__img { width: 120pt; height: 86pt; object-fit: cover; border-radius: 7pt; flex: none; }
.tzp-prop p { color: #555; }
.tzp-chips { display: flex; flex-wrap: wrap; gap: 4pt; margin-top: 6pt; }
.tzp-chips span { padding: 2pt 7pt; border-radius: 99pt; background: #f0f1f2; font-size: 8.5pt; }
.tzp-value { margin-top: 14pt; padding: 16pt 18pt; border-radius: 12pt; background: #f9eef2; break-inside: avoid; }
.tzp-value__label { display: block; font-size: 9.5pt; color: #444; }
.tzp-value__num { display: block; margin: 2pt 0 10pt; font-size: 32pt; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
.tzp p.tzp-value__sug { margin-top: 10pt; }
.tzp-range__plot { position: relative; height: 16pt; }
.tzp-range__track { position: absolute; left: 0; right: 0; top: 50%; height: 0.75pt; background: #d3b3bd; }
.tzp-range__band { position: absolute; top: 50%; height: 8pt; margin-top: -4pt; border-radius: 3pt; background: rgba(125,31,58,0.24); }
.tzp-range__val { position: absolute; top: 50%; width: 11pt; height: 11pt; margin: -5.5pt 0 0 -5.5pt; border-radius: 50%; background: #7D1F3A; box-shadow: 0 0 0 1.5pt #f9eef2; }
.tzp-range__ends { display: flex; justify-content: space-between; margin-top: 2pt; font-size: 9pt; color: #444; }
.tzp-steps { margin: 0; padding-left: 16pt; list-style: decimal; }
.tzp-steps li { margin-bottom: 4pt; }
.tzp-comps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10pt; }
.tzp-comp { display: flex; flex-direction: column; gap: 1pt; font-size: 9pt; color: #444; }
.tzp-comp img { width: 100%; height: 70pt; object-fit: cover; border-radius: 7pt; margin-bottom: 4pt; }
.tzp-comp b { font-size: 11.5pt; color: #111; }
.tzp p.tzp-note { margin-top: 6pt; font-size: 8.5pt; color: #666; }
.tzp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18pt; margin-top: 16pt; }
.tzp-list { margin: 0; padding: 0; list-style: none; }
.tzp-list li { position: relative; padding: 3pt 0 3pt 14pt; }
.tzp-list li::before { content: "+"; position: absolute; left: 0; font-weight: 700; color: #7D1F3A; }
.tzp-list--down li::before { content: "−"; color: #2B6A94; }
.tzp-list li.is-none { padding-left: 0; color: #555; }
.tzp-list li.is-none::before { content: none; }
.tzp-list i { font-style: normal; color: #666; }
.tzp p.tzp-notes { padding: 8pt 10pt; border-radius: 7pt; background: #f6f6f7; white-space: pre-wrap; }
.tzp p.tzp-sign { margin-top: 8pt; }
.tzp p.tzp-legal { margin-top: 18pt; font-size: 8pt; color: #777; }
.tzp-foot { margin-top: 10pt; padding-top: 6pt; border-top: 0.5pt solid #ddd; font-size: 7.5pt; color: #888; }
.tzp-result { display: grid; grid-template-columns: repeat(3, 1fr); border: 0.75pt solid #ccc; border-radius: 8pt; overflow: hidden; break-inside: avoid; }
.tzp-result div { padding: 8pt 10pt; border-right: 0.5pt solid #ddd; border-bottom: 0.5pt solid #ddd; }
.tzp-result div:nth-child(3n) { border-right: none; }
.tzp-result div:nth-child(n+4) { border-bottom: none; }
.tzp-result span { display: block; font-size: 8pt; color: #666; }
.tzp-result b { font-size: 12pt; font-weight: 600; }
.tzp-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18pt; margin: 0 0 8pt; }
.tzp-ficha div { display: flex; justify-content: space-between; gap: 10pt; padding: 3pt 0; border-bottom: 0.5pt solid #e3e3e3; }
.tzp-ficha dt { color: #666; }
.tzp-ficha dd { margin: 0; text-align: right; font-weight: 500; }
.tzp-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.tzp-table th { padding: 4pt 6pt 4pt 0; text-align: left; font-weight: 600; color: #555; border-bottom: 0.75pt solid #999; }
.tzp-table td { padding: 4pt 6pt 4pt 0; vertical-align: top; border-bottom: 0.5pt solid #e3e3e3; }
.tzp-table .is-num, .tzp-table .is-nowrap { white-space: nowrap; }
.tzp-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.tzp-table tr.is-off td { color: #999; text-decoration: line-through; }
.tzp-lines span { display: block; height: 20pt; border-bottom: 0.5pt solid #bbb; }

/* ============================================================
   AGENTE — un chat con la mascota (prefijo agt-)
   Verde de marca. Los tokens van en .dboard y no en .agt porque la guía de
   conexión es un Modal, que se dibuja fuera de la columna del chat.
   ============================================================ */
.dboard { --agt-green: #154D32; --agt-green-soft: rgba(21,77,50,0.09); --agt-bar: #1D6541; --agt-surface: #fff; --agt-soft: rgba(0,0,0,0.05); }
.mirai-dark .dboard { --agt-green: #2A8054; --agt-green-soft: rgba(70,160,111,0.18); --agt-bar: #46A06F; --agt-surface: #15171c; --agt-soft: rgba(255,255,255,0.07); }
.dash-sb__item.is-active.is-agente,
.mirai-dark .dash-sb__item.is-active.is-agente { background: #154D32; color: #fff; }
.dash-sb__item.is-active.is-agente:hover { background: #1D6541; }

.agt { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(228px, 268px) minmax(0, 1fr); gap: 14px; }

/* ---- Columna de chats ---- */
.agt-side { padding: 14px 12px; gap: 10px; }
.agt-new { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: none; border-radius: 12px; background: var(--agt-green); color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 160ms ease; }
.agt-new:hover { opacity: 0.9; }
.agt-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 11px; background: var(--agt-soft); color: var(--muted); }
.agt-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--sans); font-size: 13px; color: var(--ink); }
.agt-side__list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.agt-side__group { display: flex; flex-direction: column; gap: 2px; }
.agt-side__label { padding: 4px 10px; font-size: 11.5px; color: var(--muted-soft); }
.agt-side__empty { padding: 10px; font-size: 13px; color: var(--muted); }
.agt-item { display: flex; align-items: center; border-radius: 10px; }
.agt-item:hover { background: var(--agt-soft); }
.agt-item.is-active { background: var(--agt-green-soft); }
.agt-item__main { flex: 1; min-width: 0; padding: 9px 10px; border: none; background: transparent; cursor: pointer; text-align: left; font-family: var(--sans); font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agt-item.is-active .agt-item__main { font-weight: 600; }
.agt-item__del { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 4px; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; }
.agt-item:hover .agt-item__del, .agt-item__del:focus-visible { opacity: 1; }
.agt-item__del:hover { background: rgba(220,38,38,0.12); color: #b42318; }
@media (hover: none) { .agt-item__del { opacity: 1; } }

/* ---- Columna del chat ---- */
.agt-chat { position: relative; }
.agt-chat__head { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 18px; border-bottom: 1px solid var(--rule); }
.dash-iconbtn.agt-chat__hist, .dash-iconbtn.agt-chat__new { display: none; }
.agt-chat__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agt-chat__id strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agt-chat__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agt-chat__status i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }
.agt-chat__status.is-busy i { animation: agtPulse 1s ease-in-out infinite; }
.agt-chip { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--agt-soft); font-size: 11px; font-weight: 600; color: var(--muted-strong); white-space: nowrap; }
@keyframes agtPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

/* El hueco donde se apoya la mascota: es lo que recibe el mouse. */
.agt-slot { flex: none; border-radius: 34%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.agt-dock { width: 38px; height: 38px; }
.agt-mascot { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; will-change: transform; }
.agt-mascot.is-placed { transition: transform 620ms cubic-bezier(.2,.8,.2,1), width 620ms cubic-bezier(.2,.8,.2,1), height 620ms cubic-bezier(.2,.8,.2,1); }
.agt-mascot canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 400ms ease; }
.agt-mascot.is-3d canvas { opacity: 1; }
.agt-mascot__flat { position: absolute; left: 50%; top: 50%; width: 52.6%; height: 52.6%; transform: translate(-50%, -50%); transition: opacity 300ms ease; }
.agt-mascot.is-3d .agt-mascot__flat { opacity: 0; }

/* La mascota en CSS (avatar de cada respuesta y respaldo sin WebGL) */
.agt-face {
  position: relative; display: inline-block; flex: none; width: 28px; height: 28px; border-radius: 34%;
  background:
    radial-gradient(circle at 16% 12%, rgba(122,245,210,0.95), transparent 58%),
    radial-gradient(circle at 98% 28%, rgba(54,179,217,0.8), transparent 46%),
    radial-gradient(circle at 74% 102%, rgba(47,191,128,0.85), transparent 52%),
    #13744a;
}
.agt-face::before, .agt-face::after { content: ""; position: absolute; top: 31%; width: 11%; height: 30%; border-radius: 999px; background: #fff; animation: agtBlink 4.6s infinite; }
.agt-face::before { left: 30%; }
.agt-face::after { right: 30%; }
@keyframes agtBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }

/* ---- Conversación ---- */
.agt-thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.agt-thread.is-empty { display: flex; }
.agt-thread__inner { max-width: 800px; margin: 0 auto; padding: 24px 22px 10px; display: flex; flex-direction: column; gap: 24px; }
.agt-hero { margin: auto; padding: 24px; max-width: 660px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.agt-hero__slot { width: 132px; height: 132px; margin-bottom: 34px; }
.agt-hero__title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.agt-hero__sub { margin-top: 8px; font-size: 15px; color: var(--muted); }
.agt-hero__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 26px; }
.agt-chipbtn { padding: 8px 13px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--agt-surface); font-family: var(--sans); font-size: 13px; color: var(--ink); cursor: pointer; text-align: left; transition: border-color 160ms ease, background 160ms ease; }
.agt-chipbtn:hover { border-color: var(--agt-green); background: var(--agt-green-soft); }
.agt-chipbtn--lg { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-radius: 14px; line-height: 1.35; }
.agt-chipbtn--lg svg { flex: none; color: var(--muted); }

.agt-msg { display: flex; gap: 12px; }
.agt-msg.is-user { flex-direction: column; align-items: flex-end; gap: 6px; }
.agt-msg__bubble { max-width: min(78%, 560px); padding: 10px 15px; border-radius: 18px 18px 6px 18px; background: #f1f1f2; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.agt-msg__atts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 78%; }
.agt-msg__avatar { margin-top: 1px; }
.agt-msg__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.6; }
.agt-msg__body > * { max-width: 100%; }
.agt-p strong, .agt-ul strong { font-weight: 600; }
.agt-ul { margin: 0; padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 6px; }
.agt-source { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-soft); }
.agt-msg__actions { display: flex; gap: 6px; }
.agt-msg__act { display: inline-flex; align-items: center; gap: 6px; margin-left: -8px; padding: 4px 8px; border: none; border-radius: 8px; background: transparent; font-family: var(--sans); font-size: 12px; color: var(--muted); cursor: pointer; }
.agt-msg__act:hover { background: var(--agt-soft); color: var(--ink); }
.agt-followups { display: flex; flex-wrap: wrap; gap: 8px; }
.agt-typing { display: inline-flex; gap: 5px; padding: 9px 0; }
.agt-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-soft); animation: agtDot 1.1s ease-in-out infinite; }
.agt-typing i:nth-child(2) { animation-delay: 150ms; }
.agt-typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes agtDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Barras de una respuesta: una sola serie, así que no hay leyenda — el
   párrafo de arriba ya dice qué se está contando. */
.agt-bars { width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; }
.agt-bars__row { display: grid; grid-template-columns: minmax(84px, 190px) minmax(60px, 1fr) 36px; align-items: center; gap: 12px; font-size: 13px; }
.agt-bars__label { color: var(--muted-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agt-bars__track { height: 10px; }
.agt-bars__track i { display: block; height: 100%; min-width: 3px; border-radius: 0 4px 4px 0; background: var(--agt-bar); }
.agt-bars__value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.agt-tablewrap { width: 100%; overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px; }
.agt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.agt-table th { padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.agt-table td { padding: 10px 14px; border-top: 1px solid var(--rule); white-space: nowrap; }
.agt-chats { width: 100%; max-width: 580px; display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.agt-chats__item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: none; border-top: 1px solid var(--rule); background: transparent; cursor: pointer; text-align: left; font-family: var(--sans); color: var(--ink); }
.agt-chats__item:first-child { border-top: none; }
.agt-chats__item:hover { background: var(--agt-soft); }
.agt-chats__ico { display: inline-flex; flex: none; }
.agt-chats__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agt-chats__name { font-size: 13.5px; font-weight: 600; }
.agt-chats__name em { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--agt-soft); font-style: normal; font-size: 11px; font-weight: 500; color: var(--muted-strong); }
.agt-chats__last { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agt-chats__when { flex: none; font-size: 12px; color: var(--muted-soft); }

/* ---- Adjuntos ---- */
.agt-att { position: relative; display: inline-flex; align-items: center; gap: 9px; max-width: 240px; padding: 7px 12px 7px 8px; border: 1px solid var(--rule); border-radius: 12px; background: var(--agt-surface); }
.agt-att.is-image { width: 64px; height: 64px; padding: 0; border: none; }
.agt-att.is-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.agt-msg__atts .agt-att.is-image { width: 150px; height: 150px; }
.agt-att__ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--agt-green-soft); color: var(--agt-bar); }
.agt-att__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.agt-att__txt b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agt-att__txt i { font-style: normal; font-size: 11px; color: var(--muted); }
.agt-att__x { position: absolute; top: -6px; right: -6px; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border: none; border-radius: 50%; background: #111; color: #fff; cursor: pointer; }

/* ---- Cuadro para escribir + botón de conexión ---- */
.agt-compose { padding: 10px 18px 12px; }
.agt-compose__row { display: flex; align-items: flex-end; gap: 10px; max-width: 980px; margin: 0 auto; }
.agt-compose__hint { margin-top: 8px; text-align: center; font-size: 11.5px; color: var(--muted-soft); }
.agt-input { flex: 1; min-width: 0; padding: 6px; border: 1px solid var(--rule-strong); border-radius: 26px; background: var(--agt-surface); transition: border-color 160ms ease, box-shadow 160ms ease; }
.agt-input:focus-within, .agt-input.is-recording { border-color: var(--agt-green); box-shadow: 0 0 0 3px var(--agt-green-soft); }
.agt-input__atts { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 8px 10px; }
.agt-input__bar { display: flex; align-items: flex-end; gap: 4px; }
.agt-input__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: var(--muted-strong); cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.agt-input__icon:hover { background: var(--agt-soft); color: var(--ink); }
.agt-input__text { flex: 1; min-width: 0; max-height: 168px; padding: 9px 6px; border: none; outline: none; resize: none; background: transparent; font-family: var(--sans); font-size: 15px; line-height: 1.45; color: var(--ink); }
.agt-input__text::placeholder { color: var(--muted-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agt-input__send { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--agt-green); color: #fff; cursor: pointer; transition: opacity 160ms ease, background 160ms ease; }
.agt-input__send:disabled { background: var(--agt-soft); color: var(--muted-soft); cursor: default; }
.agt-input__send.is-stop { background: var(--ink); color: var(--agt-surface); }
.agt-rec { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.agt-rec__btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--agt-soft); color: var(--ink); cursor: pointer; }
.agt-rec__btn--ok { background: var(--agt-green); color: #fff; }
.agt-rec__wave { display: inline-flex; align-items: center; gap: 3px; flex: none; height: 24px; }
.agt-rec__wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--agt-bar); transform: scaleY(0.2); animation: agtWave 900ms ease-in-out infinite; }
@keyframes agtWave { 0%, 100% { transform: scaleY(0.2); } 50% { transform: scaleY(1); } }
.agt-rec__live { flex: 1; min-width: 0; font-size: 14px; color: var(--muted-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agt-rec__time { flex: none; font-family: var(--mono); font-size: 12px; color: var(--muted); }

.agt-connect { display: flex; align-items: center; gap: 10px; flex: none; height: 54px; padding: 0 16px 0 11px; border: 1px solid var(--rule-strong); border-radius: 18px; background: var(--agt-surface); cursor: pointer; text-align: left; font-family: var(--sans); color: var(--ink); transition: border-color 160ms ease; }
.agt-connect:hover { border-color: var(--ink); }
/* Conectado: se achica a los logos, en verde, cada uno con su punto. */
.agt-connect.is-on { padding: 0 12px; border-color: #22C55E; background: rgba(34,197,94,0.09); }
.agt-connect.is-on:hover { border-color: #16A34A; }
.agt-connect__logos { display: inline-flex; }
.agt-connect__logos span { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.14); background: #fff; color: #0d0d0d; }
.agt-connect__logos span + span { margin-left: -9px; }
.agt-connect.is-on .agt-connect__logos span + span { margin-left: 8px; }
.agt-connect__dot { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: #22C55E; border: 2px solid #fff; box-sizing: border-box; }
.agt-connect__txt { display: flex; flex-direction: column; line-height: 1.25; }
.agt-connect__txt b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.agt-connect__txt em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.agt-drop { position: absolute; inset: 10px; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 10px; border: 2px dashed var(--agt-green); border-radius: 14px; background: rgba(255,255,255,0.9); font-weight: 600; color: var(--agt-green); pointer-events: none; }

/* ---- Guía para conectar Claude / ChatGPT ---- */
.agt-mcp { display: flex; flex-direction: column; gap: 16px; }
.agt-mcp p { margin: 0; }
.agt-mcp__intro { font-size: 13.5px; line-height: 1.6; color: var(--muted-strong); }
.agt-mcp__intro .agt-chip { margin-left: 8px; }
.agt-mcp__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--agt-soft); }
.agt-mcp__tab { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: none; border-radius: 11px; background: transparent; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--muted-strong); cursor: pointer; }
.agt-mcp__tab.is-on { background: #fff; color: #000; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.agt-mcp__dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; }
.agt-mcp__progress { display: flex; align-items: center; gap: 10px; }
.agt-mcp__progress span { flex: 1; height: 6px; border-radius: 999px; background: var(--agt-soft); overflow: hidden; }
.agt-mcp__progress i { display: block; height: 100%; border-radius: 999px; background: var(--agt-bar); transition: width 400ms cubic-bezier(.2,.7,.2,1); }
.agt-mcp__progress em { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.agt-mcp__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.agt-mcp__step { border: 1px solid var(--rule); border-radius: 14px; }
.agt-mcp__step.is-open { border-color: var(--rule-strong); }
.agt-mcp__head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: none; background: transparent; cursor: pointer; text-align: left; font-family: var(--sans); color: var(--ink); }
.agt-mcp__n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--rule-strong); font-size: 12.5px; font-weight: 600; color: var(--muted); transition: all 200ms ease; }
.agt-mcp__step.is-open .agt-mcp__n { border-color: var(--agt-bar); color: var(--agt-bar); }
.agt-mcp__step.is-done .agt-mcp__n { background: var(--agt-green); border-color: var(--agt-green); color: #fff; }
.agt-mcp__title { font-size: 14px; font-weight: 600; }
.agt-mcp__body { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 16px 52px; font-size: 13.5px; line-height: 1.55; color: var(--muted-strong); }
.agt-mcp__url { display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 14px; border-radius: 11px; background: var(--agt-soft); }
.agt-mcp__url code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agt-mcp__btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--rule-strong); border-radius: 10px; background: #fff; font-family: var(--sans); font-size: 13px; font-weight: 600; color: #000; cursor: pointer; white-space: nowrap; }
.agt-mcp__btn--solid { background: #000; border-color: #000; color: #fff; }
.agt-mcp__btn:disabled { opacity: 0.7; cursor: default; }
.agt-mcp__row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.agt-mcp__link { padding: 0; border: none; background: transparent; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: underline; cursor: pointer; }
.agt-mcp__path { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.agt-mcp__path span { padding: 5px 10px; border-radius: 8px; background: var(--agt-soft); font-size: 12.5px; font-weight: 500; color: var(--ink); }
.agt-mcp__path svg { color: var(--muted-soft); }
.agt-mcp__form { margin: 0; border: 1px solid var(--rule); border-radius: 11px; }
.agt-mcp__form div { display: flex; gap: 12px; padding: 9px 12px; }
.agt-mcp__form div + div { border-top: 1px solid var(--rule); }
.agt-mcp__form dt { flex: none; width: 76px; font-size: 12.5px; color: var(--muted); }
.agt-mcp__form dd { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.agt-mcp__scopes-title { font-weight: 600; color: var(--ink); }
.agt-mcp__scopes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.agt-mcp__scopes li { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.agt-mcp__scopes svg { flex: none; color: #16A34A; }
.agt-mcp__ok { display: flex; gap: 12px; }
.agt-mcp__ok-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #16A34A; color: #fff; }
.agt-mcp__ok b { font-size: 14px; color: var(--ink); }
.agt-mcp__ok blockquote { margin: 8px 0 10px; padding: 10px 12px; border-left: 3px solid var(--agt-bar); border-radius: 0 10px 10px 0; background: var(--agt-soft); color: var(--ink); }
.agt-spin { display: inline-flex; animation: dashSpin 0.8s linear infinite; }

/* ---- Modo oscuro ---- */
.mirai-dark .agt-msg__bubble { background: #23262e; }
.mirai-dark .agt-drop { background: rgba(14,15,18,0.9); color: #78c197; }
.mirai-dark .agt-mcp__tab.is-on { background: #2a2e37; color: #fff; box-shadow: none; }
.mirai-dark .agt-mcp__btn { background: #15171c; border-color: var(--rule-strong); color: var(--ink); }
.mirai-dark .agt-mcp__btn--solid { background: #fff; border-color: #fff; color: #000; }
.mirai-dark .agt-att__x { background: #fff; color: #000; }

/* ---- Celular ---- */
@media (max-width: 860px) {
  /* El chat ocupa la pantalla: lo que resta es la barra del botón de menú y
     los márgenes de la página. */
  /* flex: none — con el `flex: 1` de escritorio manda la base flexible y no el
     alto: el chat crecía con la conversación y el cuadro para escribir se iba
     abajo de la pantalla. */
  .agt { flex: none; grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 88px); min-height: 440px; }
  .agt-side { display: none; }
  .agt.is-hist .agt-side { display: flex; position: absolute; inset: 0; z-index: 8; }
  .dash-iconbtn.agt-chat__hist, .dash-iconbtn.agt-chat__new { display: inline-flex; }
  .agt-chat__head { padding: 10px 12px; gap: 8px; }
  .agt-chat__head .agt-chip { display: none; }
  .agt-thread__inner { padding: 18px 14px 8px; }
  .agt-hero { padding: 16px; }
  .agt-hero__slot { width: 104px; height: 104px; margin-bottom: 26px; }
  .agt-hero__chips { grid-template-columns: minmax(0, 1fr); }
  .agt-compose { padding: 8px 10px 10px; }
  .agt-connect { padding: 0 9px; }
  .agt-connect__txt { display: none; }
  .agt-mcp__body { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .agt-mascot.is-placed { transition: none; }
  .agt-face::before, .agt-face::after, .agt-typing i, .agt-rec__wave i, .agt-chat__status.is-busy i { animation: none; }
  .agt-rec__wave i { transform: scaleY(0.6); }
}


/* ============================================================
   CONTENIDO — crear videos desde formatos virales (prefijo ctn-)
   Naranja, el mismo de Contenido en MirAI Empresa: una sección se reconoce
   por su color en los dos paneles. --ctn es el relleno (lleva texto blanco);
   --ctn-ink es ese color cuando va como texto sobre la tarjeta.
   Las tarjetas de formato y el "teléfono" son oscuros en los dos temas: son
   video, y un video se mira sobre negro.
   ============================================================ */
.ctn { --ctn: #EA580C; --ctn-ink: #C2410C; --ctn-soft: rgba(234,88,12,0.10); --ctn-surface: #fff; }
.mirai-dark .ctn { --ctn-ink: #fb923c; --ctn-soft: rgba(234,88,12,0.18); --ctn-surface: #15171c; }
.dash-sb__item.is-active.is-contenido,
.mirai-dark .dash-sb__item.is-active.is-contenido { background: #EA580C; color: #fff; }
.dash-sb__item.is-active.is-contenido:hover { background: #C2410C; }
.ctn .dash-rt__input:focus, .ctn .dash-rt__textarea:focus { border-color: var(--ctn); box-shadow: 0 0 0 3px var(--ctn-soft); }

.ctn-chip { padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,0.06); font-size: 11px; font-weight: 600; color: var(--muted-strong); white-space: nowrap; }
.mirai-dark .ctn-chip { background: rgba(255,255,255,0.1); }
.ctn-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0,0,0,0.06); }
.ctn-seg__btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: none; border-radius: 999px; background: transparent; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted-strong); cursor: pointer; white-space: nowrap; transition: background 160ms ease, color 160ms ease; }
.ctn-seg__btn.is-on { background: var(--ctn); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
.mirai-dark .ctn-seg { background: rgba(255,255,255,0.08); }

/* Botón principal de la sección */
.ctn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: none; border-radius: 12px; background: var(--ctn); color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity 160ms ease, transform 120ms ease; }
.ctn-btn:hover:not(:disabled) { opacity: 0.92; }
.ctn-btn:active:not(:disabled) { transform: scale(0.98); }
.ctn-btn:disabled { opacity: 0.7; cursor: default; }
.ctn-btn--lg { padding: 14px 22px; border-radius: 14px; font-size: 15px; }

/* ---- Galería de formatos ---- */
.ctn-gallery { display: flex; flex-direction: column; gap: 18px; }
/* z-index propio: .dash-fade transforma cada hijo y, sin esto, el menú del
   filtro quedaba debajo de las tarjetas. */
.ctn-toprow { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.ctn-toprow h2 { font-size: clamp(20px, 2.1vw, 26px); font-weight: 600; letter-spacing: -0.025em; }
.ctn-toprow__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ctn-blank { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--ctn-surface); font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity 160ms ease; }
.ctn-blank:hover { opacity: 0.86; }
.ctn-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.ctn-cat { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--ctn-surface); font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; transition: border-color 160ms ease, background 160ms ease, color 160ms ease; }
.ctn-cat:hover { border-color: var(--ink); }
.ctn-cat.is-on { background: var(--ink); border-color: var(--ink); color: var(--ctn-surface); }
.ctn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ctn-foot { font-size: 12px; color: var(--muted-soft); }

.ctn-card { position: relative; display: block; aspect-ratio: 9 / 14; padding: 0; border: none; border-radius: 18px; overflow: hidden; background: #131416; cursor: pointer; text-align: left; font-family: var(--sans); color: #fff; isolation: isolate; transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease; }
.ctn-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(0,0,0,0.6); }
.ctn-card > img, .ctn-card > video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.7,.2,1); }
.ctn-card:hover > img { transform: scale(1.05); }
/* El degradé es lo que hace legible el texto sobre cualquier miniatura. */
/* Cierra fuerte abajo: muchas miniaturas traen su propio texto quemado justo
   ahí, y con un degradé suave se leía mezclado con el nombre del formato. */
.ctn-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.86) 66%, rgba(0,0,0,0.95) 100%); }
.ctn-card__top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; }
.ctn-card__top em.ctn-card__ai { background: var(--ctn); }
.ctn-card__top em { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,0.55); font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ctn-card__body { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 5px; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.ctn-card__body b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.ctn-card__body > span { font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,0.82); }
.ctn-card__body i { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,0.62); }
.ctn-card__go { position: absolute; left: 14px; right: 14px; bottom: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 11px; background: var(--ctn); font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity 200ms ease, transform 220ms cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
  .ctn-card:hover .ctn-card__go { opacity: 1; transform: none; }
  .ctn-card:hover .ctn-card__body { transform: translateY(-48px); }
}
.ctn-card--mine { background: linear-gradient(160deg, #3a1d0c, #131416 70%); }

/* ---- Editor ---- */
.ctn-editor { display: flex; flex-direction: column; gap: 18px; }
.ctn-editor__bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ctn-editor__name h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.ctn-editor__name span { font-size: 13px; color: var(--muted); }
.ctn-editor__cols { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.ctn-stage { position: sticky; top: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ctn-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 100%; padding: 3px; border-radius: 12px; background: rgba(0,0,0,0.06); }
.ctn-switch button { padding: 8px; border: none; border-radius: 9px; background: transparent; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted-strong); cursor: pointer; }
.ctn-switch button.is-on { background: var(--ctn-surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.mirai-dark .ctn-switch { background: rgba(255,255,255,0.08); }
.mirai-dark .ctn-switch button.is-on { background: #2a2e37; box-shadow: none; }

/* El "teléfono": ejemplo, creación y tu video usan el mismo marco */
.ctn-phone { position: relative; width: 100%; max-width: 300px; aspect-ratio: 9 / 16; border: 6px solid #111; border-radius: 30px; overflow: hidden; background: #0b0b0c; color: #fff; box-shadow: 0 30px 60px -34px rgba(0,0,0,0.6); }
.ctn-phone iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ctn-phone__poster { position: absolute; inset: 0; padding: 0; border: none; background: transparent; cursor: pointer; color: #fff; }
.ctn-phone__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctn-phone__tag { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,0.6); font-family: var(--sans); font-size: 11.5px; font-weight: 600; }
.ctn-play { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: -30px 0 0 -30px; padding-left: 3px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 200ms ease, background 200ms ease; }
.ctn-phone__poster:hover .ctn-play { transform: scale(1.08); background: var(--ctn); }
.ctn-phone--empty, .ctn-making { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; font-family: var(--sans); }
.ctn-phone--empty { color: rgba(255,255,255,0.5); }
.ctn-phone--empty b { color: rgba(255,255,255,0.86); font-size: 14px; font-weight: 600; }
.ctn-phone--empty span { font-size: 12.5px; line-height: 1.4; }
.ctn-credit { width: 100%; max-width: 300px; font-size: 12px; line-height: 1.45; color: var(--muted); text-align: center; }
.ctn-why { width: 100%; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--ctn-surface); }
.ctn-why h4 { font-size: 13px; font-weight: 600; }
.ctn-why ul { margin: 8px 0 0; padding-left: 18px; list-style: disc; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted-strong); }

/* Creando */
.ctn-making__spin { display: inline-flex; color: var(--ctn); animation: ctnPulse 1.2s ease-in-out infinite; }
@keyframes ctnPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: 0.6; } }
.ctn-making b { font-size: 15px; font-weight: 600; }
.ctn-making ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; align-self: stretch; text-align: left; font-size: 12.5px; color: rgba(255,255,255,0.45); }
.ctn-making li { display: flex; align-items: center; gap: 9px; transition: color 200ms ease; }
.ctn-making li span { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); }
.ctn-making li.is-on { color: #fff; }
.ctn-making li.is-on span { border-color: var(--ctn); border-top-color: transparent; animation: dashSpin 0.8s linear infinite; }
.ctn-making li.is-done { color: rgba(255,255,255,0.8); }
.ctn-making li.is-done span { border-color: var(--ctn); background: var(--ctn); }

/* Tu video */
.ctn-player { cursor: pointer; }
.ctn-player__scene { position: absolute; inset: 0; animation: ctnCut 260ms ease both; }
@keyframes ctnCut { from { opacity: 0.2; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.ctn-player__scene video, .ctn-player__scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctn-player__scene img { animation: ctnZoom linear both; }
@keyframes ctnZoom { from { transform: scale(1); } to { transform: scale(1.12); } }
.ctn-player__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: 24px; text-align: center; background: repeating-linear-gradient(135deg, #17181b 0 14px, #1c1e22 14px 28px); color: rgba(255,255,255,0.5); font-family: var(--sans); font-size: 12px; }
.ctn-player__empty b { color: rgba(255,255,255,0.88); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
/* Lo que generaría la IA: no hay con qué mostrarlo, así que se dice. */
.ctn-player__gen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: 24px; text-align: center; background: linear-gradient(135deg, #3b1606, #7c2d12 45%, #1a1010); background-size: 200% 200%; animation: ctnGen 4s ease-in-out infinite alternate; color: rgba(255,255,255,0.7); font-family: var(--sans); font-size: 12px; }
.ctn-player__gen svg { color: #fdba74; }
.ctn-player__gen b { color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
@keyframes ctnGen { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.ctn-player.is-paused .ctn-player__gen { animation-play-state: paused; }
.ctn-player__bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.ctn-player__bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.3); overflow: hidden; }
.ctn-player__bars i { display: block; width: 0; height: 100%; background: #fff; }
.ctn-player__bars i.is-done { width: 100%; }
.ctn-player__bars i.is-on { animation: ctnBar linear forwards; }
.ctn-player.is-paused .ctn-player__bars i.is-on, .ctn-player.is-paused .ctn-player__scene img { animation-play-state: paused; }
@keyframes ctnBar { from { width: 0; } to { width: 100%; } }
.ctn-player__text { position: absolute; left: 14px; right: 14px; bottom: 64px; display: flex; justify-content: center; animation: ctnText 320ms cubic-bezier(.2,.7,.2,1) both; }
.ctn-player__text span { padding: 7px 12px; border-radius: 10px; background: rgba(0,0,0,0.72); font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; text-align: center; }
@keyframes ctnText { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
.ctn-player__music { position: absolute; left: 14px; bottom: 16px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,0.55); font-family: var(--sans); font-size: 11.5px; font-weight: 500; }
.ctn-play--center { pointer-events: none; }

/* ---- Pasos ---- */
.ctn-steps { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ctn-step { display: flex; flex-direction: column; gap: 16px; }
.ctn-step__head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ctn-step__n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ctn-soft); color: var(--ctn-ink); font-size: 13px; font-weight: 700; }
.ctn-step__titles { flex: 1; min-width: 180px; }
.ctn-step__titles h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 28px; }
.ctn-step__titles p { font-size: 13px; color: var(--muted); }

.ctn-shots { display: flex; flex-direction: column; gap: 8px; }
.ctn-shot { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 10px; border: 1px solid var(--rule); border-radius: 14px; transition: border-color 160ms ease, background 160ms ease; }
.ctn-shot.is-over { border-color: var(--ctn); background: var(--ctn-soft); }
.ctn-shot.is-done { border-color: var(--rule-strong); }
.ctn-shot__n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--rule-strong); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ctn-shot.is-done .ctn-shot__n { border-color: #16A34A; background: #16A34A; color: #fff; }
.ctn-shot__thumb { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 64px; padding: 0; border: 1px dashed var(--rule-strong); border-radius: 9px; overflow: hidden; background: transparent; color: var(--muted); cursor: pointer; }
.ctn-shot.is-done .ctn-shot__thumb { border: none; background: #0b0b0c; }
.ctn-shot__thumb video, .ctn-shot__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctn-shot__thumb:hover { border-color: var(--ctn); color: var(--ctn-ink); }
.ctn-shot__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ctn-shot__main b { font-size: 13.5px; font-weight: 600; }
.ctn-shot__main span { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ctn-shot__secs { flex: none; font-family: var(--mono); font-size: 12px; color: var(--muted-soft); }
.ctn-shot__up { flex: none; padding: 7px 13px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--ctn-surface); font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.ctn-shot__up:hover { border-color: var(--ctn); color: var(--ctn-ink); }
.ctn-shot__x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border: none; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.ctn-shot__x:hover { background: rgba(220,38,38,0.12); color: #b42318; }

/* Una parte que genera la IA: mismo renglón que una toma, pero no se sube. */
.ctn-shot--gen { border-style: dashed; background: var(--ctn-soft); }
.ctn-shot--gen .ctn-shot__n { border-color: transparent; background: var(--ctn); color: #fff; }
.ctn-shot--gen .ctn-shot__thumb { border: none; background: transparent; color: var(--ctn-ink); cursor: default; }
.ctn-shot__tag { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--ctn-surface); font-size: 11.5px; font-weight: 600; color: var(--ctn-ink); white-space: nowrap; }

/* Video en blanco: las tomas son del que las sube */
.ctn-shot--own .ctn-shot__thumb { border: none; background: #0b0b0c; cursor: default; }
.ctn-own__text { flex: 1; min-width: 120px; padding: 9px 12px; }
.ctn-own__secs { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.ctn-own__secs b { min-width: 30px; text-align: center; font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.ctn-own__secs button, .ctn-own__move button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--ctn-surface); font-family: var(--sans); font-size: 15px; color: var(--ink); cursor: pointer; }
.ctn-own__secs button:disabled, .ctn-own__move button:disabled { opacity: 0.35; cursor: default; }
.ctn-own__move { display: inline-flex; gap: 4px; flex: none; }
.ctn-own__move button.is-up svg { transform: rotate(180deg); }
.ctn-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 34px 20px; border: 1.5px dashed var(--rule-strong); border-radius: 16px; background: transparent; cursor: pointer; text-align: center; font-family: var(--sans); color: var(--ink); transition: border-color 160ms ease, background 160ms ease; }
.ctn-drop:hover { border-color: var(--ctn); background: var(--ctn-soft); }
.ctn-drop__ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 14px; background: var(--ctn-soft); color: var(--ctn-ink); }
.ctn-drop b { font-size: 15px; font-weight: 600; }
.ctn-drop span:last-child { font-size: 13px; color: var(--muted); }

.ctn-fields { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.ctn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ctn-describe { display: flex; flex-direction: column; gap: 8px; }
.ctn-describe__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ctn-ai { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: none; border-radius: 999px; background: var(--ctn-soft); font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ctn-ink); cursor: pointer; }
.ctn-ai:hover:not(:disabled) { background: var(--ctn); color: #fff; }
.ctn-ai:disabled { cursor: default; opacity: 0.8; }
.ctn-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ctn-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; cursor: pointer; }
.ctn-toggle > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctn-toggle b { font-size: 13.5px; font-weight: 600; }
.ctn-toggle i { font-style: normal; font-size: 12px; color: var(--muted); }
.dash-switch.ctn-switchbtn.is-on, .mirai-dark .dash-switch.ctn-switchbtn.is-on { background: #EA580C; }
.mirai-dark .dash-switch.ctn-switchbtn.is-on .dash-switch__knob { background: #fff; }
.ctn-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ctn-cta span { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ---- Resultado ---- */
.ctn-result { display: flex; flex-direction: column; gap: 14px; border-color: var(--ctn); }
.ctn-result__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ctn-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(22,163,74,0.13); font-size: 12.5px; font-weight: 600; color: #166534; white-space: nowrap; }
.mirai-dark .ctn-badge { color: #6ee7a0; }
.ctn-result__meta { font-size: 12.5px; color: var(--muted); }
.ctn-caption { padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,0.04); font-size: 13.5px; line-height: 1.55; }
.mirai-dark .ctn-caption { background: rgba(255,255,255,0.06); }
.ctn-caption__label { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ctn-caption__tags { margin-top: 6px; color: var(--ctn-ink); font-weight: 500; overflow-wrap: anywhere; }
.ctn-result__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Mis videos, vacío ---- */
.ctn-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 24px; text-align: center; }
.ctn-none__ico { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; background: var(--ctn-soft); color: var(--ctn-ink); }
.ctn-none b { font-size: 16px; font-weight: 600; }
.ctn-none p { margin-bottom: 8px; font-size: 13.5px; color: var(--muted); }

@media (max-width: 1280px) { .ctn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .ctn-editor__cols { grid-template-columns: minmax(0, 1fr); }
  .ctn-stage { position: static; }
  .ctn-why, .ctn-switch { max-width: 420px; }
}
@media (max-width: 760px) {
  .ctn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ctn-card__body b { font-size: 14px; }
  .ctn-card__body > span { display: none; }
  .ctn-card__top { top: 9px; left: 9px; right: 9px; }
  .ctn-card__top em { padding: 3px 7px; font-size: 10px; }
  .ctn-fields, .ctn-toggles { grid-template-columns: minmax(0, 1fr); }
  .ctn-shot { flex-wrap: wrap; }
  .ctn-shot__main { flex-basis: calc(100% - 96px); }
  .ctn-shot__secs { margin-left: 34px; }
  .ctn-own__text { flex-basis: calc(100% - 96px); }
  .ctn-own__secs { margin-left: 34px; }
  .ctn-toprow__actions { width: 100%; }
}