:root{--acento:#F5C518;--acento2:#ffd84d;--fuente:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif}
body.dark{--fondo:#0b0b0c;--panel:#141415;--panel2:#1c1c1e;--borde:#2c2c2f;--texto:#f4f4f4;--suave:#9a9aa0}
body.light{--fondo:#f7f7f5;--panel:#ffffff;--panel2:#f0f0ee;--borde:#dcdcd8;--texto:#141414;--suave:#66666c}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--fuente);background:var(--fondo);color:var(--texto);display:flex;flex-direction:column;height:100dvh;overflow:hidden}
button{font:inherit;color:inherit;background:var(--panel2);border:1px solid var(--borde);border-radius:9px;padding:7px 12px;cursor:pointer;transition:.15s}
button:hover{border-color:var(--acento);color:var(--acento)}
.primario,summary.primario{background:var(--acento);color:#111;border:1px solid var(--acento);font-weight:700}
.primario:hover{background:var(--acento2);color:#111}
.barra{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--borde);background:var(--panel);flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;margin-right:auto}
.marca .logo{color:var(--acento);font-size:26px;line-height:1}
.marca b{display:block;font-size:17px;letter-spacing:.3px}.marca em{font-style:normal;color:var(--acento)}
.marca small{display:block;color:var(--suave);font-size:11.5px}
.tabs{display:flex;background:var(--panel2);border:1px solid var(--borde);border-radius:11px;padding:3px}
.tabs button{border:0;background:transparent;padding:7px 14px;border-radius:8px;font-weight:600;color:var(--suave)}
.tabs button.activo{background:var(--acento);color:#111}
.acciones{display:flex;gap:8px;align-items:center}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;padding:7px 12px;border-radius:9px;user-select:none}
.menu summary::-webkit-details-marker{display:none}
.menu-lista{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--borde);border-radius:11px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:220px;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.menu-lista button{text-align:left;border:0;background:transparent}
.menu-lista button:hover{background:var(--panel2)}
.zona{flex:1;display:flex;min-height:0}
.panel-texto{width:430px;max-width:46vw;display:flex;flex-direction:column;border-right:1px solid var(--borde);background:var(--panel)}
body[data-mode="editor"] .panel-texto{display:none}
.panel-cab{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--borde)}
.mini{padding:4px 10px;font-size:12.5px}
.editor-texto{flex:1;min-height:160px;display:flex;position:relative;overflow:hidden}
.gutter{width:34px;flex:none;overflow:hidden;padding:12px 0;background:var(--panel2);border-right:1px solid var(--borde);color:var(--suave);font:11px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:center;user-select:none}
.gutter div{height:22px}.gutter .g-error,.gutter .g-aviso,.gutter .g-info{cursor:pointer;font-size:12px}
.area{flex:1;position:relative;min-width:0}
.backdrop,#texto{position:absolute;inset:0;margin:0;padding:12px 12px 12px 10px;font:13.5px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2;white-space:pre;overflow:auto;letter-spacing:0}
.backdrop{color:transparent;pointer-events:none;overflow:hidden}
.backdrop div{min-height:22px;border-radius:4px}
.backdrop .l-error{background:rgba(255,80,80,.16)}.backdrop .l-aviso{background:rgba(245,197,24,.13)}.backdrop .l-info{background:rgba(120,170,255,.10)}
#texto{resize:none;border:0;outline:0;background:transparent;color:var(--texto);caret-color:var(--acento)}
.ac{position:absolute;z-index:40;background:var(--panel);border:1px solid var(--acento);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.45);max-height:236px;overflow:auto;padding:4px}
.ac-item{padding:6px 10px;border-radius:7px;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.ac-item b{font:600 13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.ac-item small{color:var(--suave);font-size:11.5px}
.ac-item.sel,.ac-item:hover{background:rgba(245,197,24,.16)}.ac-item.sel b{color:var(--acento)}
.cab-botones{display:flex;gap:6px}
.rapidos{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--borde)}
.rapidos .mini{padding:4px 9px}
#avisos{max-height:30%;overflow:auto;border-top:1px solid var(--borde);font-size:12.5px;padding:6px 10px;display:grid;gap:5px}
#avisos .ok{color:#5fd38d}#avisos .resumen{color:var(--suave);font-size:11.5px}
#avisos .aviso{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;border-radius:8px;cursor:pointer;background:var(--panel2);border-left:3px solid var(--borde)}
#avisos .aviso .msg{flex:1 1 200px}
#avisos .a-error{border-left-color:#ff5a5a}#avisos .a-aviso{border-left-color:#F5C518}#avisos .a-info{border-left-color:#78aaff}
#avisos .fix{background:var(--acento);color:#111;border-color:var(--acento);font-weight:700}
#errores{padding:8px 14px;background:rgba(245,197,24,.12);color:var(--acento);font-size:12.5px;border-top:1px solid var(--borde)}
.chuleta{padding:8px 14px;border-top:1px solid var(--borde);font-size:12px;color:var(--suave);display:grid;gap:4px}
.chuleta summary{cursor:pointer;color:var(--texto);font-weight:600}
.chuleta a,.pie a,dialog a{color:var(--acento)}
code{background:var(--panel2);border:1px solid var(--borde);border-radius:5px;padding:0 5px;color:var(--texto);font-size:.92em}
.lienzo-wrap{flex:1;position:relative;min-width:0}
#canvas{position:absolute;inset:0;touch-action:none}
body.dark #canvas{background:radial-gradient(1200px 600px at 70% 0%,rgba(245,197,24,.06),transparent 60%),var(--fondo)}
.zoom{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:6px;z-index:10}
.zoom button{width:38px;height:38px;padding:0;font-size:18px;background:var(--panel)}
#estado{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--borde);padding:6px 12px;border-radius:20px;font-size:12px;color:var(--suave);opacity:0;transition:.3s;pointer-events:none}
#estado.on{opacity:1}
.aviso-texto{position:absolute;left:14px;bottom:14px;font-size:11.5px;color:var(--suave);max-width:60%;pointer-events:none}
body[data-mode="editor"] .aviso-texto{display:none}
body[data-mode="texto"] .djs-palette{display:none}
.pie{padding:7px 16px;font-size:11.5px;color:var(--suave);border-top:1px solid var(--borde);background:var(--panel);text-align:center}
dialog{max-width:680px;width:calc(100% - 24px);background:var(--panel);color:var(--texto);border:1px solid var(--borde);border-radius:16px;padding:22px 24px;font-size:14px;line-height:1.5}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h2{margin:0 0 8px;color:var(--acento)}
dialog table{border-collapse:collapse;width:100%;margin:10px 0}
dialog td{padding:6px 8px;border-bottom:1px solid var(--borde);vertical-align:top}
dialog td:first-child{white-space:nowrap}
dialog .nota{color:var(--suave);font-size:12.5px}

/* bpmn-js: tema oscuro y acento amarillo */
.bio-theme-parent,.djs-parent{--bio-canvas-accent:#F5C518;--bio-canvas-accent-subtle:rgba(245,197,24,.55);--bio-primary:#c99d00;--bio-focus:#F5C518;--bjs-font-family:Arial, Helvetica, sans-serif}
body.dark .bio-theme-parent,body.dark .djs-parent{--bio-surface:#1a1a1c;--bio-surface-overlay:#1d1d20;--bio-surface-subtle:#222225;--bio-surface-medium:#2a2a2e;--bio-surface-inverted:#e8e8e8;--bio-text:#f1f1f1;--bio-text-subtle:#c4c4c8;--bio-text-subtlest:#8d8d93;--bio-text-on-inverted:#111;--bio-border:#3a3a3f;--bio-border-disabled:#2a2a2e;--bio-primary-surface:rgba(245,197,24,.15);--bio-focus-surface:rgba(245,197,24,.15);--bio-shadow:rgba(0,0,0,.6);--bio-selected-surface:#2e2e33;--bio-selected-text:#F5C518;--canvas-fill-color:transparent}
.djs-palette{border-radius:12px;overflow:hidden}
.djs-palette .entry:hover{color:#F5C518}
body.dark .djs-direct-editing-parent{background:#222!important;color:#fff!important}
/* Iconos propios */
.djs-palette .entry.mb-icon-texto::before{content:"T";font:700 23px/1 Georgia,"Times New Roman",serif;display:inline-block}
.djs-context-pad .entry.mb-icon-copiar::before{content:"⧉";font:700 17px/22px Arial,sans-serif;display:block;text-align:center}
/* Carriles y piscinas con línea punteada, como la referencia */
[data-element-id^="Lane"]>.djs-visual>rect,[data-element-id^="Pool"]>.djs-visual>rect,[data-element-id^="Participant"]>.djs-visual>rect{stroke-dasharray:2 5;stroke-width:1.4px!important}
body.dark [data-element-id^="Lane"]>.djs-visual>rect,body.dark [data-element-id^="Pool"]>.djs-visual>rect,body.dark [data-element-id^="Participant"]>.djs-visual>rect{stroke:rgba(255,255,255,.35)!important;fill:rgba(255,255,255,.015)!important}
.bjs-powered-by{z-index:5}

button:disabled{opacity:.35;cursor:default;border-color:var(--borde)!important;color:var(--texto)!important}
.grupo-deshacer{display:flex;gap:6px}
.grupo-deshacer .ico{font-size:15px}
#toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,20px);background:#1f1f22;color:#fff;border:1px solid #F5C518;padding:9px 10px 9px 16px;border-radius:12px;font-size:14px;display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:.25s;z-index:30;box-shadow:0 10px 30px rgba(0,0,0,.45);white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast button{background:#F5C518;color:#111;border:0;font-weight:700;padding:6px 12px}
#toast.on~#estado,#estado:has(~#toast.on){opacity:0}
#hist-lista{list-style:none;padding:0;margin:12px 0;max-height:55vh;overflow:auto;display:grid;gap:8px}
#hist-lista li{display:flex;gap:12px;align-items:center;justify-content:space-between;border:1px solid var(--borde);border-radius:10px;padding:10px 12px;background:var(--panel2)}
#hist-lista li b{display:block}#hist-lista li small{color:var(--suave)}#hist-lista li em{display:block;font-style:normal;color:var(--suave);font-size:12px;margin-top:2px}
#hist-lista li.vacio{color:var(--suave);display:block}
#guia{position:fixed;inset:0;z-index:1000}
#guia-foco{position:fixed;border:2px solid #F5C518;border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.72);transition:all .3s;pointer-events:none}
#guia::before{content:"";position:fixed;inset:0}
#guia-card{position:fixed;background:var(--panel);color:var(--texto);border:1px solid #F5C518;border-radius:14px;padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.5);font-size:14.5px;line-height:1.5;transition:top .3s,left .3s}
#guia-card h3{margin:2px 0 8px;color:#F5C518;font-size:17px}
#guia-num{color:var(--suave);font-size:12px}
.guia-botones{display:flex;gap:8px;align-items:center;margin-top:14px}.guia-botones span{flex:1}
.enlace{background:none;border:0;color:var(--suave);padding:6px 0;text-decoration:underline}

@media (max-width:1560px){
  .marca small{display:none}
  #btn-historial .txt{display:none}
  .barra{gap:10px}
  .tabs button{padding:7px 11px}
}
@media (max-width:1180px){ #btn-guia .txt{display:none} }

@media (max-width:820px){
  .grupo-deshacer .txt,#btn-guia .txt{display:none}
  .grupo-deshacer{order:2}
  .barra{padding:8px 10px;gap:8px}
  .marca small{display:none}
  .tabs{order:4;width:100%}.tabs button{flex:1;padding:8px 6px;font-size:13px}
  .acciones button,.menu summary{padding:6px 9px;font-size:13px}
  .zona{flex-direction:column}
  .rapidos{padding:6px 10px}
  #avisos{max-height:22%}
  .panel-texto{width:100%;max-width:none;height:54%;border-right:0;border-bottom:1px solid var(--borde)}
  .chuleta{display:none}
  .aviso-texto{display:none}
  .lienzo-wrap{min-height:0}
  .djs-palette.two-column.open{width:94px}
}
dialog h3{margin:14px 0 4px;color:var(--acento);font-size:15px}
dialog ul{margin:4px 0 8px;padding-left:20px}dialog li{margin:4px 0}

.mini-sum{padding:4px 10px!important;font-size:12.5px;border:1px solid var(--borde);border-radius:9px;background:var(--panel2)}
.mini-sum:hover{border-color:var(--acento);color:var(--acento)}
.rapidos .menu-lista{left:0;right:auto;min-width:250px;max-height:60vh;overflow:auto}
.menu-mas button{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.menu-mas small{color:var(--suave);font-size:11.5px}
#menu-ejemplos .menu-lista{min-width:270px}
.marca .version{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid currentColor;border-radius:999px;font-size:10px;font-weight:600;font-style:normal;opacity:.7;vertical-align:middle}