/* ============================================================================
   Laudo Genético Integrado — Design System (app.css)
   Reestiliza as classes existentes (não renomear: o JS depende delas).
   Paleta: navy #1F3864 · teal #2E8B7A. Light, limpo, responsivo (mobile-first).
   ============================================================================ */
:root{
  --navy:#1F3864; --navy-700:#284a86; --navy-900:#132444;
  --teal:#2E8B7A; --teal-600:#25786a; --teal-700:#1c6155;
  --brand:linear-gradient(135deg,#22406f 0%,#2E8B7A 100%);
  --brand-soft:linear-gradient(135deg,#eaf1fb 0%,#e6f4ef 100%);
  --ink:#1b2735; --ink-soft:#3a4b5c; --muted:#61728a; --grey:#61728a;
  --line:#e6ecf4; --line-2:#eff3f9;
  --card:#ffffff;
  --fav:#e4f1ec; --fav-bd:#bfe3d6; --fav-ink:#1c7a4d;
  --att:#fdeccb; --att-bd:#f0d59a; --att-ink:#95610a;
  --act:#dce6f1; --act-bd:#b9cfe6; --act-ink:#1f3864;
  --danger:#c33a2c; --danger-bg:#fdeeec; --danger-bd:#f2c4bd;
  --shadow-xs:0 1px 2px rgba(19,36,68,.06);
  --shadow-sm:0 2px 6px rgba(19,36,68,.06),0 1px 2px rgba(19,36,68,.05);
  --shadow:0 10px 30px -12px rgba(19,36,68,.22),0 3px 8px rgba(19,36,68,.06);
  --shadow-lg:0 30px 60px -22px rgba(19,36,68,.34);
  --r:16px; --r-lg:20px; --r-sm:11px; --r-xs:8px; --pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); line-height:1.55; margin:0; min-height:100vh;
  background:
    radial-gradient(1100px 520px at 85% -8%, #e5f4ef 0%, rgba(229,244,239,0) 60%),
    radial-gradient(900px 500px at -5% 0%, #e9f0fb 0%, rgba(233,240,251,0) 55%),
    linear-gradient(#f5f8fc,#eef3f9);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap,.container{max-width:1000px;margin:0 auto;padding:0 1.1rem 3rem;}
a{color:var(--teal-700);}

/* ---------- Topbar / brand ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.6rem clamp(1.1rem,4vw,1.6rem);
  background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow-xs);
}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none;}
.brand-mark{width:38px;height:38px;border-radius:11px;display:block;box-shadow:var(--shadow-sm);}
.brand-text{display:flex;flex-direction:column;line-height:1.05;}
.brand-text strong{color:var(--navy);font-size:1.06rem;font-weight:800;letter-spacing:-.01em;}
.brand-text small{color:var(--teal-600);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.topnav{display:flex;align-items:center;gap:.45rem;}

/* ---------- Headings ---------- */
h1{color:var(--navy);font-size:clamp(1.35rem,4.5vw,1.9rem);font-weight:800;letter-spacing:-.02em;margin:.2rem 0;}
h1 small{color:var(--teal);font-weight:700;font-size:.5em;}
h2{color:var(--teal-700);font-size:1.12rem;font-weight:700;margin:1.5rem 0 .5rem;letter-spacing:-.01em;}
h3{color:var(--navy);}
.section-title{display:flex;align-items:center;gap:.55rem;color:var(--navy);font-weight:800;font-size:1.15rem;margin:.1rem 0 .2rem;letter-spacing:-.01em;}
.eyebrow{color:var(--teal-600);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;}

/* ---------- Aviso (LGPD) ---------- */
.aviso{
  background:linear-gradient(135deg,#fff8ec,#fef3e0); border:1px solid #f2d9a8;
  color:#6b4e18; padding:.8rem 1rem .8rem 2.4rem; border-radius:var(--r-sm);
  font-size:.9rem; position:relative; box-shadow:var(--shadow-xs); margin:1rem 0;
}
.aviso::before{content:"⚠️";position:absolute;left:.85rem;top:.75rem;font-size:1rem;}

/* ---------- Tabs ---------- */
.tabs{display:inline-flex;gap:.25rem;margin:1.3rem 0 .3rem;padding:.28rem;
  background:#eaeff7;border-radius:var(--pill);border:1px solid var(--line);}
.tab{padding:.5rem 1.15rem;cursor:pointer;border:0;background:none;font:inherit;font-size:.95rem;
  font-weight:700;color:var(--muted);border-radius:var(--pill);transition:.18s var(--ease);}
.tab:hover{color:var(--navy);}
.tab.ativa{color:#fff;background:var(--navy);box-shadow:var(--shadow-sm);}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.25rem 1.3rem;margin:1rem 0;box-shadow:var(--shadow);}
.card:has(#redePng){box-shadow:none;}
.item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1rem 1.1rem;margin:.7rem 0;box-shadow:var(--shadow-sm);transition:.2s var(--ease);}
.item:hover{box-shadow:var(--shadow);transform:translateY(-1px);border-color:#d9e2ef;}
.item h3{margin:0 0 .25rem;font-size:1.05rem;color:var(--navy);font-weight:800;}

/* ---------- Forms ---------- */
label{display:block;margin:.6rem 0;font-size:.95rem;color:var(--ink-soft);font-weight:500;}
input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-xs);padding:.6rem .7rem;transition:.15s var(--ease);}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,textarea:focus,select:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(46,139,122,.16);}
textarea{min-height:130px;font-family:ui-monospace,"SF Mono",monospace;font-size:.85rem;}
input[type=file]{padding:.5rem;background:#fbfcfe;cursor:pointer;}
input[type=checkbox]{width:1.05rem;height:1.05rem;accent-color:var(--teal);vertical-align:-2px;}

/* ---------- Buttons ---------- */
.row{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;}
button.acao,.btn{padding:.72rem 1.35rem;font:inherit;font-size:.98rem;font-weight:700;cursor:pointer;
  border:0;border-radius:var(--r-sm);color:#fff;background:var(--brand);
  box-shadow:0 8px 20px -8px rgba(46,139,122,.5);transition:.2s var(--ease);letter-spacing:.01em;}
button.acao:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(46,139,122,.55);filter:saturate(1.05);}
button.acao:active,.btn:active{transform:translateY(0);}
button.acao:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.3);}
.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line);box-shadow:var(--shadow-xs);}
.btn.ghost:hover{border-color:var(--navy);background:#fbfcfe;}

/* download chips (Ver na tela / rede / PDF / Word) */
.dl{display:inline-flex;align-items:center;gap:.35rem;margin:.15rem .3rem .15rem 0;padding:.44rem .8rem;
  border-radius:var(--r-xs);background:var(--teal);color:#fff;text-decoration:none;font-size:.85rem;
  font-weight:700;border:0;cursor:pointer;font-family:inherit;box-shadow:var(--shadow-xs);transition:.16s var(--ease);}
.dl:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);filter:brightness(1.06);}
.dl-rede{background:var(--navy);}
.dl-rede svg{vertical-align:-2px;}

/* botões-fantasma / perigo */
.del{background:#fff;color:var(--danger);border:1.5px solid var(--danger-bd);cursor:pointer;
  padding:.44rem .8rem;border-radius:var(--r-xs);font:inherit;font-size:.84rem;font-weight:700;
  box-shadow:var(--shadow-xs);transition:.16s var(--ease);}
.del:hover{background:var(--danger-bg);transform:translateY(-1px);}

/* ---------- Chips / badges / pills ---------- */
.badge{display:inline-flex;align-items:center;padding:.12rem .55rem;border-radius:var(--pill);
  font-size:.68rem;font-weight:800;letter-spacing:.03em;background:var(--act);color:var(--act-ink);margin-left:.4rem;}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:#eef3fa;border:1px solid var(--line);
  border-radius:var(--pill);padding:.32rem .8rem;margin:.2rem .35rem .2rem 0;font-size:.83rem;max-width:100%;}
.chip button{border:0;background:none;cursor:pointer;color:var(--danger);font-weight:800;font-size:1rem;padding:0;line-height:1;}
.muted{color:var(--muted);font-size:.85rem;}
code{background:#eef2f8;border:1px solid var(--line);border-radius:5px;padding:.05rem .35rem;font-size:.86em;color:var(--navy-700);}
.pill{display:inline-flex;align-items:center;padding:.16rem .6rem;border-radius:var(--pill);font-size:.76rem;font-weight:800;border:1px solid transparent;}
.pill.s-favoravel{background:var(--fav);color:var(--fav-ink);border-color:var(--fav-bd);}
.pill.s-atencao{background:var(--att);color:var(--att-ink);border-color:var(--att-bd);}
.pill.s-acionavel{background:var(--act);color:var(--act-ink);border-color:var(--act-bd);}
.pill.s-neutro,.pill.s-a-confirmar{background:#eef2f7;color:var(--muted);border-color:var(--line);}

details>summary{cursor:pointer;color:var(--navy);font-weight:700;margin:.5rem 0;}
pre{background:#0f1b2d;color:#dbe6f4;padding:1rem;border-radius:var(--r-sm);overflow:auto;font-size:.8rem;max-height:400px;box-shadow:var(--shadow);}
.prosa{white-space:pre-wrap;}

/* ---------- Modais (rede / anamnese) ---------- */
.modal{position:fixed;inset:0;background:rgba(19,36,68,.5);backdrop-filter:blur(3px);display:none;z-index:60;padding:1rem;overflow:auto;}
.modal.aberto{display:block;animation:fade .2s var(--ease);}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card,.anam-modal{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);}
.modal-card{max-width:1060px;margin:1.2rem auto;padding:1.15rem 1.25rem;}
.anam-modal{max-width:1000px;height:92vh;margin:2vh auto;display:flex;flex-direction:column;overflow:hidden;}
.anam-top{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1.1rem;border-bottom:1px solid var(--line);}
.anam-top strong{color:var(--navy);font-size:1.05rem;font-weight:800;}
#anamFrame{flex:1;width:100%;border:0;}
.modal-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;}
.modal-top h2{margin:0;color:var(--navy);font-size:1.2rem;}
.fechar{background:#f1f4f9;border:0;width:2rem;height:2rem;border-radius:var(--pill);font-size:1.3rem;cursor:pointer;color:var(--muted);line-height:1;transition:.15s var(--ease);}
.fechar:hover{background:#e6ebf3;color:var(--navy);}
.rede-wrap{display:grid;grid-template-columns:1.7fr 1fr;gap:1rem;align-items:start;margin-top:.6rem;}
.rede-svg{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);background:#fbfdff;touch-action:none;}
.rede-svg .no:hover circle,.rede-svg .no:hover rect{stroke:#0f172a;stroke-width:3;}
.rede-svg .sel circle,.rede-svg .sel rect{stroke:#0f172a;stroke-width:3.5;}
.detalhe{border:1px solid var(--line);border-radius:var(--r-sm);padding:.9rem;min-height:230px;font-size:.9rem;background:#fff;}
.detalhe h3{margin:.1rem 0 .35rem;color:var(--navy);font-size:1.05rem;}
.legenda{font-size:.78rem;color:var(--muted);margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.4rem 1rem;}

/* ---------- Responsivo ---------- */
@media (max-width:760px){ .rede-wrap{grid-template-columns:1fr;} }
@media (max-width:640px){
  .wrap,.container{padding:0 .85rem 2.5rem;}
  button.acao,.btn{width:100%;}
  .brand-text small{display:none;}
  .anam-modal{height:96vh;margin:2vh .3rem;}
  .modal-card{margin:.6rem auto;padding:1rem;}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}