/* ---------------------------------------------------------------------------
   Direccion: pagina de estado de la copia del Base de Lark
   ---------------------------------------------------------------------------
   La pagina ya no captura archivos ni muestra tablas de datos: solo dice si el
   Base ya se subio a la base de datos, cuando y que se guardo.
   --------------------------------------------------------------------------- */

.nav-button--direction > i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #0c8377;
  font-size: 18px;
}

.nav-button--direction.active > i {
  color: #0a756b;
}

.workspace-slot[data-section="direction"],
.app-shell .workspace-slot[data-section="direction"],
.app-shell.direction-mode .discovery-panel,
.app-shell.direction-mode .discovery-panel:has(.download-panel[hidden]) {
  grid-template-rows: minmax(0, 1fr);
}

.app-shell.direction-mode {
  grid-template-columns: var(--provider-rail-size) var(--sidebar-size) minmax(0, 1fr) 0;
  grid-template-areas: "providers sidebar discovery discovery";
}

.app-shell.direction-mode.sidebar-collapsed {
  grid-template-columns: var(--provider-rail-size) var(--sidebar-collapsed-size) minmax(0, 1fr) 0;
  grid-template-areas: "providers sidebar discovery discovery";
}

.app-shell.direction-mode .assistant-panel,
.app-shell.direction-mode .assistant-float-toggle,
.app-shell.direction-mode .panel-swap-button,
.app-shell.direction-mode .side-panel-collapse-button {
  display: none;
}

.app-shell.direction-mode .discovery-panel {
  height: 100vh;
  border-right: 0;
}

/* El pop up vive fuera del workspace: comparte la paleta. */
.direction-workspace,
.direction-modal {
  --direction-ink: #10213a;
  --direction-muted: #5e6d84;
  --direction-teal: #078d80;
  --direction-teal-dark: #056e66;
  --direction-mint: #dff7f0;
  --direction-gold: #d6a84b;
  --direction-red: #c2422f;
  display: grid;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
  padding: 16px;
  color: var(--direction-ink);
  background:
    linear-gradient(180deg, rgba(238, 251, 247, 0.88), rgba(248, 251, 255, 0.96)),
    #f7fafc;
}

.direction-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #c9e5df;
  border-left: 4px solid var(--direction-teal);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 55, 76, 0.06);
}

.direction-heading,
.direction-section-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.direction-mark {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: var(--direction-mint);
  color: var(--direction-teal-dark);
  font-size: 21px;
}

.direction-heading h2,
.direction-section-heading h3 {
  margin: 0;
  color: var(--direction-ink);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.direction-heading h2 {
  font-size: 19px;
}

.direction-heading p {
  margin: 2px 0 0;
  color: var(--direction-muted);
  font-size: 12px;
}

.direction-eyebrow,
.direction-kicker {
  display: block;
  color: var(--direction-teal-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.direction-refresh-button,
.direction-sync-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid #8fd3c9;
  border-radius: 7px;
  color: var(--direction-teal-dark);
  font-weight: 800;
  background: #f2fffb;
}

.direction-refresh-button:hover:not(:disabled),
.direction-sync-button:hover:not(:disabled) {
  border-color: var(--direction-teal);
  background: var(--direction-mint);
}

.direction-refresh-button:disabled,
.direction-sync-button:disabled {
  opacity: 0.55;
}

.direction-hero-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
}

.direction-ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #d5e4e8;
  border-radius: 7px;
  background: #fff;
  color: var(--direction-muted);
  font-size: 12px;
  font-weight: 800;
}

.direction-ghost-button:hover {
  border-color: #8fd3c9;
  color: var(--direction-teal-dark);
}

.direction-ghost-button.is-active {
  border-color: var(--direction-teal);
  background: var(--direction-mint);
  color: var(--direction-teal-dark);
}

/* Icono de fuente en el menu movil: los demas botones traen SVG y esos ya
   estan cubiertos; el de Direccion usa Bootstrap Icons. */
i.mobile-web-navigation-item-icon {
  display: grid;
  place-items: center;
  font-size: 21px;
  line-height: 1;
}

@media (max-width: 720px) and (pointer: coarse),
       (max-width: 960px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  html[data-flowmo-mobile-navigation="enabled"] .direction-workspace {
    height: 100%;
    max-height: 100%;
    gap: 10px;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom, 0px));
  }

  html[data-flowmo-mobile-navigation="enabled"] .direction-hero {
    padding: 11px 12px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .direction-heading h2 {
    font-size: 16px;
  }

  html[data-flowmo-mobile-navigation="enabled"] .direction-panel {
    padding-bottom: 16px;
  }
}


/* ---------------------------------------------------------------------------
   Tablero en vivo
   --------------------------------------------------------------------------- */
.direction-hero { flex-wrap: wrap; }
.direction-hero-actions { align-items: center; gap: 12px; }
.direction-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--direction-muted); }
.direction-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; border-radius: 999px; background: var(--direction-mint); color: var(--direction-teal-dark); font-weight: 700; font-size: 11.5px; letter-spacing: .02em; }
.direction-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--direction-teal); box-shadow: 0 0 0 0 rgba(7, 141, 128, .45); animation: direction-pulse 2.2s ease-out infinite; }
.direction-live.is-loading i { background: var(--direction-gold); animation: direction-spin 1s linear infinite; border-radius: 2px; }
@keyframes direction-pulse { 0% { box-shadow: 0 0 0 0 rgba(7,141,128,.45); } 70% { box-shadow: 0 0 0 8px rgba(7,141,128,0); } 100% { box-shadow: 0 0 0 0 rgba(7,141,128,0); } }
@keyframes direction-spin { to { transform: rotate(360deg); } }
.direction-status-error { color: var(--direction-red); font-weight: 600; }
.direction-workspace.is-loading .direction-refresh-button i { animation: direction-spin .9s linear infinite; }

.direction-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px; background: rgba(255,255,255,.7); border: 1px solid rgba(16,33,58,.08); border-radius: 14px; width: fit-content; max-width: 100%; }
.direction-tab { appearance: none; border: 0; background: transparent; color: var(--direction-muted); font: inherit; font-weight: 600; font-size: 13.5px; padding: 8px 14px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; position: relative; transition: background .22s, color .22s, box-shadow .22s, transform .18s cubic-bezier(.3,.7,.2,1.2); }
.direction-tab:active { transform: scale(.96); }
.direction-tab:hover { background: rgba(7,141,128,.08); color: var(--direction-teal-dark); }
.direction-tab.is-active { background: var(--direction-teal); color: #fff; box-shadow: 0 6px 16px rgba(7,141,128,.28); animation: direction-tab-pop .3s cubic-bezier(.3,.7,.2,1.3); }
@keyframes direction-tab-pop { from { transform: scale(.94); } to { transform: none; } }
.direction-tab i { font-size: 14px; }

.direction-panel { min-height: 0; overflow: auto; padding: 2px 2px 28px; display: flex; flex-direction: column; gap: 14px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.direction-panel.is-ready { opacity: 1; transform: none; }
.direction-panel.is-ready > * { animation: direction-rise-in .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes direction-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.direction-kpi { transition: transform .2s, box-shadow .2s; }
.direction-kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(16,33,58,.09); }
/* Sin esto, al ser hijos de un flex en columna se comprimian para caber en la
   pantalla y el contenido se veia cortado a la mitad. */
.direction-panel > *,
.direction-card-body > *,
.direction-modal-body > *,
.direction-grid-2 > *,
.direction-grid-3 > * { flex: 0 0 auto; min-height: 0; }
.direction-grid-2 > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.direction-grid-2 > div > * { flex: 0 0 auto; }

.direction-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.direction-kpi { background: #fff; border: 1px solid rgba(16,33,58,.08); border-radius: 14px; padding: 13px 15px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 8px 22px rgba(16,33,58,.05); position: relative; overflow: hidden; }
.direction-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--direction-teal); opacity: .75; }
.direction-kpi[data-tone="high"]::before { background: var(--direction-red); }
.direction-kpi[data-tone="review"]::before { background: var(--direction-gold); }
.direction-kpi[data-tone="good"]::before { background: #2e9e6b; }
.direction-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--direction-muted); }
.direction-kpi-value { font-size: clamp(22px, 2.4vw, 28px); font-weight: 760; letter-spacing: -.02em; color: var(--direction-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.direction-kpi-note { font-size: 12px; color: var(--direction-muted); }

.direction-card { background: #fff; border: 1px solid rgba(16,33,58,.08); border-radius: 16px; box-shadow: 0 10px 26px rgba(16,33,58,.06); overflow: visible; }
.direction-card[data-tone="high"] { border-color: rgba(194,66,47,.35); }
.direction-card-head { border-radius: 16px 16px 0 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px 10px; border-bottom: 1px solid rgba(16,33,58,.07); }
.direction-card-head h3 { margin: 0; font-size: 16px; font-weight: 760; letter-spacing: -.01em; }
.direction-card-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--direction-muted); }
.direction-card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.direction-card-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.direction-card-body h4 { margin: 6px 0 2px; font-size: 12px; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; color: var(--direction-muted); }
.direction-empty { margin: 0; padding: 18px; text-align: center; color: var(--direction-muted); font-size: 13.5px; background: rgba(16,33,58,.03); border-radius: 12px; }
.direction-note { margin: 0; font-size: 13px; color: var(--direction-muted); line-height: 1.5; }
.direction-note b { color: var(--direction-ink); }

.direction-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.direction-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.direction-fact { background: rgba(7,141,128,.05); border: 1px solid rgba(7,141,128,.12); border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; }
.direction-fact strong { font-size: 22px; font-weight: 760; letter-spacing: -.02em; color: var(--direction-teal-dark); font-variant-numeric: tabular-nums; line-height: 1.1; }
.direction-fact strong small { font-size: 13px; color: var(--direction-muted); font-weight: 600; }
.direction-fact span { font-size: 13px; font-weight: 600; color: var(--direction-ink); }
.direction-fact small { font-size: 11.5px; color: var(--direction-muted); line-height: 1.35; }

.direction-mini-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.direction-mini-kpi { border-radius: 12px; padding: 10px 12px; background: rgba(16,33,58,.035); display: flex; flex-direction: column; gap: 1px; border-left: 3px solid var(--direction-teal); }
.direction-mini-kpi[data-tone="high"] { border-left-color: var(--direction-red); background: rgba(194,66,47,.07); }
.direction-mini-kpi[data-tone="review"] { border-left-color: var(--direction-gold); background: rgba(214,168,75,.12); }
.direction-mini-kpi[data-tone="good"] { border-left-color: #2e9e6b; background: rgba(46,158,107,.08); }
.direction-mini-kpi strong { font-size: 20px; font-weight: 760; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.direction-mini-kpi span { font-size: 12px; font-weight: 600; }
.direction-mini-kpi small { font-size: 11px; color: var(--direction-muted); }

.direction-split { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: rgba(16,33,58,.06); }
.direction-split span { display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; min-width: 0; transition: width .6s cubic-bezier(.3,.7,.2,1); }
.direction-split .is-good { background: #2e9e6b; }
.direction-split .is-risk { background: var(--direction-red); }

.direction-bars { display: flex; flex-direction: column; gap: 7px; }
.direction-bar-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; border-radius: 8px; padding: 2px 4px; }
.direction-bar-row.is-clickable { cursor: pointer; }
.direction-bar-row.is-clickable:hover { background: rgba(7,141,128,.06); }
.direction-bar-label { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direction-bar-label small { display: block; font-weight: 500; color: var(--direction-muted); font-size: 11px; }
.direction-bar-track { height: 10px; border-radius: 5px; background: rgba(16,33,58,.07); overflow: hidden; }
.direction-bar-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--direction-teal), var(--direction-teal-dark)); border-radius: 5px; transform-origin: left center; animation: direction-bar-grow .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
@keyframes direction-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.direction-bar-value { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; }
.direction-bar-value small { display: block; font-weight: 500; color: var(--direction-muted); font-size: 11px; }

.direction-chart { position: relative; padding-left: 34px; }
.direction-chart-grid { position: absolute; left: 34px; right: 0; top: 0; height: 150px; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
.direction-chart-grid span { position: relative; display: block; border-top: 1px dashed rgba(16,33,58,.1); }
.direction-chart-grid span::before { content: attr(data-v); position: absolute; right: 100%; top: -7px; margin-right: 8px; font-size: 10px; color: var(--direction-muted); font-variant-numeric: tabular-nums; }
.direction-chart-grid span:last-child { border-top-color: rgba(16,33,58,.22); border-top-style: solid; }
.direction-columns { display: grid; grid-template-columns: repeat(var(--cols, 30), 1fr); gap: 4px; align-items: end; height: 150px; padding-bottom: 18px; position: relative; box-sizing: content-box; }
.direction-column { appearance: none; border: 0; background: transparent; padding: 0; position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; cursor: default; border-radius: 6px; isolation: isolate; }
.direction-column.is-clickable { cursor: pointer; }
.direction-column:hover .direction-column-bar { filter: brightness(1.08); }
.direction-column:hover::after { content: ""; position: absolute; inset: -4px -2px 14px; background: rgba(7,141,128,.07); border-radius: 6px; z-index: -1; }
.direction-column.is-empty .direction-column-bar { background: rgba(16,33,58,.12); }
.direction-column-bar { display: block; width: 100%; min-height: 3px; background: linear-gradient(180deg, #18a896, var(--direction-teal-dark)); border-radius: 5px 5px 2px 2px; transform-origin: bottom; animation: direction-col-grow .65s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 18ms + 80ms); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
@keyframes direction-col-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.direction-column-dot { position: absolute; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; border: 2px solid var(--direction-gold); box-sizing: border-box; transform: translateY(50%); animation: direction-dot-in .4s ease-out both; animation-delay: calc(var(--i, 0) * 18ms + 420ms); }
@keyframes direction-dot-in { from { opacity: 0; transform: translateY(50%) scale(.3); } to { opacity: 1; transform: translateY(50%) scale(1); } }
.direction-column-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--direction-muted); white-space: nowrap; margin-top: 4px; }
.direction-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); background: var(--direction-ink); color: #fff; font-size: 11.5px; line-height: 1.35; padding: 6px 9px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; box-shadow: 0 8px 20px rgba(16,33,58,.25); }
.direction-tip b { display: block; font-size: 10.5px; color: rgba(255,255,255,.7); font-weight: 600; }
.direction-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--direction-ink); }
.direction-column:hover .direction-tip, .direction-column:focus-visible .direction-tip { opacity: 1; transform: translate(-50%, 0); }
.direction-columns > .direction-column:first-child .direction-tip, .direction-columns > .direction-column:nth-child(2) .direction-tip { left: 0; transform: translate(0, 4px); }
.direction-columns > .direction-column:first-child:hover .direction-tip, .direction-columns > .direction-column:nth-child(2):hover .direction-tip { transform: translate(0, 0); }
.direction-columns > .direction-column:first-child .direction-tip::after, .direction-columns > .direction-column:nth-child(2) .direction-tip::after { left: 12px; }
.direction-columns > .direction-column:last-child .direction-tip, .direction-columns > .direction-column:nth-last-child(2) .direction-tip { left: auto; right: 0; transform: translate(0, 4px); }
.direction-columns > .direction-column:last-child:hover .direction-tip, .direction-columns > .direction-column:nth-last-child(2):hover .direction-tip { transform: translate(0, 0); }
.direction-columns > .direction-column:last-child .direction-tip::after, .direction-columns > .direction-column:nth-last-child(2) .direction-tip::after { left: auto; right: 12px; margin-left: 0; }
.direction-columns-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--direction-muted); margin-top: 6px; align-items: center; }
.direction-columns-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 3px; background: var(--direction-teal); }
.direction-columns-legend i.is-dot { border-radius: 50%; background: #fff; border: 2px solid var(--direction-gold); box-sizing: border-box; }
.direction-chart-total { margin-left: auto; font-weight: 600; color: var(--direction-ink); }

.direction-table-wrap { overflow-x: auto; border: 1px solid rgba(16,33,58,.08); border-radius: 12px; }
.direction-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.direction-table th, .direction-table td { padding: 8px 11px; text-align: left; border-bottom: 1px solid rgba(16,33,58,.07); white-space: nowrap; vertical-align: middle; }
.direction-table thead th { background: rgba(16,33,58,.035); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--direction-muted); position: sticky; top: 0; }
.direction-table tbody tr:last-child td { border-bottom: 0; }
.direction-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.direction-table tbody tr:hover td { background: rgba(7,141,128,.04); }

.direction-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.direction-chip { appearance: none; border: 1px solid rgba(16,33,58,.12); background: #fff; color: var(--direction-muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.direction-chip:hover { border-color: var(--direction-teal); color: var(--direction-teal-dark); }
.direction-chip.is-active { background: var(--direction-teal); border-color: var(--direction-teal); color: #fff; }

.direction-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(16,33,58,.08); color: var(--direction-ink); white-space: nowrap; }
.direction-tag[data-tone="high"] { background: rgba(194,66,47,.12); color: var(--direction-red); }
.direction-tag[data-tone="review"] { background: rgba(214,168,75,.2); color: #7a5a10; }
.direction-tag[data-tone="good"], .direction-tag[data-tone="clear"] { background: rgba(46,158,107,.14); color: #1f7a50; }
.direction-tag[data-tone="muted"] { background: rgba(16,33,58,.06); color: var(--direction-muted); text-transform: none; letter-spacing: 0; }

.direction-link { appearance: none; border: 0; background: transparent; padding: 0; font: inherit; color: var(--direction-teal-dark); font-weight: 600; cursor: pointer; text-decoration: underline dotted rgba(5,110,102,.5); text-underline-offset: 3px; }
.direction-link:hover { color: var(--direction-teal); text-decoration-style: solid; }
.direction-search { font: inherit; font-size: 13px; padding: 7px 12px; border: 1px solid rgba(16,33,58,.14); border-radius: 10px; min-width: 220px; background: #fff; }
.direction-search:focus { outline: 2px solid rgba(7,141,128,.35); border-color: var(--direction-teal); }

.direction-alert { border: 1px solid rgba(16,33,58,.1); border-left: 4px solid var(--direction-gold); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.direction-alert[data-tone="high"] { border-left-color: var(--direction-red); }
.direction-alert[data-tone="clear"] { border-left-color: #2e9e6b; }
.direction-alert header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.direction-alert header b { font-size: 14px; }
.direction-alert-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.direction-alert-when { color: var(--direction-muted); margin-left: auto; font-size: 12px; }
.direction-alert p { margin: 0; font-size: 13px; color: var(--direction-ink); line-height: 1.45; }
.direction-alert-pair { font-size: 12.5px; color: var(--direction-muted); background: rgba(16,33,58,.04); border-radius: 8px; padding: 6px 10px; }

.direction-faq { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.direction-faq li { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.direction-faq li span { color: var(--direction-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.direction-faq .direction-link { text-align: left; }

.direction-qa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.direction-qa { border: 1px solid rgba(16,33,58,.08); border-radius: 12px; padding: 10px 14px; background: #fff; display: flex; flex-direction: column; gap: 5px; transition: border-color .15s; }
.direction-qa.is-open { border-color: rgba(7,141,128,.4); }
.direction-qa.is-failed { border-left: 3px solid var(--direction-red); }
.direction-qa-meta { font-size: 12px; color: var(--direction-muted); }
.direction-qa-q { font-size: 14px; font-weight: 600; color: var(--direction-ink); line-height: 1.4; }
.direction-qa-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.direction-qa-a { margin-top: 4px; padding: 10px 12px; background: rgba(7,141,128,.05); border-radius: 10px; font-size: 13.5px; line-height: 1.5; overflow-x: auto; }
.direction-qa-a .assistant-table, .direction-modal-body .assistant-table { font-size: 12.5px; }
.direction-answer-plain { margin: 0; white-space: pre-wrap; font: inherit; }
.direction-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; font-size: 12.5px; color: var(--direction-muted); }

.direction-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(16,33,58,.45); display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px); }
.direction-modal[hidden] { display: none; }
.direction-modal-card { width: min(860px, 100%); max-height: min(88vh, 900px); background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(16,33,58,.35); display: flex; flex-direction: column; overflow: hidden; animation: direction-rise .25s cubic-bezier(.3,.8,.25,1); }
@keyframes direction-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.direction-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid rgba(16,33,58,.08); }
.direction-modal-head h3 { margin: 0; font-size: 16px; font-weight: 760; }
.direction-modal-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--direction-muted); }
.direction-modal-close { appearance: none; border: 1px solid rgba(16,33,58,.12); background: #fff; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; color: var(--direction-muted); }
.direction-modal-close:hover { color: var(--direction-red); border-color: rgba(194,66,47,.4); }
.direction-modal-body { overflow: auto; padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.direction-msg { border-radius: 12px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; max-width: 92%; }
.direction-msg.is-user { align-self: flex-end; background: rgba(16,33,58,.06); }
.direction-msg.is-assistant { align-self: flex-start; background: rgba(7,141,128,.07); border: 1px solid rgba(7,141,128,.15); }
.direction-msg-meta { font-size: 11px; color: var(--direction-muted); margin-bottom: 4px; font-weight: 600; }
.direction-msg-text { overflow-x: auto; }
body.direction-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .direction-live i, .direction-workspace.is-loading .direction-refresh-button i, .direction-modal-card { animation: none; }
  .direction-panel, .direction-bar-track i, .direction-column-bar, .direction-split span, .direction-tab, .direction-kpi, .direction-convo { transition: none; }
  .direction-panel.is-ready > *, .direction-bar-track i, .direction-column-bar, .direction-column-dot, .direction-convo, .direction-tab.is-active, .direction-approval { animation: none; }
  .direction-line-reveal, .direction-line-fill { animation: none; transform: none; opacity: 1; }
}
@media (max-width: 720px) {
  .direction-workspace { padding: 12px; }
  .direction-hero-actions { width: 100%; justify-content: space-between; }
  .direction-tabs { width: 100%; }
  .direction-tab { flex: 1 1 auto; justify-content: center; padding: 8px 8px; font-size: 12.5px; }
  .direction-card-head, .direction-card-body { padding-left: 13px; padding-right: 13px; }
  .direction-bar-row { grid-template-columns: 1fr; gap: 3px; }
  .direction-bar-value { text-align: left; }
  .direction-columns { height: 120px; }
  .direction-search { min-width: 0; width: 100%; }
  .direction-msg { max-width: 100%; }
}

/* --- Conversaciones con BambooIA ---------------------------------------- */
.direction-convos-head { align-items: center; }
.direction-convos-head > div:first-of-type { flex: 1 1 260px; }
.direction-bamboo-avatar { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 6px 16px rgba(16,33,58,.12); flex: 0 0 auto; }
.direction-search-wrap { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(16,33,58,.14); border-radius: 999px; background: #fff; min-width: 260px; }
.direction-search-wrap i { color: var(--direction-muted); }
.direction-search-wrap .direction-search { border: 0; min-width: 0; flex: 1; padding: 8px 0; background: transparent; }
.direction-search-wrap .direction-search:focus { outline: none; }
.direction-search-wrap:focus-within { border-color: var(--direction-teal); box-shadow: 0 0 0 3px rgba(7,141,128,.18); }

.direction-convo-list { display: flex; flex-direction: column; gap: 10px; }
.direction-convo { appearance: none; font: inherit; color: inherit; text-align: left; width: 100%; border: 1px solid rgba(16,33,58,.09); border-radius: 14px; background: #fff; cursor: pointer; display: grid; grid-template-columns: minmax(170px, .9fr) minmax(0, 2fr) auto auto; gap: 16px; align-items: center; padding: 12px 16px; transition: box-shadow .2s, border-color .2s, transform .2s; animation: direction-rise-in .4s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.direction-convo:hover { border-color: rgba(7,141,128,.4); box-shadow: 0 10px 26px rgba(16,33,58,.08); transform: translateY(-1px); }
.direction-convo:hover .direction-convo-open { background: var(--direction-teal); color: #fff; border-color: var(--direction-teal); }
.direction-convo:active { transform: scale(.995); }
.direction-convo-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.direction-convo-who b { font-size: 14px; }
.direction-convo-who small { font-size: 11.5px; color: var(--direction-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.direction-convo-preview { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.direction-convo-q { font-size: 13.5px; color: var(--direction-ink); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 10px; border-left: 2px solid rgba(7,141,128,.45); }
.direction-convo-q.is-more { color: var(--direction-muted); font-size: 12.5px; border-left-color: rgba(16,33,58,.15); }
.direction-convo-count { font-size: 11.5px; color: var(--direction-muted); white-space: nowrap; text-align: center; }
.direction-convo-count b { display: block; font-size: 18px; color: var(--direction-teal-dark); line-height: 1.05; }
.direction-convo-open { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--direction-teal-dark); border: 1px solid rgba(7,141,128,.35); border-radius: 999px; padding: 6px 12px; white-space: nowrap; transition: background .18s, color .18s; }
.direction-bamboo-mini { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; margin-top: 2px; }
.direction-msg.is-assistant { display: flex; gap: 10px; align-items: flex-start; }
.direction-msg.is-assistant > div { min-width: 0; flex: 1; }

@media (max-width: 720px) {
  .direction-convo { grid-template-columns: 1fr auto; gap: 8px 12px; padding: 10px 12px; }
  .direction-convo-preview { grid-column: 1 / -1; }
  .direction-convo-open { display: none; }
  .direction-chart { padding-left: 30px; }
  .direction-search-wrap { min-width: 0; width: 100%; }
}

/* --- Grafica de lineas --------------------------------------------------- */
.direction-linechart .direction-chart-grid { height: 150px; }
.direction-line-area { position: relative; height: 150px; }
.direction-line-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.direction-line-fill { animation: direction-fade-in .9s ease-out .35s both; }
.direction-line-main, .direction-line-shadow, .direction-line-second { vector-effect: non-scaling-stroke; }
.direction-line-reveal { transform-origin: 0 0; transform: scaleX(0); animation: direction-reveal 1.1s cubic-bezier(.4,0,.2,1) .1s forwards; }
@keyframes direction-reveal { to { transform: scaleX(1); } }
@keyframes direction-fade-in { from { opacity: 0; } to { opacity: 1; } }
.direction-line-hits { position: absolute; inset: 0; }
.direction-line-hit { appearance: none; border: 0; background: transparent; padding: 0; margin: 0; position: absolute; top: 0; bottom: 0; transform: translateX(-50%); cursor: default; }
.direction-line-hit.is-clickable { cursor: pointer; }
.direction-line-guide { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(16,33,58,.18); opacity: 0; transition: opacity .15s; }
.direction-line-dot { position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -5px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2.5px solid var(--direction-teal); box-sizing: border-box; box-shadow: 0 2px 8px rgba(5,110,102,.35); opacity: 0; transform: scale(.4); transition: opacity .15s, transform .18s cubic-bezier(.3,.7,.2,1.4); }
.direction-line-dot.is-main { top: var(--yp); }
.direction-line-dot.is-second { top: var(--ys); border-color: var(--direction-gold); box-shadow: 0 2px 8px rgba(214,168,75,.4); }
.direction-line-hit .direction-tip { bottom: auto; top: calc(var(--yp) - 14px); transform: translate(-50%, -100%) translateY(4px); }
.direction-line-hit:hover .direction-tip, .direction-line-hit:focus-visible .direction-tip { transform: translate(-50%, -100%); }
.direction-line-hits > .direction-line-hit:first-child .direction-tip, .direction-line-hits > .direction-line-hit:nth-child(2) .direction-tip { left: 50%; transform: translate(-10px, -100%) translateY(4px); }
.direction-line-hits > .direction-line-hit:first-child:hover .direction-tip, .direction-line-hits > .direction-line-hit:nth-child(2):hover .direction-tip { transform: translate(-10px, -100%); }
.direction-line-hits > .direction-line-hit:last-child .direction-tip, .direction-line-hits > .direction-line-hit:nth-last-child(2) .direction-tip { left: 50%; transform: translate(calc(-100% + 10px), -100%) translateY(4px); }
.direction-line-hits > .direction-line-hit:last-child:hover .direction-tip, .direction-line-hits > .direction-line-hit:nth-last-child(2):hover .direction-tip { transform: translate(calc(-100% + 10px), -100%); }
.direction-line-hits > .direction-line-hit:last-child .direction-tip::after, .direction-line-hits > .direction-line-hit:nth-last-child(2) .direction-tip::after { left: auto; right: 6px; margin-left: 0; }
.direction-line-hits > .direction-line-hit:first-child .direction-tip::after, .direction-line-hits > .direction-line-hit:nth-child(2) .direction-tip::after { left: 6px; margin-left: 0; }
.direction-line-hit:hover .direction-line-guide, .direction-line-hit:hover .direction-line-dot, .direction-line-hit:focus-visible .direction-line-dot { opacity: 1; transform: scale(1); }
.direction-line-x { position: relative; height: 16px; margin-top: 6px; }
.direction-line-x span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; color: var(--direction-muted); white-space: nowrap; }
.direction-columns-legend i.is-line { width: 16px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #19b3a0, #056e66); vertical-align: 2px; }
.direction-columns-legend i.is-dash { width: 16px; height: 3px; border-radius: 2px; background: #c9962f; vertical-align: 3px; }

/* --- Bandeja de aprobaciones --------------------------------------------- */
.direction-approval-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.direction-approval { appearance: none; font: inherit; color: inherit; text-align: left; border: 1px solid rgba(16,33,58,.09); border-left: 4px solid var(--direction-gold); border-radius: 14px; background: #fff; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: box-shadow .2s, transform .2s, border-color .2s; animation: direction-rise-in .4s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.direction-approval:hover { border-color: rgba(7,141,128,.4); border-left-color: var(--direction-teal); box-shadow: 0 10px 26px rgba(16,33,58,.08); transform: translateY(-1px); }
.direction-approval-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.direction-approval-top b { font-size: 14px; }
.direction-approval-amount { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--direction-ink); }
.direction-approval-mid { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--direction-muted); min-width: 0; }
.direction-approval-mid > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direction-approval-mid .is-strong { color: var(--direction-ink); font-weight: 700; }
.direction-approval-mid small { white-space: nowrap; }
.direction-approval-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

.direction-detail-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: rgba(7,141,128,.06); }
.direction-detail-hero strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--direction-teal-dark); font-variant-numeric: tabular-nums; }
.direction-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.direction-detail-risk { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; background: rgba(46,158,107,.1); color: #1f7a50; }
.direction-detail-risk[data-tone="high"] { background: rgba(194,66,47,.1); color: var(--direction-red); }
.direction-detail-risk[data-tone="review"] { background: rgba(214,168,75,.18); color: #7a5a10; }
.direction-detail-title { margin: 6px 0 0; font-size: 12px; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; color: var(--direction-muted); display: flex; justify-content: space-between; align-items: baseline; }
.direction-detail-title small { font-weight: 600; letter-spacing: 0; text-transform: none; }
.direction-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 18px; }
.direction-detail-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(16,33,58,.07); font-size: 13px; }
.direction-detail-item span { color: var(--direction-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.direction-detail-item b { text-align: right; min-width: 0; overflow-wrap: anywhere; }
a.direction-ghost-button { text-decoration: none; }

/* --- Pop up: conversaciones mas limpias ---------------------------------- */
.direction-modal-body { background: linear-gradient(180deg, #f7fafc, #fff 120px); }
.direction-modal-head h3 { display: flex; align-items: center; gap: 8px; }
.direction-msg { max-width: 84%; box-shadow: 0 2px 8px rgba(16,33,58,.05); }
.direction-msg.is-user { background: #e8eef6; border-bottom-right-radius: 5px; }
.direction-msg.is-assistant { background: #fff; border: 1px solid rgba(7,141,128,.18); border-bottom-left-radius: 5px; }
.direction-msg-meta { font-size: 11px; }
.direction-msg.is-assistant .direction-msg-meta { color: var(--direction-teal-dark); }
.direction-msg-text p { margin: 0 0 8px; }
.direction-msg-text p:last-child { margin-bottom: 0; }
.direction-msg-text ul, .direction-msg-text ol { margin: 6px 0; padding-left: 20px; }
.direction-convo-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.direction-leaf-mini { border-radius: 0; object-fit: contain; }

/* --- Rol como texto de color ---------------------------------------------- */
.direction-role { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--direction-teal-dark); margin-left: 4px; }
.direction-role[data-role="supervisor"] { color: #5b5fc7; }
.direction-role[data-role="admin"] { color: #b0662a; }
.direction-role[data-role="cobranza"] { color: #7a5a10; }

/* --- Calendario ------------------------------------------------------------ */
.direction-cal-wrap { position: relative; }
.direction-cal-button { appearance: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--direction-muted); background: #fff; border: 1px solid rgba(16,33,58,.14); border-radius: 999px; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: border-color .15s, color .15s, box-shadow .15s; }
.direction-cal-button:hover { border-color: var(--direction-teal); color: var(--direction-teal-dark); }
.direction-cal-button.is-active { background: var(--direction-teal); border-color: var(--direction-teal); color: #fff; }
.direction-cal { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 292px; background: #fff; border: 1px solid rgba(16,33,58,.1); border-radius: 16px; box-shadow: 0 18px 44px rgba(16,33,58,.18); padding: 12px; animation: direction-rise .2s cubic-bezier(.3,.8,.25,1); }
.direction-cal[hidden] { display: none; }
.direction-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.direction-cal-head b { font-size: 13.5px; text-transform: capitalize; }
.direction-cal-nav { appearance: none; border: 1px solid rgba(16,33,58,.12); background: #fff; width: 30px; height: 30px; border-radius: 9px; cursor: pointer; display: grid; place-items: center; color: var(--direction-muted); }
.direction-cal-nav:hover:not(:disabled) { border-color: var(--direction-teal); color: var(--direction-teal-dark); }
.direction-cal-nav:disabled { opacity: .35; cursor: default; }
.direction-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.direction-cal-dow { font-size: 10.5px; font-weight: 700; color: var(--direction-muted); text-align: center; padding: 4px 0; }
.direction-cal-day { appearance: none; border: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--direction-ink); height: 34px; border-radius: 10px; cursor: pointer; position: relative; transition: background .15s, color .15s, transform .15s; }
.direction-cal-day:hover:not(:disabled) { background: rgba(7,141,128,.1); }
.direction-cal-day:active:not(:disabled) { transform: scale(.94); }
.direction-cal-day:disabled { color: rgba(16,33,58,.3); cursor: default; }
.direction-cal-day.is-today { font-weight: 800; color: var(--direction-teal-dark); }
.direction-cal-day.is-selected { background: var(--direction-teal); color: #fff; box-shadow: 0 6px 14px rgba(7,141,128,.3); }
.direction-cal-day i { position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--direction-teal); }
.direction-cal-day.is-selected i { background: #fff; }
.direction-cal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11.5px; color: var(--direction-muted); }
.direction-cal-legend { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--direction-teal); margin-right: 4px; vertical-align: 1px; }
@media (max-width: 720px) { .direction-cal { right: auto; left: 0; } }