/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 30 de jul. de 2024, 21:11:15
    Author     : arthur-reis
*/

/* A INTENSIDADE SEGUE DO MENOR PARA O MAIOR INDICE */

/*Variáveis principais para troca de tema*/

:root {
    /*CORES BASE*/
    --principal: #00DC5E;       /* Cor primária do tema (botões principais, links, elementos de destaque) */
    --background: #18181B;      /* Cor de fundo principal da aplicação */
    --card: #1A1A1E;            /* Cor de fundo para cards e containers */
    --texto: #FFFFFF;           /* Cor principal do texto em todo o site */
    --borda: #242529;           /* Cor para bordas, separadores e linhas divisórias */
    --destaque: #16a34a;        /* Cor secundária (hover states, botões secundários) */

    /*CORES PARA RGBA*/
    --cor-textos-rgba: 255,255,255;
    --cor-resp-coment: 245,247,251;
    --cards-2: 33,37,41;

    /*Cor do '>' na jornada 0 = branco; 1 = preto*/
    --filtro: 0;

    /*VARIÁVEIS POR HERANÇA*/
    /* Textos */
    --cor-textos: var(--texto);
    --cor-textos-sidebar: color-mix(in srgb, var(--texto) 50%, transparent);
    --cor-texto-hover: oklch(0% 0 0);
    --fav-hover: color-mix(in srgb, var(--principal) 80%, white);
    --label-perfil: color-mix(in srgb, var(--texto) 70%, transparent);
    --titulo-modulo-gradient: color-mix(in srgb, var(--principal) 80%, cyan);
    --cor-editar-coment: color-mix(in srgb, var(--principal) 60%, #1CBB8C);

    /* Botões */
    --botao-concluir-hover: color-mix(in srgb, var(--principal) 40%, white);
    --botao-concluido-bg: color-mix(in srgb, var(--background) 85%, black);
    --btn-concluido-txt: color-mix(in srgb, var(--texto) 70%, gray);
    --btn-resp-desafio: color-mix(in srgb, var(--borda) 60%, var(--destaque) 40%);
    --btn-resp-desafio-hover: var(--destaque);
    --btn-radio-desafio: color-mix(in srgb, var(--principal) 60%, #1db954);
    --btn-radio-desafio-sombra: color-mix(in srgb, var(--principal) 30%, transparent);
    --btn-salvar-perfil: var(--destaque);
    --btn-mais: color-mix(in srgb, var(--principal) 15%, white);

    /* Fundos e bordas */
    --bordas: var(--borda);
    --popover-bg: color-mix(in srgb, var(--background) 85%, white);
    --fav-bg: color-mix(in srgb, var(--background) 80%, white);
    --autocomplete-hover: color-mix(in srgb, var(--destaque) 20%, var(--background) 80%);
    --bg-user: color-mix(in srgb, var(--background) 90%, black);

    /* Cards */
    --cards: var(--card);
    --cards-modulo: color-mix(in srgb, var(--card) 80%, #343a40 20%);
    --cards-fase: color-mix(in srgb, var(--card) 85%, #2E2E31 15%);
    --card-resp-desafio: color-mix(in srgb, var(--card) 85%, #26262b 15%);

    /* Sidebar */
    --sidebar-hover: color-mix(in srgb, var(--principal) 70%, black 30%);
    --sidebar-li-hover: color-mix(in srgb, var(--principal) 50%, black 50%);

    /* Inputs e tabelas */
    --input-bg: var(--btn-resp-desafio);
    --input-bg-2: var(--cards);
    --ip-bg-2-border: color-mix(in srgb, var(--borda) 80%, black 20%);
    --datatable-bg: color-mix(in srgb, var(--destaque) 20%, var(--background) 80%);

    /* Outros */
    --scroll: var(--principal);
    --social-icon: color-mix(in srgb, var(--texto) 80%, gray 20%);
    --social-border: var(--social-icon);
    --social-bg: transparent;
    --social-hover-bg: oklch(100% 0 0);
    --social-hover-icon: oklch(0% 0 0);
    --social-2-bg: var(--btn-resp-desafio);
    --social-2-border: var(--ip-bg-2-border);
    --social-2-icon: color-mix(in srgb, var(--texto) 20%, gray 80%);
    --icon-primary: var(--texto);
    --icon-secondary: var(--principal);
}

.next-icon {
    filter: invert(var(--filtro));
}


/* PRINCIPAIS */
:root{
    /*--gradiente-tema: linear-gradient(90deg, #295361 0.07%, #1E4F5B 10.7%, #1D6E6B 35.21%, #157069 37.77%, #09816E 57.38%, #03B084 99.93%);*/
    --gradiente-tema: linear-gradient(90deg, var(--sidebar-hover), var(--principal));
    --gradiente-escuro: #1E414C;
    --verde-programe-principal: #03AE83;
    --verde-programe-claro-1: #A1CEC3;
    --verde-programe-claro-2: #C9E3DD;
    --verde-programe-claro-3: #00DC5E;
}

/* NEUTROS */
:root{
    --branco-total: #FFFFFF;
    --cinza-1: #E3E3E3;
    --cinza-2: #A0A0A0;
    --cinza-3: #898989;
    --cinza-4: #242529;
}

/* PRETOS */
:root{
    --preto-1: #414141;
    --preto-2: #27272A;
    --preto-3: #18181B;
}

/* GRADIENTES COLORIDOS */
:root{
    --gradiente-azul: linear-gradient(90deg, #00C6FF 0%, #0072FF 100%);
    --gradiente-amarelo: linear-gradient(90deg, #FFE259 0%, #FFA751 100%);
    --gradiente-vermelho: linear-gradient(90deg, #A73737 0%, #7A2828 100%);
    --gradiente-roxo: linear-gradient(90deg, #4776E6 0%, #8E54E9 100%);
    --gradiente-rosa: linear-gradient(90deg, #B24592 0%, #F15F79 100%);
    --gradiente-verde: linear-gradient(90deg, #00DC5E 0%, #008E3C 100%);
}

/* BOTOES COLORIDOS */
:root{
    --button-rosa-1: #FFC9E3;
    --button-rosa-1: #ED92C9;
    --button-rosa-3: #752E5C;
    --button-roxo-1: #DCC9E3;
    --button-roxo-2: #BAA1CE;
    --button-roxo-3: #583A88;
    --button-vermelho-1: #622020;
    --button-vermelho-2: #CEA1A4;
    --button-vermelho-3: #622020;
    --button-amarelo-1: #FFE9C9;
    --button-amarelo-2: #EDC592;
    --button-amarelo-3: #AB8452;
    --button-azul-1: #C9D8E3;
    --button-azul-2: #A1B9CE;
    --button-azul-3: #25515F;
    --button-verde-1: #C9E3DD;
    --button-verde-2: #ABD3C9;
    --button-verde-3: #1E414C;
}

:root {
    /* A COR QUE MUDA O TEMA */
    --verde-programe-claro-3: var(--principal);  /* Verde Vibrante (Tema Padrão) */

    /* A BASE FIXA DO PROJETO */
    --branco-total: var(--cor-textos);             /* Texto Principal */
    --cinza-4: var(--bordas);                  /* Fundo de Cards, Inputs, bordas em geral */
    --preto-3: var(--background);                   /* Background */
    --preto-2: var(--popover-bg);

    --cards-roadmaps: var(--cards);           /* Cards e áreas em destaque */
    --cards-roadmaps-2: var(--cards-2);  /*deve ser colocada em formato rgb(xx,yy,zz)*/

    --button-verde-1: var(--btn-mais);
}

.background-color-preto-1 {
    background-color: var(--preto-3) !important;
}

.card-color-padrao {
    background-color: rgb(0,220,94) !important;

}

.fonte-cor-devjourney {
    color: var(--verde-programe-claro-3);
}

.background-color-preto-3 {
    background-color: var(--background) !important;
}


.principal-color {
    color: var(--verde-programe-claro-3);
}

.cards-fase {
    background-color: var(--cards-fase);
}

.font-color {
    color: var(--branco-total);
}

.card-color {
    background-color: var(--cards-roadmaps) !important;
}

.icon {
    --primary: var(--cor-principal);
    --secondary: var(--cor-secundaria);
}

.card-fase {
    background-color: var(--cards-fase) !important;
}

.input{
    background-color: var(--input-bg-2);
    border-color: var(--ip-bg-2-border);
    color: var(--cor-textos);
}

.text-area-box {
    background-color: var(--input-bg);
    width: 100%;
    border-radius: border5px;
    border: 1px solid var(--ip-bg-2-border);
    color: black;
}

/*Botao do visualizar perfil*/

.botao {
    background-color: var(--input-bg) !important;
    border: none !important;
    color: var(--cor-textos) !important;
    font-weight: none;
    padding: 2px 5px;
    border-radius: 5px;
    cursor: pointer;

}

.botao:hover {
    background-color: var(--btn-salvar-perfil) !important;
}

.favorito-body {
    padding: 0.75rem 0.5rem;
    text-align: center;
    background-color: var(--fav-bg);
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    height: 60px; /* define altura fixa para o body */
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-area {

    width: calc(100% - 70px);
    max-height: 150px;
    resize: none;
    overflow-y: auto;
    border: none;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    border-radius: 0;
    background-color: #18181b;
    color: #ffffff;
}


/* Seleciona o botão de dropdown dentro do autocomplete */
.search_padrao_com_dropdown .ui-autocomplete-dropdown {
    color: var(--cor-textos);
}

/* Hover do botão */
.search_padrao_com_dropdown .ui-autocomplete-dropdown:hover {
    color: var(--principal);
}


.bg-modulos {
    background-color: var(--cards-modulo) !important;
}

.text-excluir {
    color: #FF0000 !important;
}

.text-editar {
    color: var(--cor-editar-coment) !important;
}