/*==================================================================================*/
/*                         Bloco para definições de cores                           */
/*==================================================================================*/

/* Tema Padrão */
:root {
  --cor-1: #005495;         /* Cor principal nova background: #005495  */
  --cor-2: #1A82A0;  /* Cor intermediária entre a cor principal e a cor secundária #1A82A0 */
  --cor-3: #34b0ac;          /* Cor secundária */
  --cor-4: #6D6D6D;          /* Cinza escuro (texto) */
  --cor-5: #f7f7f7;          /* Cinza claro (borda ou fundo leve)  #f7f7f7; */
  --cor-6: #34b0ac;          /* Borda padrão  anterior #f5f5f5;    e essa cor está igualada a --cor-6   */
  --cor-7: #FFFFFF;          /* Branco (fundo ou texto claro) */

  --cor-77: #f7fafc;          /* cor fabricio #f7fafc;*/

  --cor-8: #F99C48;          /* CONTROLE DE PAGINAÇÃO */
  --cor-9: #000000;          /* letra padrão */

  --cor-11: #eeeeee;          /* circle*/

  --cor-71: #FFFFFF; /*  */
  --cor-41: #6D6D6D; /*  */

  --cor-43: #C3D6F1; /*  com para form-control ser aplicado no input para mais destaque */

  --cor-status-green: #749918;
  --cor-status-yellow: #faa91e;
  --cor-status-red: #FF0000;

  --scrollbar-color: #f0f5fa;       /* cor inspirada na cor definida por fabricio  #f7fafc */
  --scrollbar-color-dark: #282828;  /* dark cor equivalente com a inspiração do fabricio #242424*/

  --cor-rgba-1: rgba(0, 0, 0, 0.1);
  --cor-rgba-2: rgba(0, 0, 0, 0.2);
  --cor-rgba-8: rgba(0, 0, 0, 1);

  --cor-rgba-3: rgba(0, 84, 149, 1);       /* usado no tooltip         cor anterior --cor-rgba-3: rgba(71, 44, 44, 1);             */
  --cor-rgba-7: rgba(0, 84, 149, 0.4);       /* usado no tooltip claro  cor anterior --cor-rgba-7: rgba(71, 44, 44, .4);       */

  --cor-rgba-4: rgba(162, 115, 115, 1);     /* Cor do Chevron*/
  --Xcor-rgba-5: rgba(119, 73, 73, 0.3);    /* marcador menu base de #774949* e chevron */
  --cor-rgba-5: rgba(73, 119, 119, 0.3);

  --Xcor-rgba-51: rgba(119, 73, 73, 0.08);    /* marcador menu base de #774949* e chevron */
  --cor-rgba-51: rgba(73, 119, 119, 0.08);

  --Xcor-rgba-6: rgba(119, 73, 73, 0.05);    /* marcador menu base de #774949* e chevron */
  --cor-rgba-6: rgba(73, 119, 119, 0.05);


  --cor-ficha-destaque1: rgb(232 95 49 / 30%);   /*#FEF5E8;*/ 
  --cor-ficha-destaque1-check: rgb(232 95 49 / 10%);
  --cor-ficha-destaque2: rgb(137 179 49 / 40%); /*#FFFEED;*/ 
  --cor-ficha-destaque3: rgb(164 194 168 / 60%);   /*#EAF6EA;*/ 
  --cor-ficha-destaque4: rgb(0 212 255 / 15%);   /*#ECEFFC;*/ 
  --cor-ficha-destaque5-macho: rgb(58 124 165 / 30%);   /*#ECEFFC;*/ 
  --cor-ficha-destaque5-femea:  rgba(114, 73, 128, 0.23);   /*#EDE7F4;*/ 
  --cor-ficha-destaque6: rgb(139 69 19 / 30%);   /*#F5ECFE;*/
  
  --cor-ficha-destaque1-dark: rgb(101 71 60 / 30%); /* #2D2D2D; #332000;   */
  --cor-ficha-destaque2-dark: rgb(59 79 59 / 60%);/* #2D2D2D; #333300;   */ 
  --cor-ficha-destaque3-dark: rgb(42 69 64 / 60%);/* #2D2D2D; #002200;   */ 
  --cor-ficha-destaque4-dark: rgb(2 134 160 / 15%);/* #2D2D2D; #000033;   */ 
  --cor-ficha-destaque5-macho-dark: rgb(31 42 78 / 60%); /* #2D2D2D; #1A0033;   */ 
  --cor-ficha-destaque5-femea-dark: rgb(57 41 63 / 60%);/* #2D2D2D; #1A0033;   */ 
  --cor-ficha-destaque6-dark: rgb(74 41 0 / 60%);/* #2D2D2D; #290033   */;


  /*Radius padrão*/
  --radius-default: 4px;
  --radius-default-borda: 10px;

}

/* Tema Escuro */
.dark-theme {
  --dark-cor-1: #34b0ac;     /* Cor principal adaptada fornecida pela thais #906659;*/
  --dark-cor-1-alt: #ece1e1; 
  --dark-cor-2: #1A82A0;     /* Versão escura da cor intermediária */
  --dark-cor-3: #005495;     /* Cor secundária mais escura */
  --dark-cor-4: #CFCFCF;     /* Cinza claro adaptado para texto no tema escuro */
  --dark-cor-5: #2D2D2D;     /* Fundo escuro leve (paridade com cinza claro) */
  --dark-cor-6: #3D3D3D;     /* Cor de borda escura */
  --dark-cor-7: #1A1A1A;     /* Fundo escuro profundo */
  --dark-cor-8: #ffffff;   /* cor letra padrão */

  --dark-cor-9: #6D6D6D; 
  --dark-cor-10: #1c1c1c;
  --dark-cor-11: #504646;
  --dark-cor-12: #242222;

  --dark-cor-rgba-1: rgba(255, 255, 255, 0.2);
  --dark-cor-rgba-2: rgba(255, 255, 255, 0.1);

}
/*********************************/
/*  teste color e background-color geral*/
/*********************************/
.preenchimento-menu{
  height: 84.8vh;    /* 85.6vh */
}

.bg_btncolor{
  background-color: var(--cor-1);
}
.dark-theme .bg_btncolor{
  background-color: var(--dark-cor-1);
}

.txtcolor{
  color: var(--cor-4);                             /* --cor-4 */
}
.bgcolor {
  background-color: var(--cor-77);                  /* --cor-7 */
}
.dark-theme .bgcolor {
  background-color: var(--dark-cor-10) !important;  /* --dark-cor-7 */
}
.dark-theme .txtcolor{
  color: var(--dark-cor-8);                        /* --dark-cor-8 */
}
/* index */
.txtcolor-alt{
  color: var(--cor-4);                             /* --cor-4 */
}
.bgcolor-alt {
  background-color: var(--cor-7);                  /* --cor-7 */
}
.dark-theme .bgcolor-alt {
  background-color: var(--dark-cor-12) !important; /* --dark-cor-12 */
}
.dark-theme .txtcolor-alt{
  color: var(--dark-cor-10);                       /* --dark-cor-10 */
}
.bgcolor-circle{
  background-color: var(--cor-11);                 /* --cor-11 */
}
.dark-theme .bgcolor-circle{
  background-color: var(--dark-cor-10);
}
.svgcolor-white{      /* cor das linhas do icone*/
  /* definição do filtro para ICONE baseado no padrões de cores HEX: #FFFFFF*/
  filter: brightness(0) saturate(100%) invert(100%);
}
.svgcolor{      /* cor das linhas do icone*/
  /* definição do filtro para ICONE baseado no padrões de cores HEX: #000000*/
  filter: brightness(0) saturate(100%);
}
.dark-theme .svgcolor{
  /* definição do filtro para ICONE baseado nos padrões de cores HEX: #856c6a HSL: 4 11 47 100% e CSS: rgb(133, 108, 106)*/
  /* filter: brightness(0) saturate(100%) invert(81%) sepia(23%) saturate(349%) hue-rotate(340deg) brightness(90%) contrast(85%); */
  filter: brightness(0) saturate(100%) invert(100%);
}
/*==================================================================================*/
/*          alertas - está sendo aplicado tratamento para desaparecimento em        */
/*          ./public/js/custom.js todos os alerts BOOTSTRAP exceto o dissmis        */
/*==================================================================================*/
/* mensagem de sucesso     -alt */
.alert-success {
  background-color: var(--cor-rgba-6) !important; /* Cor terracota */
  color: var(--cor-41) !important; /* Cor do texto */
  border-color: var(--cor-rgba-6) !important;
}
/* Tema Escuro*/
.dark-theme .alert-success {
background-color: var(--dark-cor-3) !important; /* Cor terracota adaptada */
color: var(--dark-cor-7) !important; /* Cor do texto no modo dark */
border-color: var(--dark-cor-3) !important;
}
/* fimm teste background-color geral*/
/*==================================================================================*/
/*               Estilo para STATUS DE ITENS DE LISTAGEM FORELSE EM VIEW --         */
/*==================================================================================*/
.status-green {
  background-color: var(--cor-status-green);
}
.status-yellow {
  background-color: var(--cor-status-yellow);
}
.status-red {
  background-color: var(--cor-status-red);
}

/*==================================================================================*/
/*               Estilo para ITENS DE LISTAGEM FORELSE EM VIEW --                   */
/*==================================================================================*/
.lsit-group {
  margin-left: 12px;
  border-radius: var(--radius-default);
  background-color: var(--cor-7);
}
.list-group-item {
  transition: background-color 0s, box-shadow 0s; /* Suaviza a transição das mudanças */
  border: none !important;
  margin-bottom: 0px !important;
  margin-left: 6px;
  margin-right: 6px;
  margin-top: 0px;
  padding: 8px !important;
  border-radius: var(--radius-default) !important;
  background-color: var(--cor-7) !important;

}
.list-group-item:hover {
  background-color: var(--cor-rgba-6) !important;  /* Cor de fundo ao passar o mouse (Amarelo) */
  border-radius: var(--radius-default) !important;
  /*box-shadow: 0 4px 8px var(--cor-rgba-5) !important;  /* Sombra vermelha ao passar o mouse */
}
.dark-theme .list-group-item:hover{
  background-color: var(--cor-rgba-6) !important;  /* Cor de fundo ao passar o mouse (Amarelo) */
  border-radius: var(--radius-default) !important;
  color: var(--dark-cor-8) !important;
  /*box-shadow: 0 4px 8px var(--cor-rgba-5) !important;  /* Sombra vermelha ao passar o mouse */
}

/*==================================================================================*/
/*               Estilo para barra de rolagem -- para uso no MENU                   */
/*==================================================================================*/
/* Estilo para o contêiner rolável */
/*==================================================================================*/
/*               Estilo para barra de rolagem -- para uso no MENU                   */
/*==================================================================================*/
/* Estilo para o contêiner rolável */
.scrollable-container {
  overflow-y: auto; /* Permite rolagem vertical */
  overflow-x: hidden; /* Oculta a barra de rolagem horizontal */

  /* Firefox */
  scrollbar-color: var(--scrollbar-color) transparent; /* Polegar colorido, trilho transparente */
  scrollbar-width: thin; /* Deixa a barra mais fina */
}

/* Barra de rolagem (Chrome, Edge, Safari) */
.scrollable-container::-webkit-scrollbar {
  /*width: 1px !important; /* Mantém a barra de rolagem extremamente fina */
  width: 2px !important; /* Força um tamanho pequeno */
  max-width: 2px; /* Garante que o tamanho não aumente */
  min-width: 2px; /* Evita que fique maior no Chrome */
}

/* Trilho da barra de rolagem (Chrome) */
.scrollable-container::-webkit-scrollbar-track {
  background: transparent !important; /* Oculta o trilho */
  border-radius: 2px;
}

/* Esconde o espaço do trilho no Chrome */
.scrollable-container::-webkit-scrollbar-track-piece {
  display: none;
}

/* Polegar da barra de rolagem (Chrome) */
.scrollable-container::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
  border-radius: 2px;
  border: none; /* Remove borda para evitar espessura extra */
  width: 2px !important; /* Força um tamanho pequeno */
  max-width: 2px; /* Garante que o tamanho não aumente */
  min-width: 2px; /* Evita que fique maior no Chrome */
}

/* Quando passar o mouse sobre a barra, aumenta a opacidade */
.scrollable-container::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-color);
  /*opacity: 0.8;  /*Aumenta a visibilidade ao passar o mouse */
}
.dark-theme .scrollable-container {
  scrollbar-color: var(--scrollbar-color-dark) transparent; /* Polegar colorido, trilho transparente */

}
.dark-theme .scrollable-container::-webkit-scrollbar-thumb,
.dark-theme .scrollable-container::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-color-dark);

}
/*==================================================================================*/
/*           estilo hover genérico para uso no MENU para seleção dos itens          */
/*==================================================================================*/
.hover-menu:hover {
  background-color: var(--cor-rgba-5); /* Altera a cor de fundo para o hover */
  _cursor: pointer; /* Indica interatividade */

}
/*==================================================================================*/
/*                         alteração primitiva body                                 */
/*==================================================================================*/
body {
  font-family: 'Inter', sans-serif !important;
  background-color: var(--cor-77) !important;
  height: 100%;

}
/* Tema Escuro */
body.dark-theme{
  background-color: var(--dark-cor-10) !important; /* Fundo para o tema escuro */

}
/*==================================================================================*/
/*                                 definições para MODAL de alternancia             */
/*                                 de views do PANEL CAVALOS                  mv    */
/*==================================================================================*/ 
.modal-pasta1 {
  border: 0px solid var(--cor-rgba-5); /* Usa a cor já definida */
  border-radius: var(--radius-default-borda) !important;
  background-color: var(--cor-ficha-destaque1) ;
  padding: 16px; /* Espaçamento interno similar ao p-3 do Bootstrap */
  margin-top: 0px;
  margin-bottom: 8px;
}
.dark-theme .modal-pasta1 {
  _border: 0.5px solid var(--dark-cor-12) !important;
  background-color: var(--cor-ficha-destaque1-dark);

}

.modal-pasta2 {
  border: 0px solid var(--cor-rgba-5); /* Usa a cor já definida */
  border-radius: var(--radius-default-borda) !important;
  background-color: var(--cor-ficha-destaque2) ;
  padding: 16px; /* Espaçamento interno similar ao p-3 do Bootstrap */
  margin-top: 0px;
  margin-bottom: 8px;
}
.dark-theme .modal-pasta2 {
  _border: 0.5px solid var(--dark-cor-12) !important;
  background-color: var(--cor-ficha-destaque2-dark) !important;

}

/*==================================================================================*/
/*                                 definições para pasta de alternancia             */
/*                                 de views do PANEL CAVALOS                  mv    */
/*==================================================================================*/ 
.borda-pasta1 {
  border: 0px solid var(--cor-rgba-5); /* Usa a cor já definida */
  border-radius: var(--radius-default-borda) !important;
  background-color: var(--cor-ficha-destaque1);
  padding: 16px; /* Espaçamento interno similar ao p-3 do Bootstrap */
  margin-top: 0px;
  margin-bottom: 8px;
}
.dark-theme .borda-pasta1 {
  _border: 0.5px solid var(--dark-cor-12) !important;
  background-color: var(--cor-ficha-destaque1-dark);

}
.borda-pasta2 {
  border: 0px solid var(--cor-rgba-5); /* Usa a cor já definida */
  border-radius: var(--radius-default-borda) !important;
  background-color: var(--cor-ficha-destaque2);
  padding: 16px; /* Espaçamento interno similar ao p-3 do Bootstrap */
  margin-top: -1px;
  margin-bottom: 8px;
}
.dark-theme .borda-pasta2 {
  _border: 0.5px solid var(--dark-cor-12) !important;
  background-color: var(--cor-ficha-destaque2-dark);

}
.borda-pasta3 {
  border: 0px solid var(--cor-rgba-5); /* Usa a cor já definida */
  border-radius: var(--radius-default-borda) !important;
  background-color: var(--cor-ficha-destaque3);
  padding: 16px; /* Espaçamento interno similar ao p-3 do Bootstrap */
  margin-top: -1px;
  margin-bottom: 8px;
}
.dark-theme .borda-pasta3 {
  _border: 0.5px solid var(--dark-cor-12) !important;
  background-color: var(--cor-ficha-destaque3-dark);

}
.borda-pasta4 {
  border: 0px solid var(--cor-rgba-5); /* Usa a cor já definida */
  border-radius: var(--radius-default-borda) !important;
  background-color: var(--cor-ficha-destaque4);
  padding: 16px; /* Espaçamento interno similar ao p-3 do Bootstrap */
  margin-top: -1px;
  margin-bottom: 8px;
}
.dark-theme .borda-pasta4 {
  _border: 0.5px solid var(--dark-cor-12) !important;
  background-color: var(--cor-ficha-destaque4-dark);

}
.borda-pasta5-femea {
  border: 0px solid var(--cor-rgba-5); /* Usa a cor já definida */
  border-radius: var(--radius-default-borda) !important;
  background-color: var(--cor-ficha-destaque5-femea);
  padding: 16px; /* Espaçamento interno similar ao p-3 do Bootstrap */
  margin-top: -1px;
  margin-bottom: 8px;
}
.dark-theme .borda-pasta5-femea {
  _border: 0.5px solid var(--dark-cor-12) !important;
  background-color: var(--cor-ficha-destaque5-femea-dark);

}
.borda-pasta5-macho {
  border: 0px solid var(--cor-rgba-5); /* Usa a cor já definida */
  border-radius: var(--radius-default-borda) !important;
  background-color: var(--cor-ficha-destaque5-macho);
  padding: 16px; /* Espaçamento interno similar ao p-3 do Bootstrap */
  margin-top: -1px;
  margin-bottom: 8px;
}
.dark-theme .borda-pasta5-macho {
  _border: 0.5px solid var(--dark-cor-12) !important;
  background-color: var(--cor-ficha-destaque5-macho-dark);

}
.borda-pasta6 {
  border: 0px solid var(--cor-rgba-5); /* Usa a cor já definida */
  border-radius: var(--radius-default-borda) !important;
  background-color: var(--cor-ficha-destaque6);
  padding: 16px; /* Espaçamento interno similar ao p-3 do Bootstrap */
  margin-top: -1px;
  margin-bottom: 8px;
}
.dark-theme .borda-pasta6 {
  _border: 0.5px solid var(--dark-cor-12) !important;
  background-color: var(--cor-ficha-destaque6-dark);
}
.btn-ficha{
  color: var(--cor-4) !important;
  background: var(--cor-77) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 16.94px !important;
  text-underline-position: from-font !important;
  text-decoration-skip-ink: none !important;
  height: 44px !important;
  border: 0.5px solid var(--cor-5) !important;

  border-top-left-radius: var(--radius-default) !important;  /* Ângulo reto no topo esquerdo */
  border-top-right-radius: var(--radius-default) !important; /* Ângulo reto no topo direito */
  border-bottom-left-radius: 0 !important;  /* Arredondado na parte inferior esquerda */
  border-bottom-right-radius: 0 !important; /* Arredondado na parte inferior direita */

  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1); /* Sombra na parte superior */
  box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.1); /* Sombra na direita */
  box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.1); /* Sombra na esquerda */
}
.dark-theme .btn-ficha{
  color: var(--cor-4) !important;
  background: var(--dark-cor-10) !important;
  border: 0.5px solid var(--dark-cor-12) !important;

}

.btn-ficha-destaque1{
  color: var(--cor-1)!important;
  background-color: var(--cor-ficha-destaque1) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 26.94px !important;
  text-underline-position: from-font !important;
  text-decoration-skip-ink: none !important;
  height: 44px !important;
  _border: 0.5px solid var(--cor-5) !important;

  border-top-left-radius: var(--radius-default) !important;  /* Ângulo reto no topo esquerdo */
  border-top-right-radius: var(--radius-default) !important; /* Ângulo reto no topo direito */
  border-bottom-left-radius: 0 !important;  /* Arredondado na parte inferior esquerda */
  border-bottom-right-radius: 0 !important; /* Arredondado na parte inferior direita */

  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1), /* Sombra superior */
  -4px 0px 4px -2px rgba(0, 0, 0, 0.1); /* Sombra esquerda */


}
.dark-theme .btn-ficha-destaque1{
  color: var(--dark-cor-1-alt)!important;         /*var(--dark-cor-1)!important;          /* --dark-cor-8 */
  _background-color: var(--dark-cor-12) !important; /* --dark-cor-12 */
  background-color: var(--cor-ficha-destaque1-dark) !important;
  box-shadow: none !important;
  border: 0.5px solid var(--dark-cor-12) !important;
}
.btn-ficha-destaque2{
  color: var(--cor-1)!important;
  background-color: var(--cor-ficha-destaque2) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 26.94px !important;
  text-underline-position: from-font !important;
  text-decoration-skip-ink: none !important;
  height: 44px !important;
  _border: 0.5px solid var(--cor-5) !important;

  border-top-left-radius: var(--radius-default) !important;  /* Ângulo reto no topo esquerdo */
  border-top-right-radius: var(--radius-default) !important; /* Ângulo reto no topo direito */
  border-bottom-left-radius: 0 !important;  /* Arredondado na parte inferior esquerda */
  border-bottom-right-radius: 0 !important; /* Arredondado na parte inferior direita */

  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1), /* Sombra superior */
  -4px 0px 4px -2px rgba(0, 0, 0, 0.1); /* Sombra esquerda */

}
.dark-theme .btn-ficha-destaque2{
  color: var(--dark-cor-1-alt)!important;          /* --dark-cor-8 */
  _background-color: var(--dark-cor-12) !important; /* --dark-cor-12 */
  background-color: var(--cor-ficha-destaque2-dark) !important;
  box-shadow: none !important;
  border: 0.5px solid var(--dark-cor-12) !important;
}
.btn-ficha-destaque3{
  color: var(--cor-1)!important;
  background-color: var(--cor-ficha-destaque3) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 26.94px !important;
  text-underline-position: from-font !important;
  text-decoration-skip-ink: none !important;
  height: 44px !important;
  _border: 0.5px solid var(--cor-5) !important;

  border-top-left-radius: var(--radius-default) !important;  /* Ângulo reto no topo esquerdo */
  border-top-right-radius: var(--radius-default) !important; /* Ângulo reto no topo direito */
  border-bottom-left-radius: 0 !important;  /* Arredondado na parte inferior esquerda */
  border-bottom-right-radius: 0 !important; /* Arredondado na parte inferior direita */

  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1), /* Sombra superior */
  -4px 0px 4px -2px rgba(0, 0, 0, 0.1); /* Sombra esquerda */

}
.dark-theme .btn-ficha-destaque3{
  color: var(--dark-cor-1-alt)!important;          /* --dark-cor-8 */
  _background-color: var(--dark-cor-12) !important; /* --dark-cor-12 */
  background-color: var(--cor-ficha-destaque3-dark) !important;
  box-shadow: none !important;
  border: 0.5px solid var(--dark-cor-12) !important;
}
.btn-ficha-destaque4{
  color: var(--cor-1)!important;
  background-color: var(--cor-ficha-destaque4) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 26.94px !important;
  text-underline-position: from-font !important;
  text-decoration-skip-ink: none !important;
  height: 44px !important;
  _border: 0.5px solid var(--cor-5) !important;

  border-top-left-radius: var(--radius-default) !important;  /* Ângulo reto no topo esquerdo */
  border-top-right-radius: var(--radius-default) !important; /* Ângulo reto no topo direito */
  border-bottom-left-radius: 0 !important;  /* Arredondado na parte inferior esquerda */
  border-bottom-right-radius: 0 !important; /* Arredondado na parte inferior direita */

  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1), /* Sombra superior */
  -4px 0px 4px -2px rgba(0, 0, 0, 0.1); /* Sombra esquerda */

}
.dark-theme .btn-ficha-destaque4{
  color: var(--dark-cor-1-alt)!important;          /* --dark-cor-8 */
  _background-color: var(--dark-cor-12) !important; /* --dark-cor-12 */
  background-color: var(--cor-ficha-destaque4-dark) !important;
  box-shadow: none !important;
  border: 0.5px solid var(--dark-cor-12) !important;
}
.btn-ficha-destaque5-femea{
  color: var(--cor-1)!important;
  background-color: var(--cor-ficha-destaque5-femea) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 26.94px !important;
  text-underline-position: from-font !important;
  text-decoration-skip-ink: none !important;
  height: 44px !important;
  _border: 0.5px solid var(--cor-5) !important;

  border-top-left-radius: var(--radius-default) !important;  /* Ângulo reto no topo esquerdo */
  border-top-right-radius: var(--radius-default) !important; /* Ângulo reto no topo direito */
  border-bottom-left-radius: 0 !important;  /* Arredondado na parte inferior esquerda */
  border-bottom-right-radius: 0 !important; /* Arredondado na parte inferior direita */

  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1), /* Sombra superior */
  -4px 0px 4px -2px rgba(0, 0, 0, 0.1); /* Sombra esquerda */

}
.dark-theme .btn-ficha-destaque5-femea{
  color: var(--dark-cor-1-alt)!important;          /* --dark-cor-8 */
  _background-color: var(--dark-cor-12) !important; /* --dark-cor-12 */
  background-color: var(--cor-ficha-destaque5-femea-dark) !important;
  box-shadow: none !important;
  border: 0.5px solid var(--dark-cor-12) !important;
}

.btn-ficha-destaque5-macho{
  color: var(--cor-1)!important;
  background-color: var(--cor-ficha-destaque5-macho) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 26.94px !important;
  text-underline-position: from-font !important;
  text-decoration-skip-ink: none !important;
  height: 44px !important;
  _border: 0.5px solid var(--cor-5) !important;

  border-top-left-radius: var(--radius-default) !important;  /* Ângulo reto no topo esquerdo */
  border-top-right-radius: var(--radius-default) !important; /* Ângulo reto no topo direito */
  border-bottom-left-radius: 0 !important;  /* Arredondado na parte inferior esquerda */
  border-bottom-right-radius: 0 !important; /* Arredondado na parte inferior direita */

  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1), /* Sombra superior */
  -4px 0px 4px -2px rgba(0, 0, 0, 0.1); /* Sombra esquerda */

}
.dark-theme .btn-ficha-destaque5-macho{
  color: var(--dark-cor-1-alt)!important;          /* --dark-cor-8 */
  _background-color: var(--dark-cor-12) !important; /* --dark-cor-12 */
  background-color: var(--cor-ficha-destaque5-macho-dark) !important;
  box-shadow: none !important;
  border: 0.5px solid var(--dark-cor-12) !important;
}


.btn-ficha-destaque6{
  color: var(--cor-1)!important;
  background-color: var(--cor-ficha-destaque6) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 26.94px !important;
  text-underline-position: from-font !important;
  text-decoration-skip-ink: none !important;
  height: 44px !important;
  _border: 0.5px solid var(--cor-5) !important;

  border-top-left-radius: var(--radius-default) !important;  /* Ângulo reto no topo esquerdo */
  border-top-right-radius: var(--radius-default) !important; /* Ângulo reto no topo direito */
  border-bottom-left-radius: 0 !important;  /* Arredondado na parte inferior esquerda */
  border-bottom-right-radius: 0 !important; /* Arredondado na parte inferior direita */

  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1), /* Sombra superior */
  -4px 0px 4px -2px rgba(0, 0, 0, 0.1); /* Sombra esquerda */

}
.dark-theme .btn-ficha-destaque6{
  color: var(--dark-cor-1-alt)!important;          /* --dark-cor-8 */
  _background-color: var(--dark-cor-12) !important; /* --dark-cor-12 */
  background-color: var(--cor-ficha-destaque6-dark) !important;
  box-shadow: none !important;
  border: 0.5px solid var(--dark-cor-12) !important;
}

/*==================================================================================*/
/*                                 botão primary                                   */
/*==================================================================================*/
/*defição para o botão avaliação geral*/
.btn-geral,
.btn-geral:active,
.btn-geral:focus,
.btn-geral:focus-visible {
    color: var(--dark-cor-7) !important; /* Cor do texto */
    background-color: var(--cor-ficha-destaque1) !important; /* Cor de fundo */
    border-color: var(--cor-ficha-destaque1) !important; /* Cor da borda */
    min-width: 100px !important; /* Largura mínima */
    min-height: 44px !important; /* Altura máxima */
    text-align: center !important;
    font-size: 14px !important;
    border-radius: var(--radius-default) !important;
}
/* estilo ao passar o mouse */
.btn-geral:hover {
  background-color: var(--cor-ficha-destaque1-dark) !important; /* Cor de fundo mais clara */
  border-color: var(--cor-ficha-destaque1-dark) !important; /* Borda combinando */
  text-decoration: none !important;
}
/* Tema Escuro*/
.dark-theme .btn-geral,
.dark-theme .btn-geral:active,
.dark-theme .btn-geral:focus,
.dark-theme .btn-geral:focus-visible {
    color: var(--cor-7) !important; /* Cor do texto */
    background-color: var(--cor-ficha-destaque1-dark) !important; /* Cor de fundo */
    border-color: var(--cor-ficha-destaque1-dark) !important; /* Cor da borda */
}

/*defição para o botão primario*/
.btn-primary,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible {
    color: var(--cor-7) !important; /* Cor do texto */
    background-color: var(--cor-1) !important; /* Cor de fundo */
    border-color: var(--cor-1) !important; /* Cor da borda */
    min-width: 100px !important; /* Largura mínima */
    min-height: 44px !important; /* Altura máxima */
    text-align: center !important;
    font-size: 14px !important;
    border-radius: var(--radius-default) !important;
}
/* estilo ao passar o mouse */
.btn-primary:hover {
  background-color: var(--cor-2) !important; /* Cor de fundo mais clara */
  border-color: var(--cor-2) !important; /* Borda combinando */
  text-decoration: none !important;
}
/* Tema Escuro*/
.dark-theme .btn-primary,
.dark-theme .btn-primary:active,
.dark-theme .btn-primary:focus,
.dark-theme .btn-primary:focus-visible {
    color: var(--dark-cor-7) !important; /* Cor do texto */
    background-color: var(--dark-cor-1) !important; /* Cor de fundo */
    border-color: var(--dark-cor-1) !important; /* Cor da borda */
}

.dark-theme .btn-primary:hover {
    background-color: var(--dark-cor-2) !important; /* Cor de fundo mais clara */
    border-color: var(--dark-cor-2) !important; /* Borda combinando */
    text-decoration: none !important;
}
/*==================================================================================*/
/*                                 botão secondary                                  */
/*==================================================================================*/
/* botão secundário */
.btn-secondary,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:focus-visible {
  color: var(--cor-7) !important; /* Cor do texto */
  background-color: var(--cor-3) !important; /* Cor de fundo */
  border-color: var(--cor-3) !important; /* Cor da borda */
  min-width: 100px !important; /* Largura mínima */
  min-height: 44px !important; /* Altura máxima */
  text-align: center !important;
  font-size: 14px !important;
  border-radius: var(--radius-default) !important;

}
/* estilo ao passar o mouse */
.btn-secondary:hover {
  background-color: var(--cor-2) !important; /* Cor de fundo mais clara */
  border-color: var(--cor-2) !important; /* Borda combinando */
  text-decoration: none !important;
}
/* Tema Escuro*/
.dark-theme .btn-secondary,
.dark-theme .btn-secondary:active,
.dark-theme .btn-secondary:focus,
.dark-theme .btn-secondary:focus-visible {
  color: var(--dark-cor-7) !important;
  background-color: var(--dark-cor-3) !important;
  border-color: var(--dark-cor-3) !important;
}

.dark-theme .btn-secondary:hover {
  background-color: var(--dark-cor-2) !important;
  border-color: var(--dark-cor-2) !important;
}
/*==================================================================================*/
/*                                 botão danger                                     */
/*==================================================================================*/
/* botão secundário */
.btn-danger,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:focus-visible {
  /*color: var(--cor-7) !important; /* Cor do texto */
  /*background-color: var(--cor-3) !important; /* Cor de fundo */
  /*border-color: var(--cor-3) !important; /* Cor da borda */
  min-width: 100px !important; /* Largura mínima */
  min-height: 44px !important; /* Altura máxima */
  text-align: center !important;
  font-size: 14px !important;
  border-radius: var(--radius-default) !important;

}
/* estilo ao passar o mouse */
.btn-danger:hover {
  /*background-color: var(--cor-2) !important; /* Cor de fundo mais clara */
  /*border-color: var(--cor-2) !important; /* Borda combinando */
  text-decoration: none !important;
}
/* Tema Escuro*/
.dark-theme .btn-danger,
.dark-theme .btn-danger:active,
.dark-theme .btn-danger:focus,
.dark-theme .btn-danger:focus-visible {
  /*color: var(--dark-cor-7) !important;
  background-color: var(--dark-cor-3) !important;
  border-color: var(--dark-cor-3) !important; */
}

.dark-theme .btn-danger:hover {
  /*background-color: var(--dark-cor-2) !important;
  border-color: var(--dark-cor-2) !important; */
}
/*==================================================================================*/
/*                                 botão warning                                    */
/*==================================================================================*/
/* botão secundário */
.btn-light,
.btn-light:active,
.btn-light:focus,
.btn-light:focus-visible {
  /*color: var(--cor-7) !important; /* Cor do texto */
  background-color: var(--cor-4) !important;  /* Cor de fundo */
  border-color: var(--cor-4) !important; /* Cor da borda */
  color:#3D3D3D !important;   /*     */
  min-width: 100px !important; /* Largura mínima */
  min-height: 44px !important; /* Altura máxima */
  text-align: center !important;
  font-size: 14px !important;
  border-radius: var(--radius-default) !important;

}
/* estilo ao passar o mouse */
.btn-light:hover {
  background-color: var(--cor-4) !important; /* Cor de fundo mais clara */
  border-color: var(--cor-4) !important; /* Borda combinando */
  text-decoration: none !important;
}
/* Tema Escuro*/
.dark-theme .btn-light,
.dark-theme .btn-light:active,
.dark-theme .btn-light:focus,
.dark-theme .btn-light:focus-visible {
 /* color: var(--dark-cor-7) !important;
  background-color: var(--dark-cor-3) !important;
  border-color: var(--dark-cor-3) !important; */
}
.dark-theme .btn-light:hover {
/*  background-color: var(--dark-cor-2) !important;
  border-color: var(--dark-cor-2) !important; */
}

/*==================================================================================*/
/*          definição para margens para ajuste fino                                 */
/*                     tamanho:  1px                                                */
/*==================================================================================*/
/* 0.0625rem = 1px*/
.mt-1px {
  margin-top: 0.0625rem !important; 
}
/* mensagem top*/
.mb-1px {
  margin-bottom: 0.0625rem !important;
}
/* mensagem start*/
.ms-1px {
  margin-left: 0.0625rem !important;
}
/* mensagem top*/
.me-1px {
  margin-right: 0.0625rem !important;
}



/*==================================================================================*/
/*                                 navbar para welcome                              */
/*==================================================================================*/
/* Defina a cor terracota para a navbar */
.navbar-terracota {
    background-color: var(--cor-1) !important; /* Cor terracota */
    color: var(--cor-7) !important; /* Texto branco */

}
.navbar-terracota .nav-link {
    color: var(--cor-7) !important;
}
.navbar-terracota .nav-link:hover {
    color: var(--cor-7) !important; /* Opcional: cor mais clara no hover */
}
.dropdown-menu {
  background-color: var(--cor-3) !important; /* Cor de fundo do submenu */
  border: none !important; /* Remove borda padrão, se necessário */
}
.dropdown-menu .dropdown-item {
  color: var(--cor-7) !important; /* Cor do texto dos itens do submenu */
  padding: 0.5rem 1rem; /* Ajuste de espaçamento */
  transition: background-color 0.3s ease-in-out; /* Transição suave para hover */
}
.dropdown-menu .dropdown-item:hover {
  background-color: var(--cor-2) !important; /* Cor de fundo ao passar o mouse */
  color: var(--cor-7) !important; /* Cor do texto ao passar o mouse */
}
/* Tema Escuro*/
.dark-theme .navbar-terracota_ {
  background-color: var(--dark-cor-4) !important; /* Cor terracota adaptada */
  color: var(--dark-cor-7) !important; /* Texto branco */
}

.dark-theme .navbar-terracota_ .nav-link {
  color: var(--dark-cor-4) !important; /* Texto adaptado ao tema escuro */
}

.dark-theme .navbar-terracota_ .nav-link:hover {
  color: var(--dark-cor-5) !important; /* Cor mais clara no hover */
}

.dark-theme .dropdown-menu {
  background-color: var(--dark-cor-3) !important; /* Cor de fundo do submenu no modo dark */
}

.dark-theme .dropdown-menu .dropdown-item {
  color: var(--dark-cor-7) !important; /* Cor do texto no submenu no modo dark */
}

.dark-theme .dropdown-menu .dropdown-item:hover {
  background-color: var(--dark-cor-2) !important; /* Cor de fundo ao passar o mouse no modo dark */
  color: var(--dark-cor-7) !important; /* Cor do texto ao passar o mouse no modo dark */
}
/*==================================================================================*/
/*                                 definição para textos                              */
/*==================================================================================*/
/* fonte para título e subtítulo das telas do login */
.titulo-auth {
    _font-family: 'Inter', sans-serif!important;
    font-size: 32px!important;
    font-weight: 700!important;
    line-height: 38.73px!important;
    text-align: center!important;
    text-underline-position: from-font!important;
    text-decoration-skip-ink: none!important;
    color: var(--cor-1)!important;
}
.titulo-auth-left {
  _font-family: 'Inter', sans-serif!important;
  font-size: 32px!important;
  font-weight: 700!important;
  line-height: 38.73px!important;
  text-align: left!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-1)!important;
}
.subtitulotitulo-auth {
    _font-family: 'Inter', sans-serif!important;
    font-size: 16px!important;
    font-weight: 700!important;
    line-height: 19px!important;
    text-align: center!important;
    text-underline-position: from-font!important;
    text-decoration-skip-ink: none!important;
    color: var(--cor-1)!important;
}
.topicotitulo-auth {
    _font-family: 'Inter', sans-serif!important;
    font-size: 16px!important;
    font-weight: 400!important;
    line-height: 32px!important;
    text-align: left!important;
    text-underline-position: from-font!important;
    text-decoration-skip-ink: none!important;
    color: var(--cor-1)!important;
}

.topicotitulo-auth-center {
  _font-family: 'Inter', sans-serif!important;
  font-size: 16px!important;
  font-weight: 400!important;
  line-height: 32px!important;
  text-align: center!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-1)!important;
}
.texto-auth-alt {
  _font-family: 'Inter', sans-serif!important;
  font-size: 14px!important;
  /*line-height: 19px!important;*/
  text-align: center!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-1)!important;               /* --cor-1 */
}
.dark-theme .texto-auth-alt{
  color: var(--dark-cor-8)!important;          /* --dark-cor-8 */
}
.texto-auth {
  _font-family: 'Inter', sans-serif!important;
  font-size: 14px!important;
  /*line-height: 19px!important;*/
  text-align: center!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-1)!important;
}
.texto-auth-left {
  _font-family: 'Inter', sans-serif!important;
  font-size: 14px!important;
  /*line-height: 19px!important;*/
  text-align: left!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-1)!important;
}
/* tabelas*/
table, th, td {
  border-radius: var(--radius-default);
  padding-top: 5px;   /* Padding para o topo da tabela */
  padding-right: 15px; /* Padding para o lado direito da tabela */
  padding-bottom: 5px; /* Padding para o fundo da tabela */
  padding-left: 15px;  /* Padding para o lado esquerdo da tabela */
}
.texto-auth-table {
  font-size: 14px!important;
  line-height: 19px!important;
  text-align: center!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-4)!important;
}
.texto-auth-table-orange {
  font-size: 14px!important;
  line-height: 19px!important;
  text-align: center!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-8)!important;
}
.texto-auth-table-left {
  font-size: 14px!important;
  line-height: 19px!important;
  text-align: left!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-4)!important;
}
.texto-auth-table-right {
  font-size: 14px!important;
  line-height: 19px!important;
  text-align: right!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-4)!important;
}
.topicotitulo-table-auth {
  font-size: 16px!important;
  font-weight: 800!important;
  line-height: 32px!important;
  text-align: left!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-4)!important;
}
.topicotitulo-table-auth-center {
font-size: 16px!important;
font-weight: 800!important;
line-height: 32px!important;
text-align: center!important;
text-underline-position: from-font!important;
text-decoration-skip-ink: none!important;
color: var(--cor-4)!important;
}
.updated_at_rigth {
  font-size: 12px !important;
  color: var(--cor-41) !important;   /* cor anterior --cor-41 ou usar --cor-7 */
  text-align: right !important;
}
.titulo-auth-crud {
  _font-family: 'Inter', sans-serif!important;
  font-size: 24px!important;
  font-weight: 700!important;
  line-height: 38.73px!important;
  text-align: center!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-1)!important;
}
.titulo-auth-crud-left {
  _font-family: 'Inter', sans-serif!important;
  font-size: 18px!important;
  font-weight: 400!important;
  line-height: 20px!important;
  text-align: left!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-1)!important;
}

.texto-nome {
  font-size: 29px!important;
  font-weight: 700!important;
  line-height: 38.73px!important;
  text-align: left!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-1)!important;
}
.texto-edite {
  font-size: 14px!important;
  font-weight: 400!important;
  line-height: 16.94px!important;
  text-align: left!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-1)!important;
}
.texto-nome-sub {
  font-size: 16px!important;
  font-weight: 400!important;
  line-height: 19.36px!important;
  text-align: left!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-1)!important;
}
.texto-floating-label {
  font-size: 12px!important;
  font-weight: 400!important;
  line-height: 16.94px!important;
  text-align: left!important;
  text-underline-position: from-font!important;
  text-decoration-skip-ink: none!important;
  color: var(--cor-1)!important;
}

/* Tema Escuro*/
.dark-theme .texto-nome,
.dark-theme .texto-nome-sub,
.dark-theme .texto-edite,
.dark-theme .titulo-auth-left,
.dark-theme .titulo-auth-crud,
.dark-theme .titulo-auth-crud-left,
.dark-theme .titulo-auth,
.dark-theme .subtitulotitulo-auth,
.dark-theme .topicotitulo-auth,
.dark-theme .topicotitulo-auth-center,
.dark-theme .texto-auth,
.dark-theme .texto-auth-left,
.dark-theme .texto-floating-label {
    color: var(--dark-cor-1) !important;
}
.dark-theme .texto-auth-table-left,
.dark-theme .updated_at_rigth{
  color: var(--cor-7) !important;
}

/*==================================================================================*/
/*       Subscrever caracteristicas de texto de forma geral, ex: uso em href        */
/*==================================================================================*/
.color-text-pattern {
  _font-family: 'Inter', sans-serif!important;
  color: var(--cor-4)!important;
  font-size: 14px !important;
}
.color-text-pattern:hover {
  color: var(--cor-1) !important; /* Cor de destaque ao passar o mouse */
}
.color-pattern:hover {
  color: var(--cor-1) !important; /* Cor de destaque ao passar o mouse */
}

.background-color-pattern {
  background-color: var(--cor-1) !important; /* Cor de destaque ao passar o mouse */
}
.cls-1 {
  fill: var(--cor-1) !important; /* Muda o preenchimento para laranja */
}
/*Tema escuro*/
.dark-theme {
  .color-text-pattern {
    color: var(--dark-cor-4) !important;
  }

  .color-text-pattern:hover,
  .color-pattern:hover {
    color: var(--dark-cor-1) !important;
  }

  .background-color-pattern {
    background-color: var(--dark-cor-1) !important;
  }

  .cls-1 {
    fill: var(--dark-cor-1) !important;
  }
}
/*==================================================================================*/
/*                                 configuração para links                          */
/*==================================================================================*/
a[href] {
  color: var(--cor-4) !important; 
  text-decoration: none; 
}
a[href]:hover {
  color: var(--cor-1) !important; /* Cor de destaque ao passar o mouse */
  text-decoration: underline; /* Adiciona o sublinhado ao passar o mouse */
  _font-weight: bold; /* Adiciona o efeito bold */
}
/*tema escuro*/
.dark-theme a[href] {
  color: var(--dark-cor-4) !important;
}

.dark-theme a[href]:hover {
  color: var(--dark-cor-1) !important;
}

/*==================================================================================*/
/*     Combo de configuração INPUT com form-control e mascara para LABEL fluante    */
/*==================================================================================*/
/* INPUT form-control */
.form-control {
  color: var(--cor-4) !important;
  background: var(--cor-7) !important;
  _font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 16.94px !important;
  text-underline-position: from-font !important;
  text-decoration-skip-ink: none !important;
  height: 44px !important;
  border: 0.5px solid var(--cor-43) !important;      /* var(--cor-5) marcelo */
  border-radius: var(--radius-default) !important;

  
  padding-top: 15px !important; /* Incluído - Adicionei padding-top para dar espaço ao label flutuante */
  padding-left: 10px !important; /* Incluído - Alinhei o texto ao campo para que não sobreponha o label */
  box-sizing: border-box !important; /* Incluído - Para garantir que o padding não afete o layout */
}
.form-control-center {
  text-align: center !important;
}
.form-control:hover {
  box-shadow: -5px 5px 5px var(--cor-rgba-1) !important; /* Sombra similar à do Bootstrap */
  transition: all 0.2s ease-in-out !important;
}
/* Estilo do label flutuante */
.floating-label {
  position: absolute; /* Incluído - Para posicionar o label acima do campo de entrada */
  top: 10px; /* Incluído - Ajustei a posição do label dentro do campo */
  font-size: 14px; /* Incluído - Defini o tamanho do texto do label */
  color: var(--cor-4) !important; /* Incluído - Cor do label quando o campo não está preenchido */
  pointer-events: none; /* Incluído - Evita que o label interfira na interação com o campo */
  transition: 0.3s ease; /* Incluído - Transição suave para o movimento do label */
  padding-left: 10px; /* Incluído - Alinhei o label ao campo */

  _font-family: 'Inter', sans-serif !important;
  transform: translateX(-50%); /* Ajusta a posição para centralizar */
  left: 50%;

  white-space: nowrap; /* Incluído - Impede quebra de linha */
  overflow: hidden; /* Opcional - Esconde texto que ultrapasse os limites */
  text-overflow: ellipsis; /* Opcional - Adiciona reticências caso o texto seja muito longo */

}
/* Quando o campo estiver em foco ou preenchido */
.form-control:focus + .floating-label, /* Incluído - A regra de foco para o campo */
.form-control:not(:placeholder-shown) + .floating-label { /* Incluído - Quando o campo tem conteúdo, o label flutua */
  top: -12px; /* Incluído - Posicionei o label acima do campo quando o campo está em foco ou preenchido */
  font-size: 12px; /* Incluído - Reduzi o tamanho do label quando ele flutua */
  color: var(--cor-1) !important; /* Incluído - Alterei a cor do label quando o campo está em foco ou preenchido */
}
/* Evitar que o placeholder interfira com a flutuação do label */
.form-control:focus::placeholder, /* Incluído - Oculto o placeholder quando o campo está em foco */
.form-control:not(:placeholder-shown)::placeholder { /* Incluído - Oculto o placeholder quando o campo tem conteúdo */
  visibility: hidden; /* Incluído - Torno o placeholder invisível durante a interação */
}
.borda-foto{

}
/*tema escuro*/
.dark-theme .borda-foto,
.dark-theme .form-control {
  color: var(--cor-7) !important;
  background: var(--dark-cor-12) !important;
  border: 0.5px solid var(--dark-cor-11) !important;
}

.dark-theme .form-control:hover {
  box-shadow: none !important; /* box-shadow: -5px 5px 5px var(--dark-cor-rgba-1) !important; */
  transition: none !important; /* transition: all 0.2s ease-in-out !important; */
}

.dark-theme .floating-label {
  color: var(--dark-cor-4) !important;   /* --dark-cor-4*/
}

.dark-theme .form-control:focus + .floating-label,
.dark-theme .form-control:not(:placeholder-shown) + .floating-label {
  color: var(--dark-cor-1) !important;
}

.dark-theme .form-control:focus::placeholder,
.dark-theme .form-control:not(:placeholder-shown)::placeholder {
  visibility: hidden;
}
/****************************************************************/
/******* versão para efeito LABEL flutuante alinhado ao início  */
/****************************************************************/
.floating-label-start {
  position: absolute; /* Posiciona o label acima do campo */
  top: 10px; /* Ajuste inicial da posição vertical */
  left: 10px; /* Alinha o label ao início */
  font-size: 14px; /* Define o tamanho do texto do label */
  color: var(--cor-4) !important; /* Cor padrão do label */
  pointer-events: none; /* Evita interferência do label na interação do campo */
  transition: 0.3s ease; /* Transição suave */
  _font-family: 'Inter', sans-serif !important; /* Fonte personalizada */

  /* Para evitar quebra de linha */
  white-space: nowrap; /* Garante que o texto fique em uma única linha */
  overflow: hidden; /* Esconde o texto extra */
  text-overflow: ellipsis; /* Adiciona reticências se o texto for longo */
}
/* Quando o campo está em foco ou preenchido */
.form-control:focus + .floating-label-start,
.form-control:not(:placeholder-shown) + .floating-label-start {
  top: -1px; /* Ajusta o label para cima   valores negativos o itens ficam superior a borda */
  font-size: 12px; /* Reduz o tamanho do texto */
  color: var(--cor-1) !important; /* Cor em foco */
}
/* Ocultar o placeholder durante a interação */
.form-control:focus::placeholder,
.form-control:not(:placeholder-shown)::placeholder {
  visibility: hidden; /* Torna o placeholder invisível */
}
/*tema escuro*/
/* Tema Escuro */
.dark-theme .floating-label-start {
  color: var(--dark-cor-4) !important; /* Cor padrão do label no modo escuro */
}

.dark-theme .form-control:focus + .floating-label-start,
.dark-theme .form-control:not(:placeholder-shown) + .floating-label-start {
  top: -1px; /* Ajusta o label para cima   valores negativos o itens ficam superior a borda*/
  font-size: 12px;
  color: var(--dark-cor-1) !important; /* Cor do label em foco no modo escuro */
}

.dark-theme .form-control:focus::placeholder,
.dark-theme .form-control:not(:placeholder-shown)::placeholder {
  visibility: hidden;
}


/*==================================================================================*/
/*                                 configuração para card e card-body               */
/*==================================================================================*/
/* card */
.card {
  background: var(--cor-7) !important;
  border: 0.5px solid var(--cor-6) !important;
  border-radius: var(--radius-default) !important;

}
.card-body {
  border-radius: var(--radius-default) !important;
}
/* No modo escuro */
.dark-theme .card {
  background: var(--dark-cor-7) !important; /* Altera o fundo no modo escuro */
  border: 0.5px solid var(--dark-cor-6) !important; /* Altera a borda no modo escuro */
}



/*==================================================================================*/
/*                                 configuração para form-check                     */
/*==================================================================================*/
/* ajuste para personalizar o check box*/
.form-check-input {
  border: 0.5px solid var(--cor-6) !important;
  transform: scale(1.3); /* Aumenta 50% */
  width: 24px;
  height: 24px;
  top: 10px;
  left: 10px;
  padding: 4px 0px 0px 0px;
  gap: 0px;
  opacity: 100;
  border-radius: var(--radius-default) !important;

}
.form-check-input:checked {
  background-color: var(--cor-1) !important; /* Cor do fundo quando o checkbox está marcado */
  border-color: var(--cor-3) !important; /* Cor da borda quando marcado */
  border-width: 0.5px !important; /* Aumenta a espessura da borda */
}
.form-check-input:hover {
  box-shadow: -5px 5px 5px var(--cor-rgba-2) !important; /* Sombra similar à do Bootstrap */
  transition: all 0.2s ease-in-out !important;
}
/* Tema Escuro */
.dark-theme .form-check-input {
  border: 0.5px solid var(--dark-cor-6) !important; /* Cor da borda no modo escuro */
  background-color: var(--dark-cor-7) !important; /* Cor de fundo no modo escuro */
}

.dark-theme .form-check-input:checked {
  background-color: var(--dark-cor-1) !important; /* Cor de fundo do checkbox marcado no modo escuro */
  border-color: var(--dark-cor-3) !important; /* Cor da borda quando marcado no modo escuro */
}

.dark-theme .form-check-input:hover {
  box-shadow: -5px 5px 5px var(--dark-cor-rgba-2) !important; /* Sombra no modo escuro */
}

/*==================================================================================*/
/*                                 configuração para tooltip                        */
/*==================================================================================*/
/* ajuste para personalizar o div de seleção para CRUD*/
.custom-tooltip .tooltip-inner {
  background-color: var(--cor-rgba-3) !important; /* Cor de fundo */
  color: var(--cor-7) !important; /* Cor do texto */
  border-radius: 38px !important; /* Bordas arredondadas (opcional) */
  padding: 5px 10px !important; /* Espaçamento interno */
}
/* Conexão da seta com o corpo do tooltip para cada direção */
.custom-tooltip[data-popper-placement^="top"] .tooltip-arrow {
  margin-bottom: 5px !important;
}
.custom-tooltip[data-popper-placement^="bottom"] .tooltip-arrow {
  margin-top: 5px !important;
}
.custom-tooltip[data-popper-placement^="left"] .tooltip-arrow {
  margin-right: 5px !important;
}
.custom-tooltip[data-popper-placement^="right"] .tooltip-arrow {
  margin-left: 5px !important;
}
/* Alteração da cor da seta  */
.custom-tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--cor-rgba-3) !important;
}
.custom-tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--cor-rgba-3) !important;
}
.custom-tooltip[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--cor-rgba-3) !important;
}
.custom-tooltip[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--cor-rgba-3) !important;
}
/*=====================custom 2 claro=============================================================*/
.custom2-tooltip .tooltip-inner {
  background-color: var(--cor-rgba-7) !important; /* Cor de fundo */
  color: var(--cor-7) !important; /* Cor do texto */
  border-radius: 38px !important; /* Bordas arredondadas (opcional) */
  padding: 5px 10px !important; /* Espaçamento interno */
}
/* Conexão da seta com o corpo do tooltip para cada direção */
.custom2-tooltip[data-popper-placement^="top"] .tooltip-arrow {
  margin-bottom: 5px !important;
}
.custom2-tooltip[data-popper-placement^="bottom"] .tooltip-arrow {
  margin-top: 5px !important;
}
.custom2-tooltip[data-popper-placement^="left"] .tooltip-arrow {
  margin-right: 5px !important;
}
.custom2-tooltip[data-popper-placement^="right"] .tooltip-arrow {
  margin-left: 5px !important;
}
/* Alteração da cor da seta  */
.custom2-tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--cor-rgba-7) !important;
}
.custom2-tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--cor-rgba-7) !important;
}
.custom2-tooltip[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--cor-rgba-7) !important;
}
.custom2-tooltip[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--cor-rgba-7) !important;
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*                                                                                  */
/*                              FIM REDEFINIÇÃO BOOTSTRAP                           */
/*                                                                                  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*==================================================================================*/
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*                                                                                  */
/*                             REPONSIVIDADE    INICIO                              */
/*                                                                                  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*==================================================================================*/

/*==================================================================================*/
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*                                                                                  */
/*                             REPONSIVIDADE   ---    INDEX                         */
/*                         funcionamento interno dos seletores                      */
/*                    quebra de linha para data de criação ou update                */
/*                                                                                  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*==================================================================================*/
/* controle do conteudo interno item do seletor */
.responsive-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* Permite que os elementos quebrem de linha */
}

@media (max-width: 708px) { /* 768 Aplica o ajuste para telas menores */
  .responsive-container {
      flex-direction: column; /* Muda para coluna */
      align-items: flex-start; /*left; /*flex-start; /* Alinha os itens à esquerda */
  }

}

/*  ocultar a barra de pesquisa  */
@media (max-width: 810px) {      /* <= a 927 é celular onde 927px é do IPhone Max com o celular posição paisagem/landscape*/
  .ocultar-mobile {
      display: none !important;
  }
  .ocultar-exportar-mobile {
    display: none !important;
  }
}
@media (min-width: 811px) {     /* valores acima de 927 serão tratados com a barra de pesquisa vísivel */
  .ocultar-mobile {
      display: flex !important;
  }
  .ocultar-exportar-mobile {
    display: flex !important;
  }

}

.mobile-ocultar-foto {
  display: block;
}

.ocultar-exportar-select {
  width: 426px; /* largura padrão */
}

@media (max-width: 718px) {
  .ocultar-exportar-select {
      width: 270px; /* largura quando a tela for menor que 718px */
  }
  .mobile-ocultar-foto {
    display: none !important;
  }
}



/* controle do item do seletor */
@media (max-width: 1024px) {  
  .row.g-0 {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column; /* Garante que cada item fique um abaixo do outro */
  }

  .col-12.col-md-6.p-0 {
      width: 100%; /* Faz cada div principal ocupar 100% da largura */
  }

  /* Ajuste de espaçamento para evitar espaços excessivos */
  .list-group-item {
      padding: 10px;
  }

}

/*==================================================================================*/
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*                                                                                  */
/*                             REPONSIVIDADE   ---    CRUD                          */
/*                                                                                  */
/*       transforma linhas de um formulário  em colunas quando telas pequenas       */
/*                                                                                  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*==================================================================================*/
/* Estilo padrão para telas maiores */
/* Estilos para telas menores, com media query */
/*================================================================================
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* inicio definições testadas em proprietario */

.my-col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }  /* 1/12 */
.my-col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; } /* 2/12 */
.my-col-md-3  { flex: 0 0 25%;      max-width: 25%; }      /* 3/12 */
.my-col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; } /* 4/12 */
.my-col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; } /* 5/12 */
.my-col-md-6  { flex: 0 0 50%;      max-width: 50%; }      /* 6/12 */
.my-col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; } /* 7/12 */
.my-col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; } /* 8/12 */
.my-col-md-9  { flex: 0 0 75%;      max-width: 75%; }      /* 9/12 */
.my-col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } /* 10/12 */
.my-col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } /* 11/12 */
.my-col-md-12 { flex: 0 0 100%;     max-width: 100%; }     /* 12/12 */


/*==================================================================================*/
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*                                                                                  */
/*                             REPONSIVIDADE   ---    PAINEL                        */
/*                                                                                  */
/*       transforma linhas de um formulário  em colunas quando telas pequenas       */
/*                                                                                  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*==================================================================================*/
/* Estilo padrão para telas maiores */
/* Estilos para telas menores, com media query */
@media (max-width: 1024px) {
  .container-fluid .row {
      flex-direction: column !important; /* Muda a direção das colunas para coluna */
  }
  .container-fluid .col-md-6 {
      width: 100% !important; /* Faz cada bloco ocupar 100% da largura em telas menores */
  }
}
/***********************************************************/
/*   ocultar as setas de controle para campos númericos,    
/*   um campo numérico no html tem que ser digitado        */
/***********************************************************/
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

/* Remove setas no Firefox */
input[type="number"] {
  appearance: textfield;
}

/******************************/
/*  tratamento link publico   */
/******************************/
.link {
  display: flex;
  flex-direction: column; /* ✅ Começa em coluna para telas pequenas */
  gap: 16px;
}

/* Telas maiores que 700px ➝ linha */
@media (min-width: 850px) {
  .link {
    flex-direction: row;
  }
}

/********************************************/
/*  tratamento alerta para virar o celular  */
/********************************************/
.orientacao-alerta {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffc107;
  color: #000;
  text-align: center;
  padding: 12px;
  z-index: 9999;
  font-weight: bold;
}

/* Quando em modo retrato (vertical) */
@media screen and (orientation: portrait) {
  .orientacao-alerta {
    display: block;
  }
}

/* Quando em modo paisagem (horizontal), esconde */
@media screen and (orientation: landscape) {
  .orientacao-alerta {
    display: none;
  }
}

/*==================================================================================*/
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*                                                                                  */
/*                             REPONSIVIDADE   ---    BARRA DE PESQUISA             */
/*                                                                                  */
/*       transforma linhas de um formulário  em colunas quando telas pequenas       */
/*                                                                                  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*==================================================================================*/
.input-container {
  width: 50%;
}

/* Telas grandes */
@media (min-width: 610px) {
  .input-container {
  width: 300px;
  }
}

/* Telas grandes */
@media (min-width: 700px) {
  .input-container {
  width: 400px;
  }
}


/* Telas grandes */
@media (min-width: 1100px) {
  .input-container {
  width: 500px;
  }
}

/* Telas grandes */
@media (min-width: 1380px) {
  .input-container {
  width: 1050px;
  }
}
/*==================================================================================*/
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*                                                                                  */
/*                             REPONSIVIDADE   ---    CRUD TRIAGEM                  */
/*                                                                                  */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*==================================================================================*/
.triagem-container {
  width: 100% !important; /* Padrão para telas muito grandes (≥ 1600px) */
}

/* Telas entre 1500px e 1599px */
@media (max-width: 1599px) {
  .triagem-container {
    width: 1200px !important;
  }
}

/* Telas entre 1300px e 1499px */
@media (max-width: 1499px) {
  .triagem-container {
    width: 1000px !important;
  }
}

/* Telas entre 1100px e 1299px */
@media (max-width: 1299px) {
  .triagem-container {
    width: 800px !important;
  }
}

/* Telas entre 950px e 1099px */
@media (max-width: 1099px) {
  .triagem-container {
    width: 700px !important;
  }
}

/* Telas entre 850px e 949px */
@media (max-width: 949px) {
  .triagem-container {
    width: 600px !important;
  }
}

/* Telas entre 740px e 849px */
@media (max-width: 849px) {
  .triagem-container {
    width: 500px !important;
  }
}

/* Telas entre 660px e 739px */
@media (max-width: 739px) {
  .triagem-container {
    width: 400px !important;
  }
}

/* Telas entre 576px e 659px */
@media (max-width: 659px) {
  .triagem-container {
    width: 300px !important;
  }
}

/* Telas entre 557px e 575px */
@media (max-width: 575px) {
  .triagem-container {
    width: 290px !important;
  }
}

/* Telas muito pequenas (até 556px) */
@media (max-width: 556px) {
  .triagem-container {
    width: 260px !important;
  }
}
/*==================================================================================*/
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*                                                                                  */
/*                             REPONSIVIDADE   ---    largura menu                  */
/*                    aplicado em app_home_image.blade.php                          */
/*                        esse include domina a influencia para a largura do menu   */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*==================================================================================*/
.menu-container {
  width: 268px !important;

}
@media (max-width: 990px) {  /* telas de 0 a 990px aplica-se largura do menu como 230px */
  .menu-container {
    width: 220px !important;
  }
}