/* V46 — ajustes globais de responsividade
   Mantém o layout desktop e melhora navegação, formulários, tabelas,
   modais, editor de carteira e prova em tablets e celulares. */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

::selection{
  background:rgba(201,162,39,.32);
  color:#fff;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(240,205,99,.72);
  outline-offset:3px;
}

img,canvas,video,svg{
  max-width:100%;
}

button,a,input,select,textarea{
  touch-action:manipulation;
}

@media (max-width:900px){
  body{
    max-width:100vw;
    overflow-x:hidden;
  }

  .page,.card,.box,.surface,.modal-box,.panel,.stage-card{
    max-width:100%;
  }

  .topbar,.header,.toolbar,.head-actions,.hero-actions,.panel-head,
  .section-head,.history-head,.preview-head,.stage-head,.stage-toolbar,
  .upload-row,.modal-actions{
    flex-wrap:wrap;
  }

  .nav{
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
  }

  .nav a{
    flex:0 0 auto;
  }

  .table-wrap{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  table{
    max-width:100%;
  }

  .modal{
    padding:14px !important;
  }

  .modal-box{
    width:min(100%,720px) !important;
    max-height:calc(100dvh - 28px);
    overflow:auto;
  }
}

@media (max-width:760px){
  body{
    padding-left:max(8px,env(safe-area-inset-left)) !important;
    padding-right:max(8px,env(safe-area-inset-right)) !important;
    padding-bottom:max(18px,env(safe-area-inset-bottom)) !important;
  }

  input,select,textarea{
    font-size:16px !important;
    max-width:100%;
  }

  button,.btn,.action,.row-btn,.upload-btn,.continue-btn,.logout,.back{
    min-height:44px;
  }

  .topbar,.header{
    width:100%;
  }

  .brand{
    min-width:0;
    max-width:100%;
  }

  .brand > div,.title-wrap,.heading,.photo-copy{
    min-width:0;
  }

  h1,h2,h3,.question,.q{
    overflow-wrap:anywhere;
  }

  .nav{
    display:flex !important;
    gap:8px !important;
    padding-bottom:4px;
  }

  .nav a{
    width:auto !important;
    min-height:44px !important;
    padding-left:14px !important;
    padding-right:14px !important;
    white-space:nowrap;
  }

  .stats,.summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .form-grid,.fields{
    grid-template-columns:1fr !important;
  }

  .field.full{
    grid-column:auto !important;
  }

  .actions{
    max-width:100%;
    flex-wrap:wrap;
  }

  .actions > button,.actions > a{
    flex:1 1 130px;
  }

  .search{
    width:100% !important;
    max-width:none !important;
  }

  .photo-preview,.preview-image,.candidate-preview img{
    max-width:100%;
  }

  .workflow,.grid{
    grid-template-columns:1fr !important;
  }

  .summary-grid{
    gap:9px !important;
  }

  .preview-shell,.stage-shell{
    min-height:280px !important;
  }

  .preview-body,.panel-body,.section-body,.modal-body,.stage-body{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .panel-head,.section-head,.history-head,.preview-head,.stage-head{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .modal-head{
    gap:10px;
  }

  .modal-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .modal-actions button{
    width:100%;
  }

  /* Tabelas administrativas viram cartões quando a página ainda não possui
     uma apresentação mobile própria. */
  body:not(.keep-mobile-table) .table-wrap table{
    min-width:0;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

@media (max-width:520px){
  .stats,.summary-grid{
    grid-template-columns:1fr !important;
  }

  .topbar,.header,.toolbar,.hero-actions,.head-actions{
    align-items:stretch !important;
  }

  .topbar .btn,.topbar .logout,.header .btn,
  .hero-actions .btn,.head-actions .btn{
    width:100%;
  }

  .eyebrow,.pill,.status-pill,.tag{
    max-width:100%;
    white-space:normal;
    text-align:center;
  }
}

/* Ajustes específicos da página pública de cadastro */
@media (max-width:760px){
  .form-layout{
    grid-template-columns:1fr !important;
  }

  .photo-block{
    display:block !important;
  }

  .photo-frame{
    width:100% !important;
    height:min(72vw,310px) !important;
    margin-top:12px !important;
  }

  .action-panel{
    grid-template-columns:1fr !important;
  }

  .continue-btn{
    width:100% !important;
    min-width:0 !important;
  }
}

/* Ajustes específicos da prova */
@media (max-width:760px){
  .exam-counters{
    grid-template-columns:1fr 1fr !important;
  }

  .exam-counters .counter,.exam-counters .timer{
    min-width:0 !important;
  }

  .navbar{
    position:sticky;
    bottom:max(0px,env(safe-area-inset-bottom));
    z-index:30;
    background:rgba(7,7,7,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
}

@media (max-width:430px){
  .exam-counters{
    grid-template-columns:1fr !important;
  }

  .question{
    font-size:21px !important;
  }

  .option{
    min-height:58px !important;
    padding:12px !important;
  }
}

/* Administração: no celular, tabelas complexas permanecem roláveis
   quando não possuem transformação em cards no CSS da própria página. */
@media (max-width:760px){
  .table-wrap table:not([data-mobile-cards]){
    width:max-content;
    min-width:680px;
  }

  .table-wrap table:not([data-mobile-cards]) th,
  .table-wrap table:not([data-mobile-cards]) td{
    white-space:normal;
  }

  /* O painel de candidatos já possui transformação em cards própria. */
  .page .table-wrap table[style*="min-width:0"]{
    min-width:0;
  }
}