/* =====================================================================
   ALVO MOBILE OFICIAL
   Aplicado somente até 820px.
   Desktop (>820px) permanece com o visual original.
   ===================================================================== */

@media (max-width: 820px){

  :root{
    --mobile-gap:12px;
    --mobile-radius:14px;
  }

  html,body{
    width:100%;
    max-width:100%;
    margin:0;
    overflow-x:hidden!important;
    -webkit-text-size-adjust:100%;
  }

  *{box-sizing:border-box}
  img,svg,canvas{max-width:100%;height:auto}

  body.app-body{
    display:block!important;
    min-height:100dvh;
    background:#f3f7fc;
  }

  /* ---------- NAVEGAÇÃO MOBILE ---------- */
  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(84vw,300px)!important;
    height:100dvh!important;
    padding:16px 12px!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    overflow-y:auto!important;
    z-index:5000!important;
    box-shadow:14px 0 38px rgba(2,20,48,.28)!important;
  }
  body.mobile-menu-open{overflow:hidden!important}
  body.mobile-menu-open .sidebar{transform:translateX(0)!important}

  .mobile-menu-overlay{
    position:fixed!important;
    inset:0!important;
    display:none!important;
    background:rgba(2,15,35,.50)!important;
    z-index:4990!important;
  }
  body.mobile-menu-open .mobile-menu-overlay{display:block!important}

  .mobile-menu-close{
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    right:12px!important;
    top:12px!important;
    width:38px!important;
    height:38px!important;
    border-radius:10px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(255,255,255,.08)!important;
    color:#fff!important;
    font-size:27px!important;
  }

  .brand-wrap{padding:4px 48px 14px 8px!important}
  .brand-wrap img{width:170px!important}
  .side-nav{gap:5px!important}
  .side-nav a{
    min-height:48px!important;
    padding:12px 13px!important;
    border-radius:11px!important;
    font-size:14px!important;
  }
  .side-quote{display:none!important}

  .app-main{
    margin-left:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:3000!important;
    width:100%!important;
    min-height:58px!important;
    height:auto!important;
    padding:8px 10px!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:center!important;
    background:rgba(255,255,255,.98)!important;
    border-bottom:1px solid #e0e8f2!important;
    box-shadow:0 3px 12px rgba(10,42,80,.05)!important;
  }

  .mobile-menu-toggle{
    display:flex!important;
    width:40px!important;
    height:40px!important;
    padding:9px!important;
    border:1px solid #dbe5f0!important;
    border-radius:10px!important;
    background:#fff!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:4px!important;
  }
  .mobile-menu-toggle span{
    display:block!important;
    width:100%!important;
    height:2px!important;
    border-radius:999px!important;
    background:#12365f!important;
  }

  .top-context{
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:2px!important;
  }
  .context-label,.unit-switcher label{font-size:10px!important}
  .top-context>strong{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:12px!important;
  }

  .unit-switcher{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:2px!important;
  }
  .unit-switcher select{
    width:100%!important;
    max-width:180px!important;
    min-width:0!important;
    min-height:34px!important;
    padding:4px 26px 4px 8px!important;
    font-size:12px!important;
  }

  .user-menu{
    min-width:0!important;
    gap:5px!important;
    justify-content:flex-end!important;
  }
  .user-text{display:none!important}
  .avatar{width:34px!important;height:34px!important;font-size:13px!important}
  .top-link{
    font-size:10.5px!important;
    white-space:nowrap!important;
    padding:7px 3px!important;
  }

  /* ---------- ÁREA DE CONTEÚDO ---------- */
  .container{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:12px 10px 26px!important;
  }

  .page-title{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    margin:0 0 14px!important;
  }
  .page-title h1{font-size:25px!important;line-height:1.12!important;margin:0 0 4px!important}
  .page-title p{font-size:12px!important;line-height:1.45!important}

  /* Filtros de período */
  .period-filter,
  .filter-bar form{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .period-filter{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 94px!important;
    gap:8px!important;
  }
  .period-filter select,
  .period-filter input{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
  }
  .period-filter .btn{
    grid-column:1/-1!important;
    width:100%!important;
    min-height:44px!important;
  }

  /* Componentes gerais */
  .panel,.metric-card,.box,.kpi,.summary-card{
    max-width:100%!important;
    min-width:0!important;
    border-radius:var(--mobile-radius)!important;
  }
  .panel{padding:14px!important}

  .metrics,
  .dashboard-grid,
  .lower-grid,
  .summary-cards{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }

  .tabs{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  .tabs::-webkit-scrollbar{display:none!important}
  .tabs a{flex:0 0 auto!important;white-space:nowrap!important}

  /* Formulários gerais */
  .form-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:11px!important;
    width:100%!important;
    min-width:0!important;
  }
  .form-grid>div,.full-row{
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  input,select,textarea{
    max-width:100%!important;
  }
  .form-grid input,
  .form-grid select,
  .form-grid textarea{
    width:100%!important;
    min-width:0!important;
    font-size:16px!important;
  }
  textarea{min-height:90px!important}
  .btn{touch-action:manipulation}

  /* ---------- PAINEL PRINCIPAL MOBILE ---------- */
  .container.dash{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:12px 10px 30px!important;
  }
  .dash-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    margin:0 0 12px!important;
  }
  .dash-head h1{font-size:27px!important;line-height:1.08!important}
  .dash-head p{font-size:11px!important}
  .v3-kicker{font-size:8px!important}

  .period{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 90px!important;
    gap:7px!important;
    padding:7px!important;
    border-radius:13px!important;
  }
  .period select,.period input{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    font-size:16px!important;
    padding:0 10px!important;
  }
  .period .btn{
    grid-column:1/-1!important;
    width:100%!important;
    min-height:42px!important;
  }
  .period-readonly{width:100%!important}

  .overview{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
    margin-bottom:10px!important;
  }

  .status-card{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
    padding:18px!important;
    border-radius:17px!important;
  }
  .status-card h2{
    font-size:25px!important;
    line-height:1.08!important;
    overflow-wrap:anywhere!important;
  }
  .status-card p{
    max-width:100%!important;
    font-size:11px!important;
    line-height:1.45!important;
  }
  .score{
    position:relative!important;
    min-width:0!important;
    width:100%!important;
    text-align:left!important;
  }
  .score strong,.status-card.neutral .score strong{font-size:42px!important}
  .score span{font-size:8.5px!important}

  .pace-card{
    width:100%!important;
    min-width:0!important;
    padding:17px!important;
    border-radius:17px!important;
  }
  .pace-card strong{font-size:27px!important}
  .pace-foot{font-size:9px!important}

  .kpis{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    width:100%!important;
    margin-bottom:10px!important;
  }
  .kpi,.kpi-card-v3{
    min-width:0!important;
    padding:13px!important;
    border-radius:14px!important;
  }
  .kpi strong,.kpi-value-v3{font-size:26px!important}
  .kpi-meta-v3{font-size:11px!important}
  .kpi-foot,.kpi-foot-v3{
    display:block!important;
    font-size:9px!important;
  }
  .kpi-foot span,.kpi-foot-v3 span{display:block!important;margin-top:3px!important}

  .bottom-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
  }
  .box{
    width:100%!important;
    min-width:0!important;
    padding:14px!important;
    border-radius:14px!important;
  }
  .box-head{flex-wrap:wrap!important}
  .finance-main{
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  .finance-sub{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .money,.mini-stat{min-width:0!important}
  .money strong,.mini-stat strong{overflow-wrap:anywhere!important}

  .funnel{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
    width:100%!important;
  }
  .stage{width:100%!important;min-height:76px!important}
  .arrow{
    justify-self:center!important;
    transform:rotate(90deg)!important;
  }
  .funnel-note{
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
  }

  /* ---------- MATRÍCULAS MOBILE ---------- */
  .matricula-form-panel{padding:14px!important}
  .section-heading{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
    gap:9px!important;
  }
  .section-heading>div:not(.section-icon){
    flex:1 1 180px!important;
    min-width:0!important;
  }
  .section-heading h2,.section-heading h3{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .section-count{margin-left:auto!important}

  .matricula-form-panel .form-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }
  .matricula-form-panel .midia-compacta{
    width:100%!important;
    max-width:100%!important;
  }

  .consultor-line{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
  }
  .consultor-line>div:first-child{width:100%!important;min-width:0!important}
  select[name="consultor_id"]{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .consultor-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }
  .consultor-actions .btn{
    width:100%!important;
    min-width:0!important;
    white-space:normal!important;
  }

  .card-schedule-box,.pagamento-misto-box{
    width:100%!important;
    min-width:0!important;
    padding:12px!important;
  }
  .misto-grid,.schedule-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .schedule-check{align-items:flex-start!important;line-height:1.35!important}
  .schedule-check input{width:auto!important;flex:0 0 auto!important;margin-top:2px!important}

  .summary-cards{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .summary-card{padding:12px!important}
  .summary-card strong{overflow-wrap:anywhere!important}

  .filter-bar,
  .filter-bar form{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
  }
  .filter-bar select,.filter-bar input,.filter-bar button{
    width:100%!important;
    min-width:0!important;
  }

  /* Tabelas continuam tabelas, mas a rolagem fica confinada ao componente */
  .table-wrap{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:10px!important;
  }
  .table-wrap table{
    width:max-content!important;
    min-width:860px!important;
    max-width:none!important;
    table-layout:auto!important;
  }
  .table-wrap th,.table-wrap td{white-space:nowrap!important}

  .actions-dropdown{position:relative!important}
  .actions-menu{
    width:min(220px,calc(100vw - 28px))!important;
    max-width:calc(100vw - 28px)!important;
    z-index:4500!important;
  }

  .reminder-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    width:100%!important;
  }
  .reminder-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
  }
  .reminder-actions form,
  .reminder-actions input,
  .reminder-actions button{width:100%!important}

  /* Modais */
  .modal-backdrop,.modal-overlay{padding:10px!important}
  .modal-card,.modal-box{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 20px)!important;
    overflow:auto!important;
    padding:16px!important;
  }
  .modal-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  .modal-actions .btn,.modal-actions button{width:100%!important}

  /* ---------- OUTRAS TELAS / PADRÕES ---------- */
  .consultor-simple-form{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }
  .consultor-simple-form>div{min-width:0!important}

  .actions-cell{
    gap:6px!important;
    flex-wrap:wrap!important;
  }

  .status-box{font-size:18px!important}
}

@media (max-width: 480px){
  .container,.container.dash{padding-left:8px!important;padding-right:8px!important}

  .topbar{
    grid-template-columns:42px minmax(0,1fr) auto!important;
  }
  .top-link:first-of-type{display:none!important}

  .dash-head h1{font-size:25px!important}
  .kpis{grid-template-columns:minmax(0,1fr)!important}
  .finance-sub{grid-template-columns:minmax(0,1fr)!important}

  .summary-cards{grid-template-columns:minmax(0,1fr)!important}
  .consultor-actions{grid-template-columns:minmax(0,1fr)!important}

  .panel,.box,.kpi,.summary-card{border-radius:12px!important}
}