/* css/modulo_servicos_agenda.css */

:root{
  --bb-navy:#13347B;
  --bb-blue:#2685BE;
  --bb-sky:#BFE8FF;
  --bb-ink:#1A237E;
  --bb-card:#ffffff;
  --bb-section:#e3f2fd;
  --bb-border:#cfe3ff;
  --bb-muted:#334d78;
  --bb-code-bg:#0F172A;
  --bb-code-bd:#1E293B;
  --bb-code-fg:#E2E8F0;
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; width:100%; overflow-x:hidden; }

body{
  font-family:'Segoe UI', Arial, sans-serif;
  background:#f9fbff;
  color:var(--bb-ink);
  padding:0 0 72px 0;
}

/* header */
.bb-header{
  background:linear-gradient(90deg, var(--bb-navy) 80%, var(--bb-blue) 100%);
  color:#fff;
  text-align:center;
  padding:28px 18px 18px 18px;
  border-radius:0 0 18px 18px;
  margin-bottom:16px;
  box-shadow:0 1px 10px #0002;
}

.bb-header-top{
  display:inline-flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.bb-header-icon{
  font-size:2.1rem;
  line-height:1;
  display:inline-block;
  transform:translateY(-1px);
}

.bb-header h1{
  margin:0;
  font-size:2.05rem;
  font-weight:800;
  line-height:1.15;
  word-break:break-word;
}

.bb-header-sub{
  color:var(--bb-sky);
  margin:9px auto 0 auto;
  max-width:980px;
  font-size:1.06rem;
  line-height:1.35;
  padding:0 10px;
}

.bb-header-sub code{
  background:#ffffff22;
  border:1px solid #ffffff33;
  color:#fff;
}

/* layout */
.bb-main{
  max-width:980px;
  margin:0 auto;
  background:var(--bb-card);
  border-radius:12px;
  padding:22px 22px 24px 22px;
  box-shadow:0 1px 12px #0001;
  width:min(980px, 96vw);
}

.bb-lead{
  margin:10px 0;
  color:var(--bb-muted);
  line-height:1.6;
}

/* toc */
.bb-toc{
  background:#F3F9FE;
  border:1px solid #e1e8f4;
  border-radius:12px;
  padding:14px 14px 12px 14px;
  margin:10px 0 18px 0;
}

.bb-toc h2{
  margin:0 0 8px 0;
  font-size:1.05rem;
  color:#0D47A1;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.bb-toc ul{
  margin:10px 0 0 0;
  padding-left:18px;
  columns:2;
  column-gap:22px;
}

.bb-toc li{ margin:6px 0; break-inside:avoid; }

.bb-toc a{
  color:#0D47A1;
  text-decoration:none;
  font-weight:600;
}

.bb-toc a:hover{ text-decoration:underline; }

/* section */
.bb-section{
  background:var(--bb-section);
  padding:18px 18px 14px 18px;
  border-radius:10px;
  margin:0 0 18px 0;
  box-shadow:0 1px 3px #0001;
  overflow-x:auto;
  border:1px solid #d8ecff;
}

.bb-section h2{
  margin:0 0 10px 0;
  color:#0D47A1;
  font-size:1.18rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.bb-ico{
  width:20px;
  height:20px;
  color:#0D47A1;
}

.bb-section p{
  margin:10px 0;
  color:var(--bb-muted);
  line-height:1.6;
}

.bb-section ul,
.bb-section ol{
  margin:10px 0 12px 0;
  padding-left:20px;
}

.bb-section li{
  margin:6px 0;
  line-height:1.55;
  color:#233a63;
}

.bb-section b{ color:#17326c; }

code{
  background:#e2e7ed;
  color:#0D47A1;
  padding:2px 6px;
  border-radius:6px;
  font-size:.98em;
}

pre{
  background:var(--bb-code-bg);
  color:var(--bb-code-fg);
  border:1px solid var(--bb-code-bd);
  padding:12px 14px;
  border-radius:12px;
  overflow-x:auto;
  font-size:.96em;
  line-height:1.5;
  margin:10px 0 12px 0;
}

pre code{
  background:transparent;
  color:inherit;
  padding:0;
}

/* grid/cards */
.bb-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 14px;
  margin-top:10px;
}

.bb-card{
  background:#fff;
  border:1px solid var(--bb-border);
  border-radius:12px;
  padding:12px 12px 10px 12px;
  box-shadow:0 1px 8px #00000008;
}

.bb-card h3{
  margin:0 0 6px 0;
  color:#0D47A1;
  font-size:1.03rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.bb-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  color:#0D47A1;
  background:#eaf4ff;
  border:1px solid #cfe3ff;
  border-radius:999px;
  padding:4px 10px;
  font-size:.9rem;
}

/* responsivo */
@media (max-width:860px){
  .bb-toc ul{ columns:1; }
  .bb-grid{ grid-template-columns:1fr; }
  .bb-main{ padding:16px 14px 18px 14px; }
  .bb-header{ padding:18px 12px 14px 12px; }
  .bb-header h1{ font-size:1.35rem; }
  .bb-header-sub{ font-size:1rem; }
}