.diagram-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}.diagram-heading h1{max-width:850px;margin:0;font:600 clamp(36px,5vw,58px)/1.03 var(--font-display);letter-spacing:-.04em}.diagram-heading p{margin:12px 0 0;color:var(--muted)}
.diagram-app{display:grid;grid-template-columns:250px minmax(620px,1fr) 230px;min-height:720px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(23,62,84,.08);overflow:hidden}.diagram-app.is-readonly{grid-template-columns:1fr}.diagram-palette,.diagram-inspector{padding:20px;background:#f8fafb}.diagram-palette{border-right:1px solid var(--line)}.diagram-inspector{border-left:1px solid var(--line)}.diagram-panel-title{display:grid;gap:2px;margin-bottom:13px}.diagram-panel-title strong{font-size:13px}.diagram-panel-title small{color:var(--muted);font-size:10px}.people-title{margin-top:24px}.diagram-tools,.diagram-people{display:grid;gap:7px}.diagram-tools button,.diagram-people button{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px;width:100%;padding:9px;border:1px solid #e0e6ea;border-radius:12px;background:#fff;text-align:left;cursor:grab}.diagram-tools button:hover,.diagram-people button:hover{border-color:#82bdd9;background:#f4fbfe}.diagram-tools button>span,.diagram-people button>span:last-child{display:grid;min-width:0}.diagram-tools b,.diagram-people b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.diagram-tools small,.diagram-people small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:9px}.diagram-mini{display:block;width:22px;height:22px;margin:auto;border:2px solid #258fc6;background:#e9f6fc}.diagram-mini.start{border-radius:50%;background:#d9f5d8;border-color:#4a9e55}.diagram-mini.end{border-radius:50%;background:#fee0e0;border-color:#bd4949}.diagram-mini.decision{transform:rotate(45deg);border-radius:3px;background:#fff7cc;border-color:#b6952f}.diagram-mini.system{border-radius:3px;box-shadow:3px 3px 0 #abd2e4}.diagram-person-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#e7f3f9}.diagram-people{max-height:220px;overflow:auto}.diagram-people>p{color:var(--muted);font-size:11px}.external-actor-form{display:grid;gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.external-actor-form input{padding:9px 11px;font-size:11px}.external-actor-form .button{min-height:38px;padding:7px 10px;font-size:11px}
.diagram-stage-shell{min-width:0;background:#eef3f6}.diagram-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;height:55px;padding:0 16px;border-bottom:1px solid #dce4e8;background:#fff}.diagram-toolbar>div{display:flex;gap:8px}.diagram-legend{padding:6px 9px;border-radius:999px;background:#eef7fb;color:#286f92;font-size:10px}.diagram-legend.external{background:#fff1e4;color:#9a5a1d}.diagram-tool-button{padding:8px 11px;border:1px solid #ccd8de;border-radius:9px;background:#fff;color:#33434c;font-size:10px;cursor:pointer}.diagram-tool-button.is-active{background:#174f6b;color:#fff}.diagram-stage{position:relative;height:665px;overflow:auto;background-color:#f7fafb;background-image:radial-gradient(#c7d4db 1px,transparent 1px);background-size:22px 22px}.diagram-stage.is-drop-target{box-shadow:inset 0 0 0 3px #2597d0}.diagram-lines,.diagram-node-layer{position:absolute;top:0;left:0;width:1600px;height:1000px}.diagram-lines{pointer-events:none;overflow:visible}.diagram-lines marker path{fill:#547482}.diagram-edge{fill:none;stroke:#547482;stroke-width:2.2}.diagram-node-layer{pointer-events:none}.diagram-node{position:absolute;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:9px;width:170px;min-height:68px;padding:10px;border:2px solid #86b8cf;border-radius:14px;background:#fff;color:#17252c;text-align:left;box-shadow:0 7px 17px rgba(32,69,88,.11);cursor:grab;pointer-events:auto;touch-action:none}.diagram-node>span:last-child{display:grid;min-width:0}.diagram-node b{overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.25}.diagram-node small{margin-top:3px;color:#75838b;font-size:8px;text-transform:uppercase;letter-spacing:.05em}.diagram-node-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e5f4fb;color:#1d7da8;font-size:18px}.diagram-node.type-user{border-color:#6da9c4}.diagram-node.type-user .diagram-node-icon{background:#e1f2fa}.diagram-node.type-external{border-color:#e2a15d}.diagram-node.type-external .diagram-node-icon{background:#fff0df;color:#a55e1b}.diagram-node.type-start,.diagram-node.type-end{width:130px;border-radius:35px}.diagram-node.type-start{border-color:#67aa70}.diagram-node.type-end{border-color:#cb6969}.diagram-node.type-decision{border-color:#c6a847;background:#fffdf1}.diagram-node.is-selected{outline:3px solid rgba(37,151,208,.28);outline-offset:2px}.diagram-node.is-connecting{box-shadow:0 0 0 5px rgba(37,151,208,.22)}.diagram-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;color:#7d8c94;text-align:center;pointer-events:none}.diagram-empty[hidden]{display:none}.diagram-empty span{font-size:32px}.diagram-empty strong{margin-top:7px;color:#4b5b63}.diagram-empty p{margin:4px 0;font-size:11px}
.diagram-inspector-empty{padding:16px;border-radius:12px;background:#fff;color:var(--muted);font-size:11px;line-height:1.5}.diagram-inspector-fields{display:grid;gap:12px}.diagram-inspector-fields label{display:grid;gap:5px;color:var(--muted);font-size:10px}.diagram-inspector-fields input{padding:9px;font-size:11px}.diagram-inspector-fields .button{min-height:38px;padding:8px;font-size:11px}.diagram-remove-links,.diagram-remove-node{padding:8px;border:0;background:transparent;font-size:10px;cursor:pointer}.diagram-remove-links{color:#59666d}.diagram-remove-node{color:#a33131}#diagram-save-form{display:none}@media(max-width:1050px){.diagram-app{grid-template-columns:220px minmax(580px,1fr)}.diagram-inspector{display:none}}@media(max-width:760px){.diagram-heading{align-items:flex-start;flex-direction:column}.diagram-app{display:block}.diagram-palette{border-right:0;border-bottom:1px solid var(--line)}.diagram-stage{height:570px}.diagram-people{max-height:150px}}
.diagram-index-heading{margin-bottom:24px}.diagram-index-heading p{margin:10px 0 0;color:var(--muted)}.diagram-filter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-bottom:24px;padding:12px;border:1px solid var(--line);border-radius:16px;background:#f6f8f9}.diagram-filter input{min-height:46px;padding:0 15px;border:1px solid #dce3e7;border-radius:11px;background:#fff}.diagram-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.diagram-catalog-card{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:190px;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 14px 40px rgba(23,62,84,.06)}.diagram-preview{display:grid;place-content:center;justify-items:center;gap:8px;background:#f0f4f6;color:#77858c;text-align:center}.diagram-preview.has-diagram{background:linear-gradient(145deg,#1f6688,#2b9bd0);color:#fff}.diagram-preview span{font-size:32px}.diagram-preview small{font-size:10px;font-weight:700}.diagram-catalog-content{display:flex;flex-direction:column;align-items:flex-start;padding:24px}.diagram-catalog-content .process-code{color:#258fc6;font:700 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}.diagram-catalog-content h2{margin:8px 0 5px;font:600 22px/1.15 var(--font-display)}.diagram-catalog-content p{margin:0 0 20px;color:var(--muted);font-size:12px}.diagram-catalog-content .button{margin-top:auto}.diagram-catalog>.empty{grid-column:1/-1}@media(max-width:900px){.diagram-catalog{grid-template-columns:1fr}}@media(max-width:560px){.diagram-filter{grid-template-columns:1fr}.diagram-catalog-card{grid-template-columns:1fr}.diagram-preview{min-height:110px}}

/* Notación BPMN 2.0 */
.diagram-heading-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:9px}.diagram-heading-actions form{margin:0}.diagram-legend.bpmn{background:#e6f3f9;color:#155f82;font-weight:800}.diagram-mini.start{background:#fff}.diagram-mini.end{border-width:4px;background:#fff}.diagram-mini.intermediate{border:4px double #8b6bb1;border-radius:50%;background:#fff}.diagram-mini.parallel{position:relative;transform:rotate(45deg);border-radius:3px;background:#fff7cc;border-color:#b6952f}.diagram-mini.parallel:after{content:'+';display:grid;place-items:center;transform:rotate(-45deg);font-style:normal;font-weight:800}.diagram-mini.user-task{border-radius:4px;background:#eef8ff}.diagram-mini.subprocess{position:relative;border-radius:4px}.diagram-mini.subprocess:after{content:'+';position:absolute;left:6px;bottom:-3px;font-style:normal;font-weight:800}.diagram-node.type-startEvent,.diagram-node.type-endEvent,.diagram-node.type-intermediateEvent{display:flex;align-items:center;justify-content:center;width:74px;height:74px;min-height:74px;padding:7px;border-radius:50%}.diagram-node.type-startEvent span:last-child,.diagram-node.type-endEvent span:last-child,.diagram-node.type-intermediateEvent span:last-child{display:none}.diagram-node.type-startEvent{border-color:#4f9c59}.diagram-node.type-endEvent{border:5px solid #bd4949}.diagram-node.type-intermediateEvent{border:5px double #8b6bb1}.diagram-node.type-exclusiveGateway,.diagram-node.type-parallelGateway{display:flex;align-items:center;justify-content:center;width:82px;height:82px;min-height:82px;border-color:#c6a847;border-radius:8px;background:#fffdf1;transform:rotate(45deg)}.diagram-node.type-exclusiveGateway .diagram-node-icon,.diagram-node.type-parallelGateway .diagram-node-icon{transform:rotate(-45deg);background:transparent;color:#8a721f;font-size:28px;font-weight:800}.diagram-node.type-exclusiveGateway span:last-child,.diagram-node.type-parallelGateway span:last-child{display:none}.diagram-node.type-subProcess{border:4px double #6c9eb5}.diagram-node.type-userTask{border-color:#68a7c5}.diagram-node.type-serviceTask{border-color:#6f9dad}
.diagram-heading-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-heading-actions form{margin:0}
.diagram-kind-tabs{display:flex;gap:8px;margin:0 0 34px;padding:6px;border:1px solid var(--line);border-radius:15px;background:#f5f7f8}.diagram-kind-tabs a{display:flex;align-items:center;justify-content:center;gap:9px;flex:1;padding:12px 16px;border-radius:10px;color:#33454e;text-decoration:none;font-size:12px;font-weight:700}.diagram-kind-tabs a:hover{background:#fff}.diagram-kind-tabs span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#dfeef5;color:#1c739a}.diagram-kind-section{scroll-margin-top:120px;margin-bottom:52px}.diagram-section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:18px}.diagram-section-heading h2{margin:5px 0 4px;font:600 30px/1.1 var(--font-display)}.diagram-section-heading p{margin:0;color:var(--muted);font-size:13px}.diagram-preview.bpmn-preview{background:linear-gradient(145deg,#4d486f,#877ab8);color:#fff}.diagram-catalog-card.standalone{border-color:#dcd8eb}.diagram-create-page{max-width:820px;margin:28px auto}.diagram-create-page>p{margin:10px 0 28px;color:var(--muted)}.diagram-create-form{display:grid;gap:20px;padding:30px}.diagram-create-form label{display:grid;gap:7px;color:#4c5960;font-size:12px;font-weight:700}.diagram-create-form input,.diagram-create-form textarea{width:100%;padding:13px 15px;border:1px solid #d7dfe3;border-radius:11px;background:#fff;font:inherit;font-weight:400}.diagram-create-form .form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}@media(max-width:650px){.diagram-kind-tabs{display:grid}.diagram-section-heading{align-items:flex-start;flex-direction:column}}
.diagram-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.diagram-card-actions .button{margin-top:0;padding:0 15px;min-height:40px;font-size:12px}.diagram-card-actions form{margin:0}.button-bpmn{border-color:#7567a5;background:#f1eef9;color:#544681}.diagram-mini.lane{width:26px;height:19px;border-color:#7e8990;background:linear-gradient(90deg,#eaf0f3 24%,#fff 24%)}.diagram-mini.message{border:4px double #0b9fab;border-radius:50%;background:#d9f7f7}.diagram-mini.document{border-radius:2px;background:#fff}.diagram-mini.datastore{border-radius:50%;background:#e9edf0;box-shadow:inset 0 -4px 0 #9ca7ac}.diagram-node.type-lane{z-index:0;display:block;width:1460px;height:220px;min-height:220px;padding:0 0 0 46px;border:1px solid #8e989d;border-radius:0;background:rgba(255,255,255,.54);box-shadow:none}.diagram-node.type-lane .diagram-node-icon{position:absolute;inset:0 auto 0 0;width:46px;height:auto;border-right:1px solid #8e989d;border-radius:0;background:#f4f6f7;color:#4f5b61}.diagram-node.type-lane>span:last-child{display:flex;align-items:center;height:100%;padding-left:8px;writing-mode:vertical-rl;transform:rotate(180deg)}.diagram-node.type-lane b{font-size:12px}.diagram-node.type-lane small{display:none}.diagram-node:not(.type-lane){z-index:2}.diagram-node.type-task,.diagram-node.type-userTask,.diagram-node.type-serviceTask{border-color:#b8b5a7;background:#fffef6}.diagram-node.type-exclusiveGateway,.diagram-node.type-parallelGateway{border-color:#dd9915;background:#ffb51f}.diagram-node.type-exclusiveGateway .diagram-node-icon,.diagram-node.type-parallelGateway .diagram-node-icon{color:#555}.diagram-node.type-messageEvent{display:flex;align-items:center;justify-content:center;width:74px;height:74px;min-height:74px;padding:7px;border:5px double #0aa2ae;border-radius:50%;background:#28c0c8}.diagram-node.type-messageEvent span:last-child{display:none}.diagram-node.type-messageEvent .diagram-node-icon{background:transparent;color:#174f58;font-size:25px}.diagram-node.type-dataObject,.diagram-node.type-dataStore{display:flex;flex-direction:column;justify-content:center;width:110px;height:90px;min-height:90px;border-style:dashed;border-color:#737b7f;background:#fff}.diagram-node.type-dataObject .diagram-node-icon,.diagram-node.type-dataStore .diagram-node-icon{background:transparent;color:#5d666a;font-size:28px}.diagram-node.type-dataObject span:last-child,.diagram-node.type-dataStore span:last-child{text-align:center}.diagram-node.type-dataObject small,.diagram-node.type-dataStore small{display:none}
.diagram-workspace-page .main-content{max-width:none;padding:18px 18px 0}.diagram-workspace-page .back{margin:0 0 10px}.diagram-workspace-page .diagram-heading{align-items:center;margin-bottom:14px}.diagram-workspace-page .diagram-heading h1{max-width:none;font-size:clamp(28px,3vw,42px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.diagram-workspace-page .diagram-heading p{margin-top:5px}.diagram-workspace-page .diagram-app{grid-template-columns:270px minmax(0,1fr) 260px;height:calc(100vh - 235px);min-height:650px}.diagram-workspace-page .diagram-palette,.diagram-workspace-page .diagram-inspector{overflow:auto}.diagram-workspace-page .diagram-stage{height:calc(100vh - 290px);min-height:595px}.diagram-app:fullscreen{width:100vw;height:100vh;grid-template-columns:280px minmax(0,1fr) 280px;border:0;border-radius:0}.diagram-app:fullscreen .diagram-stage{height:calc(100vh - 55px)}.diagram-app:fullscreen .diagram-palette,.diagram-app:fullscreen .diagram-inspector{overflow:auto}.diagram-app:fullscreen .diagram-lines,.diagram-app:fullscreen .diagram-node-layer{width:2400px;height:1600px}@media(max-width:1050px){.diagram-workspace-page .diagram-app{grid-template-columns:220px minmax(0,1fr)}.diagram-workspace-page .diagram-heading h1{white-space:normal}}

/* Diagramas: vista consolidada en tabla */
.dg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 14px; }
.dg-title { margin: 0; font-size: 34px; line-height: 1.1; letter-spacing: -.02em; }
.dg-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.dg-tools input[type=search] { width: 300px; height: 40px; padding: 0 14px; border: 1px solid #d5dde3; border-radius: 12px; }
.dg-tools select { width: 200px; height: 40px; padding: 0 12px; border: 1px solid #d5dde3; border-radius: 12px; background: #fff; }
.dg-tools .button { min-height: 40px; padding: 0 16px; font-size: 14px; }
.dg-tabs { display: flex; gap: 6px; margin: 0 0 12px; padding: 4px; background: #eef3f7; border-radius: 12px; width: fit-content; }
.dg-tabs a { padding: 7px 16px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: #4b5d6b; text-decoration: none; }
.dg-tabs a:hover { background: #fff; color: #174f6b; }
.dg-tabs a span { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #dfeaf2; color: #174f6b; font-size: 12px; }
.dg-section { margin-bottom: 26px; scroll-margin-top: 90px; }
.dg-sub { font-size: 18px; margin: 4px 0 8px; } .dg-sub small { font-size: 13px; font-weight: 500; color: #64748b; margin-left: 8px; }
.dg-table-wrap { border: 1px solid #dbe6ee; border-radius: 14px; background: #fff; overflow-x: auto; }
.dg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dg-table thead th { position: sticky; top: 0; background: #174f6b; color: #fff; text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 9px 12px; white-space: nowrap; }
.dg-table thead th:first-child { border-top-left-radius: 13px; } .dg-table thead th:last-child { border-top-right-radius: 13px; }
.dg-table td { padding: 7px 12px; border-bottom: 1px solid #edf1f5; vertical-align: middle; }
.dg-table tbody tr:nth-child(even) td { background: #fafcfd; }
.dg-table tbody tr:hover td { background: #eef6fb; }
.dg-table tbody tr[hidden] { display: none; }
.dg-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #1d6f96; font-weight: 700; white-space: nowrap; }
.dg-name { font-weight: 600; color: #1b2a36; }
.dg-area b { display: block; font-weight: 600; font-size: 12.5px; color: #33475a; line-height: 1.2; }
.dg-area small { display: block; color: #7a8894; font-size: 11.5px; line-height: 1.2; }
.dg-ver { color: #64748b; white-space: nowrap; }
.dg-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #eef2f6; color: #8a97a3; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.dg-pill.on { background: #dcefe6; color: #226a4b; }
.dg-actions-h { text-align: right !important; }
.dg-actions { display: flex; gap: 5px; justify-content: flex-end; align-items: center; white-space: nowrap; }
.dg-actions form { margin: 0; display: inline-flex; }
.dg-btn { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border: 1px solid #cfdbe4; border-radius: 8px; background: #fff; color: #174f6b; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.dg-btn:hover { background: #e9f3f9; border-color: #1d6f96; }
.dg-btn.bpmn { color: #5b3fb0; border-color: #d9d0f0; background: #f7f4ff; } .dg-btn.bpmn:hover { background: #ece6ff; border-color: #5b3fb0; }
.dg-btn.ghost { background: #fff; border-style: dashed; }
@media (max-width: 760px) { .dg-tools input[type=search], .dg-tools select { width: 100%; } .dg-table { min-width: 760px; } }

/* Editor de diagramas: más legible y cómodo para trabajar */
.diagram-toolbar-right { display: flex; align-items: center; gap: 8px; }
.diagram-zoom { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border: 1px solid #dce4e8; border-radius: 10px; background: #f8fafb; }
.diagram-zoom [data-zoom-label] { min-width: 44px; text-align: center; font-size: 12px; font-weight: 700; color: #33475a; }
.diagram-zoom .diagram-tool-button { min-width: 30px; }
.diagram-sizer { position: relative; }
.diagram-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.diagram-stage { height: calc(100vh - 300px); min-height: 520px; }
.diagram-node { width: 230px; height: 96px; min-height: 96px; padding: 10px 12px; gap: 10px; grid-template-columns: 36px minmax(0, 1fr); }
.diagram-node b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; font-size: 12.5px; line-height: 1.32; word-break: break-word; }
.diagram-node small { display: block; margin-top: 4px; font-size: 9.5px; letter-spacing: .03em; text-transform: none; color: #6b7a84; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diagram-node-icon { width: 36px; height: 36px; }
.diagram-node-seq { position: absolute; top: -10px; left: -10px; min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: #1d6f96; color: #fff; font-style: normal; font-size: 11.5px; font-weight: 700; box-shadow: 0 2px 6px rgba(15,23,42,.25); }
.diagram-node.type-start, .diagram-node.type-end { width: 140px; height: 64px; min-height: 64px; }
.diagram-node.type-start b, .diagram-node.type-end b { -webkit-line-clamp: 1; }
.diagram-node.type-start small, .diagram-node.type-end small { display: none; }
.diagram-node.is-selected { outline: 3px solid rgba(37,151,208,.4); outline-offset: 3px; z-index: 5; }
.diagram-node:hover:not(.type-lane) { box-shadow: 0 10px 24px rgba(32,69,88,.2); }
.diagram-edge { stroke-width: 2.4; }
.diagram-inspector-fields textarea { padding: 9px; font-size: 12px; line-height: 1.4; resize: vertical; border: 1px solid var(--line); border-radius: 10px; width: 100%; }
.diagram-hint { margin: 2px 0 0; font-size: 11px; line-height: 1.5; color: #7a8894; }
.diagram-hint b { color: #4b5d6b; }
.diagram-workspace-page .diagram-stage { height: calc(100vh - 290px); min-height: 560px; }

/* Casilla con todo lo que tiene el paso */
.diagram-node { width: 340px; height: auto; min-height: 70px; align-items: start; }
.diagram-node b { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: normal; font-size: 13px; line-height: 1.38; }
.diagram-node.type-start b, .diagram-node.type-end b { white-space: nowrap; }
.diagram-node .dn-body { display: block; min-width: 0; }
.dn-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.dn-chips[hidden], .diagram-node small[hidden] { display: none; }
.dn-chip { display: inline-flex; align-items: flex-start; gap: 4px; padding: 3px 9px; border-radius: 999px; background: #eef2f6; color: #33475a; font-size: 11px; font-weight: 600; line-height: 1.3; max-width: 100%; white-space: normal; text-align: left; }
.dn-resp { background: #e3f0f8; color: #174f6b; }
.dn-sys { background: #e3f4ea; color: #1f6a44; }
.dn-int { background: #efe8fb; color: #5b3fb0; }
.dn-mode { background: #fff3d9; color: #8a5a00; }
.dn-input { background: #eceff3; color: #4b5d6b; }
.dn-rule { background: #e6f1f8; color: #174f6b; border-radius: 10px; }
.dn-exc { background: #fff1e6; color: #9a3a0a; border-radius: 10px; }
.diagram-node-detail { display: grid; gap: 5px; }
.diagram-node-detail[hidden] { display: none; }
.diagram-node-detail .dn-chip { border-radius: 8px; }
.diagram-tool-danger { color: #a52b2b; border-color: #f0c9c9; }
.diagram-tool-danger:hover { background: #fdeeee; border-color: #d98a8a; }

/* Decisiones: respuestas Sí / No */
.diagram-edge-label { font-size: 13px; font-weight: 800; paint-order: stroke; stroke: #f7fafb; stroke-width: 4px; stroke-linejoin: round; }
.dn-yes { background: #dcefe6; color: #1f6a44; }
.dn-no { background: #fbe4e4; color: #a52b2b; }
.diagram-branches { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: #fffdf1; border: 1px solid #efe3b1; }
.diagram-branches[hidden] { display: none; }
.diagram-branches strong { font-size: 12px; color: #6b5a1f; }
.diagram-branches p { margin: 0; font-size: 11.5px; color: #7a6a30; line-height: 1.45; }
.diagram-branch-row { display: grid; grid-template-columns: 96px 1fr 24px; gap: 6px; align-items: center; font-size: 12px; }
.diagram-branch-row select { height: 30px; padding: 0 6px; border: 1px solid #d8cc9a; border-radius: 8px; background: #fff; font-size: 12px; }
.diagram-branch-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4b5d6b; }
.diagram-branch-row button { width: 24px; height: 24px; border: 0; border-radius: 6px; background: #fdeeee; color: #a52b2b; cursor: pointer; font-size: 15px; line-height: 1; }
.dg-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(15,23,42,.45); padding: 16px; }
.dg-modal-box { width: min(420px, 100%); background: #fff; border-radius: 16px; padding: 20px 22px; box-shadow: 0 24px 60px rgba(15,23,42,.35); display: grid; gap: 10px; }
.dg-modal-box h3 { margin: 0; font-size: 17px; color: #174f6b; }
.dg-modal-q { margin: 0; padding: 8px 12px; border-left: 3px solid #e0a43a; background: #fffdf1; border-radius: 6px; font-size: 13px; color: #1b2a36; }
.dg-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dg-modal-actions button { min-height: 46px; border-radius: 12px; border: 2px solid; font-size: 16px; font-weight: 800; cursor: pointer; background: #fff; }
.dg-modal-actions .is-yes { border-color: #1f7a4d; color: #1f7a4d; } .dg-modal-actions .is-yes:hover:not(:disabled) { background: #e6f5ec; }
.dg-modal-actions .is-no { border-color: #b42323; color: #b42323; } .dg-modal-actions .is-no:hover:not(:disabled) { background: #fdeeee; }
.dg-modal-actions button:disabled { opacity: .35; cursor: not-allowed; }
.dg-modal-skip, .dg-modal-cancel { min-height: 38px; border-radius: 10px; border: 1px solid #cfd8dc; background: #fff; font-weight: 600; cursor: pointer; }
.dg-modal-cancel { color: #64748b; border-color: transparent; }

/* Diagrama oficial dentro de la ficha del proceso */
.diagram-embed { margin: 0; background: #fff; }
.diagram-embed .diagram-app { display: block; height: 100vh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.diagram-embed .diagram-stage { height: calc(100vh - 56px); min-height: 0; }
.flow-official { border: 1px solid #dbe6ee; border-radius: 14px; overflow: hidden; background: #fff; }
.flow-official-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; background: #f3f8fb; border-bottom: 1px solid #dbe6ee; font-size: 12.5px; color: #4b5d6b; }
.flow-official-bar a { margin-left: auto; font-weight: 600; color: #1d6f96; text-decoration: none; } .flow-official-bar a + a { margin-left: 0; }
.flow-official-badge { padding: 2px 10px; border-radius: 999px; background: #dcefe6; color: #1f6a44; font-weight: 800; font-size: 11.5px; }
.flow-official-frame { display: block; width: 100%; border: 0; }
.flow-other { margin-top: 14px; border: 1px solid #dbe6ee; border-radius: 12px; padding: 4px 14px 12px; }
.flow-other > summary { cursor: pointer; padding: 10px 0; font-weight: 600; color: #174f6b; }
.flow-other form { margin-top: 10px; }

/* Propuesta de actualización desde el flujo */
.diagram-proposal { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; background: #fffaf0; border-bottom: 1px solid #f0d9a8; }
.diagram-proposal strong { color: #7a4a00; font-size: 14px; }
.diagram-proposal p { margin: 2px 0 0; font-size: 12.5px; color: #6b5a3a; line-height: 1.45; }
.diagram-proposal.is-done { background: #eef8f1; border-color: #b9dcc8; } .diagram-proposal.is-done strong { color: #1f6a44; } .diagram-proposal.is-done p { color: #3f6b54; }
.diagram-proposal-actions { display: flex; gap: 8px; flex: none; }
.diagram-proposal-actions .button { min-height: 36px; padding: 0 14px; font-size: 13px; }
.diagram-node.is-new { border-color: #2e8b57; box-shadow: 0 0 0 4px rgba(46,139,87,.18); }
.diagram-node.is-changed { border-color: #d99a1c; box-shadow: 0 0 0 4px rgba(217,154,28,.2); }
.diagram-node.is-removed { border: 2px dashed #c24a4a; opacity: .6; background: #fff6f6; }
.dn-flag { position: absolute; top: -11px; right: 10px; padding: 1px 9px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; box-shadow: 0 2px 6px rgba(15,23,42,.2); z-index: 6; }
.dn-flag-new { background: #2e8b57; } .dn-flag-changed { background: #d99a1c; } .dn-flag-removed { background: #c24a4a; }

/* Diagrama oficial reducido dentro de la ficha: solo lectura */
.diagram-embed-compact .diagram-toolbar { display: none; }
.diagram-embed-compact .diagram-app { height: auto; min-height: 0; }
.diagram-embed-compact .diagram-stage { min-height: 0; background-image: none; background-color: #fbfdfe; }
.diagram-embed-compact .diagram-node { pointer-events: none; cursor: default; }
.flow-official-frame { height: 420px; }

.dn-ctrl { background: #e3f4ea; color: #1d6b3c; border-radius: 10px; }
.dn-risk { background: #fbe4e4; color: #a63232; border-radius: 10px; }
.diagram-node-lists { display: grid; gap: 12px; margin: 12px 0; }
.diagram-node-lists[hidden] { display: none; }
.dnl-group { display: grid; gap: 5px; padding: 9px 10px; border: 1px solid #d6e1e6; border-radius: 10px; background: #fff; }
.dnl-group > strong { font-size: 12px; }
.dnl-rules > strong { color: #176486; } .dnl-exceptions > strong { color: #8a5a00; } .dnl-controls > strong { color: #1d6b3c; } .dnl-risks > strong { color: #a63232; }
.dnl-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border-radius: 8px; background: #f3f7f9; font-size: 12px; }
.dnl-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dnl-item button { width: 20px; height: 20px; border: 0; border-radius: 6px; background: #fff0f0; color: #a63232; cursor: pointer; }
.dnl-add { display: flex; gap: 5px; }
.dnl-add input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #d6e1e6; border-radius: 8px; font-size: 12px; }
.dnl-add button { width: 28px; border: 0; border-radius: 8px; background: #12384d; color: #fff; font-weight: 800; cursor: pointer; }

.diagram-systems-list { display: grid; gap: 6px; max-height: 230px; overflow: auto; padding: 2px; }
.diagram-systems-list > button { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #d6e1e6; border-radius: 10px; background: #fff; text-align: left; cursor: grab; }
.diagram-systems-list p { margin: 4px 2px; font-size: 12px; color: #6b7a84; }
.dnl-add select { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #d6e1e6; border-radius: 8px; font-size: 12px; background: #fff; }

.diagram-systems-list { gap: 4px; max-height: 200px; margin: 6px 0 14px; }
.diagram-systems-list > button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 0; height: auto; padding: 5px 8px; border-radius: 8px; }
.diagram-systems-list > button > i { flex: none; width: 14px !important; height: 14px !important; min-width: 14px; transform: none; margin: 0 !important; }
.diagram-systems-list > button > span { display: block; flex: 1; min-width: 0; text-align: left; }
.diagram-systems-list > button b { display: block; font-size: 11.5px !important; font-weight: 700; line-height: 1.25; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.diagram-more-people { margin: 14px 0; }
.diagram-more-people-row { display: grid; gap: 6px; }
.diagram-more-people select { width: 100%; padding: 8px 10px; border: 1px solid #d6e1e6; border-radius: 10px; background: #fff; font-size: 13px; }

.diagram-autosave { align-self: center; padding: 6px 12px; border-radius: 999px; background: #e3f4ea; color: #1d6b3c; font-size: 12px; font-weight: 700; }
.diagram-autosave.is-error { background: #fbe4e4; color: #a63232; }
.diagram-autosave[hidden] { display: none; }

.dn-chip-remove { margin-left: 5px; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.1); color: inherit; font-size: 10px; line-height: 1; cursor: pointer; vertical-align: middle; }
.dn-chip-remove:hover { background: rgba(166,50,50,.25); }

.diagram-node .dn-resize { position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px; border-right: 3px solid #86b8cf; border-bottom: 3px solid #86b8cf; border-radius: 0 0 6px 0; cursor: nwse-resize; opacity: 0; transition: opacity .12s; touch-action: none; }
.diagram-node:hover .dn-resize, .diagram-node.is-selected .dn-resize { opacity: 1; }
.diagram-node.is-resized { overflow: hidden; padding-top: 6px; padding-bottom: 6px; }
.diagram-node.is-resized .dn-chips { max-height: 100%; overflow: hidden; }

.diagram-edge-point { fill: #fff; stroke: #176486; stroke-width: 2.4; cursor: move; }
.diagram-edge-point:hover { fill: #e3f0f7; }

.diagram-edge-anchor { fill: #176486; stroke: #fff; stroke-width: 2; cursor: grab; }
.diagram-edge-anchor:hover { fill: #0f4a66; }

.diagram-node .dn-dup { position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #86b8cf; border-radius: 50%; background: #fff; color: #176486; box-shadow: 0 2px 6px rgba(32,69,88,.18); cursor: pointer; opacity: 0; transition: opacity .12s; z-index: 2; }
.diagram-node .dn-dup svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diagram-node:hover .dn-dup, .diagram-node.is-selected .dn-dup { opacity: 1; }
.diagram-node .dn-dup:hover { background: #e3f0f7; }
.diagram-node.is-resized .dn-dup { top: 3px; right: 3px; width: 20px; height: 20px; }