
<style>
    /* El control (cerrado) se ve bien con texto claro */
select{
  color: var(--text);
}

/* Pero el menú desplegable (options) muchas veces es claro: pon texto oscuro */
select option{
  color: #0b1020;
  background: #ffffff;
}

    :root{
      --bg:#0a1224;
      --bg-top:#071022;
      --panel:#121b35;
      --panel2:#101832;
      --text:#edf2ff;
      --muted:#a7b5df;
      --accent:#8bb4ff;
      --danger:#ff5d7a;
      --ok:#57f287;
      --stroke:#d8dfff;
      --grid:#2a3b70;
      --grid2:#1d2b55;
      --node-fill:rgba(255,255,255,.04);
      --shadow: 0 12px 30px rgba(0,0,0,.35);
      --radius: 14px;
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    }
    :root[data-theme="light"]{
      --bg:#e7edf5;
      --bg-top:#f5f8fc;
      --panel:#f9fbff;
      --panel2:#eef3fa;
      --text:#142034;
      --muted:#5c6b82;
      --accent:#2f69d9;
      --danger:#c63f58;
      --ok:#167a50;
      --stroke:#26364d;
      --grid:#b8c7da;
      --grid2:#d7e0eb;
      --node-fill:rgba(255,255,255,.62);
      --shadow: 0 12px 28px rgba(37, 52, 76, .18);
    }
    *{box-sizing:border-box}
    body{
  margin:0;
  font-family:var(--font);
  background:linear-gradient(180deg, var(--bg-top), var(--bg));
  color:var(--text);
  height:100vh;
  overflow:hidden;

  /* NUEVO */
  display:flex;
  flex-direction:column;
}

    .topbar{
  /* QUITA: position:fixed; top/left/right */
  position:relative;
  margin:12px;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  background:rgba(17, 24, 49, .85);
  border:1px solid rgba(122, 162, 255, .25);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
  z-index:10;
  flex-wrap:wrap;
}

    .group{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
    .spacer{flex:1}
    button{
      border:1px solid rgba(207,214,255,.18);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      color:var(--text);
      padding:9px 10px;
      border-radius:12px;
      cursor:pointer;
      font-size:13px;
      user-select:none;
      transition:.12s transform ease, .12s border-color ease, .12s background ease;
    }
    button:hover{transform:translateY(-1px); border-color: rgba(122,162,255,.5)}
    button:active{transform:translateY(0px)}
    button.primary{border-color: rgba(122,162,255,.55)}
    button.danger{border-color: rgba(255,93,122,.55)}
    button.active{
      border-color: rgba(122,162,255,.9);
      box-shadow: 0 0 0 3px rgba(122,162,255,.15);
    }
    button:disabled{
      opacity:.45;
      cursor:not-allowed;
      transform:none;
      border-color: rgba(207,214,255,.18);
    }

    .hint{
      font-size:12px;
      color:var(--muted);
      padding:6px 10px;
      border:1px dashed rgba(207,214,255,.25);
      border-radius:12px;
      background:rgba(15,22,48,.5);
      max-width:560px;
    }
    .kbd{
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:11px;
      padding:2px 6px;
      border-radius:8px;
      border:1px solid rgba(207,214,255,.25);
      background:rgba(0,0,0,.25);
      color:var(--text);
    }

    svg#canvas{
  flex: 1;          /* NUEVO */
  min-height: 0;    /* NUEVO (importantísimo en flex) */
  width:100vw;
  height:auto;      /* NUEVO */
  display:block;
}


    svg#canvas.space-pan,
    svg#canvas.space-pan .node,
    svg#canvas.space-pan .edge{
      cursor:grab !important;
    }
    svg#canvas.panning,
    svg#canvas.panning .node,
    svg#canvas.panning .edge{
      cursor:grabbing !important;
    }

    .zoom-dock{
      position:fixed;
      left:14px;
      bottom:14px;
      z-index:15;
      display:flex;
      flex-direction:row;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      background:rgba(17,24,49,.9);
      border:1px solid rgba(122,162,255,.35);
      border-radius:14px;
      box-shadow:var(--shadow);
      backdrop-filter:blur(10px);
    }
    .zoom-dock button{
      width:34px;
      height:34px;
      padding:0;
      border-radius:10px;
      font-size:16px;
      line-height:1;
    }
    .zoom-slider-wrap{
      width:128px;
      height:34px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    #zoomSlider{
      width:128px;
      transform:none;
      accent-color:var(--accent);
      cursor:pointer;
    }
    #zoomValue{
      min-width:42px;
      text-align:center;
      font-size:11px;
      color:var(--muted);
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    .minimap{
      position:fixed;
      right:14px;
      bottom:14px;
      width:230px;
      height:168px;
      z-index:14;
      padding:8px;
      background:rgba(17,24,49,.9);
      border:1px solid rgba(122,162,255,.35);
      border-radius:14px;
      box-shadow:var(--shadow);
      backdrop-filter:blur(10px);
      transition:.16s ease width, .16s ease height, .16s ease padding;
    }
    .minimap-head{
      height:20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:6px;
      color:var(--muted);
      font-size:11px;
    }
    .minimap-head button{
      width:24px;
      height:22px;
      padding:0;
      border-radius:8px;
      font-size:12px;
    }
    .minimap-actions{
      display:flex;
      align-items:center;
      gap:6px;
    }
    .minimap.collapsed{
      width:86px;
      height:38px;
      padding:8px 10px;
      cursor:pointer;
    }
    .minimap.collapsed .minimap-head{
      margin-bottom:0;
      height:20px;
    }
    .minimap.collapsed #miniSvg,
    .minimap.collapsed #miniFit{
      display:none;
    }
    .minimap.collapsed #miniToggle{
      width:30px;
    }
    #miniSvg{
      width:100%;
      height:calc(100% - 26px);
      display:block;
      border-radius:10px;
      background:rgba(0,0,0,.22);
      border:1px solid rgba(207,214,255,.14);
      cursor:pointer;
    }
    .mini-edge{
      stroke:rgba(207,214,255,.48);
      stroke-width:2;
      fill:none;
      vector-effect:non-scaling-stroke;
    }
    .mini-edge.identifying{
      stroke-width:4;
      stroke:rgba(122,162,255,.8);
    }
    .mini-node{
      fill:rgba(122,162,255,.25);
      stroke:rgba(232,236,255,.72);
      stroke-width:2;
      vector-effect:non-scaling-stroke;
    }
    .mini-node.rel{
      fill:rgba(87,242,135,.22);
    }
    .mini-node.attr{
      fill:rgba(255,255,255,.18);
    }
    #miniViewport{
      fill:rgba(122,162,255,.16);
      stroke:#7aa2ff;
      stroke-width:3;
      vector-effect:non-scaling-stroke;
      cursor:move;
    }

    :root[data-theme="light"] .topbar,
    :root[data-theme="light"] .zoom-dock,
    :root[data-theme="light"] .minimap,
    :root[data-theme="light"] .float-panel,
    :root[data-theme="light"] .modal,
    :root[data-theme="light"] .toast{
      background:rgba(249,251,255,.9);
      border-color:rgba(47,105,217,.28);
    }
    :root[data-theme="light"] button{
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(232,238,248,.82));
      border-color:rgba(38,54,77,.18);
      color:var(--text);
    }
    :root[data-theme="light"] button:hover{
      border-color:rgba(47,105,217,.5);
    }
    :root[data-theme="light"] button.primary{
      border-color:rgba(47,105,217,.55);
    }
    :root[data-theme="light"] button.active{
      border-color:rgba(47,105,217,.9);
      box-shadow:0 0 0 3px rgba(47,105,217,.14);
    }
    :root[data-theme="light"] .hint,
    :root[data-theme="light"] .rowbox{
      background:rgba(255,255,255,.58);
      border-color:rgba(38,54,77,.16);
    }
    :root[data-theme="light"] .kbd,
    :root[data-theme="light"] select,
    :root[data-theme="light"] input[type="text"],
    :root[data-theme="light"] input[type="number"]{
      background:rgba(255,255,255,.72);
      border-color:rgba(38,54,77,.18);
      color:var(--text);
    }
    :root[data-theme="light"] #miniSvg{
      background:rgba(255,255,255,.5);
      border-color:rgba(38,54,77,.16);
    }
    :root[data-theme="light"] .edge-path{
      stroke:rgba(38,54,77,.72);
    }
    :root[data-theme="light"] .edge-label{
      stroke:rgba(255,255,255,.82);
    }

    .node-shape{
      stroke: var(--stroke);
      stroke-width: 2;
      fill: var(--node-fill);
    }
    .node-shape.derived{ stroke-dasharray: 6 6; }

    .edge-path{
      stroke: rgba(207,214,255,.75);
      stroke-width:2;
      fill:none;
    }
    .edge-path.identifying{ stroke-width:5; }

    .edge-label{
      font-size:12px;
      fill: var(--text);
      paint-order: stroke;
      stroke: rgba(0,0,0,.55);
      stroke-width:4px;
      user-select:none;
    }

    .node-label{
      font-size:14px;
      fill: var(--text);
      user-select:none;
      pointer-events:none;
    }
    .node-sub{
      font-size:12px;
      fill: rgba(232,236,255,.92);
      user-select:none;
      pointer-events:none;
    }

    .selected .node-shape{
      stroke: var(--accent);
      stroke-width: 3;
      filter: drop-shadow(0 0 8px rgba(122,162,255,.25));
    }
    .selected-edge .edge-path{
      stroke: var(--accent);
      stroke-width: 3;
    }
    .selected-edge .edge-path.identifying{
      stroke-width: 5;
    }
.edge-handle{ fill:#93c5fd; stroke:#0b1220; stroke-width:1.2; cursor:ns-resize; opacity:.95; }
.edge.selected-edge .edge-handle{ fill:#60a5fa; }

    .toast{
      position:fixed;
      bottom:74px;
      left:14px;
      padding:10px 12px;
      background:rgba(17,24,49,.9);
      border:1px solid rgba(207,214,255,.22);
      border-radius:14px;
      box-shadow:var(--shadow);
      color:var(--text);
      font-size:13px;
      opacity:0;
      transform:translateY(8px);
      transition:.18s ease;
      z-index:30;
      max-width:min(560px, calc(100vw - 28px));
    }
    .toast.show{opacity:1; transform:translateY(0)}
    input[type="file"]{display:none}

    /* Floating cardinality menu */
    .float-panel{
      position:fixed;
      z-index:25;
      min-width:310px;
      background:rgba(17,24,49,.93);
      border:1px solid rgba(122,162,255,.35);
      border-radius:16px;
      box-shadow:var(--shadow);
      backdrop-filter: blur(10px);
      padding:10px;
      display:none;
    }
    .float-panel.show{display:block}
    .float-row{display:flex; gap:8px; align-items:center; margin:6px 0; flex-wrap:wrap}
    .float-row label{font-size:12px; color:var(--muted)}
    select, input[type="text"]{
      background:rgba(0,0,0,.25);
      border:1px solid rgba(207,214,255,.18);
      color:var(--text);
      padding:8px 10px;
      border-radius:12px;
      outline:none;
      font-size:13px;
    }
    select:focus, input[type="text"]:focus{border-color: rgba(122,162,255,.7)}
    select:disabled, input[type="text"]:disabled{opacity:.55; cursor:not-allowed}
    .tiny{font-size:11px; color:var(--muted)}
    .chk{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text)}
    .chk input{transform: translateY(1px)}

    /* Modal */
    .modalOverlay{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.55);
      display:none;
      z-index:40;
      align-items:center;
      justify-content:center;
      padding:18px;
    }
    .modalOverlay.show{display:flex}
    .modal{
      width:min(820px, 96vw);
      max-height:min(86vh, 860px);
      overflow:auto;
      background:rgba(17,24,49,.96);
      border:1px solid rgba(122,162,255,.35);
      border-radius:18px;
      box-shadow:var(--shadow);
      padding:14px;
    }
    .modal h2{margin:6px 0 10px 0; font-size:18px}
    .modal p{margin:0 0 10px 0; color:var(--muted); font-size:13px}
    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0 8px;
    }
    td, th{font-size:13px}
    th{
      text-align:left;
      color:var(--muted);
      font-weight:600;
      font-size:12px;
      padding:0 6px;
    }
    .rowbox{
      background:rgba(0,0,0,.22);
      border:1px solid rgba(207,214,255,.14);
      border-radius:14px;
      padding:10px;
    }
    .pill{
      font-size:11px;
      padding:3px 8px;
      border-radius:999px;
      border:1px solid rgba(207,214,255,.18);
      color:var(--muted);
      background:rgba(255,255,255,.03);
    }
    input[type="color"]{
  width:44px;
  height:34px;
  padding:0;
  border-radius:10px;
  border:1px solid rgba(207,214,255,.18);
  background:rgba(0,0,0,.25);
  cursor:pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 6px; }
input[type="color"]::-webkit-color-swatch { border:0; border-radius:8px; }

  

    /* ===============================
       Menú móvil (no toca desktop)
       - En móvil: oculto por defecto, botón claro para abrir/cerrar
       - Al elegir una opción: se vuelve a ocultar
       =============================== */
    #btnMobileMenu.menu-toggle{display:none}

    /* En desktop, "contents" mantiene EXACTAMENTE el layout original */
    #menuContent{display:contents;}

    @media (max-width: 820px){
      .topbar{
        flex-direction:column;
        align-items:stretch;
      }
      #btnMobileMenu.menu-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:100%;
        padding:10px 12px;
        font-size:14px;
        border-color: rgba(122,162,255,.65);
      }
      #menuContent{
        display:none;
        width:100%;
        flex-direction:column;
        gap:10px;
      }
      .topbar.m-open #menuContent{display:flex;}
      #menuContent .spacer{display:none;}

      /* Si el menú se vuelve muy alto, que scrollee sin tapar todo */
      .topbar.m-open{
        max-height:60vh;
        overflow:auto;
      }
      .zoom-slider-wrap{
        width:84px;
        height:34px;
      }
      #zoomSlider{
        width:84px;
        transform:none;
      }
      .minimap{
        width:150px;
        height:114px;
      }
    }

    @media (min-width: 821px){
      #btnMobileMenu.menu-toggle{display:none !important;}
      #menuContent{display:contents;}
    }
