/* Supplied section icons share a consistent optical size in either theme. */
.section-asset-icon{display:block;width:20px;height:20px;flex:0 0 20px;overflow:visible}
.nav-link>.section-asset-icon{width:18px;height:18px;flex-basis:18px}
.section-title-icon>.section-asset-icon{width:22px;height:22px;flex-basis:22px}
.bottom-buttons .btn.notice-button{background:#3a8af4;border-color:#3a8af4;color:#fff}
.bottom-buttons .btn.purple{background:#04b49d;border-color:#04b49d;color:#fff}
.bottom-buttons .btn:hover{filter:brightness(1.08)}
.bottom-buttons .btn:active{filter:brightness(.94)}
.dashboard .metric-card,.dashboard .chart-panel,.dashboard .charts-three>.panel,.dashboard .dashboard-bottom>.panel{border-radius:8px}
.dashboard .color-icon{width:38px;height:38px;border-radius:9px}
.dashboard .color-icon .icon{width:22px;height:22px;stroke-width:2.3}
body[data-route=integraciones]:not(.light) .page-header h1{color:#fff}
body[data-route=disparadores]:not(.light) .page-header h1{color:#fff}
.integrations .integrations-unified{grid-template-columns:repeat(4,minmax(0,1fr))}
.integrations-unified .service-openai{--service-accent:#9b52ed}
.integrations-unified .service-anthropic{--service-accent:#fb762f}
.integrations-unified .service-card{border:1px dashed var(--service-accent);box-shadow:none;background:var(--bg)}
.account-menu{position:relative}
.account-menu>.account-link{width:100%;background:transparent;border:0;color:inherit;text-align:left;cursor:pointer;border-radius:7px}
.account-menu>.account-link:hover,.account-menu>.account-link[aria-expanded=true]{background:var(--soft)}
.account-menu>.account-link[aria-expanded=true]>.icon{transform:rotate(180deg)}
.account-popup{position:absolute;z-index:80;right:0;bottom:calc(100% + 7px);width:146px;max-width:100%;max-height:calc(100dvh - 80px);overflow:auto;padding:6px;border:1px solid #3d3d40;border-radius:12px;background:#101011;box-shadow:0 10px 30px #0006;color:#f5f4f6}
.account-popup[hidden]{display:none}
.account-popup>button{display:flex;align-items:center;gap:21px;width:100%;min-height:46px;padding:11px 12px;background:transparent;color:inherit;text-align:left;font-size:16px;font-weight:550;border:0;border-radius:6px;cursor:pointer}
.account-popup>button:hover,.account-popup>button:focus-visible{background:#27272b;outline-offset:-2px}
.account-popup .icon{width:19px;height:19px;flex:0 0 19px}
.light .account-popup{background:#fff;border-color:var(--line);color:var(--text);box-shadow:0 8px 24px #0002}
.light .account-popup>button:hover,.light .account-popup>button:focus-visible{background:var(--soft)}
@media(max-width:1100px){.integrations .integrations-unified{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.integrations .integrations-unified{grid-template-columns:minmax(0,1fr)}}

/* The application frame stays in the viewport. Only data regions scroll. */
body[data-route=bloqueo],body[data-route=contactos],body[data-route=disparadores],body[data-route=flujos]:not([data-flow-editor=true]),body[data-route=tutoriales]{height:100dvh;overflow:hidden}
body:is([data-route=bloqueo],[data-route=contactos],[data-route=disparadores],[data-route=flujos],[data-route=tutoriales]):not([data-flow-editor=true]) .workspace{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body:is([data-route=bloqueo],[data-route=contactos],[data-route=disparadores],[data-route=flujos],[data-route=tutoriales]):not([data-flow-editor=true]) .page-header{flex:0 0 auto}
body:is([data-route=bloqueo],[data-route=contactos],[data-route=disparadores],[data-route=flujos],[data-route=tutoriales]):not([data-flow-editor=true]) #page-content{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
body:is([data-route=bloqueo],[data-route=contactos],[data-route=disparadores],[data-route=flujos]):not([data-flow-editor=true]) #page-content>.page{height:100%;min-height:0;flex:1;overflow:hidden}
.countries{display:flex;flex-direction:column;padding:8px 18px 18px}
.countries .country-panel{display:flex;flex-direction:column;flex:1;min-height:0;border-radius:8px;padding:18px}
.countries .country-explanation,.countries .country-search,.countries .country-footer{flex:0 0 auto}
.countries .country-list{flex:1;height:auto;min-height:0;border-radius:6px;overscroll-behavior:contain;scrollbar-gutter:stable}
.countries .country-footer .btn{border-radius:6px}
.contacts .contacts-filters,.contacts .contact-extra-filters,.contacts .contacts-selection{flex:0 0 auto}
.contacts .contacts-data{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.contacts-table th{position:sticky;top:0;z-index:2;background:var(--bg)}
.flow-library .flow-library-search,.flow-library .flow-status-filters{flex:0 0 auto}
.flow-library .flow-library-layout{flex:1;min-height:0;overflow:hidden}
.flow-library .flow-folders{min-height:0;overflow:auto;overscroll-behavior:contain}
.flow-library .flow-library-content{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.flow-library .flow-library-content>h2{flex:0 0 auto}
.flow-library .flow-table-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.flow-library-table th{position:sticky;top:0;z-index:2;background:var(--panel)}
.flow-library :is(.flow-folders,.flow-table-scroll),.contacts-data,.country-list{scrollbar-width:thin;scrollbar-color:var(--line-light) var(--panel)}

/* The wallpaper belongs only to the message history, not its surrounding UI. */
.support-wallpaper{display:none}
.support-messages{background-color:#151717;background-image:url('/wallpaper-dark.png');background-size:1242px 666px;background-position:center top;background-repeat:repeat}
.light .support-messages{background-color:#f7f3ed;background-image:url('/wallpaper-light.png');background-size:1258px 702px}
.light .support-bubble.received{background:#fff;color:#253238}
.light .support-bubble.sent{background:#d9fdd3;color:#17352b}
.light .support-bubble>small{color:#277878}
.light .support-bubble time{color:#566d64}
.light .support-date-divider{background:#fff;color:#536261;box-shadow:0 1px 2px #0001}

/* Course workspace: player on the left, grouped playlist on the right. */
body[data-route=tutoriales] .page-header{display:none}
.page.academy{display:grid;grid-template-columns:minmax(0,1fr) 310px;padding:0;height:100%;min-height:0;overflow:hidden}
.academy-main{min-width:0;min-height:0;overflow:auto;padding:0 22px 22px;display:flex;flex-direction:column;gap:16px;overscroll-behavior:contain}
.academy-heading{min-height:64px;display:flex;align-items:center;gap:12px;flex:0 0 auto;padding-top:8px}
.academy-heading h1{font-size:20px;font-weight:750;line-height:1.3;letter-spacing:-.3px}
.academy-brand-icon{display:grid;place-items:center;width:37px;height:37px;border:1px solid #45beed;border-radius:10px;color:#fff;background:linear-gradient(#23b6ea,#0d8fc8);box-shadow:0 3px #08679455;flex:0 0 auto}
.academy-brand-icon .section-asset-icon{width:24px;height:24px}
.academy-count{display:flex;align-items:center;gap:9px;margin-left:auto;border:1px solid var(--line);background:var(--panel-deep);border-radius:9px;padding:7px 12px}
.academy-count>.icon{color:#ffcc32;width:22px;height:22px}
.academy-count strong{display:block;font-size:16px;line-height:1.1}
.academy-count small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.academy-stage{display:grid;place-items:center;width:100%;aspect-ratio:16/9;min-height:220px;flex:0 0 auto;background:#050607;border:1px solid var(--line);border-radius:10px;overflow:hidden;color:#eef3f7}
.academy-stage video{display:block;width:100%;height:100%;object-fit:contain}
.academy-video-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px;gap:10px}
.academy-video-symbol{display:grid;place-items:center;width:58px;height:58px;border:1px solid #30343b;border-radius:50%;background:#14171b;color:#697d91;margin-bottom:4px}
.academy-video-symbol .icon{width:23px;height:23px;fill:currentColor;stroke:none}
.academy-video-empty>strong{font-size:16px;font-weight:600}
.academy-video-empty>p{color:#a1acb7;font-size:14px;line-height:1.5}
.academy-video-empty .btn{margin-top:5px;background:#202831;color:#eaf2f9;border-color:#3b4c5d;font-size:14px;border-radius:6px}
.academy-lesson-detail{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex:0 0 auto;flex-wrap:wrap}
.academy-lesson-detail>div{flex:1;min-width:220px}
.academy-module{display:inline-block;color:#83b8ff;background:#307eec1c;border-radius:5px;padding:4px 8px;font-size:12px;font-weight:650}
.academy-lesson-detail h2{font-size:18px;line-height:1.4;font-weight:750;margin:9px 0 5px}
.academy-lesson-detail p{font-size:14px;line-height:1.6;color:var(--muted);max-width:650px}
.academy-complete{border-radius:7px;background:#307eec;border-color:#307eec;color:#fff;font-size:14px;min-height:42px;white-space:normal;text-align:center}
.academy-complete.is-complete{background:#123e30;border-color:#297955;color:#a5e4bf}
.academy-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;flex:0 0 auto;padding-top:8px}
.academy-footer>span{color:var(--muted);font-size:12px}
.academy-footer>div{display:flex;gap:8px}
.academy-footer .btn{font-size:14px;border-radius:6px}
.academy-playlist{display:flex;flex-direction:column;min-height:0;min-width:0;border-left:1px solid var(--line);background:var(--panel)}
.academy-progress{padding:20px 16px 18px;flex:0 0 auto;border-bottom:1px solid var(--line)}
.academy-progress>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.academy-progress h2{font-size:14px;color:var(--muted);font-weight:550}
.academy-progress strong{font-size:12px;color:#8abbff}
.academy-progress progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:8px;border:0;border-radius:5px;overflow:hidden;background:var(--bg);accent-color:var(--primary)}
.academy-progress progress::-webkit-progress-bar{background:var(--bg)}
.academy-progress progress::-webkit-progress-value{background:var(--primary);border-radius:5px}
.academy-progress progress::-moz-progress-bar{background:var(--primary);border-radius:5px}
.academy-lesson-list{min-height:0;overflow:auto;padding:4px 10px 20px;flex:1;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-light) var(--panel)}
.academy-group>h3{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:650;line-height:1.4;text-transform:uppercase;letter-spacing:.25px;color:#b8b4c5;margin:21px 3px 12px;text-align:center}
.academy-group>h3::before,.academy-group>h3::after{content:'';flex:1;height:1px;background:#635377}
.academy-group>ol{list-style:none;margin:0;padding:0}
.academy-group li{position:relative}
.academy-group li:not(:last-child)::after{content:'';position:absolute;width:2px;top:47px;bottom:-16px;left:21px;background:var(--line);pointer-events:none}
.academy-lesson{display:flex;align-items:center;gap:9px;min-height:78px;padding:8px 6px;width:100%;border:1px solid transparent;border-radius:7px;color:var(--text);background:transparent;text-align:left;cursor:pointer;position:relative;z-index:1}
.academy-lesson:hover{background:var(--soft)}
.academy-lesson.selected{background:#307eec15;border-color:#307eec65}
.academy-lesson-number{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border:1px solid var(--line-light);border-radius:50%;background:var(--panel-deep);color:var(--muted);font-size:12px;font-weight:700}
.academy-lesson.selected .academy-lesson-number{background:var(--primary);border-color:var(--primary);color:#fff}
.academy-lesson.completed .academy-lesson-number{background:#145137;border-color:#297955;color:#acdfbd}
.academy-lesson-number .icon{width:15px;height:15px}
.academy-thumbnail{display:grid;place-items:center;width:64px;height:42px;flex:0 0 64px;border:1px solid #315980;border-radius:6px;background:#11243a;color:#c3ddff}
.academy-thumbnail .section-asset-icon{width:24px;height:24px}
.academy-lesson-name{min-width:0;flex:1}
.academy-lesson-name strong{display:block;font-size:14px;line-height:1.4;font-weight:650}
.academy-lesson-name small{display:block;color:var(--muted);font-size:12px;line-height:1.4;margin-top:4px}
.academy-heading .mobile-menu{display:none}
.light .academy-module{color:#1b5caf;background:#307eec10}
.light .academy-progress strong{color:#1b5caf}
.light .academy-group>h3{color:#635c71}
.light .academy-complete.is-complete{background:#e2f5e9;color:#205b3b}

@media(max-width:1120px){
 .page.academy{grid-template-columns:minmax(0,1fr) 270px}
 .academy-main{padding:0 16px 20px}
 .academy-heading{gap:8px}
 .academy-heading h1{font-size:18px}
 .academy-count{padding:7px 8px}
 .academy-count>.icon{display:none}
 .academy-thumbnail{width:48px;flex-basis:48px;height:35px}
}

@media(max-width:760px){
 .page.academy{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(160px,1fr);overflow:auto}
 .academy-main{overflow:visible;padding:0 14px 15px;gap:12px}
 .academy-heading{min-height:61px}
 .academy-heading .mobile-menu{display:grid;background:none;border:0;flex:0 0 24px;width:24px}
 .academy-brand-icon{width:29px;height:29px;border-radius:7px}
 .academy-brand-icon .section-asset-icon{width:20px;height:20px}
 .academy-heading h1{font-size:18px}
 .academy-count{padding:5px 7px}
 .academy-count strong{font-size:14px}
 .academy-count small{font-size:12px}
 .academy-stage{min-height:190px}
 .academy-video-empty{padding:18px;gap:7px}
 .academy-video-symbol{width:40px;height:40px;margin:0}
 .academy-video-symbol .icon{width:18px;height:18px}
 .academy-lesson-detail{gap:11px}
 .academy-lesson-detail h2{font-size:17px}
 .academy-complete{width:100%;min-height:38px}
 .academy-footer{padding-top:0;gap:8px}
 .academy-footer>span{flex:1}
 .academy-footer .btn{min-height:34px;padding:7px 10px}
 .academy-playlist{border-left:0;border-top:1px solid var(--line);min-height:230px}
 .academy-progress{padding:13px 16px}
 .academy-lesson-list{max-height:350px;min-height:160px}
 .academy-thumbnail{width:64px;flex-basis:64px;height:42px}
 .countries{padding:0 12px 12px}
 .countries .country-panel{padding:12px}
 .countries .country-explanation{font-size:13px;line-height:1.45;margin-bottom:10px}
 .countries .country-search{margin-bottom:10px}
 .countries .country-footer{margin-top:10px;align-items:center;gap:8px}
 .flow-library .flow-library-layout{display:flex;flex-direction:column}
 .flow-library .flow-folders{flex:0 0 auto;max-height:90px}
 .flow-library .flow-library-content{flex:1}
 .flow-status-filters{margin:8px 0 10px}
 .contact-extra-filters{padding:9px;gap:8px}
}
/* Short viewports and enlarged text retain access to controls and data. */
@media(max-height:520px){
 body:is([data-route=bloqueo],[data-route=contactos],[data-route=disparadores],[data-route=flujos]):not([data-flow-editor=true]) #page-content{overflow:auto}
 body:is([data-route=bloqueo],[data-route=contactos],[data-route=disparadores],[data-route=flujos]):not([data-flow-editor=true]) #page-content>.page{height:auto;min-height:320px;flex:1 0 auto}
 .country-list{max-height:50dvh}
 .contacts .contacts-data,.flow-library .flow-library-layout{min-height:180px;max-height:65dvh}
}

/* Blue and teal connect the dashboard, automation controls and conversation UI. */
body:is([data-route=flujos],[data-route=disparadores]){--primary:#3a8af4;--teal:#04b49d}
.flow-header-actions .btn.primary,.activator-header-actions .btn.coral{background:#3a8af4;border-color:#3a8af4;color:#fff}
.trigger-header-actions [data-action=new-trigger]{background:#3a8af4;border-color:#3a8af4;color:#fff}
.trigger-header-actions [data-action=welcome-settings]{background:#04b49d;border-color:#04b49d;color:#fff}
.flow-status-filters button.selected,.flow-folders button.selected,.light .flow-status-filters button.selected{background:#3a8af4;border-color:#3a8af4}
.flow-status-filters i.active{background:#04b49d}
.activator-header-actions .welcome-button{background:#04b49d;border-color:#04b49d;color:#fff}
.activator-header-actions .welcome-dot{background:#fff}
.flow-tools-bar .flow-save-button{background:#04b49d;color:#fff}
.flow-tools-bar .flow-save-button:hover{background:#059f8d}
.flow-tools-bar .flow-context-button{color:#7cb9ff;border-color:#3a8af45c}
.flow-tools-bar .flow-simulate-button{color:#70dece;border-color:#04b49d70;background:var(--panel)}
.flow-tools-bar .flow-simulate-button:hover{background:#04b49d1a}
.flow-tools-bar .flow-save-state.is-dirty{color:#8bbdff}
.trigger-controls .segments>button.selected{background:#3a8af4}
.trigger-status:not(.paused){background:#04b49d19;color:#70dece}
.trigger-status:not(.paused)>i{background:#04b49d}
.light .trigger-status:not(.paused){color:#08796d;background:#dff5ef}
#modal[data-kind=activator] .modal-head{background:linear-gradient(110deg,#3a8af4,#2275d9)}
#modal[data-kind=activator] .btn.coral{background:#3a8af4;border-color:#3a8af4;color:#fff}
#modal[data-kind=activator] .symbol-purple,#modal[data-kind=activator] .symbol-amber{background:#3a8af41c;color:#78b4ff}
#modal[data-kind=activator] .symbol-green{background:#04b49d1c;color:#25cfb8}
#modal[data-kind=activator] .setting-switch{--switch-accent:#04b49d;border-color:#04b49d50;background:#04b49d0a}
#modal[data-kind=activator] .setting-switch.switch-cyan{--switch-accent:#3a8af4;border-color:#3a8af450;background:#3a8af40a}
.activator-field-hint{color:#9daabb;font-size:12px;line-height:1.5;margin:8px 0}
.light #modal[data-kind=activator],.light #modal[data-kind=activator] .reference-modal-footer{background:#fff}
.light #modal[data-kind=activator] :is(input,select){background:#f8fafc;color:#263440;border-color:#cdd5dd}
.light #modal[data-kind=activator] .activator-description,.light #modal[data-kind=activator] .activator-field-hint{color:#586976}
.light #modal[data-kind=activator] .setting-switch-label strong{color:#25313c}
.light .flow-tools-bar .flow-context-button{color:#2369b7}
.light .flow-tools-bar .flow-simulate-button{color:#08796d}

/* Curved dashed wires expose their disconnect action on hover or selection. */
.flow-wire,.flow-wires .selected .flow-wire{stroke:#04b49d;stroke-width:4;stroke-dasharray:11 6;stroke-linecap:butt}
.flow-wire-pending{stroke:#04b49d;stroke-width:4;stroke-dasharray:11 6}
.flow-wire-hit:focus{stroke:#04b49d35;stroke-width:18;outline:none}
.flow-disconnect{opacity:0;pointer-events:none;cursor:pointer;outline:none}
.flow-edge:hover .flow-disconnect,.flow-edge.selected .flow-disconnect,.flow-edge:focus-within .flow-disconnect{opacity:1;pointer-events:all}
.flow-disconnect circle{fill:#ef343b;stroke:#fff3ef;stroke-width:2;filter:drop-shadow(0 2px 5px #ed343b55)}
.flow-disconnect path{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;pointer-events:none}
.flow-disconnect:hover circle,.flow-disconnect:focus circle{fill:#da202b;stroke-width:3}
.flow-edge-action{display:none}

/* The simulator stays beside the canvas with its own message scroll area. */
.flow-chat-simulator{position:absolute;right:16px;top:122px;bottom:18px;z-index:7;width:390px;max-width:calc(100% - 32px);max-height:640px;display:flex;flex-direction:column;overflow:hidden;border:1px solid #3c4857;border-radius:18px;background:#13171d;box-shadow:0 12px 42px #0006;color:#eef3fa}
.flow-chat-simulator>header{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-height:66px;padding:12px 14px;background:linear-gradient(110deg,#347fdc,#168da2);color:#fff}
.simulator-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#ffffff25;flex:0 0 auto}
.simulator-icon .icon{width:21px;height:21px}
.flow-chat-simulator>header>div{flex:1;min-width:0}
.flow-chat-simulator h2{font-size:15px;font-weight:700;margin:0 0 4px}
.flow-chat-simulator header p{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d4eafb;margin:0}
.flow-chat-simulator header button{display:grid;place-items:center;width:28px;height:32px;background:transparent;border:0;color:#fff;border-radius:6px;cursor:pointer}
.flow-chat-simulator header button:hover{background:#ffffff22}
.flow-chat-simulator header button .icon{width:18px;height:18px}
.simulator-messages{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 13px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:#4b5864 transparent}
.simulator-intro{font-size:13px;line-height:1.5;color:#7ac6ec;text-align:center;margin:0}
.simulator-message{font-size:13px;line-height:1.5;max-width:90%;overflow-wrap:anywhere}
.simulator-user{align-self:flex-end;padding:9px 12px;border-radius:12px 3px 12px 12px;background:#176f65;color:#fff;white-space:pre-wrap}
.simulator-bot{align-self:flex-start;display:flex;flex-direction:column;gap:7px}
.simulator-bot .fe-preview-bubble{background:#252c35;color:#edf2f7;padding:9px 12px;border-radius:3px 12px 12px 12px;max-width:100%;margin:0;font-size:13px;box-shadow:none;overflow-wrap:anywhere}
.simulator-bot :is(img,video,audio){max-width:100%;height:auto}
.simulator-bot audio{height:40px;width:280px}
.simulator-note{align-self:center;max-width:100%;text-align:center;font-size:11px;color:#a8b6c5;background:#26303b60;border-radius:7px;padding:7px 9px}
.simulator-choices{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%}
.simulator-choices:empty{display:none}
.simulator-choices button{padding:9px 12px;background:#04b49d13;border:1px solid #04b49d65;border-radius:8px;color:#7ae3d5;font-size:12px;line-height:1.4;text-align:center;cursor:pointer}
.simulator-choices button:hover{background:#04b49d28}
.simulator-choices button:disabled{opacity:.5;cursor:default}
#flow-simulator-form{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:10px 12px;border-top:1px solid #34404c;background:#1c222b}
#flow-simulator-input{flex:1;min-width:0;border:1px solid #3a4a59;border-radius:25px;padding:11px 13px;background:#252f3b;color:#edf2f7;font-size:14px;outline-offset:2px}
#flow-simulator-input::placeholder{color:#96a5b5}
#flow-simulator-form>button{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:#04b49d;color:#fff;cursor:pointer;flex:0 0 auto}
#flow-simulator-form>button .icon{width:19px;height:19px}
#flow-simulator-form :disabled{opacity:.5;cursor:default}
.light .flow-chat-simulator{background:#f6f9fb;border-color:#c8d3dd;color:#25313c;box-shadow:0 12px 35px #18304425}
.light .simulator-intro{color:#286a9b}
.light .simulator-bot .fe-preview-bubble{background:#fff;color:#25313c;border:1px solid #dce4eb}
.light .simulator-note{color:#546977;background:#e7eef4}
.light .simulator-choices button{color:#08796d}
.light #flow-simulator-form{background:#edf2f6;border-color:#d0dbe4}
.light #flow-simulator-input{background:#fff;color:#263440;border-color:#c4d0db}
.light #flow-simulator-input::placeholder{color:#647887}
@media(max-width:600px){.flow-chat-simulator{right:8px;left:8px;top:116px;bottom:8px;width:auto;max-width:none;max-height:none}}
@media(max-height:460px){.flow-chat-simulator{top:65px;bottom:6px}.flow-chat-simulator>header{min-height:52px;padding:8px 12px}}

/* Save notices use the supplied compact white notification treatment. */
body #toast,body.light #toast,body[data-route=chat] #toast{position:fixed;z-index:150;top:16px;right:16px;bottom:auto;left:auto;transform:none;display:flex;align-items:center;gap:10px;width:330px;max-width:calc(100vw - 32px);padding:15px 12px;border:1px solid #e5e8eb;border-radius:5px;background:#fff;color:#58616b;box-shadow:0 6px 22px #0003;font-size:13px;line-height:1.5}
body #toast[hidden]{display:none}
.toast-symbol{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;background:#16ba29;border-radius:50%;color:#fff}
.toast-symbol .icon{width:14px;height:14px;stroke-width:2.5}
#toast[data-tone=info] .toast-symbol{background:#3a8af4}
#toast[data-tone=error] .toast-symbol{background:#e53d4c}
.toast-message{flex:1;overflow-wrap:anywhere}
.toast-close{display:grid;place-items:center;align-self:flex-start;flex:0 0 22px;width:22px;height:22px;border:0;background:transparent;color:#8c949d;border-radius:4px;cursor:pointer}
.toast-close .icon{width:16px;height:16px}
.toast-close:hover{background:#f0f3f5;color:#394550}

.whop-chart-empty{display:flex;align-items:center;justify-content:center;flex:1;min-height:220px;text-align:center;color:var(--muted);font-size:12px;padding:20px}
.whop-dashboard :is(.whop-page-sales,.whop-page-revenue){display:flex;flex-direction:column}

/* Removing the reply rail gives its width back to the conversation. */
.support-layout{grid-template-columns:80px 320px minmax(0,1fr) 287px;--teal:#04b49d;--chat-bg:#1b1c20;--chat-panel:#222429;--chat-raised:#2a2d33;--chat-line:#393f46;--chat-text:#dce3eb;--chat-muted:#9ba8b7;background:#14171b}
.support-inbox,.support-conversation.is-empty{background:var(--chat-bg)}
.support-layout .support-rail-heading{color:#c6d7ea}
.support-layout .support-rail-heading>.icon{color:#55cbbb}
.support-thread:hover,.support-thread.selected{background:#3a8af418}
.support-thread.selected{box-shadow:inset 3px 0 #3a8af4}
.support-layout .support-count{color:var(--chat-muted)}
.support-layout .support-inbox-empty strong{color:var(--chat-text)}
.support-layout .support-primary,.support-client #tag-form .btn{background:#3a8af4;color:#fff}
.support-send{background:#04b49d;color:#fff}
.support-quick-tools,.light .support-quick-tools{background:var(--chat-panel)}
.support-quick-tools .icon-btn{background:#3a8af4}
.support-quick-tools .icon-btn:nth-child(2){background:#04b49d}
.support-composer-area form{border-color:var(--chat-line)}
.support-composer-area form:focus-within{border-color:#3a8af4}
.support-composer-tools .icon-btn{color:var(--chat-muted)}
.support-layout .support-chat-tabs>button.selected{color:#73b3ff;border-color:#3a8af4}
.support-layout .rail-control.active,.support-layout .rail-label.selected{background:#3a8af427;border-color:#3a8af4;color:#8cc1ff}
.support-layout .support-bubble.received{background:#2b333d;color:#e4ebf2}
.support-layout .support-bubble.sent{background:#09665c;color:#edfffc}
.support-layout .support-date-divider{background:#27333d;color:#bbcbd7}
.support-layout .support-mobile-nav{background:var(--chat-panel)}
.support-conversation-actions .flow-on{background:#04b49d21;color:#74e2cf}
.support-conversation-actions .flow-off{background:#3a8af41b;color:#98bbdf}
.support-layout .rail-section :is(textarea,input){background:var(--chat-raised);border-color:var(--chat-line);color:var(--chat-text)}
.light .support-layout{--chat-bg:#eff3f6;--chat-panel:#f8fafc;--chat-raised:#e8eef3;--chat-line:#cbd6df;--chat-text:#293846;--chat-muted:#627585;background:#dce4eb}
.light .support-layout .support-rail-heading{color:#486176}
.light .support-layout .support-thread:hover,.light .support-layout .support-thread.selected{background:#e2edf9}
.light .support-layout .support-chat-tabs>button.selected{color:#256ac0}
.light .support-layout .support-conversation.is-empty{background:#e8eef3}
.light .support-layout .support-bubble.received{background:#fff;color:#253238}
.light .support-layout .support-bubble.sent{background:#d3f3e9;color:#17453b}
.light .support-layout .support-date-divider{background:#fff;color:#536261}
.light .support-conversation-actions .flow-on{color:#08796d}
.light .support-conversation-actions .flow-off{color:#366da5}
.light .support-layout .rail-control.active,.light .support-layout .rail-label.selected{color:#2369b7;background:#e1edfa}
@media(max-width:1600px){.support-layout{grid-template-columns:75px 285px minmax(0,1fr) 245px}}
@media(max-width:1280px){.support-layout{grid-template-columns:72px 275px minmax(0,1fr) 240px}}
@media(max-width:1080px){.support-layout{grid-template-columns:72px 285px minmax(0,1fr)}}
@media(max-width:760px){.support-layout{grid-template-columns:275px minmax(0,1fr)}}
@media(max-width:600px){.support-layout{grid-template-columns:minmax(0,1fr)}}

/* Section accents reuse the exact dashboard icon palette and lighting. */
body[data-route=flujos]{--section-accent:#9b52ed;--section-top:#c496ff;--section-bottom:#6c2ebb;--section-soft:#c496ff;--section-on-accent:#fff}
body[data-route=disparadores]{--section-accent:#fb762f;--section-top:#ffb078;--section-bottom:#be4712;--section-soft:#ffb078;--section-on-accent:#301b0f}
body[data-route=bloqueo]{--section-accent:#e645a0;--section-top:#f884c5;--section-bottom:#ae2673;--section-soft:#f884c5;--section-on-accent:#2e1021}
body[data-route=tutoriales]{--section-accent:#08b9df;--section-top:#60d8f0;--section-bottom:#047f9c;--section-soft:#60d8f0;--section-on-accent:#062c36}
body:is([data-route=flujos],[data-route=disparadores],[data-route=bloqueo]) .section-title-icon,.academy-brand-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border:2px solid var(--section-top);border-radius:9px;background:linear-gradient(145deg,var(--section-top),var(--section-accent) 55%);box-shadow:inset 0 1px #ffffff40,0 3px 0 var(--section-bottom),0 5px 14px color-mix(in srgb,var(--section-accent) 24%,transparent);color:#fff}
body:is([data-route=flujos],[data-route=disparadores],[data-route=bloqueo]) .section-title-icon>.section-asset-icon,.academy-brand-icon>.section-asset-icon{width:23px;height:23px;flex-basis:23px}
.flow-header-actions .btn[data-action=new-flow],.trigger-header-actions .btn[data-action=new-trigger]{background:var(--section-accent);border-color:var(--section-accent);color:var(--section-on-accent)}
.flow-header-actions [data-action=import-flow]{border-color:#9b52ed70;color:#c496ff;background:#9b52ed12}
body:is([data-route=flujos],[data-route=disparadores]) .flow-status-filters button.selected,body:is([data-route=flujos],[data-route=disparadores]) .flow-folders button.selected{background:var(--section-accent);border-color:var(--section-accent);color:var(--section-on-accent)}
body:is([data-route=flujos],[data-route=disparadores]) .flow-folders button:not(.selected)>.icon{color:var(--section-soft);background:color-mix(in srgb,var(--section-accent) 12%,transparent)}
body:is([data-route=flujos],[data-route=disparadores]) .flow-library-search>.icon{color:var(--section-soft)}
body[data-route=flujos] .flow-blocks>.icon{color:#c496ff}
body[data-route=flujos] .flow-tools-bar .flow-add-button{background:#9b52ed;color:#fff}
body[data-route=flujos] .flow-tools-bar .flow-context-button{border-color:#9b52ed70;color:#c496ff;background:#9b52ed12}
body[data-route=disparadores] #modal[data-kind=activator] .modal-head{background:linear-gradient(110deg,#be4712,#a63b0d)}
body[data-route=disparadores] #modal[data-kind=activator] .btn.coral{background:#fb762f;border-color:#fb762f;color:#301b0f}
body[data-route=disparadores] #modal[data-kind=activator] .symbol-amber{background:#fb762f1c;color:#ffb078}
.countries .country-search>.icon{color:#f884c5}
.countries .count-badge{background:#e645a01c;border:1px solid #e645a047;color:#f884c5}
.countries .country-footer .btn{background:#e645a0;border-color:#e645a0;color:#2e1021}
.countries input[data-country]{accent-color:#e645a0}
.countries .country-list label:has(input:checked){background:#e645a014}
.academy-count>.icon{color:#adea67}
.academy-complete{background:#67c816;border-color:#adea67;color:#1c320b}
.academy-complete.is-complete{background:#67c8161c;border-color:#67c81670;color:#adea67}
.academy-module{color:#60d8f0;background:#08b9df16}
.academy-progress strong{color:#adea67}
.academy-progress progress{accent-color:#67c816}
.academy-progress progress::-webkit-progress-value{background:#67c816}
.academy-progress progress::-moz-progress-bar{background:#67c816}
.academy-lesson.selected{background:#08b9df12;border-color:#08b9df70}
.academy-lesson.selected .academy-lesson-number{background:#08b9df;border-color:#60d8f0;color:#062c36}
.academy-lesson.completed .academy-lesson-number{background:#67c8161c;border-color:#67c81670;color:#adea67}
.academy-thumbnail{--thumb-color:#08b9df;--thumb-top:#60d8f0;--thumb-bottom:#047f9c;border-color:var(--thumb-top);background:linear-gradient(145deg,var(--thumb-top),var(--thumb-color) 55%);box-shadow:0 2px var(--thumb-bottom);color:#fff}
.academy-thumbnail[data-lesson-route=flujos]{--thumb-color:#9b52ed;--thumb-top:#c496ff;--thumb-bottom:#6c2ebb}
.academy-thumbnail[data-lesson-route=disparadores]{--thumb-color:#fb762f;--thumb-top:#ffb078;--thumb-bottom:#be4712}
.academy-thumbnail[data-lesson-route=chat]{--thumb-color:#04b49d;--thumb-top:#52decb;--thumb-bottom:#087a6b}
.academy-group>h3::before,.academy-group>h3::after{background:#08b9df55}
.academy-video-empty .btn{background:#08b9df14;border-color:#08b9df66;color:#60d8f0}
.light .flow-header-actions [data-action=import-flow],.light[data-route=flujos] .flow-tools-bar .flow-context-button{color:#7135b5}
.light:is([data-route=flujos],[data-route=disparadores]) .flow-folders button:not(.selected)>.icon,.light:is([data-route=flujos],[data-route=disparadores]) .flow-library-search>.icon{color:var(--section-bottom)}
.light .countries .count-badge,.light .countries .country-search>.icon{color:#ae2673}
.light .academy-module{color:#047f9c;background:#08b9df10}
.light .academy-progress strong,.light .academy-complete.is-complete,.light .academy-lesson.completed .academy-lesson-number{color:#408b07}
.light .integrations-unified .service-openai .service-configure{color:#7135b5}
.light .integrations-unified .service-anthropic .service-configure{color:#be4712}
@media(max-width:760px){body:is([data-route=flujos],[data-route=disparadores],[data-route=bloqueo]) .section-title-icon,.academy-brand-icon{width:32px;height:32px;flex-basis:32px;border-radius:8px}body:is([data-route=flujos],[data-route=disparadores],[data-route=bloqueo]) .section-title-icon>.section-asset-icon,.academy-brand-icon>.section-asset-icon{width:20px;height:20px;flex-basis:20px}}

/* Import dialog: select a file first, then explicitly add the validated flow. */
#modal[data-kind=flow-import]{width:490px;max-width:calc(100vw - 28px);border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:0;overflow:auto}
#modal[data-kind=flow-import] .modal-head{padding:25px 23px 0;border:0;background:transparent;align-items:flex-start}
#modal[data-kind=flow-import] .modal-head h2{font-size:21px;line-height:1.35;letter-spacing:-.5px;font-weight:750;color:var(--text)}
#modal[data-kind=flow-import] .modal-head>.icon-btn{width:26px;height:26px;min-width:26px;border:0;background:transparent;color:var(--muted);margin:-11px -11px 0 8px}
#modal[data-kind=flow-import] #modal-content{padding:0}
#flow-import-form{padding:11px 23px 23px}
.flow-import-description{font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 22px}
.flow-import-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:161px;padding:24px 15px;border:1px dashed #9b52ed55;border-radius:17px;background:#9b52ed09;color:var(--text);cursor:pointer;text-align:center;transition:background .15s,border-color .15s}
.flow-import-dropzone:hover,.flow-import-dropzone.is-dragging{background:#9b52ed18;border-color:#9b52ed}
.flow-import-dropzone:focus-visible{outline:2px solid #c496ff;outline-offset:3px}
.flow-import-upload{display:grid;place-items:center;flex:0 0 auto;width:50px;height:50px;margin:5px 0 10px;border:1px solid #c496ff;border-radius:15px;background:linear-gradient(145deg,#c496ff,#9b52ed 55%);box-shadow:inset 0 1px #ffffff40,0 3px #6c2ebb;color:#fff}
.flow-import-upload .icon{width:26px;height:26px;stroke-width:2}
.flow-import-dropzone strong{font-size:14px;line-height:1.4;font-weight:650}
.flow-import-dropzone small{font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere;max-width:100%}
.flow-import-selection{display:flex;gap:10px;align-items:center;padding:11px 12px;margin-top:12px;background:#04b49d0d;border:1px solid #04b49d55;border-radius:10px}
.flow-import-selection>.icon{width:22px;height:22px;color:#52decb}
.flow-import-selection>div{flex:1;min-width:0}
.flow-import-selection strong{display:block;font-size:12px;line-height:1.4;color:var(--text);overflow-wrap:anywhere}
.flow-import-selection small{display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:3px;overflow-wrap:anywhere}
.flow-import-selection button{display:grid;place-items:center;width:27px;height:27px;flex:0 0 auto;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.flow-import-selection button:hover{background:var(--soft);color:var(--text)}
.flow-import-notice{display:flex;align-items:flex-start;gap:6px;margin:15px 0 0;padding:12px 13px;border:1px solid #ffb51b55;border-radius:15px;background:#ffb51b0d;color:#ffd866;font-size:12px;line-height:1.4}
.flow-import-notice>.icon{width:14px;height:14px;margin-top:1px;flex-shrink:0}
.flow-import-error{margin-top:13px;padding:10px 12px;border:1px solid #ee64754a;border-radius:8px;color:#ff9aad;background:#ee647510;font-size:12px;line-height:1.5}
.flow-import-footer{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:24px}
.flow-import-footer .btn{min-width:103px;min-height:43px;border-radius:11px;font-size:13px}
.flow-import-footer .secondary{background:transparent;border-color:#fb762f88;color:var(--text)}
.flow-import-footer .primary{background:#9b52ed;border-color:#9b52ed;color:#fff}
.flow-import-footer .primary:disabled{opacity:1;background:var(--soft);border-color:var(--soft);color:var(--muted)}
.light .flow-import-notice{color:#755006;background:#ffb51b10;border-color:#c47b0560}
.light .flow-import-selection>.icon{color:#087a6b}
.light .flow-import-error{color:#aa2946;background:#ee64750b}
@media(max-width:520px){#modal[data-kind=flow-import] .modal-head{padding:23px 18px 0}#flow-import-form{padding:10px 18px 19px}.flow-import-description{margin-bottom:18px}.flow-import-dropzone{min-height:155px}.flow-import-footer{gap:10px}.flow-import-footer .btn{flex:1}.flow-import-notice{font-size:11px}}

.folder-entry{display:flex;align-items:center;position:relative;min-width:0;border-radius:8px;margin-bottom:4px}
.folder-entry:has(.folder-select.selected){background:var(--folder-color)}
body .flow-folders .folder-entry>.folder-select{min-width:0;flex:1;width:auto;min-height:40px;padding:9px 10px;background:transparent;border-radius:8px;color:var(--text);gap:9px}
body .flow-folders .folder-entry>.folder-select>span{flex:1;overflow-wrap:anywhere}
body .flow-folders .folder-entry>.folder-select.selected{background:transparent;color:var(--folder-ink)}
body .flow-folders .folder-entry>.folder-select>.icon{width:22px;height:22px;flex-basis:22px;padding:3px;background:#ffffff15;border-radius:5px;color:inherit}
body .flow-folders .folder-entry>.folder-select:not(.selected)>.icon{background:color-mix(in srgb,var(--folder-color) 15%,transparent);color:var(--folder-soft)}
.folder-row-menu{flex:0 0 29px;margin-right:4px}
.folder-row-menu>summary{opacity:0;background:transparent;color:var(--text);width:27px;height:28px}
.folder-entry:has(.selected) .folder-row-menu>summary{color:var(--folder-ink)}
.folder-entry:hover .folder-row-menu>summary,.folder-entry:focus-within .folder-row-menu>summary,.folder-row-menu[open]>summary{opacity:1}
.folder-row-menu>div{min-width:164px}
body .flow-folders .folder-row-menu>div>button{width:100%;font-size:13px;min-width:0}
.folder-form-preview{display:flex;align-items:center;gap:12px;padding:15px;background:var(--panel-deep);border:1px solid var(--line);border-radius:10px;margin-bottom:18px;font-size:17px;font-weight:650}
.folder-form-preview>.icon{width:34px;height:34px}
.palette-picker{border:0;padding:0;margin:21px 0 8px}
.palette-picker legend{font-size:13px;color:var(--muted);margin-bottom:12px}
.palette-picker>div{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.palette-picker label{position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.palette-picker input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.palette-picker label>span{width:29px;height:29px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 1px 1px #fff5;border:2px solid transparent;pointer-events:none}
.palette-picker input:checked+span{border-color:#fff;outline:2px solid var(--swatch);outline-offset:3px}
.palette-picker input:focus-visible+span{outline:2px solid var(--swatch);outline-offset:5px}
.palette-picker small{font-size:9px;color:var(--muted);pointer-events:none;max-width:100%}
.palette-picker>.custom-color-picker{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-deep);color:var(--text);font-size:12px;font-weight:600}
.palette-picker>.custom-color-picker>span{width:auto;height:auto;min-width:0;overflow-wrap:anywhere;background:none;box-shadow:none;border:0;pointer-events:auto}
.custom-color-picker input[type=color]{position:static;opacity:1;inset:auto;width:48px;height:34px;flex:0 0 48px;margin:0;padding:2px;border:1px solid var(--line-light);border-radius:6px;background:var(--input);cursor:pointer}
.custom-color-picker input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.custom-color-picker input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
.custom-color-picker input[type=color]::-moz-color-swatch{border:0;border-radius:4px}
body.light .palette-picker>.custom-color-picker{background:#f6f7f9}
body.light .flow-folders .folder-entry>.folder-select:not(.selected)>.icon{color:var(--folder-color)}
@media(hover:none){.folder-row-menu>summary{opacity:1}}
@media(max-width:760px){.folder-entry{flex:0 0 auto;min-width:125px;margin:0}.folder-row-menu>summary{opacity:1}body .flow-folders .folder-entry>.folder-select{min-height:35px;padding:7px 9px}.palette-picker>div{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}}

/* Canvas controls and panels share the colorful icon palette without changing graph structure. */
.flow-editor{background:#1b1a1f}
.flow-editor .flow-viewport{background-color:#1b1a1f;background-image:radial-gradient(#9b52ed35 1.5px,transparent 1.5px)}
.flow-topbar{background:#222126;border-color:#3d3746;box-shadow:0 3px 12px #0002}
.flow-canvas-controls{background:#242328;border-color:#45404d;color:#d6c9e9;box-shadow:0 4px 18px #0003}
.flow-canvas-controls button{color:#c496ff;border-color:#3b3545}
.flow-canvas-controls button:hover,.flow-canvas-controls button[aria-pressed=true]{background:#9b52ed25;color:#fff}
.flow-canvas-controls #flow-zoom{background:#9b52ed13;color:#c496ff}
.flow-minimap{background:#242328;border:2px solid #9b52ed70;box-shadow:0 4px 18px #0003}
.flow-link-hint{background:#19302b;border-color:#04b49d80;color:#a6eadf}
.flow-link-hint button{color:#60d8f0}
.flow-node-palette{background:#222126;border-color:#494051;box-shadow:0 10px 32px #0005}
.flow-node-catalog>button:hover{background:#9b52ed1c}
.flow-node-catalog>button>span{background:color-mix(in srgb,var(--node-color) 14%,transparent);border-radius:7px;padding:5px}
.flow-tools-bar .flow-save-button{background:#04b49d;box-shadow:0 2px #087a6b}
.flow-tools-bar .flow-simulate-button{background:#08b9df12;color:#60d8f0;border-color:#08b9df66}
.flow-tools-bar .flow-simulate-button:hover{background:#08b9df22}
.flow-editor .flow-canvas-help{color:#a99bbd}
.light .flow-editor .flow-viewport{background-color:#f2f0f6;background-image:radial-gradient(#9b52ed30 1.5px,transparent 1.5px)}
.flow-editor .flow-start{background:#04b49d}
.flow-editor .flow-content{border-color:#3a8af4;box-shadow:0 1px #2563bd}
.flow-editor .flow-content>header{background:linear-gradient(125deg,#71b0ff,#3a8af4 65%)}
.flow-editor .flow-api{border-color:#9b52ed}
.flow-editor .flow-api>header{background:linear-gradient(125deg,#c496ff,#9b52ed 65%)}
.flow-editor .flow-followup>header{background:linear-gradient(125deg,#ffb078,#fb762f 65%);color:#301b0f}
.flow-editor .flow-wait{border-color:#08b9df}
.flow-editor .flow-wait>header{background:linear-gradient(125deg,#60d8f0,#08b9df 65%);color:#062c36}
.flow-editor .flow-notification{border-color:#ffb51b}
.flow-editor .flow-notification>header{background:linear-gradient(125deg,#ffd866,#ffb51b 65%);border-bottom-color:#ffb51b;color:#352400}
.flow-editor .flow-ai-circle{background:linear-gradient(140deg,#52decb,#04b49d 60%);box-shadow:0 0 30px #04b49d20}
.flow-editor .flow-ai-caption{background:#04b49d}
.light .flow-topbar,.light .flow-canvas-controls,.light .flow-node-palette,.light .flow-minimap{background:#fff;border-color:#cabddd}
.light .flow-canvas-controls button,.light .flow-canvas-controls #flow-zoom{color:#7135b5}
.light .flow-tools-bar .flow-simulate-button{color:#047f9c}