/* Lo propio de la consola de Aletheia (prefijo `fb-`): solo lo que no está en el ui-kit. Los colores, con los tokens
   de app.css; el lima de Aletheia solo identifica la aplicación (lo pone el kit en la barra) y marca los pines. */
.fb-main { flex: 1 1 auto; min-width: 0; padding: calc(var(--ov-sh-head, 156px) + 16px) 24px 32px 0; }   /* FB-15: a todo el ancho, como el resto de la suite (§1) */
.fb-card { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e4e8ec); border-radius: 10px; padding: 20px 24px; }
.fb-card + .fb-card { margin-top: 16px; }
.fb-card h1 { font-size: 20px; margin: 0 0 12px; }
/* FB-31: en la tarjeta de la pantalla, el título lo dicen las migas (queda para quien lee con lector de pantalla) y la
   explicación está en el «+info» del final de las migas */
.fb-card-page > .fb-page-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fb-card-page > .fb-page-about { display: none; }
.fb-card h2 { font-size: 15px; margin: 0 0 10px; }
.fb-card h3 { font-size: 13px; margin: 12px 0 6px; }
.fb-muted { color: var(--color-text-muted, #6b7280); }
.fb-warning { padding: 10px 12px; border-left: 4px solid var(--color-warning, #c98a00); background: var(--color-warning-soft, #fff7e0); border-radius: 6px; }
.fb-text-crit { color: var(--color-danger, #b42318); }
.fb-text-ok { color: var(--color-success, #067647); }
/* Solo cuando el login acaba de fallar (sin sesión no hay barra de la suite): centrado en la pantalla. */
.fb-no-session .fb-main { padding: 15vh 16px 32px; max-width: none; }
.fb-signin { max-width: 520px; margin: 0 auto; text-align: center; }
.fb-button { display: inline-block; margin-top: 12px; padding: 8px 18px; border-radius: 8px; border: 0; background: var(--color-primary, #1f6feb); color: #fff; text-decoration: none; cursor: pointer; font: inherit; }
.fb-button-quiet { margin-top: 0; padding: 3px 10px; background: transparent; color: var(--color-primary-strong, #1158c7); border: 1px solid var(--color-border, #d0d7de); }
.fb-button[disabled] { opacity: .6; cursor: default; }

.fb-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.fb-field { display: grid; gap: 4px; font-size: 13px; }
.fb-field input, .fb-field select { font: inherit; padding: 6px 8px; border: 1px solid var(--color-border, #d0d7de); border-radius: 6px; }
.fb-field input[type=checkbox] { justify-self: start; }
.fb-form { display: grid; gap: 10px; max-width: 560px; margin: 8px 0 0; }
.fb-form .fb-button { justify-self: start; }

.fb-table-wrap { overflow-x: auto; }
.fb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fb-table th, .fb-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--color-border, #e4e8ec); vertical-align: top; }
.fb-table th { font-weight: 600; color: var(--color-text-muted, #6b7280); }
.fb-table td { overflow-wrap: break-word; }
.fb-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: var(--color-border, #e4e8ec); white-space: nowrap; }
.fb-badge-ok { background: #dcfce7; color: #166534; }
.fb-badge-info { background: #e0ecff; color: #1e3a8a; }
.fb-badge-warn { background: #fef3c7; color: #92400e; }
.fb-badge-crit { background: #fee2e2; color: #991b1b; }
.fb-tags { margin: 0 0 12px; }
.fb-detail { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13px; margin: 0; }
.fb-detail dt { color: var(--color-text-muted, #6b7280); }
.fb-detail dd { margin: 0; overflow-wrap: anywhere; }
.fb-quote { margin: 0; padding: 10px 14px; border-left: 4px solid #b1b228; background: var(--color-surface-2, #f6f8fa); border-radius: 6px; white-space: pre-wrap; }
.fb-pins-list { margin: 10px 0 0; padding-left: 20px; font-size: 13px; }
.fb-pre { white-space: pre-wrap; word-break: break-word; font-family: var(--ov-font-mono, monospace); font-size: 12px; padding: 10px; border-radius: 6px; background: var(--color-surface-2, #f6f8fa); max-height: 480px; overflow: auto; }

/* La captura con sus pines: el marco a la escala de la imagen y cada pin en % de la ventana (CSSOM). */
.fb-shot { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--color-border, #e4e8ec); border-radius: 6px; overflow: hidden; }
.fb-shot img { display: block; max-width: 100%; height: auto; }
.fb-pin { position: absolute; box-sizing: border-box; border: 3px solid #b1b228; border-radius: 6px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .18);
  min-width: 18px; padding: 0; color: #282828; font-size: 12px; font-weight: 700; line-height: 18px; text-align: left; text-indent: 5px;
  /* el número del pin, sobre una pastilla lima en la esquina */
  background: linear-gradient(#b1b228, #b1b228) top left / 18px 18px no-repeat; }
.fb-net-body:empty { display: none; }

/* F3: la conversación, los borradores y las acciones */
.fb-msg { border: 1px solid var(--color-border, #e4e8ec); border-radius: 8px; padding: 8px 12px; margin: 0 0 8px; }
.fb-msg-head { font-size: 12px; color: var(--color-text-muted, #6b7280); margin-bottom: 4px; }
.fb-msg-body { margin: 0; white-space: pre-wrap; }
.fb-msg-reporter { border-left: 4px solid #b1b228; }
.fb-msg-ai { border-left: 4px solid #7c8db5; }
.fb-msg-internal { background: var(--color-surface-2, #f6f8fa); }
.fb-msg-draft { border-style: dashed; border-color: var(--color-warning, #c98a00); }
.fb-textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--color-border, #d0d7de); border-radius: 6px; width: 100%; box-sizing: border-box; }
.fb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.fb-row .fb-button { margin-top: 0; }
/* F19 · Decidir: cada opción con su porqué y lo que pasa al elegirla */
.fb-option { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--color-border, #e4e8ec); border-radius: 8px; margin-top: 6px; cursor: pointer; }
.fb-option input { margin-top: 3px; }
.fb-block { display: block; margin-top: 2px; }
.fb-filters .fb-button { align-self: end; margin-top: 0; }

.fb-video { display: block; max-width: 100%; max-height: 480px; margin: 8px 0; }

/* F6: cifras, novedades y el mapa de calor */
.fb-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 16px; }
.fb-kpi { flex: 1 1 170px; border: 1px solid var(--color-border, #e4e8ec); border-radius: 8px; padding: 10px 12px; }
.fb-kpi-value { font-size: 22px; font-weight: 600; }
.fb-kpi-label { font-size: 12px; color: var(--color-text-muted, #6b7280); }
/* F23 · el Inicio: lo que depende de ti, con el color de su urgencia, y cada tarjeta lleva a su lista */
.fb-kpi-link { display: block; color: inherit; text-decoration: none; }
.fb-kpi-link:hover, .fb-kpi-link:focus-visible { border-color: var(--color-primary, #1f6feb); }
.fb-kpi-crit { border-left: 4px solid var(--color-danger, #b42318); }
.fb-kpi-warn { border-left: 4px solid var(--color-warning, #c98a00); }
.fb-kpi-info { border-left: 4px solid var(--color-primary, #1f6feb); }
.fb-kpi-muted { border-left: 4px solid var(--color-border, #d0d7de); }
/* FB-61: las cifras de Casos (pulsar filtra la tabla; la activa, marcada) */
.fb-case-counters { margin: 4px 0 8px; }
.fb-counter-title { font-size: 13px; font-weight: 600; margin: 8px 0 4px; color: var(--color-text-muted, #6b7280); }
.fb-case-counters .fb-kpis { margin: 0 0 8px; }
.fb-case-counters .fb-kpi { flex: 0 1 150px; padding: 8px 10px; }
.fb-kpi-active { border-color: var(--color-primary, #1f6feb); box-shadow: inset 0 0 0 1px var(--color-primary, #1f6feb); }
.fb-uptodate { padding: 10px 12px; border-left: 4px solid var(--color-success, #067647); background: var(--color-success-soft, #ecfdf3); border-radius: 6px; }
.fb-num-warn { font-weight: 600; color: var(--color-warning, #c98a00); }
.fb-views { gap: 10px; margin: 8px 0 12px; flex-wrap: wrap; }
.fb-view-saved { display: inline-flex; align-items: center; gap: 2px; }
.fb-view-off { border: 0; background: transparent; color: var(--color-muted, #57606a); cursor: pointer; font: inherit; padding: 0 4px; border-radius: 4px; }
.fb-view-off:hover, .fb-view-off:focus-visible { color: #c62828; background: var(--color-surface-2, #f3f4f6); }
.fb-news { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.fb-heat { display: inline-block; height: 10px; border-radius: 5px; background: #b1b228; min-width: 4px; }

@media (max-width: 900px) { .fb-main { padding-top: calc(var(--ov-sh-head, 116px) + 12px); } }

/* F10 · ideas: apuntar (también en el móvil), la lista y la ficha */
.fb-idea-form { max-width: 720px; }
.fb-idea-form.is-big .fb-idea-text { font-size: 17px; min-height: 40vh; }
.fb-button.is-recording { background: #c62828; color: #fff; border-color: #c62828; }
.fb-idea-done { padding: 8px 12px; border-radius: 8px; background: var(--color-surface-alt, #f3f6e4); }
.fb-idea-said { white-space: pre-wrap; }
@media (max-width: 640px) {
  .fb-idea-form .fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .fb-idea-form .fb-button { width: 100%; padding: 12px; }
}
.fb-idea-covered { padding: 6px 10px; border-left: 3px solid var(--color-warning, #b58100); }
.fb-idea-decision { max-width: 820px; }
.fb-idea-req { display: grid; gap: 6px; border: 1px solid var(--color-border, #d0d7de); border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; }
.fb-idea-req .fb-button { justify-self: start; }

/* F10.3 · el roadmap ordenable (IDE-5) */
.fb-rank { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.fb-rank-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--color-border, #d0d7de); border-radius: 8px; background: var(--color-surface, #fff); }
.fb-rank-item[draggable=true] { cursor: grab; }
.fb-rank-item.is-dragging { opacity: .5; }
.fb-rank-handle { color: var(--color-muted, #6b7280); user-select: none; }
.fb-rank-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.fb-rank-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; }
.fb-rank-tools { display: flex; gap: 4px; align-items: center; }
@media (max-width: 640px) { .fb-rank-item { flex-wrap: wrap; } .fb-rank-tools { width: 100%; } }

/* F10.5 · el mapa mental (IDE-6) */
.fb-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.fb-map-canvas { overflow: auto; border: 1px solid var(--color-border, #d0d7de); border-radius: 8px; background: var(--color-surface, #fff); max-height: 75vh; }
.fb-map-panel { display: grid; gap: 8px; position: sticky; top: 8px; }
.fb-map text { font: 12px var(--font-family, inherit); fill: var(--color-text, #1f2328); }
.fb-map .fb-map-col { font-weight: 600; font-size: 13px; }
.fb-map .fb-map-group { font-style: italic; fill: var(--color-muted, #6b7280); }
.fb-map .fb-map-sub { fill: var(--color-muted, #6b7280); font-size: 11px; }
.fb-map-node { cursor: pointer; }
.fb-map-node rect { fill: var(--color-surface, #fff); stroke: var(--color-border, #d0d7de); stroke-width: 1.5; }
.fb-map-node.is-idea rect { stroke: #6d8a00; }
.fb-map-node.is-requirement rect { stroke: #1f6feb; }
.fb-map-node.is-app rect { fill: var(--color-surface-alt, #f6f8fa); stroke: #57606a; }
.fb-map-node.is-note rect { fill: #fff8c5; stroke: #d4a72c; }
.fb-map-node.is-cross-app rect { stroke: #bf3989; stroke-width: 2.5; }
.fb-map-node.st-merged, .fb-map-node.st-dropped, .fb-map-node.st-done { opacity: .55; }
.fb-map-node:focus rect, .fb-map-node:hover rect { stroke-width: 3; }
.fb-map-edge { fill: none; stroke: #8c959f; stroke-width: 1.3; }
.fb-map-edge.kind-proposed_for { stroke-dasharray: 5 4; }
.fb-map-edge.kind-merged_into, .fb-map-edge.kind-split_from { stroke: #6d8a00; stroke-dasharray: 2 3; }
.fb-map-edge.kind-note_on { stroke: #d4a72c; }
@media (prefers-color-scheme: dark) { .fb-map-node.is-note rect { fill: #3b3300; } }
@media (max-width: 900px) { .fb-map-layout { grid-template-columns: 1fr; } .fb-map-panel { position: static; } }

/* F14.2 · el roadmap por estado (DEM-7) */
.fb-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.fb-board-col { background: var(--color-surface-alt, #f6f8fa); border-radius: 8px; padding: 8px; }
.fb-board-col .fb-rank-item { background: var(--color-surface, #fff); }
/* F21 · «Decidir todo de una vez»: las opciones como en el chat, con su letra */
.fb-wizard details { margin: 8px 0 4px; }
.fb-wizard summary { cursor: pointer; color: var(--color-primary, #1f6feb); }
.fb-progress { height: 4px; border-radius: 2px; background: var(--color-surface-2, #f0f2f4); overflow: hidden; margin-bottom: 8px; }
.fb-progress span { display: block; height: 100%; background: var(--color-primary, #1f6feb); transition: width .2s; }
.fb-ask { font-size: 17px; margin: 16px 0 6px; }
.fb-choices { display: grid; gap: 8px; margin: 10px 0; }
.fb-choice { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; padding: 10px 12px; border: 1px solid var(--color-border, #d0d7de); border-radius: 10px; background: var(--color-surface, #fff); color: inherit; font: inherit; cursor: pointer; }
.fb-choice:hover, .fb-choice:focus-visible { border-color: var(--color-primary, #1f6feb); }
.fb-choice[aria-pressed="true"] { border-color: var(--color-primary, #1f6feb); box-shadow: 0 0 0 2px var(--color-primary, #1f6feb) inset; }
.fb-choice.is-recommended { border-style: solid; border-color: var(--color-success, #2e7d32); }
.fb-choice-key { flex: none; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; background: var(--color-surface-2, #f0f2f4); }
.fb-review { border-top: 1px solid var(--color-border, #e4e8ec); padding-top: 8px; margin-top: 8px; }
/* FB-3 · el orden de prioridad de Casos, con las mismas etiquetas que la tabla */
.fb-priority-order { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 6px 0 10px; padding: 0; counter-reset: fb-order; }
.fb-priority-order li { display: inline-flex; align-items: center; gap: 6px; counter-increment: fb-order; }
.fb-priority-order li::before { content: counter(fb-order) "."; color: var(--color-text-muted, #57606a); font-variant-numeric: tabular-nums; }
/* UX-2 · el ciclo del caso: lo hecho, dónde está y lo que falta */
.fb-cycle { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 10px; padding: 0; }
.fb-cycle li { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--color-border, #e4e8ec); color: var(--color-text-muted, #57606a); font-size: 13px; }
.fb-cycle li.is-done { background: var(--color-surface-2, #f6f8fa); }
.fb-cycle li.is-now { border-color: var(--color-primary, #1f6feb); background: var(--color-primary, #1f6feb); color: #fff; font-weight: 600; }

/* FB-41 · el selector de suite de la barra, como el de inquilino */
/* TRU-7: un enlace dentro de un texto no se distingue solo por el color (WCAG 1.4.1) */
.fb-card p a, .fb-muted a { text-decoration: underline; text-underline-offset: 2px; }

/* FB-136 · el buscador de la barra, al lado del selector de suite (en la barra oscura del kit, como su desplegable) */
.fb-bar-search { display: flex; align-items: center; margin-right: 8px; }
.fb-bar-search input {
  font: 13px var(--ov-sh-font); color: var(--ov-sh-bar-ink); background: var(--ov-sh-bar-control); border: 1px solid var(--ov-sh-bar-line);
  border-radius: 6px; padding: 4px 8px; width: 170px;
}
.fb-bar-search input::placeholder { color: var(--ov-sh-bar-muted); opacity: 1; }
@media (max-width: 700px) { .fb-bar-search input { width: 110px; } }