/* =========================================================
   FLEX BROWSER — MOBILE FIRST OVERRIDES
   Última camada responsiva do site. Mantém a identidade visual
   e corrige navegação, formulários, tabelas, dashboards e cards.
   ========================================================= */

:root{
  --flex-mobile-gutter:14px;
  --flex-touch:44px;
  --flex-safe-bottom:max(14px, env(safe-area-inset-bottom));
}

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:76px;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-wrap:anywhere;
}
*,*::before,*::after{box-sizing:border-box;}
img,picture,video,canvas,svg{max-width:100%;height:auto;}
iframe{max-width:100%;}
pre,code,.copy-box,.ref,.activation-code{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;}

/* Impede filhos de grid/flex de criarem rolagem horizontal involuntária. */
.row>* ,
[class*="grid"]>* ,
.d-flex>* ,
.panel>* ,
.card>* ,
main,section,article,aside{min-width:0;}

/* Rolagem horizontal intencional para tabelas e faixas de navegação. */
.table-responsive,
.table-scroll,
.admin-table-wrap,
.co-table-wrap,
.tabs,
.co-admin-navlinks{
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.table-responsive:focus-visible,
.table-scroll:focus-visible,
.tabs:focus-visible,
.co-admin-navlinks:focus-visible{
  outline:2px solid #C49A36;
  outline-offset:3px;
}

/* Modal e toast nunca ultrapassam o viewport. */
.modal-dialog{max-width:calc(100vw - 24px);margin-left:auto;margin-right:auto;}
.toast-container{max-width:calc(100vw - 24px);}

/* =========================================================
   NAVBAR PRINCIPAL
   ========================================================= */
@media(max-width:991.98px){
  .gold-nav{
    padding-top:max(.36rem,env(safe-area-inset-top))!important;
    min-height:60px!important;
  }
  .gold-nav .container{
    width:100%!important;
    max-width:none!important;
    padding-left:var(--flex-mobile-gutter)!important;
    padding-right:var(--flex-mobile-gutter)!important;
  }
  .gold-nav .navbar-brand{
    max-width:calc(100% - 58px);
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.96rem!important;
  }
  .gold-nav .navbar-brand strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .gold-nav .navbar-toggler{
    width:44px;
    height:42px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
  }
  .gold-nav .navbar-collapse{
    max-height:calc(100dvh - 78px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:10px!important;
    margin-top:8px!important;
    box-shadow:0 18px 44px rgba(0,0,0,.42)!important;
  }
  .gold-nav .navbar-nav{width:100%;padding-bottom:4px;}
  .gold-nav .nav-link,
  .gold-nav .btn,
  .gold-nav .btn-accent,
  .gold-nav .btn-outline-dark{
    min-height:44px!important;
    width:100%!important;
    justify-content:flex-start!important;
    padding:.68rem .78rem!important;
    font-size:.88rem!important;
    border-radius:10px!important;
  }
  .gold-nav .nav-link i,
  .gold-nav .btn i{font-size:1rem!important;min-width:20px;text-align:center;}
}

/* =========================================================
   COMPONENTES GERAIS E FORMULÁRIOS
   ========================================================= */
@media(max-width:767.98px){
  :root{--flex-mobile-gutter:12px;}

  body{font-size:15px;}
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-fluid{
    --bs-gutter-x:24px;
  }

  h1,.display-1,.display-2,.display-3,.display-4,.display-5{
    overflow-wrap:normal;
    word-break:normal;
    hyphens:auto;
  }
  p,li{line-height:1.62;}

  .card,.panel,.kpi,.glass-card,.admin-card,.admin-panel,
  .support-card,.tutorial-card,.suggestion-card,.program-activation-card{
    max-width:100%;
  }

  .panel-head,
  .admin-detail-head,
  .topbar,
  .section-head{
    flex-wrap:wrap;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,textarea,
  .form-control,.form-select,.admin-input,.input{
    max-width:100%!important;
    min-width:0!important;
    font-size:16px!important;
  }
  .form-control:not(.form-control-sm),
  .form-select:not(.form-select-sm),
  .admin-input,
  .input{
    min-height:46px;
  }
  textarea.form-control,textarea.admin-input{min-height:112px;}
  .input-group{max-width:100%;flex-wrap:nowrap;}
  .input-group>.form-control,.input-group>.form-select{width:1%;}

  .btn:not(.btn-close):not(.copy-btn):not(.cycle-date-edit-btn):not(.selection-obs-edit-btn):not(.inline-pill-edit-btn),
  .admin-btn,.co-btn,.channel-btn{
    min-height:42px;
  }

  .alert{padding:13px 14px;border-radius:12px;}
  .alert .btn{width:100%;}

  .modal-dialog{max-width:calc(100vw - 16px);margin:.5rem auto;}
  .modal-dialog-scrollable{height:calc(100dvh - 16px);}
  .modal-content{max-height:calc(100dvh - 16px);border-radius:16px!important;}
  .modal-header,.modal-body,.modal-footer{padding:14px;}
  .modal-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .modal-footer>*{margin:0!important;width:100%;}

  /* Tabelas continuam completas, mas passam a rolar dentro do card. */
  .table-responsive,.table-scroll{border-radius:12px;}
  table.table,table.admin-table,table.table-darkish{
    margin-bottom:0;
  }
  .table th,.table td,.admin-table th,.admin-table td{
    padding:.72rem .68rem;
    vertical-align:middle;
  }

  /* Blocos de ações empilham sem esmagar os textos. */
  .wide-actions,.hero-actions,.co-actions,.co-legal-actions,
  .mini-actions,.channel-actions,.support-actions{
    max-width:100%;
  }
}

@media(pointer:coarse){
  input,select,textarea{font-size:16px!important;}
  a,button,input,select,textarea{touch-action:manipulation;}
}

/* =========================================================
   LANDING PAGE / INDEX
   ========================================================= */
@media(max-width:991.98px){
  .wide-container{width:calc(100% - 20px)!important;}
  .hero-shell{min-height:auto!important;}
  .preview-stage{min-height:0!important;}
  .ecosystem-grid,.offer-grid,.cta-banner{grid-template-columns:minmax(0,1fr)!important;}
}
@media(max-width:575.98px){
  .wide-container{width:calc(100% - 12px)!important;}
  .hero{padding:12px 0!important;}
  .hero-shell{padding:18px 12px 16px!important;border-radius:18px!important;}
  .hero-copy{padding:8px 2px 14px!important;}
  .hero-title{
    max-width:none!important;
    font-size:clamp(2.15rem,11vw,3.1rem)!important;
    line-height:.98!important;
    letter-spacing:-.055em!important;
  }
  .hero-text{font-size:1rem!important;line-height:1.65!important;}
  .hero-actions{gap:9px!important;margin-bottom:18px!important;}
  .hero-actions .btn-main,.hero-actions .btn-outline-main,
  .hero-actions .btn,.hero-actions .co-btn{width:100%!important;min-height:48px;}
  .selling-points{grid-template-columns:1fr!important;gap:8px!important;}
  .selling-point{padding:12px!important;}
  .preview-window{border-radius:16px!important;}
  .preview-top{padding:12px!important;gap:8px;flex-wrap:wrap;}
  .preview-body{padding:12px!important;}
  .placeholder-content{padding:18px 10px!important;}
  .stage-foot{grid-template-columns:1fr!important;}

  .section{padding:10px 0!important;}
  .section-shell{border-radius:18px!important;}
  .section-head{padding:22px 16px 0!important;align-items:flex-start!important;}
  .section-head h2{font-size:clamp(1.65rem,8vw,2.25rem)!important;}
  .ecosystem-grid,.journey-grid,.offer-grid{padding:18px 16px 20px!important;gap:12px!important;}
  .journey-grid{grid-template-columns:1fr!important;}
  .ecosystem-main,.right-panel,.journey-panel,.price-panel,.comparison-panel,.comp-card{
    padding:17px!important;border-radius:16px!important;
  }
  .benefit-item{padding:12px!important;}
  .comparison-grid,.metrics-row,.cta-stats{grid-template-columns:1fr!important;}
  .price-box{align-items:baseline!important;flex-wrap:wrap;}
  .cta-banner{margin:0 16px 20px!important;padding:18px!important;border-radius:18px!important;}
  .foot{justify-content:center!important;text-align:center;}
}

/* Landing alternativa usada em páginas institucionais. */
@media(max-width:575.98px){
  .co-section{padding:48px 0!important;}
  .co-title{font-size:clamp(2.15rem,11vw,3.2rem)!important;line-height:.98!important;}
  .co-lead{font-size:1rem!important;}
  .co-final{padding:20px!important;border-radius:20px!important;}
  .co-plan,.co-feature,.co-demo{padding:18px!important;border-radius:18px!important;}
  .co-app-top{height:auto!important;min-height:48px;flex-wrap:wrap;gap:8px;padding:10px 12px!important;}
  .co-app-main{padding:12px!important;}
  .co-profile-row{padding:10px!important;}
}

/* =========================================================
   LOGIN, DOWNLOAD, SUPORTE, TUTORIAIS E PÁGINAS LEGAIS
   ========================================================= */
@media(max-width:575.98px){
  .login-wrap,.auth-wrap,.download-wrap,.support-wrap,.tutorial-wrap,.suggestion-wrap{
    padding-left:12px!important;padding-right:12px!important;
  }
  .login-card,.auth-card,.download-card,.support-card,.tutorial-card,.suggestion-card{
    border-radius:16px!important;
  }
  .co-legal-page{padding-left:12px!important;padding-right:12px!important;}
  .co-legal-card{padding:18px!important;border-radius:14px!important;}
  .co-legal-card h1{font-size:clamp(1.65rem,8vw,2.1rem)!important;}
  .co-legal-actions{display:grid!important;grid-template-columns:1fr!important;}
  .co-legal-actions .btn{width:100%;}

  .channel-btn,.support-actions .btn,.suggestion-actions .btn{width:100%!important;}
  .ratio iframe,.video-frame iframe{min-height:210px;}
  .banner-img{max-height:none!important;}
}

/* =========================================================
   CALCULADORA E DUTCHING
   ========================================================= */
@media(max-width:575.98px){
  .wrapper{width:100%!important;margin:8px auto 26px!important;padding:0 10px!important;}
  .title-wrap{gap:8px!important;}
  .title-wrap h1{font-size:clamp(1.45rem,8vw,2rem)!important;}
  .grid{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;}
  .panel{border-radius:14px!important;}
  .panel-head{padding:12px!important;}
  .input-wrap{padding:12px!important;border-radius:12px!important;}
  .kpis{gap:7px!important;}
  .chip{min-height:38px!important;padding:8px 9px!important;}

  .cols-1-1-auto{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .cols-1-1-auto>*:last-child{grid-column:1/-1;}
  .btn-accent,.btn-reset,.btn-toggle{min-height:44px!important;padding:9px 10px!important;font-size:.92rem!important;}

  .row-line{
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px!important;
    padding:11px!important;
    margin:7px 0!important;
    border-radius:12px!important;
  }
  .row-line>div{display:flex;justify-content:space-between;align-items:center;gap:9px;min-width:0;}
  .row-line .form-control,.row-line .form-select{min-height:44px!important;}
  .row-line .col-com,.row-line .col-com .flex-grow-1{width:100%!important;}
  .w-140,.w-240{width:100%!important;max-width:none!important;}
  .stake-wrap{width:100%;}
  .stake-wrap [data-money="stake"]{width:100%;}
  .stake-wrap .copy-btn{width:40px!important;height:40px!important;right:2px!important;}
  .copy-btn:not(.stake-wrap .copy-btn){min-width:40px;min-height:40px;}
  .note{padding:10px 12px!important;font-size:.9rem!important;}

  #app{width:100%;max-width:100%;overflow-x:hidden;}
  #app .wrapper,#app .container{max-width:100%;}
  .dutching-house-select{width:100%!important;max-width:none!important;}
}

/* =========================================================
   DASHBOARD DO CLIENTE
   ========================================================= */
@media(max-width:991.98px){
  .dash{display:block!important;width:100%;min-height:0!important;}
  .dash>.side,.side{display:none!important;}
  .dash>.main,.main{width:100%;max-width:100%;padding:14px!important;}
  .tabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    margin-left:-14px;
    margin-right:-14px;
    padding:2px 14px 8px!important;
    scroll-snap-type:x proximity;
  }
  .tabs>a{flex:0 0 auto;scroll-snap-align:start;min-height:42px;}
  .top-actions{align-items:stretch!important;}
  .top-actions>.d-flex{width:100%;}
  .cycle-main{min-width:220px!important;}
  .table-responsive{max-width:100%;overflow-x:auto!important;}
  .mobile-sticky-add{bottom:calc(14px + env(safe-area-inset-bottom))!important;right:14px!important;}
}

@media(max-width:575.98px){
  .dash>.main,.main{padding:10px!important;}
  .top-actions{padding:13px!important;border-radius:15px!important;}
  .top-actions h1{font-size:1.45rem!important;}
  .top-actions>.d-flex{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px!important;
    align-items:stretch!important;
  }
  .top-actions>.d-flex>.badge,
  .top-actions>.d-flex>form{grid-column:1/-1;width:100%;}
  .top-actions>.d-flex>.btn{width:100%;justify-content:center!important;}
  .top-actions .form-select{width:100%;min-height:44px;}

  .program-activation-card{border-radius:15px!important;}
  .program-activation-card .panel-body{padding:14px!important;}
  .program-activation-card .code{
    display:flex!important;
    width:100%;
    max-width:100%;
    justify-content:center;
    overflow-wrap:anywhere;
    word-break:break-all;
    letter-spacing:.04em!important;
  }

  .row.g-3>.col-6{width:100%;}
  .kpi{padding:14px!important;border-radius:14px!important;}
  .kpi .value{font-size:1.55rem!important;}
  .panel{border-radius:15px!important;}
  .panel-head{padding:13px!important;}
  .panel-body{padding:13px!important;}
  .panel-head .btn,.panel-body>.btn{width:100%;}

  .chart-svg-wrap{height:220px!important;}
  .co-profit-chart{min-height:280px!important;padding:6px!important;}
  .co-profit-stage{left:48px!important;right:10px!important;}
  .co-profit-months,.co-profit-ticks{left:48px!important;right:10px!important;}

  .selection-obs-form,.inline-pill-form,.cycle-date-form,
  .bookmaker-form,.result-form{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    flex-wrap:wrap!important;
  }
  .selection-obs-form .form-control,.cycle-date-form .form-control,
  .bookmaker-form .form-select,.result-form .form-select{
    width:100%!important;max-width:none!important;
  }
  .selection-obs-text,.inline-pill-text,.cycle-title{max-width:72vw!important;}
  .bookmaker-chip{max-width:68vw!important;}

  .mobile-sticky-add{
    width:54px!important;height:54px!important;
    min-height:54px!important;
  }
}

/* =========================================================
   RENOVAÇÃO, INDICAÇÕES E TELEGRAM
   ========================================================= */
@media(max-width:575.98px){
  .plan-includes{grid-template-columns:1fr!important;}
  .qr{width:min(100%,310px);margin-inline:auto;}
  .qr img{width:100%;}
  .copy-box{min-height:0!important;}
  .ref-box,.mini-stat{padding:12px!important;}
  .price{font-size:2.35rem!important;}
}

/* =========================================================
   ADMINISTRAÇÃO
   ========================================================= */
@media(max-width:991.98px){
  .co-admin-navbar{
    position:sticky;
    top:0;
    z-index:1040;
    width:100%;
    padding:11px 12px!important;
    gap:10px!important;
  }
  .co-admin-brand{width:100%;min-width:0;}
  .co-admin-brand img{flex:0 0 auto;}
  .co-admin-brand span{min-width:0;}
  .co-admin-brand small{white-space:normal;line-height:1.3;}
  .co-admin-navlinks{
    width:calc(100% + 24px)!important;
    margin-left:-12px;
    margin-right:-12px;
    padding:1px 12px 7px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    scroll-snap-type:x proximity;
  }
  .co-admin-navlinks a{
    flex:0 0 auto;
    white-space:nowrap;
    min-height:42px;
    scroll-snap-align:start;
  }

  .admin-wrap{width:100%!important;max-width:100%!important;padding:14px!important;}
  .admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .admin-two,.filters,.admin-form-row,.admin-detail-grid{grid-template-columns:minmax(0,1fr)!important;}
  .admin-two{gap:14px!important;}
  .admin-title,.admin-top{align-items:flex-start!important;flex-direction:column!important;}
  .admin-title>*{width:100%;}
  .admin-card{max-width:100%;}
  .admin-input:focus{min-width:0!important;}
  .row-actions,.wide-actions{min-width:0!important;max-width:100%!important;}
  .table-scroll{width:100%;max-width:100%;overflow-x:auto!important;}
  .admin-table{min-width:760px!important;}
}

@media(max-width:575.98px){
  .admin-wrap{padding:10px!important;}
  .admin-grid{grid-template-columns:1fr!important;gap:10px!important;}
  .admin-title{margin-bottom:12px!important;}
  .admin-title h1{font-size:1.75rem!important;}
  .admin-card{padding:14px!important;border-radius:15px!important;}
  .admin-card.kpi strong{font-size:1.65rem!important;}
  .admin-action-card{padding:12px!important;border-radius:14px!important;}
  .mini-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px!important;
  }
  .mini-actions>.quick-form,.mini-actions>form,.mini-actions>.admin-btn{width:100%;}
  .mini-actions .admin-btn{width:100%;min-height:44px;}
  .admin-stacked-form>.admin-btn,.admin-stacked-form>button{width:100%;}
  .admin-detail-grid .box strong{font-size:1.1rem!important;overflow-wrap:anywhere;}
  .pagination{flex-wrap:wrap;gap:4px;}
  .pagination .page-link{border-radius:8px!important;}
}

/* =========================================================
   AJUSTES PARA TELAS MUITO ESTREITAS
   ========================================================= */
@media(max-width:359.98px){
  :root{--flex-mobile-gutter:10px;}
  .gold-nav .navbar-brand strong{font-size:.88rem;}
  .top-actions>.d-flex,.mini-actions{grid-template-columns:1fr!important;}
  .hero-title,.co-title{font-size:2rem!important;}
  .modal-footer{grid-template-columns:1fr;}
}

/* Respeita usuários que reduziram animações no aparelho. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* Refinos finais de toque em telas pequenas. */
@media(max-width:767.98px){
  .form-control-sm,.form-select-sm{
    min-height:44px!important;
    padding:.55rem .7rem!important;
    font-size:16px!important;
  }
  footer a{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:.3rem .2rem;
  }
}