/* ============================================================
   APP — RECURSOS HARM
============================================================ */
#recursos-harm {
  --brand:#12B3B6;
  --brand-2:#F5C84C;
  --bg:#f7f8fa;
  --panel:#ffffff;
  --ink:#0e1720;
  --muted:#5b6570;
  --line:#e6ebf0;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:16px;

  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size:24px;
  padding:0 0 40px 0;
  max-width:1300px;
  margin:0 auto;
}

#recursos-harm,
#recursos-harm * {
  box-sizing:border-box;
}

/* ============================================================
   CABEÇALHO
============================================================ */
#recursos-harm .rh-head {
  padding:32px 20px 20px;
  text-align:center;
}

#recursos-harm .rh-head h1 {
  font-size:2.2rem;
  font-weight:600;
  color:var(--ink);
}

/* ============================================================
   SECÇÕES
============================================================ */
#recursos-harm .rh-main {
  padding:0 20px;
  max-width:1250px;
  margin:0 auto;
}

#recursos-harm .rh-sec {
  background:var(--panel);
  padding:28px;
  margin:0 0 36px 0;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}

#recursos-harm .rh-sec h2 {
  font-size:1.65rem;
  font-weight:600;
  margin:0 0 18px;
  color:var(--brand);
}

#recursos-harm p {
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 14px;

  /* JUSTIFY + HIFENIZAÇÃO PT */
  text-align: justify;
  text-justify: inter-word;

  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}


/* ============================================================
   ABCJS EXAMPLE BLOCK
============================================================ */
#recursos-harm .abc-example {
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  margin:20px 0;
  background:#fafbfc;
}

#recursos-harm .abc-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:12px;
}

#recursos-harm .abc-label {
  font-size:0.95rem;
  font-weight:600;
  background:var(--brand);
  color:white;
  padding:4px 10px;
  border-radius:8px;
  white-space:nowrap;
}

/* ============================================================
   TOC — BOTÃO
============================================================ */
#recursos-harm #rh-toc-toggle {
  position:fixed;
  top:24px;
  left:24px;
  z-index:99998;

  width:40px;
  height:40px;

  background:var(--panel);
  color:var(--ink);
  font-size:24px;
  border:2px solid var(--brand);
  border-radius:12px;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:all .25s ease;
}

#recursos-harm #rh-toc-toggle:hover {
  background:var(--brand);
  color:white;
}

/* ============================================================
   TOC — PAINEL
============================================================ */
#recursos-harm #rh-toc-panel {
  position:fixed;
  top:50px;
  left:70px;
  width:300px;
  height:90vh;
	border-radius:12px;

  background:var(--panel);
  border-right:3px solid var(--brand);
  box-shadow:0 0 40px rgba(0,0,0,.08);

  padding:28px 22px;
  overflow-y:auto;
  z-index:99997;

  transform:translateX(-100%);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}

#recursos-harm #rh-toc-panel.open {
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}

#recursos-harm #rh-toc-panel ul {
  margin:0;
  padding:0;
  list-style:none;
}

#recursos-harm #rh-toc-panel li {
  margin-bottom:6px;
}

#recursos-harm #rh-toc-panel a {
  text-decoration:none;
  font-size:1rem;
  color:var(--ink);
  padding:4px 0;
  display:block;
  border-left:3px solid transparent;
  transition:all .2s ease;
}

#recursos-harm #rh-toc-panel a:hover {
  color:var(--brand);
  border-left-color:var(--brand);
}

#recursos-harm #rh-toc-panel a.active {
  color:var(--brand);
  font-weight:600;
  border-left-color:var(--brand);
}

/* ============================================================
   BOTÃO PLAY/STOP
============================================================ */
#recursos-harm .abc-play-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--brand);
  color:#fff;
  font-size:0.95rem;
  font-weight:600;
  font-family:inherit;
  padding:6px 14px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}

#recursos-harm .abc-play-btn:hover {
  background:var(--brand-2);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
}

#recursos-harm .abc-play-btn.playing {
  background:var(--brand-2);
}

/* ============================================================
   BLOCKQUOTE
============================================================ */
#recursos-harm blockquote {
  margin:22px 0;
  padding:16px 22px;
  background:#fafbfc;
  border-left:4px solid var(--brand);
  border-radius:10px;
  font-style:italic;
  line-height:1.6;
  color:var(--muted);
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

#recursos-harm blockquote strong,
#recursos-harm blockquote em {
  color:var(--ink);
}

#recursos-harm blockquote a {
  color:var(--brand);
  text-decoration:none;
  font-weight:500;
}

#recursos-harm blockquote a:hover {
  text-decoration:underline;
}

/* ============================================================
   LINKS EXTERNOS — COERÊNCIA COM A APP
============================================================ */
#recursos-harm a[href^="http"]{
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 500;
  transition: color .2s ease, text-decoration-color .2s ease;
}

#recursos-harm a[href^="http"]:hover{
  color: color-mix(in srgb, var(--brand) 80%, black);
  text-decoration-color: color-mix(in srgb, var(--brand) 60%, black);
}


/* =========================================================
   TOC — MOBILE 
========================================================= */
@media (max-width: 900px){

  /* BOTÃO TOC */
  #recursos-harm #rh-toc-toggle{
    left: 12px;
  }
	
  /* PAINEL TOC */
  #recursos-harm #rh-toc-panel{
    position: fixed;
    top: 0;
    left: 55px;

    width: calc(100% - 55px);
    height: 100vh;

    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    background: var(--panel);
    border-right: 3px solid var(--brand);
    box-shadow: 0 0 40px rgba(0,0,0,.18);

    z-index: 99999;

    /* mantém a lógica open/close */
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
  }

  #recursos-harm #rh-toc-panel.open{
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
	
	  #recursos-harm{
    font-size:16px; 
  }
}