:root {

  --vtopo: 60px;
  --cor_cab: dodgerblue;  /* set js */
  --vtam_grid:300px;
  --menu_largura: 500px; /* largura inicial do menu */

}
body{

   xbackground-color: blue; 

    height: 100vh; /* garante que o gradiente ocupe toda a altura */
    margin: 0;     /* remove margens padrão */
    background: linear-gradient(to bottom, #ede9e9, #f0f0f0);
    background: linear-gradient(to bottom, #ffffff, #f5f5f5);
    color: #333; /* texto em cinza escuro para boa leitura */
    xfont-family: "Segoe UI", Arial, sans-serif;
}


/* onde fica o coteudo de todas as paginas */
.c_contem {
  position: relative;
  top: calc(var(--vtopo) + 0px); /* ✅ correto */ /* altura do topo + margem extra */
  margin-left: calc(var(--menu_largura));
  width: calc(99% - var(--menu_largura));
  xxxbackground-color:green;
  padding: 1rem;
  transition: margin-left 0.3s, width 0.3s;

}


 /* FORM  */

  h2 { 
   border-bottom: 2px solid #007bff;
   border-bottom: 1px solid #cbccce;
   padding-bottom: 10px; 
   color: #007bff;
   color:rgb(123, 125, 127);
   margin-top: 0; 
   font-family: 'Open Sans', sans-serif;
}

.rform{
   background-color:#FFFF;
   xbackground: linear-gradient(90deg, rgb(30, 32, 195) 0%, rgba(46, 46, 155, 0.962) 35%, rgba(5, 11, 77, 0.987) 100%);

   box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
   box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
   box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
   border-radius: 5px;
   background-color: rgb(245, 245, 245); 
   box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}

.c_titulo{
   color:rgb(123, 125, 127);
   margin-top: 0; 
   font-family: 'Open Sans', sans-serif;
   font-size:32px;
   padding-left: 15px;

   font-family: 'Inter', sans-serif;
   font-weight: 10; /* mais fino */
}
.c_titulo_sis{
   color:rgb(219, 144, 5);
   padding: 15px;
}

.rlabel{
   color:rgb(47, 46, 46);
   margin: 0%;
   font-size: 13px;
   xxfont-weight: bold; 
}

.redit{ 
   border: none;                     /* remove todas as bordas */
   border-bottom: 1px solid #007bff; /* linha azul fina no fundo */
   border-bottom: 1px solid #434446; /* linha azul fina no fundo */  
   border-bottom: 1px solid #a1a4a9; /* linha azul fina no fundo */
   border-radius: 0;                 /* sem cantos arredondados */
   outline: none;                    /* remove o contorno padrão */
   font-family: 'Inter', sans-serif; /* fonte moderna */
   font-weight: 500;                 /* levemente mais grossa */
   font-size: 16px;
   color: #333;
   background-color: transparent;    /* fundo limpo */
   transition: border-color 0.3s ease;
   margin-left: 0;                   /* sem margem lateral esquerda */
   padding-left: 0;    

}

.redit:focus {
   border-bottom-color: #0056b3;     /* azul mais escuro ao focar */
   background-color: transparent;   
}
/*   END FORM -----------------------------  */

/*  --------- GRRID -------------- */



        /* --- ⚓ GRID DE ITENS COM CABEÇALHO FIXO (STICKY) --- */
        .table-container { 
            margin-top: 15px; 
            background: #fff; 
            border: 1px solid #e3e6f0; 
            border-radius: 4px;
           xmax-height: 150px; /* Altura limite para forçar a rolagem vertical */
           max-height: var(--vtam_grid);        
           overflow-y: auto;  /* Habilita a barra de rolagem interna */
        }
        .crm-table { width: 100%; border-collapse: collapse; }
        
        /* O truque do cabeçalho fixo no scroll */
        .crm-table th { 
            position: sticky; 
            top: 0; 
            background: #f8f9fc; 
            padding: 10px; 
            border-bottom: 2px solid #e3e6f0; 
            text-align: left; 
            font-size: 14px;
            z-index: 10;
            cursor: pointer; /* Indica que é clicável para ordenação */
            user-select: none;
        }
        .crm-table th:hover { background: #eaecf4; }
        .crm-table td { padding: 10px; border-bottom: 1px solid #e3e6f0; font-size: 14px; }
        
        .linha-grid { cursor: pointer; transition: background-color 0.1s; }
        .linha-grid:hover { background-color: #f1f3f9; }
        
      /*  exemplo dias classes com o mesmo nome */
     .linha-grid.linha-selecionada { background-color: #ff00ae !important; color: white !important; font-weight: bold; }
        
       }
   

        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 1000; }
        .modal-box { background: white; padding: 25px; border-radius: 6px; width: 400px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); color: #333; }



/* end GRID -----------------------  */