:root{--bg:#0b0f17;--card:#0f1624;--line:rgba(255,255,255,.08);--txt:#e9eefc;--mut:#9fb0d0;--acc:#6aa6ff}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--txt)}
a{color:inherit;text-decoration:none}
.wrap{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.side{border-right:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.brand{font-weight:800;letter-spacing:.3px;margin:0 0 12px}
.nav a{display:flex;gap:10px;padding:10px 10px;border-radius:10px;color:var(--mut)}
.nav a.active{background:rgba(106,166,255,.14);color:var(--txt);border:1px solid rgba(106,166,255,.25)}
.main{padding:18px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.h1{font-size:18px;margin:0 0 10px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.input,select,button{background:#0c1320;color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none}
button{cursor:pointer}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}
.small{font-size:12px;color:var(--mut)}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--mut);font-size:12px}
.sep{height:10px}
.err{color:#ffb4b4}
.ok{color:#b7ffcd}

/* ===== Mobile drawer ===== */
.overlay{display:none}
.menuBtn{
  display:none;
  align-items:center;justify-content:center;
  width:42px;height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0c1320;
  color:var(--txt);
  font-size:18px;
  line-height:1;
}

@media (max-width: 920px){
  .wrap{grid-template-columns:1fr}
  .main{padding:14px}
  .side{
    position:fixed;
    top:0;left:-290px;
    width:260px;height:100vh;
    z-index:1002;
    border-right:1px solid var(--line);
    background:#0b0f17;
    transition:left .18s ease;
    overflow:auto;
  }
  .overlay{
    display:none;
    position:fixed;inset:0;
    background:rgba(0,0,0,.55);
    z-index:1001;
  }
  .wrap.menu-open .side{left:0}
  .wrap.menu-open .overlay{display:block}
  .menuBtn{display:inline-flex}
  .top{gap:10px}
}

/* ===============================
   MOBILE TABLES -> CARDS (global panel) — 2026-03
   No rompe desktop. En móvil: tarjetas con labels.
   =============================== */
@media (max-width: 920px){
  .top{flex-direction:column;align-items:stretch}
  .top .row{width:100%}
}

@media (max-width: 760px){
  table.qv-mobile-table{display:block;width:100%}
  table.qv-mobile-table thead{display:none}
  table.qv-mobile-table tbody,
  table.qv-mobile-table tr,
  table.qv-mobile-table td{display:block;width:100%}
  table.qv-mobile-table tr{
    border:1px solid var(--line);
    border-radius:14px;
    margin:10px 0;
    padding:10px;
    background:rgba(255,255,255,.02);
  }
  table.qv-mobile-table td{
    border:0 !important;
    padding:6px 0;
    display:flex;
    justify-content:space-between;
    gap:12px;
  }
  table.qv-mobile-table td::before{
    content:attr(data-label);
    font-weight:800;
    color:var(--mut);
    padding-right:10px;
    max-width:48%;
  }
  table.qv-mobile-table td{word-break:break-word}
}

/* ===============================
   MOBILE FIX (tables) — 2026-03
   Quita "modo PC" en Segments/Flows (min-width inline) y convierte tablas a tarjetas en móvil
   =============================== */
@media (max-width: 760px){
  .main{min-width:0;overflow-x:hidden}

  /* mata min-width inline que rompe móvil */
  .main table{min-width:0 !important; width:100% !important; max-width:100% !important}
  .main table[style*="min-width"]{min-width:0 !important}

  /* modo tarjetas para tablas marcadas por JS */
  table.qv-mobile-table{display:block !important; width:100% !important}
  table.qv-mobile-table thead{display:none !important}
  table.qv-mobile-table tbody,
  table.qv-mobile-table tr,
  table.qv-mobile-table td{display:block !important; width:100% !important}

  table.qv-mobile-table tr{
    border:1px solid var(--line);
    border-radius:14px;
    margin:10px 0;
    padding:10px;
    background:rgba(255,255,255,.02);
  }
  table.qv-mobile-table td{
    border:0 !important;
    padding:7px 0 !important;
    display:flex !important;
    justify-content:space-between !important;
    gap:12px !important;
    white-space:normal !important;
    word-break:break-word !important;
  }
  table.qv-mobile-table td::before{
    content:attr(data-label);
    font-weight:800;
    color:var(--mut);
    max-width:48%;
    padding-right:10px;
  }
}

/* ===============================
   FLOWS MOBILE WRAP FIX — 2026-03
   Solo afecta la pantalla ?p=flows
   =============================== */
@media (max-width: 760px){
  body.p-flows .main table{min-width:0 !important; width:100% !important; max-width:100% !important}
  body.p-flows table.qv-mobile-table td{
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
  }
  body.p-flows table.qv-mobile-table td::before{
    flex:0 0 100% !important;
    max-width:100% !important;
    margin:0 0 4px !important;
  }
  body.p-flows table.qv-mobile-table td,
  body.p-flows table.qv-mobile-table td *{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    max-width:100% !important;
  }
  body.p-flows table.qv-mobile-table pre,
  body.p-flows table.qv-mobile-table code{
    white-space:pre-wrap !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }
}