/* /Shared/EmptyState.razor.rz.scp.css */
.empty-state[b-t83aa9yiei] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    text-align: center;
}

/* ::deep because these two classes ride on MudIcon and MudText. CSS isolation stamps its scope
   attribute only on elements this component renders itself, so a bare `.empty-state__icon` rule
   compiles to `.empty-state__icon[b-hash]` and matches nothing — the icon and message rendered
   unstyled. Anchored on .empty-state, which is a plain <div> and does carry the attribute.
   font-size (not width/height) is right for the icon: MudBlazor sizes its SVG icons at 1em. */
.empty-state[b-t83aa9yiei]  .empty-state__icon {
    color: var(--mud-palette-text-disabled);
    font-size: 3rem;
}

.empty-state[b-t83aa9yiei]  .empty-state__msg {
    color: var(--mud-palette-text-secondary);
}

.empty-state__actions[b-t83aa9yiei] {
    margin-top: 8px;
}
/* /Shared/StatusFlowDiagram.razor.rz.scp.css */
/* Status-flow diagram. All SVG colors ride CSS variables (no fill/stroke attributes in the
   markup) so the .app-dark class swap re-themes the drawing. Light-mode entry/final colors
   match the hand-drawn WF MAPPING 2.0.drawio palette. */

.wf-flow[b-86ez3znfqx] {
    --wf-node-fill: var(--mud-palette-surface, #fff);
    --wf-node-stroke: var(--mud-palette-lines-default, #c8d0d8);
    --wf-text: var(--mud-palette-text-primary, #1d2b36);
    --wf-entry-fill: #B3D9FF;   /* drawio CREADO */
    --wf-entry-stroke: #004080;
    --wf-final-fill: #FFCDD2;   /* drawio DECLINADO / EMITIDA / COTIZADO NO EMITIDO */
    --wf-final-stroke: #C62828;
    --wf-edge: var(--op-muted, #5B6B7A);
    --wf-hot: var(--mud-palette-primary, #222222);
    margin-top: 4px;
}

/* Blazor CSS isolation scopes the LAST compound selector, so this compiles to
   .app-dark .wf-flow[b-xxx] and matches the app-dark class set by appSetDarkClass. */
.app-dark .wf-flow[b-86ez3znfqx] {
    --wf-entry-fill: #123049;
    --wf-entry-stroke: #4FA3CE;
    --wf-final-fill: #3A191C;
    --wf-final-stroke: #E57373;
    --wf-edge: var(--op-muted-2, #93A1AE);
}

.wf-flow__caption[b-86ez3znfqx] {
    font-size: 12.5px;
    color: var(--op-muted, #5B6B7A);
    margin-bottom: 8px;
}

.wf-flow__scroll[b-86ez3znfqx] {
    overflow-x: auto;
}

/* Scales down with the pane; the inline max-width stops it from upscaling past the computed
   viewBox, and the min-width guards legibility (overflow scrolls instead of squeezing). */
.wf-flow__svg[b-86ez3znfqx] {
    display: block;
    width: 100%;
    height: auto;
    min-width: 560px;
    margin: 0 auto;
}

/* ── Nodes ──────────────────────────────────────────────────────────────── */

.wf-node rect[b-86ez3znfqx] {
    fill: var(--wf-node-fill);
    stroke: var(--wf-node-stroke);
    stroke-width: 1.25;
}

.wf-node text[b-86ez3znfqx] {
    fill: var(--wf-text);
    font-size: 12.5px; /* keep in sync with StatusFlowLayout.FontSize (text-width estimate) */
}

.wf-node--entry rect[b-86ez3znfqx] {
    fill: var(--wf-entry-fill);
    stroke: var(--wf-entry-stroke);
    stroke-width: 2;
}

.wf-node--final rect[b-86ez3znfqx] {
    fill: var(--wf-final-fill);
    stroke: var(--wf-final-stroke);
    stroke-width: 2;
}

.wf-node--entry text[b-86ez3znfqx],
.wf-node--final text[b-86ez3znfqx] {
    font-weight: 700; /* drawio fontStyle=1 on the highlighted boxes */
}

.wf-node:hover rect[b-86ez3znfqx] {
    stroke-width: 2;
}

/* ── Edges ──────────────────────────────────────────────────────────────── */

/* Invisible fat twin of each line so thin edges are easy to hover for the tooltip. */
.wf-edge__hit[b-86ez3znfqx] {
    fill: none;
    stroke: transparent;
    stroke-width: 11;
    pointer-events: stroke;
}

.wf-edge__line[b-86ez3znfqx] {
    fill: none;
    stroke: var(--wf-edge);
    stroke-width: 1.5;
}

.wf-edge--back .wf-edge__line[b-86ez3znfqx] {
    stroke-dasharray: 6 4;
}

/* No marker swap on hover. The sister app defines a second "hot" marker and points at
   it here; that only works while exactly one diagram renders per page, because a fixed
   marker id resolves to whichever instance defined it first. This page shows BOTH
   machines, so the ids are per-instance and the line alone highlights. */
.wf-edge:hover .wf-edge__line[b-86ez3znfqx] {
    stroke: var(--wf-hot);
    stroke-width: 2.5;
}

.wf-flow__arrowhead[b-86ez3znfqx] {
    fill: var(--wf-edge);
}

/* ── Legend ─────────────────────────────────────────────────────────────── */

.wf-flow__legend[b-86ez3znfqx] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--op-muted, #5B6B7A);
}

.wf-flow__key[b-86ez3znfqx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wf-flow__swatch[b-86ez3znfqx] {
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 3px;
    border: 1.5px solid var(--wf-node-stroke);
    background: var(--wf-node-fill);
}

.wf-flow__swatch--entry[b-86ez3znfqx] {
    background: var(--wf-entry-fill);
    border-color: var(--wf-entry-stroke);
}

.wf-flow__swatch--final[b-86ez3znfqx] {
    background: var(--wf-final-fill);
    border-color: var(--wf-final-stroke);
}

.wf-flow__note[b-86ez3znfqx] {
    margin-top: 8px;
    font-size: 12px;
    font-style: italic;
    color: var(--op-muted, #5B6B7A);
}

/* ── Back-edge swatch and the unreachable warning ────────────────────────── */
/* Both are additions over the sister app's diagram. The warning is the reason this
   drawing earns its place: a matrix of checkboxes is complete and cannot show you
   that you have just built a status nothing can reach. */

.wf-flow__swatch--back[b-86ez3znfqx] {
    background: transparent;
    border: none;
    border-top: 2px dashed var(--wf-edge);
    height: 0;
    align-self: center;
}

.wf-flow__warn[b-86ez3znfqx] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--mud-palette-warning-darken, #8a5a00);
    background: rgba(199, 125, 20, .10);
    border: 1px solid rgba(199, 125, 20, .28);
}

.app-dark .wf-flow__warn[b-86ez3znfqx] {
    color: #E9B45C;
    background: rgba(233, 180, 92, .10);
    border-color: rgba(233, 180, 92, .28);
}