/* =========================================
   ESTILOS ESPECÍFICOS: FOLHA DE VERIFICAÇÃO
========================================= */

/* O contêiner principal agora afasta as linhas umas das outras de forma limpa */
.item-verificacao { 
    margin-bottom: 1.2rem !important; 
    width: 100%;
}

/* O grupo interno envelopa os campos e aplica o layout flexível */
.item-verificacao-grupo {
    display: flex; 
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    width: 95%;
    border: 1px solid #cbd5e1; 
    padding: 0.8rem; 
    border-radius: 4px;
    background: #f8fafc;
}

/* Distribuição de larguras com a nova coluna de Categoria */
.item-categoria { flex: 1.2; min-width: 120px; padding: 0.45rem; border-radius: 4px; border: 1px solid #cbd5e1; background: #fff; }
.item-desc { flex: 3; min-width: 200px; padding: 0.45rem; border-radius: 4px; border: 1px solid #cbd5e1; }
.item-status { flex: 1; min-width: 120px; padding: 0.45rem; border-radius: 4px; border: 1px solid #cbd5e1; background: #fff; }
.item-obs { flex: 2; min-width: 150px; padding: 0.45rem; border-radius: 4px; border: 1px solid #cbd5e1; }

.btn-remover-item { 
    background: #ef4444; 
    color: white; 
    border: none; 
    padding: 0.5rem 0.8rem; 
    cursor: pointer; 
    border-radius: 4px;
    font-weight: bold;
    flex: 0;
    width: auto;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-remover-item:hover {
    background: #dc2626;
}



/* =========================================
   PAINEL DE TOTALIZADORES (DISCRETO)
========================================= */
.painel-totalizadores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* Espaço pequeno entre as tags */
    margin-bottom: 1.2rem;
    /* Sem fundo cinza ou bordas ao redor do painel */
}

.tot-box {
    display: inline-flex; /* Coloca o texto e o número na mesma linha */
    align-items: center;
    gap: 0.3rem;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 0.2rem 0.6rem; /* Fica fininho, como uma etiqueta */
    border-radius: 6px; /* Bordas arredondadas (estilo pill) */
}

.tot-box h3 {
    margin: 0;
    font-size: 0.75rem; /* Letra pequena */
    font-weight: 500;
    color: #475569;
    text-transform: none;
    letter-spacing: 0;
}

.tot-box .tot-valor {
    font-size: 0.8rem;
    font-weight: bold;
    color: #0f172a;
}

/* Destaque sutil apenas para o Total Geral */
.tot-box.destaque {
    background: #e0f2fe;
    border-color: #7dd3fc;
}

.tot-box.destaque h3 {
    color: #0284c7;
}

.tot-box.destaque .tot-valor {
    color: #0369a1;
}


/* =========================================
   ESTILIZAÇÃO DOS CARTÕES E STATUS
========================================= */
.card {
    margin-bottom: 15px;
    border: 1px solid #cbd5e1; /* Borda padrão cinza claro */
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* A LINHA LATERAL ESTÉTICA (PADRÃO PDCA) */
.card.status-valido {
    border-left: 5px solid #16a34a; /* Linha Verde para Íntegro */
}

.card.status-violado {
    border-left: 5px solid #dc2626; /* Linha Vermelha para Adulterado */
}

/* =========================================
   SISTEMA DE ACCORDION (CSS)
========================================= */
.card-header {
    padding: 15px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.card-body {
    padding: 15px;
    display: none; /* Escondido por defeito */
}

/* Classe que o JS vai adicionar para abrir */
.card-body.open {
    display: block; 
}

.accordion-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    margin-right: 8px;
    font-size: 0.8rem;
}

/* Rotação do ícone quando aberto */
.card-body.open ~ .card-header .accordion-icon, /* Se o header vier depois (não é o caso) */
.card-header.active .accordion-icon { /* Usando classe ativa no header */
    transform: rotate(-180deg);
}