/* === Additive Responsive Layer (non-breaking) ===
   Goal: make layout fluid and mobile-friendly WITHOUT touching existing CSS/JS.
   Strategy: Only additive rules, scoped and with conservative specificity.
*/

/* 1) Fluid images and embeds */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

/* 2) Container helpers (apply via class if needed) */
.container-fluid { width: 100%; margin: 0 auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; }
.col { flex: 1 1 0; min-width: 240px; }

/* 3) Tables: scroll on narrow screens instead of breaking */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table { width: 100%; border-collapse: collapse; }

/* 4) Forms: make inputs block-level on small screens */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  select, textarea, button { width: 100%; max-width: 100%; box-sizing: border-box; }
}

/* 5) Typography scaling */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:root {
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
}

/* 6) Utility classes (opt-in) */
.hidden-mobile { display: block; }
.visible-mobile { display: none; }
@media (max-width: 768px) {
  .hidden-mobile { display: none !important; }
  .visible-mobile { display: block !important; }
}

/* 7) Generic nav collapse helpers (only if dev opts in by adding classes)
   Markup example:
   <nav class="nav-wrap">
     <button class="nav-toggle" aria-expanded="false" aria-controls="navMenu">☰</button>
     <ul id="navMenu" class="nav-menu">...</ul>
   </nav>
*/
.nav-wrap { position: relative; }
.nav-toggle { display: none; }
@media (max-width: 992px) {
  .nav-toggle { display: inline-block; background: none; border: 1px solid currentColor; padding: 6px 10px; border-radius: 6px; }
  .nav-menu { display: none; }
  .nav-menu.is-open { display: block; }
  .nav-menu ul, .nav-menu li { list-style: none; margin: 0; padding: 0; }
}

/* 8) Safe default for large fixed widths */
[class*="container"], [class*="wrap"], [class*="content"], [class*="main"],
[class*="sidebar"], [class*="grid"], [class*="row"] {
  box-sizing: border-box;
  max-width: 100%;
}

/* 9) Common fixed viewport fixes */
@media (max-width: 1200px) {
  [style*="width:"] { max-width: 100% !important; }
}

/* 10) Flex fallback for sidebars */
@media (max-width: 992px) {
  .layout-two-column { display: flex; flex-direction: column; }
  .layout-two-column .sidebar { order: 2; }
  .layout-two-column .main { order: 1; }
}

/* === User override: .container margin === */
.container { margin: 20px !important; }

/* === User override: .topbar padding === */
.topbar { padding: 12px 40px !important; }

/* Mobile 'X' close button inside nav-menu */
.nav-close { display: none; }

@media (max-width: 992px) {
  .nav-menu { position: relative; }
  .nav-close {
    display: inline-flex;
    position: sticky; /* safe and non-intrusive */
    top: 0;
    margin-left: auto;
    padding: 8px 10px;
    font-size: 24px;
    line-height: 1;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--nav-close-color, currentColor); /* customize if needed */
    z-index: 2;
  }
}



/* === Mobile: fixed sidebar + collapsible (only content scrolls) === */
@media (max-width: 1150px){
  :root{ --m_sc_sidebar_w: var(--sidebar-width, 100px); }
  body{ overscroll-behavior-y: none; } /* help avoid rubber-band on iOS */
  .app{ height: 100dvh; overflow: hidden; position: relative; }
  .sidebar{
    position: fixed !important;
    left: 0; top: 0; bottom: 0;
    width: var(--m_sc_sidebar_w);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    z-index: 1000;
    transform: translateX(0);
    transition: transform .24s ease;
    will-change: transform;
  }
  .content{
    position: relative;
    margin-left: var(--m_sc_sidebar_w);
    height: 100dvh;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transition: margin-left .24s ease;
  }
  /* Collapsed state */
  .app.is-collapsed .sidebar{ transform: translateX(calc(-1 * var(--m_sc_sidebar_w))); }
  .app.is-collapsed .content{ margin-left: 0; }
  /* Burger in topbar (auto-inserted by JS) */
  .topbar .mobile-burger{
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: 8px;
    border: 1px solid rgba(0,0,0,.12); border-radius: 10px; background: #8c2727;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    cursor: pointer;
  }
  .topbar .mobile-burger svg{ width: 22px; height: 22px; }
}
@media (min-width: 1151px){
  .topbar .mobile-burger{ display: none !important; }
}


/* === Mobile: keep .topbar sticky/fixed inside scrollable content === */
@media (max-width: 1150px){
  .content { /* scroll container already */ }
  .topbar{
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 1001;
    background: #fff; /* solid background to avoid see-through */
    border-bottom: 1px solid rgba(0,0,0,.08);
    /* Optional: ensure inner items align nicely */
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
  }
  /* Keep room for the burger if present */
  .topbar .mobile-burger{ margin-right: 8px; }
}


/* === OVERRIDE: Mobile fixed topbar (does not slide sideways) === */
@media (max-width: 1150px){
  :root{ --topbar-h: 56px; } /* ajuste conforme sua topbar */
  /* Ensure content starts below the fixed topbar */
  .app .content{
    padding-top: var(--topbar-h) !important;
  }
  /* Pin the topbar to the viewport */
  .app .content .topbar,
  .topbar{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1200;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.08);
    /* keep layout tidy */
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
}


/* === Mobile flyout restore & offset under fixed .topbar === */
@media (max-width: 1150px){
  :root{ --topbar-h: var(--topbar-h, 56px); }
  /* Re-enable flyout behavior even on narrow screens */
  .sidebar.sidebar-compact .nav-parent > .submenu{
    position: fixed !important;
    left: var(--sidebar-width, 100px) !important;
    top: var(--topbar-h, 56px) !important;
    height: calc(100dvh - var(--topbar-h, 56px)) !important;
    width: min(360px, calc(100vw - var(--sidebar-width, 100px))) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 1px 0 0 rgba(0,0,0,.06) !important;
    border-left: none !important;
    display: none;
    z-index: 1100 !important; /* below fixed topbar (1200), above content */
    background: #fff !important;
    overflow-y: auto !important;
  }
  .sidebar.sidebar-compact .nav-parent.is-open > .submenu{ display: block !important; }

  /* Backdrop aligned with the flyout area (beneath the fixed topbar) */
  .sidebar-flyout-backdrop{
    position: fixed !important;
    top: var(--topbar-h, 56px) !important;
    left: var(--sidebar-width, 100px) !important;
    right: 0 !important; bottom: 0 !important;
    background: rgba(0,0,0,.25) !important;
    z-index: 1050 !important;
    display: none;
  }
  .sidebar-flyout-backdrop.is-visible{ display: block !important; }
}
@media (max-width: 1150px){
  :root{ --topbar-h: 56px; }
  .sidebar .brand.logo{ margin-top: var(--topbar-h) !important; }
}
/* ===== Serviços: largura cheia da tabela ===== */
.services-card { padding: 0; } /* se sua <div class="card"> tiver essa classe */
.services-table{
  width:100%;
  border-collapse:collapse;   /* remove “buracos” entre células */
  table-layout:fixed;         /* evita encolher só até o conteúdo */
}
.services-table th,
.services-table td{
  padding:12px 16px;
  vertical-align:top;
}

/* Distribuição de colunas (100% no total) */
.services-table th:nth-child(1), .services-table td:nth-child(1){ width:22%; } /* Serviço   */
.services-table th:nth-child(2), .services-table td:nth-child(2){ width:53%; } /* Descrição */
.services-table th:nth-child(3), .services-table td:nth-child(3){ width:10%; } /* Valor     */
.services-table th:nth-child(4), .services-table td:nth-child(4){ width:15%; } /* Ações     */

.services-table td.desc{ word-break:break-word; } /* grandes descrições quebram linha */
.services-table td.valor{ white-space:nowrap; font-weight:600; }
.services-table td.acoes{ text-align:right; }

/* Em telas menores, pode abrir um pouco a descrição */
@media (max-width:1200px){
  .services-table th:nth-child(1), .services-table td:nth-child(1){ width:24%; }
  .services-table th:nth-child(2), .services-table td:nth-child(2){ width:51%; }
  .services-table th:nth-child(3), .services-table td:nth-child(3){ width:10%; }
  .services-table th:nth-child(4), .services-table td:nth-child(4){ width:15%; }
}
@media (max-width:900px){
  .services-table td.acoes{ text-align:left; }
}

/* ===== Cabeçalho da página (alinha o Ajuda à direita) ===== */
.services-head{ display:flex; align-items:center; gap:12px; margin:8px 0 12px; }
.services-head h1{ margin:0; color:var(--accent); }
.services-head .spacer{ flex:1; }
#btnAjuda{ margin-left:auto; } /* garante que o botão vá pra direita */

/* ===== Modal Ajuda no formato horizontal com bolinhas ===== */
.modal .dialog{ width:min(1000px, 92vw); } /* modal um pouco mais largo */
.steps{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:24px;
  text-align:center;
  align-items:start;
}
.steps .step{ display:flex; flex-direction:column; gap:8px; }
.steps .num{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:700; background:#0B2B5C; color:#fff;
  margin:0 auto 8px;
}
.steps .title{ font-weight:700; }
.steps .desc{ color:#555; }

/* responsivo do modal ajuda */
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }