/*** ##### TESTES PARA O CARD AC 2.0 ##### ***/
/* ### Alinhamento dos Cards ###*/
.z-cards-alinhados-auto .t-Card-icon {
    margin-bottom: auto;
}

.z-cards-alinhados-auto .t-Card-title {
    margin-top: auto;
    margin-bottom: auto;    
}

.z-cards-alinhados-auto .t-Card-value {
    margin-top: auto ;
}

/* ESPAÇAMENTO VERTICAL */
.z-cards-espacados-todos .t-Card-icon {
    margin-bottom: 0%;
}

.z-cards-espacados-todos .t-Card-title {
    margin-top: 10%;
    margin-bottom: 10%;    
}

.z-cards-espacados-todos .t-Card-value {
    margin-top: 0%;
}

/* ### Mover o Valor de QTD ###*/
.z-value-center .t-Card-value {
    text-align: center;
}

.z-value-right .t-Card-value {
    text-align: right;
}


/* ### Mover os Icones ### */
/* Para aproveitar a classe de .t-Card-icon mantive-a como a classe para meu icone,
mas por conta disso algumas modificações no icone podem entrar em conflito com a definição padrão.
Com isso, alguns comportamente inesperados podem ocorrer ao tentar modificar a posição do icone.
Dito isso, um posicionamento do tipo Float foi a melhor forma q encontrei de alterar a posição dos icones
sem impactar sua aparência. */
.z-icon-left .t-Card-icon {
    float: left;
    margin-right: 95%;
}
.z-icon-left .t-Card-body {
    overflow: hidden; /* Para conter o float */
}

.z-icon-right .t-Card-icon {
    float: right;
    margin-left: 95%;
}
.z-icon-right .t-Card-body {
    overflow: hidden;
}

/* ###TEXTO### */
/* Classes para controle de tamanho de texto do Titulo e Valor dos cards */
/* ##TAMANHO VALOR## */
.z-tamanho-valor-pp .t-Card-value {
    font-size: 1.0rem;
}

.z-tamanho-valor-pm .t-Card-value {
    font-size: 1.25rem;
}

.z-tamanho-valor-m .t-Card-value {
    font-size: 1.5rem;
}

.z-tamanho-valor-g .t-Card-value {
    font-size: 2.0rem;
}

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

/* ESTADO SELECIONADO - LINHAS ADICIONADAS */
.t-Card.selected {
    transform: translateY(-8px);
}

/* LAYOUT COM APENAS UMA COLUNA */
.z-Cards--1col {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}


/* BORDAS */
.z-borda-quadrada .t-Card-wrap{
    border-radius: 0;
}

/* CORES DO TEXTO */
.z-cor-azul .t-Card-title,
.z-cor-azul .t-Card-value{
    color: rgb(30, 42, 63); 
}

/* FONTES DE TEXTO */
.z-fonte-times .t-Card-title,
.z-fonte-times .t-Card-value{
    font-family:'Times New Roman', Times, serif;
}

/* LINHA DE BORDA A ESQUERDA */
.z-borda-esquerda .t-Card-body{
    border-left: 4px solid var(--cor-borda, #3498db);
}

.z-borda-superior .t-Card-body{
    border-top: 4px solid var(--cor-borda, #3498db);
}


/* TAG do z_value_alt */
/* container */
.z-tag .t-Card-values{
    display:flex;
    align-items:baseline; /* alinha pela base do texto */
    gap:6px;
}

/* VALUE continua flexível para permitir alinhamento no card */
.z-tag .t-Card-value{
    flex:1;
}

/* pill verde*/
.z-tag .t-Card-value-alt{
    background-color:#2ecc71;
    color:#014d21;

    font-weight:700;
    font-size:11px;

    padding:4px 8px;
    border-radius:12px;

    display:inline-block;
    line-height:1;
    white-space:nowrap;
}


/* esconder se vazio */
.z-tag .t-Card-value-alt:empty{
    display:none;
}