/* ============================================================
   Central de Ajuda — Home Office · Callink
   Folha de estilos compartilhada por todas as páginas do site
   ============================================================ */

:root{
  --navy:#06203D;
  --navy-soft:#0E3A63;
  --ice:#CADCFC;
  --lime:#C3FF5C;
  --green:#1E7A46;
  --orange:#B23A2E;
  --white:#FFFFFF;

  --page-bg:#E7EBF3;
  --panel-bg:#FFFFFF;
  --surface:#F4F7FD;
  --text:#06203D;
  --text-muted:#5B6472;
  --shadow-sm:0 6px 16px rgba(6,32,61,0.06);
  --shadow-hover:0 10px 22px rgba(6,32,61,0.10);
  --shadow-card:0 30px 60px rgba(6,32,61,0.18), 0 2px 8px rgba(6,32,61,0.08);
  --switch-bg:#FFFFFF;
  --track-bg:#D7DEEA;
}
:root[data-theme="dark"]{
  --page-bg:#000000;
  --panel-bg:#0B0E13;
  --surface:#161B22;
  --text:#F4F7FD;
  --text-muted:#9AA7BD;
  --shadow-sm:0 6px 16px rgba(0,0,0,0.5);
  --shadow-hover:0 10px 24px rgba(0,0,0,0.6);
  --shadow-card:0 30px 70px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.5);
  --switch-bg:#12161D;
  --track-bg:#2A313D;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: Calibri, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:var(--page-bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:28px 12px;
  transition:background .3s ease, color .3s ease;
}

.wrap{
  width:100%;
  max-width:460px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.sheet{
  width:100%;
  background:var(--panel-bg);
  border-radius:28px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
  position:relative;
  padding:18px 18px 90px 18px;
  transition:background .3s ease;
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* ---- header cards ---- */
.hero{
  background:linear-gradient(160deg, var(--navy), var(--navy-soft));
  border-radius:20px;
  padding:22px 20px 24px 20px;
  color:var(--white);
  position:relative;
  margin-bottom:18px;
}
.pill{
  display:inline-flex;
  align-items:center;
  background:var(--lime);
  color:var(--navy);
  font-weight:700;
  font-size:11px;
  letter-spacing:.06em;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:14px;
}
.hero h1{ font-size:24px; margin:0 0 8px 0; font-weight:700; }
.hero p{ margin:0; font-size:13.5px; color:var(--ice); line-height:1.4; max-width:80%; }
.hero-icon{
  position:absolute; top:20px; right:20px;
  width:44px; height:44px; border-radius:50%;
  background:var(--ice);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
  text-decoration:none;
}

.crumb-header{
  background:linear-gradient(160deg, var(--navy), var(--navy-soft));
  border-radius:20px;
  padding:18px 18px 20px 18px;
  color:var(--white);
  margin-bottom:16px;
}
.crumb-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.back-btn{
  width:36px; height:36px; border-radius:50%;
  background:var(--ice);
  border:none;
  color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  flex-shrink:0;
}
.crumb-text{ font-size:12.5px; color:var(--ice); }
.crumb-header h2{ margin:0; font-size:21px; font-weight:700; }

/* ---- search ---- */
.search{
  display:flex; align-items:center; gap:10px;
  background:var(--surface);
  border-radius:999px;
  padding:12px 16px;
  margin-bottom:20px;
  color:var(--text-muted);
}
.search input{
  border:none; background:transparent; outline:none;
  font-size:13px; color:var(--text); width:100%;
  font-family:inherit;
}
.search input::placeholder{ color:var(--text-muted); }

.section-label{
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
  color:var(--text);
  margin:4px 0 12px 0;
  text-transform:uppercase;
}
.section-label.mt-8{ margin-top:8px; }
.section-label.mt-14{ margin-top:14px; }

/* ---- utilitários usados no lugar de style="" inline (bloqueado pelo CSP do Apache) ---- */
.steps.mt-4{ margin-top:4px; }
.hint-note{
  color:var(--text-muted); font-size:12px;
  margin:-8px 0 14px 0;
}
.hint-note.tight{ margin:-8px 0 10px 0; }
#search-empty{
  display:none; text-align:center;
  color:var(--text-muted); font-size:12px;
  margin:-4px 0 14px 0;
}

/* ---- link / navigation cards ---- */
.card-btn{
  width:100%;
  display:flex; align-items:center; gap:16px;
  background:var(--surface);
  border:none;
  border-radius:18px;
  padding:16px;
  margin-bottom:14px;
  cursor:pointer;
  text-align:left;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .3s ease;
  font-family:inherit;
}
.card-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.card-btn:active{ transform:translateY(0px) scale(.99); }
.icon-circle{
  width:52px; height:52px; border-radius:50%;
  background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  color:var(--white);
  flex-shrink:0;
}
.icon-circle.sm{ width:38px; height:38px; }
.card-btn .txt{ flex:1; min-width:0; }
.card-btn .txt h3{ margin:0 0 3px 0; font-size:15.5px; font-weight:700; color:var(--text); }
.card-btn .txt p{ margin:0; font-size:12px; color:var(--text-muted); }
.chev{
  margin-left:auto;
  width:32px; height:32px; border-radius:50%;
  background:var(--ice);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
  flex-shrink:0;
}
.status-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-left:8px; }
.status-dot.green{ background:var(--green); }
.status-dot.orange{ background:#C77A1E; }

/* ---- quick links ---- */
.quicklinks{ display:flex; gap:10px; margin-bottom:6px; }
.quicklink{
  flex:1;
  background:var(--surface);
  border:none;
  border-radius:16px;
  padding:14px 8px 10px 8px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none;
  color:inherit;
  font-family:inherit;
}
.quicklink span{ font-size:10.5px; font-weight:700; color:var(--text); text-align:center; }

/* ---- steps ---- */
.steps{ position:relative; padding-left:4px; margin-bottom:22px; }
.step{ display:flex; gap:14px; position:relative; padding-bottom:26px; }
.step:last-child{ padding-bottom:8px; }
.step-num{
  width:34px; height:34px; border-radius:50%;
  background:var(--navy);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
  flex-shrink:0; position:relative; z-index:1;
}
.step:not(:last-child)::before{
  content:""; position:absolute; left:16.5px; top:34px; bottom:-8px; width:2px;
  background:var(--ice);
}
.step .txt h4{ margin:0 0 4px 0; font-size:14px; font-weight:700; color:var(--text); }
.step .txt p{ margin:0; font-size:12px; color:var(--text-muted); line-height:1.5; }
.step-img{
  width:100%;
  max-width:340px;
  display:block;
  border-radius:12px;
  margin-top:10px;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(6,32,61,0.06);
}
.step-img.small{
  width:auto;
  max-width:110px;
}
.lead-red{ color:var(--orange); font-weight:700; }
.lead-green{ color:var(--green); font-weight:700; }

/* ---- stat / requirement cards ---- */
.stat-grid{ display:flex; gap:10px; margin-bottom:22px; }
.stat-card{ flex:1; background:var(--surface); border-radius:16px; padding:16px 8px; text-align:center; }
.stat-card .icon-circle{ width:42px; height:42px; margin:0 auto 10px auto; }
.stat-card .num{ font-size:19px; font-weight:700; color:var(--text); }
.stat-card .num span{ font-size:11px; font-weight:700; }
.stat-card .label{ font-size:10px; color:var(--text-muted); margin-top:3px; }

/* ---- two-column info cards ---- */
.twocol-grid{ display:flex; gap:10px; margin-bottom:22px; }
.twocol-card{ flex:1; background:var(--surface); border-radius:16px; padding:16px 12px; text-align:center; }
.twocol-card .icon-circle{ width:46px; height:46px; margin:0 auto 10px auto; }
.twocol-card h4{ margin:0 0 4px 0; font-size:13px; font-weight:700; color:var(--text); }
.twocol-card p{ margin:0; font-size:10.5px; color:var(--text-muted); line-height:1.4; }

/* ---- alert / callout card ---- */
.callout{ display:flex; gap:14px; background:var(--surface); border-radius:16px; padding:16px; margin-bottom:22px; }
.callout h4{ margin:0 0 4px 0; font-size:13.5px; font-weight:700; color:var(--text); }
.callout p{ margin:0; font-size:12px; color:var(--text-muted); line-height:1.5; }

/* ---- example / reference panel ---- */
.example-panel{ display:flex; gap:14px; background:var(--surface); border-radius:16px; padding:16px; margin-bottom:22px; align-items:flex-start; }
.example-panel h4{ margin:0 0 4px 0; font-size:13.5px; font-weight:700; color:var(--text); }
.example-panel p{ margin:0; font-size:12px; color:var(--text-muted); line-height:1.5; }

/* ---- dark recommendation blocks ---- */
.reco-block{
  display:flex; gap:14px; align-items:flex-start;
  background:linear-gradient(160deg, var(--navy), var(--navy-soft));
  border-radius:16px; padding:16px; margin-bottom:10px;
}
.reco-block h4{ margin:0 0 4px 0; font-size:13.5px; font-weight:700; color:var(--white); }
.reco-block p{ margin:0; font-size:11.5px; color:var(--ice); line-height:1.5; }
.reco-block .icon-circle{ background:var(--ice); color:var(--navy); width:42px; height:42px; flex-shrink:0; }

/* ---- info list card ---- */
.info-card{ background:var(--surface); border-radius:16px; padding:16px; margin-bottom:14px; }
.info-card h4{ margin:0 0 10px 0; font-size:13.5px; font-weight:700; color:var(--text); display:flex; align-items:center; }
.info-card h4 svg{ margin-right:10px; flex-shrink:0; }
.info-card ul{ margin:0; padding-left:0; list-style:none; }
.info-card ul li{ display:flex; font-size:12px; color:var(--text-muted); line-height:1.5; margin-bottom:6px; }
.info-card ul li:last-child{ margin-bottom:0; }
.info-card ul li .dot{ color:var(--navy); flex-shrink:0; margin-right:8px; }
.info-card ul.cols-3{ column-count:3; column-gap:10px; }
.info-card ul.cols-3 li{ break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:10px; font-size:11px; }
.info-card ul.cols-2{ column-count:2; column-gap:14px; }
.info-card ul.cols-2 li{ break-inside:avoid; -webkit-column-break-inside:avoid; }

/* ---- video ---- */
.video-card{
  background:var(--surface);
  border-radius:16px;
  padding:14px;
  margin-bottom:22px;
}
.video-card video{
  width:100%;
  display:block;
  border-radius:12px;
  background:#000;
  max-height:280px;
}
.video-card .video-hint{
  margin:10px 2px 0 2px;
  font-size:11px;
  color:var(--text-muted);
  line-height:1.5;
}
.video-card .video-hint code{
  background:var(--panel-bg);
  padding:1px 5px;
  border-radius:4px;
  font-size:10.5px;
}

/* ---- inline note (not a card, e.g. password/legal notices) ---- */
.note-inline{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:11.5px;
  color:var(--text-muted);
  line-height:1.5;
  margin:0 0 18px 0;
}
.note-inline svg{ flex-shrink:0; margin-top:1px; }
.note-inline.lg{ font-size:13.5px; }
.note-inline.lg svg{ width:18px; height:18px; }

/* ---- inline clickable link chip (for any URL/site mentioned in text) ---- */
.link-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--ice);
  color:var(--navy);
  font-weight:700;
  font-size:12px;
  padding:7px 14px;
  border-radius:999px;
  text-decoration:none;
  margin-top:8px;
}
.link-chip svg{ flex-shrink:0; }

/* ---- cta button ---- */
.cta{
  display:block; width:100%;
  background:var(--lime); color:var(--navy);
  border:none; border-radius:999px;
  padding:15px;
  font-weight:700; font-size:13.5px;
  cursor:pointer; margin-top:8px;
  font-family:inherit;
  text-align:center; text-decoration:none;
}

/* ---- footer watermark ---- */
.footer{
  position:absolute; bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  background:var(--panel-bg);
}
.footer img{ height:20px; opacity:.35; }
.footer span{ font-size:9px; color:var(--text-muted); }
[data-theme="dark"] .footer img{ filter:invert(1) brightness(1.7); opacity:.45; }

/* ---- theme toggle ---- */
.theme-switch{
  display:flex; align-items:center; gap:10px;
  background:var(--switch-bg);
  padding:8px 14px;
  border-radius:999px;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  user-select:none;
  color:var(--text-muted);
  border:none;
  transition:background .3s ease;
}
.theme-switch svg{ flex-shrink:0; }
.switch-track{ width:42px; height:24px; border-radius:999px; background:var(--track-bg); position:relative; transition:background .25s ease; }
.switch-knob{
  position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:var(--navy);
  transition:left .25s ease, background .25s ease;
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}
[data-theme="dark"] .switch-knob{ left:21px; background:var(--lime); }
.theme-switch span{ font-size:11.5px; font-weight:700; color:var(--text); }

@media (max-width:400px){
  .stat-card .num{ font-size:16px; }
}

/* ---- accordion / dropdown (for grouping simple items without separate pages) ----
   Usa <details>/<summary> nativo do HTML — funciona mesmo sem JavaScript
   (importante em ambientes com Content-Security-Policy restritiva). */
.accordion-item{
  background:var(--surface);
  border-radius:16px;
  margin-bottom:12px;
  overflow:hidden;
}
.accordion-q{
  display:block;
  padding:14px;
  cursor:pointer;
  list-style:none;
}
.accordion-q::-webkit-details-marker{ display:none; }
.accordion-q::marker{ content:''; }
.accordion-q-inner{
  display:flex;
  align-items:center;
  gap:14px;
}
.accordion-q-inner .txt{ flex:1; }
.accordion-q-inner .txt h4{ margin:0; font-size:13.5px; font-weight:700; color:var(--text); }
.accordion-item .chev{ transition:transform .2s ease; }
.accordion-item[open] > .accordion-q .chev{ transform:rotate(90deg); }
.accordion-a{
  padding:0 14px 16px 14px;
}
.accordion-a .steps{ margin-top:14px; margin-bottom:6px; }
.accordion-a .twocol-grid{ margin-top:4px; }