/* ###POSICAO DO QTD### */
/* Posição padrão (esquerda) */
.qtd-left .t-Card-value {
  margin-top: 5px;
  text-align: left;
}

/* Quando a opção qtd-center está ativa */
.qtd-center .t-Card-value {
  text-align: center !important;
}

/* Quando a opção qtd-right está ativa */
.qtd-right .t-Card-value {
  text-align: right !important;
}

/* ###CCS01### */
/* O card em si */
.modelo-card-personalizado .t-Card {
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
    position: relative;
    overflow: hidden;
}

/* Ajuste do conteúdo */
.modelo-card-personalizado .t-Card-wrap {
    display: block !important;
    padding: 12px !important;
}

/* Título do card */
.modelo-card-personalizado .t-Card-title {
    font-weight: 700;
    font-size: 1.1rem;
    /*color: #333;*/
}

/* Valor do card */
.modelo-card-personalizado .t-Card-value {
    font-size: 1.5rem;
    font-weight: 600;
    /*color: #555;*/
    margin-top: 8px;
}


/* Estilo para ícones - SEM forçar exibição */
.modelo-card-personalizado .t-Card-icon:not(.is-hidden):not(.is-nulled) {
    aspect-ratio: 1 / 1 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 8px 0 0 !important;
    float: left !important;
    vertical-align: middle !important;
}

/* Ajuste do ícone dentro do contêiner */
.modelo-card-personalizado .t-Card-icon:not(.is-hidden):not(.is-nulled) .t-Icon {
    font-size: 0.9rem !important;
}

/* Ajuste das iniciais */
.modelo-card-personalizado .t-Card-initials:not(.is-hidden):not(.is-nulled) {
    font-size: 0.8rem !important;
}

/* Remover qualquer display forçado que possa estar causando problemas */
.modelo-card-personalizado [class*="is-hidden"],
.modelo-card-personalizado [class*="is-nulled"] {
    display: none !important;
}


/* ###CCS02### */
/* Estilo para o modelo de card personalizado 2 */
.modelo-card-personalizado-2 {
    font-family: 'Nunito', sans-serif;
}

/* O card em si */
.modelo-card-personalizado-2 .t-Card {
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
    position: relative;
    overflow: hidden;
}

/* Ajuste do conteúdo */
.modelo-card-personalizado-2 .t-Card-wrap {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    position: relative !important;
}

/* Título do card - centralizado horizontalmente */
.modelo-card-personalizado-2 .t-Card-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
    text-align: center;
    width: 100%;
    margin: 24px auto 8px auto; /* Espaço acima para o ícone */
}

/* Valor do card - posicionamento conforme classes qtd-* */
.modelo-card-personalizado-2 .t-Card-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #555;
    margin-top: 8px;
    width: 100%;
}

/* Posicionamento base do ícone - sempre acima do título */
.modelo-card-personalizado-2 .t-Card-icon:not(.is-hidden):not(.is-nulled) {
    aspect-ratio: 1 / 1 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    position: absolute !important;
    top: 12px !important; /* Sempre na parte superior do card */
}

/* Posicionamento do ícone baseado nas classes qtd-* */
/* Quando o valor está à esquerda (qtd-left), o ícone fica à direita */
.modelo-card-personalizado-2.qtd-left .t-Card-icon:not(.is-hidden):not(.is-nulled),
.modelo-card-personalizado-2 .qtd-left .t-Card-icon:not(.is-hidden):not(.is-nulled) {
    right: 12px !important;
    left: auto !important;
}

/* Quando o valor está centralizado (qtd-center), o ícone fica centralizado */
.modelo-card-personalizado-2.qtd-center .t-Card-icon:not(.is-hidden):not(.is-nulled),
.modelo-card-personalizado-2 .qtd-center .t-Card-icon:not(.is-hidden):not(.is-nulled) {
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
}

/* Quando o valor está à direita (qtd-right), o ícone fica à esquerda */
.modelo-card-personalizado-2.qtd-right .t-Card-icon:not(.is-hidden):not(.is-nulled),
.modelo-card-personalizado-2 .qtd-right .t-Card-icon:not(.is-hidden):not(.is-nulled) {
    left: 12px !important;
    right: auto !important;
}

/* Ajuste do ícone dentro do contêiner */
.modelo-card-personalizado-2 .t-Card-icon:not(.is-hidden):not(.is-nulled) .t-Icon {
    font-size: 0.9rem !important;
}

/* Ajuste das iniciais */
.modelo-card-personalizado-2 .t-Card-initials:not(.is-hidden):not(.is-nulled) {
    font-size: 0.8rem !important;
}

/* Remover qualquer display forçado que possa estar causando problemas */
.modelo-card-personalizado-2 [class*="is-hidden"],
.modelo-card-personalizado-2 [class*="is-nulled"] {
    display: none !important;
}



/* ###CCS03### */
/* Estilo para o modelo de card personalizado 3 */
.modelo-card-personalizado-3 .t-Card {
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background-color: white;
    border-left: 4px solid #3498db;
    position: relative;
    overflow: hidden;
}

/* Adiciona um detalhe visual sutil no topo */
.modelo-card-personalizado-3 .t-Card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3498db);
}

/* Conteúdo do card */
.modelo-card-personalizado-3 .t-Card-wrap {
    padding: 15px !important;
}

/* Título e valor com espaçamento adequado */
.modelo-card-personalizado-3 .t-Card-title {
    margin-bottom: 10px;
}

.modelo-card-personalizado-3 .t-Card-value {
    margin-top: 5px;
}

/* Estilo para ícones - mantendo a estrutura original */
.modelo-card-personalizado-3 .t-Card-icon:not(.is-hidden):not(.is-nulled) {
    /*background-color: #f5f7fa !important;*/
    border: 1px solid #e6e9ed;
    aspect-ratio: 1 / 1 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 8px 0 0 !important;
    float: right !important;
    vertical-align: middle !important;
}


/* Remover qualquer display forçado que possa estar causando problemas */
.modelo-card-personalizado-3 [class*="is-hidden"],
.modelo-card-personalizado-3 [class*="is-nulled"] {
    display: none !important;
}


/* ###MCH01### */
/* Classe personalizada modelo-hover-moderno para efeito hover em cards */
/* Classe personalizada para efeito hover com preenchimento cinza */
/* Classe personalizada modelo-hover-moderno para efeito hover em cards */
.modelo-hover-moderno.t-Cards .t-Cards-item {
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    /*box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/
    overflow: hidden;
}

.modelo-hover-moderno.t-Cards .t-Cards-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    border-color: #4a89dc;
}

/* Para versões mais recentes do APEX que usam CardView */
.modelo-hover-moderno.a-CardView .a-CardView-item {
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden;
}

.modelo-hover-moderno.a-CardView .a-CardView-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    border-color: #4a89dc;
}



/* ###MCH02### */
/* Classe personalizada para efeito hover com preenchimento cinza - respeitando bordas arredondadas */
.card-hover-cinza .t-Card,
.card-hover-cinza.t-Cards .t-Cards-item,
.card-hover-cinza.a-CardView .a-CardView-item,
.card-hover-cinza .a-CardView-item {
    transition: background-color 0.3s ease;
}

/* Para atingir o elemento interno que pode estar controlando o fundo */
.card-hover-cinza .t-Card:hover .t-Card-wrap,
.card-hover-cinza .a-CardView-item:hover .a-CardView-body,
.card-hover-cinza .t-Cards-item:hover .t-Card-wrap {
    background-color: #e0e0e0 !important;
    /*border-radius: inherit !important;*/
    overflow: hidden !important;
}

/* Para garantir que o conteúdo interno também seja afetado */
.card-hover-cinza .t-Card:hover .t-Card-body,
.card-hover-cinza .a-CardView-item:hover .a-CardView-body,
.card-hover-cinza .t-Cards-item:hover .t-Card-body {
    background-color: #e0e0e0 !important;
    /*border-radius: inherit !important;*/
    overflow: hidden !important;
}


/* ###MCH03### */
/* Classe personalizada para efeito hover com gradiente dinâmico e fluido */
.card-hover-gradiente .t-Card,
.card-hover-gradiente.t-Cards-item .t-Card {
    transition: all 0.5s ease;
}

/* Estado inicial do link principal - sem gradiente */
.card-hover-gradiente .t-Card .t-Card-wrap,
.card-hover-gradiente.t-Cards-item .t-Card .t-Card-wrap {
    background: #ffffff;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Pseudo-elemento para criar o efeito de gradiente animado */
.card-hover-gradiente .t-Card .t-Card-wrap::before,
.card-hover-gradiente.t-Cards-item .t-Card .t-Card-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(120deg, #3f51b5, #2196f3, #e91e63);
    background-size: 300% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Ativando o gradiente no hover e iniciando a animação */
.card-hover-gradiente .t-Card:hover .t-Card-wrap::before,
.card-hover-gradiente.t-Cards-item .t-Card:hover .t-Card-wrap::before {
    opacity: 1;
    animation: gradientFlow 5s ease infinite;
}

/* Animação para o fluxo do gradiente */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Ajustando a posição do conteúdo para ficar acima do gradiente */
.card-hover-gradiente .t-Card .t-Card-icon,
.card-hover-gradiente .t-Card .t-Card-content,
.card-hover-gradiente.t-Cards-item .t-Card .t-Card-icon,
.card-hover-gradiente.t-Cards-item .t-Card .t-Card-content {
    position: relative;
    z-index: 2;
}

/* Garantindo que o conteúdo seja transparente */
.card-hover-gradiente .t-Card:hover .t-Card-content,
.card-hover-gradiente.t-Cards-item .t-Card:hover .t-Card-content {
    background-color: transparent !important;
}

/* Preservando a cor de fundo do ícone */
.card-hover-gradiente .t-Card:hover .t-Card-icon,
.card-hover-gradiente.t-Cards-item .t-Card:hover .t-Card-icon {
    /* Mantém a cor de fundo original do ícone */
    background-color: inherit;
}

/* Mudando a cor do texto para branco APENAS no hover para melhor legibilidade */
.card-hover-gradiente .t-Card:hover .t-Card-title,
.card-hover-gradiente .t-Card:hover .t-Card-value,
.card-hover-gradiente.t-Cards-item .t-Card:hover .t-Card-title,
.card-hover-gradiente.t-Cards-item .t-Card:hover .t-Card-value {
    color: #ffffff !important;
    transition: color 0.5s ease;
}



/* ###TEXTO### */
/* Classes para controle de tamanho de texto do STATUS e QTD nos cards */
/* Tamanho Pequeno (P) */
.tamanho-texto-p .t-Card-title {
    font-size: 0.75rem !important;
}

/* Tamanho Médio (M) */
.tamanho-texto-m .t-Card-title {
    font-size: 1rem !important;
}

/* Tamanho Grande (G) */
.tamanho-texto-g .t-Card-title {
    font-size: 1.25rem !important;
    /*font-weight: 600 !important;*/
}

.tamanho-texto-gg .t-Card-title {
    font-size: 1.5rem !important;
    /*font-weight: 600 !important;*/
}

/* ##TAMANHO QTD## */
.tamanho-valor-p .t-Card-value {
    font-size: 1.0rem !important;
}

.tamanho-valor-pm .t-Card-value {
    font-size: 1.25rem !important;
    /*font-weight: 600 !important;*/
}

.tamanho-valor-m .t-Card-value {
    font-size: 1.5rem !important;
    /*font-weight: 600 !important;*/
}

.tamanho-valor-g .t-Card-value {
    font-size: 2.0rem !important;
    /*font-weight: 600 !important;*/
}

/* ##ESPESSURA## */
.espessura-texto-sb .t-Card-title{
    font-weight: 600 !important;
}
.espessura-texto-sb .t-Card-value{
    font-weight: 600 !important;
}

.espessura-texto-b .t-Card-title{
    font-weight: 750 !important;
}
.espessura-texto-b .t-Card-value{
    font-weight: 750 !important;
}

/* ###FC01### */
/* Classe para cards com bordas completamente retangulares */
.card-retangular .t-Card,
.card-retangular.t-Card,
.card-retangular .a-CardView,
.card-retangular.a-CardView,
.card-retangular .a-CardView-items .a-CardView-item,
.card-retangular .t-Cards .t-Card {
    border-radius: 0 !important;
    overflow: hidden !important; /* Garante que nenhum conteúdo ultrapasse as bordas */
}

/* Remove qualquer borda interna que possa estar criando linhas */
.card-retangular .t-Card-wrap,
.card-retangular .t-Card-body,
.card-retangular .t-CardView-body,
.card-retangular .a-CardView-header,
.card-retangular .a-CardView-body {
    border-radius: 0 !important;
}

/* Garante que não haja nenhuma borda arredondada em elementos que possam estar causando a linha */
.card-retangular .t-Card::before,
.card-retangular .t-Card::after,
.card-retangular .a-CardView::before,
.card-retangular .a-CardView::after {
    border-radius: 0 !important;
    content: none !important; /* Remove pseudo-elementos que possam estar criando linhas */
}

/* Classe para restaurar o formato padrão com bordas arredondadas */
.card-arredondado .t-Card,
.card-arredondado.t-Card,
.card-arredondado .a-CardView,
.card-arredondado.a-CardView,
.card-arredondado .a-CardView-items .a-CardView-item,
.card-arredondado .t-Cards .t-Card {
    border-radius: 12px !important;
}


/* ###COR### */
/* Classe para alterar a cor apenas do título e valor dentro de t-Card-content */
.cor-padrao .t-Card-content .t-Card-title,
.cor-padrao.t-Card .t-Card-content .t-Card-title {
    color: rgb(30, 42, 63) !important; /* Cor para o título */
}

.cor-padrao .t-Card-content .t-Card-value,
.cor-padrao.t-Card .t-Card-content .t-Card-value {
    color: rgb(30, 42, 63) !important; /* Cor para o valor */
}


/* CORINGA */
/* Estilo base modernizado para o card-aba */
.card-aba .t-Cards-item {
    display: inline-block;
    margin-right: 8px;
    vertical-align: bottom;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Estilo compacto do card com visual mais moderno */
.card-aba .t-Card {
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.08);
    width: 42px;
    height: 42px;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    background-color: #f8f9fa;
}

/* Posicionamento do ícone no modo compacto */
.card-aba .t-Card-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.25s ease;
}

/* Estilo para o ícone e iniciais */
.card-aba .t-Icon {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.card-aba .t-Card-initials {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

/* Esconder o conteúdo no estado inicial */
.card-aba .t-Card-content {
    opacity: 0;
    height: 0;
    padding: 0 !important;
    transition: all 0.25s ease;
    position: absolute;
    top: 42px;
    left: 0;
    width: 100%;
    background-color: white;
    border-radius: 0 0 10px 10px;
}

/* Estilo do wrap para posicionamento correto */
.card-aba .t-Card-wrap {
    padding: 0 !important;
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Efeito de expansão ao passar o mouse */
.card-aba .t-Cards-item:hover .t-Card {
    width: 130px;
    height: 110px;
    z-index: 10;
    background-color: white;
}

/* Efeito sutil no ícone ao passar o mouse */
.card-aba .t-Cards-item:hover .t-Icon {
    transform: translateY(-2px);
}

/* Mostrar o conteúdo ao passar o mouse com layout modernizado */
.card-aba .t-Cards-item:hover .t-Card-content {
    opacity: 1;
    height: auto;
    padding: 12px 10px !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
}

/* Layout modernizado para título e valor */
.card-aba .t-Card-title {
    font-size: 11px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    font-weight: 500;
    text-align: center;
}

.card-aba .t-Card-value {
    font-size: 18px;
    font-weight: 600;
    margin-top: 5px !important;
    text-align: center;
    color: #343a40;
}

/* Garantir que o container pai tenha espaço suficiente */
.card-aba.t-Cards {
    padding-top: 70px; /* Espaço para a expansão para cima */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; /* Permite rolagem horizontal se necessário */
    scrollbar-width: thin;
    -ms-overflow-style: none;
}

/* Esconder a barra de rolagem no Chrome */
.card-aba.t-Cards::-webkit-scrollbar {
    height: 4px;
}

.card-aba.t-Cards::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Estilo para cards selecionados */
.card-aba .t-Cards-item.is-selected .t-Card {
    border-bottom: 3px solid #4cd964;
}

/* Efeito de transição suave entre estados */
.card-aba .t-Cards-item:hover .t-Card-icon {
    width: 100%;
    height: 42px;
    background-color: rgba(0, 0, 0, 0.03) !important;
}


.card-aba .t-Cards-item:hover:after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}



/* ### OPÇÃO DE CARD REAL ### */
/*
.r-modelo-card-personalizado .t-Card {
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
    position: relative;
    overflow: hidden;
}


.r-modelo-card-personalizado .t-Card-wrap {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    height: 100%;
}

.r-modelo-card-personalizado .t-Card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.r-modelo-card-personalizado .t-Card-title {
    font-weight: 700;
    font-size: 1.1rem;
    height: 2.8em; 
    line-height: 1.4; 
    overflow: hidden; 
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    margin-bottom: 8px; 
}

.r-modelo-card-personalizado .t-Card-value {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 0; 
    position: relative; 
}
*/

.r-modelo-card-personalizado .t-Card {
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* LINHA ADICIONADA */
}

/* ESTADO SELECIONADO - LINHAS ADICIONADAS */
.r-modelo-card-personalizado .t-Card.selected {
    transform: translateY(-8px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Ajuste do conteúdo */
.r-modelo-card-personalizado .t-Card-wrap {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    height: 100%; /* Garante que o card ocupe toda a altura disponível */
}

/* Container para o conteúdo principal para melhor organização */
.r-modelo-card-personalizado .t-Card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que o corpo cresça para preencher o espaço */
}

/* Título do card com altura fixa para duas linhas */
.r-modelo-card-personalizado .t-Card-title {
    /*font-weight: 700;
    font-size: 1.1rem;*/
    /*color: #333;*/
    height: 2.8em; /* Altura fixa para acomodar duas linhas */
    line-height: 1.4; /* Espaçamento entre linhas adequado */
    overflow: hidden; /* Esconde texto que ultrapasse */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita a exibição a 2 linhas */
    -webkit-box-orient: vertical;
    margin-bottom: 8px; /* Espaçamento consistente abaixo do título */
}

/* Valor do card com posição consistente */
.r-modelo-card-personalizado .t-Card-value {
    /*font-size: 1.5rem;
    font-weight: 600;*/
    /*color: #555;*/
    margin-top: 0; /* Removemos o margin-top variável */
    position: relative; /* Para posicionamento consistente */
}

/* CORREÇÃO PARA SPAN HORIZONTAL - Adicione esta regra na região PAI */
.r-modelo-card-personalizado {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
}