/* Flow canvas and flow screens (future-features/33). Theme tokens only: the dark/light palette comes from design-system.css. */

/* ── Node card ─────────────────────────────────────────────────────────────── */
.fc-node {
  position: relative; width: 100%; height: 100%; box-sizing: border-box;
  background: var(--ds-color-surface-1); color: var(--ds-color-text);
  border: 1px solid var(--ds-color-border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); font-family: var(--font-body); font-size: 12px;
  user-select: none;
}
.fc-node--selected { border-color: var(--gold-500); box-shadow: 0 0 0 2px var(--gold-500); }
.fc-node--problem { border-color: var(--red-500); }
.fc-node--problem.fc-node--selected { box-shadow: 0 0 0 2px var(--red-500); }
.fc-node__header {
  display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); box-sizing: border-box;
  border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 1px solid var(--ds-color-border);
  border-left: 4px solid var(--fc-accent); background: var(--ds-color-surface-2);
}
.fc-node__icon { font-size: 18px; color: var(--fc-accent); flex: none; }
.fc-node__titles { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.fc-node__title { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-node__subtitle { color: var(--ds-color-text-muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-node__kind { color: var(--ds-color-text); font-weight: 600; }
.fc-badge {
  flex: none; min-width: 20px; padding: 1px 6px; border-radius: var(--r-pill); text-align: center;
  background: var(--gold-500); color: var(--on-accent); font-weight: 700; font-size: 11px;
}
.fc-badge--problem { display: inline-flex; align-items: center; gap: 3px; background: var(--red-500); color: var(--white); cursor: help; }
.fc-out { display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--space-4) 0 var(--space-3); position: relative; }
.fc-out__label { color: var(--ds-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-out--open .fc-out__label { color: var(--red-500); font-weight: 600; }
.fc-dot {
  position: absolute; width: 14px; height: 14px; box-sizing: border-box; margin-top: -7px; border-radius: 50%;
  background: var(--ds-color-primary); border: 2px solid var(--ds-color-surface-1); pointer-events: none;
}
.fc-dot--in { left: -7px; }
.fc-dot--out { right: -7px; top: 50%; }
.fc-dot--open { background: var(--red-500); box-shadow: 0 0 0 2px var(--red-100); }

:root { --fc-line: var(--gray-400); }

/* ── Editor layout: palette, canvas, side panel ───────────────────────────── */
.fc-editor { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); min-height: 0; flex: 1; }
.fc-editor:not(:has(.fc-palette)) { grid-template-columns: minmax(0, 1fr); }
.fc-palette {
  width: 160px; background: var(--ds-color-surface-1); border: 1px solid var(--ds-color-border); border-radius: var(--r-lg);
  padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); overflow: auto;
}
.fc-palette h4 { margin: 0 0 var(--space-1); font-size: 12px; color: var(--ds-color-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.fc-palette__hint { margin: 0; font-size: 11px; color: var(--ds-color-text-muted); }
.fc-chip {
  display: flex; align-items: center; gap: var(--space-2); padding: 6px 8px; border-radius: var(--r-md); cursor: grab;
  border: 1px solid var(--ds-color-border); border-left: 4px solid var(--fc-accent); background: var(--ds-color-surface-2);
  color: var(--ds-color-text); font-size: 12px;
}
.fc-chip i { color: var(--fc-accent); }
.fc-chip--disabled { opacity: .45; cursor: not-allowed; }
.fc-stage { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; min-height: 0; }
.fc-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.fc-toolbar button {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: var(--r-md); cursor: pointer; font-size: 12px;
  border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-1); color: var(--ds-color-text);
}
.fc-toolbar button:hover { border-color: var(--gold-500); }
.fc-toolbar button[aria-pressed="true"] { border-color: var(--gold-500); background: var(--gold-100); color: var(--gray-900); }
.fc-canvas {
  position: relative; border: 1px solid var(--ds-color-border); border-radius: var(--r-lg); overflow: hidden; flex: 1; min-height: 520px;
  background-color: var(--ds-color-surface-2);
  background-image: radial-gradient(var(--ds-color-border) 1px, transparent 1px); background-size: 20px 20px;
}
.fc-canvas .e-diagram { background: transparent; }
.fc-overview {
  position: absolute; left: 10px; bottom: 10px; z-index: 5; border: 1px solid var(--ds-color-border);
  background: var(--ds-color-surface-1); border-radius: var(--r-md); overflow: hidden; cursor: pointer; touch-action: none;
}
/* The minimap (FlowMiniMap): two stacked drawings with the same view box, the flow below and the box of what is on screen above. */
.fc-minimap-box { position: relative; width: 190px; height: 120px; }
.fc-minimap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.fc-minimap__node { opacity: .85; }
.fc-minimap__edge { stroke: var(--fc-line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fc-minimap__view { fill: var(--gold-100); fill-opacity: .25; stroke: var(--gold-500); stroke-width: 2px; vector-effect: non-scaling-stroke; }

/* Moving around: a hand over an empty spot of the canvas, a closed hand while it is dragged (the classes are set by flow-canvas.js;
   they beat the cursor the diagram writes inline on its own element). */
.fc-canvas .e-diagram { touch-action: none; }
.fc-canvas--grab .e-diagram, .fc-canvas--grab .e-diagram * { cursor: grab !important; }
.fc-canvas--panning .e-diagram, .fc-canvas--panning .e-diagram * { cursor: grabbing !important; }

/* ── Pages: list and editor ────────────────────────────────────────────────── */
.flw-page { display: flex; flex-direction: column; gap: var(--space-3); }
.flw-head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.flw-title { margin: 0; font-size: 18px; color: var(--ds-color-text); display: flex; align-items: center; gap: var(--space-2); }
.flw-sub { margin: 2px 0 0; font-size: 12px; color: var(--ds-color-text-muted); }
.flw-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
/* «Responsable de respaldo» on the list of flows: who gets what no step can give to an active person. */
.flw-fallback { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--ds-color-surface-1); border: 1px solid var(--ds-color-border); border-radius: var(--r-lg); }
.flw-fallback:has(> .flw-sub:only-child) { padding: var(--space-2) var(--space-3); }
.flw-fallback__title { margin: 0; font-size: 14px; color: var(--ds-color-text); display: flex; align-items: center; gap: var(--space-2); }
.flw-fallback__row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-end; }
.flw-fallback__row .flw-field { min-width: 260px; }
.flw-spin { display: inline-block; animation: flw-spin 1s linear infinite; }
@keyframes flw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .flw-spin { animation: none; } }
.flw-table { width: 100%; border-collapse: collapse; background: var(--ds-color-surface-1); border: 1px solid var(--ds-color-border); border-radius: var(--r-lg); overflow: hidden; }
.flw-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ds-color-text-muted); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--ds-color-border); }
.flw-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--ds-color-border); font-size: 13px; color: var(--ds-color-text); vertical-align: middle; }
.flw-table tr:last-child td { border-bottom: 0; }
.flw-name { font-weight: 600; color: var(--ds-color-text); text-decoration: none; }
.flw-name:hover { color: var(--gold-500); }
.flw-pill { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-2); color: var(--ds-color-text-muted); }
.flw-pill--draft { border-color: var(--orange-border); background: var(--orange-100); color: var(--orange-500); }
.flw-pill--live { border-color: var(--green-border); background: var(--green-100); color: var(--green-600); }
.flw-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ds-color-text-muted); }
.flw-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-md); cursor: pointer; font-size: 13px;
  border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-1); color: var(--ds-color-text);
}
.flw-btn:hover:not(:disabled) { border-color: var(--gold-500); }
.flw-btn:disabled { opacity: .5; cursor: not-allowed; }
.flw-btn--primary { background: var(--gold-500); border-color: var(--gold-500); color: var(--on-accent); font-weight: 600; }
.flw-btn--danger { border-color: var(--red-border); color: var(--red-500); }
.flw-btn--sm { padding: 3px 8px; font-size: 12px; }
.flw-icon-btn { padding: 4px 6px; }
.flw-banner { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--r-md); font-size: 13px; border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-1); color: var(--ds-color-text); }
.flw-banner--error { border-color: var(--red-border); background: var(--red-100); color: var(--red-600); }
.flw-banner--warn { border-color: var(--orange-border); background: var(--orange-100); color: var(--orange-500); }
.flw-banner--ok { border-color: var(--green-border); background: var(--green-100); color: var(--green-600); }
.flw-save { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; color: var(--ds-color-text-muted); }
.flw-save--dirty { color: var(--orange-500); }
.flw-save--error { color: var(--red-500); }
.flw-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.flw-workspace--panel { grid-template-columns: minmax(0, 1fr) 380px; }
.flw-workspace--problems { grid-template-columns: minmax(0, 1fr) 280px; }
.flw-workspace--panel.flw-workspace--problems { grid-template-columns: minmax(0, 1fr) 380px; }
@media (max-width: 1100px) { .flw-workspace--panel, .flw-workspace--problems, .flw-workspace--panel.flw-workspace--problems { grid-template-columns: minmax(0, 1fr); } }
.flw-side { background: var(--ds-color-surface-1); border: 1px solid var(--ds-color-border); border-radius: var(--r-lg); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); max-height: 760px; overflow: auto; }
.flw-side h4 { margin: 0; font-size: 13px; color: var(--ds-color-text); }
.flw-problems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.flw-problem { text-align: left; width: 100%; cursor: pointer; padding: var(--space-2); border-radius: var(--r-md); border: 1px solid var(--red-border); background: var(--red-100); color: var(--red-600); font-size: 12px; }
.flw-problem__where { display: block; font-weight: 600; margin-bottom: 2px; }

/* ── Double-click panel ────────────────────────────────────────────────────── */
.flw-panel { display: flex; flex-direction: column; gap: var(--space-3); }
.flw-panel__head { display: flex; align-items: center; gap: var(--space-2); }
.flw-panel__head i { font-size: 18px; color: var(--fc-accent); }
.flw-panel__title { margin: 0; font-size: 14px; flex: 1; color: var(--ds-color-text); }
.flw-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--ds-color-border); }
.flw-tab { padding: 6px 10px; cursor: pointer; font-size: 12px; border: 0; background: transparent; color: var(--ds-color-text-muted); border-bottom: 2px solid transparent; }
.flw-tab[aria-selected="true"] { color: var(--ds-color-text); border-bottom-color: var(--gold-500); font-weight: 600; }
.flw-form { display: flex; flex-direction: column; gap: var(--space-3); border: 0; margin: 0; padding: 0; min-width: 0; }
.flw-field { display: flex; flex-direction: column; gap: 4px; }
.flw-field > label, .flw-label { font-size: 11px; color: var(--ds-color-text-muted); font-weight: 600; }
.flw-field input[type="text"], .flw-field input[type="number"], .flw-field input[type="time"], .flw-field select, .flw-field textarea,
.flw-inline input[type="number"], .flw-inline select, .flw-inline input[type="time"] {
  width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: var(--r-md); font-family: inherit; font-size: 13px;
  border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-2); color: var(--ds-color-text);
}
.flw-field textarea { resize: vertical; min-height: 96px; }
.flw-help { margin: 0; font-size: 11px; color: var(--ds-color-text-muted); }
/* «Tipo de llamada»: humana o automática (IA), lo primero del panel de una Llamada. */
.flw-calltype { gap: var(--space-2); }
.flw-calltype > .flw-calltype__opt { display: flex; gap: var(--space-2); align-items: flex-start; width: 100%; text-align: left; font-family: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--ds-color-border); border-radius: var(--r-md); background: var(--ds-color-surface-2); color: var(--ds-color-text); cursor: pointer; font-size: 13px; font-weight: 400; }
.flw-calltype > .flw-calltype__opt[aria-checked="true"] { border-color: var(--gold-500); background: var(--ds-color-surface-1); }
.flw-calltype__opt > i { margin-top: 2px; color: var(--ds-color-text-muted); }
.flw-calltype__opt[aria-checked="true"] > i { color: var(--gold-500); }
.flw-calltype__opt:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.flw-calltype__opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flw-calltype__opt small { font-size: 11px; color: var(--ds-color-text-muted); }
.flw-calltype__opt:disabled { cursor: default; opacity: .75; }
.flw-count { font-size: 11px; color: var(--ds-color-text-muted); text-align: right; }
.flw-count--over { color: var(--red-500); font-weight: 600; }
.flw-inline { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.flw-inline > * { flex: 1 1 90px; min-width: 0; }
.flw-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ds-color-text); }
.flw-checks label { display: inline-flex; align-items: center; gap: 4px; }
.flw-vars { display: flex; flex-wrap: wrap; gap: 4px; }
.flw-var { cursor: pointer; padding: 1px 6px; border-radius: var(--r-pill); font-size: 11px; border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-2); color: var(--ds-color-text); }
.flw-var:hover { border-color: var(--gold-500); }
.flw-block { border: 1px solid var(--ds-color-border); border-radius: var(--r-md); padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); background: var(--ds-color-surface-2); }
.flw-block__head { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; font-weight: 600; color: var(--ds-color-text); }
.flw-block__head span { flex: 1; }
.flw-seg { display: inline-flex; border: 1px solid var(--ds-color-border); border-radius: var(--r-md); overflow: hidden; }
.flw-seg button { padding: 5px 10px; font-size: 12px; cursor: pointer; border: 0; background: var(--ds-color-surface-2); color: var(--ds-color-text-muted); }
.flw-seg button[aria-pressed="true"] { background: var(--gold-100); color: var(--gray-900); font-weight: 600; }
.flw-outrow { display: flex; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--ds-color-border); }
.flw-outrow input[type="text"] { flex: 1; min-width: 0; padding: 4px 6px; border-radius: var(--r-md); border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-2); color: var(--ds-color-text); font-size: 12px; }
.flw-outrow--off input[type="text"] { opacity: .55; }
.flw-outrow__why { font-size: 10.5px; color: var(--ds-color-text-muted); }
.flw-errors { margin: 0; padding: var(--space-2) var(--space-3); list-style: disc inside; border-radius: var(--r-md); border: 1px solid var(--red-border); background: var(--red-100); color: var(--red-600); font-size: 12px; }
.flw-panel__foot { display: flex; gap: var(--space-2); justify-content: flex-end; padding-top: var(--space-2); border-top: 1px solid var(--ds-color-border); }
.flw-modal-back { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--navy-900) 65%, transparent); }
.flw-modal { width: min(520px, 92vw); max-height: 86vh; overflow: auto; background: var(--ds-color-surface-1); color: var(--ds-color-text); border: 1px solid var(--ds-color-border); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.flw-modal h3 { margin: 0; font-size: 16px; }
.flw-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); }
.flw-toast { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 1100; max-width: 380px; }


/* ── Live view: numbers on the connections and on the outputs; legible at fit zoom ─────────────────────── */
:root { --fc-count-fg: var(--on-accent); --fc-count-bg: var(--gold-500); }
.fc-out__count {
  flex: none; margin-left: var(--space-2); min-width: 22px; padding: 0 6px; border-radius: var(--r-pill); text-align: center;
  background: var(--gold-500); color: var(--on-accent); font-weight: 700; font-size: 11px; line-height: 18px;
}
.fc-node .fc-badge[data-testid^="fc-node-count"] { font-size: 13px; min-width: 26px; }

/* ── Flow-only screens: chips, helpers, live and runs panels, wide modal ─────────────────────────────── */
.flw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.flw-help--error { color: var(--red-500); font-weight: 600; }
.flw-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.flw-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: var(--r-pill); font-size: 12px; border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-2); color: var(--ds-color-text); }
.flw-chip__x { cursor: pointer; border: 0; background: transparent; color: var(--ds-color-text-muted); padding: 2px 4px; border-radius: var(--r-pill); }
.flw-chip__x:hover { color: var(--red-500); }
.flw-var--flow { border-color: var(--gold-500); }
.flw-name__icon { margin-right: var(--space-2); font-size: 16px; vertical-align: middle; }
.flw-meta-preview { font-size: 22px; flex: none; }
.flw-modal--wide { width: min(680px, 94vw); }
.flw-table--compact td, .flw-table--compact th { padding: var(--space-1) var(--space-2); }
.flw-table--compact select { width: 100%; max-width: 260px; padding: 4px 6px; border-radius: var(--r-md); border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-2); color: var(--ds-color-text); font-size: 12px; }
.flw-runs, .flw-live { display: flex; flex-direction: column; gap: var(--space-2); }
.flw-runs__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.flw-runs__head h4 { margin: 0; }
.flw-runs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.flw-run { width: 100%; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); border-radius: var(--r-md); border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-2); color: var(--ds-color-text); font-size: 12px; }
.flw-run:hover, .flw-run--on { border-color: var(--gold-500); }
.flw-run__name { font-weight: 600; }
.flw-run__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--ds-color-text-muted); }
.flw-runs__pager { justify-content: space-between; }
.flw-runs__pager > * { flex: 0 1 auto; }
.flw-run-detail { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--ds-color-border); }
.flw-run-detail h5, .flw-run-detail h6, .flw-live h6 { margin: 0; font-size: 12px; color: var(--ds-color-text); }
.flw-visits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.flw-visit { width: 100%; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 1px; padding: 6px var(--space-2); border-radius: var(--r-md); border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-2); color: var(--ds-color-text); font-size: 12px; }
.flw-visit:hover { border-color: var(--gold-500); }
.flw-visit span, .flw-visit time { color: var(--ds-color-text-muted); font-size: 11px; }
.flw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--space-2); margin: 0; }
.flw-stats > div { padding: var(--space-2); border-radius: var(--r-md); border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-2); }
.flw-stats dt { font-size: 11px; color: var(--ds-color-text-muted); }
.flw-stats dd { margin: 0; font-size: 18px; font-weight: 700; color: var(--ds-color-text); }
/* «Ver en vivo»: enlaces con seguimiento por nodo (fase 3). Solo tokens del tema. */
.flw-links { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--ds-color-text); }
.flw-links th, .flw-links td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--ds-color-border); text-align: right; }
.flw-links thead th { font-weight: 600; color: var(--ds-color-text-muted); }
.flw-links th[scope="row"], .flw-links thead th:first-child { text-align: left; font-weight: 500; }
.flw-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ds-color-text); }
.flw-reasons li { display: flex; justify-content: space-between; gap: var(--space-2); border-bottom: 1px dashed var(--ds-color-border); padding: 2px 0; }
.flw-picker { display: flex; flex-direction: column; gap: var(--space-2); }
.flw-picker input[type="search"] { width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: var(--r-md); font-size: 13px; border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-2); color: var(--ds-color-text); }
.flw-picker__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.flw-picker__item { width: 100%; text-align: left; cursor: pointer; display: flex; flex-direction: column; padding: 6px var(--space-2); border-radius: var(--r-md); border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-2); color: var(--ds-color-text); font-size: 12px; }
.flw-picker__item:hover { border-color: var(--gold-500); }
.flw-picker__item span { color: var(--ds-color-text-muted); font-size: 11px; }
.flw-workspace--side { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1100px) { .flw-workspace--side { grid-template-columns: minmax(0, 1fr); } }
.flw-holidays { display: flex; flex-direction: column; gap: var(--space-2); }
.flw-holidays__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.flw-holidays__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 4px var(--space-2); border: 1px solid var(--ds-color-border); border-radius: var(--r-md); background: var(--ds-color-surface-2); font-size: 13px; color: var(--ds-color-text); }
.flw-conv-diffs { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

/* «Crear con IA» (chat del editor de flujos). Solo tokens del tema: vale igual en claro y en oscuro. */
.flw-ai { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }
.flw-ai__log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; max-height: 420px; }
.flw-ai__empty { font-size: 12px; color: var(--ds-color-text-muted); }
.flw-ai__ideas { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.flw-ai__ideas .flw-btn { width: 100%; text-align: left; white-space: normal; }
.flw-ai__turn { padding: var(--space-2); border-radius: var(--r-md); border: 1px solid var(--ds-color-border); background: var(--ds-color-surface-2); color: var(--ds-color-text); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.flw-ai__turn--me { border-color: var(--gold-500); background: var(--gold-100); }
.flw-ai__turn--error { border-color: var(--red-border); background: var(--red-100); color: var(--red-600); }
.flw-ai__who { font-size: 11px; font-weight: 600; color: var(--ds-color-text-muted); }
.flw-ai__turn--error .flw-ai__who { color: var(--red-600); }
.flw-ai__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.flw-ai__changes { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.flw-ai__applied, .flw-ai__warn { margin: 0; font-size: 12px; display: flex; gap: 4px; align-items: flex-start; }
.flw-ai__applied { color: var(--green-600); }
.flw-ai__warn { color: var(--orange-500); }
.flw-ai__form { display: flex; flex-direction: column; gap: var(--space-2); }
.flw-ai__form textarea { min-height: 72px; }
.flw-ai__form textarea:focus-visible, .flw-ai .flw-btn:focus-visible { outline: 2px solid var(--ds-color-focus, var(--gold-500)); outline-offset: 2px; }

/* Ajustes → Sitio web: el código para pegar en el sitio. Solo tokens del tema (claro y oscuro). */
.site-snippet { margin: 0 0 var(--space-2); padding: var(--space-3); border: 1px solid var(--ds-color-border); border-radius: var(--r-md); background: var(--ds-color-surface-2); color: var(--ds-color-text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; overflow-x: auto; }
.site-snippet:focus-visible { outline: 2px solid var(--ds-color-focus, var(--ds-color-border)); outline-offset: 2px; }