/* css/mobile.css */
/* Mobile App Shell - CalcBrasil */

@media (max-width: 860px) {
  :root{
    --m-topbar-h: 54px;
    --m-bottombar-h: 62px;
    --m-radius: 18px;
    --m-gap: 12px;
    --m-pad: 14px;
  }

  html, body { height: 100%; }
  body{
    margin: 0;
    padding-top: var(--m-topbar-h);
    padding-bottom: calc(var(--m-bottombar-h) + env(safe-area-inset-bottom));
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  /* esconde elementos desktop se quiser usar */
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }

  /* Shell */
  .m-shell{
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--m-pad);
  }

  /* Topbar fixa */
  .m-topbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--m-topbar-h);
    z-index: 9999;
    backdrop-filter: blur(10px);
    background: rgba(6,18,28,.78);
    border-bottom: 1px solid rgba(255,255,255,.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
  }
  .m-topbar .m-title{
    display:flex;
    flex-direction: column;
    line-height: 1.05;
    gap: 2px;
    min-width: 0;
  }
  .m-topbar .m-title strong{
    font-size: 14px;
    color: rgba(255,255,255,.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-topbar .m-title span{
    font-size: 11px;
    color: rgba(255,255,255,.70);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-topbar .m-actions{
    display:flex;
    gap: 8px;
    align-items:center;
  }
  .m-btn{
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    padding: 8px 10px;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
  }
  .m-btn:active{ transform: scale(.98); }

  /* Bottom nav fixa */
  .m-bottomnav{
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    height: calc(var(--m-bottombar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 9999;
    backdrop-filter: blur(10px);
    background: rgba(6,18,28,.86);
    border-top: 1px solid rgba(255,255,255,.10);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .m-bottomnav .m-nav{
    width: 100%;
    max-width: 720px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px 10px;
  }
  .m-nav button{
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.86);
    border-radius: 16px;
    padding: 10px 8px;
    font-size: 12px;
    cursor: pointer;
  }
  .m-nav button[data-active="1"]{
    border-color: rgba(56,189,248,.50);
    background: rgba(56,189,248,.12);
    color: rgba(255,255,255,.95);
  }

  /* Painéis (abas) */
  .m-panels{ display: block; }
  .m-panel{ display: none; }
  .m-panel[data-open="1"]{ display: block; }

  /* Cards mobile */
  .m-card{
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    border-radius: var(--m-radius);
    padding: 12px;
    margin-bottom: var(--m-gap);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
  .m-card h2, .m-card h3{
    margin: 0 0 10px 0;
    font-size: 14px;
    color: rgba(255,255,255,.92);
  }
  .m-muted{
    color: rgba(255,255,255,.70);
    font-size: 12px;
  }

  /* Compacta inputs/botões do site */
  input, select, button, textarea{
    font-size: 16px; /* evita zoom do iOS */
  }
  .m-card input, .m-card select, .m-card textarea{
    width: 100%;
    box-sizing: border-box;
  }

  /* Accordion */
  .m-accordion details{
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    border-radius: 16px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .m-accordion summary{
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: rgba(255,255,255,.90);
    font-size: 13px;
    outline: none;
  }
  .m-accordion summary::-webkit-details-marker{ display:none; }
  .m-accordion .m-acc-body{
    margin-top: 10px;
    color: rgba(255,255,255,.86);
    font-size: 13px;
  }

  /* Anúncios: mantém slots e dá espaçamento */
  .ad-slot-top, .ad-slot-mid, .ad-slot-bottom{
    margin: 10px 0;
  }

  /* Evita containers gigantes herdados do desktop */
  .container, .wrap, .tool, main{
    max-width: 100% !important;
  }
}
:root{
  --hdr-h: 44px;
  --hdr-ad-h: 52px; /* ajuste conforme seu banner */
}

/* Header fino e fixo */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(6,18,28,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.header-row{
  height: var(--hdr-h);
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 12px;
}

.brand-link{
  text-decoration:none;
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
}

.header-nav{
  display:flex;
  gap: 10px;
  align-items:center;
}

.nav-item{
  font-size: 12px;
  color: rgba(255,255,255,.78);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  text-decoration:none;
}

.nav-item.is-active{
  color: rgba(255,255,255,.95);
  border-color: rgba(56,189,248,.45);
  background: rgba(56,189,248,.12);
}

/* Anúncio “grudado” no header */
.header-ad{
  height: var(--hdr-ad-h);
  display:flex;
  align-items:center;
  justify-content:center;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

/* garante que o conteúdo não fica embaixo do header */
body{
  scroll-padding-top: calc(var(--hdr-h) + var(--hdr-ad-h) + 10px);
}