/* ============================================================
   chen.css — Módulo Modelo Entidad-Relación (notación Chen)
   QueryLab · Dr. César Ortiz Méndez
   ============================================================ */

/* ---------- barra de herramientas ---------- */
.ch-toolbar{ display:flex; flex-wrap:wrap; gap:8px 14px; margin:14px 0 10px; }
.ch-toolbar > .ch-palette{ flex:1 1 100%; }
.ch-group{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ch-palette{ padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--bg-elev); }
.ch-pal{ display:inline-flex; flex-direction:column; align-items:center; gap:3px; min-width:76px;
  padding:6px 7px 5px; border:1px solid var(--line); border-radius:6px; background:#f7f9fc;
  color:#1d2633; font-family:var(--mono); font-size:10.5px; font-weight:600; cursor:pointer; transition:.12s; }
.ch-pal svg{ display:block; height:26px; width:auto; max-width:64px; pointer-events:none; }
.ch-pal:hover{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan); }
.ch-pal.on{ border-color:var(--phosphor); box-shadow:0 0 0 2px var(--phosphor); background:#eafff5; }
.btn.on{ border-color:var(--phosphor); color:var(--phosphor); background:#0d2018; }
.ch-sep{ width:1px; height:22px; background:var(--line); margin:0 4px; }
.ch-zoomv{ color:var(--muted); font-size:11px; min-width:40px; text-align:center; }
.ch-exsel{ border:1px solid var(--line) !important; border-radius:4px; padding:6px 8px; max-width:250px; }

/* ---------- lienzo (papel) ---------- */
.ch-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px; }
.ch-stage{ position:relative; height:var(--stage-h, 600px); border:1px solid #233246; border-radius:8px; overflow:hidden;
  background-color:#fbfcfe; background-image:radial-gradient(#d3dbe6 1px, transparent 1.2px);
  background-size:24px 24px; touch-action:none; }
.ch-stage.panning{ cursor:grabbing; }
.ch-stage.connecting #ch-svg{ cursor:crosshair; }
#ch-svg{ position:absolute; inset:0; width:100%; height:100%; user-select:none; -webkit-user-select:none; }
#ch-svg .ch-node{ cursor:move; }
.ch-stage.connecting #ch-svg .ch-node{ cursor:crosshair; }
#ch-svg .ch-link{ cursor:pointer; }
.ch-doc{ position:absolute; left:12px; top:9px; z-index:2; pointer-events:none; color:#4a5a70;
  font:600 12px var(--sans); background:rgba(255,255,255,.85); padding:2px 8px; border-radius:4px; }
.ch-hint{ display:none; position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:3;
  background:#0c1622; color:#cfe; border:1px solid #1f3a55; border-radius:6px; padding:7px 12px;
  font-size:12px; max-width:90%; text-align:center; box-shadow:0 6px 18px rgba(0,0,0,.25); pointer-events:none; }
.ch-hint b{ color:var(--phosphor); }
.ch-viewopts{ position:absolute; right:10px; top:8px; z-index:2; display:flex; gap:10px;
  background:rgba(255,255,255,.9); border:1px solid #dde4ee; border-radius:5px; padding:3px 9px;
  font:500 11px var(--sans); color:#3a4a5c; }
.ch-viewopts label{ display:inline-flex; gap:4px; align-items:center; cursor:pointer; }
.ch-inline{ position:absolute; z-index:5; height:28px; border:2px solid var(--phosphor); border-radius:4px;
  font:600 13px Helvetica, Arial, sans-serif; text-align:center; color:#111; background:#fff; outline:none; }

/* ---------- panel lateral ---------- */
.ch-side{ border:1px solid var(--line); border-radius:8px; background:var(--bg-elev); padding:12px;
  max-height:var(--stage-h, 600px); overflow-y:auto; font-size:12px; }
.ch-ptitle{ color:var(--magenta); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  margin:12px 0 7px; font-weight:700; }
.ch-ptitle:first-child{ margin-top:0; }
.ch-field{ display:flex; flex-direction:column; gap:4px; margin-bottom:9px; }
.ch-field > span{ color:var(--muted); font-size:10.5px; }
.ch-in{ width:100%; background:#070d16; border:1px solid var(--line); color:var(--text); font-family:var(--mono);
  font-size:12px; padding:6px 8px; border-radius:4px; outline:none; }
.ch-in:focus{ border-color:var(--cyan); }
select.ch-in{ cursor:pointer; }
.ch-ta{ resize:vertical; font-family:var(--sans); line-height:1.45; }
.ch-flags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.ch-chk{ display:inline-flex; align-items:center; gap:7px; background:none; border:1px solid var(--line);
  border-radius:4px; padding:5px 8px; color:var(--muted); font-family:var(--mono); font-size:11px; cursor:pointer; }
.ch-chk i{ width:13px; height:13px; border:1px solid var(--dim); border-radius:3px; display:inline-block; }
.ch-chk.on{ color:var(--text); border-color:#15402c; }
.ch-chk.on i{ background:var(--phosphor); border-color:var(--phosphor); box-shadow:inset 0 0 0 2px #0c1724; }
.ch-seg{ display:inline-flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.ch-seg button{ background:#070d16; border:none; border-right:1px solid var(--line); color:var(--muted);
  font-family:var(--mono); font-size:11px; padding:5px 9px; cursor:pointer; }
.ch-seg button:last-child{ border-right:none; }
.ch-seg button.on{ background:#0d2018; color:var(--phosphor); font-weight:700; }
.ch-arow{ display:grid; grid-template-columns:1fr 112px 24px; gap:4px; margin-bottom:4px; }
.ch-arow .ch-in{ padding:5px 6px; font-size:11.5px; }
.ch-mini{ background:#0c1724; border:1px solid var(--line); color:var(--muted); border-radius:4px; cursor:pointer;
  font-size:12px; min-width:24px; }
.ch-mini:hover{ color:var(--cyan); border-color:var(--cyan); }
.ch-quick{ display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 4px; }
.ch-quick .btn{ font-size:10.5px; padding:4px 7px; }
.ch-li{ display:flex; justify-content:space-between; align-items:center; gap:6px; padding:5px 8px; margin-bottom:4px;
  border:1px solid var(--line); border-radius:4px; background:#0a1320; color:var(--text); }
.ch-empty{ color:var(--dim); font-size:11.5px; font-style:italic; margin:2px 0 6px; }
.ch-note{ color:var(--muted); font-size:11px; font-family:var(--sans); line-height:1.45; margin:0 0 8px;
  border-left:2px solid var(--violet); padding-left:8px; }
.ch-part{ border:1px solid var(--line); border-radius:6px; padding:7px; margin-bottom:6px; background:#0a1320; }
.ch-part-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; color:var(--phosphor); }
.ch-part-r{ display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap; color:var(--muted); font-size:10.5px; }
.ch-badge{ display:inline-block; margin:2px 0 8px; padding:3px 9px; border-radius:99px; border:1px solid #3a2a6a;
  color:var(--violet); font-size:11px; }
.ch-pfoot{ margin-top:14px; padding-top:10px; border-top:1px dashed var(--line); display:flex; justify-content:flex-end; }
.ch-stats{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:6px 0 12px; }
.ch-stats span{ border:1px solid var(--line); border-radius:4px; padding:6px 8px; color:var(--muted); font-size:11px; }
.ch-stats b{ color:var(--phosphor); font-size:15px; margin-right:3px; }
.ch-tips{ color:var(--muted); font-family:var(--sans); font-size:12px; line-height:1.5; }
.ch-tips b{ color:var(--text); }
.ch-tips ol{ padding-left:18px; margin:6px 0 0; } .ch-tips li{ margin:4px 0; }

/* ---------- acciones y salida ---------- */
.ch-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0 6px; }
.ch-autosave{ color:var(--dim); font-size:11px; margin-left:auto; }
.ch-review{ list-style:none; padding:0; margin:8px 0; }
.ch-review li{ display:flex; gap:10px; align-items:flex-start; padding:7px 10px; border:1px solid var(--line);
  border-radius:5px; margin-bottom:5px; background:var(--bg-elev); font-family:var(--sans); font-size:13px; }
.ch-review li.go{ cursor:pointer; } .ch-review li.go:hover{ border-color:var(--cyan); }
.ch-review .lv{ flex:none; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font:700 11px var(--mono); }
.ch-review li.error .lv{ background:#3a1326; color:var(--magenta); }
.ch-review li.warn .lv{ background:#3a2c0c; color:var(--amber); }
.ch-review li.info .lv{ background:#0f2638; color:var(--cyan); }
.ch-check, .ch-stepbox, .ch-legendbox{ border:1px solid var(--line); border-radius:8px; background:var(--bg-elev);
  padding:10px 14px; margin:12px 0; }
.ch-check summary, .ch-stepbox summary, .ch-legendbox summary{ cursor:pointer; color:var(--cyan); font-weight:700; font-size:13px; }
.ch-check ul{ font-family:var(--sans); color:#bac8d6; font-size:13px; }
.ch-steps{ margin:10px 0 2px; padding-left:22px; font-family:var(--sans); font-size:13.5px; color:#bac8d6; }
.ch-steps li{ margin:7px 0; line-height:1.5; }
.ch-steps .rule{ display:inline-block; margin-right:8px; padding:1px 8px; border-radius:4px; background:#14123a;
  color:var(--violet); font:700 11px var(--mono); border:1px solid #2c2466; }
.ch-tables{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:16px 0; }
.ch-table{ border:1px solid #2a4a78; border-radius:6px; overflow:hidden; background:#0b1524; }
.ch-th{ display:flex; justify-content:space-between; align-items:center; gap:8px; background:#2f5ea8; color:#fff;
  padding:7px 11px; font-weight:800; font-size:13px; }
.ch-th span{ overflow-wrap:anywhere; min-width:0; }
.ch-th small{ font-weight:500; font-size:10px; opacity:.85; text-transform:uppercase; letter-spacing:.08em; }
.ch-tr{ display:grid; grid-template-columns:1fr auto 54px; gap:8px; padding:4px 11px; font-size:12px; border-top:1px solid #15243a; }
.ch-tr .ct{ color:var(--muted); font-size:10.5px; }
.ch-tr .cf{ text-align:right; font-size:10px; font-weight:700; color:var(--dim); }
.ch-tr.pk .cn{ color:var(--amber); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.ch-tr.pk .cf{ color:var(--amber); }
.ch-tr.fk .cn{ color:var(--cyan); }
.ch-tr.fk .cf{ color:var(--cyan); }
.ch-tfk{ padding:6px 11px; font-size:10.5px; color:var(--muted); border-top:1px dashed #1d3150; }
.ch-sub{ color:var(--muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin:10px 0 6px; }
.ch-notation{ border:1px solid var(--line); border-radius:6px; background:#070d16; padding:10px 14px; font-size:13px; line-height:1.9; }
.ch-notation b{ color:var(--phosphor); }
.ch-notation .pk{ text-decoration:underline; text-underline-offset:3px; color:var(--amber); }
.ch-notation .fk{ color:var(--cyan); }
.ch-sqlbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0 6px; }
.ch-sqlbar .ch-in{ width:auto; }
.ch-sql{ max-height:420px; overflow:auto; }
.ch-dtabs{ display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.ch-dtabs button{ background:#0a1320; border:none; border-right:1px solid var(--line); color:var(--muted); font-family:var(--mono);
  font-size:12px; font-weight:600; padding:6px 12px; cursor:pointer; }
.ch-dtabs button:last-child{ border-right:none; }
.ch-dtabs button:hover{ color:var(--cyan); }
.ch-dtabs button.on{ background:#0d2018; color:var(--phosphor); }
.ch-aitog{ display:inline-flex; gap:6px; align-items:center; color:var(--muted); font-size:11.5px; cursor:pointer; }
.ch-dnote{ color:var(--muted); font-family:var(--sans); font-size:12.5px; border-left:2px solid var(--violet); padding:2px 0 2px 10px; margin:4px 0 8px; }
@keyframes chflash{ from{ box-shadow:0 0 0 2px var(--phosphor); } to{ box-shadow:0 0 0 0 transparent; } }
.ch-flash{ animation:chflash .6s ease-out; }

/* ---------- leyenda ---------- */
.ch-legend{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; margin-top:10px; }
.ch-lg{ display:flex; gap:10px; align-items:center; padding:8px; border-radius:6px; background:#f7f9fc; color:#1d2633; }
.ch-lg svg{ flex:none; max-width:120px; }
.ch-lg b{ display:block; font:700 12px var(--sans); }
.ch-lg span{ display:block; font:400 11.5px var(--sans); color:#4a5a70; line-height:1.35; }

/* ---------- modal PDF ---------- */
.ch-modal{ position:fixed; inset:0; z-index:60; background:rgba(3,6,10,.72); display:flex; align-items:center; justify-content:center; padding:16px; }
.ch-modal[hidden]{ display:none; }
.ch-modal-box{ width:min(440px,100%); background:var(--bg-panel); border:1px solid #1f3a55; border-radius:10px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.ch-modal-box h3{ margin:0 0 12px; color:var(--phosphor); }
.ch-pdfopts{ display:flex; flex-direction:column; gap:7px; margin:8px 0 14px; font-family:var(--sans); font-size:13px; color:#bac8d6; }
.ch-pdfopts label{ display:flex; gap:8px; align-items:center; cursor:pointer; }
.ch-modal-actions{ display:flex; justify-content:flex-end; gap:8px; }

/* ---------- teoría ---------- */
.ch-fig{ background:#fbfcfe; border:1px solid #233246; border-radius:8px; padding:10px; margin:12px 0; text-align:center; }
.ch-fig svg{ max-width:100%; height:auto; }
.ch-fig figcaption{ color:#4a5a70; font:500 12px var(--sans); margin-top:6px; }
.ch-figs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.ch-figs .ch-fig{ margin:0; }
.ch-open{ display:inline-block; margin-top:6px; font-size:11.5px; }
.ch-cardtbl{ width:100%; border-collapse:collapse; margin:12px 0; font-size:13px; font-family:var(--sans); }
.ch-cardtbl th, .ch-cardtbl td{ border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
.ch-cardtbl th{ background:#0b1421; color:var(--cyan); font-family:var(--mono); font-size:12px; }
.ch-cardtbl td code{ font-family:var(--mono); color:var(--phosphor); }
.ch-toc{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; }
.ch-toc a{ border:1px solid var(--line); border-radius:99px; padding:4px 11px; font-size:12px; background:var(--bg-elev); }
.ch-quiz{ border:1px solid var(--line); border-radius:8px; background:var(--bg-elev); padding:14px; margin:10px 0; }
.ch-quiz .q{ font-family:var(--sans); color:#e3ecf5; margin-bottom:8px; }
.ch-quiz .opts{ display:flex; flex-wrap:wrap; gap:6px; }
.ch-quiz .opts button{ font-family:var(--mono); font-size:12px; padding:6px 10px; border-radius:4px; border:1px solid var(--line); background:#0c1724; color:var(--text); cursor:pointer; }
.ch-quiz .opts button.ok{ border-color:var(--phosphor); color:var(--phosphor); background:#0d2018; }
.ch-quiz .opts button.bad{ border-color:var(--magenta); color:var(--magenta); background:#1d0e16; }
.ch-quiz .fb{ margin-top:8px; font-family:var(--sans); font-size:13px; color:var(--muted); min-height:1em; }

@media (max-width:980px){
  .ch-wrap{ grid-template-columns:1fr; }
  .ch-side{ max-height:none; }
  .ch-stage{ height:480px; }
}
@media (max-width:560px){
  .ch-pal{ min-width:64px; font-size:9.5px; }
  .ch-stage{ height:420px; }
  .ch-autosave{ margin-left:0; }
}

/* ============================================================
   Editor relacional (mer.js) — mismo lienzo blanco que el editor MER
   ============================================================ */
#mer-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:auto; z-index:1; user-select:none; -webkit-user-select:none; }
#mer-svg .tb{ cursor:move; }
#mer-svg .rl{ cursor:pointer; }
.ch-stage.connecting #mer-svg, .ch-stage.connecting #mer-svg .tb{ cursor:crosshair; }
.ch-stage.dragging #mer-svg .tb{ cursor:grabbing; }
.mr-legend{ top:auto; bottom:8px; right:10px; gap:12px; }
.mr-legend span{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.mr-attr{ border:1px solid var(--line); border-radius:6px; background:#0a1320; margin-bottom:5px; }
.mr-attr.open{ border-color:#1f4a3a; }
.mr-top{ display:grid; grid-template-columns:24px minmax(0,1fr) 92px auto auto 24px; gap:4px; align-items:center; padding:4px; }
.mr-top .ch-in{ padding:5px 6px; font-size:11.5px; }
.mr-tg{ font:700 10px var(--mono); padding:5px 6px; border-radius:4px; border:1px solid var(--line); background:#070d16; color:var(--muted); cursor:pointer; }
.mr-tg.pk.on{ background:var(--amber); border-color:var(--amber); color:#0b0f14; }
.mr-tg.fk.on{ background:var(--cyan); border-color:var(--cyan); color:#0b0f14; }
.mr-det{ display:flex; flex-direction:column; gap:7px; padding:2px 8px 9px 32px; }
.mr-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mr-row .ch-in{ flex:1; min-width:70px; width:auto; }
.mr-row .ch-in.mr-tiny{ flex:none; width:58px; min-width:0; }
.mr-lab{ color:var(--muted); font-size:10.5px; min-width:66px; }
.mr-epick{ margin:8px 0; }
.mr-eprow{ display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:5px; }
.mr-ep{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 4px; border:1px solid var(--line);
  border-radius:5px; background:#0a1320; color:var(--muted); cursor:pointer; font-family:var(--mono); }
.mr-ep:hover{ border-color:var(--dim); }
.mr-ep.on{ border-color:var(--phosphor); background:#0d2018; color:var(--text); }
.mr-ep .s{ font-size:15px; color:var(--cyan); font-weight:700; }
.mr-ep .l{ font-size:9.5px; }
.ch-actions .mer-sqlgroup .btn{ border-top-right-radius:0; border-bottom-right-radius:0; }
@media (max-width:560px){ .mr-legend{ display:none; } .mr-top{ grid-template-columns:24px minmax(0,1fr) 78px auto auto 22px; } }

/* ---------- panel de propiedades retráctil (ui-layout.js) ---------- */
html.ui-pn-off .ch-wrap.has-panel{ grid-template-columns:minmax(0,1fr); }
html.ui-pn-off .ch-wrap.has-panel .ch-side{ display:none; }
.ql-pntab{ position:absolute; right:10px; top:40px; z-index:3; background:#0c1622; color:#cfe;
  border:1px solid #1f3a55; border-radius:5px; padding:4px 10px; font:600 11px var(--mono); cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.18); }
.ql-pntab:hover{ border-color:var(--cyan); color:var(--cyan); }
html.ui-pn-off .ql-pntab{ background:var(--phosphor); color:#062014; border-color:var(--phosphor); }
@media (max-width:980px){ .ql-pntab{ display:none; } html.ui-pn-off .ch-wrap.has-panel .ch-side{ display:block; } }