/*
===============================================================================
Projeto......: Pointer Comunidade - Plataforma Web
Arquivo......: responsivo.css
Descrição....: Regras de responsividade do sistema.
Autor........: Alexandre / ChatGPT
Versão.......: 1.0.0
Data.........: 17/07/2026
===============================================================================
*/

/* ============================================================================
   CELULAR (MOBILE) - Telas menores que 768px
   ========================================================================== */
@media screen and (max-width: 767px) {

   /* Ajustes do Container Principal */
   main, .container {
      width: 100%;
      margin: 20px auto;
      padding: 0 15px;
      box-sizing: border-box;
   }

   /* Cabeçalho no fluxo normal (sem sobrepor conteúdo) */
   .cabecalho {
      margin-bottom: 20px;
   }

   .cabecalho h1, h1 {
      font-size: 22px;
      line-height: 1.3;
      margin-bottom: 8px;
   }

   .cabecalho h2, h2 {
      font-size: 13px;
      padding: 5px 14px;
      margin-top: 0;
      margin-bottom: 15px;
      letter-spacing: 0.5px;
   }

   /* Notificação do Cabeçalho */
   .notificacao-cabecalho {
      padding: 12px 14px;
      gap: 12px;
      align-items: flex-start;
   }

   .notificacao-icone {
      width: 26px;
      height: 26px;
      min-width: 26px;
      font-size: 14px;
      margin-top: 2px;
   }

   .notificacao-texto p {
      font-size: 13px;
      line-height: 1.45;
      padding: 0;
   }

   /* Formulário e Colunas */
   form {
      gap: 14px;
   }

   .linha {
      flex-direction: column;
      gap: 0;
   }

   .titulo-painel span:first-child {
      font-size: 15px;
   }

   /* Inputs e Selects - 16px evita auto-zoom no iOS/Safari */
   input,
   select,
   textarea {
      width: 100%;
      display: block;
      font-size: 16px;
      height: 46px;
   }

   /* Remove o comportamento do iOS de encolher o texto interno da data */
   input[type="date"]::-webkit-date-and-time-value {
      text-align: left;
      min-height: 44px;
      line-height: 44px;
   }

   /* Balão de Ajuda Objetivo no Mobile */
   .icone-ajuda:hover::after,
   .icone-ajuda:focus::after {
      left: -60px;
      right: auto;
      width: 260px;
      white-space: normal;
      transform: none;
      top: 120%;
   }

   /* Setinha do balão */
   .icone-ajuda:hover::before,
   .icone-ajuda:focus::before {
      left: 2px;
      right: auto;
      transform: none;
      top: 50%;
   }

   /* Telas de Revisão / Alertas */
   .revisao-icone {
      width: 65px;
      height: 65px;
      font-size: 32px;
      margin-bottom: 12px;
   }

   .revisao h3 {
      font-size: 18px;
   }

   .resumo-item {
      padding: 12px 14px;
      font-size: 14px;
   }

   .alerta-final {
      padding: 16px 14px;
   }

   /* Botões */
   .area-botoes {
      flex-direction: column;
      width: 100%;
   }

   button,
   .botao-salvar {
      width: 100%;
      max-width: 100%;
      height: 48px;
   }
   .cabecalho-conteudo {
      padding: 16px 14px;
   }
   
   .cabecalho-titulo-bar h1 {
      font-size: 18px;
   }
}

/* ============================================================================
   TABLET - Telas entre 768px e 1023px
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {

   main, .container {
      width: 100%;
      max-width: 720px;
      margin: 30px auto;
      padding: 0 20px;
   }

   .cabecalho h1, h1 {
      font-size: 26px;
   }

   .cabecalho h2, h2 {
      font-size: 14px;
   }

   /* Ajustes dos Tooltips em Tablets */
   .icone-ajuda:hover::after,
   .icone-ajuda:focus::after {
      left: auto;
      right: 0;
      transform: none;
      width: 240px;
      max-width: calc(100vw - 30px);
   }

   .icone-ajuda:hover::before,
   .icone-ajuda:focus::before {
      left: auto;
      right: 8px;
      transform: none;
   }
}

/* ============================================================================
   NOTEBOOK (1024px até 1279px)
   ========================================================================== */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
   main, .container {
      max-width: 860px;
   }
}

/* ============================================================================
   DESKTOP (1280px até 1599px)
   ========================================================================== */
@media screen and (min-width: 1280px) and (max-width: 1599px) {
   main, .container {
      max-width: 900px;
   }
}

/* ============================================================================
   MONITORES GRANDES (A partir de 1600px)
   ========================================================================== */
@media screen and (min-width: 1600px) {
   main, .container {
      max-width: 960px;
   }
}