/* panel-common.css — shared "support-first" layer for every tab of the mstar-health panel.
   The panel's primary audience is the SUPPORT team (non-developers). Technical details
   (endpoints, raw JSON, code links, ids) stay in the DOM but hidden behind «modo técnico»,
   so an agent can flip it on to paste exact endpoint info to Backend. */
.tech-only{ display:none !important; }
/* Reveal per element type — `display:revert` would discard AUTHOR values (e.g. .card .ep{display:block})
   and collapse them to the UA default, breaking layout on the tabs that style .ep as a block. */
body.tech .tech-only{ display:initial !important; }
body.tech span.tech-only, body.tech a.tech-only, body.tech code.tech-only{ display:inline !important; }
body.tech div.tech-only, body.tech p.tech-only, body.tech pre.tech-only,
body.tech h2.tech-only, body.tech section.tech-only, body.tech ul.tech-only{ display:block !important; }
body.tech table.tech-only{ display:table !important; }
body.tech td.tech-only, body.tech th.tech-only{ display:table-cell !important; }
body.tech tr.tech-only{ display:table-row !important; }
body.tech .card .ep.tech-only{ display:block !important; }   /* diagnostics styles .ep as a block */
/* the toggle itself, injected into .dnav by panel-common.js */
.dnav .techwrap{ margin-left:auto; display:inline-flex; align-items:center; gap:.35rem;
  color:#6b7280; font-size:.85rem; cursor:pointer; user-select:none; padding:.35rem .6rem;
  border:1px dashed #d1d5db; border-radius:7px; background:#fff; }
.dnav .techwrap:hover{ border-color:#9ca3af; }
.dnav .techwrap input{ margin:0; }
/* impact language (health tab + anywhere that explains client effect) */
.impact{ color:#8a2b0f; font-weight:700; }
.ok-note{ color:#6b7280; }
a.contact-chip{ display:inline-block; padding:.12rem .5rem; border:1px solid #eab; border-radius:999px;
  background:#fff7f4; color:#8a2b0f; text-decoration:none; font-size:.82em; white-space:nowrap; }
a.contact-chip:hover{ background:#fdeee7; }
/* a plain-language banner each tab can use to say what it is FOR */
.purpose{ margin:.1rem 0 .7rem; padding:.55rem .75rem; border-radius:8px; background:#eef4fb;
  border:1px solid #cfe0f3; color:#1f2328; font-size:.92rem; }
.purpose b{ color:#0b4a6e; }

/* impact block (health tab) */
td.meaning .silent{ margin-top:.2rem; color:#8a5a0f; font-size:.9em; }
td.meaning .stillworks{ margin-top:.15rem; color:#0b5e46; font-size:.9em; }
td.meaning{ max-width:38rem; white-space:normal; }
td.contact-cell{ white-space:nowrap; }
td.links .tdetail{ white-space:normal; color:#6b7280; }
.name .code{ color:#6b7280; font-weight:400; }

/* IDs a la mano — click-to-copy chips shown above any result */
.idchips{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; margin:.4rem 0 .5rem; }
.idchips-t{ color:#6b7280; font-size:.8rem; margin-right:.15rem; }
button.idchip{ display:inline-flex; align-items:baseline; gap:.35rem; padding:.2rem .6rem; cursor:pointer;
  border:1px solid #cfe0f3; border-radius:999px; background:#eef4fb; color:#0b4a6e;
  font:inherit; font-size:.85rem; line-height:1.4; }
button.idchip:hover{ background:#dbe9f8; }
button.idchip .k{ color:#6b7280; font-size:.78em; }
button.idchip b{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
button.idchip.copied{ background:#e7f5f0; border-color:#9ad9c2; color:#0b5e46; }
button.idchip.copied::after{ content:" ✔ copiado"; font-size:.78em; color:#0b5e46; }

/* «ocultar ayuda»: collapse the explanatory copy once the team knows the tool. Controls, tables,
   results and warnings are NEVER hidden — only the teaching text. Red/production warnings
   (.banner) stay visible on purpose: they are a safety control, not a tutorial. */
body.nohelp .purpose,
body.nohelp p.sub,
body.nohelp p.note,
body.nohelp p.hint,
body.nohelp .hint.tutorial,
body.nohelp .step p.hint,
body.nohelp .card p.hint{ display:none !important; }
.dnav .helpwrap{ margin-left:.35rem; }

/* ── destructive tabs ──────────────────────────────────────────────────────────────────────────
   «Reasignar tags» and «Facturas PROD» act on REAL production data: the first moves customer
   hardware between organizations, the second stamps CFDI against the live SAT service. Both used to
   carry a 🔴 in the label; the emoji is gone, so the warning has to live here instead.

   Deliberately not colour alone — colour is invisible to some readers and disappears in a
   screenshot pasted into a chat. The 4px left rule carries the signal on its own, and the darker
   red text keeps the label readable rather than merely tinted (#a32b1c on #f3f4f6 clears WCAG AA).

   Loaded after each tab's inline <style>, and the attribute selector outranks `.dnav a`, so this
   wins without !important. */
.dnav a[href="reassign.html"],
.dnav a[href="facturas-prod.html"] {
  border-color: #c0392b;
  border-left: 4px solid #c0392b;
  color: #a32b1c;
}
/* The active tab inverts to a solid fill, so the border alone would vanish against it. */
.dnav a[href="reassign.html"].active,
.dnav a[href="facturas-prod.html"].active {
  background: #a32b1c;
  border-color: #a32b1c;
  color: #fff;
}